/**
 * contact.jsx — the conversion section: service request form on the left,
 * business info card + Google Map on the right.
 *
 * The form currently SIMULATES submission (no backend on a static site).
 * To send real emails, replace the setTimeout in handleSubmit with a fetch
 * to your form provider — a ready-made Formspree example is in the README.
 */

function ContactForm() {
  const { t } = useLang();
  const B = window.BUSINESS;
  const f = t.contact.form;

  const [fields, setFields] = React.useState({ name: "", phone: "", service: "", message: "" });
  /* status: idle → sending → success, or error when validation fails */
  const [status, setStatus] = React.useState("idle");

  const setField = (key) => (e) => setFields({ ...fields, [key]: e.target.value });

  function handleSubmit(e) {
    e.preventDefault();
    if (!fields.name.trim() || !fields.phone.trim()) {
      setStatus("error");
      return;
    }
    setStatus("sending");
    /* Stub: swap for a real request (see README → "Wiring the form"). */
    setTimeout(() => setStatus("success"), 900);
  }

  if (status === "success") {
    return (
      <div className="contact-form">
        <p className="form-status form-status--success" role="status">
          ✓ {f.success}
          <br />
          {f.successNote} <a href={B.phoneHref}>{B.phoneDisplay}</a>.
        </p>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={handleSubmit} noValidate>
      <div className="field__row">
        <div className="field">
          <label htmlFor="cf-name">{f.name} *</label>
          <input
            id="cf-name"
            type="text"
            autoComplete="name"
            placeholder={f.namePh}
            value={fields.name}
            onChange={setField("name")}
            required
          />
        </div>
        <div className="field">
          <label htmlFor="cf-phone">{f.phone} *</label>
          <input
            id="cf-phone"
            type="tel"
            autoComplete="tel"
            placeholder={f.phonePh}
            value={fields.phone}
            onChange={setField("phone")}
            required
          />
        </div>
      </div>

      <div className="field">
        <label htmlFor="cf-service">{f.service}</label>
        <select id="cf-service" value={fields.service} onChange={setField("service")}>
          {/* Options mirror the services section so requests map 1:1 to jobs */}
          {t.services.items.map((s) => (
            <option key={s.title} value={s.title}>
              {s.title}
            </option>
          ))}
          <option value="otro">{f.serviceOther}</option>
        </select>
      </div>

      <div className="field">
        <label htmlFor="cf-message">{f.message}</label>
        <textarea
          id="cf-message"
          placeholder={f.messagePh}
          value={fields.message}
          onChange={setField("message")}
        ></textarea>
      </div>

      {/* aria-live so screen readers announce validation/sending changes */}
      <div aria-live="polite">
        {status === "error" && (
          <p className="form-status form-status--error">{f.errorRequired}</p>
        )}
      </div>

      <button className="btn btn--red" type="submit" disabled={status === "sending"}>
        {status === "sending" ? (
          <><span className="btn-spinner" aria-hidden="true"></span> {f.sending}</>
        ) : (
          <>{f.submit} <Icon name="arrow" size={18} /></>
        )}
      </button>
    </form>
  );
}

/** Dark card with address / phone / email / hours + WhatsApp CTA. */
function InfoCard() {
  const { t } = useLang();
  const B = window.BUSINESS;
  const info = t.contact.info;

  const rows = [
    { icon: "pin", label: info.addressLabel, value: B.address },
    { icon: "phone", label: info.phoneLabel, value: B.phoneDisplay, href: B.phoneHref },
    { icon: "mail", label: info.emailLabel, value: B.email, href: "mailto:" + B.email },
    { icon: "clock", label: info.hoursLabel, value: info.hours },
  ];

  return (
    <div className="info-card">
      <div className="info-card__logo">
        <img src="images/Logonobg.png" alt="Cerrajeros Campello 24H logo" />
      </div>
      <h3>{info.title}</h3>
      <dl className="info-card__list">
        {rows.map((row) => (
          <div className="info-card__item" key={row.label}>
            <Icon name={row.icon} size={20} />
            <div>
              <dt>{row.label}</dt>
              <dd>{row.href ? <a href={row.href}>{row.value}</a> : row.value}</dd>
            </div>
          </div>
        ))}
      </dl>
      <a className="btn btn--amber" href={B.whatsappHref} target="_blank" rel="noopener noreferrer">
        <Icon name="whatsapp" size={20} /> {info.whatsapp}
      </a>
    </div>
  );
}

function Contact() {
  const { t } = useLang();
  const B = window.BUSINESS;

  return (
    <section className="section contact" id="contacto" data-screen-label="Contacto">
      <div className="container">
        <SectionHead kicker={t.contact.kicker} title={t.contact.title} lead={t.contact.lead} />

        <div className="contact__grid">
          <div className="reveal reveal--slide-right"><ContactForm /></div>

          <div className="contact-aside reveal reveal--slide-left">
            <InfoCard />
            {/* Keyless Google Maps embed pinned to the business address */}
            <div className="map-card">
              <iframe
                src={B.mapEmbedUrl}
                title={t.contact.mapTitle}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              ></iframe>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });