// Landing page
function LandingScreen({ go }) {
  const [exportMode, setExportMode] = useState('boring');
  const [openFaq, setOpenFaq] = useState(0);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const fn = (e) => {
      const el = document.getElementById('landing-scroll');
      setScrolled((el?.scrollTop || 0) > 12);
    };
    const el = document.getElementById('landing-scroll');
    el?.addEventListener('scroll', fn);
    return () => el?.removeEventListener('scroll', fn);
  }, []);

  const faqs = [
    { q: "Is this really free?", a: "The first resume is free, no card needed. Pro unlocks unlimited resumes, unlimited regenerations, and the unwatermarked Beautify export for $9/mo." },
    { q: "Is my data private?", a: "Your survey answers and resumes are yours. We never train on your data, and you can wipe everything from Settings in one click." },
    { q: "Will recruiter filters (ATS) read my Boring export?", a: "Yes. The Boring export is a clean .docx with standard fonts and zero formatting tricks. It's what we'd send if it were our job on the line." },
    { q: "Can I keep editing after I export?", a: "Always. The Google Doc lives in your Drive. You can also come back to Resumerush, tweak answers, and re-export with one click." },
    { q: "Can I have more than one resume?", a: "Pro lets you keep as many as you need — most folks have one per job track." },
    { q: "Which AI does it use?", a: "Frontier general-purpose models, tuned with a small library of recruiter-vetted resume rules. We swap underlying models as better ones land." },
  ];

  return (
    <div id="landing-scroll" className="scroll" style={{ height: '100%', overflowY: 'auto' }}>
      {/* Nav */}
      <nav style={{
        position: 'sticky', top: 0, zIndex: 10,
        background: scrolled ? 'rgba(250,250,247,0.85)' : 'transparent',
        backdropFilter: scrolled ? 'blur(12px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--border-default)' : '1px solid transparent',
        padding: '18px 48px', display: 'flex', alignItems: 'center', justifyContent:'space-between',
        transition: 'all var(--d-base) var(--e-out)',
      }}>
        <Wordmark size="md"/>
        <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
          <Btn variant="text" size="sm" onClick={()=>go('login')}>Log in</Btn>
          <Btn variant="primary" size="sm" onClick={()=>go('signup')}>Get started</Btn>
        </div>
      </nav>

      {/* Hero */}
      <section style={{ padding: '60px 48px 100px', maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems:'center' }}>
        <div className="fade-up">
          <span className="eyebrow"><span className="dot" style={{ background: 'var(--accent-primary)' }}/> AI Resume Builder</span>
          <h1 className="t-display" style={{ marginTop: 20, marginBottom: 20, maxWidth: 580, fontSize: 72, lineHeight: '76px' }}>The resume builder that asks the right questions.</h1>
          <p className="t-body-lg secondary" style={{ marginTop: 0, maxWidth: 520 }}>Answer 30 quick questions. Get a resume recruiters actually read. Export to Google Docs or a designed PDF.</p>
          <div style={{ display:'flex', gap: 12, marginTop: 32, alignItems:'center' }}>
            <Btn variant="primary" size="lg" onClick={()=>go('signup')} iconRight={<Icon.arrowRight size={18}/>}>Build my resume — free</Btn>
            <Btn variant="text" onClick={()=>{ const el = document.getElementById('sample'); el?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }} iconRight={<Icon.arrowRight size={16}/>}>See a sample</Btn>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap: 16, marginTop: 36 }}>
            <div style={{ display:'flex' }}>
              {['MK','JR','AS','TL'].map((n,i)=>(
                <div key={i} style={{ width: 32, height: 32, borderRadius:'50%', background: ['var(--accent-primary)','#1E3A8A','#7C3AED','#D97706'][i], color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 11, fontWeight: 600, border:'2px solid var(--bg-canvas)', marginLeft: i ? -8 : 0 }}>{n}</div>
              ))}
            </div>
            <div className="t-body-sm">
              <div className="star-row">★★★★★</div>
              <div className="muted">2,400+ resumes built last week</div>
            </div>
          </div>
        </div>

        {/* Floating resume stack */}
        <div className="landing-stack">
          <div className="paper p1">
            <div style={{ fontSize: 16, fontWeight: 700 }}>Maya Okafor</div>
            <div style={{ fontSize: 9, color: '#666', marginBottom: 8 }}>maya@gmail.com · San Francisco</div>
            <div style={{ fontSize: 10, fontWeight: 700, color:'var(--accent-primary)', textTransform:'uppercase', letterSpacing: '0.1em' }}>Experience</div>
            {[80,90,75,85,70,90].map((w,i)=>(<div key={i} style={{ height: 3, background:'#e5e3de', borderRadius: 2, margin: '4px 0', width: `${w}%` }}/>))}
          </div>
          <div className="paper p2">
            <div style={{ display:'grid', gridTemplateColumns:'30% 70%', gap: 8 }}>
              <div style={{ background:'var(--accent-primary)', padding: 6, borderRadius: 4, color:'#fff' }}>
                <div style={{ width: 24, height: 24, borderRadius:'50%', background:'rgba(255,255,255,0.3)', margin:'0 auto 6px' }}/>
                <div style={{ fontSize: 6, opacity: 0.7, marginBottom: 2, textTransform:'uppercase' }}>Skills</div>
                {[60,80,70,50,75].map((w,i)=>(<div key={i} style={{ height: 2, background:'rgba(255,255,255,0.5)', margin:'2px 0', width: `${w}%`, borderRadius: 1 }}/>))}
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 2 }}>Maya O.</div>
                <div style={{ fontSize: 8, color:'var(--accent-primary)', fontWeight: 600 }}>Senior Designer</div>
                {[90,80,85,70,80,75,85,90].map((w,i)=>(<div key={i} style={{ height: 3, background:'#e5e3de', borderRadius: 2, margin: '3px 0', width: `${w}%` }}/>))}
              </div>
            </div>
          </div>
          <div className="paper p3">
            <div style={{ fontSize: 14, fontFamily:'Instrument Serif, serif', fontWeight: 400 }}>Maya Okafor</div>
            <div style={{ height: 1, background:'#111', margin:'4px 0 8px' }}/>
            <div style={{ fontSize: 9, fontStyle:'italic', color:'#666', marginBottom: 6 }}>Senior Designer · Bracket</div>
            {[80,90,75,85,70].map((w,i)=>(<div key={i} style={{ height: 3, background:'#d8d6d1', borderRadius: 2, margin: '3px 0', width: `${w}%` }}/>))}
          </div>
        </div>
      </section>

      {/* Social proof */}
      <section style={{ padding: '0 48px 80px', maxWidth: 1280, margin: '0 auto', textAlign:'center' }}>
        <div className="t-caption muted" style={{ textTransform:'uppercase', letterSpacing:'0.14em', marginBottom: 24 }}>Candidates hired at</div>
        <div style={{ display:'flex', justifyContent:'space-between', gap: 24, opacity: 0.5, fontFamily:'var(--font-ui)', fontSize: 18, fontWeight: 600, color:'var(--text-secondary)', flexWrap:'wrap' }}>
          {['Google','Stripe','Airbnb','Notion','Linear','Figma'].map(b => <div key={b} style={{ letterSpacing:'-0.02em' }}>{b}</div>)}
        </div>
      </section>

      {/* How it works */}
      <section style={{ padding: '80px 48px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign:'center', marginBottom: 64 }}>
          <span className="eyebrow">How it works</span>
          <h2 className="t-h1" style={{ marginTop: 16 }}>Three steps. About six minutes.</h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 24 }}>
          {[
            { n: '01', t: 'Answer questions in plain English', d: 'No “describe your responsibilities.” We ask things like “what did you actually do day-to-day?”', vis: <ChatVis/> },
            { n: '02', t: 'AI writes your resume', d: 'Strong verbs, real metrics, recruiter-grade phrasing. You stay in your own voice.', vis: <SparkleVis/> },
            { n: '03', t: 'Export Boring or Beautify', d: 'A clean Google Doc for ATS, or a designed PDF for the world. You can have both.', vis: <TwoDocVis/> },
          ].map(s => (
            <div key={s.n} className="card card-lg" style={{ padding: 32 }}>
              <div style={{ height: 180, marginBottom: 24, display:'flex', alignItems:'center', justifyContent:'center', background:'var(--bg-sunken)', borderRadius: 12 }}>{s.vis}</div>
              <div className="t-mono muted" style={{ marginBottom: 8 }}>{s.n}</div>
              <h3 className="t-h3" style={{ margin: 0 }}>{s.t}</h3>
              <p className="t-body secondary" style={{ marginTop: 8 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Two-track */}
      <section style={{ padding: '80px 48px', background: 'var(--bg-sunken)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', textAlign:'center', marginBottom: 56 }}>
          <span className="eyebrow">The two-track export</span>
          <h2 className="t-h1" style={{ marginTop: 16, maxWidth: 800, marginInline:'auto' }}>Same content. Two formats. You pick.</h2>
          <p className="t-body-lg secondary" style={{ maxWidth: 600, margin: '16px auto 0' }}>Most people use Boring to apply and Beautify on their portfolio site. Both ship from the same resume.</p>
        </div>
        <div style={{ maxWidth: 1100, margin: '0 auto', display:'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div className="card card-lg" style={{ background: '#fff' }}>
            <div className="t-mono" style={{ color: 'var(--text-secondary)', marginBottom: 16 }}>BORING.DOCX</div>
            <div style={{ transform:'scale(0.85)', transformOrigin:'top left', width:'118%' }}>
              <BoringResume/>
            </div>
          </div>
          <div className="card card-lg" style={{ background: '#fff' }}>
            <div className="t-mono" style={{ color: 'var(--accent-primary)', marginBottom: 16 }}>BEAUTIFY.PDF</div>
            <div style={{ transform:'scale(0.85)', transformOrigin:'top left', width:'118%' }}>
              <BeautifyResume/>
            </div>
          </div>
        </div>
      </section>

      {/* Sample preview with toggle */}
      <section id="sample" style={{ padding: '100px 48px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign:'center', marginBottom: 40 }}>
          <span className="eyebrow">A real sample</span>
          <h2 className="t-h1" style={{ marginTop: 16 }}>Built from 30 questions. Read by recruiters.</h2>
        </div>
        <div style={{ display:'flex', justifyContent:'center', marginBottom: 24 }}>
          <div style={{ display:'inline-flex', background:'var(--bg-sunken)', padding: 4, borderRadius: 999, gap: 4 }}>
            {['boring','beautify'].map(m => (
              <button key={m} onClick={()=>setExportMode(m)} style={{
                padding: '8px 20px', borderRadius: 999, border: 0,
                background: exportMode === m ? 'var(--bg-surface)' : 'transparent',
                boxShadow: exportMode === m ? 'var(--shadow-sm)' : 'none',
                fontSize: 14, fontFamily:'inherit', fontWeight: 500, cursor:'pointer',
                color: exportMode === m ? 'var(--text-primary)' : 'var(--text-secondary)',
                textTransform: 'capitalize',
              }}>{m}</button>
            ))}
          </div>
        </div>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          {exportMode === 'boring' ? <BoringResume/> : <BeautifyResume/>}
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: '80px 48px', maxWidth: 800, margin: '0 auto' }}>
        <div style={{ textAlign:'center', marginBottom: 40 }}>
          <span className="eyebrow">FAQ</span>
          <h2 className="t-h1" style={{ marginTop: 16 }}>Questions you might be having.</h2>
        </div>
        <div className="stack">
          {faqs.map((f, i) => (
            <div key={i} className="card" style={{ padding: 0 }}>
              <button onClick={()=>setOpenFaq(openFaq === i ? -1 : i)} style={{ width:'100%', background:'transparent', border: 0, padding: '20px 24px', textAlign:'left', display:'flex', justifyContent:'space-between', alignItems:'center', cursor:'pointer', fontFamily:'inherit', fontSize: 17, fontWeight: 500, color:'inherit' }}>
                {f.q}
                <span style={{ transform: openFaq === i ? 'rotate(180deg)' : 'none', transition: 'transform var(--d-base) var(--e-out)', color: 'var(--text-muted)' }}><Icon.chevDown size={18}/></span>
              </button>
              {openFaq === i && (
                <div style={{ padding: '0 24px 20px', color:'var(--text-secondary)', lineHeight: 1.6 }}>{f.a}</div>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* Final CTA */}
      <section style={{ padding: '100px 48px', textAlign:'center', background:'var(--bg-sunken)' }}>
        <h2 className="t-display" style={{ marginBottom: 16, fontSize: 56 }}>Ready to stop dreading this?</h2>
        <p className="t-body-lg secondary" style={{ marginTop: 0, marginBottom: 32 }}>Six minutes from now you can have something you're proud to send.</p>
        <Btn variant="primary" size="lg" onClick={()=>go('signup')} iconRight={<Icon.arrowRight size={18}/>}>Build my resume — free</Btn>
      </section>

      {/* Footer */}
      <footer style={{ padding: '32px 48px', borderTop: '1px solid var(--border-default)', display:'flex', justifyContent:'space-between', alignItems:'center', fontSize: 13, color: 'var(--text-muted)' }}>
        <Wordmark size="sm"/>
        <div style={{ display:'flex', gap: 24 }}>
          <span>© 2026 Resumerush</span>
          <a style={{ color:'inherit' }} href="/privacy.html">Privacy</a>
          <a style={{ color:'inherit' }} href="/terms.html">Terms</a>
          <a style={{ color:'inherit' }} href="mailto:spencerbhedges@gmail.com">Contact</a>
          <a style={{ color:'inherit' }} href="#">X / Twitter</a>
        </div>
      </footer>
    </div>
  );
}

function ChatVis() {
  return (
    <div style={{ position:'relative', width: 160, height: 120 }}>
      <div style={{ position:'absolute', top: 8, left: 8, padding:'10px 14px', background:'var(--bg-surface)', borderRadius: '14px 14px 14px 4px', border:'1px solid var(--border-default)', fontSize: 12, maxWidth: 140 }}>What did you actually do?</div>
      <div style={{ position:'absolute', bottom: 8, right: 8, padding:'10px 14px', background:'var(--accent-primary)', color:'#fff', borderRadius: '14px 14px 4px 14px', fontSize: 12, maxWidth: 140 }}>Led the redesign of...</div>
    </div>
  );
}
function SparkleVis() {
  return (
    <div style={{ position:'relative', width: 140, height: 140 }}>
      <div style={{ position:'absolute', inset: 0, background:'var(--bg-surface)', borderRadius: 12, border:'1px solid var(--border-default)', padding: 14 }}>
        <div style={{ height: 4, background:'#111', borderRadius: 2, width:'60%', marginBottom: 6 }}/>
        {[90,80,85,70].map((w,i)=>(<div key={i} style={{ height: 3, background:'#d8d6d1', borderRadius: 2, margin: '3px 0', width: `${w}%` }}/>))}
      </div>
      <div style={{ position:'absolute', top: -8, right: -8, width: 36, height: 36, background:'var(--accent-primary)', borderRadius:'50%', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', animation:'pulse 2s var(--e-inout) infinite' }}>
        <Icon.sparkles size={16}/>
      </div>
    </div>
  );
}
function TwoDocVis() {
  return (
    <div style={{ display:'flex', gap: 12 }}>
      <div style={{ width: 70, height: 90, background:'#fff', borderRadius: 6, border:'1px solid var(--border-default)', padding: 6 }}>
        {[80,60,90,70,85,75,80,70].map((w,i)=>(<div key={i} style={{ height: 2, background:'#222', margin: '2px 0', width: `${w}%`, borderRadius: 1 }}/>))}
      </div>
      <div style={{ width: 70, height: 90, background:'#fff', borderRadius: 6, border:'1px solid var(--border-default)', display:'grid', gridTemplateColumns:'30% 70%' }}>
        <div style={{ background:'var(--accent-primary)', borderRadius:'5px 0 0 5px' }}/>
        <div style={{ padding: 4 }}>
          {[80,60,90,70].map((w,i)=>(<div key={i} style={{ height: 2, background:'#222', margin: '3px 0', width: `${w}%`, borderRadius: 1 }}/>))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LandingScreen });