// "Kako radi" — 8-koračni operativni tok, zatvorena petlja
const How = () => {
  const steps = [
    {n:'01', title:'WhatsApp upit', sub:'Tekst, slika računa, glas', ico:'whatsapp'},
    {n:'02', title:'AI strukturiranje', sub:'Kategorije, količine, lokacija, rok', ico:'brain'},
    {n:'03', title:'Lookup izvora', sub:'Partner feed, web katalog, AI email', ico:'database'},
    {n:'04', title:'Usporedba ponuda', sub:'Najbolja cijena + 2 alternative', ico:'chart'},
    {n:'05', title:'PDF ponuda', sub:'Generiranje urednog dokumenta', ico:'doc'},
    {n:'06', title:'Finalni račun', sub:'Žeton koji majstor šalje nakon kupnje', ico:'medal', accent:true},
    {n:'07', title:'Potvrda trgovine', sub:'Matching podataka', ico:'handshake'},
    {n:'08', title:'Billing i scoring', sub:'Success fee + ranking trgovca', ico:'cube'},
  ];

  return (
    <section id="kako-radi" className="navy bp-grid" style={{background:'var(--navy-900)', padding:'120px 0', position:'relative'}}>
      <div className="stamp-deco" style={{position:'absolute', top:20, left:32, display:'flex', gap:8}}>
        <Stamp variant="yellow">FIG.02</Stamp>
        <span className="mono" style={{fontSize:10, color:'rgba(255,255,255,0.5)', letterSpacing:'0.18em', alignSelf:'center'}}>OPERATIVNI TOK · DATA ENGINE</span>
      </div>

      <div className="container">
        <div style={{maxWidth:780, marginBottom:72}}>
          <SectionLabel>01 · Kako radi</SectionLabel>
          <h2 style={{marginTop:18}}>Od WhatsApp poruke <br/>do uredne ponude.</h2>
          <p style={{fontSize:19, marginTop:20, maxWidth:620, color:'rgba(255,255,255,0.75)'}}>
            Zatvorena petlja podataka: svaki upit otključava sljedeću besplatnu pomoć — ali <span style={{color:'var(--accent)', fontWeight:600}}>samo ako majstor pošalje potvrdu računa</span>. Sustav se samodisciplinira.
          </p>
        </div>

        <div className="how-grid">
          {steps.map((s, i) => (
            <div key={i} className="how-step" style={{
              background: s.accent ? 'var(--accent)' : 'rgba(255,255,255,0.04)',
              color: s.accent ? 'var(--navy-900)' : '#fff',
              border: s.accent ? '1.5px solid var(--navy-900)' : '1.5px solid rgba(255,255,255,0.15)',
              padding:'20px 18px',
              position:'relative',
              borderRadius:3
            }}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14}}>
                <Ico name={s.ico} size={26} stroke={1.5}/>
                <span className="mono" style={{fontSize:11, letterSpacing:'0.12em', opacity: s.accent ? 0.7 : 0.5}}>{s.n}</span>
              </div>
              <div className="display" style={{fontWeight:700, fontSize:17, letterSpacing:'-0.01em', lineHeight:1.2}}>{s.title}</div>
              <div style={{fontSize:12.5, marginTop:8, opacity: s.accent ? 0.75 : 0.65, lineHeight:1.4}}>{s.sub}</div>
              {i < steps.length - 1 && (
                <div style={{position:'absolute', right:-14, top:'50%', transform:'translateY(-50%)', zIndex:2, color: s.accent ? 'var(--navy-900)' : 'var(--accent)'}} className="how-arrow">
                  <Ico name="chevron" size={20} stroke={2.5}/>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Feedback loop annotation */}
        <div style={{marginTop:56, border:'1px dashed rgba(255,199,0,0.4)', padding:'20px 24px', display:'flex', gap:20, alignItems:'center', flexWrap:'wrap'}}>
          <div style={{color:'var(--accent)'}}><Ico name="bolt" size={28} stroke={1.8}/></div>
          <div style={{flex:1, minWidth:260}}>
            <div className="mono" style={{fontSize:11, letterSpacing:'0.14em', color:'var(--accent)'}}>UVJET ZA IDUĆI UPIT</div>
            <div style={{fontSize:16, marginTop:4, color:'rgba(255,255,255,0.85)'}}>
              Korak <b>06 → 01</b>: finalni račun vraća majstora u petlju. Bez računa = bez sljedeće besplatne pomoći.
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px; }
        @media (max-width: 1000px) { .how-grid { grid-template-columns: repeat(2, 1fr); } .how-arrow { display: none; } }
        @media (max-width: 520px) { .how-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};
window.How = How;