// lp-sections.jsx — Nav + Hero

/* ─────────────────────────── NAV ─────────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', f, { passive:true }); f();
    return () => window.removeEventListener('scroll', f);
  }, []);
  const link = { color:'var(--text-mute)', textDecoration:'none', fontSize:13.5, fontWeight:500, letterSpacing:'0.02em', transition:'color .2s' };
  return (
    <header style={{
      position:'sticky', top:0, zIndex:80,
      background: scrolled ? 'rgba(14,14,16,0.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(150%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(150%)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--divider)' : 'transparent'}`,
      transition:'background .3s ease, border-color .3s ease',
    }}>
      <div className="wrap" style={{ display:'flex', alignItems:'center', justifyContent:'space-between', height:68 }}>
        <a href="#top" className="wordmark" style={{ fontSize:25, color:'var(--text)', textDecoration:'none' }}>hueve</a>
        <nav style={{ display:'flex', gap:30, alignItems:'center' }}>
          <a href="#how"     className="hide-mobile" style={link}>{t('nav.how')}</a>
          <a href="#pigments" className="hide-mobile" style={link}>{t('nav.pigments')}</a>
          <a href="#pricing" className="hide-mobile" style={link}>{t('nav.pricing')}</a>
          <a href="#faq"     className="hide-mobile" style={link}>{t('nav.faq')}</a>
          <LangToggle />
          <a href="#pricing" className="btn btn-primary" style={{ padding:'10px 18px', fontSize:13 }}>{t('nav.cta')}</a>
        </nav>
      </div>
    </header>
  );
}

/* ─────────────────────────── HERO ─────────────────────────── */
function Hero() {
  return (
    <section id="top" style={{ paddingTop:48, paddingBottom:72, overflow:'hidden' }}>
      {/* ambient graded glow */}
      <div aria-hidden style={{ position:'absolute', top:'-10%', right:'-6%', width:620, height:620, borderRadius:'50%', background: lookField(['aurum','marlow','reverie']), filter:'blur(120px)', opacity:0.30, pointerEvents:'none', zIndex:0 }} />
      <div className="wrap" style={{ position:'relative', zIndex:1 }}>
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1.05fr) minmax(0,0.95fr)', gap:56, alignItems:'center' }} data-hero>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom:22 }}>{t('hero.eyebrow')}</div>
            <h1 className="serif" style={{ fontSize:'clamp(40px,6.4vw,74px)', lineHeight:1.16, margin:0, fontWeight:600, letterSpacing:'0.01em', color:'var(--text)' }}>
              {lang() === 'ja'
                ? <React.Fragment>色を選ぶんじゃない。<br/><span style={{ color:'var(--accent)' }}>混ぜて</span>作る。</React.Fragment>
                : <React.Fragment>Don’t pick a color.<br/><span style={{ color:'var(--accent)' }}>Mix</span> your own.</React.Fragment>}
            </h1>
            <p style={{ marginTop:26, marginBottom:38, fontSize:16.5, lineHeight:1.95, color:'var(--text-soft)', maxWidth:'42ch' }}>
              {lang() === 'ja'
                ? <React.Fragment>hueve は、用意されたフィルターを選ぶアプリではありません。<br/>設計された少数の<em style={{ fontStyle:'normal', color:'var(--text)', fontWeight:700 }}>「絵の具」</em>を混ぜて、あなただけのルックを作る。プリセットほど浅くなく、プロのツールほど難しくない、ちょうど中間の手触り。</React.Fragment>
                : <React.Fragment>hueve isn’t about choosing a ready-made filter.<br/>Blend a small set of designed <em style={{ fontStyle:'normal', color:'var(--text)', fontWeight:700 }}>“pigments”</em> to author a look that’s yours — never as shallow as a preset, never as hard as a pro tool. Right in between.</React.Fragment>}
            </p>
            <div style={{ display:'flex', gap:12, flexWrap:'wrap', alignItems:'center' }}>
              <a href="#pricing" className="btn btn-primary">{t('hero.cta1')}<Icon name="arrowRight" size={17} /></a>
              <a href="#pigments" className="btn btn-ghost">{t('hero.cta2')}</a>
            </div>
            {/* pigment palette motif */}
            <div style={{ marginTop:40 }}>
              <div className="stock" style={{ fontSize:10, color:'var(--text-dim)', marginBottom:14 }}>{t('hero.pigments')}</div>
              <div style={{ display:'flex', gap:9, flexWrap:'wrap' }}>
                {PIGMENTS.map(p => (
                  <PaintDab key={p.id} id={p.id} size={30} style={{ filter:'drop-shadow(0 3px 6px rgba(0,0,0,0.45))' }} />
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal delay={140} style={{ display:'flex', justifyContent:'center' }}>
            <Phone width={300} glow={lookField(['marlow','aurum','reverie'])}>
              <EditorScreen
                img="assets/hero-photo.jpg"
                look={['marlow','aurum','reverie']}
                selected={[{id:'marlow',w:0.62},{id:'aurum',w:0.40},{id:'reverie',w:0.22}]} />
            </Phone>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width:880px){ [data-hero]{ grid-template-columns:1fr !important; gap:48px !important; } }`}</style>
    </section>
  );
}

Object.assign(window, { Nav, Hero });