/* Trust/Partners, Solutions, Infrastructure (light, responsive). */
const { Card, Badge, Button, Icon } = window.HudsonPayDesignSystem_198a48;

/* Animated count-up — fires once when scrolled into view. Parses an optional
   prefix ($), the number (commas tolerated) and a suffix (+, B, etc). */
function CountUp({ value }) {
  const ref = React.useRef(null);
  const m = String(value).match(/^([^\d]*)([\d,]+)(.*)$/);
  const prefix = m ? m[1] : "";
  const suffix = m ? m[3] : "";
  const target = m ? parseInt(m[2].replace(/,/g, ""), 10) : 0;
  const [display, setDisplay] = React.useState(m ? prefix + "0" + suffix : value);
  React.useEffect(() => {
    if (!m) return;
    const el = ref.current;
    if (!el) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { setDisplay(value); return; }
    let done = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (!e.isIntersecting || done) return;
        done = true;
        io.disconnect();
        const dur = 1500;
        const t0 = performance.now();
        const tick = (now) => {
          const p = Math.min(1, (now - t0) / dur);
          const eased = 1 - Math.pow(1 - p, 3);
          const cur = Math.round(target * eased);
          setDisplay(prefix + cur.toLocaleString("en-US") + suffix);
          if (p < 1) requestAnimationFrame(tick);
          else setDisplay(value);
        };
        requestAnimationFrame(tick);
      });
    }, { threshold: 0.5 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <span ref={ref}>{display}</span>;
}

/* ---------- SECTION 2 — Trust & Partners ---------- */
/* Two concentric starbursts spinning in opposite directions — a gear-like motif. */
function GearStack({ outer = 620, inner = 400 }) {
  const { Starburst } = window.HPSite;
  return (
    <div aria-hidden style={{ display: "grid", placeItems: "center" }}>
      <div style={{ gridArea: "1 / 1", animation: "hp-spin 120s linear infinite" }}>
        <Starburst size={outer} />
      </div>
      <div style={{ gridArea: "1 / 1", animation: "hp-spin-rev 80s linear infinite" }}>
        <Starburst size={inner} color="var(--violet-400)" />
      </div>
    </div>
  );
}

function TrustPartners() {
  const { Container, Starburst, useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  const metrics = [
    { v: "190+", l: "Countries supported" },
    { v: "64", l: "Currencies settled" },
    { v: "$48B", l: "Annual volume" },
    { v: "1,200+", l: "Enterprise clients" },
  ];
  const partnerCard = (name) => (
    <div key={name} className="hp-lift" style={{
      background: "var(--paper)", border: "1px solid var(--blue-100)", borderRadius: "var(--radius-lg)",
      boxShadow: "var(--shadow-md)", padding: "20px 26px", minWidth: mobile ? 0 : 200, textAlign: "center",
      fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--text-xl)", color: "var(--indigo-800)",
    }}>{name}</div>
  );
  const groups = [
    { t: "Banking Partners", n: ["Citco", "Northbank", "Meridian", "Arc Trust"] },
    { t: "Liquidity Providers", n: ["Lumen LP", "B2C2", "Galaxy", "Cumberland"] },
    { t: "Infrastructure", n: ["Aurora", "Fireblocks", "Modulr", "Stripe"] },
    { t: "Payment Networks", n: ["Visa", "Mastercard", "SWIFT", "SEPA"] },
  ];
  return (
    <section id="partners" style={{ background: "var(--grad-page-soft)", padding: mobile ? "72px 0" : "104px 0", position: "relative", overflow: "hidden" }}>
      <Container>
        <div className="hp-reveal" style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4,1fr)", gap: mobile ? 28 : 20, marginBottom: mobile ? 56 : 88 }}>
          {metrics.map(m => (
            <div key={m.l} style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: mobile ? "var(--text-4xl)" : "var(--text-5xl)", fontWeight: 600, color: "var(--indigo-800)", letterSpacing: "-0.03em" }}><CountUp value={m.v} /></div>
              <div style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", marginTop: 8 }}>{m.l}</div>
            </div>
          ))}
        </div>

        {mobile ? (
          <div className="hp-reveal" style={{ position: "relative", textAlign: "center" }}>
            <div aria-hidden style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", opacity: 0.6 }}>
              <GearStack outer={360} inner={230} />
            </div>
            <p style={{ position: "relative", fontSize: "var(--text-sm)", color: "var(--text-muted)", marginBottom: 16, lineHeight: 1.5, maxWidth: 320, marginInline: "auto" }}>
              Access institutional-grade over-the-counter trading with dedicated relationship managers.
            </p>
            <h2 style={{ position: "relative", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--text-3xl)", lineHeight: 1, color: "var(--indigo-800)", textTransform: "uppercase", letterSpacing: "-0.02em", marginBottom: 28 }}>
              In partnership with
            </h2>
            <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {["Citco", "Northbank", "Clear Trust", "Modulr"].map(partnerCard)}
            </div>
            <div style={{ position: "relative", marginTop: 16 }}>{partnerCard("Visa")}</div>
          </div>
        ) : (
          <div className="hp-reveal" style={{ position: "relative", display: "grid", placeItems: "center", minHeight: 540 }}>
            <div aria-hidden style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)" }}>
              <GearStack outer={620} inner={400} />
            </div>
            <div style={{ position: "relative", textAlign: "center", maxWidth: 360 }}>
              <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", marginBottom: 24, lineHeight: 1.5 }}>
                Access institutional-grade over-the-counter trading with dedicated relationship managers.
              </p>
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--text-4xl)", lineHeight: 1, color: "var(--indigo-800)", textTransform: "uppercase", letterSpacing: "-0.02em" }}>
                In partnership with
              </h2>
            </div>
            <div style={{ position: "absolute", left: 0, top: "26%" }}>{partnerCard("Citco")}</div>
            <div style={{ position: "absolute", left: 0, top: "52%" }}>{partnerCard("Northbank")}</div>
            <div style={{ position: "absolute", right: 0, top: "26%" }}>{partnerCard("Clear Trust")}</div>
            <div style={{ position: "absolute", right: 0, top: "52%" }}>{partnerCard("Modulr")}</div>
            <div style={{ position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)", textAlign: "center" }}>
              <div style={{ fontSize: 13, color: "var(--text-muted)", marginBottom: 12 }}>Trusted by forward-thinking companies</div>
              {partnerCard("Visa")}
            </div>
          </div>
        )}

        <div className="hp-reveal" style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4,1fr)", gap: 24, marginTop: 72 }}>
          {groups.map(g => (
            <div key={g.t} style={{ borderTop: "2px solid var(--blue-400)", paddingTop: 16 }}>
              <div style={{ fontSize: "var(--text-xs)", fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 14 }}>{g.t}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {g.n.map(name => (
                  <div key={name} style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-lg)", color: "var(--ink-700)" }}>{name}</div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ---------- SECTION 3 — Solutions ---------- */
function Solutions({ onPage }) {
  const { Container, DashChip, useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  const items = [
    { icon: "globe", t: "Global Payments", d: "Move money across 190+ countries on local rails with FX baked in.", chips: ["Local Payout", "Transparent FX"], currencies: ["USDT", "BTC", "GBP", "EUR", "USD"] },
    { icon: "arrow-left-right", t: "OTC Trading", d: "Deep institutional liquidity for large fiat and stablecoin trades.", chips: ["Dedicated Desk", "Institutional Rates", "24/7 Support"] },
    { icon: "credit-card", t: "Corporate Cards", d: "Spend digital assets anywhere with premium cards backed by stablecoins.", chips: ["Global Acceptance", "Real-Time Settlement", "Premium Rewards"] },
    { icon: "wallet", t: "Multi-Currency Accounts", d: "Hold, receive and convert 64 currencies from one named account.", chips: ["Local IBANs", "No Lock-In"] },
    { icon: "circle-dollar", t: "Stablecoin Settlement", d: "Settle in USDC/USDT with instant on/off-ramps to fiat.", chips: ["Sub-Second", "1:1 Redemption"] },
    { icon: "trending-up", t: "Treasury Solutions", d: "Automate cash sweeps, hedging and yield across entities.", chips: ["Auto-Convert", "Risk Dashboards"] },
  ];
  const coin = { USDT: "$", BTC: "₿", GBP: "£", EUR: "€", USD: "$" };
  return (
    <section id="solutions" style={{ background: "var(--paper)", padding: mobile ? "64px 0 80px" : "96px 0 112px", overflow: "hidden" }}>
      <div style={{ textAlign: "center", marginBottom: 8 }}>
        <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", maxWidth: 420, margin: "0 auto", paddingInline: 20 }}>
          Comprehensive financial services designed for sophisticated clients
        </p>
      </div>
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(34px,10vw,150px)", lineHeight: 0.9,
        color: "var(--indigo-800)", textAlign: "center", letterSpacing: "-0.04em", margin: mobile ? "8px 0 44px" : "8px 0 64px", whiteSpace: "nowrap" }}>
        OUR SOLUTIONS
      </h2>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3,1fr)", gap: 22 }}>
          {items.map(it => (
            <div key={it.t} className="hp-lift hp-reveal" style={{ background: "var(--paper)", border: "1px solid var(--blue-100)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-md)", padding: 28, display: "flex", flexDirection: "column", gap: 18 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", display: "grid", placeItems: "center", background: "var(--grad-brand)", color: "#fff", boxShadow: "var(--shadow-brand)" }}>
                  <Icon name={it.icon} size={22} />
                </span>
                <button className="hp-tap" onClick={() => onPage("getstarted")} style={{ width: 40, height: 40, borderRadius: "50%", border: "1px solid var(--blue-100)", background: "var(--paper)", cursor: "pointer", display: "grid", placeItems: "center", color: "var(--indigo-700)" }}>
                  <Icon name="arrow-up-right" size={18} />
                </button>
              </div>
              <div>
                <h3 style={{ fontSize: "var(--text-xl)", marginBottom: 8 }}>{it.t}</h3>
                <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", lineHeight: 1.55, margin: 0 }}>{it.d}</p>
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: "auto" }}>
                {it.chips.map(c => <DashChip key={c} icon="check">{c}</DashChip>)}
              </div>
              {it.currencies && (
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {it.currencies.map(cur => (
                    <span key={cur} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "5px 12px 5px 5px", borderRadius: "var(--radius-pill)", background: "var(--blue-50)", border: "1px solid var(--blue-100)", fontSize: 12, fontWeight: 700, color: "var(--indigo-700)" }}>
                      <span style={{ width: 22, height: 22, borderRadius: "50%", background: "var(--grad-brand)", color: "#fff", display: "grid", placeItems: "center", fontSize: 11 }}>{coin[cur]}</span>
                      {cur}
                    </span>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ---------- SECTION 4 — Infrastructure ---------- */
function Infrastructure() {
  const { Container, Eyebrow, useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  const rails = [
    { icon: "zap", t: "Real-Time Settlement", d: "Funds finalize in seconds, not days." },
    { icon: "arrow-left-right", t: "Cross-Border Transfers", d: "Local rails in every major corridor." },
    { icon: "wallet", t: "Multi-Currency Support", d: "Hold and net 64 currencies natively." },
    { icon: "layout-grid", t: "Enterprise APIs", d: "REST + webhooks, 99.99% uptime SLA." },
    { icon: "trending-up", t: "Institutional Liquidity", d: "Aggregated depth from tier-1 LPs." },
    { icon: "globe", t: "Global Payment Rails", d: "SWIFT, SEPA, ACH, FPS, PIX & more." },
  ];
  const steps = ["Originate", "Route", "Convert", "Settle"];
  return (
    <section id="infrastructure" style={{ background: "var(--grad-page-soft)", padding: mobile ? "72px 0" : "112px 0" }}>
      <Container>
        <div className="hp-reveal" style={{ maxWidth: 680, marginBottom: 48 }}>
          <Eyebrow>Infrastructure</Eyebrow>
          <h2 style={{ fontSize: "var(--text-3xl)", marginTop: 16, letterSpacing: "-0.025em" }}>
            A single rail network connecting every market
          </h2>
        </div>
        <div className="hp-reveal" style={{ display: "flex", alignItems: "center", gap: 0, marginBottom: 56, flexWrap: "wrap" }}>
          {steps.map((s, i) => (
            <React.Fragment key={s}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 24px", borderRadius: "var(--radius-pill)", background: "var(--grad-brand)", color: "#fff", boxShadow: "var(--shadow-brand)" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, opacity: 0.8 }}>0{i + 1}</span>
                <span style={{ fontWeight: 600, fontSize: "var(--text-md)" }}>{s}</span>
              </div>
              {i < steps.length - 1 && <div style={{ flex: 1, minWidth: 24, height: 2, background: "repeating-linear-gradient(90deg, var(--blue-300) 0 6px, transparent 6px 12px)" }} />}
            </React.Fragment>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3,1fr)", gap: 20 }}>
          {rails.map(r => (
            <div key={r.t} className="hp-lift hp-reveal" style={{ padding: 26, borderRadius: "var(--radius-lg)", background: "var(--paper)", border: "1px solid var(--blue-100)", boxShadow: "var(--shadow-sm)" }}>
              <span style={{ display: "inline-grid", placeItems: "center", width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--violet-50)", color: "var(--violet-600)", marginBottom: 14 }}><Icon name={r.icon} size={22} /></span>
              <h3 style={{ fontSize: "var(--text-lg)", marginBottom: 6 }}>{r.t}</h3>
              <p style={{ color: "var(--text-muted)", fontSize: "var(--text-sm)", margin: 0, lineHeight: 1.5 }}>{r.d}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { HPParts: Object.assign(window.HPParts || {}, { TrustPartners, Solutions, Infrastructure }) });