/* global React, Icon, Eyebrow, MiniCtaMarquee, VideoBackground, SparkleHeading */
const { useState: useStateContact } = React;

function ContactBlock({ kind, name, body, primary }) {
  return (
    <article className={`contact-block ${primary ? "primary" : ""}`}>
      <div className="cb-kind">{kind}</div>
      <h3>{name}</h3>
      <div className="cb-body">{body}</div>
    </article>
  );
}

function ContactForm({ lang }) {
  const t = (en, es) => (lang === "es" ? es : en);
  const [form, setForm] = useStateContact({ name: "", email: "", subject: "", message: "" });
  const [errors, setErrors] = useStateContact({});
  const [sent, setSent] = useStateContact(false);

  const update = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    setErrors(e => ({ ...e, [k]: undefined }));
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = t("Please enter your name.", "Ingresa tu nombre.");
    if (!form.email.trim()) errs.email = t("Email is required.", "El correo es obligatorio.");
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) errs.email = t("Please enter a valid email.", "Correo inválido.");
    if (!form.message.trim() || form.message.length < 8) errs.message = t("Tell us a little more (at least 8 characters).", "Cuéntanos un poco más.");
    setErrors(errs);
    if (Object.keys(errs).length) return;

    const subject = encodeURIComponent(form.subject || `Message from ${form.name}`);
    const body = encodeURIComponent(
      `${form.message}\n\n— ${form.name}\n${form.email}`
    );
    window.location.href = `mailto:dcsmv@dcsmv.net?subject=${subject}&body=${body}`;

    setSent(true);
    setTimeout(() => {
      setSent(false);
      setForm({ name: "", email: "", subject: "", message: "" });
    }, 4500);
  };

  return (
    <form className="contact-form" onSubmit={submit} noValidate>
      <div className="cf-grid">
        <div>
          <label htmlFor="cf-name">{t("Your name", "Tu nombre")} *</label>
          <input id="cf-name" type="text" value={form.name} onChange={e => update("name", e.target.value)} aria-invalid={!!errors.name} />
          {errors.name && <div className="cf-err">{errors.name}</div>}
        </div>
        <div>
          <label htmlFor="cf-email">{t("Email", "Correo")} *</label>
          <input id="cf-email" type="email" value={form.email} onChange={e => update("email", e.target.value)} aria-invalid={!!errors.email} />
          {errors.email && <div className="cf-err">{errors.email}</div>}
        </div>
      </div>
      <div>
        <label htmlFor="cf-subject">{t("Subject", "Asunto")}</label>
        <input id="cf-subject" type="text" value={form.subject} onChange={e => update("subject", e.target.value)} />
      </div>
      <div>
        <label htmlFor="cf-msg">{t("Message", "Mensaje")} *</label>
        <textarea id="cf-msg" rows="6" value={form.message} onChange={e => update("message", e.target.value)} aria-invalid={!!errors.message}></textarea>
        {errors.message && <div className="cf-err">{errors.message}</div>}
      </div>
      <div className="cf-row">
        <button className="btn btn-primary" type="submit" disabled={sent}>
          {sent ? <><Icon.Check /> {t("Message sent", "Mensaje enviado")}</> : <>{t("Send message", "Enviar mensaje")} <Icon.Arrow className="arrow" /></>}
        </button>
        <p className="muted small">
          {t("We read every message. Most replies go out within two business days.",
             "Leemos cada mensaje. Respondemos en dos días hábiles.")}
        </p>
      </div>
    </form>
  );
}

function Contact({ lang }) {
  const t = (en, es) => (lang === "es" ? es : en);
  return (
    <>
      <section className="page-hero" aria-labelledby="contact-title">
        <VideoBackground
          kind="flag"
          video={window.__resources.flagMp4}
          poster={window.__resources.flagPoster}
          playbackRate={0.5}
          position="center"
          overlay={false}
        />
        <div className="container page-hero-inner on-dark">
          <Eyebrow>{t("Contact", "Contacto")}</Eyebrow>
          <SparkleHeading id="contact-title">{t("How to reach us.", "Cómo contactarnos.")}</SparkleHeading>
        </div>
      </section>

      <section className="contact-blocks">
        <div className="container">
          <div className="cb-grid">
            <ContactBlock
              primary
              kind={t("LOCAL · PRIMARY", "LOCAL · PRINCIPAL")}
              name="Democratic Club of Santa Maria Valley"
              body={
                <ul className="cb-list">
                  <li><Icon.Pin /><span>327 E. Plaza Drive, Suite 2<br/>Santa Maria, CA 93454</span></li>
                  <li><Icon.Phone /><a href="tel:+18053492708">(805) 349‑2708</a></li>
                  <li><Icon.Mail /><a href="mailto:dcsmv@dcsmv.net">dcsmv@dcsmv.net</a></li>
                  <li><Icon.Clock /><span>{t("Mon–Fri, 11 AM – 2 PM", "Lun–Vie, 11 a.m. – 2 p.m.")}<br/><span className="muted small">{t("Call for weekend hours or appointments", "Llama para horario de fin de semana")}</span></span></li>
                </ul>
              }
            />
            <ContactBlock
              kind={t("COUNTY", "CONDADO")}
              name="Santa Barbara County Democratic Party"
              body={
                <ul className="cb-list">
                  <li><Icon.External /><a href="https://www.sbdems.org/" target="_blank" rel="noopener noreferrer">sbdems.org</a></li>
                  <li><Icon.Facebook size={16} /><a href="https://www.facebook.com/SBCDP" target="_blank" rel="noopener noreferrer">{t("Facebook", "Facebook")}</a></li>
                  <li><Icon.Instagram size={16} /><a href="https://www.instagram.com/sbcdemocrats" target="_blank" rel="noopener noreferrer">{t("Instagram", "Instagram")}</a></li>
                </ul>
              }
            />
            <ContactBlock
              kind={t("STATEWIDE", "ESTATAL")}
              name="California Democratic Party"
              body={
                <ul className="cb-list">
                  <li><Icon.External /><a href="https://cadem.org/" target="_blank" rel="noopener noreferrer">cadem.org</a></li>
                  <li><Icon.Mail /><a href="mailto:Political@cadem.org">Political@cadem.org</a></li>
                  <li><Icon.WhatsApp /><a href="https://api.whatsapp.com/send?text=*Department%20Contacts%20-%20California%20Democratic%20Party*%0A%0Ahttps://cadem.org/department-contacts/" target="_blank" rel="noopener noreferrer">{t("WhatsApp", "WhatsApp")}</a></li>
                </ul>
              }
            />
          </div>
        </div>
      </section>

      <section className="contact-map-section">
        <div className="container">
          <div className="map-card">
            <iframe
              className="map-frame"
              title="Map to 327 E. Plaza Drive, Suite 2, Santa Maria, CA"
              src="https://www.google.com/maps?q=327+E+Plaza+Drive+Suite+2,+Santa+Maria,+CA+93454&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            ></iframe>
            <div className="map-meta">
              <Eyebrow>{t("Visit", "Visítanos")}</Eyebrow>
              <h3>327 E. Plaza Drive<br/>Suite 2 · Santa Maria</h3>
              <p className="muted">
                {t("Drop in during business hours — Mon–Fri, 11 AM – 2 PM.",
                   "Visítanos en horario de oficina — Lun–Vie, 11 a.m. – 2 p.m.")}
              </p>
              <a className="btn btn-outline" href="https://www.google.com/maps/dir/?api=1&destination=327+E+Plaza+Drive+Suite+2,+Santa+Maria,+CA+93454" target="_blank" rel="noopener noreferrer">
                {t("Get directions", "Cómo llegar")} <Icon.External />
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="contact-form-section">
        <div className="container">
          <div className="two-col">
            <div className="two-col-side sticky">
              <Eyebrow>{t("Send a Message", "Envía un Mensaje")}</Eyebrow>
              <h2>{t("Question? Idea? Tip?", "¿Pregunta? ¿Idea?")}</h2>
              <div className="red-rule" />
              <p className="muted">
                {t("We read every message. Most replies go out within two business days.",
                   "Leemos cada mensaje. Respondemos en dos días hábiles.")}
              </p>
            </div>
            <div className="two-col-body">
              <ContactForm lang={lang} />
            </div>
          </div>
        </div>
      </section>

      <MiniCtaMarquee lang={lang} />
    </>
  );
}

Object.assign(window, { Contact });