/* global React */
// BOB Inner Circle — landing page variants
// Two flavours: 'vault' (centered, ring-forward) and 'editorial' (asymmetric split)

const ICTokens = {
  bg: "#0A0A0B",
  bg1: "#121214",
  card: "#17181B",
  cardSoft: "#101013",
  border: "#26272D",
  borderHi: "rgba(242,93,0,.45)",
  fg: "#FFFFFF",
  fg2: "#D9DADF",
  fg3: "#8A8C95",
  fg4: "#5B5D66",
  orange: "#F25D00",
  orangeHot: "#FF7418",
  orangeSoft: "rgba(242,93,0,.14)",
  amber: "#FF9500",
  green: "#46E37A",
  red: "#FF3B3B",
  display: '"Funnel Display", system-ui, sans-serif',
  body: '"Inter", system-ui, sans-serif'
};

const USER_TYPES = [
{
  n: "01",
  tag: "Swaps · power",
  title: "Bitcoin swaps power users",
  body: "You move serious capital between chains. BTC↔EVM volume greater than $25k in the last 12 months. You have tried every aggregator and every route, and you have opinions about where the market falls short.",
  meta: ">$25k volume · 12 months"
},
{
  n: "02",
  tag: "Swaps · mobile",
  title: "Bitcoin swaps mobile users",
  body: "You manage your crypto life from your phone. You conduct swaps primarily on mobile and have experienced the friction firsthand — slow confirmations, clunky interfaces, quotes that vanish before you can act.",
  meta: "Primary device · mobile"
},
{
  n: "03",
  tag: "Crypto card",
  title: "Crypto card users",
  body: "You have bridged the gap between crypto and everyday spending. You hold assets in a web3 wallet and use one or more crypto cards for daily purchases. You live in both worlds and know exactly where the experience breaks.",
  meta: "Daily spend · onchain"
},
{
  n: "04",
  tag: "Savings",
  title: "Savings account users",
  body: "You hold $10k or more of BTC or stablecoins in onchain yield products today. You already use a neobank app. You looked at your bank's savings rate and your onchain yield in the same week and asked why the experience is so different.",
  meta: ">$10k · onchain yield"
},
{
  n: "05",
  tag: "Lending · mobile",
  title: "Mobile lending power users",
  body: "You have put your crypto to work as collateral. You have minted $10k or more of debt on mobile platforms. You understand the mechanics of onchain credit and have navigated the points where the UX fails.",
  meta: ">$10k debt · mobile"
}];


const LOZENGES = [
{ label: "Direct line to product", detail: "Private channel — Discord, Telegram or email." },
{ label: "Exclusive Incentives", detail: "Ongoing incentives, including fee-free swaps for those who qualify." },
{ label: "Milestone-based rewards", detail: "The more you bring, the more you get back" },
{ label: "Stay fully anonymous", detail: "Pseudonyms welcome. No KYC required to apply" }];


// ─────────────────────────────────────────────────────────────
// Shared building blocks
// ─────────────────────────────────────────────────────────────

function ICLogoLockup({ variant = "vault" }) {
  return (
    <a href="https://gobob.xyz" className="nav-logo" style={{ display: "flex", alignItems: "center", textDecoration: "none" }}>
      <img src="design-system/assets/logos/bob-logostrapline-default.png" alt="BOB — The Bank of Bitcoin" style={{ height: 30, width: "auto", display: "block" }} />
    </a>);

}

function ICDot({ color = ICTokens.orange, size = 6 }) {
  return <span style={{ width: size, height: size, borderRadius: 999, background: color, display: "inline-block", boxShadow: `0 0 12px ${color}` }} />;
}

function ICChip({ children, dot = true, color = ICTokens.orange }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "7px 14px", borderRadius: 999,
      border: `1px solid ${ICTokens.border}`,
      background: "rgba(255,255,255,.02)",
      fontFamily: ICTokens.body, fontSize: 12, fontWeight: 500,
      color: ICTokens.fg2, letterSpacing: ".06em", textTransform: "uppercase"
    }}>
      {dot && <ICDot color={color} />}
      {children}
    </span>);

}

// Concentric rings — the BOB radio-wave signature
function ICRings({ size = 720, intensity = 1 }) {
  const rings = [0.12, 0.18, 0.28, 0.42, 0.58, 0.78, 1.0];
  return (
    <div aria-hidden style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", width: size, height: size, pointerEvents: "none" }}>
      {rings.map((r, i) =>
      <div key={i} style={{
        position: "absolute", left: "50%", top: "50%",
        width: size * r, height: size * r * 0.92,
        transform: "translate(-50%,-50%)",
        border: `1px solid rgba(242,93,0,${(0.55 - i * 0.05) * intensity})`,
        borderRadius: "50%"
      }} />
      )}
    </div>);

}

// Warm orange floor gradient
function ICFloorGlow({ height = 540, opacity = 1 }) {
  return (
    <div aria-hidden style={{
      position: "absolute", left: 0, right: 0, bottom: 0, height,
      background: "radial-gradient(ellipse 80% 100% at 50% 100%, rgba(242,93,0,.55) 0%, rgba(242,93,0,.12) 35%, transparent 70%)",
      opacity, pointerEvents: "none"
    }} />);

}

// Grid floor lines
function ICGridFloor({ opacity = .08 }) {
  return (
    <div aria-hidden style={{
      position: "absolute", inset: 0,
      backgroundImage:
      `linear-gradient(to right, rgba(242,93,0,${opacity}) 1px, transparent 1px),` +
      `linear-gradient(to bottom, rgba(242,93,0,${opacity * .8}) 1px, transparent 1px)`,
      backgroundSize: "60px 60px",
      WebkitMaskImage: "radial-gradient(75% 70% at 50% 90%, #000 30%, transparent 100%)",
      maskImage: "radial-gradient(75% 70% at 50% 90%, #000 30%, transparent 100%)",
      pointerEvents: "none"
    }} />);

}
// Hero visual A — bitcoin coin + rings
function ICCoinRings({ height = 560 }) {
  return (
    <div style={{ position: "relative", width: "100%", height, overflow: "hidden" }}>
      <ICRings size={Math.min(height * 1.4, 780)} />
      <img src="design-system/assets/imagery/bitcoin-3d-coin.png" alt=""
      style={{
        position: "absolute", left: "50%", top: "50%",
        transform: "translate(-50%,-50%)",
        width: height * 0.62, height: "auto",
        filter: "drop-shadow(0 30px 60px rgba(242,93,0,.45))"
      }} />
    </div>);

}
// ─────────────────────────────────────────────────────────────
// Application form panel — Google Form iframe (or stand-in)
// ─────────────────────────────────────────────────────────────

function ICFormPanel({ id, variant }) {
  return (
    <div id={id} className="ic-form-panel" style={{
      position: "relative",
      background: "linear-gradient(180deg, #131316 0%, #0d0d10 100%)",
      border: `1px solid ${ICTokens.border}`,
      borderRadius: 28,
      padding: variant === "editorial" ? "32px 32px 28px" : "40px 40px 36px",
      boxShadow: "0 40px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04)",
      overflow: "hidden"
    }}>
      {/* corner accent */}
      <div aria-hidden style={{
        position: "absolute", top: -1, right: -1,
        padding: "8px 14px",
        background: "linear-gradient(90deg, transparent, rgba(242,93,0,.18))",
        borderLeft: `1px solid ${ICTokens.borderHi}`,
        borderBottom: `1px solid ${ICTokens.borderHi}`,
        borderBottomLeftRadius: 12,
        fontFamily: ICTokens.body, fontSize: 11, fontWeight: 600,
        color: ICTokens.orange, letterSpacing: ".14em"
      }}>APPLY</div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 20, marginBottom: 20 }}>
        <div>
          <div style={{ fontFamily: ICTokens.body, fontSize: 11, fontWeight: 600, color: ICTokens.orange, letterSpacing: ".18em", marginBottom: 8 }}>APPLICATION · 5 MIN</div>
          <div style={{ fontFamily: ICTokens.display, fontSize: 28, fontWeight: 600, letterSpacing: "-.02em", lineHeight: 1.1 }}>Apply for the Inner Circle</div>
          <div style={{ fontFamily: ICTokens.body, fontSize: 14, color: ICTokens.fg3, marginTop: 8, maxWidth: 480 }}>
            Tell us about how you use crypto today. Pick your communications channel. Stay anonymous if you prefer.
          </div>
        </div>
      </div>

      {/* Application wizard — POSTs to Google Forms */}
      <ICApplicationWizard />

      <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: ICTokens.body, fontSize: 12, color: ICTokens.fg4 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <ICDot color={ICTokens.green} size={6} /> Submissions go directly to the BOB team
        </span>
        <span>~5 min · stay anonymous</span>
      </div>
    </div>);

}
// ─────────────────────────────────────────────────────────────
// Sections shared by both variants
// ─────────────────────────────────────────────────────────────

function ICUserTypeList({ variant }) {
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {USER_TYPES.map((t, i) =>
      <div key={t.n} className="ic-user-type" style={{
        display: "grid",
        gridTemplateColumns: "120px 1fr 220px",
        gap: 32,
        padding: "32px 0 36px",
        borderTop: `1px solid ${ICTokens.border}`,
        alignItems: "start"
      }}>
          <div className="ic-user-type-num" style={{
          fontFamily: ICTokens.display, fontWeight: 800,
          lineHeight: 1, letterSpacing: "-.04em",
          color: ICTokens.orange,
          background: "linear-gradient(180deg, #FF9500 0%, #F25D00 70%)",
          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent"
        }}>{t.n}</div>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
              <span style={{
              fontFamily: ICTokens.body, fontSize: 11, fontWeight: 600,
              color: ICTokens.orange, letterSpacing: ".18em", textTransform: "uppercase"
            }}>{t.tag}</span>
            </div>
            <div style={{ fontFamily: ICTokens.display, fontSize: 28, fontWeight: 600, color: ICTokens.fg, letterSpacing: "-.01em", lineHeight: 1.15, marginBottom: 12 }}>{t.title}</div>
            <div style={{ fontFamily: ICTokens.body, fontSize: 15.5, color: ICTokens.fg2, lineHeight: 1.55, maxWidth: 580, textWrap: "pretty" }}>{t.body}</div>
          </div>
          <div className="ic-user-type-meta" style={{
          justifySelf: "end", alignSelf: "start",
          padding: "12px 16px",
          border: `1px solid ${ICTokens.border}`,
          borderRadius: 12,
          background: "rgba(255,255,255,.02)",
          fontFamily: ICTokens.body, fontSize: 12, color: ICTokens.fg3,
          display: "flex", alignItems: "center", gap: 10,
          whiteSpace: "nowrap"
        }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: ICTokens.orange }} />
            <span style={{ color: ICTokens.fg2, fontWeight: 500 }}>{t.meta}</span>
          </div>
        </div>
      )}
      <div style={{ borderTop: `1px solid ${ICTokens.border}` }} />
    </div>);

}

function ICRewardsSection() {
  const tiers = [
  {
    stage: "Day 1",
    label: "On acceptance",
    title: "Fee-free swaps on BOB Gateway",
    body: "Once you commit to the program as a VIP Inner Circle member, you will receive zero swap fees on BOB Gateway swaps."
  },
  {
    stage: "Ongoing",
    label: "Milestone-based",
    title: "Rewards scale with contribution",
    body: "Show up. Test. Tear features apart. Rewards unlock against participation milestones, not vanity metrics. The more you bring to the table, the more you get back."
  },
  {
    stage: "Always",
    label: "Direct line",
    title: "First look at every release",
    body: "The Inner Circle sees roadmap drafts, prototypes and feature flags before anyone else. Your feedback shapes what ships, and what gets killed."
  }];

  return (
    <div className="ic-rewards-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
      {tiers.map((t, i) =>
      <div key={i} className="ic-reward-card" style={{
        position: "relative",
        background: ICTokens.card,
        border: `1px solid ${ICTokens.border}`,
        borderRadius: 22,
        padding: "28px 26px 28px",
        minHeight: 280,
        display: "flex", flexDirection: "column",
        overflow: "hidden"
      }}>
          <div aria-hidden style={{
          position: "absolute", top: -40, right: -40, width: 180, height: 180, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(242,93,0,.18) 0%, transparent 70%)"
        }} />
          <div style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
            <span style={{
            fontFamily: ICTokens.body, fontSize: 11, fontWeight: 600,
            color: ICTokens.orange, letterSpacing: ".18em", textTransform: "uppercase"
          }}>{t.label}</span>
            <span style={{
            fontFamily: ICTokens.display, fontSize: 13, fontWeight: 600,
            color: ICTokens.fg3, letterSpacing: "-.01em",
            padding: "4px 10px", border: `1px solid ${ICTokens.border}`, borderRadius: 999
          }}>{t.stage}</span>
          </div>
          <div style={{ position: "relative", fontFamily: ICTokens.display, fontSize: 24, fontWeight: 600, color: ICTokens.fg, lineHeight: 1.15, letterSpacing: "-.01em", marginBottom: 12 }}>{t.title}</div>
          <div style={{ position: "relative", fontFamily: ICTokens.body, fontSize: 14.5, color: ICTokens.fg2, lineHeight: 1.55, textWrap: "pretty" }}>{t.body}</div>
        </div>
      )}
    </div>);

}

function ICTrustStrip() {
  const points = [
  { k: "Stay anonymous", v: "Pseudonyms welcome. We never ask for legal identity or KYC to apply or participate." },
  { k: "Your channel, your rules", v: "Pick Discord, Telegram or email. Mute the channel any time. Leave any time." },
  { k: "No marketing list", v: "Inner Circle isn't a newsletter funnel. Your data stays inside the program — full stop." },
  { k: "Walk away at will", v: "There is no lock-up, no contract, no expectation. Contribute when it's worth your time." }];

  return (
    <div className="ic-trust-strip" style={{
      background: "linear-gradient(180deg, #0c0c0e 0%, #08080a 100%)",
      border: `1px solid ${ICTokens.border}`,
      borderRadius: 24,
      padding: "32px 36px"
    }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 24, gap: 24 }}>
        <div>
          <div style={{ fontFamily: ICTokens.body, fontSize: 11, fontWeight: 600, color: ICTokens.orange, letterSpacing: ".18em", marginBottom: 8 }}>PRIVACY · BY DEFAULT</div>
          <div className="ic-trust-h2" style={{ fontFamily: ICTokens.display, fontWeight: 600, letterSpacing: "-.02em", color: ICTokens.fg, lineHeight: 1.1 }}>
            Stay anonymous. <span style={{ color: ICTokens.fg3 }}>Or don't. Up to you.</span>
          </div>
        </div>
      </div>
      <div className="ic-trust-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
        {points.map((p, i) =>
        <div key={i} style={{ paddingLeft: 16, borderLeft: `1px solid ${ICTokens.border}` }}>
            <div style={{ fontFamily: ICTokens.display, fontSize: 16, fontWeight: 600, color: ICTokens.fg, letterSpacing: "-.01em", marginBottom: 8 }}>{p.k}</div>
            <div style={{ fontFamily: ICTokens.body, fontSize: 13.5, color: ICTokens.fg3, lineHeight: 1.55 }}>{p.v}</div>
          </div>
        )}
      </div>
    </div>);

}

function ICFooter() {
  return (
    <footer style={{
      padding: "40px 0 32px",
      borderTop: `1px solid ${ICTokens.border}`,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      flexWrap: "wrap", gap: 16
    }}>
      <a href="https://gobob.xyz" className="footer-logo" style={{ display: "flex", alignItems: "center", gap: 14, textDecoration: "none" }}>
        <img src="design-system/assets/logos/bob-symbol.png" alt="BOB" style={{ height: 22 }} />
        <span style={{ fontFamily: ICTokens.body, fontSize: 13, color: ICTokens.fg3 }}>© 2026 BOB · The Bank of Bitcoin</span>
      </a>
      <div style={{ display: "flex", gap: 20, fontFamily: ICTokens.body, fontSize: 13, color: ICTokens.fg3 }}>
        <a href="https://gobob.xyz" className="footer-link" style={{ color: ICTokens.fg3, textDecoration: "none" }}>gobob.xyz</a>
        <a href="https://docs.gobob.xyz" className="footer-link" style={{ color: ICTokens.fg3, textDecoration: "none" }}>Docs</a>
        <a href="https://gobob.xyz/privacy" className="footer-link" style={{ color: ICTokens.fg3, textDecoration: "none" }}>Privacy</a>
        <a href="https://gobob.xyz/terms" className="footer-link" style={{ color: ICTokens.fg3, textDecoration: "none" }}>Terms</a>
      </div>
    </footer>);

}

// ─────────────────────────────────────────────────────────────
// Variant A — "Vault": centered, ring-forward, scarcity hero
// ─────────────────────────────────────────────────────────────

function ICLandingVault() {
  return (
    <div style={{
      width: "100%", background: ICTokens.bg, color: ICTokens.fg,
      fontFamily: ICTokens.body
    }}>
      {/* Top bar */}
      <header className="ic-header" style={{
        padding: "26px 64px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        borderBottom: `1px solid ${ICTokens.border}`
      }}>
        <ICLogoLockup variant="vault" />
        <div className="ic-header-meta" style={{ display: "flex", alignItems: "center", gap: 16, fontFamily: ICTokens.body, fontSize: 13, color: ICTokens.fg3 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <ICDot color={ICTokens.green} size={6} />
            Applications open
          </span>
          <span style={{ color: ICTokens.fg4 }}>·</span>
          <span>vip.gobob.xyz</span>
        </div>
      </header>

      {/* Hero */}
      <section className="ic-hero" style={{ position: "relative", padding: "100px 64px 110px", overflow: "hidden", textAlign: "center" }}>
        <ICGridFloor opacity={.07} />
        <ICFloorGlow height={620} />
        <div style={{ position: "absolute", inset: 0 }}>
          <div style={{ position: "absolute", left: "50%", top: "55%", transform: "translate(-50%,-50%)" }}>
            <ICRings size={920} />
          </div>
        </div>

        <div style={{ position: "relative", maxWidth: 980, margin: "0 auto" }}>
          <h1 className="ic-hero-h1" style={{
            margin: "28px 0 0",
            fontFamily: ICTokens.display, fontWeight: 600,
            letterSpacing: "-.035em",
            textWrap: "balance"
          }}>
            <span style={{ color: ICTokens.fg }}>The BOB </span>
            <span style={{
              backgroundImage: "linear-gradient(180deg, #FFB680 0%, #F25D00 55%, #8F3600 100%)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent"
            }}>Inner Circle</span>
          </h1>
          <p style={{
            margin: "28px auto 0", maxWidth: 660,
            fontFamily: ICTokens.body, fontSize: 19, lineHeight: 1.55, color: ICTokens.fg2, textWrap: "pretty"
          }}>
            A small, carefully selected group of Bitcoin power users who help define what the Bank of Bitcoin builds next. Not a feedback form. A direct line to the product team.
          </p>

          {/* Scarcity hero stat */}
          <div style={{ marginTop: 56, display: "flex", justifyContent: "center" }}>
            <div className="ic-scarcity" style={{
              position: "relative",
              display: "flex", alignItems: "stretch", gap: 0,
              background: "rgba(12,12,14,.6)",
              border: `1px solid ${ICTokens.borderHi}`,
              borderRadius: 22,
              padding: 4,
              backdropFilter: "blur(8px)",
              boxShadow: "0 30px 80px rgba(242,93,0,.18), inset 0 1px 0 rgba(255,255,255,.04)"
            }}>
              <div className="ic-scarcity-left" style={{ padding: "22px 32px", display: "flex", alignItems: "center", gap: 18, borderRight: `1px solid ${ICTokens.border}` }}>
                <div className="ic-scarcity-num" style={{
                  fontFamily: ICTokens.display, fontWeight: 800,
                  lineHeight: 1, letterSpacing: "-.05em",
                  backgroundImage: "linear-gradient(180deg, #FFFFFF 0%, #FFB680 60%, #F25D00 100%)",
                  WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent"
                }}>&lt;150</div>
                <div style={{ textAlign: "left" }}>
                  <div style={{ fontFamily: ICTokens.body, fontSize: 11, fontWeight: 600, letterSpacing: ".18em", color: ICTokens.orange }}>VIP PLACES</div>
                  <div style={{ fontFamily: ICTokens.body, fontSize: 14, color: ICTokens.fg2, marginTop: 4, maxWidth: 220, lineHeight: 1.4 }}>
                    Strictly limited across all five product categories.
                  </div>
                </div>
              </div>
              <div className="ic-scarcity-right" style={{ padding: "22px 28px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 8, textAlign: "left" }}>
                <div style={{ fontFamily: ICTokens.body, fontSize: 11, fontWeight: 600, letterSpacing: ".18em", color: ICTokens.fg3 }}>EVERYONE ELSE</div>
                <div style={{ fontFamily: ICTokens.body, fontSize: 14, color: ICTokens.fg2, lineHeight: 1.4, maxWidth: 240 }}>
                  Join as a regular member for early-access to future beta programs.
                </div>
              </div>
            </div>
          </div>

          <div className="ic-cta-row" style={{ marginTop: 36, display: "flex", justifyContent: "center", gap: 14, flexWrap: "wrap" }}>
            <a href="#apply" className="cta-apply" data-cta-location="hero" style={{
              background: ICTokens.orange, color: "#fff",
              padding: "16px 28px", borderRadius: 999,
              fontFamily: ICTokens.body, fontWeight: 600, fontSize: 15, letterSpacing: ".01em",
              textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10,
              boxShadow: "0 14px 36px rgba(242,93,0,.45)"
            }}>Apply for the Inner Circle <span style={{ fontSize: 18 }}>→</span></a>
            <a href="#who" className="cta-secondary" data-cta-location="hero" style={{
              background: "transparent", color: ICTokens.fg,
              padding: "16px 24px", borderRadius: 999, border: `1px solid ${ICTokens.border}`,
              fontFamily: ICTokens.body, fontWeight: 500, fontSize: 15,
              textDecoration: "none"
            }}>See who we're looking for</a>
          </div>
        </div>
      </section>

      {/* Lozenges */}
      <section className="ic-section-padded" style={{ padding: "0 64px 80px" }}>
        <div className="ic-lozenges" style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14,
          maxWidth: 1280, margin: "0 auto"
        }}>
          {LOZENGES.map((l, i) =>
          <div key={i} className="ic-lozenge" style={{
            background: ICTokens.card,
            border: `1px solid ${ICTokens.border}`,
            borderRadius: 18,
            padding: "22px 22px",
            minHeight: 132,
            display: "flex", flexDirection: "column", justifyContent: "space-between"
          }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{
                width: 28, height: 28, borderRadius: 8,
                background: "rgba(242,93,0,.10)",
                border: `1px solid ${ICTokens.borderHi}`,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontFamily: ICTokens.display, fontWeight: 800, color: ICTokens.orange, fontSize: 13
              }}>0{i + 1}</span>
                <span style={{ fontFamily: ICTokens.body, fontSize: 11, fontWeight: 600, color: ICTokens.fg3, letterSpacing: ".14em", textTransform: "uppercase" }}>Member benefit</span>
              </div>
              <div>
                <div style={{ fontFamily: ICTokens.display, fontSize: 18, fontWeight: 600, color: ICTokens.fg, letterSpacing: "-.01em", marginBottom: 6, lineHeight: 1.2 }}>{l.label}</div>
                <div style={{ fontFamily: ICTokens.body, fontSize: 13.5, color: ICTokens.fg3, lineHeight: 1.5 }}>{l.detail}</div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Steer the bank — pitch + form */}
      <section className="ic-section-padded" style={{ padding: "32px 64px 96px" }}>
        <div className="ic-apply-grid" style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 520px", gap: 56, alignItems: "start" }}>
          <div>
            <div style={{ fontFamily: ICTokens.body, fontSize: 12, fontWeight: 600, color: ICTokens.orange, letterSpacing: ".18em", marginBottom: 16 }}>HELP STEER THE BANK OF BITCOIN</div>
            <h2 className="ic-section-h2" style={{ margin: 0, fontFamily: ICTokens.display, fontWeight: 600, color: ICTokens.fg, letterSpacing: "-.025em" }}>
              Help BOB build products you actually want to use.<br /><span style={{ color: ICTokens.orange }}></span>
            </h2>
            <div style={{ marginTop: 24, fontFamily: ICTokens.body, fontSize: 17, color: ICTokens.fg2, lineHeight: 1.55, maxWidth: 540, textWrap: "pretty" }}>
              Inner Circle members get a direct line to the BOB product team in a private channel of their choice. Your experience helps shape product decisions - what gets built, what gets killed, and what gets fixed first.
              <br /><br />
              The goal is not a large community. It is the right group of people in a room together, moving fast.
            </div>

            <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 14 }}>
              {[
              "Complete the application form",
              "Choose your channel — Discord, Telegram or email",
              "If accepted: kickoff conversation with the BOB team"].
              map((step, i) =>
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 16 }}>
                  <div style={{
                  width: 36, height: 36, borderRadius: 999,
                  background: "rgba(242,93,0,.10)",
                  border: `1px solid ${ICTokens.borderHi}`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: ICTokens.display, fontWeight: 800, color: ICTokens.orange, fontSize: 14
                }}>{String(i + 1).padStart(2, "0")}</div>
                  <div style={{ fontFamily: ICTokens.body, fontSize: 15, color: ICTokens.fg2 }}>{step}</div>
                </div>
              )}
            </div>
          </div>
          <ICFormPanel id="apply" variant="vault" />
        </div>
      </section>

      {/* Who we're looking for */}
      <section id="who" className="ic-section-padded" style={{ padding: "32px 64px 96px", maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
          <div>
            <div style={{ fontFamily: ICTokens.body, fontSize: 12, fontWeight: 600, color: ICTokens.orange, letterSpacing: ".18em", marginBottom: 16 }}>WHO WE'RE LOOKING FOR · FIVE GROUPS</div>
            <h2 className="ic-section-h2" style={{ margin: 0, fontFamily: ICTokens.display, fontWeight: 600, color: ICTokens.fg, letterSpacing: "-.025em" }}>
              Power users who understand the products<br /><span style={{ color: ICTokens.fg3 }}>and feel the friction.</span>
            </h2>
          </div>
          <div style={{ fontFamily: ICTokens.body, fontSize: 14, color: ICTokens.fg3, maxWidth: 460 }}>We will accept fewer than 150 VIP members across all five categories. If one of these is unmistakably you, please apply.

          </div>
        </div>
        <ICUserTypeList variant="vault" />
      </section>

      {/* Rewards */}
      <section className="ic-section-padded" style={{ padding: "32px 64px 96px", maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ marginBottom: 32 }}>
          <div style={{ fontFamily: ICTokens.body, fontSize: 12, fontWeight: 600, color: ICTokens.orange, letterSpacing: ".18em", marginBottom: 16 }}>WHAT YOU GET · REWARDS</div>
          <h2 className="ic-section-h2" style={{ margin: 0, fontFamily: ICTokens.display, fontWeight: 600, color: ICTokens.fg, letterSpacing: "-.025em" }}>
            The more you bring to the table,<br /><span style={{ color: ICTokens.orange }}>the more you get back.</span>
          </h2>
        </div>
        <ICRewardsSection />
      </section>

      {/* Trust strip */}
      <section className="ic-section-padded" style={{ padding: "32px 64px 96px", maxWidth: 1280, margin: "0 auto" }}>
        <ICTrustStrip />
      </section>

      {/* CTA closer */}
      <section className="ic-closer" style={{ position: "relative", padding: "80px 64px 120px", overflow: "hidden", textAlign: "center" }}>
        <ICFloorGlow height={420} />
        <div style={{ position: "relative", maxWidth: 820, margin: "0 auto" }}>
          <h2 className="ic-closer-h2" style={{ margin: 0, fontFamily: ICTokens.display, fontWeight: 600, color: ICTokens.fg, letterSpacing: "-.03em", textWrap: "balance" }}>
            Spaces are limited. <span style={{ color: ICTokens.orange }}>Applications are open now.</span>
          </h2>
          <div className="ic-cta-row" style={{ marginTop: 28, display: "flex", justifyContent: "center", gap: 14 }}>
            <a href="#apply" className="cta-apply" data-cta-location="closer" style={{
              background: ICTokens.orange, color: "#fff",
              padding: "18px 32px", borderRadius: 999,
              fontFamily: ICTokens.body, fontWeight: 600, fontSize: 16,
              textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10,
              boxShadow: "0 14px 36px rgba(242,93,0,.45)"
            }}>Apply for the BOB Inner Circle <span style={{ fontSize: 18 }}>→</span></a>
          </div>
          <div style={{ marginTop: 18, fontFamily: ICTokens.body, fontSize: 13, color: ICTokens.fg4, letterSpacing: ".06em" }}>vip.gobob.xyz</div>
        </div>
      </section>

      <div className="ic-section-padded" style={{ padding: "0 64px" }}><ICFooter /></div>
    </div>);

}

// ─────────────────────────────────────────────────────────────
// Variant B — "Editorial": asymmetric split, restrained
// ─────────────────────────────────────────────────────────────
Object.assign(window, { ICLandingVault, ICTokens });