function CtaSection() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ company: '', email: '', screens: '', message: '' });
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <section id="tarjous" className="cta">
      <div className="container cta__grid">
        <div className="cta__copy">
          <p className="eyebrow cta__eyebrow">PYYDÄ TARJOUS</p>
          <h2 className="cta__h">
            Ota askel kohti<br/>
            huoletonta<br/>
            kiinteistön<br/>
            <span className="cta__h-accent">infonäyttöä.</span>
          </h2>
          <div className="cta__contact">
            <div className="cta__contact-row">
              <i data-lucide="mail" style={{ width: 16, height: 16, strokeWidth: 1.8 }}></i>
              <a href="mailto:myynti@digitaalimainos.fi">myynti@digitaalimainos.fi</a>
              <span className="mono cta__contact-meta">VASTAUS 24 H</span>
            </div>
          </div>
        </div>

        <div className="cta__formwrap">
          {!sent ? (
            <form className="cta__form" onSubmit={onSubmit}>
              <div className="cta__form-row">
                <div className="cta__field">
                  <label className="field-label" style={{ color: 'rgba(244,241,234,0.72)' }}>Kiinteistö / yritys</label>
                  <input className="input cta__input" value={form.company}
                         onChange={e=>setForm({...form, company:e.target.value})}
                         placeholder="Töölönranta Business Center" required/>
                </div>
                <div className="cta__field">
                  <label className="field-label" style={{ color: 'rgba(244,241,234,0.72)' }}>Sähköposti</label>
                  <input className="input cta__input" type="email" value={form.email}
                         onChange={e=>setForm({...form, email:e.target.value})}
                         placeholder="nimi@yritys.fi" required/>
                </div>
              </div>
              <div className="cta__field">
                <label className="field-label" style={{ color: 'rgba(244,241,234,0.72)' }}>Näyttöjen määrä ja sijoittelu</label>
                <input className="input cta__input" value={form.screens}
                       onChange={e=>setForm({...form, screens:e.target.value})}
                       placeholder="esim. 3 aulanäyttöä / 12 kohdetta"/>
              </div>
              <div className="cta__field">
                <label className="field-label" style={{ color: 'rgba(244,241,234,0.72)' }}>Kerro lyhyesti mitä etsit</label>
                <textarea className="input cta__input cta__textarea" rows="3" value={form.message}
                          onChange={e=>setForm({...form, message:e.target.value})}
                          placeholder="Esim. Töölönranta BC: aulanäyttö + sisältö + asennus, 6 vrk."/>
              </div>
              <div className="cta__submit">
                <button type="submit" className="btn btn-primary btn-lg">Lähetä — saat vastauksen 24 h →</button>
                <span className="cta__guarantee mono">EI MARKKINOINTILUPAA — VAIN VASTAUS PYYNTÖÖSI</span>
              </div>
            </form>
          ) : (
            <div className="cta__success">
              <div className="cta__success-icon">
                <i data-lucide="check" style={{ width: 36, height: 36, strokeWidth: 2 }}></i>
              </div>
              <h3 className="cta__success-h">Kiitos. Vastaamme 24 tunnissa.</h3>
              <p className="cta__success-p">Yhteyshenkilösi on <strong>Janne Kallio</strong>. Hän on sinuun yhteydessä sähköpostitse tämän työpäivän aikana.</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

window.CtaSection = CtaSection;