// lp-sections3.jsx — Pigment catalog + interactive mixing demo

/* ───────────────────── 12 PIGMENTS (film-stock catalog) ───────────────────── */
function Pigments() {
  return (
    <section id="pigments" style={{ background:'var(--bg-2)', borderTop:'1px solid var(--hair)', borderBottom:'1px solid var(--hair)' }}>
      <div className="wrap">
        <Reveal>
          <span className="eyebrow section-eyebrow">The palette</span>
          <h2 className="head">{t('pig.head')}</h2>
          <p className="lead">{t('pig.lead')}</p>
        </Reveal>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginTop:48 }} data-pig-grid>
          {PIGMENTS.map((p,i) => (
            <Reveal key={p.id} delay={(i%4)*70}>
              <div style={{ background:'var(--surface)', border:'1px solid var(--divider)', borderRadius:16, overflow:'hidden', height:'100%' }}>
                <div style={{ position:'relative', height:138, display:'flex', alignItems:'center', justifyContent:'center', background:'radial-gradient(circle at 50% 42%, rgba(255,255,255,0.05), rgba(255,255,255,0) 68%)' }}>
                  <PaintDab id={p.id} size={94} />
                  {FREE_IDS.includes(p.id) && (
                    <span style={{ position:'absolute', top:12, right:12, fontFamily:'var(--mono)', fontSize:9, letterSpacing:'0.1em', color:'var(--text-mute)', border:'1px solid var(--divider)', padding:'2px 7px', borderRadius:999 }}>FREE</span>
                  )}
                </div>
                <div style={{ padding:'6px 16px 18px' }}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:9 }}>
                    <span className="stock" style={{ fontSize:12, color:'var(--text)' }}>{p.name}</span>
                    <span className="mono" style={{ fontSize:9.5, color:'var(--text-dim)', letterSpacing:'0.06em' }}>{p.anchor < 0.4 ? t('pig.tone.shadow') : p.anchor > 0.65 ? t('pig.tone.high') : t('pig.tone.mid')}</span>
                  </div>
                  <p style={{ fontSize:12.5, lineHeight:1.78, color:'var(--text-soft)', margin:0 }}>{lang() === 'ja' ? p.blurb : p.blurbEn}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width:900px){ [data-pig-grid]{ grid-template-columns:repeat(2,1fr) !important; } }
        @media (max-width:480px){ [data-pig-grid]{ grid-template-columns:1fr !important; } }
      `}</style>
    </section>
  );
}

/* ───────────────────── INTERACTIVE MIX DEMO ───────────────────── */
function weightedField(sel) {
  const ids = Object.keys(sel);
  if (!ids.length) return 'transparent';
  return ids.map(id => {
    const p = PIG[id], w = sel[id];
    const y = Math.round((1 - p.anchor) * 100), x = 40 + p.anchor * 30;
    return `radial-gradient(135% 105% at ${x}% ${y}%, ${rgba(p.swatch, 0.18 + 0.62*w)}, ${rgba(p.swatch,0)} 62%)`;
  }).join(', ');
}

function MixDemo() {
  const [sel, setSel] = React.useState({ marlow:0.6, aurum:0.4 });
  const ids = Object.keys(sel);
  const toggle = (id) => setSel(prev => {
    const n = { ...prev };
    if (n[id] != null) delete n[id]; else n[id] = 0.6;
    return n;
  });
  const setW = (id,v) => setSel(prev => ({ ...prev, [id]: v }));
  const filt = `saturate(${(1 + 0.18*ids.reduce((a,id)=>a+sel[id],0)).toFixed(2)}) contrast(1.04) brightness(1.01)`;
  const code = ids.length ? `hue1;W=${ids.map(id=>`${id}:${sel[id].toFixed(2)}`).join(',')}` : 'hue1;';

  return (
    <section id="mix">
      <div className="wrap">
        <Reveal>
          <span className="eyebrow section-eyebrow">Try it</span>
          <h2 className="head">{t('mix.head')}</h2>
          <p className="lead">{t('mix.lead')}</p>
        </Reveal>

        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1fr) 360px', gap:40, marginTop:48, alignItems:'start' }} data-mix>
          {/* preview */}
          <Reveal>
            <div style={{ position:'relative', borderRadius:18, overflow:'hidden', border:'1px solid var(--divider)', aspectRatio:'4 / 3', background:'var(--surface)' }}>
              <image-slot id="mix-photo" style={{ position:'absolute', inset:0, width:'100%', height:'100%', filter:filt, transition:'filter .3s ease' }} shape="rect" placeholder={t('mix.dragPhoto')}></image-slot>
              <div className="grain" aria-hidden style={{ position:'absolute', inset:0, background:weightedField(sel), mixBlendMode:'soft-light', transition:'background .35s ease', pointerEvents:'none' }} />
              {/* recipe chips */}
              <div style={{ position:'absolute', left:14, bottom:14, display:'flex', gap:7, flexWrap:'wrap', pointerEvents:'none' }}>
                {ids.map(id => (
                  <span key={id} style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'4px 10px', borderRadius:999, background:'rgba(14,14,16,0.62)', backdropFilter:'blur(8px)', fontFamily:'var(--mono)', fontSize:10, color:'#fff' }}>
                    <span style={{ width:9, height:9, borderRadius:3, background:PIG[id].swatch }} />{PIG[id].name} {Math.round(sel[id]*100)}
                  </span>
                ))}
              </div>
            </div>
          </Reveal>

          {/* controls */}
          <Reveal delay={120}>
            <div style={{ background:'var(--surface)', border:'1px solid var(--divider)', borderRadius:18, padding:'24px 22px' }}>
              <div className="stock" style={{ fontSize:10.5, color:'var(--text-mute)', marginBottom:14 }}>{t('ctl.pigments')}</div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap:12, marginBottom:22, justifyItems:'center' }}>
                {PIGMENTS.map(p => {
                  const on = sel[p.id] != null;
                  return (
                    <button key={p.id} onClick={()=>toggle(p.id)} title={p.name} style={{
                      width:'100%', maxWidth:46, aspectRatio:'1', borderRadius:'50%', background:'transparent', border:0, cursor:'pointer', padding:0, position:'relative',
                      boxShadow: on ? '0 0 0 2px var(--surface), 0 0 0 4px var(--accent)' : 'none',
                      transition:'box-shadow .2s ease, transform .15s ease', transform: on?'scale(1.04)':'scale(0.94)',
                    }}>
                      <PaintDab id={p.id} size={42} style={{ width:'100%', height:'100%' }} />
                    </button>
                  );
                })}
              </div>

              <div className="stock" style={{ fontSize:10.5, color:'var(--text-mute)', marginBottom:14 }}>{t('ctl.mix')}</div>
              {ids.length === 0 && <p style={{ fontSize:13, color:'var(--text-dim)', margin:'0 0 14px' }}>{t('mix.emptyHint')}</p>}
              {ids.map(id => (
                <div key={id} style={{ marginBottom:15 }}>
                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:7 }}>
                    <span style={{ fontSize:12.5, color:'var(--text-soft)', display:'inline-flex', alignItems:'center', gap:7 }}>
                      <span style={{ width:11, height:11, borderRadius:3, background:PIG[id].swatch }} />{PIG[id].name}
                    </span>
                    <span className="mono" style={{ fontSize:11, color:'var(--text-mute)' }}>{Math.round(sel[id]*100)}%</span>
                  </div>
                  <input type="range" min="0" max="1" step="0.01" value={sel[id]} onChange={e=>setW(id, parseFloat(e.target.value))} className="hueve-range" />
                </div>
              ))}

              <div className="hair" style={{ margin:'18px 0 14px' }} />
              <div className="stock" style={{ fontSize:10, color:'var(--text-dim)', marginBottom:8 }}>{t('mix.shareCode')}</div>
              <div className="mono" style={{ fontSize:11, color:'var(--accent)', wordBreak:'break-all', lineHeight:1.6 }}>{code}</div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        .hueve-range{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px; background:var(--divider); outline:none; }
        .hueve-range::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.5); }
        .hueve-range::-moz-range-thumb{ width:16px; height:16px; border:0; border-radius:50%; background:#fff; cursor:pointer; }
        @media (max-width:820px){ [data-mix]{ grid-template-columns:1fr !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Pigments, MixDemo });