// lp-sections2.jsx — Positioning + How it works

/* ───────────────────── POSITIONING (the gap) ───────────────────── */
function Positioning() {
  const cols = [
    { k:t('pos.preset.k'), sub:t('pos.preset.sub'), body:t('pos.preset.body'), cost:t('pos.preset.cost'), look:['halcyon','vellum'] },
    { k:'hueve', sub:t('pos.hueve.sub'), body:t('pos.hueve.body'), cost:t('pos.hueve.cost'), look:['marlow','aurum','reverie'], brand:true },
    { k:t('pos.pro.k'), sub:t('pos.pro.sub'), body:t('pos.pro.body'), cost:t('pos.pro.cost'), look:['nocturne','cedar'] },
  ];
  return (
    <section id="why" style={{ background:'var(--bg-2)', borderTop:'1px solid var(--hair)', borderBottom:'1px solid var(--hair)' }}>
      <div className="wrap">
        <Reveal>
          <span className="eyebrow section-eyebrow">Positioning</span>
          <h2 className="head">{lang() === 'ja'
            ? <React.Fragment>プリセットとプロツールの、<br/>ちょうど<span style={{ color:'var(--accent)' }}>あいだ</span>。</React.Fragment>
            : <React.Fragment>Right <span style={{ color:'var(--accent)' }}>between</span><br/>presets and pro tools.</React.Fragment>}</h2>
          <p className="lead">{t('pos.lead')}</p>
        </Reveal>
        <Reveal delay={100}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.15fr 1fr', gap:18, marginTop:48, alignItems:'stretch' }} data-pos>
            {cols.map(c => (
              <div key={c.k} style={{
                position:'relative', background: c.brand?'var(--surface)':'transparent',
                border:`1px solid ${c.brand?'var(--accent)':'var(--divider)'}`,
                borderRadius:20, padding:'30px 26px',
                boxShadow: c.brand?'0 24px 60px -30px rgba(224,164,88,0.4)':'none',
              }}>
                <div className="grain" style={{ height:74, borderRadius:12, background:lookField(c.look), marginBottom:22, position:'relative', overflow:'hidden' }} />
                <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', gap:8 }}>
                  <span className={c.brand?'wordmark':''} style={{ fontFamily: c.brand?'var(--serif)':'var(--sans)', fontSize: c.brand?24:18, fontWeight:700, color: c.brand?'var(--accent)':'var(--text)' }}>{c.brand?'hueve':c.k}</span>
                  <span className="stock" style={{ fontSize:9.5, color:'var(--text-dim)' }}>{c.sub}</span>
                </div>
                <p style={{ fontSize:14, lineHeight:1.85, color:'var(--text-soft)', margin:'14px 0 20px' }}>{c.body}</p>
                <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:12, color:'var(--text-mute)' }}>
                  <span style={{ fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.1em' }}>{t('pos.costLabel')}</span>
                  <span style={{ color: c.brand?'var(--accent)':'var(--text-soft)', fontWeight:600 }}>{c.cost}</span>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
        <p style={{ marginTop:22, fontFamily:'var(--mono)', fontSize:11, color:'var(--text-dim)', lineHeight:1.7 }}>
          {t('pos.note')}
        </p>
      </div>
      <style>{`@media (max-width:820px){ [data-pos]{ grid-template-columns:1fr !important; } }`}</style>
    </section>
  );
}

/* ───────────────────── HOW IT WORKS (3 steps) ───────────────────── */
function HowItWorks() {
  const steps = [
    { n:'01', title:t('how.s1.title'), icon:'plus', body:t('how.s1.body'), look:['aurum','halcyon'] },
    { n:'02', title:t('how.s2.title'), icon:'layers', body:t('how.s2.body'), look:['marlow','reverie','aurum'] },
    { n:'03', title:t('how.s3.title'), icon:'sliders', body:t('how.s3.body'), look:['ember','sahara','vellum'] },
  ];
  return (
    <section id="how">
      <div className="wrap">
        <Reveal>
          <span className="eyebrow section-eyebrow">How it works</span>
          <h2 className="head">{t('how.head')}</h2>
        </Reveal>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:28, marginTop:54 }} data-steps>
          {steps.map((s,i) => (
            <Reveal key={s.n} delay={i*110}>
              <div className="grain" style={{ position:'relative', height:150, borderRadius:16, background:lookField(s.look), overflow:'hidden', marginBottom:24 }}>
                <div style={{ position:'absolute', left:18, bottom:14, display:'flex', gap:6 }}>
                  {s.look.map(id => <span key={id} style={{ width:14, height:14, borderRadius:5, background:PIG[id].swatch, boxShadow:'0 1px 4px rgba(0,0,0,0.4)' }} />)}
                </div>
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:12 }}>
                <span className="mono" style={{ fontSize:13, color:'var(--accent)', letterSpacing:'0.1em' }}>{s.n}</span>
                <Icon name={s.icon} size={19} color="var(--text-mute)" />
                <h3 className="serif" style={{ fontSize:22, margin:0, fontWeight:600, color:'var(--text)' }}>{s.title}</h3>
              </div>
              <p style={{ fontSize:14.5, lineHeight:1.9, color:'var(--text-soft)', margin:0 }}>{s.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width:820px){ [data-steps]{ grid-template-columns:1fr !important; gap:40px !important; } }`}</style>
    </section>
  );
}

Object.assign(window, { Positioning, HowItWorks });