// kontakt.jsx — Kontakt
const { useEffect, useState } = React;

function useScrollReveal() {
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

function PageHeader() {
  return (
    <header className="page-hd">
      <div className="wrap">
        <div className="crumb"><a href="index.html">become.promo</a> / <span style={{color:'var(--neon)'}}>Kontakt</span></div>
        <h1>Kontakt</h1>
        <p className="lede">Piši nam — odgovaramo unutar jednog radnog dana.</p>
      </div>
    </header>
  );
}

function KontaktForme() {
  const [activeTab, setActiveTab] = useState('b2c');
  const [sentB2c, setSentB2c] = useState(false);
  const [sentB2b, setSentB2b] = useState(false);

  return (
    <section style={{paddingTop:32}}>
      <div className="wrap">
        <div className="tabs reveal">
          <button
            className={`tab-btn${activeTab === 'b2c' ? ' active' : ''}`}
            onClick={() => setActiveTab('b2c')}
          >
            Za potrošače
          </button>
          <button
            className={`tab-btn${activeTab === 'b2b' ? ' active' : ''}`}
            onClick={() => setActiveTab('b2b')}
          >
            Za brandove
          </button>
        </div>

        {activeTab === 'b2c' && (
          <div className="form-box reveal" style={{maxWidth:640}}>
            <h2 style={{margin:'0 0 8px',fontSize:24,fontWeight:700,letterSpacing:'-.02em'}}>Potrošači</h2>
            <p style={{margin:'0 0 24px',color:'var(--ink-2)',fontSize:15,lineHeight:1.6}}>Pitanja o kampanjama, karikaturama, računima ili nagradama — piši nam ovdje.</p>
            {sentB2c ? (
              <div style={{padding:'24px 0',textAlign:'center'}}>
                <div style={{fontSize:32,marginBottom:12}}>✓</div>
                <p style={{color:'var(--neon)',fontFamily:'var(--mono)',fontSize:13,letterSpacing:'.1em',textTransform:'uppercase',margin:0}}>Poruka poslana!</p>
                <p style={{color:'var(--ink-2)',marginTop:8,fontSize:14}}>Odgovaramo unutar jednog radnog dana.</p>
              </div>
            ) : (
              <form onSubmit={e => { e.preventDefault(); setSentB2c(true); }}>
                <div className="field-row">
                  <div className="field">
                    <label htmlFor="ime-b2c">Ime</label>
                    <input id="ime-b2c" type="text" placeholder="Marija Horvat" required />
                  </div>
                  <div className="field">
                    <label htmlFor="wa-b2c">WhatsApp broj</label>
                    <input id="wa-b2c" type="tel" placeholder="+385 91 234 5678" />
                  </div>
                </div>
                <div className="field">
                  <label htmlFor="email-b2c">Email</label>
                  <input id="email-b2c" type="email" placeholder="marija@example.com" required />
                </div>
                <div className="field">
                  <label htmlFor="tema-b2c">Tema</label>
                  <select id="tema-b2c">
                    <option>Pitanje o kampanji</option>
                    <option>Karikatura / vizual</option>
                    <option>Slanje računa</option>
                    <option>Nagrade i status</option>
                    <option>Brisanje podataka (GDPR)</option>
                    <option>Ostalo</option>
                  </select>
                </div>
                <div className="field">
                  <label htmlFor="poruka-b2c">Poruka</label>
                  <textarea id="poruka-b2c" placeholder="Napiši svoje pitanje..." required></textarea>
                </div>
                <button className="btn btn-primary" type="submit">Pošalji poruku <span className="arr">↗</span></button>
                <span className="form-fine">Odgovaramo unutar jednog radnog dana. Podatke koristimo isključivo za odgovor na upit.</span>
              </form>
            )}
          </div>
        )}

        {activeTab === 'b2b' && (
          <div className="form-box reveal" style={{maxWidth:640}}>
            <h2 style={{margin:'0 0 8px',fontSize:24,fontWeight:700,letterSpacing:'-.02em'}}>Brandovi</h2>
            <p style={{margin:'0 0 24px',color:'var(--ink-2)',fontSize:15,lineHeight:1.6}}>Pitanja o pilotu, portalu ili suradnji — popuni formu ili idi direktno na <a href="pilot.html" style={{color:'var(--neon)'}}>500 EUR Pilot stranicu</a>.</p>
            {sentB2b ? (
              <div style={{padding:'24px 0',textAlign:'center'}}>
                <div style={{fontSize:32,marginBottom:12}}>✓</div>
                <p style={{color:'var(--neon)',fontFamily:'var(--mono)',fontSize:13,letterSpacing:'.1em',textTransform:'uppercase',margin:0}}>Poruka poslana!</p>
                <p style={{color:'var(--ink-2)',marginTop:8,fontSize:14}}>Odgovaramo unutar jednog radnog dana.</p>
              </div>
            ) : (
              <form onSubmit={e => { e.preventDefault(); setSentB2b(true); }}>
                <div className="field-row">
                  <div className="field">
                    <label htmlFor="ime-b2b">Ime i prezime</label>
                    <input id="ime-b2b" type="text" placeholder="Ivan Kovač" required />
                  </div>
                  <div className="field">
                    <label htmlFor="brand-b2b">Brand / Tvrtka</label>
                    <input id="brand-b2b" type="text" placeholder="Naziv tvrtke" required />
                  </div>
                </div>
                <div className="field">
                  <label htmlFor="email-b2b">Poslovni email</label>
                  <input id="email-b2b" type="email" placeholder="ivan@brand.com" required />
                </div>
                <div className="field">
                  <label htmlFor="tema-b2b">Tema upita</label>
                  <select id="tema-b2b">
                    <option>Pilot za 500 EUR</option>
                    <option>Napredni paketi</option>
                    <option>Business Portal</option>
                    <option>Tehnička integracija</option>
                    <option>Partnerstvo</option>
                    <option>Ostalo</option>
                  </select>
                </div>
                <div className="field">
                  <label htmlFor="poruka-b2b">Poruka</label>
                  <textarea id="poruka-b2b" placeholder="Opiši što te zanima ili što trebaš..." required></textarea>
                </div>
                <button className="btn btn-primary" type="submit">Pošalji upit <span className="arr">↗</span></button>
                <span className="form-fine">Odgovaramo unutar jednog radnog dana. Ili odmah idi na <a href="pilot.html" style={{color:'var(--neon)'}}>Pilot stranicu</a> i plati direktno.</span>
              </form>
            )}
          </div>
        )}
      </div>
    </section>
  );
}

function App() {
  useScrollReveal();
  return (
    <>
      <SiteNav currentPage="kontakt.html" />
      <PageHeader />
      <KontaktForme />
      <SiteFooter />
      <MobCTA isB2BPage={false} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);