// FAQ
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    {q:'Tko plaća Almo.chat?', a:'Majstor ne plaća ništa za osnovnu pomoć — ulazna barijera je 0 €. Platformu financiraju trgovci kroz success fee (2,0 – 3,0 %) na realizirane račune, B2B SaaS pretplate (~500 – 1 000 €/mj) i brand partner kampanje.'},
    {q:'Što točno radi AI na WhatsAppu?', a:'Prima tekst, foto računa ili glasovnu poruku. Strukturira upit (kategorija, količina, lokacija, rok), pretražuje partner feed / web kataloge, generira usporedbu 3 ponude i šalje ti uredan PDF koji možeš proslijediti investitoru.'},
    {q:'Zašto moram slati finalni račun?', a:'Račun je "žeton" koji otključava sljedeću besplatnu pomoć. Bez njega, sustav gubi signal stvarne prodaje (što trgovce čini skeptičnima). Majstori koji ne šalju račune gube pristup — tako sustav održava povjerenje.'},
    {q:'Koji podaci se dijele s trgovcima?', a:'Trgovac dobiva kvalificirani lead — kategoriju, količinu, lokaciju i rok. Tvoje osobne podatke dijelimo samo uz GDPR privolu i samo kad ti izabreš tog trgovca.'},
    {q:'Kako se razlikujete od "pošalji upit" portala?', a:'Mi ne prodajemo poruke. Kontroliramo provjerenu komercijalnu namjeru i realizirani račun. Sustav ima "trust score" za svaku cijenu (Verified feed > Merchant reply > Public catalog > Historical).'},
    {q:'Kada krećete i u kojim kategorijama?', a:'Faza 1 (MVP): keramičari, soboslikari, knauferi, fasaderi — visoko standardizirane kategorije za OCR (ljepila, mase, boje, suha gradnja). Faza 2: merchant-assisted automation (CSV/API). Faza 3: True Procurement Network.'}
  ];
  return (
    <section id="faq" style={{padding:'120px 0', background:'#fff', borderTop:'1.5px solid var(--navy-900)'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'380px 1fr', gap:64}} className="faq-grid">
          <div>
            <SectionLabel>06 · FAQ</SectionLabel>
            <h2 style={{marginTop:18}}>Pitanja koja <br/>stalno čujemo.</h2>
            <p style={{fontSize:16, marginTop:20, maxWidth:320}}>
              Nešto nije odgovoreno? Pošalji poruku na WhatsApp — AI ti odgovara 24/7, tim poslovno.
            </p>
          </div>
          <div>
            {items.map((it, i) => (
              <div key={i} style={{borderTop: i === 0 ? '1.5px solid var(--navy-900)' : '1px solid var(--line-soft)', borderBottom: i === items.length - 1 ? '1.5px solid var(--navy-900)' : 'none'}}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{width:'100%', padding:'22px 4px', background:'transparent', border:'none', display:'flex', justifyContent:'space-between', alignItems:'center', textAlign:'left', cursor:'pointer', color:'var(--ink)'}}>
                  <span className="display" style={{fontSize:18, fontWeight:600}}>{it.q}</span>
                  <span style={{color:'var(--muted)', transform: open === i ? 'rotate(180deg)' : 'none', transition:'transform 200ms'}}><Ico name="chevdown" size={18} stroke={2}/></span>
                </button>
                {open === i && (
                  <div style={{padding:'0 4px 22px', fontSize:15, color:'var(--ink-soft)', maxWidth:640, lineHeight:1.55}}>{it.a}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
    </section>
  );
};
window.FAQ = FAQ;