/* global React, Icon, Logo */
const { useState: useContactState } = React;

const CONTACT_SERVICES = [
  "Software a medida",
  "Laboratorio",
  "Consultorio",
  "Chatbot",
  "Logística",
  "Web / app",
  "STAM Connect",
];

const EMPTY_CONTACT_FORM = {
  name: "",
  company: "",
  email: "",
  phone: "",
  solution: CONTACT_SERVICES[0],
  message: "",
  website: "",
};

const contactConfig = () => window.STAMINEX_CONFIG || {};
const contactEmail = () => contactConfig().CONTACT_EMAIL || contactConfig().EMAIL || contactConfig().email || "dev@staminex.net";

if (!document.querySelector('link[data-staminex-contact]')) {
  const stylesheet = document.createElement("link");
  stylesheet.rel = "stylesheet";
  stylesheet.href = "agency-contact.css";
  stylesheet.dataset.staminexContact = "true";
  document.head.appendChild(stylesheet);
}

async function submitContactRequest(formElement) {
  const endpoint = contactConfig().CONTACT_ENDPOINT;
  if (!endpoint) throw new Error("El canal de envío aún no está configurado. Escríbenos directamente por correo.");

  const data = new FormData(formElement);
  const response = await fetch(endpoint, {
    method: "POST",
    body: data,
    headers: { Accept: "application/json" },
  });

  if (!response.ok) throw new Error("No pudimos enviar tu solicitud. Inténtalo nuevamente o escríbenos por correo.");
}

function ContactForm({ id, compact = false }) {
  const [form, setForm] = useContactState(EMPTY_CONTACT_FORM);
  const [status, setStatus] = useContactState("idle");
  const [errors, setErrors] = useContactState({});
  const [submitError, setSubmitError] = useContactState("");

  const update = (key) => (event) => {
    setForm((current) => ({ ...current, [key]: event.target.value }));
    if (errors[key]) setErrors((current) => ({ ...current, [key]: false }));
  };

  const validate = () => {
    const nextErrors = {};
    if (!form.name.trim()) nextErrors.name = true;
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) nextErrors.email = true;
    if (!form.message.trim()) nextErrors.message = true;
    setErrors(nextErrors);
    return Object.keys(nextErrors).length === 0;
  };

  const onSubmit = async (event) => {
    event.preventDefault();
    setSubmitError("");
    if (form.website || !validate()) {
      if (form.website) setSubmitError("No se pudo validar el formulario.");
      return;
    }

    setStatus("loading");
    try {
      await submitContactRequest(event.currentTarget);
      setStatus("success");
    } catch (error) {
      setStatus("error");
      setSubmitError(error instanceof Error ? error.message : "No pudimos enviar tu solicitud.");
    }
  };

  if (status === "success") {
    return (
      <div className="agency-form-success" role="status">
        <span className="agency-form-success__icon"><Icon name="check" size={30} stroke={2.4} /></span>
        <span className="agency-kicker">Solicitud enviada</span>
        <h3>Gracias por contarnos sobre tu proyecto.</h3>
        <p>Tu mensaje llegó correctamente. Nos pondremos en contacto por los datos que indicaste.</p>
        <button className="agency-btn agency-btn--ghost" type="button" onClick={() => { setForm(EMPTY_CONTACT_FORM); setStatus("idle"); }}>
          Enviar otra solicitud
        </button>
      </div>
    );
  }

  return (
    <form className={`agency-form${compact ? " agency-form--compact" : ""}`} id={id} onSubmit={onSubmit} noValidate>
      <input type="hidden" name="_subject" value="Nueva solicitud desde STAMINEX" />
      <input type="hidden" name="_template" value="table" />
      <input type="hidden" name="_captcha" value="false" />
      <input type="hidden" name="source" value="staminex_website" />
      <label className="agency-honeypot" aria-hidden="true">
        No completar este campo
        <input name="_honey" value={form.website} onChange={update("website")} tabIndex="-1" autoComplete="off" />
      </label>

      <div className="agency-form__row">
        <label className="agency-field">
          <span>Nombre <b>*</b></span>
          <input name="name" value={form.name} onChange={update("name")} placeholder="Tu nombre" autoComplete="name" aria-invalid={!!errors.name} />
          {errors.name && <small>Ingresa tu nombre.</small>}
        </label>
        <label className="agency-field">
          <span>Empresa</span>
          <input name="company" value={form.company} onChange={update("company")} placeholder="Nombre de tu empresa" autoComplete="organization" />
        </label>
      </div>

      <div className="agency-form__row">
        <label className="agency-field">
          <span>Correo <b>*</b></span>
          <input name="email" type="email" value={form.email} onChange={update("email")} placeholder="nombre@empresa.com" autoComplete="email" aria-invalid={!!errors.email} />
          {errors.email && <small>Ingresa un correo válido.</small>}
        </label>
        <label className="agency-field">
          <span>WhatsApp <em>opcional</em></span>
          <input name="phone" type="tel" value={form.phone} onChange={update("phone")} placeholder="+51 999 999 999" autoComplete="tel" />
        </label>
      </div>

      <label className="agency-field">
        <span>Solución de interés</span>
        <span className="agency-select">
          <select name="solution" value={form.solution} onChange={update("solution")}>
            {CONTACT_SERVICES.map((service) => <option key={service} value={service}>{service}</option>)}
          </select>
          <Icon name="arrow" size={16} style={{ transform: "rotate(90deg)" }} />
        </span>
      </label>

      <label className="agency-field">
        <span>¿Qué necesitas resolver? <b>*</b></span>
        <textarea name="message" rows={compact ? 3 : 5} value={form.message} onChange={update("message")} placeholder="Cuéntanos sobre tu proceso, equipo y objetivo." aria-invalid={!!errors.message} />
        {errors.message && <small>Cuéntanos brevemente qué necesitas.</small>}
      </label>

      {submitError && <p className="agency-form__error" role="alert">{submitError}</p>}
      <button className="agency-btn agency-btn--light agency-form__submit" type="submit" disabled={status === "loading"}>
        {status === "loading" ? "Enviando..." : "Enviar solicitud"}
        {status !== "loading" && <Icon name="arrow" size={18} />}
      </button>
      <p className="agency-form__privacy">Al enviar, aceptas que usemos tus datos para responder esta solicitud.</p>
    </form>
  );
}

function Contact() {
  const email = contactEmail();
  return (
    <section className="agency-contact" id="contacto">
      <div className="container agency-contact__grid">
        <div className="agency-contact__intro reveal">
          <span className="agency-kicker">Hablemos de tu operación</span>
          <h2>El siguiente sistema de tu empresa empieza con una conversación.</h2>
          <p>Analizamos el proceso, detectamos fricción y planteamos una solución digital conectada con la forma real en que trabaja tu equipo.</p>
          <div className="agency-contact__points">
            <div><Icon name="spark" size={19} /><span><b>Diagnóstico claro</b> antes de proponer tecnología.</span></div>
            <div><Icon name="cog" size={19} /><span><b>Arquitectura a medida</b> para crecer sin parches.</span></div>
            <div><Icon name="users" size={19} /><span><b>Acompañamiento humano</b> durante todo el proyecto.</span></div>
          </div>
          <a className="agency-contact__mail" href={`mailto:${email}`}><Icon name="mail" size={18} /> {email}</a>
        </div>
        <div className="agency-contact__form-card reveal d1">
          <div className="agency-contact__form-head">
            <span>01 / Contacto</span>
            <i>Canal directo</i>
          </div>
          <ContactForm id="contact-form" />
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onDemo, onWhatsApp }) {
  return (
    <section className="agency-cta">
      <div className="container">
        <div className="agency-cta__panel reveal">
          <div className="agency-cta__copy">
            <span className="agency-kicker agency-kicker--violet">Tu próxima ventaja operativa</span>
            <h2>Construyamos el sistema que tu operación necesita</h2>
            <p>Un producto digital pensado alrededor de tus procesos, tus clientes y la siguiente etapa de tu empresa.</p>
            <div className="agency-cta__actions">
              <button className="agency-btn agency-btn--light" type="button" onClick={onDemo}>Contactar <Icon name="arrow" size={18} /></button>
              <button className="agency-btn agency-btn--whatsapp" type="button" onClick={onWhatsApp}><Icon name="whatsapp" size={19} /> WhatsApp</button>
            </div>
          </div>
          <div className="agency-cta__art" aria-hidden="true">
            <div className="agency-abstract-card agency-abstract-card--main"><span /><span /><span /></div>
            <div className="agency-abstract-card agency-abstract-card--metric"><i /> STAM</div>
            <div className="agency-abstract-card agency-abstract-card--flow"><b /><b /><b /></div>
            <div className="agency-cta__orb" />
          </div>
        </div>
      </div>
    </section>
  );
}

const FOOTER_COLUMNS = [
  { title: "Servicios", links: [
    ["Software a medida", "/service/software-a-medida/"],
    ["Web y aplicaciones", "/service/desarrollo-webs/"],
    ["Automatización", "/service/automatizaciones/"],
    ["WhatsApp oficial", "/service/whatsapp-oficial/"],
  ] },
  { title: "Soluciones", links: [
    ["Laboratorios", "/portfolio/#laboratorio"],
    ["Consultorios", "/portfolio/#consultorio"],
    ["Logística", "/portfolio/#paqueteria"],
    ["WhatsApp Cloud API", "whatsapp-api.html"],
  ] },
  { title: "Producto", links: [
    ["STAM Connect", "https://stamconnect.staminex.net/"],
    ["Conocer funciones", "https://stamconnect.staminex.net/#funciones"],
    ["Ver planes", "https://stamconnect.staminex.net/#precios"],
  ] },
];

function Footer() {
  const email = contactEmail();
  return (
    <footer className="agency-footer">
      <div className="container agency-footer__top">
        <div className="agency-footer__brand">
          <a href="index.html" aria-label="STAMINEX, inicio"><Logo light size={28} /></a>
          <p>Sistemas y productos digitales para operaciones que necesitan avanzar con claridad.</p>
          <a className="agency-footer__email" href={`mailto:${email}`}><Icon name="mail" size={16} /> {email}</a>
        </div>
        <nav className="agency-footer__nav" aria-label="Enlaces del pie de página">
          {FOOTER_COLUMNS.map((column) => (
            <div className="agency-footer__column" key={column.title}>
              <h3>{column.title}</h3>
              {column.links.map(([label, href]) => <a href={href} key={label}>{label}</a>)}
            </div>
          ))}
        </nav>
      </div>
      <div className="container agency-footer__bottom">
        <span>© 2026 STAMINEX. Todos los derechos reservados.</span>
        <div><a href="privacy.html">Privacidad</a><a href="privacy.html#terminos">Términos legales</a></div>
      </div>
    </footer>
  );
}

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