// Marketing sections — composed by app.jsx into a single scrolling page.

const SIGN_IN_URL = "/auth/x/start";
const DEMO_VIDEO_URL = "https://assets.backread.app/demo.mp4";
const DEMO_POSTER_URL = "https://assets.backread.app/demo-poster.jpg";

// Smooth scroll any anchor target. Used by hero "Watch the demo" CTA.
function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// ─── 1. NAV ─────────────────────────────────────────────────────────────────
function Nav() {
  return (
    <nav style={navStyles.bar}>
      <div className="container" style={navStyles.row}>
        <a href="#top" style={navStyles.brand}>
          <span style={navStyles.brandTile}>B</span>
          <span style={navStyles.brandText}>Backread</span>
        </a>
        <div style={navStyles.right}>
          <a href="#how" style={navStyles.link} className="nav-links-hide">How it works</a>
          <a href="#features" style={navStyles.link} className="nav-links-hide">Features</a>
          <a href="#pricing" style={navStyles.link} className="nav-links-hide">Pricing</a>
          <a href={SIGN_IN_URL} style={navStyles.signin}>Sign in</a>
        </div>
      </div>
    </nav>
  );
}
const navStyles = {
  bar: { position: 'sticky', top: 0, zIndex: 50, backdropFilter: 'blur(14px) saturate(160%)', WebkitBackdropFilter: 'blur(14px) saturate(160%)', background: 'rgba(10,10,15,0.55)', borderBottom: '0.5px solid var(--border)' },
  row: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 },
  brand: { display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'inherit' },
  brandTile: { width: 28, height: 28, borderRadius: 8, background: 'var(--grad)', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 15, color: '#fff', boxShadow: '0 6px 16px -4px rgba(236,72,153,0.5)' },
  brandText: { fontWeight: 600, fontSize: 16, letterSpacing: -0.01 },
  right: { display: 'flex', alignItems: 'center', gap: 4 },
  link: { color: 'var(--text-dim)', textDecoration: 'none', fontSize: 14, padding: '8px 14px', borderRadius: 8, transition: 'color .15s, background .15s' },
  signin: { color: 'var(--text)', textDecoration: 'none', fontSize: 14, fontWeight: 500, padding: '8px 16px', borderRadius: 8, border: '0.5px solid var(--border-strong)', marginLeft: 6, background: 'rgba(255,255,255,0.02)' },
};

// ─── 2. HERO ────────────────────────────────────────────────────────────────
function Hero({ glowIntensity = 100, showSecondary = true }) {
  return (
    <section id="top" style={heroStyles.section}>
      <div style={{...heroStyles.glow, opacity: glowIntensity / 100}}>
        <div style={heroStyles.glowInner} />
        <div style={heroStyles.glowSecondary} />
      </div>

      <div className="container" style={heroStyles.inner}>
        <div className="pill">
          <span className="dot" />
          <span>Free during beta · new from your bookmarks</span>
        </div>

        <h1 style={heroStyles.headline}>
          The place your X bookmarks <br/>
          <span className="grad-text">come back to life.</span>
        </h1>

        <p style={heroStyles.sub}>
          Backread pulls every tweet you've ever saved, sorts them by topic, summarises the long ones, and gives you a calm place to actually return to them. You keep bookmarking on X. We do the rest.
        </p>

        <div style={heroStyles.cta}>
          <a className="btn-primary" href={SIGN_IN_URL}>
            <IcoX size={15} />
            Sign in with X
            <IcoArrow />
          </a>
          {showSecondary && (
            <button className="btn-ghost" onClick={() => scrollToId('video')}>
              Watch the demo
            </button>
          )}
        </div>

        <div className="mono" style={heroStyles.fine}>
          Free during beta &nbsp;·&nbsp; No credit card &nbsp;·&nbsp; ~30 second setup
        </div>
      </div>
    </section>
  );
}
const heroStyles = {
  section: { position: 'relative', padding: '80px 0 100px', overflow: 'hidden' },
  glow: { position: 'absolute', top: '-280px', right: '-260px', width: 900, height: 900, pointerEvents: 'none', filter: 'blur(20px)', animation: 'glowPulse 9s ease-in-out infinite' },
  glowInner: { position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 50%, rgba(236,72,153,0.55), rgba(139,92,246,0.32) 35%, transparent 70%)' },
  glowSecondary: { position: 'absolute', inset: 0, background: 'radial-gradient(circle at 60% 70%, rgba(139,92,246,0.4), transparent 55%)', mixBlendMode: 'screen' },
  inner: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 24, paddingTop: 28 },
  headline: { fontSize: 'clamp(44px, 7vw, 88px)', fontWeight: 700, lineHeight: 1.02, letterSpacing: '-0.035em', textWrap: 'balance', maxWidth: 1000 },
  sub: { fontSize: 'clamp(17px, 1.6vw, 21px)', lineHeight: 1.55, color: 'var(--text-dim)', maxWidth: 620, margin: '4px 0 12px', textWrap: 'pretty' },
  cta: { display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' },
  fine: { fontSize: 12, color: 'var(--text-mute)', letterSpacing: 0.02, marginTop: 4, textTransform: 'none' },
};

// ─── 3. VIDEO ───────────────────────────────────────────────────────────────
// Click the play button → swap the dashboard mock for the real avatar
// video, with sound enabled and native controls. No dev affordances —
// just the production demo.
function VideoBlock() {
  const [playing, setPlaying] = React.useState(false);
  const videoRef = React.useRef(null);

  const onPlay = () => {
    setPlaying(true);
    requestAnimationFrame(() => {
      const v = videoRef.current;
      if (!v) return;
      v.muted = false;
      v.currentTime = 0;
      v.play().catch(() => {});
    });
  };

  return (
    <section id="video" style={vidStyles.section}>
      <div className="container-tight" style={{ position: 'relative' }}>
        <div style={vidStyles.aura} />

        <div style={vidStyles.frameWrap}>
          <div style={vidStyles.frame}>
            <div style={vidStyles.thumb}>
              {playing ? (
                <video
                  ref={videoRef}
                  src={DEMO_VIDEO_URL}
                  poster={DEMO_POSTER_URL}
                  controls playsInline preload="metadata"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', background: '#000' }}
                  onEnded={() => setPlaying(false)}
                />
              ) : (
                <>
                  <img
                    src={DEMO_POSTER_URL}
                    alt="Backread demo"
                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', background: '#000' }}
                  />
                  <div style={vidStyles.vignette} />
                </>
              )}
            </div>

            {!playing && (
              <button style={vidStyles.playBtn} onClick={onPlay} aria-label="Play demo">
                <div style={vidStyles.playRing} />
                <div style={vidStyles.playCore}>
                  <IcoPlay size={26} />
                </div>
              </button>
            )}
          </div>
        </div>

        <div style={vidStyles.caption}>
          <span className="mono" style={{ color: 'var(--text-mute)', fontSize: 11, letterSpacing: 0.18, textTransform: 'uppercase' }}>TL;DR</span>
          <span style={{ color: 'var(--text-dim)' }}>What Backread does, in a minute.</span>
        </div>
      </div>
    </section>
  );
}
const vidStyles = {
  section: { padding: '60px 0 80px', position: 'relative' },
  aura: { position: 'absolute', inset: '-40px 0', background: 'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(139,92,246,0.18), transparent 60%)', filter: 'blur(40px)', pointerEvents: 'none' },
  // Centred portrait frame so a vertical avatar video fills the box. The
  // wrap exists because container-tight already constrains horizontally —
  // we layer a max-width on top of that for the player itself.
  frameWrap: { display: 'flex', justifyContent: 'center', position: 'relative' },
  frame: { position: 'relative', width: '100%', maxWidth: 380, aspectRatio: '9 / 16', borderRadius: 'var(--radius-lg)', background: '#0C0C13', border: '0.5px solid var(--border-strong)', overflow: 'hidden', boxShadow: '0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(139,92,246,0.1)' },
  thumb: { position: 'absolute', inset: 0 },
  vignette: { position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%)', pointerEvents: 'none' },
  playBtn: { position: 'absolute', inset: 0, margin: 'auto', width: 96, height: 96, border: 0, background: 'transparent', cursor: 'pointer', display: 'grid', placeItems: 'center' },
  playRing: { position: 'absolute', inset: 0, borderRadius: '50%', background: 'conic-gradient(from 0deg, #8B5CF6, #EC4899, #F97316, #EC4899, #8B5CF6)', animation: 'rotateConic 8s linear infinite', filter: 'blur(0.5px)' },
  playCore: { position: 'relative', width: 86, height: 86, borderRadius: '50%', background: 'rgba(10,10,15,0.85)', backdropFilter: 'blur(8px)', display: 'grid', placeItems: 'center', color: '#fff', paddingLeft: 4, boxShadow: '0 12px 32px -6px rgba(0,0,0,0.7)' },
  chrome: { position: 'absolute', left: 16, right: 16, bottom: 14, height: 36, borderRadius: 10, background: 'rgba(8,8,14,0.65)', backdropFilter: 'blur(20px) saturate(180%)', border: '0.5px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 12px', color: 'rgba(255,255,255,0.85)' },
  chromeLeft: { display: 'flex', alignItems: 'center', gap: 12, flex: 1 },
  scrub: { flex: 1, height: 3, borderRadius: 999, background: 'rgba(255,255,255,0.12)', position: 'relative', maxWidth: 400 },
  scrubFill: { position: 'absolute', left: 0, top: 0, bottom: 0, width: '11%', borderRadius: 999, background: 'var(--grad)' },
  scrubHead: { position: 'absolute', left: '11%', top: '50%', transform: 'translate(-50%,-50%)', width: 10, height: 10, borderRadius: '50%', background: '#fff', boxShadow: '0 2px 6px rgba(0,0,0,0.4)' },
  time: { fontSize: 11, color: 'rgba(255,255,255,0.7)' },
  chromeRight: { display: 'flex', alignItems: 'center', gap: 12 },
  qual: { fontSize: 10, padding: '2px 6px', borderRadius: 4, background: 'rgba(255,255,255,0.1)', color: 'rgba(255,255,255,0.8)' },
  iconBtn: { color: 'rgba(255,255,255,0.7)', cursor: 'pointer' },
  caption: { marginTop: 18, display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center', fontSize: 14 },
};

// ─── 4. PROBLEM ─────────────────────────────────────────────────────────────
function Problem() {
  const cols = [
    { ico: <IcoBookmark />, title: 'Bookmark blindly', body: "You hit save and move on. That's the point — the content has already passed your instinctual filter." },
    { ico: <IcoStack />, title: 'Pile builds up', body: 'Hundreds of saves. Zero structure.' },
    { ico: <IcoGhost />, title: 'Never come back', body: 'The good stuff drowns in the noise.' },
  ];
  return (
    <section style={probStyles.section}>
      <div className="container">
        <div style={probStyles.eyebrowRow}>
          <span className="eyebrow">The bookmark paradox</span>
        </div>
        <div style={probStyles.grid} className="grid-3-collapse">
          {cols.map((c, i) => (
            <div key={i} style={probStyles.col}>
              <div style={probStyles.icoWrap}>{c.ico}</div>
              <h3 style={probStyles.colTitle}>{c.title}</h3>
              <p style={probStyles.colBody}>{c.body}</p>
              <div style={{...probStyles.numTag}} className="mono">0{i+1} / 03</div>
            </div>
          ))}
        </div>
        <div style={probStyles.punchline}>
          <span style={{ color: 'var(--text-dim)' }}>Backread fixes</span>{' '}
          <span className="grad-text" style={{ fontWeight: 700 }}>the third one.</span>
        </div>
      </div>
    </section>
  );
}
const probStyles = {
  section: { padding: '80px 0 60px', position: 'relative' },
  eyebrowRow: { textAlign: 'center', marginBottom: 36 },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 1, background: 'var(--border)', border: '0.5px solid var(--border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' },
  col: { background: 'var(--bg)', padding: '36px 28px 28px', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10, position: 'relative', minHeight: 200 },
  icoWrap: { color: 'var(--text)', opacity: 0.85, marginBottom: 10 },
  colTitle: { fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: 0 },
  colBody: { fontSize: 15, lineHeight: 1.5, color: 'var(--text-dim)', margin: 0, maxWidth: 280 },
  numTag: { position: 'absolute', top: 22, right: 24, fontSize: 10.5, color: 'var(--text-mute)', letterSpacing: 0.15 },
  punchline: { textAlign: 'center', marginTop: 56, fontSize: 'clamp(24px, 3.4vw, 38px)', fontWeight: 600, letterSpacing: '-0.02em' },
};

// ─── 5. HOW IT WORKS ────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: '01', title: 'Sign in with X', body: 'One tap. We never see your password. The same OAuth flow X uses for any third-party app.', tone: 'a' },
    { n: '02', title: 'Bookmark like you already do', body: 'Tap the bookmark icon in X. That\'s it. No share sheet, no extension, no friction.', tone: 'b' },
    { n: '03', title: 'Come back to Backread', body: 'Your saves are sorted, summarised, and searchable. Mobile or desktop. Triage at your pace while Backread learns your preferences and reduces friction to zero.', tone: 'c' },
  ];
  return (
    <section id="how" style={howStyles.section}>
      <div className="container">
        <div style={howStyles.head}>
          <span className="eyebrow">How it works</span>
          <h2 style={howStyles.title}>Three steps. <span className="grad-text">No homework.</span></h2>
        </div>
        <div style={howStyles.grid} className="grid-3-collapse">
          {steps.map((s, i) => (
            <div key={i} style={howStyles.card}>
              <div style={howStyles.cardTop}>
                <div className="mono" style={howStyles.stepNum}>{s.n}</div>
                <div style={{...howStyles.stepDot, ...(howStyles[`tone_${s.tone}`])}} />
              </div>
              <h3 style={howStyles.stepTitle}>{s.title}</h3>
              <p style={howStyles.stepBody}>{s.body}</p>
              <div style={howStyles.visual}>
                {i === 0 && <StepVisual1 />}
                {i === 1 && <StepVisual2 />}
                {i === 2 && <StepVisual3 />}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
const howStyles = {
  section: { padding: '100px 0 80px' },
  head: { textAlign: 'center', marginBottom: 56 },
  title: { fontSize: 'clamp(34px, 4.4vw, 54px)', fontWeight: 600, letterSpacing: '-0.025em', marginTop: 8 },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 },
  card: { background: 'var(--bg-card)', border: '0.5px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 28, display: 'flex', flexDirection: 'column', gap: 12, transition: 'transform .2s, border-color .2s' },
  cardTop: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 },
  stepNum: { fontSize: 14, color: 'var(--text-mute)', letterSpacing: 0.08, fontWeight: 500 },
  stepDot: { width: 8, height: 8, borderRadius: '50%' },
  tone_a: { background: '#8B5CF6', boxShadow: '0 0 12px #8B5CF6' },
  tone_b: { background: '#EC4899', boxShadow: '0 0 12px #EC4899' },
  tone_c: { background: '#F97316', boxShadow: '0 0 12px #F97316' },
  stepTitle: { fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: 0 },
  stepBody: { fontSize: 15, lineHeight: 1.55, color: 'var(--text-dim)', margin: 0, flexGrow: 1 },
  visual: { marginTop: 8, height: 140, borderRadius: 12, border: '0.5px solid var(--border)', background: 'rgba(255,255,255,0.015)', position: 'relative', overflow: 'hidden' },
};

function StepVisual1() {
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
      <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, background: 'rgba(255,255,255,0.05)', border: '0.5px solid rgba(255,255,255,0.12)', borderRadius: 12, boxShadow: '0 8px 24px -8px rgba(0,0,0,0.5)' }}>
        <IcoX size={16}/>
        <span style={{ fontSize: 13, fontWeight: 500 }}>Authorize Backread</span>
        <div style={{ width: 1, height: 16, background: 'rgba(255,255,255,0.15)' }} />
        <span style={{ fontSize: 11, color: '#34D399', fontFamily: "'Geist Mono', monospace" }}>read · bookmarks</span>
      </div>
    </div>
  );
}
function StepVisual2() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 16, display: 'flex', alignItems: 'flex-end', gap: 10 }}>
      <div style={{ flex: 1 }}>
        <div style={{ height: 8, width: '70%', borderRadius: 999, background: 'rgba(255,255,255,0.08)', marginBottom: 6 }} />
        <div style={{ height: 8, width: '55%', borderRadius: 999, background: 'rgba(255,255,255,0.05)' }} />
      </div>
      <button style={{ appearance: 'none', border: '0.5px solid rgba(255,255,255,0.15)', background: 'rgba(236,72,153,0.15)', color: '#fff', width: 44, height: 44, borderRadius: 22, display: 'grid', placeItems: 'center', boxShadow: '0 8px 20px -6px rgba(236,72,153,0.5)', animation: 'floatY 3.4s ease-in-out infinite' }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h12v17l-6-4-6 4z"/></svg>
      </button>
    </div>
  );
}
function StepVisual3() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
      {[ ['#A78BFA', 75], ['#EC4899', 88], ['#F97316', 52], ['#34D399', 96] ].map(([c, w], i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 6, height: 6, borderRadius: 2, background: c, flexShrink: 0 }} />
          <div style={{ flex: 1, height: 8, background: 'rgba(255,255,255,0.04)', borderRadius: 999, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${w}%`, background: `linear-gradient(90deg, ${c}, transparent)`, opacity: 0.6 }} />
          </div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--text-mute)', width: 28, textAlign: 'right' }}>{w}</div>
        </div>
      ))}
    </div>
  );
}

// ─── 6. FEATURES ────────────────────────────────────────────────────────────
function Features() {
  const tiles = [
    { ico: <IcoBrain />, title: 'AI categorisation', body: "Bookmarks are intelligently categorised across your favourite topics. Anything below Backread's confidence threshold lands in a smart inbox you triage with one tap — confidence grows as the inbox learns, and you can set custom rules for specific posters.", accent: 'a' },
    { ico: <IcoLink />, title: 'Link previews', body: "Articles, videos, images — all unfurled with thumbnails and summaries, no need to leave the app.", accent: 'b' },
    { ico: <IcoSearch />, title: 'Full-text search', body: 'Every word of every bookmark, instantly and semantically searchable. Filter by topic, category, date, media, or confidence. You’ll never lose anything again.', accent: 'a' },
    { ico: <IcoDevices />, title: 'Mobile + desktop', body: 'Full power on iOS and in your browser. Same data, one tap.', accent: 'c' },
    { ico: <IcoExport />, title: 'Export anywhere', body: "Markdown export for any bookmark. Take your knowledge with you. We're not a roach motel.", accent: 'b' },
    { ico: <IcoLock />, title: 'Private by default', body: 'Your bookmarks stay yours. We never share, sell, or train on your data.', accent: 'a' },
  ];
  return (
    <section id="features" style={featStyles.section}>
      <div className="container">
        <div style={featStyles.head}>
          <span className="eyebrow">Inside Backread</span>
          <h2 style={featStyles.title}>Calm, capable, <span className="grad-text">yours.</span></h2>
        </div>
        <div style={featStyles.grid} className="grid-3-collapse">
          {tiles.map((t, i) => (
            <div key={i} style={featStyles.tile}>
              <div style={{...featStyles.icoWrap, ...featStyles[`accent_${t.accent}`]}}>
                {t.ico}
              </div>
              <h3 style={featStyles.tileTitle}>{t.title}</h3>
              <p style={featStyles.tileBody}>{t.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
const featStyles = {
  section: { padding: '80px 0' },
  head: { textAlign: 'center', marginBottom: 56 },
  title: { fontSize: 'clamp(34px, 4.4vw, 54px)', fontWeight: 600, letterSpacing: '-0.025em', marginTop: 8 },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--border)', border: '0.5px solid var(--border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' },
  tile: { background: 'var(--bg)', padding: '32px 28px 30px', display: 'flex', flexDirection: 'column', gap: 12 },
  icoWrap: { width: 38, height: 38, borderRadius: 10, display: 'grid', placeItems: 'center', marginBottom: 10, background: 'rgba(255,255,255,0.04)', border: '0.5px solid rgba(255,255,255,0.06)' },
  accent_a: { color: '#A78BFA' },
  accent_b: { color: '#F472B6' },
  accent_c: { color: '#FB923C' },
  tileTitle: { fontSize: 19, fontWeight: 600, letterSpacing: '-0.015em', margin: 0 },
  tileBody: { fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-dim)', margin: 0 },
};

// ─── 7. PRICING ─────────────────────────────────────────────────────────────
function Pricing() {
  return (
    <section id="pricing" style={priceStyles.section}>
      <div className="container-tight">
        <div style={priceStyles.head}>
          <span className="eyebrow">Pricing</span>
          <h2 style={priceStyles.title}>Try it free. <span className="grad-text">Upgrade when it earns it.</span></h2>
        </div>
        <div style={priceStyles.grid} className="grid-2-collapse">

          <div style={priceStyles.card}>
            <div style={priceStyles.cardTop}>
              <div style={priceStyles.tier}>Try free</div>
              <div style={priceStyles.tag}>20 bookmarks</div>
            </div>
            <p style={priceStyles.pitch}>
              See Backread with your 20 most recent X bookmarks. Fully categorised, fully usable. No card required.
            </p>
            <div style={priceStyles.priceRow}>
              <span style={priceStyles.priceBig}>$0</span>
            </div>
            <div style={priceStyles.meta}>
              <span className="mono" style={priceStyles.metaPill}>One-time setup</span>
              <span className="mono" style={priceStyles.metaPill}>No ongoing sync</span>
            </div>
            <div style={priceStyles.spacer} />
            <a className="btn-ghost" href={SIGN_IN_URL} style={{ width: '100%', justifyContent: 'center', gap: 10, display: 'inline-flex', alignItems: 'center' }}>
              <IcoX size={15} /> Sign in with X
              <IcoArrow />
            </a>
          </div>

          <div style={{ ...priceStyles.card, ...priceStyles.cardPro }}>
            <div style={priceStyles.proGlow} />
            <div style={priceStyles.proInner}>
              <div style={priceStyles.cardTop}>
                <div style={{ ...priceStyles.tier, display: 'flex', alignItems: 'center', gap: 8 }}>
                  Backread Pro
                </div>
                <div style={priceStyles.badge}>Full archive</div>
              </div>
              <p style={priceStyles.pitch}>
                Your complete X bookmark archive, synced continuously. Every save, every detail, instantly findable. Unlock your hidden knowledge.
              </p>
              <div style={priceStyles.priceRow}>
                <span style={{...priceStyles.priceBig, ...{background: 'var(--grad)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent'}}}>$5</span>
                <span style={priceStyles.priceUnit}>/ month</span>
              </div>
              <ul style={priceStyles.proList}>
                <PriceLi>Full archive of every bookmark</PriceLi>
                <PriceLi>30-minute sync</PriceLi>
                <PriceLi>Markdown export</PriceLi>
                <PriceLi>New features first</PriceLi>
              </ul>
              <a className="btn-primary" href={SIGN_IN_URL} style={{ width: '100%', justifyContent: 'center' }}>
                Start free trial
                <IcoArrow />
              </a>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}
const priceStyles = {
  section: { padding: '80px 0' },
  head: { textAlign: 'center', marginBottom: 48 },
  title: { fontSize: 'clamp(34px, 4.4vw, 50px)', fontWeight: 600, letterSpacing: '-0.025em', marginTop: 8 },
  sub: { color: 'var(--text-dim)', fontSize: 16, marginTop: 12 },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, alignItems: 'stretch' },
  card: { background: 'var(--bg-card)', border: '0.5px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 32, display: 'flex', flexDirection: 'column', gap: 16, position: 'relative', overflow: 'hidden' },
  cardPro: { border: '0.5px solid rgba(139,92,246,0.35)', background: 'linear-gradient(180deg, rgba(139,92,246,0.04), rgba(236,72,153,0.02))' },
  proInner: { position: 'relative', display: 'flex', flexDirection: 'column', gap: 16, flex: 1 },
  proGlow: { position: 'absolute', top: '-50%', right: '-30%', width: 500, height: 500, background: 'radial-gradient(circle at center, rgba(236,72,153,0.18), transparent 60%)', pointerEvents: 'none' },
  cardTop: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  tier: { fontSize: 20, fontWeight: 600, letterSpacing: '-0.015em' },
  tag: { fontSize: 11, fontFamily: "'Geist Mono', monospace", color: 'var(--text-mute)', letterSpacing: 0.1, textTransform: 'uppercase' },
  badge: { fontSize: 10.5, fontWeight: 600, padding: '4px 10px', borderRadius: 999, background: 'var(--grad)', color: '#fff', letterSpacing: 0.04, boxShadow: '0 6px 18px -4px rgba(236,72,153,0.5)' },
  pitch: { fontSize: 15, lineHeight: 1.55, color: 'var(--text-dim)', margin: 0, maxWidth: 380 },
  priceRow: { display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 },
  priceBig: { fontSize: 64, fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1 },
  priceUnit: { color: 'var(--text-mute)', fontSize: 15 },
  meta: { display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 4 },
  metaPill: { fontSize: 11, color: 'var(--text-mute)', padding: '5px 10px', borderRadius: 999, border: '0.5px solid var(--border)', background: 'rgba(255,255,255,0.02)', letterSpacing: 0.02 },
  proList: { listStyle: 'none', padding: 0, margin: '4px 0 0', display: 'flex', flexDirection: 'column', gap: 10, flex: 1, fontSize: 14.5, color: 'var(--text-dim)' },
  spacer: { flex: 1 },
};

// ─── 8. FINAL CTA ───────────────────────────────────────────────────────────
function FinalCta() {
  return (
    <section style={finStyles.section}>
      <div style={finStyles.bgGlow} />
      <div className="container-tight" style={{ position: 'relative', textAlign: 'center' }}>
        <h2 style={finStyles.title}>
          Stop losing the best <br/>
          <span className="grad-text">of what you find.</span>
        </h2>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36 }}>
          <a className="btn-primary" href={SIGN_IN_URL} style={{ fontSize: 17, padding: '18px 26px' }}>
            <IcoX size={16} />
            Sign in with X
            <IcoArrow size={18}/>
          </a>
        </div>
        <div className="mono" style={finStyles.fine}>
          Free during beta &nbsp;·&nbsp; ~30 second setup
        </div>
      </div>
    </section>
  );
}
const finStyles = {
  section: { padding: '120px 0 130px', position: 'relative', overflow: 'hidden', borderTop: '0.5px solid var(--border)' },
  bgGlow: { position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 80% at 50% 50%, rgba(139,92,246,0.18), rgba(236,72,153,0.08) 40%, transparent 70%)', pointerEvents: 'none', filter: 'blur(20px)' },
  title: { fontSize: 'clamp(40px, 6vw, 78px)', fontWeight: 700, lineHeight: 1.04, letterSpacing: '-0.035em', textWrap: 'balance' },
  fine: { fontSize: 12, color: 'var(--text-mute)', letterSpacing: 0.02, marginTop: 20, textTransform: 'none' },
};

// ─── 9. FOOTER ──────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={footStyles.foot}>
      <div className="container" style={footStyles.row}>
        <div style={footStyles.left}>
          <a href="#top" style={navStyles.brand}>
            <span style={navStyles.brandTile}>B</span>
            <span style={navStyles.brandText}>Backread</span>
          </a>
          <span className="mono" style={footStyles.mute}>v0.4 · beta</span>
        </div>
        <div style={footStyles.links}>
          <a style={footStyles.link} href="https://x.com/thegav" target="_blank" rel="noreferrer"><IcoX size={14}/> @thegav</a>
          <span style={footStyles.mute}>Made with care · 2026</span>
        </div>
      </div>
    </footer>
  );
}
const footStyles = {
  foot: { borderTop: '0.5px solid var(--border)', padding: '32px 0' },
  row: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' },
  left: { display: 'flex', alignItems: 'center', gap: 16 },
  links: { display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' },
  link: { color: 'var(--text-dim)', textDecoration: 'none', fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 6 },
  mute: { fontSize: 11, color: 'var(--text-mute)', letterSpacing: 0.05 },
};

function PriceLi({ children }) {
  return (
    <li style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
      <span style={{ width: 16, height: 16, borderRadius: 999, background: 'rgba(139,92,246,0.18)', color: '#A78BFA', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2 }}>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
      </span>
      <span>{children}</span>
    </li>
  );
}

Object.assign(window, {
  Nav, Hero, VideoBlock, Problem, HowItWorks, Features, Pricing, FinalCta, Footer, PriceLi,
});