// Nav, Hero, Section wrapper, scroll-reveal, Final CTA, Footer.

// Scroll reveal
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  });
}

// ── NAV ─────────────────────────────────────────────────────────────────────
function Nav({ theme, onToggleTheme }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{ ...nv.bar, ...(scrolled ? nv.barScrolled : {}) }}>
      <div className="container" style={nv.row}>
        <a href="#top" style={nv.brand}>
          <span style={nv.tile}>B</span>
          <span style={nv.name}>Backread</span>
        </a>
        <div style={nv.right}>
          <a href="#features" style={nv.link} className="hide-sm">Features</a>
          <a href="#pricing" style={nv.link} className="hide-sm">Pricing</a>
          <button onClick={onToggleTheme} style={nv.themeBtn} aria-label="Toggle theme">
            {theme === 'dark' ? <IcoSun size={16}/> : <IcoMoon size={16}/>}
          </button>
          <a href="/auth/x/start" className="btn-primary" style={{ fontSize: 14, padding: '10px 16px' }}>
            <IcoX size={14}/> Sign in
          </a>
        </div>
      </div>
    </nav>
  );
}
const nv = {
  bar: { position:'sticky', top:0, zIndex:50, transition:'background .25s, border-color .25s', borderBottom:'0.5px solid transparent' },
  barScrolled: { background:'color-mix(in srgb, var(--bg) 72%, transparent)', backdropFilter:'blur(14px) saturate(160%)', WebkitBackdropFilter:'blur(14px) saturate(160%)', borderBottom:'0.5px solid var(--border)' },
  row: { display:'flex', alignItems:'center', justifyContent:'space-between', height:66 },
  brand: { display:'flex', alignItems:'center', gap:10, textDecoration:'none', color:'inherit' },
  tile: { 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)' },
  name: { fontWeight:600, fontSize:16, letterSpacing:'-0.01em' },
  right: { display:'flex', alignItems:'center', gap:6 },
  link: { color:'var(--text-dim)', textDecoration:'none', fontSize:14, padding:'8px 12px', borderRadius:8 },
  themeBtn: { appearance:'none', cursor:'pointer', width:36, height:36, borderRadius:9, border:'0.5px solid var(--border-strong)', background:'var(--surface-1)', color:'var(--text)', display:'grid', placeItems:'center', transition:'background .15s' },
};

// ── HERO ────────────────────────────────────────────────────────────────────
function Hero({ glow }) {
  return (
    <header id="top" style={hr.section}>
      <div style={{ ...hr.glow, opacity: glow/100 }}><div style={hr.glowA}/><div style={hr.glowB}/></div>
      <div className="container" style={hr.inner}>
        <div className="pill"><span className="dot"/><span>X-native intelligence workspace</span></div>
        <h1 style={hr.h1}>
          Other apps save your<br/>X bookmarks.<br/>
          <span className="grad-text">Backread understands them.</span>
        </h1>
        <p style={hr.sub}>
          Backread pulls in everything you save on X, ranks and files it with AI, and turns the pile into a searchable, actionable knowledge base — kept forever, even if the original is deleted.
        </p>
        <div style={hr.cta}>
          <a href="/auth/x/start" className="btn-primary" style={{ fontSize:16, padding:'15px 22px' }}><IcoX size={15}/> Sign in with X <IcoArrow size={17}/></a>
          <a href="#features" className="btn-ghost">See how it works <IcoArrowDown size={15}/></a>
        </div>
        <div className="mono" style={hr.fine}>Capture is table stakes · context, ranking & permanence are the point</div>
      </div>

      <div className="container" style={hr.mockWrap}>
        <div style={hr.mockGlow} />
        <div className="reveal" style={{ position:'relative' }}><HeroMock /></div>
      </div>
    </header>
  );
}
const hr = {
  section: { position:'relative', overflow:'hidden', paddingTop:48, paddingBottom:40 },
  glow: { position:'absolute', top:-260, right:-200, width:840, height:840, pointerEvents:'none', filter:'blur(8px)', animation:'glowPulse 10s ease-in-out infinite' },
  glowA: { position:'absolute', inset:0, background:'radial-gradient(circle at 55% 45%, rgba(236,72,153,0.42), rgba(139,92,246,0.26) 38%, transparent 70%)' },
  glowB: { position:'absolute', inset:0, background:'radial-gradient(circle at 70% 70%, rgba(139,92,246,0.34), transparent 58%)', mixBlendMode:'screen' },
  inner: { position:'relative', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap:22, paddingTop:30 },
  h1: { fontSize:'clamp(40px, 6.4vw, 80px)', fontWeight:700, lineHeight:1.03, letterSpacing:'-0.038em', textWrap:'balance', maxWidth:1000 },
  sub: { fontSize:'clamp(17px, 1.6vw, 21px)', lineHeight:1.55, color:'var(--text-dim)', maxWidth:600, textWrap:'pretty' },
  cta: { display:'flex', gap:12, flexWrap:'wrap', justifyContent:'center', alignItems:'center', marginTop:2 },
  fine: { fontSize:12, color:'var(--text-mute)', marginTop:2, textTransform:'none', letterSpacing:'.01em' },
  mockWrap: { position:'relative', marginTop:56 },
  mockGlow: { position:'absolute', inset:'-30px -10px 40px', background:'radial-gradient(ellipse 60% 60% at 50% 0%, rgba(139,92,246,0.16), transparent 65%)', filter:'blur(40px)', pointerEvents:'none' },
};

// ── SECTION wrapper ───────────────────────────────────────────────────────────
function Feature({ id, eyebrow, title, lede, children, reverse, lead }) {
  return (
    <section id={id} style={ft.section}>
      <div className="container">
        <div className="reveal" style={{ ...ft.grid, ...(reverse ? ft.gridRev : {}) }}>
          <div style={{ ...ft.copy, ...(reverse ? ft.copyRev : {}) }}>
            {eyebrow && <span className="eyebrow">{eyebrow}</span>}
            <h2 className="sec-title" style={{ marginTop:16 }}>{title}</h2>
            <p className="sec-lede" style={{ marginTop:14, maxWidth:440 }}>{lede}</p>
            {lead && <div style={ft.lead}>{lead}</div>}
          </div>
          <div style={{ ...ft.visual, ...(reverse ? ft.visualRev : {}) }}>{children}</div>
        </div>
      </div>
    </section>
  );
}
const ft = {
  section: { padding:'56px 0' },
  grid: { display:'grid', gridTemplateColumns:'minmax(0,0.85fr) minmax(0,1fr)', gap:'clamp(32px,5vw,72px)', alignItems:'center' },
  gridRev: { gridTemplateColumns:'minmax(0,1fr) minmax(0,0.85fr)' },
  copy: { },
  copyRev: { order:2 },
  visual: { minWidth:0 },
  visualRev: { order:1 },
  lead: { marginTop:18, fontSize:14.5, color:'var(--text-dim)', borderLeft:'2px solid var(--magenta)', paddingLeft:14, lineHeight:1.5 },
};

// ── FINAL CTA ─────────────────────────────────────────────────────────────────
function FinalCta() {
  return (
    <section style={fc.section}>
      <div style={fc.glow} />
      <div className="container-tight reveal" style={{ position:'relative', textAlign:'center' }}>
        <span className="eyebrow" style={{ justifyContent:'center' }}>Stop losing the good ideas</span>
        <h2 style={fc.title}>Your bookmarks already<br/><span className="grad-text">passed your filter.</span></h2>
        <p className="sec-lede" style={{ margin:'18px auto 0', maxWidth:520 }}>Give them somewhere to live, to be understood, and to be used.</p>
        <div style={{ display:'flex', justifyContent:'center', marginTop:34 }}>
          <a href="/auth/x/start" className="btn-primary" style={{ fontSize:17, padding:'17px 26px' }}><IcoX size={16}/> Sign in with X <IcoArrow size={18}/></a>
        </div>
        <div className="mono" style={fc.fine}>Free to start · read-only access · your workspace stays private</div>
      </div>
    </section>
  );
}
const fc = {
  section: { padding:'110px 0 120px', position:'relative', overflow:'hidden', borderTop:'0.5px solid var(--border)', marginTop:40 },
  glow: { position:'absolute', inset:0, background:'radial-gradient(ellipse 55% 80% at 50% 45%, rgba(139,92,246,0.18), rgba(236,72,153,0.08) 42%, transparent 70%)', filter:'blur(20px)', pointerEvents:'none' },
  title: { fontSize:'clamp(36px, 5.4vw, 68px)', fontWeight:700, lineHeight:1.05, letterSpacing:'-0.035em', textWrap:'balance', marginTop:18 },
  fine: { fontSize:12, color:'var(--text-mute)', marginTop:18, textTransform:'none' },
};

// ── FOOTER ──────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={fo.foot}>
      <div className="container" style={fo.row}>
        <div style={fo.left}>
          <a href="#top" style={nv.brand}><span style={nv.tile}>B</span><span style={nv.name}>Backread</span></a>
          <span className="mono" style={fo.mute}>X-native · private by default</span>
        </div>
        <div style={fo.links}>
          <a style={fo.link} href="#">Privacy</a>
          <a style={fo.link} href="#">Terms</a>
          <a style={fo.link} href="#">Public categories</a>
          <a style={fo.link} href="#"><IcoX size={13}/> @backread</a>
        </div>
      </div>
      <div className="container" style={fo.sub}>
        <span className="mono" style={fo.mute}>© 2026 Backread</span>
        <span className="mono" style={fo.mute}>Read-focused. We never post, sell, or train on your data.</span>
      </div>
    </footer>
  );
}
const fo = {
  foot: { borderTop:'0.5px solid var(--border)', padding:'40px 0 48px' },
  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)' },
  sub: { display:'flex', justifyContent:'space-between', gap:16, flexWrap:'wrap', marginTop:24, paddingTop:20, borderTop:'0.5px solid var(--border)' },
};

Object.assign(window, { useReveal, Nav, Hero, Feature, FinalCta, Footer });