// Hero with three layout variants. The form lives in a modal — opens via
// the global window.__amosOpenWaitlist() handle, set by App.
//
// Hero with two layout variants:
//   "default" — "Payments infrastructure for the mission economy."
//   "alt"     — "One stack. One operator. Mission-aligned."
// Both share the same oat-on-cacao design; only the headline copy changes.

function Hero({ variant = "default", onOpen, bgEffect = "off", nav, showLede = true, showCta = true, dark = false }) {
  return <HeroSplit variant={variant} onOpen={onOpen} bgEffect={bgEffect} nav={nav} showLede={showLede} showCta={showCta} dark={dark} />;
}

// ── SPLIT ────────────────────────────────────────────────────────
// Full-width centered hero. Headline swaps based on variant.
function HeroSplit({ variant = "default", onOpen, bgEffect = "off", nav, showLede = true, showCta = true, dark = false }) {
  const sectionBg = dark ? "var(--cacao)" : "var(--oat)";
  const fg = dark ? "var(--linen)" : "var(--cacao)";
  const h1Style = { ...heroStyles.h1Big, color: fg, textAlign: "center" };
  return (
    <section
      className="amos-hero"
      style={{
        background: sectionBg,
        color: fg,
        position: "relative",
        width: "100%",
        display: "flex",
        flexDirection: "column",
        boxSizing: "border-box",
        transition: "background-color 0.35s var(--ease-out), color 0.35s var(--ease-out)",
        paddingTop: "env(safe-area-inset-top, 0px)",
        paddingBottom: "env(safe-area-inset-bottom, 0px)",
        paddingLeft: "env(safe-area-inset-left, 0px)",
        paddingRight: "env(safe-area-inset-right, 0px)",
      }}
    >
      <HeroBackground effect={bgEffect} inverse={dark} />
      {/* Nav sits inside the hero (not sticky) so the centered Amos wordmark
          scrolls away with the hero. The page-level StickyBar handles the
          post-scroll Amos + CTA top bar. */}
      <div style={{ position: "relative", zIndex: 5, width: "100%" }}>
        {nav}
      </div>
      <div style={{ position: "relative", zIndex: 1, flex: 1, display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
        <div className="hero-inner" style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "60px 56px 80px", maxWidth: 1100, width: "100%", margin: "0 auto", boxSizing: "border-box" }}>
          <h1 className="hero-h1" style={h1Style}>
            {variant === "alt" ? (
              <React.Fragment>
                One stack.{" "}
                <span style={{ color: dark ? "var(--saffron-soft)" : "var(--saffron-deep)" }}>One operator.</span><br />
                Mission-aligned.
              </React.Fragment>
            ) : (
              <React.Fragment>
                Payments infrastructure<br />for the mission economy.
              </React.Fragment>
            )}
          </h1>
          {showLede && (
            <p className="hero-lede" style={{ ...heroStyles.lede, color: dark ? "var(--fg-on-dark-muted)" : heroStyles.lede.color, maxWidth: 720, textAlign: "center", margin: "0 auto 36px" }}>
              Amos is the only end-to-end processor purpose-built for mission-driven platforms,
              businesses, and enterprise nonprofits. Gateway, tokenization, routing, risk,
              ledger, payouts — owned end-to-end, with no resellers, no middlemen, no surprises
              on the statement. Built by the operators behind Anedot, for the platforms and
              nonprofits doing consequential work.
            </p>
          )}
          {showCta && <CTACluster onOpen={onOpen} centered inverse={dark} />}
        </div>
      </div>
    </section>
  );
}

// ── STACKED / INVERSE — REMOVED. The "alt" variant now reuses HeroSplit
//    with a different headline (see HeroSplit above). The cacao-on-cacao look
//    is no longer offered.

// ── CTA cluster — primary opens modal, secondary is "Read the brief"
function CTACluster({ onOpen, inverse, centered }) {
  const primaryBg  = inverse ? "var(--saffron)" : "var(--cacao)";
  const primaryFg  = inverse ? "var(--cacao)"   : "var(--linen)";
  const ghostFg    = inverse ? "var(--linen)"   : "var(--cacao)";
  const ghostBorder= inverse ? "rgba(239,227,209,0.28)" : "var(--border-strong)";
  return (
    <div style={{
      display: "flex",
      gap: 10,
      marginTop: 4,
      marginBottom: 0,
      justifyContent: centered ? "center" : "flex-start",
      flexWrap: "wrap",
    }}>
      <button type="button" onClick={onOpen} data-hero-cta="true" className="hero-cta" style={{
        fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 500,
        padding: "14px 24px", borderRadius: 12,
        background: primaryBg, color: primaryFg, border: 0, cursor: "pointer",
        boxShadow: "var(--shadow-inset)",
      }}>
        Join the waitlist
      </button>
    </div>
  );
}

// A small product-tone preview panel that replaces the inline form.
// Shows a few ledger lines so the page still has a "product" feel.
function PreviewPanel({ inverse }) {
  const c = inverse
    ? { bg: "rgba(247,239,226,0.04)", border: "rgba(239,227,209,0.14)", fg: "var(--linen)", muted: "rgba(239,227,209,0.6)" }
    : { bg: "var(--paper)", border: "var(--border-soft)", fg: "var(--cacao)", muted: "var(--walnut)" };
  const rows = [
    { id: "ch_9f3a", amt: "$250.00", net: "$244.50", t: "captured" },
    { id: "ch_9f29", amt: "$1,840.00", net: "$1,795.32", t: "captured" },
    { id: "ch_9f17", amt: "$72.00", net: "$70.49", t: "settled" },
    { id: "ch_9f02", amt: "$15,000.00", net: "$14,712.00", t: "settled" },
  ];
  return (
    <div style={{
      background: c.bg, border: `1px solid ${c.border}`, borderRadius: 22,
      padding: "22px 26px", boxShadow: inverse ? "none" : "var(--shadow-md)",
      width: "100%", maxWidth: 460, boxSizing: "border-box",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: c.muted }}>
          LEDGER · TODAY
        </span>
        <span style={{ width: 9, height: 9, borderRadius: 999, background: "var(--kelp)", boxShadow: "0 0 0 4px rgba(47,74,62,0.18)" }} />
      </div>
      <div style={{ borderTop: `1px solid ${c.border}` }}>
        {rows.map((r, i) => (
          <div key={r.id} style={{
            display: "grid",
            gridTemplateColumns: "auto 1fr auto",
            gap: 14,
            alignItems: "baseline",
            padding: "12px 0",
            borderBottom: `1px solid ${c.border}`,
            fontFamily: "var(--font-mono)",
            fontSize: 13.5,
            color: c.fg,
            fontVariantNumeric: "tabular-nums",
          }}>
            <span style={{ color: c.muted }}>{r.id}</span>
            <span style={{ color: c.muted, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" }}>{r.t}</span>
            <span style={{ color: c.fg }}>{r.amt}</span>
          </div>
        ))}
      </div>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        paddingTop: 14,
        fontFamily: "var(--font-mono)", fontSize: 12, color: c.muted, letterSpacing: "0.04em",
      }}>
        <span>NET TO MERCHANT</span>
        <span style={{ color: "var(--saffron-deep)", fontWeight: 500, fontSize: 14 }}>$16,822.31</span>
      </div>
    </div>
  );
}

// ── shared sub-components ────────────────────────────────────────
function Eyebrow({ text, centered, inverse }) {
  return (
    <div style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      alignSelf: centered ? "center" : "flex-start",
      fontFamily: "var(--font-mono)",
      fontSize: 12,
      letterSpacing: "0.18em",
      color: inverse ? "rgba(239,227,209,0.65)" : "var(--walnut)",
      textTransform: "uppercase",
      marginBottom: 28,
    }}>
      <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--saffron)" }} />
      {text}
    </div>
  );
}

function SpecLine({ inverse, fullWidth }) {
  const c = inverse ? "rgba(239,227,209,0.55)" : "var(--walnut)";
  const fg = inverse ? "var(--linen)" : "var(--cacao)";
  const border = inverse ? "rgba(239,227,209,0.14)" : "var(--border-soft)";
  const items = [
    { k: "INTEGRATION", v: "1 API" },
    { k: "STACK", v: "End-to-end" },
    { k: "FOUNDED", v: "2010" },
    { k: "STATUS", v: "Profitable · 0 debt" },
  ];
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "repeat(4, 1fr)",
      gap: 0,
      borderTop: `1px solid ${border}`,
      borderBottom: `1px solid ${border}`,
      marginTop: 36,
      width: fullWidth ? "100%" : "auto",
      maxWidth: fullWidth ? "none" : 540,
    }}>
      {items.map((it, i) => (
        <div key={it.k} style={{
          padding: "14px 14px 14px 0",
          borderLeft: i === 0 ? "none" : `1px solid ${border}`,
          paddingLeft: i === 0 ? 0 : 14,
          display: "flex",
          flexDirection: "column",
          gap: 4,
        }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em", color: c }}>{it.k}</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: fg, fontVariantNumeric: "tabular-nums" }}>{it.v}</div>
        </div>
      ))}
    </div>
  );
}

const heroStyles = {
  splitFull: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "120px 56px 80px",
    maxWidth: 1100,
    margin: "0 auto",
    boxSizing: "border-box",
  },
  split: {
    display: "grid",
    gridTemplateColumns: "1.1fr 1fr",
    gap: 64,
    alignItems: "start",
    padding: "72px 56px 96px",
    maxWidth: 1320,
    margin: "0 auto",
    boxSizing: "border-box",
  },
  copyCol: { display: "flex", flexDirection: "column", paddingTop: 24 },
  previewCol: { display: "flex", flexDirection: "column", paddingTop: 8, alignItems: "flex-end" },

  stacked: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "120px 56px 120px",
    maxWidth: 1100,
    margin: "0 auto",
    boxSizing: "border-box",
  },
  stackedCopy: { display: "flex", flexDirection: "column", alignItems: "center" },

  inverse: {
    background: "var(--cacao)",
    color: "var(--linen)",
    padding: "72px 0 96px",
  },
  inverseFullVh: {
    background: "var(--cacao)",
    color: "var(--linen)",
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column",
    boxSizing: "border-box",
  },
  inverseInner: {
    display: "grid",
    gridTemplateColumns: "1.1fr 1fr",
    gap: 64,
    alignItems: "start",
    padding: "0 56px",
    maxWidth: 1320,
    margin: "0 auto",
    boxSizing: "border-box",
  },
  inverseInnerFull: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "48px 56px 0",
    maxWidth: 1100,
    margin: "0 auto",
    boxSizing: "border-box",
  },
  copyColInverse: { display: "flex", flexDirection: "column", paddingTop: 24 },

  h1: {
    fontFamily: "var(--font-display)",
    fontSize: "clamp(56px, 7.2vw, 96px)",
    lineHeight: 1.04,
    letterSpacing: "-0.02em",
    color: "var(--cacao)",
    margin: "0 0 24px",
    textWrap: "balance",
    fontWeight: 400,
  },
  h1Big: {
    fontFamily: "var(--font-display)",
    fontSize: "clamp(64px, 9vw, 128px)",
    lineHeight: 1.02,
    letterSpacing: "-0.025em",
    color: "var(--cacao)",
    margin: "0 0 32px",
    textWrap: "balance",
    fontWeight: 400,
  },
  lede: {
    fontFamily: "var(--font-serif)",
    fontSize: 19,
    lineHeight: 1.55,
    color: "var(--walnut)",
    margin: "0 0 28px",
    maxWidth: 480,
    textWrap: "pretty",
  },
};

window.Hero = Hero;