/* Shared layout primitives for the Hudson Pay marketing site (SnowPay-style,
   light & airy). Exposes window.HPSite.{ Container, Eyebrow, Section,
   CurrencyRing, Starburst, WaveField, DashChip } */
const { Icon, Logo } = window.HudsonPayDesignSystem_198a48;

/* responsive: true when viewport is phone-width */
function useIsMobile(bp = 860) {
  const [m, setM] = React.useState(typeof window !== "undefined" && window.innerWidth <= bp);
  React.useEffect(() => {
    const f = () => setM(window.innerWidth <= bp);
    window.addEventListener("resize", f); f();
    return () => window.removeEventListener("resize", f);
  }, [bp]);
  return m;
}

function Container({ children, narrow = false, style = {} }) {
  return (
    <div style={{
      width: "100%",
      maxWidth: narrow ? "var(--container-narrow)" : "var(--container-max)",
      margin: "0 auto",
      padding: "0 clamp(20px, 5vw, 32px)",
      ...style,
    }}>{children}</div>
  );
}

function Eyebrow({ children, center = false, style = {} }) {
  return (
    <div style={{
      display: "flex", justifyContent: center ? "center" : "flex-start",
      fontSize: "var(--text-xs)", fontWeight: 600,
      letterSpacing: "var(--tracking-caps)", textTransform: "uppercase",
      color: "var(--blue-600)", ...style,
    }}>{children}</div>
  );
}

function Section({ id, children, soft = false, style = {} }) {
  return (
    <section id={id} style={{
      position: "relative",
      padding: "120px 0",
      background: soft ? "var(--grad-page-soft)" : "var(--paper)",
      overflow: "hidden",
      ...style,
    }}>{children}</section>
  );
}

/* Small dashed-circle icon used inside chips / contact rows */
function DashIcon({ name, size = 26, color = "var(--blue-500)" }) {
  return (
    <span style={{ position: "relative", display: "inline-grid", placeItems: "center", width: size, height: size, flex: "none" }}>
      <span style={{ position: "absolute", inset: 0, borderRadius: "50%", border: `1px dashed ${color}`, opacity: 0.6 }} />
      <Icon name={name} size={size * 0.5} color={color} />
    </span>
  );
}

/* Pill chip with a dashed-circle leading icon (DEDICATED DESK, etc.) */
function DashChip({ icon = "shield", children }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 10,
      padding: "8px 16px 8px 8px", borderRadius: "var(--radius-pill)",
      border: "1px solid var(--blue-100)", background: "var(--paper)",
      fontSize: "var(--text-xs)", fontWeight: 700, letterSpacing: "0.06em",
      textTransform: "uppercase", color: "var(--indigo-700)",
      boxShadow: "var(--shadow-xs)",
    }}>
      <DashIcon name={icon} size={24} />
      {children}
    </span>
  );
}

/* Logomark inside a dashed ring with orbiting currency codes */
function CurrencyRing({ size = 240 }) {
  const codes = ["€ EUR", "$ USDC", "£ GBP", "$ USD", "MX$ MXN", "د.إ AED", "R$ BRL", "S$ SGD", "HK$ HKD", "₮ USDT"];
  const c = size / 2;
  const rText = c - 6;
  return (
    <div style={{ position: "relative", width: size, height: size, margin: "0 auto" }}>
      <div style={{ position: "absolute", inset: 6, borderRadius: "50%", border: "1px dashed var(--blue-300)", animation: "hp-spin 60s linear infinite" }} />
      {/* orbiting currency labels */}
      <div style={{ position: "absolute", inset: 0, animation: "hp-spin 60s linear infinite" }}>
        {codes.map((code, i) => {
          const a = (i / codes.length) * 2 * Math.PI - Math.PI / 2;
          const x = c + Math.cos(a) * rText;
          const y = c + Math.sin(a) * rText;
          return (
            <span key={code} style={{
              position: "absolute", left: x, top: y,
              transform: `translate(-50%,-50%) rotate(${(a * 180) / Math.PI + 90}deg)`,
              fontFamily: "var(--font-mono)", fontSize: size * 0.044, fontWeight: 600,
              color: "var(--indigo-700)", whiteSpace: "nowrap", letterSpacing: "0.02em",
            }}>{code}</span>
          );
        })}
      </div>
      {/* mark */}
      <span style={{ position: "absolute", inset: "27%", display: "grid", placeItems: "center" }}>
        <img src={window.HP_LOGO} alt="Hudson Pay" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
      </span>
    </div>
  );
}

/* Fine radial starburst — concentric rings of thin ticks (SVG) */
function Starburst({ size = 720, color = "var(--blue-300)" }) {
  const c = size / 2;
  const ring = (rOuter, rInner, count, opacity, w) => {
    const ticks = [];
    for (let i = 0; i < count; i++) {
      const a = (i / count) * 2 * Math.PI;
      ticks.push(
        <line key={i}
          x1={c + Math.cos(a) * rInner} y1={c + Math.sin(a) * rInner}
          x2={c + Math.cos(a) * rOuter} y2={c + Math.sin(a) * rOuter}
          stroke={color} strokeWidth={w} opacity={opacity} strokeLinecap="round" />
      );
    }
    return ticks;
  };
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: "block" }} aria-hidden>
      {ring(c * 0.98, c * 0.86, 220, 0.55, 1)}
      {ring(c * 0.80, c * 0.72, 160, 0.35, 1)}
      <circle cx={c} cy={c} r={c * 0.62} fill="none" stroke={color} strokeWidth="1" opacity="0.3" />
    </svg>
  );
}

/* Soft flowing topographic wave lines for the hero background (right side) */
function WaveField({ style = {} }) {
  const lines = Array.from({ length: 16 });
  return (
    <svg viewBox="0 0 600 700" preserveAspectRatio="none" style={{ display: "block", ...style }} aria-hidden>
      {lines.map((_, i) => {
        const off = i * 13;
        return (
          <path key={i}
            d={`M ${120 + off} -20 C ${260 + off} 140, ${20 + off} 320, ${200 + off} 460 S ${60 + off} 640, ${180 + off} 760`}
            fill="none" stroke={i % 3 === 0 ? "rgba(140,85,246,0.16)" : "rgba(61,123,247,0.16)"} strokeWidth="1.2" />
        );
      })}
    </svg>
  );
}

Object.assign(window, { HPSite: { Container, Eyebrow, Section, DashIcon, DashChip, CurrencyRing, Starburst, WaveField, useIsMobile } });