// Closing sections: Time-close, Contact (form + Cal embed), Footer
const { useEffect: useEffC, useRef: useRefC, useState: useStateC } = React;

/* ─────────────────────────────────────────────────────────────
   Time-close — emotional close
   ───────────────────────────────────────────────────────────── */

function TimeCloseSection() {
  const h2Ref = useRefC(null);
  useEffC(() => {
    const el = h2Ref.current;
    if (!el) return;
    const spans = el.querySelectorAll(".animate");
    spans.forEach((span) => {
      const fullText = span.textContent;
      span.textContent = "";
      const parts = fullText.split(/(\s+)/);
      let i = 0;
      parts.forEach((part) => {
        if (/^\s+$/.test(part)) {
          span.appendChild(document.createTextNode(part));
        } else {
          const s = document.createElement("span");
          s.textContent = part;
          s.style.display = "inline-block";
          s.style.opacity = "0";
          s.style.transform = "translateY(18px)";
          s.style.transition = `opacity 720ms cubic-bezier(0.16,1,0.3,1) ${i * 80}ms, transform 720ms cubic-bezier(0.16,1,0.3,1) ${i * 80}ms`;
          span.appendChild(s);
          i++;
        }
      });
    });
    const playReveal = () => {
      el.querySelectorAll(".animate span").forEach((s) => {
        s.style.opacity = "1";
        s.style.transform = "none";
      });
    };
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { playReveal(); obs.disconnect(); }
      });
    }, { threshold: 0.2 });
    obs.observe(el);
    const safety = setTimeout(playReveal, 2500);
    return () => { obs.disconnect(); clearTimeout(safety); };
  }, []);

  return (
    <section className="time-close">
      <div className="shell inner">
        <div className="time-eyebrow reveal">
          <span className="dash" />
          MANIFIESTO · EL CIERRE DE MAURICIO
          <span className="dash" />
        </div>

        <h2 ref={h2Ref}>
          <span className="animate line-1">No instalamos software.</span>
          <br />
          <span className="animate line-2">Te devolvemos el tiempo.</span>
        </h2>

        <p className="lead reveal">
          El dinero se puede recuperar. El tiempo, no. Cada hora que pasas haciendo
          una tarea que un sistema podría hacer por ti es una hora que le robas a tu
          clínica, a tu familia o a tu descanso.
        </p>

        <p className="lead reveal">
          No estamos aquí solo para optimizar una clínica. Estamos aquí para
          devolverte el recurso más valioso que tienes. Forma parte del grupo de
          clínicas que decidió dejar de apagar fuegos{" "}
          <a href="#contacto"><strong>para empezar a liderar</strong></a>.
        </p>

        <div className="time-signoff reveal">
          <span className="dash" />
          MAURICIO LEANDER · FUNDADOR KINETIX
          <span className="dash" />
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Contact — form + WhatsApp card (no calendar)
   ───────────────────────────────────────────────────────────── */

const KINETIX_WHATSAPP = "34644267169";
const KINETIX_WA_URL = `https://wa.me/${KINETIX_WHATSAPP}`;
const KINETIX_LINKEDIN = "https://www.linkedin.com/in/kinetix-ai-systems";
const KINETIX_EMAIL = "info@kinetix-ai-systems.com";
const KINETIX_WEBHOOK = "https://kinetix-ai-n8n.6f1bur.easypanel.host/webhook/kinetix-lead";

function buildWaLink(data) {
  const lines = [
    "Hola Mauricio, te escribo desde la web de Kinetix.",
    "",
    `· Nombre: ${data.name}`,
    `· Teléfono: ${data.phone}`,
    data.email ? `· Email: ${data.email}` : null,
    `· Tipo de clínica: ${data.clinic}`,
    `· Profesionales: ${data.size}`,
    `· Mayor cuello de botella: ${data.bottleneck}`,
    "",
    "Me gustaría reservar la auditoría de 60 minutos.",
  ].filter(Boolean).join("\n");
  return `${KINETIX_WA_URL}?text=${encodeURIComponent(lines)}`;
}

function WhatsAppCard() {
  return (
    <div className="wa-card glass reveal">
      <div className="wa-head">
        <div className="wa-avatar"><Icons.WhatsApp /></div>
        <div>
          <strong>Hablamos por WhatsApp</strong>
          <span>Te respondemos en menos de 1 h en horario laboral</span>
        </div>
      </div>

      <div className="wa-info">
        <div className="wa-info-row">
          <span className="wa-label">DURACIÓN</span>
          <span className="wa-value">60 minutos · Auditoría a medida</span>
        </div>
        <div className="wa-info-row">
          <span className="wa-label">FORMATO</span>
          <span className="wa-value">Videollamada o presencial en Alicante</span>
        </div>
        <div className="wa-info-row">
          <span className="wa-label">COSTE</span>
          <span className="wa-value">Se factura · 100% reembolsable si contratas</span>
        </div>
        <div className="wa-info-row">
          <span className="wa-label">SIN HUMO</span>
          <span className="wa-value">Cero contratos eternos. Cero presentaciones de ventas.</span>
        </div>
      </div>

      <a className="juicy wide" href={KINETIX_WA_URL} target="_blank" rel="noopener" data-magnetic>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
          <Icons.WhatsApp /> Escribir por WhatsApp directo
        </span>
        <span className="arrow"><Icons.ArrowUpRight /></span>
      </a>

      <div className="wa-foot">
        <strong>+34 644 267 169</strong>
        <span>O al rellenar el formulario, abrimos WhatsApp con tu información ya escrita.</span>
      </div>
    </div>
  );
}

function ContactSection() {
  const [data, setData] = useStateC({
    name: "", phone: "", email: "",
    clinic: "Clínicas Dentales", size: "3–5",
    bottleneck: "Llamadas perdidas",
  });

  const [sent, setSent] = useStateC(false);

  const onChange = (k) => (e) => setData({ ...data, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    // Aviso instantáneo a WhatsApp vía n8n + Evolution API.
    // URLSearchParams => application/x-www-form-urlencoded (petición simple, sin preflight CORS).
    try {
      const body = new URLSearchParams({
        nombre: data.name,
        telefono: data.phone,
        email: data.email,
        clinica: data.clinic,
        profesionales: data.size,
        cuello: data.bottleneck,
      });
      fetch(KINETIX_WEBHOOK, { method: "POST", body, keepalive: true }).catch(() => {});
    } catch (_) {}
    setSent(true);
    window.open(buildWaLink(data), "_blank", "noopener");
  };

  return (
    <section className="section" id="contacto">
      <div className="shell">
        <div className="section-header reveal">
          <span className="eyebrow">CONTACTO · AUDITORÍA</span>
          <h2>Reserva tu auditoría de 60 minutos.</h2>
          <p>
            Sin compromiso. Sin presentaciones de ventas. Solo diagnóstico real
            de las fugas de tu clínica.
          </p>
        </div>

        <div className="contact-grid">
          <div className="form-card glass reveal">
            <h3>Cuéntanos algo antes</h3>
            <p className="muted">Al enviar, abrimos WhatsApp con toda tu información ya rellenada.</p>

            <form onSubmit={submit}>
              <div className="field">
                <label>Nombre y apellidos</label>
                <input required value={data.name} onChange={onChange("name")} placeholder="Tu nombre" />
              </div>
              <div className="field">
                <label>Teléfono (obligatorio)</label>
                <input
                  required
                  type="tel"
                  pattern="[\d\s+\-()]{9,}"
                  value={data.phone}
                  onChange={onChange("phone")}
                  placeholder="+34 ..."
                />
              </div>
              <div className="field">
                <label>Email (opcional)</label>
                <input type="email" value={data.email} onChange={onChange("email")} placeholder="tu@clinica.es" />
              </div>
              <div className="field">
                <label>Tipo de clínica</label>
                <select value={data.clinic} onChange={onChange("clinic")}>
                  <option>Clínicas Dentales</option>
                  <option>Clínicas Estéticas</option>
                  <option>Injerto Capilar</option>
                  <option>Podología</option>
                  <option>Fisioterapia</option>
                  <option>Otra</option>
                </select>
              </div>
              <div className="field">
                <label>Nº de profesionales</label>
                <div className="radios">
                  {["1–2", "3–5", "6–10", "+10"].map((opt) => (
                    <label key={opt} className={data.size === opt ? "active" : ""} data-magnetic>
                      <input
                        type="radio"
                        name="size"
                        value={opt}
                        checked={data.size === opt}
                        onChange={onChange("size")}
                      />
                      {opt}
                    </label>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Mayor cuello de botella ahora</label>
                <select value={data.bottleneck} onChange={onChange("bottleneck")}>
                  <option>Llamadas perdidas</option>
                  <option>No-shows</option>
                  <option>Captación</option>
                  <option>SEO / visibilidad</option>
                  <option>Operativa interna</option>
                  <option>Otro</option>
                </select>
              </div>
              <button type="submit" className="juicy wide" data-magnetic>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
                  <Icons.WhatsApp /> Enviar y abrir WhatsApp
                </span>
                <span className="arrow"><Icons.ArrowUpRight /></span>
              </button>
              {sent && (
                <p className="form-sent">
                  ✓ Recibido. Te contactamos por WhatsApp enseguida. Si no se ha abierto
                  WhatsApp, escríbenos directamente al <strong>+34 644 267 169</strong>.
                </p>
              )}
            </form>
          </div>

          <WhatsAppCard />
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────── */

function Footer() {
  return (
    <footer className="foot-mini" id="footer">
      <div className="shell foot-mini-shell">
        <div className="foot-mini-top">
          <a href="#top" className="foot-mini-logo" data-magnetic>
            <span className="foot-mini-dot" />
            <span className="foot-mini-wordmark">Kinetix</span>
            <span className="foot-mini-tagline">AI Systems</span>
          </a>

          <p className="foot-mini-summary">
            Auditamos, planificamos e implantamos IA en clínicas privadas españolas —
            agente de voz 24/7, anti no-shows, captación, SEO y operativa.
          </p>
        </div>

        <div className="foot-mini-middle">
          <nav className="foot-mini-legal">
            <a href="privacy.html" data-magnetic>Política de privacidad</a>
            <span className="sep">·</span>
            <a href="privacy.html" data-magnetic>Política de cookies</a>
            <span className="sep">·</span>
            <a href="privacy.html" data-magnetic>Aviso legal</a>
          </nav>

          <div className="foot-mini-social">
            <a href={KINETIX_LINKEDIN} target="_blank" rel="noopener" data-magnetic aria-label="LinkedIn">
              <Icons.LinkedIn />
            </a>
            <a href={KINETIX_WA_URL} target="_blank" rel="noopener" data-magnetic aria-label="WhatsApp">
              <Icons.WhatsApp />
            </a>
            <a href={`mailto:${KINETIX_EMAIL}`} data-magnetic aria-label="Email">
              <Icons.Mail />
            </a>
          </div>
        </div>

        <div className="foot-mini-line" />

        <div className="foot-mini-bottom">
          <span>© {new Date().getFullYear()} Agencia MAURICIO. Todos los derechos reservados.</span>
          <span className="foot-mini-loc">Alicante · España</span>
        </div>
      </div>
    </footer>
  );
}

/* ─────────────────────────────────────────────────────────────
   Floating socials (scroll-aware)
   ───────────────────────────────────────────────────────────── */

function FloatingSocials() {
  const [state, setState] = useStateC({ visible: false, hidden: false });
  const lastY = useRefC(0);
  useEffC(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const goingDown = y > lastY.current + 4;
      const goingUp = y < lastY.current - 4;
      const visible = y > window.innerHeight * 0.8;
      setState((s) => ({
        visible,
        hidden: goingDown ? true : goingUp ? false : s.hidden,
      }));
      lastY.current = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const cls = "floating-socials" +
    (state.visible ? " visible" : "") +
    (state.hidden || !state.visible ? " hidden" : "");
  return (
    <div className={cls}>
      <a href={KINETIX_LINKEDIN} target="_blank" rel="noopener" data-magnetic title="LinkedIn"><Icons.LinkedIn /></a>
      <a href={KINETIX_WA_URL} target="_blank" rel="noopener" data-magnetic title="WhatsApp"><Icons.WhatsApp /></a>
      <a href={`mailto:${KINETIX_EMAIL}`} data-magnetic title="Email"><Icons.Mail /></a>
    </div>
  );
}

Object.assign(window, { TimeCloseSection, ContactSection, Footer, FloatingSocials });