// ESCALA — Sections part 2: Solución, Mecanismo, Qué Incluye, Para Quién, Proceso
const { useState: useState2, useEffect: useEffect2 } = React;

/* ============================================
   SOLUCIÓN — el sistema ESCALA
   ============================================ */
function Solucion() {
  return (
    <section className="section" id="sistema">
      <div className="container">
        <div className="split reverse">
          <div className="fade-in">
            <span className="eyebrow">04 · La solución</span>
            <h2 style={{marginTop: 18}}>
              ESCALA es la <span style={{color: "var(--blue-300)"}}>arquitectura</span> que tu negocio nunca tuvo.
            </h2>
            <p className="lead" style={{marginTop: 24}}>
              Conectamos tus anuncios, tu WhatsApp y tu proceso de venta en un solo
              flujo medible. Un solo tablero. Una sola fuente de verdad. Cada peso
              invertido tiene métrica, dueño y retorno.
            </p>
            <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(12px, 4vw, 32px)", marginTop: 36}}>
              <Stat val="−42%" label="Costo por lead" delta="vs benchmark"/>
              <Stat val="+3.2×" label="ROAS blended"/>
              <Stat val="14d" label="Time to first flow"/>
            </div>
          </div>

          <div className="fade-in">
            <DashboardMock/>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({val, label, delta}) {
  return (
    <div style={{display: "flex", flexDirection: "column", gap: 4}}>
      <div style={{fontFamily: "var(--font-display)", fontSize: "clamp(20px, 5vw, 32px)", fontWeight: 500, letterSpacing: "-0.025em", color: "var(--ink-1)", lineHeight: 1.1}}>
        {val} {delta && <span style={{fontSize: 12, color: "var(--money)", marginLeft: 4}}>↗</span>}
      </div>
      <div style={{fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.10em", textTransform: "uppercase", lineHeight: 1.4}}>
        {label}
      </div>
    </div>
  );
}

function DashboardMock() {
  return (
    <div className="dash">
      <div className="dash-head">
        <span>ESCALA · CONTROL TOWER</span>
        <span style={{color: "var(--money)"}}>● LIVE · 24h</span>
      </div>
      <div className="dash-body">
        <div className="kpis">
          <div className="kpi">
            <span className="label">Inversión</span>
            <span className="val">$28,400</span>
            <span className="delta">↗ +6.2%</span>
          </div>
          <div className="kpi">
            <span className="label">Conversaciones</span>
            <span className="val">412</span>
            <span className="delta">↗ +18.4%</span>
          </div>
          <div className="kpi">
            <span className="label">Ventas</span>
            <span className="val">$94,200</span>
            <span className="delta">↗ +24.0%</span>
          </div>
        </div>

        <div style={{
          padding: 18, border: "1px solid var(--line)", borderRadius: 10,
          background: "rgba(255,255,255,0.01)"
        }}>
          <div style={{display: "flex", justifyContent: "space-between", marginBottom: 12, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.1em"}}>
            <span>INGRESOS · ÚLTIMOS 30D</span>
            <span style={{color: "var(--money)"}}>+31.4%</span>
          </div>
          <Spark/>
        </div>

        <div style={{
          marginTop: 14, padding: "12px 16px", border: "1px solid var(--line)", borderRadius: 10,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", rowGap: "4px",
          fontFamily: "var(--font-mono)", fontSize: 12,
          background: "rgba(10,77,255,0.04)"
        }}>
          <span style={{color: "var(--ink-2)"}}>BEST CAMPAIGN</span>
          <span style={{color: "var(--blue-200)"}}>"Combo Familiar · CDMX" · ROAS 4.8×</span>
        </div>
      </div>
    </div>
  );
}

function Spark() {
  return (
    <svg className="spark" viewBox="0 0 400 80">
      <defs>
        <linearGradient id="spark-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#2E6BFF" stopOpacity="0.5"/>
          <stop offset="100%" stopColor="#2E6BFF" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path
        d="M 0 60 L 30 56 L 60 58 L 90 50 L 120 52 L 150 44 L 180 46 L 210 38 L 240 32 L 270 28 L 300 22 L 330 18 L 360 12 L 400 8 L 400 80 L 0 80 Z"
        fill="url(#spark-grad)"/>
      <path
        d="M 0 60 L 30 56 L 60 58 L 90 50 L 120 52 L 150 44 L 180 46 L 210 38 L 240 32 L 270 28 L 300 22 L 330 18 L 360 12 L 400 8"
        fill="none" stroke="#5C8DFF" strokeWidth="2"/>
      <circle cx="400" cy="8" r="3" fill="#5C8DFF">
        <animate attributeName="r" values="3;5;3" dur="1.6s" repeatCount="indefinite"/>
      </circle>
    </svg>
  );
}

/* ============================================
   MECANISMO — los 4 pilares
   ============================================ */
function Mecanismo() {
  const pillars = [
    {
      num: "P · 01",
      title: "Tráfico multi-canal",
      desc: "Campañas en Meta, Google, TikTok y YouTube diseñadas para generar conversaciones con intención de compra, no solo impresiones.",
    },
    {
      num: "P · 02",
      title: "Oferta irresistible",
      desc: "Construimos la oferta que tu mercado no puede rechazar: promesa clara, bonos, garantía, urgencia y diferenciación. Metodología Hormozi–Brunson.",
    },
    {
      num: "P · 03",
      title: "Landing de conversión",
      desc: "Páginas diseñadas con el dolor del cliente, la transformación deseada y prueba social. CTA directo a diagnóstico o WhatsApp.",
    },
    {
      num: "P · 04",
      title: "Automatización con IA",
      desc: "Flujos en n8n, WhatsApp API y agentes de IA que califican, responden y hacen seguimiento sin intervención manual.",
    },
    {
      num: "P · 05",
      title: "Sistema de venta y cierre",
      desc: "Guiones de WhatsApp, llamada y diagnóstico consultivo. Cada conversación tiene objetivo, siguiente paso y métrica.",
    },
    {
      num: "P · 06",
      title: "Medición ejecutable",
      desc: "Un tablero con las métricas que mueven dinero: CAC, ROAS, tasa de cierre, ticket promedio y pipeline activo.",
    },
  ];

  return (
    <section className="section" id="mecanismo">
      <div className="container">
        <div className="section-head fade-in">
          <span className="eyebrow">05 · Mecanismo único</span>
          <h2>Los 6 pilares de la arquitectura ESCALA.</h2>
          <p className="lead">
            No es una campaña. No es una agencia. Es un sistema con seis capas que
            se sostienen entre sí — tráfico, oferta, landing, IA, venta y métricas —
            diseñado para producir ingresos consistentes mes con mes.
          </p>
        </div>

        <div className="cards cols-3 fade-in">
          {pillars.map((p, i) => (
            <div className="card" key={i}>
              <div className="num">{p.num}</div>
              <div className="icon-wrap">
                <PillarIcon i={i}/>
              </div>
              <h3>{p.title}</h3>
              <p>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PillarIcon({i}) {
  const icons = [
    // Target / tráfico
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/>
    </svg>,
    // Star / oferta
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>,
    // Layout / landing
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>
    </svg>,
    // Zap / IA
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
    </svg>,
    // Chat / venta
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M21 12a8 8 0 0 1-11.5 7.2L3 21l1.8-6.5A8 8 0 1 1 21 12Z"/>
    </svg>,
    // Bars / medición
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/>
    </svg>,
  ];
  return icons[i];
}

/* ============================================
   QUÉ INCLUYE
   ============================================ */
function QueIncluye() {
  const items = [
    { label: "FASE 01", title: "Auditoría de arquitectura", desc: "Mapeamos cómo entra el dinero hoy: canales de tráfico, mensajes, ventas, automatizaciones y fugas. Sale un diagnóstico con las prioridades de mayor impacto." },
    { label: "FASE 02", title: "Arquitectura de oferta", desc: "Construimos la oferta que tu mercado no puede ignorar: promesa, bonos, garantía y diferenciación. Basado en la metodología de Alex Hormozi y Russell Brunson." },
    { label: "FASE 03", title: "Sistema de captación", desc: "Campañas en Meta, Google, TikTok o YouTube — según el canal de mayor impacto para tu giro. Anuncios diseñados para generar conversaciones, no clics vacíos." },
    { label: "FASE 04", title: "Landing de conversión", desc: "Página de aterrizaje con el dolor, la transformación y la prueba social de tu cliente ideal. CTA directo a diagnóstico o WhatsApp." },
    { label: "FASE 05", title: "Automatización con IA", desc: "Flujos en n8n, WhatsApp API y agentes de IA para seguimiento, calificación y respuesta automática. Leads que no se enfrían aunque no estés disponible." },
    { label: "FASE 06", title: "Playbook de ventas", desc: "Guiones de WhatsApp, llamada y diagnóstico consultivo para cerrar sin depender del talento individual. Cada conversación tiene un objetivo y un siguiente paso." },
    { label: "FASE 07", title: "Tablero de control", desc: "Un solo dashboard con inversión, pipeline, tasa de cierre y retorno. Decisiones basadas en datos, no en sensaciones." },
  ];

  return (
    <section className="section" id="incluye">
      <div className="container">
        <div className="section-head fade-in">
          <span className="eyebrow">06 · Qué incluye</span>
          <h2>Seis bloques. Una sola arquitectura.</h2>
          <p className="lead">
            Cada bloque resuelve una capa específica del problema. Implementados en
            orden, generan un sistema autosuficiente que sigue funcionando aunque
            tú estés fuera del negocio.
          </p>
        </div>

        <div className="includes fade-in">
          {items.map((it, i) => (
            <div className="include" key={i}>
              <span className="label">{it.label}</span>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   PARA QUIÉN — casos de uso
   ============================================ */
function ParaQuien() {
  const cases = [
    { tag: "NEGOCIOS LOCALES · SERVICIOS", title: "Restaurantes, ópticas, spas, belleza, automotriz", note: "Campañas que generan pedidos, agendas y citas confirmadas — con seguimiento que cierra." },
    { tag: "TURISMO · EXPERIENCIAS",       title: "Tours, hospedaje, dive centers, renta de autos", note: "Reservas que se cierran por mensaje, con automatización que responde en minutos, no en horas." },
    { tag: "INFOPRODUCTORES · COACHES",    title: "Cursos, mentoría, consultoría y formación online", note: "Embudos que convierten contenido y tráfico frío en clientes pagadores con diagnóstico como mecanismo de venta." },
    { tag: "ECOMMERCE · RETAIL",           title: "Tiendas locales, marcas de producto y comercio online", note: "Campañas con catálogo, retargeting y WhatsApp como canal de cierre para aumentar el ticket promedio." },
  ];
  return (
    <section className="section" id="paraquien">
      <div className="container">
        <div className="section-head fade-in">
          <span className="eyebrow">07 · Para quién</span>
          <h2>Para negocios que ya venden —<br/>y quieren <span style={{color: "var(--blue-300)"}}>sistemas que escalen</span>.</h2>
        </div>

        <div className="cards cols-2 fade-in">
          {cases.map((c, i) => (
            <div className="card" key={i} style={{padding: "32px"}}>
              <div className="num">{c.tag}</div>
              <h3 style={{fontSize: 22}}>{c.title}</h3>
              <p>{c.note}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Solucion = Solucion;
window.Mecanismo = Mecanismo;
window.QueIncluye = QueIncluye;
window.ParaQuien = ParaQuien;