// Landing page v2 — premium editorial pass. Pink hero retained, composed with depth.

function PedbyCountUp({ value, decimals = 0, suffix = '', duration = 1200 }) {
  const [n, setN] = React.useState(value); // start at value so hidden tabs never show 0
  React.useEffect(() => {
    let raf, start;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / duration);
      setN(value * (1 - Math.pow(1 - p, 3)));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value]);
  return <span className="sf-num">{n.toFixed(decimals)}{suffix}</span>;
}

function PedbyLanding({ onNav, tokens, creationFee, onTrade }) {
  const trending = tokens.filter(t => !t.graduated).slice(0, 3);

  // Real numbers, straight from the chain state the app already holds
  const launched = tokens.length;
  const grads = tokens.filter(t => t.graduated).length;
  const raisedEth = tokens.reduce((s, t) => s + (t.graduated ? PEDBY_CURVE.GRADUATION_ETH : ((t.curve && t.curve.realEth) || 0)), 0);
  const entropyBytes = launched * 32; // every launch burns a 32-byte salt into existence

  return (
    <div>
      {/* ── Hero — deep pink, layered gradients ── */}
      <div style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(160deg, #9A2367 0%, #D6398A 58%, #C42F7D 100%)' }}>
        <div aria-hidden="true" style={{
          position: 'absolute', top: '-30%', right: '-12%', width: 640, height: 640, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 65%)',
          animation: 'pedby-drift 18s ease-in-out infinite', pointerEvents: 'none',
        }} />
        <div aria-hidden="true" style={{
          position: 'absolute', bottom: '-45%', left: '-10%', width: 700, height: 700, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(15,78,39,.28), rgba(15,78,39,0) 65%)',
          animation: 'pedby-drift2 22s ease-in-out infinite', pointerEvents: 'none',
        }} />

        <div className="pedby-hero" style={{ position: 'relative', zIndex: 2, maxWidth: 1080, margin: '0 auto', padding: '104px 32px 150px', textAlign: 'center' }}>
          <div style={{ animation: 'pedby-fade-up .7s ease-out both' }}>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11.5, letterSpacing: 2.5, color: 'rgba(255,255,255,.72)', textTransform: 'uppercase', marginBottom: 26 }}>
              Fair-launch tokens · Base network
            </div>
            <h1 style={{ margin: 0, fontSize: 'clamp(44px, 6.6vw, 78px)', lineHeight: 1.05, letterSpacing: '-0.03em', color: '#8CF5B6', fontWeight: 800 }}>
              Launch a B20 token<br />
              on <span style={{ color: '#fff' }}>Base</span> — <span className="sf-serif" style={{ fontStyle: 'italic', fontWeight: 400, color: '#fff' }}>zero code.</span>
            </h1>
            <p style={{ fontSize: 17.5, color: 'rgba(255,255,255,.88)', maxWidth: 580, margin: '26px auto 0', lineHeight: 1.6 }}>
              Name it, drop a logo, hit deploy — your token is live and tradable
              in <span style={{ color: '#8CF5B6', fontWeight: 700 }}>sixty seconds</span>.
              Fair-launch curve, liquidity locked by math. No presale, no team bags.
            </p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 38 }}>
              <Btn kind="dark" size="lg" onClick={() => onNav('create')} style={{ height: 50, padding: '0 26px', borderRadius: 14, fontSize: 15 }}>
                Launch a token
              </Btn>
              <Btn size="lg" onClick={() => onNav('marketplace')} style={{
                height: 50, padding: '0 26px', borderRadius: 14, fontSize: 15,
                background: 'rgba(255,255,255,.12)', color: '#fff', border: '1px solid rgba(255,255,255,.35)', backdropFilter: 'blur(4px)',
              }}>
                Explore marketplace
              </Btn>
            </div>
          </div>
        </div>
      </div>

      {/* ── Overlapping stats card ── */}
      <div style={{ maxWidth: 1080, margin: '-72px auto 0', padding: '0 32px', position: 'relative', zIndex: 3 }}>
        <div style={{
          background: '#fff', borderRadius: 20, border: '1px solid #E6EAE6',
          boxShadow: '0 24px 60px -24px rgba(22,32,26,.25)', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '14px 24px', borderBottom: '1px solid #EFF2EE' }}>
            <span style={{ width: 7, height: 7, borderRadius: 999, background: '#1E8C45', boxShadow: '0 0 0 3px rgba(30,140,69,.18)' }} />
            <span style={{ fontFamily: 'JetBrains Mono', fontSize: 10.5, letterSpacing: 1.5, color: '#6B7570' }}>LIVE ON BASE MAINNET</span>
          </div>
          <div className="pedby-stats-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', padding: '26px 8px' }}>
            {[
              ['Tokens launched', launched, 0, ''],
              ['Graduated to DEX', grads, 0, ''],
              ['Raised on curves', raisedEth, raisedEth < 0.1 ? 3 : raisedEth < 10 ? 2 : 1, ' ETH'],
              ['Entropy awakened', entropyBytes, 0, ' bytes'],
            ].map(([label, val, dec, suf], i) => (
              <div key={label} style={{ textAlign: 'center', borderLeft: i > 0 ? '1px solid #EFF2EE' : 'none', padding: '4px 12px' }}>
                <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: -0.8 }}><PedbyCountUp value={val} decimals={dec} suffix={suf} /></div>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: '#9AA39E', textTransform: 'uppercase', letterSpacing: 1, marginTop: 6 }}>{label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ── How it works — editorial split ── */}
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '110px 32px 96px' }}>
        <div className="pedby-hiw-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.85fr) minmax(0,1.15fr)', gap: 72, alignItems: 'start' }}>
          <div className="pedby-hiw-sticky" style={{ position: 'sticky', top: 96 }}>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: 2, color: '#D6398A', textTransform: 'uppercase', marginBottom: 16 }}>How it works</div>
            <h2 style={{ margin: 0, fontSize: 40, lineHeight: 1.1, letterSpacing: '-0.025em', fontWeight: 800 }}>
              Three steps.<br />
              <span className="sf-serif" style={{ fontStyle: 'italic', fontWeight: 400, color: '#1E8C45' }}>Zero code.</span>
            </h2>
            <p style={{ fontSize: 15, color: '#3B453F', lineHeight: 1.6, marginTop: 18, maxWidth: 340 }}>
              pedby deploys native B20 tokens with a fixed constant-product curve.
              Nobody — including the creator — gets a head start.
            </p>
            <div style={{ marginTop: 26 }}>
              <Btn kind="primary" onClick={() => onNav('create')}>Start creating</Btn>
            </div>
          </div>

          <div>
            {[
              ['01', 'Create', 'Name it, pick a ticker, drop an image. Your token deploys instantly on Base as a native B20 — supply fixed at 1B, curve parameters identical for everyone.'],
              ['02', 'Trade on the curve', 'Buys push price up the constant-product curve; sells bring it back down. No order book, no market makers — the math is the market.'],
              ['03', 'Graduate', 'When 2.8 ETH of real buys accumulate, the token graduates automatically: liquidity locks into a Base DEX pool and it trades like any onchain asset.'],
            ].map(([n, t, d], i) => (
              <div key={n} style={{ display: 'flex', gap: 28, padding: '30px 0', borderTop: i > 0 ? '1px solid #E6EAE6' : 'none' }}>
                <div className="sf-serif" style={{ fontStyle: 'italic', fontSize: 44, lineHeight: 1, color: '#D6398A', flex: '0 0 64px', opacity: 0.9 }}>{n}</div>
                <div>
                  <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: -0.3, marginBottom: 8 }}>{t}</div>
                  <div style={{ fontSize: 14.5, color: '#3B453F', lineHeight: 1.65, textWrap: 'pretty' }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ── The lore ── */}
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '0 32px 96px' }}>
        <div className="pedby-lore-card" style={{
          background: '#16201A', borderRadius: 24, padding: '64px 48px', position: 'relative', overflow: 'hidden',
        }}>
          <div aria-hidden="true" style={{
            position: 'absolute', top: '-40%', right: '-8%', width: 460, height: 460, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(30,140,69,.3), rgba(30,140,69,0) 65%)', pointerEvents: 'none',
          }} />
          <div style={{ position: 'relative', maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
            <img src="pedby-icon.png" alt="" style={{ width: 44, height: 44, borderRadius: '32%', margin: '0 auto 22px', display: 'block', animation: 'pedby-float 7s ease-in-out infinite' }} />
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: 2.5, color: '#8CF5B6', textTransform: 'uppercase', marginBottom: 18 }}>The lore</div>
            <div className="sf-serif" style={{ fontStyle: 'italic', fontSize: 'clamp(22px, 3.2vw, 32px)', lineHeight: 1.35, color: '#F6F8F4' }}>
              “Every token starts as random entropy. Pedby was the first random byte
              that became <span style={{ color: '#8CF5B6' }}>self-aware</span> and convinced
              people to trade it.”
            </div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'rgba(246,248,244,.45)', marginTop: 22, letterSpacing: 1 }}>
              — block 0, allegedly
            </div>
          </div>
        </div>
      </div>

      {/* ── Trading tape ── */}
      <TradeTape tokens={tokens} />

      {/* ── Trending ── */}
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '96px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28 }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: 2, color: '#1E8C45', textTransform: 'uppercase', marginBottom: 12 }}>Marketplace</div>
            <h2 style={{ margin: 0, fontSize: 34, letterSpacing: '-0.025em', fontWeight: 800, whiteSpace: 'nowrap' }}>
              Trending <span className="sf-serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>right now</span>
            </h2>
          </div>
          <button onClick={() => onNav('marketplace')} style={{
            background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
            fontSize: 13.5, fontWeight: 600, color: '#1E8C45', display: 'flex', alignItems: 'center', gap: 6,
          }}>
            View all <SfIcon name="arrowR" size={14} stroke="#1E8C45" />
          </button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px,1fr))', gap: 20 }}>
          {trending.map(t => <TokenCard key={t.id} t={t} onClick={() => onNav('token', t.id)} onTrade={onTrade} />)}
        </div>
      </div>

      {/* ── Closing CTA ── */}
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '0 32px 110px' }}>
        <div className="pedby-cta-card" style={{
          background: '#16201A', borderRadius: 24, padding: '72px 48px', textAlign: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div aria-hidden="true" style={{
            position: 'absolute', top: '-60%', left: '30%', width: 500, height: 500, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(214,57,138,.25), rgba(214,57,138,0) 65%)', pointerEvents: 'none',
          }} />
          <div style={{ position: 'relative' }}>
            <h2 style={{ margin: 0, fontSize: 'clamp(32px, 4.5vw, 48px)', letterSpacing: '-0.03em', color: '#F6F8F4', fontWeight: 800, lineHeight: 1.1 }}>
              Your token could be live<br />
              <span className="sf-serif" style={{ fontStyle: 'italic', fontWeight: 400, color: '#D6398A' }}>in sixty seconds.</span>
            </h2>
            <div style={{ marginTop: 32 }}>
              <Btn kind="pink" size="lg" onClick={() => onNav('create')} style={{ height: 50, padding: '0 28px', borderRadius: 14, fontSize: 15 }}>
                Launch a token
              </Btn>
            </div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'rgba(246,248,244,.45)', marginTop: 20, letterSpacing: 0.5 }}>
              {creationFee != null
                ? (creationFee > 0 ? `${creationFee} ETH launch fee + gas · no code required` : 'free to launch, just gas · no code required')
                : '~0.0004 ETH deploy fee · no code required'}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .pedby-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
        .pedby-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(22,32,26,.18); border-color: #d5dbd5; }
        @media (max-width: 900px) {
          .pedby-hiw-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

window.PedbyLanding = PedbyLanding;