// Trust / Defensive Moat
const Trust = () => {
  const rules = [
    {ico:'lock', title:'Nema računa = nema iduće nabave', body:'Najvažnije pravilo. Majstor koji ne vrati potvrdu kupnje gubi pravo na daljnju besplatnu AI asistenciju. Sustav se samodisciplinira.'},
    {ico:'medal', title:'Nepotvrđivanje = gubitak prioriteta', body:'Trgovci koji ne surađuju u potvrdi računa prvo gube ranking, zatim ispadaju iz shortlista, te se konačno miču iz ponuda.'},
    {ico:'shield', title:'AI Trust Score', body:'Svaka cijena je označena: Verified live feed (najviše), Merchant reply, Public catalog, Historical estimate (najniže).'}
  ];

  return (
    <section className="navy bp-grid" style={{background:'var(--navy-900)', padding:'120px 0'}}>
      <div className="container">
        <div style={{maxWidth:720, marginBottom:64}}>
          <SectionLabel>04 · Pravila povjerenja</SectionLabel>
          <h2 style={{marginTop:18}}>Defensive moat:<br/>povjerenje kao proizvod.</h2>
          <p style={{fontSize:19, marginTop:20, maxWidth:620, color:'rgba(255,255,255,0.75)'}}>
            Rješavamo problem lažnih namjera i nepreciznih podataka na gradilištu. Tri pravila održavaju kvalitetu sustava — i za majstora, i za trgovca.
          </p>
        </div>

        <div className="trust-grid">
          {rules.map((r, i) => (
            <div key={i} className="bracket-4" style={{padding:'32px 28px', border:'1.5px solid rgba(255,255,255,0.15)', position:'relative', background:'rgba(255,255,255,0.02)'}}>
              <Corners/>
              <div style={{color:'var(--accent)', marginBottom:20}}>
                <Ico name={r.ico} size={36} stroke={1.4}/>
              </div>
              <div className="mono" style={{fontSize:11, letterSpacing:'0.12em', color:'rgba(255,255,255,0.4)'}}>REGULA · 0{i+1}</div>
              <div className="display" style={{fontSize:22, fontWeight:700, marginTop:10, color:'#fff', lineHeight:1.2}}>{r.title}</div>
              <p style={{marginTop:14, fontSize:14.5, color:'rgba(255,255,255,0.72)', lineHeight:1.55}}>{r.body}</p>
            </div>
          ))}
        </div>

        {/* Trust score legend */}
        <div style={{marginTop:72, padding:'28px 32px', border:'1px dashed rgba(255,199,0,0.4)'}}>
          <div className="mono" style={{fontSize:11, letterSpacing:'0.14em', color:'var(--accent)', marginBottom:18}}>AI TRUST SCORE · TIER LADDER</div>
          <div className="trust-ladder">
            {[
              {label:'Verified live feed', sub:'API / direktni feed', tier:'Najviše', color:'#2ea36a'},
              {label:'Merchant reply', sub:'Potvrđen u roku', tier:'Visoko', color:'var(--accent)'},
              {label:'Public catalog', sub:'Web izvor', tier:'Srednje', color:'#ff8a3c'},
              {label:'Historical estimate', sub:'AI procjena', tier:'Najniže', color:'#d93a2b'}
            ].map((t, i) => (
              <div key={i} style={{borderLeft:`3px solid ${t.color}`, paddingLeft:14}}>
                <div style={{fontSize:15, fontWeight:600, color:'#fff'}}>{t.label}</div>
                <div className="mono" style={{fontSize:11, color:'rgba(255,255,255,0.5)', marginTop:4, letterSpacing:'0.06em'}}>{t.sub} · <span style={{color:t.color}}>{t.tier}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .trust-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .trust-ladder { display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
        @media (max-width: 960px) { .trust-grid, .trust-ladder { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 560px) { .trust-grid, .trust-ladder { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};
window.Trust = Trust;