function Contact() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section className="g-contact-section" id="kontakt">
      <div className="g-contact-inner">
        <div className="g-contact-left">
          <span className="g-eyebrow" style={{color: 'var(--orange-400)'}}>Następny krok</span>
          <h2 className="g-contact-title">
            Sprawdźmy, czy <em>AI</em>  ma sens<br />w Twoim biznesie.
          </h2>
          <p className="g-contact-lead">
            30 minut, gratis, bez zobowiązań. Po rozmowie wiesz, czy warto.
          </p>
          <div className="g-contact-direct">
            <div className="g-contact-row">
              <i data-lucide="mail"></i>
              <div>
                <div className="g-contact-lbl">Mail</div>
                <div className="g-contact-val">kontakt@maciejmatera.pl</div>
              </div>
            </div>
            <div className="g-contact-row">
              <i data-lucide="calendar"></i>
              <div>
                <div className="g-contact-lbl">Kalendarz</div>
                <div className="g-contact-val">cal.com/maciejmatera</div>
              </div>
            </div>
          </div>
        </div>

        <form className="g-contact-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
          {submitted ? (
            <div className="g-contact-success">
              <i data-lucide="check-circle-2"></i>
              <h3>Dzięki!</h3>
              <p>Odezwę się w ciągu 24h. Sprawdź też skrzynkę spam - czasem tam ląduję.</p>
            </div>
          ) : (
            <>
              <h3 className="g-contact-form-title">Napisz wprost.</h3>
              <div className="g-contact-fields">
                <label className="g-field">
                  <span>Imię</span>
                  <input type="text" placeholder="Jak Ci na imię?" required />
                </label>
                <label className="g-field">
                  <span>Email</span>
                  <input type="email" placeholder="twoj@email.pl" required />
                </label>
                <label className="g-field">
                  <span>O czym chcesz porozmawiać?</span>
                  <select defaultValue="">
                    <option value="" disabled>Wybierz...</option>
                    <option>Automatyzacja obsługi zamówień</option>
                    <option>Chatbot AI / obsługa klienta</option>
                    <option>Lead-gen / proces sprzedaży</option>
                    <option>Dedykowana aplikacja</option>
                    <option>Coś innego</option>
                  </select>
                </label>
                <label className="g-field g-field--wide">
                  <span>Opisz krótko</span>
                  <textarea rows="3" placeholder="Co Cię boli? Co chciałbyś zautomatyzować?"></textarea>
                </label>
              </div>
              <button type="submit" className="g-btn g-btn--accent g-btn--lg g-btn--full">
                Umów rozmowę <i data-lucide="arrow-right"></i>
              </button>
              <p className="g-contact-fine">Bez zobowiązań. Odpowiem w ciągu 24h.</p>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

window.Contact = Contact;