/* global React */
const { useState } = React;

const KontaktPage = ({ setPage }) => {
  const [submitted, setSubmitted] = useState(false);

  return (
    <main>
      <PageIntro
        setPage={setPage}
        crumb="Kontakt"
        title="Skontaktuj się z nami."
        lead="Nie czekaj na kolejny termin egzaminu. Zgłoś się do nas, a pomożemy Ci zawalczyć o Twój wynik już teraz."
      />

      <section className="cor-section">
        <div className="cor-container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
            <div>
              <span className="cor-eyebrow">§ Dane kontaktowe</span>
              <h2 className="cor-h2" style={{ marginTop: 14 }}>Napisz, zadzwoń, umów konsultację.</h2>
              <p className="cor-body" style={{ marginTop: 20, maxWidth: "44ch" }}>
                Każdą sprawę traktujemy indywidualnie. Pierwszy kontakt służy poznaniu sytuacji i wstępnej ocenie zasadności odwołania.
              </p>

              <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--ink-200)" }}>
                {[
                  { label: "E-mail", val: "egzaminyprawniczeodwolaniapl@gmail.com" },
                  { label: "Telefon", val: "+48 668 184 024" },
                  { label: "Numer rachunku", val: "21 1050 1041 1000 0092 2842 1385 (ING Bank Śląski)" },
                  { label: "Godziny pracy", val: "poniedziałek – piątek · 9:00–17:00" },
                  { label: "Strona", val: "www.odwolaniaegzaminyprawnicze.pl" },
                ].map(item => (
                  <div key={item.label} style={{ padding: "20px 0", borderBottom: "1px solid var(--ink-200)" }}>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--ink-500)", marginBottom: 6 }}>{item.label}</div>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--green-900)" }}>{item.val}</div>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 40, padding: 28, background: "var(--green-50)", border: "1px solid var(--ink-200)" }}>
                <span className="cor-eyebrow">Co dalej?</span>
                <p className="cor-body" style={{ marginTop: 12, fontSize: 15 }}>
                  Po otrzymaniu zgłoszenia odpowiadamy w ciągu <strong style={{ color: "var(--green-900)" }}>24 godzin roboczych</strong>. Pierwsza rozmowa pozwala nam ocenić zasadność odwołania i zaproponować dalsze kroki.
                </p>
              </div>
            </div>

            <div style={{ background: "var(--white)", border: "1px solid var(--ink-200)", padding: 48 }}>
              {submitted ? (
                <div style={{ textAlign: "center", padding: "40px 0" }}>
                  <div style={{ width: 64, height: 64, borderRadius: "50%", border: "1.5px solid var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", margin: "0 auto 20px" }}>
                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
                      <path d="M6 14l5 5 11-11" stroke="var(--accent-deep)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </div>
                  <h3 className="cor-h3">Dziękujemy za zgłoszenie.</h3>
                  <p className="cor-body" style={{ marginTop: 12 }}>Skontaktujemy się z Tobą w ciągu 24 godzin roboczych.</p>
                  <button className="cor-btn cor-btn--ghost" style={{ marginTop: 24 }} onClick={() => setSubmitted(false)}>Wyślij kolejne zgłoszenie</button>
                </div>
              ) : (
                <>
                  <h3 className="cor-h3">Formularz zgłoszenia</h3>
                  <p className="cor-small" style={{ marginTop: 6, marginBottom: 28 }}>Wszystkie pola są wymagane.</p>
                  <form className="cor-form" onSubmit={async (e) => {
                    e.preventDefault();
                    const f = e.target;
                    const data = new FormData(f);
                      try {
                        const res = await fetch("send.php", { method: "POST", body: data });
                        const text = await res.text();
                        let json;
                        try { json = JSON.parse(text); } catch(e) { alert("Błąd serwera:\n\n" + text); return; }
                        if (json.ok) { setSubmitted(true); }
                        else { alert(json.error || "Wystąpił błąd."); }
                      } catch (err) {
                        alert("Brak połączenia. Napisz na egzaminyprawniczeodwolaniapl@gmail.com");
                      }
                  }}>
                    <input type="text" name="website" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px", width: 1, height: 1 }} aria-hidden="true" />
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                      <div className="cor-field">
                        <label>Imię</label>
                        <input name="firstname" type="text" placeholder="Jan" required />
                      </div>
                      <div className="cor-field">
                        <label>Nazwisko</label>
                        <input name="lastname" type="text" placeholder="Kowalski" required />
                      </div>
                    </div>
                    <div className="cor-field">
                      <label>E-mail</label>
                      <input name="email" type="email" placeholder="jan.kowalski@email.pl" required />
                    </div>
                    <div className="cor-field">
                      <label>Telefon</label>
                      <input name="phone" type="tel" placeholder="+48 ..." />
                    </div>
                    <div className="cor-field">
                      <label>Rodzaj egzaminu</label>
                      <select name="exam" required>
                        <option value="">Wybierz...</option>
                        <option>Egzamin adwokacki</option>
                        <option>Egzamin radcowski</option>
                        <option>Egzamin notarialny</option>
                        <option>Inny</option>
                      </select>
                    </div>
                    <div className="cor-field">
                      <label>Krótko o sprawie</label>
                      <textarea name="message" placeholder="Opisz, jakiej części egzaminu dotyczy odwołanie i jakie wątpliwości budzi ocena." required></textarea>
                    </div>
                    <label style={{ display: "flex", gap: 12, alignItems: "start", fontSize: 13, color: "var(--ink-700)", lineHeight: 1.5, cursor: "pointer" }}>
                      <input type="checkbox" required style={{ marginTop: 4 }} />
                      <span>Wyrażam zgodę na przetwarzanie moich danych osobowych w celu udzielenia odpowiedzi na zgłoszenie, zgodnie z <a onClick={() => setPage("polityka")} style={{ color: "var(--accent-deep)", textDecoration: "underline", cursor: "pointer" }}>Polityką Prywatności</a>.</span>
                    </label>
                    <button className="cor-btn cor-btn--primary" type="submit" style={{ marginTop: 8 }}>
                      Wyślij zgłoszenie <ArrowIcon />
                    </button>
                  </form>
                </>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

window.KontaktPage = KontaktPage;