/* pl-contact.jsx — sekcja "Dla właścicieli": formularz + apel do UE */
const { useState: useStateC } = React;

function ContactForm() {
  const [form, setForm] = useStateC({ name: "", role: "", apt: "", email: "", message: "" });
  const [errors, setErrors] = useStateC({});
  const [sent, setSent] = useStateC(false);

  const set = (k) => (e) => {
    setForm((f) => ({ ...f, [k]: e.target.value }));
    setErrors((er) => (er[k] ? { ...er, [k]: null } : er));
  };

  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = "Proszę podać imię i nazwisko.";
    if (!form.email.trim()) er.email = "Proszę podać adres e-mail.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim()))
      er.email = "To nie wygląda na poprawny adres e-mail.";
    if (!form.message.trim()) er.message = "Proszę dodać krótką wiadomość.";
    return er;
  };

  const submit = (e) => {
    e.preventDefault();
    const er = validate();
    setErrors(er);
    if (Object.keys(er).length === 0) setSent(true);
  };

  if (sent) {
    return (
      <div className="form-card">
        <div className="form-success">
          <div className="fs-mark"><Ico name="check" size={26} /></div>
          <h3>Dziękujemy — wiadomość została zapisana.</h3>
          <p>
            Odezwiemy się na podany adres. Im więcej właścicieli się skoordynuje, tym
            silniejsza i bardziej uporządkowana będzie nasza wspólna droga prawna.
          </p>
          <p style={{ marginTop: 20, fontFamily: "var(--font-mono)", fontSize: "0.78rem", color: "var(--muted)" }}>
            [ Potwierdzenie demonstracyjne — przed publikacją podłącz bezpieczną skrzynkę. ]
          </p>
        </div>
      </div>
    );
  }

  return (
    <form className="form-card" onSubmit={submit} noValidate>
      <div className="field-row">
        <div className={"field" + (errors.name ? " has-error" : "")}>
          <label htmlFor="f-name">Imię i nazwisko <span className="req">*</span></label>
          <input id="f-name" type="text" value={form.name} onChange={set("name")}
            placeholder="Twoje imię i nazwisko" autoComplete="name" />
          {errors.name && <div className="err">{errors.name}</div>}
        </div>
        <div className="field">
          <label htmlFor="f-apt">Numer apartamentu</label>
          <input id="f-apt" type="text" value={form.apt} onChange={set("apt")}
            placeholder="np. A-101" />
        </div>
      </div>
      <div className="field">
        <label htmlFor="f-role">Kim jesteś?</label>
        <select id="f-role" value={form.role} onChange={set("role")}>
          <option value="">Wybierz…</option>
          <option value="wlasciciel">Właściciel apartamentu</option>
          <option value="dziennikarz">Dziennikarz</option>
          <option value="posel">Poseł lub instytucja</option>
          <option value="prawnik">Prawnik lub organizacja</option>
          <option value="inna">Inna osoba</option>
        </select>
      </div>
      <div className={"field" + (errors.email ? " has-error" : "")}>
        <label htmlFor="f-email">E-mail <span className="req">*</span></label>
        <input id="f-email" type="email" value={form.email} onChange={set("email")}
          placeholder="ty@przyklad.pl" autoComplete="email" />
        {errors.email && <div className="err">{errors.email}</div>}
      </div>
      <div className={"field" + (errors.message ? " has-error" : "")}>
        <label htmlFor="f-msg">Wiadomość <span className="req">*</span></label>
        <textarea id="f-msg" value={form.message} onChange={set("message")}
          placeholder="Opisz swoją sytuację — numer lokalu, czego doświadczyłaś/eś oraz jakie dokumenty posiadasz." />
        {errors.message && <div className="err">{errors.message}</div>}
      </div>
      <div className="form-foot">
        <button type="submit" className="btn btn--primary">
          Wyślij bezpiecznie <span className="arr"><Ico name="arrow" size={14} /></span>
        </button>
        <p className="form-consent">
          Dane trafiają wyłącznie do grupy koordynującej właścicieli i jej pełnomocników.
          Bez marketingu. Bez podmiotów trzecich.
        </p>
      </div>
    </form>
  );
}

const CHANNELS = [
  { k: "E-mail", v: "[wlasciciele@svetivlas-glos.example]" },
  { k: "Grupa", v: "[link z zaproszeniem — poproś przez formularz]" },
  { k: "Kancelaria", v: "[Pełnomocnik — dane w aktach grupy]" },
];
function Contact() {
  return (
    <section className="section section--dark-2" id="kontakt">
      <div className="wrap">
        <div className="contact-grid">
          <div className="contact-aside reveal">
            <p className="eyebrow eyebrow--dark">Napisz do nas</p>
            <p className="cta-lead">Niezależnie od tego, kim jesteś — możemy działać razem.</p>
            <p className="cta-roles">
              Zaznacz w formularzu, <b>kim jesteś</b>, a skierujemy Twoje zgłoszenie we właściwe miejsce.
              Najskuteczniejsza jest jedna, zgodna z prawem i skoordynowana droga.
            </p>
            <div className="channels">
              {CHANNELS.map((c, i) => (
                <div className="channel" key={i}>
                  <span className="ch-k">{c.k}</span>
                  <span className="ch-v">{c.v}</span>
                </div>
              ))}
            </div>
            <div className="appeal">
              <b>Apel do instytucji.</b> Zwracamy się również do posłów do Parlamentu Europejskiego
              oraz instytucji Unii Europejskiej o zajęcie się tą sprawą — w obronie praw własności
              obywateli UE.
            </div>
          </div>
          <div className="reveal" style={{ transitionDelay: "90ms" }}>
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ContactForm, Contact });