/* Top navigation + Hero (light, SnowPay-style, responsive). */
const { Logo, Button, Icon } = window.HudsonPayDesignSystem_198a48;

function Nav({ onNav, onPage }) {
  const { useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const root = document.getElementById("hp-scroll") || window;
    const get = () => (root === window ? window.scrollY : root.scrollTop);
    const onScroll = () => setScrolled(get() > 20);
    root.addEventListener("scroll", onScroll);
    return () => root.removeEventListener("scroll", onScroll);
  }, []);

  const go = (t) => { setOpen(false); onNav(t); };

  const link = (label, target) => (
    <button className="hp-tap" onClick={() => go(target)} style={{
      border: "none", background: "none", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 5,
      fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 700, letterSpacing: "0.08em",
      textTransform: "uppercase", color: "var(--indigo-800)", padding: "8px 4px",
    }}>{label}<Icon name="chevron-down" size={13} color="var(--blue-500)" /></button>
  );

  const pill = (children, onClick, filled) => (
    <button className="hp-tap" onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 10, height: 48, padding: "0 8px 0 20px",
      borderRadius: "var(--radius-pill)", cursor: "pointer", border: "1px solid var(--blue-100)",
      background: "var(--paper)", boxShadow: "var(--shadow-sm)",
      fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 700, letterSpacing: "0.08em",
      textTransform: "uppercase", color: "var(--indigo-800)",
    }}>
      {children}
      <span style={{ width: 34, height: 34, borderRadius: "50%", display: "grid", placeItems: "center",
        background: filled ? "var(--grad-brand)" : "var(--paper)", color: filled ? "#fff" : "var(--blue-500)", position: "relative" }}>
        {!filled && <span style={{ position: "absolute", inset: 0, borderRadius: "50%", border: "1px dashed var(--blue-300)" }} />}
        <Icon name={filled ? "zap" : "layout-grid"} size={15} />
      </span>
    </button>
  );

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled || open ? "rgba(255,255,255,0.85)" : "transparent",
      backdropFilter: scrolled || open ? "saturate(180%) blur(14px)" : "none",
      WebkitBackdropFilter: scrolled || open ? "saturate(180%) blur(14px)" : "none",
      borderBottom: scrolled || open ? "1px solid var(--border-subtle)" : "1px solid transparent",
      transition: "background var(--dur-base), border-color var(--dur-base)",
    }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 clamp(18px,5vw,32px)", height: mobile ? 68 : 84,
        display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <button className="hp-tap" onClick={() => onPage("home")} style={{ border: "none", background: "none", cursor: "pointer", padding: 0 }}>
          <Logo size={mobile ? 28 : 32} src={window.HP_LOGO} />
        </button>

        {!mobile && (
          <nav style={{ display: "flex", alignItems: "center", gap: 36 }}>
            {link("Partners", "partners")}
            {link("Solutions", "solutions")}
            {link("Contact", "contact")}
          </nav>
        )}

        {!mobile ? (
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            {pill("Sign In", () => onPage("signin"), false)}
            {pill("Get Started", () => onPage("getstarted"), true)}
          </div>
        ) : (
          <button className={`hp-menu${open ? " is-open" : ""}`} aria-label="Menu" aria-expanded={open} onClick={() => setOpen(o => !o)} style={{
            width: 46, height: 46, borderRadius: "50%", border: "1px solid var(--blue-100)", background: "var(--paper)",
            boxShadow: "var(--shadow-sm)", cursor: "pointer", display: "grid", placeItems: "center", color: "var(--indigo-800)" }}>
            <Icon name={open ? "x" : "menu"} size={20} />
          </button>
        )}
      </div>

      {/* mobile drawer */}
      {mobile && open && (
        <div style={{ padding: "8px 18px 24px", display: "flex", flexDirection: "column", gap: 6 }}>
          {[["Partners", "partners"], ["Solutions", "solutions"], ["Contact", "contact"]].map(([l, t]) => (
            <button key={t} className="hp-tap" onClick={() => go(t)} style={{ textAlign: "left", border: "none", background: "none", cursor: "pointer", padding: "12px 8px", fontSize: "var(--text-md)", fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--indigo-800)", borderBottom: "1px solid var(--border-subtle)" }}>{l}</button>
          ))}
          <div style={{ display: "flex", gap: 10, marginTop: 14 }}>
            <Button variant="secondary" block onClick={() => { setOpen(false); onPage("signin"); }}>Sign In</Button>
            <Button variant="primary" block onClick={() => { setOpen(false); onPage("getstarted"); }} iconRight={<Icon name="arrow-right" size={16} />}>Get Started</Button>
          </div>
        </div>
      )}
    </header>
  );
}

function Hero({ onPage, onNav }) {
  const { Container, CurrencyRing, WaveField, useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  return (
    <section id="top" style={{ position: "relative", background: "var(--grad-hero)", paddingBottom: 40 }}>
      <Container style={{ position: "relative" }}>
        <div style={{
          position: "relative", marginTop: 8, background: "var(--paper)", borderRadius: "var(--radius-2xl)",
          boxShadow: "var(--shadow-lg)", overflow: "hidden", padding: mobile ? "44px 24px 40px" : "72px 56px 56px",
          animation: "hp-fade-up .8s cubic-bezier(.22,1,.36,1) both",
        }}>
          <div aria-hidden style={{ position: "absolute", top: 0, right: 0, width: "46%", height: "100%", opacity: 0.9, maskImage: "linear-gradient(90deg, transparent, #000 40%)" }}>
            <WaveField style={{ width: "100%", height: "100%" }} />
          </div>

          <div style={{ position: "relative", display: "grid",
            gridTemplateColumns: mobile ? "1fr" : "auto auto 1fr", gap: mobile ? 24 : 40,
            alignItems: "center", justifyItems: mobile ? "center" : "stretch", textAlign: mobile ? "center" : "left" }}>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: mobile ? "clamp(40px,15vw,60px)" : "clamp(40px,5vw,68px)",
              lineHeight: 0.92, letterSpacing: "-0.02em", color: "var(--indigo-800)", margin: 0, textTransform: "uppercase" }}>
              Hudson<br />Pay
            </h1>
            <CurrencyRing size={mobile ? 200 : 210} />
            <p style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? "clamp(18px,5vw,22px)" : "clamp(18px,1.8vw,26px)",
              lineHeight: 1.18, letterSpacing: "-0.01em", color: "var(--indigo-800)", margin: 0, maxWidth: 360, textTransform: "uppercase" }}>
              Where global payment infrastructure meets global ambition
            </p>
          </div>

          <p style={{ position: "relative", marginTop: 36, fontSize: "var(--text-lg)", color: "var(--text-muted)", maxWidth: 560, lineHeight: 1.6, textAlign: mobile ? "center" : "left", marginInline: mobile ? "auto" : 0 }}>
            Hudson Pay empowers businesses and institutions with secure, scalable, and borderless financial infrastructure.
          </p>

          <div style={{ position: "relative", marginTop: 32, display: "flex", alignItems: "center", gap: mobile ? 14 : 28, flexWrap: "wrap", justifyContent: mobile ? "center" : "flex-start" }}>
            <Button className="hp-cta" variant="primary" size="lg" block={mobile} onClick={() => onPage("getstarted")} iconRight={<Icon name="arrow-right" size={18} />}>Get Started</Button>
            <Button className="hp-cta" variant="secondary" size="lg" block={mobile} onClick={() => onNav("contact")}>Speak With Our Team</Button>
            {!mobile && (
              <div style={{ display: "inline-flex", alignItems: "center", gap: 12, marginLeft: "auto" }}>
                <span style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", textAlign: "right", lineHeight: 1.3 }}>Access institutional-grade<br />OTC trading</span>
                <span style={{ width: 52, height: 52, borderRadius: "50%", display: "grid", placeItems: "center", position: "relative", color: "var(--blue-500)" }}>
                  <span style={{ position: "absolute", inset: 0, borderRadius: "50%", border: "1.5px dashed var(--blue-300)", animation: "hp-spin 30s linear infinite" }} />
                  <Icon name="send" size={20} />
                </span>
              </div>
            )}
          </div>

        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { HPParts: Object.assign(window.HPParts || {}, { Nav, Hero }) });