// "Za majstore" — primarno proizvodno ponašanje + cjenik
const Majstori = () => {
  const benefits = [
    {ico:'clock', title:'Štediš vrijeme', body:'Nema 5 poziva dobavljačima. Jedan WhatsApp upit — 3 ponude u rukama.'},
    {ico:'money', title:'Transparentne cijene', body:'Vidiš najjeftiniju opciju + 2 alternative. Nitko te ne može prevariti na cijeni.'},
    {ico:'doc', title:'Uredan PDF', body:'Ponuda koju možeš poslati investitoru ili arhitektu bez sramote.'},
    {ico:'shield', title:'GDPR & privola', body:'Tvoji podaci ostaju tvoji. Nema prodaje kontakata.'}
  ];

  const plans = [
    {
      name:'Besplatno',
      price:'0 €',
      tag:'Osnovna AI nabava',
      features:[
        'Osnovna usporedba materijala',
        '1 PDF ponuda po upitu',
        'WhatsApp kanal',
        'Uvjet: obvezno slanje finalnog računa'
      ],
      cta:'Pokreni na WhatsAppu',
      href:'https://buychat.hr/rotator?projectId=22'
    },
    {
      name:'PRO Majstor',
      price:'9 – 19 €',
      period:'/mj',
      tag:'Za aktivne tvrtke',
      featured:true,
      features:[
        'Neograničeno aktivnih projekata',
        'Pohrana i povijest svih računa po gradilištu',
        'Branded PDF ponude s logom tvrtke',
        'Automatska konsolidacija troškova',
        'Prioritetna podrška'
      ],
      cta:'Prijavi se na beta',
      href:'#prijava-majstor'
    }
  ];

  return (
    <section id="za-majstore" style={{padding:'120px 0', background:'var(--paper)', position:'relative'}} className="bp-grid">
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'0.9fr 1.1fr', gap:72, alignItems:'flex-start'}} className="m-grid">
          <div>
            <SectionLabel>02 · Za majstore</SectionLabel>
            <h2 style={{marginTop:18}}>Manje poziva.<br/>Više posla.</h2>
            <p style={{fontSize:18, marginTop:20, maxWidth:440}}>
              Ako si <b>keramičar, soboslikar, knaufer ili fasader</b> — Almo.chat ti radi kao osobni nabavljač na WhatsAppu. Besplatno, dok god vraćaš račune.
            </p>

            <div style={{marginTop:36, display:'grid', gap:18}}>
              {benefits.map((b, i) => (
                <div key={i} style={{display:'flex', gap:16, padding:'14px 0', borderTop:'1px dashed var(--line)'}}>
                  <div style={{color:'var(--navy-800)', flexShrink:0}}><Ico name={b.ico} size={24} stroke={1.6}/></div>
                  <div>
                    <div style={{fontWeight:600, fontSize:15}}>{b.title}</div>
                    <div style={{fontSize:14, color:'var(--ink-soft)', marginTop:3}}>{b.body}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{display:'grid', gap:24}}>
            {plans.map((p, i) => (
              <div key={i} className={`card ${p.featured ? 'card-yellow' : ''} bracket-4`} style={{padding:'32px 32px 28px', position:'relative'}}>
                <Corners/>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
                  <div>
                    <div className="mono" style={{fontSize:11, letterSpacing:'0.14em', color: p.featured ? 'var(--navy-900)' : 'var(--muted)'}}>{p.tag.toUpperCase()}</div>
                    <div className="display" style={{fontSize:32, fontWeight:700, marginTop:8}}>{p.name}</div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <span className="display" style={{fontSize:40, fontWeight:700, lineHeight:1}}>{p.price}</span>
                    {p.period && <span className="mono" style={{fontSize:13, marginLeft:4}}>{p.period}</span>}
                  </div>
                </div>

                <ul style={{listStyle:'none', padding:0, margin:'24px 0 0', display:'grid', gap:10}}>
                  {p.features.map((f, j) => (
                    <li key={j} style={{display:'flex', gap:10, fontSize:14.5, color: p.featured ? 'var(--navy-900)' : 'var(--ink-soft)'}}>
                      <span style={{color: p.featured ? 'var(--navy-900)' : 'var(--navy-800)', flexShrink:0, marginTop:2}}><Ico name="check" size={16} stroke={2.3}/></span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>

                <a href={p.href} className={`btn ${p.featured ? 'btn-primary' : 'btn-ghost'}`} style={{marginTop:24, width:'100%'}}>
                  {p.cta} <Ico name="arrow" size={16}/>
                </a>

                {p.featured && (
                  <div className="stamp-deco" style={{position:'absolute', top:-12, right:20}}>
                    <Stamp variant="navy">MOST POPULAR</Stamp>
                  </div>
                )}
              </div>
            ))}

            <div style={{padding:'18px 20px', border:'1px dashed var(--navy-800)', background:'rgba(11,33,71,0.04)', display:'flex', gap:12, alignItems:'center'}}>
              <Ico name="bolt" size={20} stroke={1.7} style={{color:'var(--navy-800)'}}/>
              <div style={{fontSize:13.5, color:'var(--ink-soft)'}}>
                <b>Mikro-transakcije (2,50 – 9,90 €):</b> "Hitna usporedba danas" ili AI analiza papirnatih računa u uredan Excel izvještaj.
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 960px) { .m-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }
      `}</style>
    </section>
  );
};
window.Majstori = Majstori;