// site-home.jsx — BIOME landing page
const { useMemo, useState, useEffect } = React;
function spec(seed, sp, stage, ov) { return makeCreature(seed, sp, stage, ov || {}); }

// ── Hero ─────────────────────────────────────────────────────
function Hero() {
  const { isMobile } = useViewport();
  const floaters = useMemo(() => [
    { c: spec('h-sol', 'sol', 4, { glow: 2 }), x: '8%', y: '24%', s: 96, g: 1.8, d: 0 },
    { c: spec('h-drift', 'drift', 3, { tendrils: 6 }), x: '78%', y: '16%', s: 116, g: 1.3, d: 1.2 },
    { c: spec('h-nyx', 'nyx', 3, {}), x: '84%', y: '60%', s: 84, g: 1.4, d: 0.6 },
    { c: spec('h-echo', 'echo', 2, {}), x: '14%', y: '66%', s: 78, g: 1.1, d: 1.8 },
  ], []);
  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(58% 56% at 50% -6%, #2a1850, #07040e 62%)' }} />
      {floaters.map((f, i) => (
        <div key={i} style={{ position: 'absolute', left: f.x, top: f.y, animation: `bobFloat ${5 + f.d}s ease-in-out ${f.d}s infinite`, opacity: isMobile && i < 2 ? 0.32 : 0.92 }}>
          <Creature c={f.c} size={isMobile ? Math.round(f.s * 0.62) : f.s} glow={f.g} lively={1} idle />
        </div>
      ))}
      <div style={{ ...wrap(isMobile), position: 'relative', paddingTop: isMobile ? 56 : 92, paddingBottom: isMobile ? 60 : 86, textAlign: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 26 }}>
          <Pill color={T.green}>PREMINT LIVE · GENESIS 10,000</Pill>
        </div>
        <h1 style={{ margin: '0 auto', fontSize: isMobile ? 42 : 76, fontWeight: 700, letterSpacing: 0, lineHeight: isMobile ? 1.02 : 0.96, maxWidth: 920 }}>
          A world that<br /><span style={{ color: T.accentLight }}>doesn't stop</span> living.
        </h1>
        <p style={{ margin: isMobile ? '20px auto 0' : '28px auto 0', fontSize: isMobile ? 16.5 : 20, lineHeight: 1.55, color: T.muted, maxWidth: 600, textWrap: 'pretty' }}>
          BIOME is 10,000 on-chain organisms that grow, decay, breed, and die — fed by <span style={{ color: T.text, fontWeight: 600 }}>$NECTAR</span> and running at Monad speed. The NFT is alive. The token is its bloodstream.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: isMobile ? 28 : 38, flexWrap: 'wrap' }}>
          <CTA href="/bible" style={isMobile ? { width: '100%' } : null}>Mint a Genesis creature</CTA>
          <CTA href={MONCADE_URL} target="_blank" style={isMobile ? { width: '100%' } : null}>Play Moncade</CTA>
          <CTA href="/token" kind="ghost" style={isMobile ? { width: '100%' } : null}>Read the $NECTAR thesis</CTA>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, auto)', gap: isMobile ? 18 : 40, justifyContent: 'center', marginTop: isMobile ? 38 : 56 }}>
          {[['10,000', 'Genesis supply'], ['6', 'species · 1 secret'], ['1B', '$NECTAR max supply'], ['~0.5s', 'finality on Monad']].map(([n, l]) => (
            <div key={l}>
              <Mono style={{ fontSize: isMobile ? 22 : 30, fontWeight: 700, display: 'block', lineHeight: 1 }}>{n}</Mono>
              <span style={{ fontSize: 13, color: T.muted }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Three pillars (the tie-together) ─────────────────────────
function Pillars() {
  const { isMobile, isTablet } = useViewport();
  const nft = useMemo(() => spec('pil-nft', 'lumen', 3, { eyes: 3, spots: 8 }), []);
  const pills = [
    { tag: 'THE ASSET', title: 'Genesis NFTs', body: '10,000 procedurally-grown creatures, each a unique genome across 8 trait genes. Finite, founding, fully on-chain.',
      href: '/bible', cta: 'Explore the collection', visual: 'nft', accent: T.gold },
    { tag: 'THE ECONOMY', title: '$NECTAR token', body: 'The lifeblood. Spent to feed, revive, breed and splice — earned by keeping creatures alive. One token, a whole metabolism.',
      href: '/token', cta: 'See the tokenomics', visual: 'token', accent: T.green },
    { tag: 'THE WORLD', title: 'The live app', body: 'A real-time on-chain habitat. Watch heartbeats land block by block, feed your creatures, breed new lineages, salvage the dormant.',
      href: '/app', cta: 'Launch the app', visual: 'app', accent: T.cyan },
    { tag: 'THE ARCADE', title: 'Moncade', body: 'The fast route into play. Jump from BIOME into the Monad arcade and start with the polished Moncade build.',
      href: MONCADE_URL, cta: 'Play Moncade', visual: 'app', accent: T.accentLight, external: true },
  ];
  return (
    <section style={SECTION}><div style={wrap(isMobile)}>
      <SectionHead center kicker="One world, three parts"
        title="An NFT, a token, and an app — designed as one organism."
        intro="Most projects bolt a token onto a JPEG. BIOME is built the other way around: the asset, the economy, and the world are a single closed loop." />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 16 }}>
        {pills.map((p) => (
          <Glass key={p.title} pad={0} radius={22} style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{ height: 168, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: `radial-gradient(80% 80% at 50% 38%, ${p.accent}1f, ${T.bg2})`, borderBottom: `1px solid ${T.line}` }}>
              {p.visual === 'nft' && <Creature c={nft} size={128} glow={1.3} lively={1} />}
              {p.visual === 'token' && <NectarCoin size={108} />}
              {p.visual === 'app' && <AppGlyph />}
            </div>
            <div style={{ padding: '22px 24px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
              <Mono style={{ fontSize: 11, letterSpacing: 2, color: p.accent, fontWeight: 700 }}>{p.tag}</Mono>
              <h3 style={{ margin: '8px 0 10px', fontSize: 24, fontWeight: 700 }}>{p.title}</h3>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: T.muted, textWrap: 'pretty', flex: 1 }}>{p.body}</p>
              <a href={p.href} target={p.external ? '_blank' : undefined} rel={p.external ? 'noopener noreferrer' : undefined} style={{ textDecoration: 'none', marginTop: 18, fontSize: 14.5, fontWeight: 600, color: p.accent }}>{p.cta} →</a>
            </div>
          </Glass>
        ))}
      </div>
    </div></section>
  );
}

function NectarCoin({ size = 100 }) {
  return (
    <div style={{ width: size, height: size, borderRadius: '50%', position: 'relative',
      background: 'radial-gradient(circle at 38% 32%, #C9F8E4, #7EF0C0 38%, #2bbf8e 78%, #0c6d4f)',
      boxShadow: '0 0 44px rgba(126,240,192,0.5), inset 0 -8px 18px rgba(0,0,0,0.35), inset 0 6px 12px rgba(255,255,255,0.5)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'glowPulse 4s ease-in-out infinite' }}>
      <span style={{ fontFamily: '"Space Mono", monospace', fontSize: size * 0.34, fontWeight: 700, color: '#06301f' }}>N</span>
    </div>
  );
}

function AppGlyph() {
  return (
    <div style={{ width: 132, height: 96, borderRadius: 14, border: '1px solid rgba(255,255,255,0.16)', position: 'relative',
      background: 'linear-gradient(180deg, #1a1030, #0c0716)', overflow: 'hidden', boxShadow: '0 10px 30px rgba(0,0,0,0.4)' }}>
      <div style={{ height: 16, borderBottom: '1px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', gap: 4, paddingLeft: 7 }}>
        {['#FF6B6B', '#FFD27E', '#7EF0C0'].map((c) => <span key={c} style={{ width: 5, height: 5, borderRadius: 99, background: c }} />)}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 'calc(100% - 16px)' }}>
        <Creature c={makeCreature('app-glyph', 'drift', 2, {})} size={48} glow={1.2} lively={1} idle />
      </div>
    </div>
  );
}

// ── Flywheel ─────────────────────────────────────────────────
function Flywheel() {
  const { isMobile } = useViewport();
  const nodes = [
    { t: 'MINT', d: 'Acquire a Genesis creature', c: T.gold },
    { t: 'LIVE', d: 'Feed it $NECTAR or it decays', c: T.accentLight },
    { t: 'EARN', d: 'Living creatures emit $NECTAR', c: T.green },
    { t: 'BREED', d: 'Burn $NECTAR to splice new life', c: T.cyan },
  ];
  const S = isMobile ? 312 : 400;
  const R = isMobile ? 104 : 140;
  const cx = S / 2, cy = S / 2;
  return (
    <section style={{ ...SECTION, background: 'radial-gradient(70% 100% at 50% 50%, #120a24, #07040e 70%)' }}><div style={wrap(isMobile)}>
      <SectionHead center kicker="The loop" title="A closed economic metabolism."
        intro="Nothing here is idle. Every creature is a meter that burns or mints $NECTAR depending on whether you keep it alive — and that single tension drives the entire economy." />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 56, flexWrap: 'wrap' }}>
        <div style={{ position: 'relative', width: S, height: S, flexShrink: 0, margin: isMobile ? '-8px 0' : 0 }}>
          <svg width={S} height={S} viewBox={`0 0 ${S} ${S}`} style={{ position: 'absolute', inset: 0 }}>
            <circle cx={cx} cy={cy} r={R} fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="1.5" strokeDasharray="3 7" style={{ transformOrigin: 'center', animation: 'spinSlow 60s linear infinite' }} />
            <defs>
              <marker id="arrow" markerWidth="9" markerHeight="9" refX="4.5" refY="4.5" orient="auto">
                <path d="M1,1 L8,4.5 L1,8" fill="none" stroke={T.accentLight} strokeWidth="1.4" />
              </marker>
            </defs>
            {nodes.map((_, i) => {
              const a0 = (i / 4) * Math.PI * 2 - Math.PI / 2 + 0.42;
              const a1 = ((i + 1) / 4) * Math.PI * 2 - Math.PI / 2 - 0.42;
              const x0 = cx + R * Math.cos(a0), y0 = cy + R * Math.sin(a0);
              const x1 = cx + R * Math.cos(a1), y1 = cy + R * Math.sin(a1);
              return <path key={i} d={`M ${x0} ${y0} A ${R} ${R} 0 0 1 ${x1} ${y1}`} fill="none" stroke={T.accent} strokeOpacity="0.5" strokeWidth="2" markerEnd="url(#arrow)" />;
            })}
          </svg>
          <div style={{ position: 'absolute', inset: 0 }}>
            <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', textAlign: 'center' }}>
              <NectarCoin size={76} />
              <Mono style={{ fontSize: 11, color: T.green, fontWeight: 700, display: 'block', marginTop: 8 }}>$NECTAR</Mono>
            </div>
            {nodes.map((n, i) => {
              const a = (i / 4) * Math.PI * 2 - Math.PI / 2;
              const x = cx + R * Math.cos(a), y = cy + R * Math.sin(a);
              return (
                <div key={n.t} style={{ position: 'absolute', left: x, top: y, transform: 'translate(-50%,-50%)', textAlign: 'center', width: isMobile ? 92 : 120 }}>
                  <div style={{ width: isMobile ? 48 : 56, height: isMobile ? 48 : 56, margin: '0 auto', borderRadius: '50%', border: `1.5px solid ${n.c}`, background: '#0c0716',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 0 22px ${n.c}55` }}>
                    <Mono style={{ fontSize: isMobile ? 10.5 : 12, fontWeight: 700, color: n.c }}>{n.t}</Mono>
                  </div>
                  <p style={{ margin: '8px 0 0', fontSize: isMobile ? 10.5 : 11.5, lineHeight: 1.35, color: T.muted }}>{n.d}</p>
                </div>
              );
            })}
          </div>
        </div>
        <div style={{ maxWidth: 340 }}>
          {[
            ['Burns', 'Feeding, reviving, breeding and splicing all destroy $NECTAR. The more alive the world, the more demand.', T.accent],
            ['Emissions', 'Proof-of-Life: creatures that stay healthy emit $NECTAR. Higher maturity, higher yield. Dormant ones earn nothing.', T.green],
            ['Equilibrium', 'A neglected world deflates supply; a thriving one rewards its keepers. The token finds its level from real behavior.', T.gold],
          ].map(([h, d, c]) => (
            <div key={h} style={{ marginBottom: 22, paddingLeft: 16, borderLeft: `2px solid ${c}` }}>
              <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 5, color: c }}>{h}</div>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: T.muted, textWrap: 'pretty' }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </div></section>
  );
}

// ── The World (mechanics) ────────────────────────────────────
function World() {
  const { isMobile, isTablet } = useViewport();
  const decay = useMemo(() => spec('w-decay', 'echo', 2, { energy: 12 }), []);
  const items = [
    { k: 'DECAY', t: 'Energy bleeds every block', d: 'Each creature loses energy in real time. Hit zero and it falls dormant on-chain — visibly dimmed, frozen mid-bloom.' },
    { k: 'REVIVAL', t: 'Bring the dormant back', d: 'A spark of $NECTAR revives a dormant creature with its full lineage and traits intact. A welcome-back, not a reset.' },
    { k: 'BREEDING', t: 'Splice new genomes', d: 'Pair two creatures to mint a Gen 2+ offspring. Genes mostly pass down; rarely something new — even the secret Void species — appears.' },
    { k: 'SALVAGE', t: 'Hunt abandoned lineage', d: 'Dormant creatures with rare traits become acquisition targets. Revive someone else\u2019s lapsed legend and inherit its bloodline.' },
  ];
  return (
    <section id="world" style={SECTION}><div style={wrap(isMobile)}>
      <SectionHead kicker="The world" title="Life, decay, and the economy in between."
        intro="The mechanics are simple and merciless — and that's exactly what makes $NECTAR matter." />
      <div style={{ display: 'grid', gridTemplateColumns: isTablet ? '1fr' : '0.9fr 1.1fr', gap: 28, alignItems: 'center' }}>
        <Glass pad={0} radius={24} style={{ overflow: 'hidden', position: 'relative', height: isMobile ? 310 : 360 }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 70% at 50% 40%, #1a1030, #07040e)' }} />
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', filter: 'saturate(0.5) brightness(0.7)' }}>
            <Creature c={decay} size={180} glow={0.4} lively={0.3} idle />
          </div>
          <div style={{ position: 'absolute', left: 20, bottom: 18, right: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <Mono style={{ fontSize: 11, color: '#FF8080', fontWeight: 700 }}>● DORMANT</Mono>
              <div style={{ fontSize: 13, color: T.muted, marginTop: 2 }}>energy 0% · awaiting revival</div>
            </div>
            <span style={{ padding: '8px 14px', borderRadius: 10, background: 'rgba(126,240,192,0.14)', border: `1px solid ${T.green}55` }}>
              <Mono style={{ fontSize: 12, color: T.green, fontWeight: 700 }}>Revive · 25 NCTR + 0.004 MON</Mono>
            </span>
          </div>
        </Glass>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 }}>
          {items.map((it) => (
            <Glass key={it.k} pad={20}>
              <Mono style={{ fontSize: 11, letterSpacing: 1.5, color: T.accentLight, fontWeight: 700 }}>{it.k}</Mono>
              <div style={{ fontSize: 16.5, fontWeight: 700, margin: '8px 0 7px' }}>{it.t}</div>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: T.muted, textWrap: 'pretty' }}>{it.d}</p>
            </Glass>
          ))}
        </div>
      </div>
    </div></section>
  );
}

// ── Roadmap / phases ─────────────────────────────────────────
function Phases() {
  const { isMobile, isTablet } = useViewport();
  const phases = [
    { p: 'NOW', t: 'Premint', d: 'Collection bible live. Allowlist forming. Lock your Genesis spot before the world wakes.', done: true },
    { p: 'Q3', t: 'Genesis Mint', d: '10,000 founders mint on Monad. Mythic 1/1s seeded. Traits revealed on-chain.', done: false },
    { p: 'Q3', t: 'App goes live', d: 'The habitat opens. Feed, decay, revive and breed in real time, block by block.', done: false },
    { p: 'Q4', t: '$NECTAR TGE', d: 'Token generation. Proof-of-Life emissions begin. Genesis holder airdrop unlocks.', done: false },
  ];
  return (
    <section style={SECTION}><div style={wrap(isMobile)}>
      <SectionHead center kicker="Launch sequence" title="From premint to a self-running economy." />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 16 }}>
        {phases.map((ph) => (
          <Glass key={ph.t} pad={22} style={{ position: 'relative', borderColor: ph.done ? `${T.green}55` : T.line }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <Mono style={{ fontSize: 12, fontWeight: 700, color: ph.done ? T.green : T.dim }}>{ph.p}</Mono>
              <span style={{ width: 9, height: 9, borderRadius: 99, background: ph.done ? T.green : 'transparent', border: ph.done ? 'none' : `1.5px solid ${T.dim}`, boxShadow: ph.done ? `0 0 10px ${T.green}` : 'none' }} />
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>{ph.t}</div>
            <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: T.muted, textWrap: 'pretty' }}>{ph.d}</p>
          </Glass>
        ))}
      </div>
    </div></section>
  );
}

// ── Closing CTA ──────────────────────────────────────────────
function Closing() {
  const { isMobile } = useViewport();
  return (
    <section style={{ padding: '96px 0', position: 'relative', overflow: 'hidden', borderTop: `1px solid ${T.line}` }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 120% at 50% 100%, #2a1850, transparent)' }} />
      <div style={{ ...wrap(isMobile), position: 'relative', textAlign: 'center' }}>
        <h2 style={{ margin: 0, fontSize: isMobile ? 36 : 52, fontWeight: 700, letterSpacing: 0, lineHeight: 1.04, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>
          Mint something that's<br /><span style={{ color: T.accentLight }}>actually alive.</span>
        </h2>
        <p style={{ margin: '22px auto 0', fontSize: 18, color: T.muted, maxWidth: 540, textWrap: 'pretty' }}>
          Genesis is 10,000 and counting down. Claim a creature, keep it alive, and let its bloodline outlast you.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 34, flexWrap: 'wrap' }}>
          <CTA href="/bible" style={isMobile ? { width: '100%' } : null}>Enter the premint</CTA>
          <CTA href={MONCADE_URL} target="_blank" kind="ghost" style={isMobile ? { width: '100%' } : null}>Play Moncade</CTA>
          <CTA href="/token" kind="ghost" style={isMobile ? { width: '100%' } : null}>Understand $NECTAR</CTA>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <div style={{ background: T.bg, color: T.text, fontFamily: T.font }}>
      <SiteNav active="home" />
      <Hero />
      <Pillars />
      <Flywheel />
      <World />
      <Phases />
      <Closing />
      <SiteFooter />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);