// "Za trgovce" — B2B SaaS ponuda + success fee matrica
const Trgovci = () => {
  const plans = [
    {name:'Free Listing', price:'0 €', period:'', tag:'Starter', features:['Prisutnost u usporedbama','3.0% success fee','Bez prioriteta','Ručna potvrda računa']},
    {name:'Community', price:'~500 €', period:'/mj', tag:'Najčešće', features:['Osnovni lead dashboard','Prioritet u lokalnim upitima','Evidencija realizacija','2.5% success fee','Merchant reply signal'], featured:true},
    {name:'Enterprise', price:'~1 000 €', period:'/mj', tag:'API feed', features:['API integracije (live feed)','Napredni reporting','Više regija i poslovnica','2.0% success fee','Verified live feed oznaka','Dedicirani manager']}
  ];

  const feeRows = [
    {pct:'2,0 %', label:'Strukturirani feed + aktivna potvrda računa', sub:'Najjeftinije za trgovca · 0 % operativnog rada za nas', tone:'yellow'},
    {pct:'2,5 %', label:'Djelomična suradnja (merchant reply)', sub:'Standardni tier', tone:'mid'},
    {pct:'3,0 %', label:'Bez integracije — Almo radi ručno', sub:'Najskuplje · stimulacija na API/feed', tone:'dark'}
  ];

  return (
    <section id="za-trgovce" style={{padding:'120px 0', background:'#fff', borderTop:'1.5px solid var(--navy-900)', borderBottom:'1.5px solid var(--navy-900)'}}>
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:20, marginBottom:64}}>
          <div style={{maxWidth:640}}>
            <SectionLabel>03 · Za trgovce materijalom</SectionLabel>
            <h2 style={{marginTop:18}}>Kvalificirani leadovi,<br/>naplaćujemo samo realizaciju.</h2>
            <p style={{fontSize:18, marginTop:20, maxWidth:560}}>
              Dobivaš upite s visokom namjerom i preciznim specifikacijama. Plaćaš <b>samo success fee na stvarno realizirane račune</b> — ne paušal, ne klikove, ne listinge.
            </p>
          </div>
          <a href="#prijava-trgovca" className="btn btn-primary">Prijavi trgovinu · demo <Ico name="arrow" size={16}/></a>
        </div>

        <div className="plans-grid">
          {plans.map((p, i) => (
            <div key={i} className="card bracket-4" style={{padding:'32px 28px', background: p.featured ? 'var(--navy-800)' : '#fff', color: p.featured ? '#fff' : 'var(--ink)', position:'relative'}}>
              <Corners/>
              {p.featured && <div className="stamp-deco" style={{position:'absolute', top:-12, left:20}}><Stamp variant="yellow">NAJČEŠĆE</Stamp></div>}
              <div className="mono" style={{fontSize:11, letterSpacing:'0.14em', color: p.featured ? 'var(--accent)' : 'var(--muted)'}}>{p.tag.toUpperCase()}</div>
              <div className="display" style={{fontSize:26, fontWeight:700, marginTop:8}}>{p.name}</div>
              <div style={{marginTop:14, display:'flex', alignItems:'baseline', gap:4}}>
                <span className="display" style={{fontSize:38, fontWeight:700, lineHeight:1}}>{p.price}</span>
                {p.period && <span className="mono" style={{fontSize:14, opacity:0.7}}>{p.period}</span>}
              </div>
              <div style={{height:1, background: p.featured ? 'rgba(255,255,255,0.15)' : 'var(--line-soft)', margin:'20px 0'}}/>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:10}}>
                {p.features.map((f, j) => (
                  <li key={j} style={{display:'flex', gap:10, fontSize:14, color: p.featured ? 'rgba(255,255,255,0.85)' : 'var(--ink-soft)'}}>
                    <span style={{color: p.featured ? 'var(--accent)' : 'var(--navy-800)', flexShrink:0, marginTop:2}}><Ico name="check" size={15} stroke={2.4}/></span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Success fee matrix */}
        <div style={{marginTop:80}}>
          <div className="mono" style={{fontSize:11, letterSpacing:'0.18em', color:'var(--muted)', marginBottom:18}}>SLOJ 1 · SUCCESS FEE MATRICA</div>
          <div className="display" style={{fontSize:28, fontWeight:700, marginBottom:28}}>Više strukture koje šalješ — manja provizija.</div>

          <div style={{display:'grid', gridTemplateColumns:'180px 1fr', gap:0, border:'1.5px solid var(--navy-900)'}}>
            {feeRows.map((r, i) => (
              <React.Fragment key={i}>
                <div style={{padding:'24px 26px', background: r.tone === 'yellow' ? 'var(--accent)' : r.tone === 'dark' ? 'var(--navy-800)' : 'var(--paper)', color: r.tone === 'dark' ? '#fff' : 'var(--navy-900)', borderTop: i ? '1.5px solid var(--navy-900)' : 'none'}}>
                  <div className="display" style={{fontSize:34, fontWeight:700, lineHeight:1}}>{r.pct}</div>
                  <div className="mono" style={{fontSize:10, letterSpacing:'0.12em', opacity:0.7, marginTop:6}}>FEE</div>
                </div>
                <div style={{padding:'24px 26px', borderTop: i ? '1.5px solid var(--navy-900)' : 'none', borderLeft:'1.5px solid var(--navy-900)'}}>
                  <div style={{fontWeight:600, fontSize:16}}>{r.label}</div>
                  <div style={{fontSize:13.5, color:'var(--ink-soft)', marginTop:4}}>{r.sub}</div>
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

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