const HowItWorks = () => {
  const hw = L('how');
  const visuals = [<ConnectVisual/>, <TrainVisual/>, <ScaleVisual/>];
  const steps = hw.steps.map((s, i) => ({ ...s, n: ['01','02','03'][i], visual: visuals[i] }));

  return (
    <section id="how" className="section-pad">
      <div className="container">
        <div style={{ textAlign:'center', marginBottom:80, maxWidth:760, margin:'0 auto 80px' }}>
          <div className="eyebrow" style={{ marginBottom:14 }}>{hw.eyebrow}</div>
          <h2 className="display" style={{ fontSize:'clamp(38px, 5vw, 64px)', margin:0 }}>
            {hw.h2a} <span className="serif" style={{ color:'var(--green)' }}>{hw.word}</span><br/>
            {hw.h2b}
          </h2>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:24 }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center',
              padding:'40px 0',
              borderTop: i===0 ? '1px solid var(--line)' : 'none',
              borderBottom:'1px solid var(--line)',
            }} className={`step-row ${i%2===1 ? 'reverse' : ''}`}>
              <div style={{ order: i%2 === 1 ? 2 : 1 }}>
                <div style={{
                  fontFamily:"'Geist Mono',monospace", fontSize:13, color:'var(--green)', marginBottom:14, letterSpacing:'0.05em'
                }}>{s.n} / 03</div>
                <h3 style={{
                  margin:0, fontSize:'clamp(28px, 3vw, 44px)', fontWeight:600,
                  letterSpacing:'-0.02em', lineHeight:1.05,
                  fontFamily:"'Bricolage Grotesque',sans-serif"
                }}>{s.title}</h3>
                <p style={{ marginTop:16, fontSize:17, color:'var(--ink-2)', lineHeight:1.55, maxWidth:480 }}>
                  {s.desc}
                </p>
              </div>
              <div style={{ order: i%2 === 1 ? 1 : 2, display:'flex', justifyContent:'center' }}>
                {s.visual}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .step-row { grid-template-columns: 1fr !important; }
          .step-row > div { order: initial !important; }
        }
      `}</style>
    </section>
  );
};

const ConnectVisual = () => (
  <div className="card" style={{ width:'100%', maxWidth:440, padding:28, position:'relative', overflow:'hidden' }}>
    <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:18, fontSize:13, color:'var(--ink-3)' }}>
      <Icon name="qr" size={14}/> {L('how').connectLabel}
    </div>
    <div style={{
      width:200, height:200, margin:'0 auto', borderRadius:16,
      background:'#fff', padding:14, position:'relative'
    }}>
      <svg viewBox="0 0 25 25" width="100%" height="100%" shapeRendering="crispEdges">
        {Array.from({length:25}).map((_,r) =>
          Array.from({length:25}).map((_,c) => {
            const isCorner = (r<7 && c<7) || (r<7 && c>17) || (r>17 && c<7);
            const seed = ((r*7+c*3) % 5);
            const on = isCorner ? (r===0||r===6||c===0||c===6||(r>=2&&r<=4&&c>=2&&c<=4)) : seed===0;
            return on ? <rect key={r+'-'+c} x={c} y={r} width="1" height="1" fill="#001509"/> : null;
          })
        )}
      </svg>
      <div style={{
        position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)',
        width:44, height:44, borderRadius:10,
        background:'linear-gradient(135deg, #00ff88, #00a55a)',
        display:'grid', placeItems:'center',
        boxShadow:'0 0 24px rgba(0,228,122,0.6)',
      }}>
        <Icon name="bolt" size={22} stroke="#001509"/>
      </div>
    </div>
    <div style={{
      marginTop:18, padding:'10px 14px', borderRadius:10,
      background:'rgba(0,228,122,0.08)', border:'1px solid rgba(0,228,122,0.2)',
      fontSize:12.5, color:'var(--green)', display:'flex', alignItems:'center', gap:8,
      fontFamily:"'Geist Mono',monospace"
    }}>
      <span className="dot" style={{ width:6, height:6, borderRadius:'50%', background:'var(--green)' }}/>
      {L('how').connectStatus}
    </div>
  </div>
);

const TrainVisual = () => (
  <div className="card" style={{ width:'100%', maxWidth:460, padding:24 }}>
    <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14, fontSize:13, color:'var(--ink-3)' }}>
      <Icon name="spark" size={14}/> {L('how').trainLabel}
    </div>
    {[
      { name:'catalogo-2026.pdf', size:'2.4 MB', done:true },
      { name:'faq-clientes.docx', size:'180 KB', done:true },
      { name:'precos-tabela.xlsx', size:'46 KB', done:true },
      { name:'politica-trocas.md', size:'12 KB', loading:true },
    ].map((f, i) => (
      <div key={i} style={{
        display:'flex', alignItems:'center', gap:12,
        padding:'12px 14px', borderRadius:10,
        background: f.loading ? 'rgba(0,228,122,0.06)' : 'rgba(255,255,255,0.02)',
        border:'1px solid '+ (f.loading ? 'rgba(0,228,122,0.2)' : 'var(--line)'),
        marginBottom:8
      }}>
        <div style={{
          width:30, height:30, borderRadius:7,
          background:'rgba(255,255,255,0.04)', display:'grid', placeItems:'center',
          color:'var(--ink-3)'
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M14 3v5h5M5 3h9l5 5v13H5z"/></svg>
        </div>
        <div style={{ flex:1, fontSize:13.5 }}>{f.name}</div>
        <div style={{ fontSize:11.5, color:'var(--ink-4)', fontFamily:"'Geist Mono',monospace" }}>{f.size}</div>
        {f.done && <span style={{ color:'var(--green)' }}><Icon name="check" size={16}/></span>}
        {f.loading && <span style={{
          width:14, height:14, borderRadius:'50%', border:'2px solid rgba(0,228,122,0.3)',
          borderTopColor:'var(--green)', animation:'spin 0.8s linear infinite'
        }}/>}
      </div>
    ))}
    <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:14, fontSize:12, color:'var(--ink-3)' }}>
      <Icon name="ai" size={13}/> {L('how').trainProgress}
      <div style={{ flex:1, height:3, background:'rgba(255,255,255,0.06)', borderRadius:2, overflow:'hidden' }}>
        <div style={{ width:'87%', height:'100%', background:'linear-gradient(90deg, var(--green), var(--green-2))', boxShadow:'0 0 8px var(--green-glow)' }}/>
      </div>
    </div>
    <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
  </div>
);

const ScaleVisual = () => {
  const bars = [12, 28, 22, 41, 38, 56, 64, 52, 78, 88, 92, 100];
  return (
    <div className="card" style={{ width:'100%', maxWidth:460, padding:24 }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14 }}>
        <div style={{ display:'flex', alignItems:'center', gap:10, fontSize:13, color:'var(--ink-3)' }}>
          <Icon name="trend" size={14}/> {L('how').scaleLabel}
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:6, fontSize:12, color:'var(--green)' }}>
          <Icon name="arrow-up" size={12}/> +127%
        </div>
      </div>
      <div style={{ fontSize:48, fontFamily:"'Bricolage Grotesque',sans-serif", fontWeight:700, letterSpacing:'-0.04em' }}>
        R$ 48.720
      </div>
      <div style={{ fontSize:12.5, color:'var(--ink-4)', marginBottom:18 }}>
        {L('how').scaleSub}
      </div>
      <div style={{ display:'flex', alignItems:'flex-end', gap:6, height:80 }}>
        {bars.map((b, i) => (
          <div key={i} style={{
            flex:1, height: b + '%',
            background: i === bars.length-1
              ? 'linear-gradient(180deg, var(--green-2), var(--green))'
              : 'linear-gradient(180deg, rgba(0,228,122,0.5), rgba(0,228,122,0.15))',
            borderRadius:'4px 4px 2px 2px',
            boxShadow: i === bars.length-1 ? '0 0 12px var(--green-glow)' : 'none'
          }}/>
        ))}
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', marginTop:10, fontSize:11, color:'var(--ink-4)', fontFamily:"'Geist Mono',monospace" }}>
        <span>00h</span><span>06h</span><span>12h</span><span>18h</span><span>{L('how').scaleNow}</span>
      </div>
    </div>
  );
};

window.HowItWorks = HowItWorks;