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

const SERVICES = [
  "Sitio / página web",
  "Aplicación móvil",
  "Tienda online",
  "Sistema a medida",
  "Sistema de reservas",
  "Integración WhatsApp Cloud API",
  "Otro / no estoy seguro",
];

// Stubbed endpoint — ready to connect to a real backend later.
async function submitContactRequest(payload) {
  try {
    // await fetch("/api/contact/request", {
    //   method: "POST",
    //   headers: { "Content-Type": "application/json" },
    //   body: JSON.stringify(payload),
    // });
    await new Promise((r) => setTimeout(r, 850)); // simulated latency
    return { ok: true };
  } catch (e) {
    return { ok: false };
  }
}

function ContactForm({ id, compact = false }) {
  const [form, setForm] = useFormS({ name: "", company: "", email: "", phone: "", solution: SERVICES[0], message: "" });
  const [sent, setSent] = useFormS(false);
  const [busy, setBusy] = useFormS(false);
  const [err, setErr] = useFormS({});

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

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

  const onSubmit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setBusy(true);
    const payload = {
      name: form.name,
      company: form.company,
      email: form.email,
      phone_optional: form.phone || null,
      message: form.message,
      solution_interest: form.solution,
      source: "staminex_website",
    };
    const res = await submitContactRequest(payload);
    setBusy(false);
    if (res.ok) setSent(true);
  };

  if (sent) {
    return (
      <div className="form-success">
        <span className="form-success__ic"><Icon name="check" size={34} stroke={2.4} /></span>
        <h3>¡Gracias! Recibimos tu solicitud.</h3>
        <p className="muted">Te responderemos pronto al correo o WhatsApp que indicaste.</p>
        <button className="btn btn--outline" onClick={() => { setSent(false); setForm({ name: "", company: "", email: "", phone: "", solution: SERVICES[0], message: "" }); }}>
          Enviar otra solicitud
        </button>
      </div>
    );
  }

  return (
    <form className="cform" id={id} onSubmit={onSubmit} noValidate>
      <div className="cform__row">
        <label className="field">
          <span>Nombre <i>*</i></span>
          <input className={err.name ? "is-err" : ""} value={form.name} onChange={set("name")} placeholder="Tu nombre" />
        </label>
        <label className="field">
          <span>Empresa</span>
          <input value={form.company} onChange={set("company")} placeholder="Nombre de tu empresa" />
        </label>
      </div>
      <div className="cform__row">
        <label className="field">
          <span>Correo <i>*</i></span>
          <input className={err.email ? "is-err" : ""} type="email" value={form.email} onChange={set("email")} placeholder="tucorreo@empresa.com" />
        </label>
        <label className="field">
          <span>WhatsApp <em>(opcional)</em></span>
          <input value={form.phone} onChange={set("phone")} placeholder="+51 999 999 999" />
        </label>
      </div>
      <label className="field">
        <span>Servicio de interés</span>
        <div className="select-wrap">
          <select value={form.solution} onChange={set("solution")}>
            {SERVICES.map((s) => <option key={s}>{s}</option>)}
          </select>
          <Icon name="arrow" size={16} style={{ transform: "rotate(90deg)" }} />
        </div>
      </label>
      <label className="field">
        <span>Mensaje <i>*</i></span>
        <textarea className={err.message ? "is-err" : ""} rows={compact ? 3 : 4} value={form.message} onChange={set("message")} placeholder="Cuéntanos qué te gustaría automatizar…" />
      </label>
      <button className="btn btn--primary btn--lg cform__submit" type="submit" disabled={busy}>
        {busy ? "Enviando…" : "Enviar solicitud"} {!busy && <Icon name="arrow" size={18} />}
      </button>
    </form>
  );
}

function Contact() {
  return (
    <section className="section" id="contacto">
      <div className="container">
        <div className="contact">
          <div className="contact__intro reveal">
            <span className="eyebrow">Contacto</span>
            <h2 className="section-title" style={{ textAlign: "left" }}>Cuéntanos qué quieres automatizar</h2>
            <p className="section-sub" style={{ marginLeft: 0 }}>
              Te mostramos cómo STAMINEX puede ordenar la atención y los procesos de tu negocio.
              Sin compromiso.
            </p>
            <div className="contact__points">
              <div><span><Icon name="check" size={15} stroke={2.6} /></span> Demostración personalizada</div>
              <div><span><Icon name="check" size={15} stroke={2.6} /></span> Asesoría según tu industria</div>
              <div><span><Icon name="check" size={15} stroke={2.6} /></span> Respuesta en menos de 24 h</div>
            </div>
            <a className="contact__mail" href="mailto:dev@staminex.net">
              <span><Icon name="mail" size={18} /></span> dev@staminex.net
            </a>
          </div>
          <div className="contact__formwrap reveal d1">
            <ContactForm id="contact-form" />
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onDemo, onWhatsApp }) {
  return (
    <section className="section section--dark cta">
      <div className="cta__glow" />
      <div className="container cta__inner reveal">
        <h2 className="cta__title">Construyamos algo que tu negocio<br /><span className="grad-text">esté orgulloso de mostrar</span></h2>
        <p className="cta__sub">
          Diseñamos y desarrollamos sitios web, tiendas y sistemas a medida — y te acompañamos
          mientras tu negocio crece.
        </p>
        <div className="cta__btns">
          <button className="btn btn--primary btn--lg" onClick={onDemo}>Conversemos <Icon name="arrow" size={18} /></button>
          <button className="btn btn--wa btn--lg" onClick={onWhatsApp}><Icon name="whatsapp" size={20} /> Hablar por WhatsApp</button>
        </div>
      </div>
    </section>
  );
}

const FOOT_COLS = [
  { h: "Servicios", items: [
    { t: "Sitios y páginas web", href: "#soluciones" },
    { t: "Aplicaciones móviles", href: "#soluciones" },
    { t: "Sistemas a medida", href: "#soluciones" },
    { t: "Tiendas online", href: "#soluciones" },
    { t: "WhatsApp Cloud API", href: "whatsapp-api.html" },
  ] },
  { h: "Industrias", items: [
    { t: "Clínicas", href: "#casos" },
    { t: "Hoteles", href: "#casos" },
    { t: "Courier", href: "#casos" },
    { t: "Importadoras", href: "#casos" },
    { t: "Comercio", href: "#casos" },
  ] },
  { h: "Empresa", items: [
    { t: "Servicios", href: "#soluciones" },
    { t: "Tecnología", href: "#tecnologia" },
    { t: "Casos", href: "#casos" },
    { t: "Contacto", href: "#contacto" },
  ] },
];

function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <Logo light size={28} />
          <p>Estudio digital. Diseñamos y desarrollamos sitios web, aplicaciones móviles y sistemas a medida para empresas.</p>
          <a className="footer__mail" href="mailto:dev@staminex.net"><Icon name="mail" size={16} /> dev@staminex.net</a>
        </div>
        <div className="footer__cols">
          {FOOT_COLS.map((c) => (
            <div key={c.h} className="footer__col">
              <h4>{c.h}</h4>
              <ul>{c.items.map((it) => <li key={it.t}><a href={it.href}>{it.t}</a></li>)}</ul>
            </div>
          ))}
          <div className="footer__col">
            <h4>Contacto</h4>
            <ul>
              <li><a href="mailto:dev@staminex.net">dev@staminex.net</a></li>
              <li><a href="#contacto">Conversemos</a></li>
              <li><a href="whatsapp-api.html">WhatsApp Cloud API</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div className="container footer__bottom">
        <span>© 2026 STAMINEX. Todos los derechos reservados.</span>
        <div className="footer__legal">
          <a href="privacy.html">Políticas de privacidad</a>
          <a href="privacy.html#terminos">Términos</a>
        </div>
      </div>
    </footer>
  );
}

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