/* hero.jsx — Section 1: Hero
   Two-column desktop. Big confident type left, four-layer architecture right.
   No timeline-pressure copy; tone matches dittonetwork.io (leading-slash mono
   eyebrows, short punchy two-part lines).
*/

function HeroLayerCard({ index, name, kicker, contents, accent = false, mobile = false }) {
  return (
    <div className="tile-hover" style={{
      position:"relative",
      border: "1px solid " + (accent ? "var(--accent-line)" : "var(--line)"),
      background: accent
        ? "linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%)"
        : "var(--bg-elev-2)",
      padding: mobile ? "13px 14px" : "18px 20px",
      display:"flex", alignItems:"center", justifyContent:"space-between", gap:16,
      borderRadius:"var(--r-3)",
    }}>
      {/* connector dot on the left edge — visually plugs into the canton spine */}
      <span style={{
        position:"absolute", left:-5, top:"50%", transform:"translateY(-50%)",
        width:9, height:9, borderRadius:"50%",
        background: accent ? "var(--accent)" : "var(--bg)",
        border:"1px solid " + (accent ? "var(--accent)" : "var(--line-strong)"),
        boxShadow: accent ? "0 0 0 3px var(--accent-soft)" : "none",
      }} />
      <div style={{ display:"flex", flexDirection:"column", gap: mobile ? 3 : 5, minWidth:0 }}>
        <div className="mono" style={{ fontSize:10, color:"var(--text-4)", letterSpacing:"0.1em", textTransform:"uppercase" }}>
          / Layer 0{index}
        </div>
        <div style={{ fontSize: mobile ? 14 : 16, fontWeight:600, color:"var(--text)", letterSpacing:"-0.005em" }}>
          {name}
        </div>
        {kicker && <div className="mono" style={{ fontSize:10, color:"var(--text-3)" }}>{kicker}</div>}
      </div>
      <div style={{ display:"flex", alignItems:"center", gap:6, flexShrink:0 }}>
        {contents}
      </div>
    </div>
  );
}

function HeroVisual({ variant = "layers", mobile = false }) {
  if (variant === "type") {
    // Big-type variant — used when hero_visual tweak is "type"
    return (
      <div style={{
        position:"relative", width:"100%", height: mobile ? 260 : "100%",
        display:"flex", alignItems:"center", justifyContent:"center",
        border:"1px solid var(--line)", borderRadius:"var(--r-3)",
        background: "radial-gradient(120% 80% at 50% 40%, var(--accent-soft) 0%, transparent 60%), var(--bg-elev-1)",
        overflow:"hidden",
      }}>
        <div className="dotgrid" />
        <div style={{ position:"relative", zIndex:1, textAlign:"center", padding:24 }}>
          <div className="mono" style={{ fontSize:11, color:"var(--text-3)", letterSpacing:"0.12em", textTransform:"uppercase", marginBottom: mobile ? 12 : 22 }}>
            / Canton · vault token
          </div>
          <div className="mono" style={{
            fontSize: mobile ? 58 : 132, fontWeight:500,
            color:"var(--accent)", letterSpacing:"-0.045em", lineHeight:0.9,
          }}>
            dvUSDCx
          </div>
          <div style={{ fontSize: mobile ? 13 : 15, color:"var(--text-2)", marginTop: mobile ? 14 : 28, maxWidth:"30ch", marginLeft:"auto", marginRight:"auto", lineHeight:1.5 }}>
            One share token. Four mechanically distinct yield legs. Daily liquidity.
          </div>
        </div>
      </div>
    );
  }

  if (variant === "ticker") {
    // Status-board variant — big type + system status detail
    return (
      <div style={{ position:"relative", width:"100%", height:"100%",
        border:"1px solid var(--line)", borderRadius:"var(--r-3)",
        padding: mobile ? 20 : 28, display:"flex", flexDirection:"column",
        background: "var(--bg-elev-1)", justifyContent:"space-between", gap:20 }}>
        <div className="hairgrid hairgrid-h" />
        <div className="mono" style={{ fontSize: mobile ? 11 : 12, color:"var(--text-3)", letterSpacing:"0.1em", textTransform:"uppercase" }}>
          / system · canton mainnet
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:14 }}>
          {[
            ["dvUSDCx-CORE APY",       "5.7% – 9.2%",        "ranged"],
            ["DVN operators online",   "16 / 16",            "ok"],
            ["TVL secured (DVN)",      "$ 211.4M",           "ok"],
            ["Canton block height",    "8,422,116",          "ok"],
            ["Next attestation in",    "00:00:08",           "pulse"],
          ].map(([k, v, st], i) => (
            <div key={i} style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", gap:16,
              paddingBottom:14, borderBottom: i < 4 ? "1px solid var(--line)" : "none" }}>
              <span className="mono" style={{ fontSize:11, color:"var(--text-3)", letterSpacing:"0.04em", textTransform:"uppercase" }}>{k}</span>
              <span style={{ display:"inline-flex", alignItems:"center", gap:8 }}>
                <span className="mono" style={{ fontSize: mobile ? 14 : 16, color: st === "ranged" ? "var(--accent)" : "var(--text)", fontVariantNumeric:"tabular-nums" }}>{v}</span>
                <span style={{ width:6, height:6, borderRadius:"50%", background: st === "pulse" ? "var(--warn)" : "var(--accent)" }} />
              </span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // Default: 4-layer architectural slabs anchored to a "Canton" spine
  const layers = [
    { i:1, name:"Vaults",             kicker:"dvUSDCx-CORE · Alpend · Cantex",        contents:<span className="mono" style={{ fontSize:11, color:"var(--text-2)" }}>5–9% APY</span> },
    { i:2, name:"Fund marketplace",   kicker:"FOBXX · HQLAX · DLR · credit SPV",      contents:<span className="badge" style={{ borderColor:"var(--line)", background:"transparent" }}><Icon.lock /> KYC</span> },
    { i:3, name:"ETH onramp",         kicker:"single-tx · inbound only",              contents:<span className="mono" style={{ fontSize:11, color:"var(--text-2)" }}>USDC → dvUSDCx</span> },
    { i:4, name:"Verification (DVN)", kicker:"price · state · NAV · finality",        contents:<span className="mono" style={{ fontSize:11, color:"var(--accent)" }}>16 operators</span>, accent:true },
  ];

  return (
    <div style={{ position:"relative", width:"100%", height:"100%", display:"flex", flexDirection:"column", gap: mobile ? 16 : 18, padding: mobile ? "4px 0 8px 30px" : "4px 0 8px 38px" }}>
      {/* Canton spine — vertical line label on the left */}
      <div style={{ position:"absolute", left: mobile ? 12 : 18, top:0, bottom:24, width:1, background:"linear-gradient(to bottom, transparent 0%, var(--line-strong) 12%, var(--line-strong) 88%, transparent 100%)" }} />
      <div className="mono" style={{
        position:"absolute", left: mobile ? -62 : -50, top:"50%",
        transform:"rotate(-90deg) translateY(0)", transformOrigin:"left center",
        fontSize:10, color:"var(--text-3)", letterSpacing:"0.18em", whiteSpace:"nowrap",
        textTransform:"uppercase",
      }}>
        / Canton · permissioned-public
      </div>

      {layers.map(l => (
        <HeroLayerCard key={l.i} index={l.i} name={l.name} kicker={l.kicker} contents={l.contents} accent={!!l.accent} mobile={mobile} />
      ))}

      <div className="mono" style={{ fontSize:10, color:"var(--text-4)", letterSpacing:"0.04em", marginTop: mobile ? 0 : 6, paddingLeft: mobile ? 0 : 4, lineHeight:1.5 }}>
        Canton hosts $6T+ tokenized real-world assets · Digital Asset · Franklin Templeton · BlackRock · HSBC · DTCC
      </div>
    </div>
  );
}

function Hero({ headline, heroVariant = "layers" }) {
  const HEADLINES = {
    a: <>The vault platform for <br /><span className="headline-accent">Canton's tokenized RWA economy.</span></>,
    b: <>Canton-native vaults. <br /> Tokenized fund marketplace. <br /> <span className="headline-accent">Built on Canton, fed by Ethereum.</span></>,
    c: <>Vaults, marketplace, onramp. <br /> <span className="headline-accent">All native to Canton.</span></>,
  };
  const h = HEADLINES[headline] || HEADLINES.a;

  return (
    <div style={{ display:"flex", flexDirection:"column", height:"100%", position:"relative", overflow:"hidden" }}>
      {/* ambient: accent glow + dot grid */}
      <div className="glow-accent" style={{ top:-180, left:"30%" }} />
      <div className="dotgrid" style={{ opacity:0.5 }} />

      <div style={{
        flex:1, display:"grid",
        gridTemplateColumns:"minmax(0, 1.08fr) minmax(0, 0.92fr)",
        gap:"var(--sp-11)",
        padding:"var(--sp-10) var(--gutter-desktop) var(--sp-7)",
        position:"relative", zIndex:1,
      }}>
        {/* — LEFT: copy — */}
        <div style={{ display:"flex", flexDirection:"column", gap:"var(--sp-7)", position:"relative", zIndex:1, alignSelf:"center" }}>
          <div style={{ display:"flex", alignItems:"center", gap:14 }}>
            <span className="mono" style={{ fontSize:11, color:"var(--accent)", letterSpacing:"0.1em", textTransform:"uppercase" }}>
              / Ditto × Canton
            </span>
            <span style={{ width:1, height:12, background:"var(--line-strong)" }} />
            <span className="mono" style={{ fontSize:11, color:"var(--text-3)", letterSpacing:"0.06em", textTransform:"uppercase" }}>
              RWA vault platform · v1.0
            </span>
          </div>

          <h1 className="headline" style={{ margin:0, fontSize:"var(--t-h1)" }}>
            {h}
          </h1>

          <p className="lede" style={{ margin:0, fontSize:18, maxWidth:"58ch" }}>
            A daily-liquid USDCx vault, an accredited-only marketplace for tokenized institutional funds, and a one-transaction onramp for ETH-side capital, secured by Ditto's existing 16-operator restaking set.
          </p>

          <div style={{ display:"flex", alignItems:"center", gap:12, flexWrap:"wrap" }}>
            <button className="btn btn-primary btn-lg" onClick={() => window.openWaitlist && window.openWaitlist()}>
              Join the waitlist <span className="arrow"><Icon.arrow /></span>
            </button>
            <a className="btn btn-secondary btn-lg" href="https://github.com/dittonetwork/ditto-ccvault/blob/main/README.md" target="_blank" rel="noopener noreferrer" style={{ textDecoration:"none" }}>
              Read the docs <Icon.ext />
            </a>
          </div>

          <div style={{ marginTop:"var(--sp-2)", paddingTop:"var(--sp-5)", borderTop:"1px solid var(--line)", display:"flex", alignItems:"center", gap:24, flexWrap:"wrap" }}>
            <span className="mono" style={{ fontSize:10, color:"var(--text-4)", letterSpacing:"0.14em", textTransform:"uppercase" }}>/ Operating on</span>
            <span style={{ fontFamily:"var(--font-display)", fontSize:14, color:"var(--text-2)", letterSpacing:"-0.015em", fontWeight:500 }}>Canton Network</span>
            <span style={{ width:1, height:14, background:"var(--line-strong)" }} />
            <span style={{ fontFamily:"var(--font-display)", fontSize:14, color:"var(--text-2)", letterSpacing:"-0.015em", fontWeight:500 }}>EigenLayer</span>
            <span style={{ width:1, height:14, background:"var(--line-strong)" }} />
            <span style={{ fontFamily:"var(--font-display)", fontSize:14, color:"var(--text-2)", letterSpacing:"-0.015em", fontWeight:500 }}>Symbiotic</span>
          </div>
        </div>

        {/* — RIGHT: 4-layer architecture — */}
        <div style={{ position:"relative", zIndex:1, alignSelf:"stretch", display:"flex", flexDirection:"column" }}>
          <div className="eyebrow" style={{ marginBottom:20, display:"flex", justifyContent:"space-between", alignItems:"center" }}>
            <span><span className="slash">/</span><span>Four layers · one network</span></span>
            <span style={{ display:"inline-flex", alignItems:"center", gap:6 }}>
              <span style={{ width:6, height:6, borderRadius:"50%", background:"var(--accent)", boxShadow:"0 0 8px var(--accent)" }} />
              <span style={{ color:"var(--accent)" }}>live</span>
            </span>
          </div>
          <div style={{ flex:1 }}>
            <HeroVisual variant={heroVariant} />
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroMobile({ headline, heroVariant = "layers" }) {
  const HEADLINES = {
    a: <>The vault platform for <span className="headline-accent">Canton's tokenized RWA economy.</span></>,
    b: <>Canton-native vaults. Tokenized fund marketplace. <span className="headline-accent">Built on Canton, fed by Ethereum.</span></>,
    c: <>Vaults, marketplace, ETH onramp. <span className="headline-accent">All native to Canton.</span></>,
  };
  const h = HEADLINES[headline] || HEADLINES.a;

  return (
    <div style={{ display:"flex", flexDirection:"column", height:"100%", position:"relative", overflow:"hidden" }}>
      <div className="glow-accent" style={{ top:-220, left:"-30%", width:600, height:600 }} />
      <div style={{ flex:1, padding:"28px var(--gutter-mobile) 28px", display:"flex", flexDirection:"column", gap:22, position:"relative", zIndex:1 }}>
        <span className="mono" style={{ fontSize:11, color:"var(--accent)", letterSpacing:"0.1em", textTransform:"uppercase" }}>
          / Ditto × Canton · v1.0
        </span>
        <h1 className="headline" style={{ margin:0, fontSize:"var(--t-h1)" }}>{h}</h1>
        <p className="lede" style={{ margin:0, fontSize:14 }}>
          A daily-liquid USDCx vault, an accredited marketplace for tokenized institutional funds, and a one-transaction onramp for ETH-side capital.
        </p>
        <div style={{ display:"flex", flexDirection:"column", gap:10 }}>
          <button className="btn btn-primary btn-lg" style={{ width:"100%" }} onClick={() => window.openWaitlist && window.openWaitlist()}>
            Join the waitlist <Icon.arrow />
          </button>
          <a className="btn btn-secondary btn-lg" href="https://github.com/dittonetwork/ditto-ccvault/blob/main/README.md" target="_blank" rel="noopener noreferrer" style={{ width:"100%", textDecoration:"none" }}>
            Read the docs <Icon.ext />
          </a>
        </div>
        <div style={{ marginTop:"auto", paddingTop:14, borderTop:"1px solid var(--line)", display:"flex", alignItems:"center", gap:12, flexWrap:"wrap" }}>
          <span className="mono" style={{ fontSize:10, color:"var(--text-4)", letterSpacing:"0.1em", textTransform:"uppercase" }}>/ Operating on</span>
          <span style={{ fontSize:12, color:"var(--text-2)", fontWeight:500 }}>Canton</span>
          <span style={{ width:1, height:10, background:"var(--line-strong)" }} />
          <span style={{ fontSize:12, color:"var(--text-2)", fontWeight:500 }}>EigenLayer</span>
          <span style={{ width:1, height:10, background:"var(--line-strong)" }} />
          <span style={{ fontSize:12, color:"var(--text-2)", fontWeight:500 }}>Symbiotic</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Hero, HeroMobile, HeroVisual });