// Middle sections: Stats, Niches, Services, Trust, Founder
const { useEffect: useEffM, useRef: useRefM, useState: useStateM } = React;

/* ─────────────────────────────────────────────────────────────
   Manifesto — En Kinetix AI Systems · ejemplos en directo
   ───────────────────────────────────────────────────────────── */

const EXAMPLES = [
  {
    n: "01",
    tag: "AUDITORÍA · LLAMADAS",
    title: "Cuántas llamadas pierdes — y cuándo",
    body: "Medimos las que entran, las que tu equipo no coge, las franjas críticas (noches, fines de semana, horario de gabinete) y el porcentaje recuperable.",
  },
  {
    n: "02",
    tag: "AUDITORÍA · AGENDA",
    title: "Tu tasa real de no-shows",
    body: "Analizamos la ocupación, los huecos sin vender y los costes ocultos por citas no presentadas. Ponemos números a algo que ahora no estás midiendo.",
  },
  {
    n: "03",
    tag: "AUDITORÍA · CAPTACIÓN",
    title: "De dónde te vienen (y por dónde se escapan)",
    body: "Revisamos Instagram, web, ficha de Google y resto de canales. Detectamos dónde se enfrían los leads y cuánto te cuesta cada uno.",
  },
  {
    n: "04",
    tag: "AUDITORÍA · OPERATIVA",
    title: "Las horas que tu equipo malgasta",
    body: "Mapeamos las tareas repetitivas que un sistema haría mejor: recordatorios, presupuestos, seguimientos, reagendamientos. Calculamos el coste por hora real.",
  },
];

function ManifestoSection() {
  return (
    <section className="section" id="somos" style={{ paddingTop: 60 }}>
      <div className="shell">
        <div className="manifesto-lead reveal">
          <h2>
            En <span className="metal">Kinetix AI Systems</span> no vendemos IA enlatada.{" "}
            <span className="serif">Nos adaptamos a tu clínica.</span>
          </h2>
          <p>
            No hay dos clínicas iguales. Por eso siempre empezamos por una{" "}
            <strong>auditoría a medida</strong>: medimos tus dolores reales,
            cuantificamos qué te cuestan y diseñamos contigo el sistema que los
            resuelve. Lo implantamos a cuatro manos. Iteramos cada mes.
          </p>
        </div>

        <div className="examples-grid">
          {EXAMPLES.map((ex, i) => (
            <div className="example glass reveal" key={i}>
              <div className="example-stamp">
                <span className="dot" />
                <span className="num">{ex.n}</span>
              </div>
              <span className="example-tag">{ex.tag}</span>
              <h3>{ex.title}</h3>
              <p>{ex.body}</p>
            </div>
          ))}
        </div>

        <p className="manifesto-foot reveal">
          De ahí sale un plan accionable, con precios cerrados y métricas medibles.
          Si te encaja, lo construimos juntos. Si no, te llevas la información de
          todas formas.
        </p>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Stats — "Los números que tu clínica no ve"
   ───────────────────────────────────────────────────────────── */

function StatCard({ value, label, source, finalNum }) {
  const numRef = useRefM(null);
  useEffM(() => {
    if (!numRef.current) return;
    let started = false;
    const el = numRef.current;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          if (typeof finalNum === "number") {
            const start = performance.now();
            const dur = 1500;
            const suffix = (value.match(/[^\d]+$/) || [""])[0];
            const tick = (now) => {
              const t = Math.min((now - start) / dur, 1);
              const eased = 1 - Math.pow(1 - t, 3);
              el.textContent = Math.round(finalNum * eased) + suffix;
              if (t < 1) requestAnimationFrame(tick);
              else el.textContent = value;
            };
            requestAnimationFrame(tick);
          } else {
            el.textContent = value;
          }
          obs.disconnect();
        }
      });
    }, { threshold: 0.5 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [value, finalNum]);

  return (
    <div className="stat glass reveal">
      <div className="stat-num" ref={numRef}>0</div>
      <div className="stat-body">
        <div className="stat-label">{label}</div>
        <div className="stat-src">{source}</div>
      </div>
    </div>
  );
}

function StatsSection() {
  return (
    <section className="section" id="numeros">
      <div className="shell">
        <div className="section-header reveal">
          <span className="eyebrow">DATOS · SECTOR · ESPAÑA</span>
          <h2>Los números que tu clínica no ve.</h2>
          <p>
            La operativa de una clínica privada filtra dinero todos los días.
            La buena noticia: cada uno de estos números tiene un sistema detrás que lo arregla.
          </p>
        </div>

        <div className="stats">
          <StatCard
            value="40%"
            finalNum={40}
            label="de las llamadas a clínicas privadas no se responden."
            source="Doctoralia"
          />
          <StatCard
            value="18–22%"
            label="tasa media de no-shows en clínicas dentales españolas."
            source="Hellomatik, 2024"
          />
          <StatCard
            value="2.500–7.500 €"
            label="lo que pierde de media al mes una clínica por citas no presentadas."
            source="Klinikare, Libertad Digital 2025"
          />
          <StatCard
            value="78%"
            finalNum={78}
            label="de las ventas se las lleva la empresa que responde primero."
            source="Lead Connect · InsideSales"
          />
        </div>

        <p className="bridge reveal">
          No te falta marketing. <em>Te falta sistema.</em>
          {" "}La IA no es la solución porque sea trendy — lo es porque tu clínica ya está perdiendo dinero ahora mismo, mientras lees esto.
        </p>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Niches — 5 sectores interactivos
   ───────────────────────────────────────────────────────────── */

const NICHES = [
  {
    icon: <Icons.Smile />, title: "Clínicas Dentales",
    sub: "El 51% de la población no fue al dentista en 2022. La agenda con huecos pesa más que la falta de leads.",
    bullets: [
      "Pacientes que cancelan a última hora.",
      "Agendas con huecos del 18%.",
      "Llamadas en hora de gabinete sin respuesta.",
    ],
  },
  {
    icon: <Icons.Sparkles />, title: "Clínicas Estéticas",
    sub: "+7.000 centros con unidades de medicina estética. Récord de aperturas en 2023.",
    bullets: [
      "Leads de Instagram que se enfrían.",
      "Presupuestos sin seguimiento.",
      "Reservas nocturnas no atendidas.",
    ],
  },
  {
    icon: <Icons.Scissors />, title: "Injerto Capilar",
    sub: "Tickets de 3.000–7.000 €. Cada lead perdido es una venta de varios miles.",
    bullets: [
      "Leads internacionales sin respuesta en su zona horaria.",
      "WhatsApp comercial saturado.",
      "Embudo sin trazabilidad real.",
    ],
  },
  {
    icon: <Icons.Footprints />, title: "Podología",
    sub: "10.247 podólogos colegiados. +204% en 20 años. Mercado en plena expansión.",
    bullets: [
      "Pacientes recurrentes que no vuelven.",
      "Recordatorios manuales que comen 8 h/semana.",
      "Ficha de Google sin reseñas activas.",
    ],
  },
  {
    icon: <Icons.Activity />, title: "Fisioterapia",
    sub: "71.638 fisios colegiados. El 74,6% son menores de 45 — colectivo joven y digital.",
    bullets: [
      "Bonos sin renovar.",
      "No-shows del 12–15%.",
      "Captación 100% boca a boca.",
    ],
  },
];

function NichesSection() {
  return (
    <section className="section" id="sectores">
      <div className="shell">
        <div className="section-header reveal">
          <span className="eyebrow">SECTORES · 5 NICHOS</span>
          <h2>Para qué clínicas trabajamos.</h2>
          <p>
            Conocemos la operativa, los KPIs y el copy de cada vertical. Hover sobre cada tarjeta
            para ver los cuellos de botella que solemos atacar primero.
          </p>
        </div>

        <div className="niches">
          {NICHES.map((n, i) => (
            <div className="niche glass reveal" key={i} data-magnetic>
              <div className="niche-glow" />
              <div className="niche-icon">{n.icon}</div>
              <h3>{n.title}</h3>
              <p className="niche-sub">{n.sub}</p>
              <div className="niche-reveal">
                {n.bullets.map((b, j) => <span key={j}>{b}</span>)}
              </div>
            </div>
          ))}

          <div className="niche-cta reveal">
            <p>
              <strong>¿Tu clínica no encaja en uno de estos cinco nichos?</strong><br/>
              Trabajamos también con fertilidad, oftalmología, dermatología, psicología, veterinaria premium
              y otros centros sanitarios privados. Si gestionas pacientes y agenda, encajamos.
            </p>
            <JuicyButton href="#contacto" variant="ghost">Cuéntanos qué haces</JuicyButton>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Services — 13 accordion rows
   ───────────────────────────────────────────────────────────── */

const SERVICES = [
  { tag: "ENTRADA", title: "Auditoría Kinetix",
    body: "Punto de entrada. Informe detallado de fugas de dinero y oportunidades de IA en tu clínica. Se factura. Si contratas, se descuenta del precio final.",
    bullets: ["Informe escrito", "Roadmap a 90 días", "Reembolsable"] },
  { tag: "CORE", title: "Recepcionista virtual con agente de voz IA 24/7",
    body: "Atiende, agenda y deriva. Voz natural en español con latencia inferior a 500 ms (Cartesia / ElevenLabs / OpenAI Realtime).",
    bullets: ["Latencia < 500 ms", "Multi-idioma", "Integra calendario"] },
  { tag: "CORE", title: "Recordatorios anti no-shows",
    body: "SMS, WhatsApp, email y voz, con confirmación 1-click y reagendamiento sin fricción.",
    bullets: ["1-click confirm", "Multicanal", "Reagendado automático"] },
  { tag: "GROWTH", title: "Captación de pacientes",
    body: "Funnel de ads + landings específicas por tratamiento, con tracking de cohorte hasta visita en clínica.",
    bullets: ["Meta · Google · TikTok", "Landings por tratamiento", "Atribución hasta visita"] },
  { tag: "GROWTH", title: "SEO local + GEO (ChatGPT / Perplexity / Gemini)",
    body: "Aparecer en la búsqueda tradicional y también en las respuestas de IA. Estructura answer-first, schema.org y llms.txt.",
    bullets: ["Schema MedicalBusiness", "llms.txt", "FAQPage"] },
  { tag: "CREATIVE", title: "AI UGC ads",
    body: "Creatividades de vídeo con avatares y voces IA, listas para Meta y TikTok. Iteración semanal.",
    bullets: ["Avatares IA", "Voces ES", "Test semanal"] },
  { tag: "OPS", title: "Automatización de procesos",
    body: "n8n, Make o Zapier conectando todo tu stack. Sin caja negra: te entregamos los flows documentados.",
    bullets: ["n8n · Make · Zapier", "Documentado", "Self-host opcional"] },
  { tag: "OPS", title: "CRM hecho a medida",
    body: "Pipeline de pacientes, recuperación de leads dormidos, scoring por intención y valor.",
    bullets: ["Pipeline", "Scoring", "Lead reactivation"] },
  { tag: "OPS", title: "Asistentes IA internos",
    body: "Para tu equipo: redacción, resúmenes, soporte interno, presupuestos en lenguaje natural.",
    bullets: ["Redacción", "Resúmenes", "Presupuestos"] },
  { tag: "WEB", title: "Diseño y rediseño web",
    body: "Webs que cargan rápido y convierten. Como esta. Performance ≥ 90 Lighthouse, accesibilidad AA.",
    bullets: ["Next.js / Astro", "LCP < 2.5 s", "WCAG AA"] },
  { tag: "WEB", title: "Optimización de ficha Google + directorios",
    body: "Doctoralia, Top Doctors, Trustpilot, Google Business Profile. NAP consistente y categorías correctas.",
    bullets: ["GBP optimizada", "NAP unificado", "Directorios verticales"] },
  { tag: "BRAND", title: "Gestión de reseñas",
    body: "Captura activa post-visita + respuesta personalizada + monitoreo de reputación online.",
    bullets: ["Captura post-visita", "Respuestas con IA", "Alertas"] },
  { tag: "BRAND", title: "Email & WhatsApp marketing + contenido",
    body: "Newsletters, flows de nurturing, contenido orgánico para Instagram y TikTok. Calendario mensual.",
    bullets: ["Flows automation", "Calendario mensual", "Reportes"] },
];

function ServicesSection() {
  const [active, setActive] = useStateM(0);
  const [paused, setPaused] = useStateM(false);
  const len = SERVICES.length;

  // Autoplay: ~7 s per slide, paused on hover
  useEffM(() => {
    if (paused) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = setInterval(() => setActive((a) => (a + 1) % len), 5000);
    return () => clearInterval(id);
  }, [paused, len]);

  // Keyboard navigation
  useEffM(() => {
    const onKey = (e) => {
      if (e.key === "ArrowRight") setActive((a) => (a + 1) % len);
      if (e.key === "ArrowLeft")  setActive((a) => (a - 1 + len) % len);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [len]);

  const posFor = (i) => {
    let d = i - active;
    if (d > len / 2)  d -= len;
    if (d < -len / 2) d += len;
    if (d === 0) return "0";
    if (d === -1 || d === 1) return String(d);
    if (d === -2 || d === 2) return String(d);
    return "far";
  };

  const go = (dir) => setActive((a) => (a + dir + len) % len);

  return (
    <section
      className="section"
      id="servicios"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="shell">
        <div className="section-header reveal">
          <span className="eyebrow">SERVICIOS · 13</span>
          <h2>Lo que hacemos.</h2>
          <p>Pasa por cada tarjeta a tu ritmo. Avanzan solas, o usa las flechas / las teclas ←→.</p>
        </div>

        <div className="svc-carousel reveal">
          <div className="svc-counter">
            <span className="cur">{String(active + 1).padStart(2, "0")}</span>
            {" / "}{String(len).padStart(2, "0")}
          </div>

          <div className="svc-track">
            {SERVICES.map((s, i) => (
              <div
                key={i}
                className="svc-card"
                data-pos={posFor(i)}
                onClick={() => setActive(i)}
              >
                <div className="svc-card-head">
                  <div className="svc-card-num">{String(i + 1).padStart(2, "0")}</div>
                  <div className="svc-card-tag">{s.tag}</div>
                </div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
                <ul>{s.bullets.map((b, j) => <li key={j}>{b}</li>)}</ul>
              </div>
            ))}
          </div>

          <div className="svc-controls">
            <button className="svc-arrow prev" onClick={() => go(-1)} aria-label="Anterior">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
            </button>
            <button className="svc-arrow next" onClick={() => go(1)} aria-label="Siguiente">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg>
            </button>
          </div>

          <div className="svc-dots">
            {SERVICES.map((_, i) => (
              <button
                key={i}
                className={"svc-dot" + (active === i ? " active" : "")}
                onClick={() => setActive(i)}
                aria-label={`Ir al servicio ${i + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Process — dedicated section
   ───────────────────────────────────────────────────────────── */

const PROCESS_STEPS = [
  {
    title: "Café virtual",
    meta: "15 MIN · GRATIS",
    body: "Videollamada de 15 min para entender tu clínica y ver si encajamos. Sin venta encubierta.",
  },
  {
    title: "Auditoría a medida",
    meta: "7-10 DÍAS · DE PAGO",
    body: "Auditamos tus números, fugas y oportunidades. Te entregamos un plan accionable por escrito.",
  },
  {
    title: "Plan + propuesta cerrada",
    meta: "1-2 DÍAS",
    body: "Propuesta con precios cerrados, plazos y métricas medibles. Sin sorpresas. La auditoría se descuenta si firmas.",
  },
  {
    title: "Implantación y optimización",
    meta: "2-4 SEMANAS · LUEGO MENSUAL",
    body: "Montamos los sistemas y seguimos optimizando con informe mensual. Tu equipo no toca nada técnico.",
  },
];

function ProcessSection() {
  return (
    <section className="section" id="proceso">
      <div className="shell">
        <div className="section-header reveal" style={{ marginBottom: 80 }}>
          <span className="eyebrow-dot">Cómo trabajamos</span>
          <h2 className="process-title" style={{ marginTop: 20 }}>
            Cuatro pasos. <span className="soft">Sin caja negra.</span>
          </h2>
          <p>
            Proceso transparente diseñado para que sepas en cada momento qué pasa,
            qué cuesta y qué recibes.
          </p>
        </div>

        <div className="process-grid reveal">
          {PROCESS_STEPS.map((s, i) => (
            <div className="process-step" key={i}>
              <div className="process-num">{String(i + 1).padStart(2, "0")}</div>
              <h3>{s.title}</h3>
              <div className="process-meta">{s.meta}</div>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Trust — Stack + Frontier-tech + Compliance
   ───────────────────────────────────────────────────────────── */

const STACK = [
  "OpenAI", "Anthropic", "ElevenLabs", "Cartesia",
  "Retell AI", "Vapi", "n8n", "Make",
  "Twilio", "WhatsApp", "Cal.com", "HubSpot",
  "Google", "Stripe", "GoHighLevel", "Notion",
];

const FRONTIER = [
  { name: "GPT-5",          ver: "OpenAI" },
  { name: "Claude 4.5",     ver: "Anthropic" },
  { name: "Voice Realtime", ver: "<500 ms" },
  { name: "ElevenLabs v3",  ver: "ES nativo" },
  { name: "Cartesia Sonic", ver: "Streaming" },
  { name: "Whisper v3",     ver: "STT 99%" },
];

function TrustSection() {
  return (
    <section className="section" id="confianza">
      <div className="shell">
        <div className="section-header reveal">
          <span className="eyebrow">CONFIANZA · SIN HUMO</span>
          <h2>Por qué confiar en nosotros.</h2>
          <p>Sin testimonios inventados ni logos de clientes que no existen. Esto es lo que sí podemos enseñarte hoy.</p>
        </div>

        <div className="trust-grid">
          <div className="glass trust-card reveal">
            <h3>Stack tecnológico de primer nivel</h3>
            <p className="muted">Las herramientas que componen tu sistema. Nada hecho con humo.</p>
            <div className="stack-grid">
              {STACK.map((s, i) => <div className="stack-item" key={i}>{s}</div>)}
            </div>
          </div>

          <div className="glass trust-card reveal">
            <h3>Tecnología de frontera, actualizada siempre</h3>
            <p className="muted">Construimos sobre los modelos más avanzados disponibles hoy. Cuando sale uno mejor, actualizamos tu sistema sin coste extra.</p>
            <div className="frontier-stack">
              {FRONTIER.map((f, i) => (
                <div className="frontier-row" key={i}>
                  <span className="name">{f.name}</span>
                  <span className="ver">{f.ver}</span>
                </div>
              ))}
            </div>
            <p className="frontier-foot">
              No vendemos el último <strong>buzzword</strong>. Vendemos sistemas en producción
              con métricas reales y latencias medidas.
            </p>
          </div>

          <div className="glass trust-card reveal">
            <h3>Cumplimiento y garantías</h3>
            <p className="muted">Operamos bajo la normativa española y europea.</p>
            <ul className="compliance">
              <li>RGPD · LOPDGDD</li>
              <li>Ley de Autonomía del Paciente</li>
              <li>Cifrado end-to-end</li>
              <li>Datos alojados en la UE</li>
              <li>Retención mínima</li>
              <li>Auditoría reembolsable si contratas</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Founder
   ───────────────────────────────────────────────────────────── */

function FounderSection() {
  return (
    <section className="section" id="fundador">
      <div className="shell">
        <div className="founder">
          <div className="founder-side reveal">
            <span className="eyebrow">FUNDADOR</span>
            <div className="founder-name">
              <h2>Mauricio Leander<br/>Yanez Solórzano</h2>
              <div className="founder-role">
                Founder · Health Automation Architect
                <span className="founder-loc">Alicante · España</span>
              </div>
            </div>
            <div className="founder-socials">
              <a href={KINETIX_LINKEDIN} target="_blank" rel="noopener" data-magnetic title="LinkedIn"><Icons.LinkedIn /></a>
              <a href={`https://wa.me/34644267169`} target="_blank" rel="noopener" data-magnetic title="WhatsApp"><Icons.WhatsApp /></a>
              <a href={`mailto:info@kinetix-ai-systems.com`} data-magnetic title="Email"><Icons.Mail /></a>
            </div>
          </div>
          <div className="founder-body reveal">
            <p>
              Joven emprendedor en Alicante. Llevo años trabajando con IA aplicada
              a negocios reales — no a demos. Fundé Kinetix porque vi a demasiadas
              clínicas excelentes en su trabajo médico perdiendo dinero todos los
              días por la operativa: llamadas que no se devuelven, agendas con
              huecos, pacientes que no vuelven, marketing que no convierte.
            </p>
            <p>
              Si tienes una clínica privada y sientes que el techo no es de
              ingresos sino de horas y procesos, este sitio es para ti. Hablemos.
            </p>
            <div className="founder-signature">
              <svg viewBox="0 0 220 60" width="160" height="44" aria-hidden="true">
                <path
                  d="M8 42 C 20 22, 32 18, 38 30 S 52 50, 60 32 C 66 18, 78 12, 86 26 S 100 48, 112 30 C 122 14, 136 18, 146 32 S 168 44, 184 28 C 194 18, 206 16, 214 24"
                  fill="none"
                  stroke="url(#sigGrad)"
                  strokeWidth="1.6"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <defs>
                  <linearGradient id="sigGrad" x1="0" y1="0" x2="220" y2="0" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stopColor="#0B3A8C" />
                    <stop offset="0.5" stopColor="#2E6BFF" />
                    <stop offset="1" stopColor="#7DB9FF" />
                  </linearGradient>
                </defs>
              </svg>
              <span>— Mauricio</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ManifestoSection, StatsSection, NichesSection, ServicesSection, ProcessSection, TrustSection, FounderSection });