// Za brandove/proizvođače
const Brandovi = () => {
  const offers = [
    {ico:'bolt', title:'Sponsored Placement', body:'Plaćeno pozicioniranje (npr. preporučeno ljepilo) unutar AI ponude.', tag:'Media'},
    {ico:'medal', title:'Verified Nagradne Igre', body:'Skenirani račun je ulaznica ("entry token") za loyalty programe branda.', tag:'Loyalty'},
    {ico:'chart', title:'Sell-out Analytics', body:'Istraživanje tržišta: koliko puta je SKU ušao u usporedbu i protiv koga pobjeđuje.', tag:'Data'}
  ];

  return (
    <section id="za-brandove" style={{padding:'120px 0', background:'var(--paper)'}} className="bp-grid">
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'0.9fr 1.1fr', gap:72, alignItems:'flex-start'}} className="b-grid">
          <div style={{position:'sticky', top:100}}>
            <SectionLabel>05 · Za brandove i proizvođače</SectionLabel>
            <h2 style={{marginTop:18}}>Verified sell-out signali,<br/>direktan pristup kupcu.</h2>
            <p style={{fontSize:18, marginTop:20, maxWidth:460}}>
              Svaki potvrđen račun je podatak o stvarnoj prodaji — ne o košarici, ne o kliku. Pretvori to u media, loyalty i tržišnu inteligenciju.
            </p>
            <div style={{marginTop:32, padding:'18px 22px', background:'#fff', border:'1.5px solid var(--navy-900)', display:'inline-block'}}>
              <div className="mono" style={{fontSize:10, letterSpacing:'0.14em', color:'var(--muted)'}}>SLOJ 3 · MONETIZACIJA</div>
              <div style={{display:'flex', gap:28, marginTop:10}}>
                <div><div className="display" style={{fontSize:24, fontWeight:700}}>B2B2C</div><div style={{fontSize:12, color:'var(--muted)'}}>Brand media</div></div>
                <div style={{width:1, background:'var(--line)'}}/>
                <div><div className="display" style={{fontSize:24, fontWeight:700}}>1st-party</div><div style={{fontSize:12, color:'var(--muted)'}}>Data tip</div></div>
              </div>
            </div>
          </div>

          <div style={{display:'grid', gap:16}}>
            {offers.map((o, i) => (
              <div key={i} className="card bracket-4" style={{padding:'28px 30px', position:'relative', background:'#fff'}}>
                <Corners/>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:12}}>
                  <div style={{width:48, height:48, border:'1.5px solid var(--navy-900)', background:'var(--accent)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--navy-900)'}}>
                    <Ico name={o.ico} size={24} stroke={1.6}/>
                  </div>
                  <Stamp>{o.tag.toUpperCase()}</Stamp>
                </div>
                <div className="display" style={{fontSize:22, fontWeight:700, marginTop:14}}>{o.title}</div>
                <p style={{marginTop:8, fontSize:14.5}}>{o.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) { .b-grid { grid-template-columns: 1fr !important; gap: 40px !important; } .b-grid > div:first-child { position: static !important; } }
      `}</style>
    </section>
  );
};
window.Brandovi = Brandovi;