// lp-sections4.jsx — Finishing · Looks · Pricing · FAQ · Footer

/* ───────────────────── FINISHING + LOOKS ───────────────────── */
function Finishing() {
  const ctrls = [
    { label:t('ctl.amount'), v:0.7 }, { label:t('ctl.exposure'), v:0.55 }, { label:t('ctl.contrast'), v:0.62 },
    { label:t('ctl.saturation'), v:0.48 }, { label:t('ctl.wbBY'), v:0.4 }, { label:t('ctl.wbGP'), v:0.35 },
    { label:t('ctl.aging'), v:0.45, pro:true }, { label:t('ctl.grain'), v:0.3, pro:true },
  ];
  return (
    <section id="finishing" style={{ background:'var(--bg-2)', borderTop:'1px solid var(--hair)', borderBottom:'1px solid var(--hair)' }}>
      <div className="wrap">
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,0.9fr) minmax(0,1.1fr)', gap:56, alignItems:'center' }} data-fin>
          <Reveal>
            <div style={{ background:'var(--surface)', border:'1px solid var(--divider)', borderRadius:18, padding:'26px 24px' }}>
              <div className="stock" style={{ fontSize:10.5, color:'var(--text-mute)', marginBottom:18 }}>{t('ctl.finishing')}</div>
              {ctrls.map(c => <SliderRow key={c.label} label={c.label} value={c.v} locked={c.pro} />)}
            </div>
          </Reveal>
          <Reveal delay={100}>
            <span className="eyebrow section-eyebrow">Finishing</span>
            <h2 className="head">{lang() === 'ja'
              ? <React.Fragment>混ぜたあとは、<br/>静かに、整える。</React.Fragment>
              : <React.Fragment>After the mix,<br/>quietly refine.</React.Fragment>}</h2>
            <p className="lead">{t('fin.lead.pre')}<em style={{ fontStyle:'normal', color:'var(--text)', fontWeight:700 }}>{t('fin.lead.aging')}</em>{t('fin.lead.and')}<em style={{ fontStyle:'normal', color:'var(--text)', fontWeight:700 }}>{t('fin.lead.grain')}</em>{t('fin.lead.post')}</p>
            <p style={{ marginTop:18, fontSize:13.5, color:'var(--text-mute)', lineHeight:1.8 }}>{t('fin.note')}</p>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width:820px){ [data-fin]{ grid-template-columns:1fr !important; gap:36px !important; } }`}</style>
    </section>
  );
}

function Looks() {
  const looks = [t('looks.name1'), t('looks.name2'), t('looks.name3'), t('looks.name4')];
  return (
    <section id="looks">
      <div className="wrap">
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1.1fr) minmax(0,0.9fr)', gap:56, alignItems:'center' }} data-looks>
          <Reveal>
            <span className="eyebrow section-eyebrow">{t('looks.eyebrow')}</span>
            <h2 className="head">{lang() === 'ja'
              ? <React.Fragment>作ったルックは、<br/>コードで渡せる。</React.Fragment>
              : <React.Fragment>Your look,<br/>passed as a code.</React.Fragment>}</h2>
            <p className="lead">{t('looks.lead.pre')}<span className="mono" style={{ fontSize:13, color:'var(--accent)' }}>hue1;W=…</span>{t('looks.lead.post')}</p>
            <div style={{ marginTop:26, display:'flex', gap:10, flexWrap:'wrap' }}>
              {looks.map(l => <span key={l} className="chip" style={{ color:'var(--text-soft)' }}>{l}</span>)}
            </div>
          </Reveal>
          <Reveal delay={100}>
            <div style={{ background:'var(--surface)', border:'1px solid var(--divider)', borderRadius:18, padding:'22px 22px 24px' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
                <span className="stock" style={{ fontSize:10.5, color:'var(--text-mute)' }}>{t('looks.ui.looks')}</span>
                <div style={{ display:'flex', gap:16 }}>
                  <span style={{ fontSize:12.5, color:'var(--text-mute)' }}>{t('looks.ui.import')}</span>
                  <span style={{ fontSize:12.5, color:'var(--accent)' }}>{t('looks.ui.share')}</span>
                  <span style={{ fontSize:12.5, color:'var(--accent)' }}>{t('looks.ui.save')}</span>
                </div>
              </div>
              <div style={{ display:'flex', gap:10, marginBottom:18 }}>
                <div style={{ flex:1, height:40, borderRadius:8, border:'1px solid var(--divider)', display:'flex', alignItems:'center', padding:'0 12px', fontFamily:'var(--mono)', fontSize:11, color:'var(--text-dim)' }}>{t('looks.ui.placeholder')}</div>
                <div style={{ background:'var(--accent)', color:'var(--on-accent)', borderRadius:8, padding:'0 16px', display:'flex', alignItems:'center', fontWeight:600, fontSize:13 }}>{t('looks.ui.apply')}</div>
              </div>
              <div style={{ display:'flex', gap:9, flexWrap:'wrap' }}>
                {[['marlow','aurum'],['ember','sahara'],['nocturne','cedar'],['reverie','aurum']].map((mix,i) => (
                  <div key={i} style={{ display:'flex', alignItems:'center', gap:8, padding:'7px 13px', borderRadius:999, border:'1px solid var(--divider)' }}>
                    <span style={{ display:'flex' }}>{mix.map(id => <span key={id} style={{ width:13, height:13, borderRadius:4, background:PIG[id].swatch, marginLeft:id===mix[0]?0:-4, boxShadow:'0 0 0 1.5px var(--surface)' }} />)}</span>
                    <span style={{ fontSize:12, color:'var(--text-soft)' }}>{looks[i]}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width:820px){ [data-looks]{ grid-template-columns:1fr !important; gap:36px !important; } }`}</style>
    </section>
  );
}

/* ───────────────────── PRICING ───────────────────── */
function Pricing() {
  const proFeatures = [t('price.pro.f1'),t('price.pro.f2'),t('price.pro.f3'),t('price.pro.f4')];
  const freeFeatures = [t('price.free.f1'),t('price.free.f2'),t('price.free.f3'),t('price.free.f4')];
  return (
    <section id="pricing" style={{ background:'var(--bg-2)', borderTop:'1px solid var(--hair)', borderBottom:'1px solid var(--hair)' }}>
      <div className="wrap">
        <Reveal>
          <span className="eyebrow section-eyebrow">Pricing</span>
          <h2 className="head">{t('price.head')}</h2>
          <p className="lead">{t('price.lead')}</p>
        </Reveal>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginTop:48, maxWidth:880 }} data-price>
          {/* Free */}
          <Reveal>
            <div style={{ background:'var(--surface)', border:'1px solid var(--divider)', borderRadius:20, padding:'30px 28px', height:'100%' }}>
              <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between' }}>
                <h3 style={{ fontSize:18, margin:0, fontWeight:600, color:'var(--text)' }}>Free</h3>
                <span className="mono" style={{ fontSize:13, color:'var(--text-mute)' }}>¥0</span>
              </div>
              <p style={{ fontSize:13.5, color:'var(--text-mute)', margin:'6px 0 22px' }}>{t('price.freeSub')}</p>
              <ul style={{ listStyle:'none', padding:0, margin:0, display:'grid', gap:13 }}>
                {freeFeatures.map(f => <li key={f} style={{ display:'flex', gap:11, fontSize:14, color:'var(--text-soft)', lineHeight:1.5 }}><Icon name="check" size={17} color="var(--text-mute)" style={{ flex:'0 0 auto', marginTop:2 }} />{f}</li>)}
              </ul>
            </div>
          </Reveal>
          {/* Pro */}
          <Reveal delay={100}>
            <div style={{ position:'relative', background:'var(--surface)', border:'1px solid var(--accent)', borderRadius:20, padding:'30px 28px', height:'100%', boxShadow:'0 30px 70px -34px rgba(224,164,88,0.45)' }}>
              <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', flexWrap:'wrap', gap:8 }}>
                <h3 className="serif" style={{ fontSize:22, margin:0, fontWeight:700, color:'var(--accent)' }}>hueve Pro</h3>
                <div style={{ textAlign:'right' }}>
                  <div style={{ fontFamily:'var(--mono)', fontSize:15, color:'var(--text)' }}>¥3,800<span style={{ fontSize:11, color:'var(--text-mute)' }}>{t('price.perYear')}</span></div>
                  <div style={{ fontFamily:'var(--mono)', fontSize:11, color:'var(--text-mute)' }}>{t('price.orMonth')}</div>
                </div>
              </div>
              <p style={{ fontSize:13.5, color:'var(--text-soft)', margin:'6px 0 22px' }}>{t('price.proSub')}</p>
              <ul style={{ listStyle:'none', padding:0, margin:'0 0 24px', display:'grid', gap:13 }}>
                {proFeatures.map(f => <li key={f} style={{ display:'flex', gap:11, fontSize:14, color:'var(--text)', lineHeight:1.5 }}><Icon name="check" size={17} color="var(--accent)" style={{ flex:'0 0 auto', marginTop:2 }} />{f}</li>)}
              </ul>
              <a href="#" className="btn btn-primary" style={{ width:'100%', justifyContent:'center' }}>{t('price.cta')}</a>
              <p style={{ fontSize:11, lineHeight:1.6, color:'var(--text-dim)', margin:'14px 0 0', textAlign:'center' }}>{t('price.legal')}</p>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width:680px){ [data-price]{ grid-template-columns:1fr !important; } }`}</style>
    </section>
  );
}

/* ───────────────────── FAQ ───────────────────── */
function FAQ() {
  const items = [
    { q:t('faq.q1'), a:t('faq.a1') },
    { q:t('faq.q2'), a:t('faq.a2') },
    { q:t('faq.q3'), a:t('faq.a3') },
    { q:t('faq.q4'), a:t('faq.a4') },
    { q:t('faq.q5'), a:t('faq.a5') },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq">
      <div className="wrap" style={{ maxWidth:840 }}>
        <Reveal>
          <span className="eyebrow section-eyebrow">FAQ</span>
          <h2 className="head">{t('faq.head')}</h2>
        </Reveal>
        <div style={{ marginTop:40, borderTop:'1px solid var(--divider)' }}>
          {items.map((it,i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom:'1px solid var(--divider)' }}>
                <button onClick={()=>setOpen(isOpen?-1:i)} style={{ width:'100%', display:'flex', justifyContent:'space-between', alignItems:'center', gap:20, padding:'22px 4px', background:'none', border:0, cursor:'pointer', textAlign:'left', color:'var(--text)', fontFamily:'var(--sans)' }}>
                  <span style={{ fontSize:16, fontWeight:500 }}>{it.q}</span>
                  <span style={{ flex:'0 0 auto', transition:'transform .3s ease', transform:isOpen?'rotate(45deg)':'none', color:'var(--accent)' }}><Icon name="plus" size={20} /></span>
                </button>
                <div style={{ maxHeight:isOpen?260:0, overflow:'hidden', transition:'max-height .4s ease' }}>
                  <p style={{ fontSize:14.5, lineHeight:1.9, color:'var(--text-soft)', margin:'0 4px 24px' }}>{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ───────────────────── FOOTER ───────────────────── */
function Footer() {
  return (
    <React.Fragment>
      {/* final CTA band */}
      <section style={{ paddingTop:96, paddingBottom:96, textAlign:'center', position:'relative', overflow:'hidden' }}>
        <div aria-hidden style={{ position:'absolute', inset:0, background:lookField(['marlow','aurum','reverie','ember']), opacity:0.16, filter:'blur(70px)' }} />
        <div className="wrap" style={{ position:'relative', zIndex:1 }}>
          <Reveal>
            <h2 className="serif" style={{ fontSize:'clamp(30px,5vw,54px)', fontWeight:600, lineHeight:1.3, margin:'0 0 28px', color:'var(--text)' }}>
              {t('footer.ctaHead').split('\n').map((ln, i) => <React.Fragment key={i}>{i > 0 && <br/>}{ln}</React.Fragment>)}
            </h2>
            <a href="#" className="btn btn-primary" style={{ padding:'15px 30px', fontSize:15 }}>{t('footer.cta')}<Icon name="arrowRight" size={17} /></a>
            <div style={{ marginTop:18, fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', color:'var(--text-dim)' }}>{t('footer.comingSoon')}</div>
          </Reveal>
        </div>
      </section>
      <footer style={{ borderTop:'1px solid var(--divider)', padding:'48px 0' }}>
        <div className="wrap" style={{ display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:24 }}>
          <div>
            <div className="wordmark" style={{ fontSize:24, color:'var(--text)' }}>hueve</div>
            <div style={{ fontSize:12.5, color:'var(--text-dim)', marginTop:4 }}>{t('footer.tagline')}</div>
          </div>
          <nav style={{ display:'flex', gap:26, fontSize:13, flexWrap:'wrap' }}>
            <a href="#how" style={{ color:'var(--text-mute)', textDecoration:'none' }}>{t('nav.how')}</a>
            <a href="#pigments" style={{ color:'var(--text-mute)', textDecoration:'none' }}>{t('nav.pigments')}</a>
            <a href="#pricing" style={{ color:'var(--text-mute)', textDecoration:'none' }}>{t('nav.pricing')}</a>
            <a href="#faq" style={{ color:'var(--text-mute)', textDecoration:'none' }}>{t('nav.faq')}</a>
            <a href="/privacy" style={{ color:'var(--text-mute)', textDecoration:'none' }}>{t('footer.privacy')}</a>
            <a href="/terms" style={{ color:'var(--text-mute)', textDecoration:'none' }}>{t('footer.terms')}</a>
            <a href="/contact" style={{ color:'var(--text-mute)', textDecoration:'none' }}>{t('footer.contact')}</a>
          </nav>
          <div style={{ fontFamily:'var(--mono)', fontSize:11.5, color:'var(--text-dim)' }}>© 2026 k3lab</div>
        </div>
      </footer>
    </React.Fragment>
  );
}

Object.assign(window, { Finishing, Looks, Pricing, FAQ, Footer });