// Final CTA + Footer
const CTA = () => {
  const [naziv, setNaziv] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [plan, setPlan] = React.useState('Free Listing');
  const [status, setStatus] = React.useState('idle'); // idle | loading | success | error

  const handleSubmit = async () => {
    if (!naziv.trim() || !email.trim()) return;
    setStatus('loading');
    try {
      const res = await fetch(
        'https://api.hsforms.com/submissions/v3/integration/submit/8882648/6fa376f0-b14c-49d6-a545-886a31cbc157',
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            fields: [
              { name: 'company', value: naziv },
              { name: 'email', value: email },
              { name: 'almo_plan', value: plan },
            ],
            context: {
              pageUri: window.location.href,
              pageName: document.title,
            },
          }),
        }
      );
      const data = await res.json();
      if (res.ok) {
        setStatus('success');
      } else {
        console.error('HubSpot error:', data);
        setStatus('error');
      }
    } catch (err) {
      console.error('Submit error:', err);
      setStatus('error');
    }
  };

  return (
  <>
    <section id="prijava-majstor" className="navy bp-grid" style={{background:'var(--navy-800)', padding:'120px 0', position:'relative', overflow:'hidden'}}>
      <div className="stamp-deco" style={{position:'absolute', top:24, right:32}}>
        <Stamp variant="yellow">DETAIL · A-09</Stamp>
      </div>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:64, alignItems:'center'}} className="cta-grid">
          <div>
            <SectionLabel>07 · Krenimo</SectionLabel>
            <h2 style={{marginTop:18, fontSize:'clamp(40px, 5.5vw, 72px)'}}>
              Vizija je jasna.<br/>
              <span style={{color:'var(--accent)'}}>Alat je spreman za izgradnju.</span>
            </h2>
            <p style={{fontSize:19, marginTop:24, maxWidth:560, color:'rgba(255,255,255,0.75)'}}>
              Pošalji prvi upit na WhatsApp — dobit ćeš usporedbu u minuti. Bez registracije, bez ugovora, bez kartice.
            </p>
            <div style={{display:'flex', gap:14, marginTop:32, flexWrap:'wrap'}}>
              <a href="https://buychat.hr/rotator?projectId=22" className="btn btn-accent">
                <Ico name="whatsapp" size={18} stroke={0}/>
                Pokreni prvi upit
              </a>
              <a href="tel:+38591111100" className="btn btn-ghost" style={{color:'#fff', borderColor:'rgba(255,255,255,0.4)'}}>
                <Ico name="phone" size={16}/>
                091 11 11 007
              </a>
            </div>
          </div>

          <div id="prijava-trgovca" className="card" style={{background:'#fff', padding:'32px 32px', color:'var(--ink)'}}>
            <div className="mono" style={{fontSize:11, letterSpacing:'0.14em', color:'var(--muted)'}}>B2B · DEMO ZAHTJEV</div>
            <div className="display" style={{fontSize:24, fontWeight:700, marginTop:8}}>Prijavi trgovinu</div>
            <p style={{marginTop:8, fontSize:14}}>15-minutni razgovor. Pokazujemo ti dashboard, integracije i kako ti prvi leadovi mogu stići sutra.</p>

            {status === 'success' ? (
              <div style={{marginTop:24, padding:'20px', background:'#f0faf4', border:'1.5px solid #22c55e', borderRadius:4, textAlign:'center'}}>
                <div style={{fontSize:22, marginBottom:8}}>✓</div>
                <div style={{fontWeight:600, fontSize:15}}>Zahtjev primljen!</div>
                <div style={{fontSize:13, color:'var(--ink-soft)', marginTop:4}}>Javit ćemo se u roku 24h.</div>
              </div>
            ) : (
              <>
                <div style={{display:'grid', gap:10, marginTop:20}}>
                  <input
                    placeholder="Naziv trgovine"
                    value={naziv}
                    onChange={e => setNaziv(e.target.value)}
                    style={{padding:'12px 14px', border:'1.5px solid var(--line)', fontFamily:'var(--sans)', fontSize:14, borderRadius:3}}
                  />
                  <input
                    placeholder="Email"
                    type="email"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    style={{padding:'12px 14px', border:'1.5px solid var(--line)', fontFamily:'var(--sans)', fontSize:14, borderRadius:3}}
                  />
                  <select
                    value={plan}
                    onChange={e => setPlan(e.target.value)}
                    style={{padding:'12px 14px', border:'1.5px solid var(--line)', fontFamily:'var(--sans)', fontSize:14, borderRadius:3, background:'#fff'}}
                  >
                    <option value="Free Listing">Free Listing — 0 €</option>
                    <option value="Community">Community — ~500 €/mj</option>
                    <option value="Enterprise">Enterprise — ~1 000 €/mj</option>
                  </select>
                </div>
                {status === 'error' && (
                  <div style={{fontSize:12, color:'#ef4444', marginTop:8}}>Greška pri slanju. Pokušaj ponovo ili nas kontaktiraj direktno.</div>
                )}
                <button
                  className="btn btn-primary"
                  style={{marginTop:16, width:'100%', opacity: status === 'loading' ? 0.7 : 1}}
                  onClick={handleSubmit}
                  disabled={status === 'loading'}
                >
                  {status === 'loading' ? 'Šaljem…' : <><Ico name="arrow" size={16}/> Zatraži demo</>}
                </button>
                <div style={{fontSize:11, color:'var(--muted)', marginTop:12, textAlign:'center'}}>GDPR compliant · bez spama</div>
              </>
            )}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 960px) { .cta-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
    </section>

    <footer style={{background:'var(--navy-900)', color:'#fff', padding:'72px 0 32px', borderTop:'1.5px solid rgba(255,255,255,0.08)'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:40}} className="foot-grid">
          <div>
            <div className="logo" style={{color:'#fff', fontSize:24}}>Almo<span className="dot"></span>chat</div>
            <p style={{marginTop:14, maxWidth:300, fontSize:14, color:'rgba(255,255,255,0.6)'}}>
              AI nabavljač za gradilište. WhatsApp-first, račun-native, Croatia-made.
            </p>
            <div className="mono" style={{fontSize:10, letterSpacing:'0.14em', color:'rgba(255,255,255,0.4)', marginTop:24}}>© 2026 ALMO.CHAT · REV.3</div>
          </div>
          {[
            {h:'Proizvod', links:[['Kako radi','#kako-radi'],['Za majstore','#za-majstore'],['Za trgovce','#za-trgovce'],['Za brandove','#za-brandove']]},
            {h:'Resursi', links:[['FAQ','#faq'],['Business Blueprint','#'],['Trust Score','#'],['API docs','#']]},
            {h:'Kontakt', links:[['WhatsApp: 091 11 11 007','https://buychat.hr/rotator?projectId=22'],['hello@almo.chat','mailto:hello@almo.chat'],['Zagreb, HR','#']]}
          ].map((col, i) => (
            <div key={i}>
              <div className="mono" style={{fontSize:10, letterSpacing:'0.14em', color:'var(--accent)', marginBottom:16}}>{col.h.toUpperCase()}</div>
              <div style={{display:'grid', gap:10}}>
                {col.links.map(([t, h], j) => <a key={j} href={h} style={{color:'rgba(255,255,255,0.75)', textDecoration:'none', fontSize:14}}>{t}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop:56, paddingTop:24, borderTop:'1px dashed rgba(255,255,255,0.15)', display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:16}}>
          <div className="mono" style={{fontSize:10, color:'rgba(255,255,255,0.4)', letterSpacing:'0.14em'}}>BLUEPRINT · DATA ENGINE · HR–1 PILOT</div>
          <div style={{display:'flex', gap:20}}>
            <a href="#" style={{color:'rgba(255,255,255,0.5)', textDecoration:'none', fontSize:12}}>Privatnost</a>
            <a href="#" style={{color:'rgba(255,255,255,0.5)', textDecoration:'none', fontSize:12}}>Uvjeti</a>
            <a href="#" style={{color:'rgba(255,255,255,0.5)', textDecoration:'none', fontSize:12}}>GDPR</a>
            <button id="hs_show_banner_button" type="button" onClick={()=>{var _hsp=window._hsp=window._hsp||[];_hsp.push(['showBanner']);}} style={{background:'none', border:'none', padding:0, color:'rgba(255,255,255,0.5)', fontSize:12, cursor:'pointer', fontFamily:'inherit'}}>Postavke kolačića</button>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr !important; } }`}</style>
    </footer>
  </>
  );
};
window.CTA = CTA;
