// ESCALA — Sections part 3: Proceso, Comparación, Testimonios, FAQ, CTA
const { useState: useState3 } = React;

/* ============================================
   PROCESO — roadmap 4 semanas
   ============================================ */
function Proceso() {
  const steps = [
  {
    week: "SEMANA 01",
    title: "Diagnóstico + arquitectura",
    desc: "Auditamos tu negocio capa por capa. Identificamos las fugas y diseñamos el plan de implementación.",
    deliv: ["Mapa de flujo actual", "Auditoría de fugas", "Plan de 30 días", "Métricas base medidas"]
  },
  {
    week: "SEMANA 02",
    title: "Oferta + landing + creatividades",
    desc: "Reformulamos tu oferta para que sea irresistible. Construimos la landing y producimos los anuncios por canal.",
    deliv: ["Oferta reformulada", "Landing de conversión", "3-5 ángulos por canal", "Plantillas de WhatsApp y cierre"]
  },
  {
    week: "SEMANA 03",
    title: "Lanzamiento + automatización",
    desc: "Activamos campañas, instalamos la landing, conectamos automatizaciones con IA y capacitamos al equipo en el playbook de cierre.",
    deliv: ["Campañas en vivo", "Tablero ESCALA conectado", "Flujos de IA activos", "Equipo capacitado"]
  },
  {
    week: "SEMANA 04+",
    title: "Optimización continua",
    desc: "Iteramos sobre datos reales. Escalamos lo que funciona, cortamos lo que no. Ritmo de revisión semanal.",
    deliv: ["Reportes semanales", "Optimización de campañas", "Nuevos ángulos", "Sesiones de revisión"]
  }];


  return (
    <section className="section" id="proceso">
      <div className="container">
        <div className="section-head fade-in">
          <span className="eyebrow">08 · Proceso</span>
          <h2>De caos a sistema en 4 semanas.</h2>
          <p className="lead">
            Implementación con tiempos definidos, entregables concretos y métricas
            medibles. Sin promesas vagas — cada semana tiene un resultado verificable.
          </p>
        </div>

        <div className="roadmap fade-in">
          {steps.map((s, i) =>
          <div className="step" key={i}>
              <div className="week">{s.week}</div>
              <div>
                <h3>{s.title}</h3>
                <p className="desc">{s.desc}</p>
              </div>
              <div className="deliverable">
                <span className="dh">Entregables</span>
                <ul style={{ margin: 0, padding: 0 }}>
                  {s.deliv.map((d, j) => <li key={j}>{d}</li>)}
                </ul>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================
   COMPARACIÓN — antes/después
   ============================================ */
function Comparacion() {
  return (
    <section className="section" id="comparar">
      <div className="container">
        <div className="section-head fade-in">
          <span className="eyebrow">09 · Antes / después</span>
          <h2>Dos formas de invertir en marketing.<br />Solo una construye un activo.</h2>
        </div>

        <div className="compare fade-in">
          <div className="compare-col bad">
            <h4>✕ Sin sistema</h4>
            <Row mark="✕" text="Pruebas tácticas sueltas mes con mes" kind="bad" />
            <Row mark="✕" text="No sabes cuál anuncio realmente vende" kind="bad" />
            <Row mark="✕" text="WhatsApp sin guion, cada quien responde como puede" kind="bad" />
            <Row mark="✕" text="Leads se enfrían sin seguimiento sistemático" kind="bad" />
            <Row mark="✕" text="Reportes en Excel sin contexto accionable" kind="bad" />
            <Row mark="✕" text="Ingresos impredecibles, depende del mes" kind="bad" />
          </div>
          <div className="compare-col good">
            <h4>✓ Con ESCALA</h4>
            <Row mark="✓" text="Sistema con 6 capas: tráfico, oferta, landing, IA, venta y métricas" kind="good" />
            <Row mark="✓" text="Cada peso invertido tiene métrica y retorno — en 4 canales de tráfico" kind="good" />
            <Row mark="✓" text="Automatizaciones con IA que califican y dan seguimiento sin intervención manual" kind="good" />
            <Row mark="✓" text="Motor de seguimiento que recupera 30–40% de leads que normalmente se pierden" kind="good" />
            <Row mark="✓" text="Tablero único con las métricas que mueven dinero" kind="good" />
            <Row mark="✓" text="Ingresos predecibles, escalables y documentados" kind="good" />
          </div>
        </div>
      </div>
    </section>);

}

function Row({ mark, text, kind }) {
  return (
    <div className="row">
      <span className="mark">{mark}</span>
      <span>{text}</span>
    </div>);

}

/* ============================================
   TESTIMONIOS
   ============================================ */
function Testimonios() {
  const tests = [
  {
    quote: "Con Eduardo y el sistema ESCALA dejamos de ver las promociones como simples descuentos. Nos ayudó a convertir nuestras pizzas, combos y entregas a domicilio en ofertas más atractivas para generar más pedidos por WhatsApp. La estrategia fue clara: mejores anuncios, mejor mensaje y una comunicación más directa para vender.",
    name: "Pizzería Juniors",
    where: "Cozumel",
    ini: "PJ"
  },
  {
    quote: "Eduardo nos ayudó a comunicar mejor lo que realmente nos hace diferentes: comida regional auténtica, hecha al momento y con tradición. La estrategia no se enfocó solo en publicar comida, sino en crear mensajes que despertaran antojo, confianza y ganas de reservar.",
    name: "Los Moros del Morrito",
    where: "Cozumel",
    ini: "MM"
  },
  {
    quote: "Con ESCALA entendimos que no solo vendemos lentes, vendemos confianza, asesoría y salud visual. Eduardo nos ayudó a estructurar campañas, mensajes y una comunicación más clara para atraer personas interesadas en cuidar su vista y agendar una valoración.",
    name: "Ópticas Clarissa",
    where: "Quintana Roo",
    ini: "OC"
  },
  {
    quote: "En un negocio turístico, responder rápido y comunicar bien la experiencia es clave. Eduardo nos ayudó a presentar mejor nuestros tours, mejorar los mensajes por WhatsApp y crear una estrategia más clara para generar confianza antes de la reservación.",
    name: "Sultán del Mar Tours",
    where: "Cozumel",
    ini: "SM"
  },
  {
    quote: "Antes mostrábamos el servicio, pero no comunicábamos toda la transformación que recibía el auto. Eduardo nos ayudó a vender mejor el resultado completo: limpieza profunda, protección, renovación y cuidado. La estrategia hizo que el servicio se percibiera con mucho más valor.",
    name: "Detallado Automotriz",
    where: "Cozumel",
    ini: "DA"
  },
  {
    quote: "Eduardo nos ayudó a convertir nuestros servicios de uñas y belleza en mensajes más claros y atractivos para nuestras clientas. No se trató solo de subir fotos bonitas, sino de comunicar deseo, confianza y facilidad para agendar.",
    name: "BabyNails",
    where: "Playa del Carmen",
    ini: "BN"
  },
  {
    quote: "Con ESCALA empezamos a vender con más estructura. Eduardo nos ayudó a trabajar mejores ángulos, mensajes y campañas para que nuestros productos no se vieran como publicaciones sueltas, sino como ofertas pensadas para generar conversaciones con intención de compra.",
    name: "CAB Style",
    where: "Cozumel",
    ini: "CS"
  },
  {
    quote: "Eduardo nos ayudó a transformar nuestras promociones en ofertas con más impacto. La estrategia no solo buscaba mostrar hamburguesas, sino provocar antojo, urgencia y pedidos por WhatsApp. Cada anuncio tenía una intención comercial clara.",
    name: "Hamburguesería de los Chamacos",
    where: "Cozumel",
    ini: "HC"
  }];


  return (
    <section className="section" id="casos">
      <div className="container">
        <div className="section-head fade-in">
          <span className="eyebrow">10 · Casos reales</span>
          <h2>Negocios que pasaron de improvisar a tener arquitectura.</h2>
          <p className="lead">
            Restaurantes, ópticas, tours, detallado, retail. Distintos giros — el
            mismo sistema. Cada testimonio es de un cliente real.
          </p>
        </div>

        <div className="tests fade-in">
          {tests.map((t, i) =>
          <div className="test" key={i}>
              <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--blue-300)",
              letterSpacing: "0.14em"
            }}>★★★★★</div>
              <p className="quote">{t.quote}</p>
              <div className="who">
                <div className="avatar">{t.ini}</div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="where">{t.where}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Logo bar */}
      <div className="container" style={{ marginTop: 80 }}>
        <div className="logos">
          <div className="logo-cell">Pizzería Juniors</div>
          <div className="logo-cell">Los Moros del Morrito</div>
          <div className="logo-cell">Ópticas Clarissa</div>
          <div className="logo-cell">Sultán del Mar Tours</div>
          <div className="logo-cell">Detallado Automotriz</div>
          <div className="logo-cell">BabyNails</div>
          <div className="logo-cell">CAB Style</div>
          <div className="logo-cell">Elite Dive Center</div>
          <div className="logo-cell">Hamburguesería de los Chamacos</div>
        </div>
      </div>
    </section>);

}

/* ============================================
   OBJECIONES
   ============================================ */
function Objeciones() {
  const objs = [
  { q: '"Ya intenté con agencias y no funcionó."', a: "Las agencias venden entregables: posts, campañas, reportes. ESCALA instala arquitectura — tráfico, IA, oferta y cierre — que sigue produciendo aunque cambies de proveedor." },
  { q: '"Mi negocio es muy pequeño todavía."', a: "Si ya tienes clientes, ya puedes sistematizar. El tamaño no importa — la repetibilidad sí. Empezamos con el canal de menor costo y mayor impacto para tu giro." },
  { q: '"No tengo presupuesto para anuncios."', a: "No empezamos con el canal más caro. Primero diagnosticamos, luego elegimos el canal de mayor retorno para tu caso. El sistema se autofinancia con los primeros cierres." },
  { q: '"No tengo tiempo para implementar otra cosa."', a: "Ese es exactamente el punto. La automatización con IA — seguimiento, calificación, respuesta — está diseñada para liberarte, no para añadirte trabajo." }];

  return (
    <section className="section" id="objeciones">
      <div className="container">
        <div className="section-head fade-in">
          <span className="eyebrow">11 · Lo que probablemente estás pensando</span>
          <h2>Las cuatro razones por las que normalmente no funciona — y por qué aquí sí.</h2>
        </div>

        <div className="cards cols-2 fade-in">
          {objs.map((o, i) =>
          <div className="card" key={i} style={{ padding: "32px" }}>
              <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11, color: "#ff8089",
              letterSpacing: "0.12em", textTransform: "uppercase"
            }}>OBJECIÓN · 0{i + 1}</div>
              <h3 style={{ fontSize: 20, marginTop: 4 }}>{o.q}</h3>
              <p>{o.a}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================
   FAQ
   ============================================ */
function FAQ() {
  const [open, setOpen] = useState3(0);
  const faqs = [
  { q: "¿Cuánto tiempo tarda en verse resultado?", a: "Las primeras conversaciones cualificadas empiezan a entrar en la semana 2–3 según el canal elegido. La métrica de ROAS estabilizada toma entre 30 y 60 días, dependiendo de la madurez del negocio." },
  { q: "¿Solo trabajan con Meta Ads?", a: "No. El sistema diagnostica cuál canal tiene mayor impacto para tu giro: Meta, Google, TikTok o YouTube. Empezamos por el de mayor retorno y escalamos según los datos." },
  { q: "¿Qué incluye la automatización con IA?", a: "Flujos en n8n, integración con WhatsApp API y agentes de IA para calificación de leads, respuesta automática y seguimiento. El nivel de automatización depende del plan elegido." },
  { q: "¿Necesito equipo de marketing interno?", a: "No. ESCALA está pensado para PYMEs sin departamento de marketing. Capacitamos a quien tú decidas para operar el sistema — y automatizamos lo que se pueda." },
  { q: "¿Funciona para negocios sin tienda online?", a: "Sí. Está diseñado para negocios que cierran por WhatsApp, llamada o presencial. El diagnóstico consultivo es el principal mecanismo de venta." },
  { q: "¿Qué inversión requiere?", a: "Hay tres niveles según el tamaño y madurez del negocio. El diagnóstico inicial es gratuito y de ahí salen las opciones que aplican a tu caso. Sin compromisos previos." }];

  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head fade-in">
          <span className="eyebrow">12 · Preguntas frecuentes</span>
          <h2>Todo lo que probablemente quieres saber.</h2>
        </div>
        <div className="faq fade-in">
          {faqs.map((f, i) =>
          <div
            key={i}
            className={`faq-item ${open === i ? "open" : ""}`}
            onClick={() => setOpen(open === i ? -1 : i)}>
            
              <div className="faq-q">
                <span>{f.q}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================
   CTA / DIAGNÓSTICO
   ============================================ */
function CTA() {
  const [formState, setFormState] = useState3("idle");
  return (
    <section className="section" id="diagnostico">
      <div className="container">
        <div className="cta-wrap fade-in">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }} className="cta-grid">
            <div>
              <span className="eyebrow">13 · Siguiente paso</span>
              <h2 style={{ marginTop: 18 }}>
                Agenda un<br />
                <span style={{ color: "var(--blue-300)" }}>diagnóstico</span>.
              </h2>
              <p className="lead" style={{ marginTop: 20 }}>
                30 minutos para mapear cómo entra el dinero a tu negocio hoy y dónde
                están las fugas. Sin compromiso. Sin pitch enlatado.
              </p>
              <div style={{
                marginTop: 32, padding: "20px 22px",
                border: "1px solid var(--line-strong)", borderRadius: 12,
                background: "rgba(10,77,255,0.04)",
                fontFamily: "var(--font-mono)", fontSize: 12, lineHeight: 1.8,
                color: "var(--ink-2)"
              }}>
                <div style={{ color: "var(--blue-200)", letterSpacing: "0.12em", marginBottom: 8 }}>QUÉ TE LLEVAS</div>
                › Mapa visual del flujo actual de tu negocio<br />
                › Las 3 fugas más costosas identificadas<br />
                › Plan de acción de 30 días, sea o no con nosotros
              </div>
            </div>

            {(formState === "idle" || formState === "sending") &&
            <form
              className="form"
              name="diagnostico"
              onSubmit={(e) => {
                e.preventDefault();
                setFormState("sending");
                var fd = new FormData(e.target);
                fetch("https://script.google.com/macros/s/AKfycbyIGVkvU2ZEvNdzgjkxSwwqxZuPA4rQfQ98C4T5L77FTJI7SNKH1gSaDvXoUbxt0faY/exec", {
                  method: "POST",
                  mode: "no-cors",
                  headers: { "Content-Type": "text/plain;charset=utf-8" },
                  body: JSON.stringify({
                    nombre: fd.get("nombre"),
                    whatsapp: fd.get("whatsapp"),
                    email: fd.get("email"),
                    tipo_negocio: fd.get("tipo_negocio"),
                    reto: fd.get("reto")
                  })
                })
                  .then(() => {
                    setFormState("success");
                    try {
                      var eventId = "lead_" + Date.now() + "_" + Math.random().toString(36).slice(2);
                      var getCookie = function (name) {
                        var m = document.cookie.match("(?:^|; )" + name + "=([^;]*)");
                        return m ? decodeURIComponent(m[1]) : undefined;
                      };
                      if (window.fbq) window.fbq("track", "Lead", {}, { eventID: eventId });
                      fetch("/api/lead", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                          event_id: eventId,
                          event_source_url: window.location.href,
                          fbp: getCookie("_fbp"),
                          fbc: getCookie("_fbc"),
                        }),
                      }).catch(function () {});
                    } catch (e) {}
                  })
                  .catch(() => setFormState("error"));
              }}>
                <div className="field">
                  <label>Nombre</label>
                  <input type="text" name="nombre" required placeholder="Tu nombre" />
                </div>
                <div className="field">
                  <label>WhatsApp</label>
                  <input type="tel" name="whatsapp" required placeholder="+52 ..." />
                </div>
                <div className="field full">
                  <label>Email</label>
                  <input type="email" name="email" required placeholder="tu@negocio.com" />
                </div>
                <div className="field full">
                  <label>Tipo de negocio</label>
                  <select name="tipo_negocio" required defaultValue="">
                    <option value="" disabled>Selecciona...</option>
                    <option>Restaurante / Delivery</option>
                    <option>Servicios locales</option>
                    <option>Turismo / Experiencias</option>
                    <option>Infoproductor / Coach</option>
                    <option>Ecommerce / Retail</option>
                    <option>Otro</option>
                  </select>
                </div>
                <div className="field full">
                  <label>¿Cuál es tu mayor reto hoy?</label>
                  <textarea name="reto" placeholder="Cuéntanos brevemente..." />
                </div>
                <button
                  type="submit"
                  className="btn btn-primary full"
                  style={{ justifyContent: "center", padding: "16px", opacity: formState === "sending" ? 0.6 : 1 }}
                  disabled={formState === "sending"}>
                  {formState === "sending" ? "Enviando..." : "Solicitar diagnóstico"}
                  {formState !== "sending" && <span className="arrow">→</span>}
                </button>
              </form>
            }

            {formState === "success" &&
            <div style={{
              border: "1px solid var(--line-strong)", borderRadius: 12,
              padding: 32, background: "rgba(45,212,152,0.04)",
              display: "flex", flexDirection: "column", gap: 16
            }}>
                <div style={{ color: "var(--money)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em" }}>
                  ● SOLICITUD RECIBIDA
                </div>
                <h3 style={{ fontSize: 24 }}>¡Gracias por tu interés!</h3>
                <p>Te contactaremos lo más pronto posible para coordinar tu diagnóstico gratuito.</p>
              </div>
            }

            {formState === "error" &&
            <div style={{
              border: "1px solid rgba(255,95,109,0.3)", borderRadius: 12,
              padding: 32, background: "rgba(255,95,109,0.04)",
              display: "flex", flexDirection: "column", gap: 16
            }}>
                <div style={{ color: "#ff8089", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em" }}>
                  ● ERROR DE CONEXIÓN
                </div>
                <h3 style={{ fontSize: 24 }}>Hubo un problema al enviar</h3>
                <p>Verifica tu conexión e intenta de nuevo, o escríbenos directamente por WhatsApp.</p>
                <button
                  className="btn btn-ghost"
                  style={{ width: "fit-content" }}
                  onClick={() => setFormState("idle")}>
                  Intentar de nuevo
                </button>
              </div>
            }
          </div>
        </div>
      </div>


      <style>{`
        @media (max-width: 900px) {
          .cta-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>);

}

window.Proceso = Proceso;
window.Comparacion = Comparacion;
window.Testimonios = Testimonios;
window.Objeciones = Objeciones;
window.FAQ = FAQ;
window.CTA = CTA;