// ─── SECTIONS B: Method, Differentiator, ROI, Platforms ────────────────

// ─── METHOD ────────────────────────────────────────────────────────────
function Method() {
  const steps = [
    {
      n: "01",
      when: "Día 1 · 60 minutos",
      title: <>Entender tu negocio <em>de verdad.</em></>,
      desc: "Sin formulario de onboarding ni deck genérico. Una llamada en la que me cuentas a quién vendes, por qué te eligen y qué cierra el trato. Sin eso, cualquier campaña es una apuesta. Con eso, cada euro tiene destino.",
      artifact: <BriefArtifact />,
    },
    {
      n: "02",
      when: "Días 2 – 5",
      title: <>Sistema <em>activo</em> antes del viernes.</>,
      desc: "La metodología ya está construida — no la inventamos contigo. Campañas live, creatividades en aire y píxeles trackeando. Sin tres semanas de \"onboarding\" mientras tu competencia capta los clientes que tendrían que ser tuyos.",
      artifact: <SetupArtifact />,
    },
    {
      n: "03",
      when: "Semana 1",
      title: <>Primeros leads. <em>Primeras decisiones.</em></>,
      desc: "Antes de que termine la primera semana sabes coste por lead, qué perfil entra y qué mensaje resuena. Aquí no se \"madura el canal\": se mide, se ajusta, se vuelve a medir. Yo reviso tus números más veces de las que tú miras tu propio buzón.",
      artifact: <WhatsArtifact />,
    },
    {
      n: "04",
      when: "Mes 1 → ∞",
      title: <>ROI subiendo <em>mes a mes.</em></>,
      desc: "Cada semana de datos hace la siguiente más eficiente. Cada cierre alimenta a quién busca y a qué hora. No hace falta milagro: hace falta alguien analizando antes de que el problema cueste un mes entero.",
      artifact: <DashArtifact />,
    },
  ];

  return (
    <section className="section section-paper" id="metodo">
      <div className="shell">
        <div className="section-label-row">
          <div>
            <div className="section-label">
              <span className="num">03</span>
              <span className="rule" />
              Cómo trabajamos juntos
            </div>
            <h2 className="section-title reveal" style={{ marginTop: 24 }}>
              Arrancamos <em>esta semana.</em><br />
              No en tres meses.
            </h2>
          </div>
          <p className="section-lede reveal reveal-delay-1">
            La metodología ya está construida y rodada con 50+ clientes. Lo único que añadimos
            antes de arrancar es entender tu negocio. Eso lo hacemos juntos en una llamada.
          </p>
        </div>

        <div className="method-grid">
          {steps.map((s, i) => (
            <div key={i} className={`method-row reveal reveal-delay-${(i % 4) + 1}`}>
              <div className="step tabular">{s.n}</div>
              <div>
                <h3 className="title">{s.title}</h3>
                <p className="when">{s.when}</p>
              </div>
              <p className="desc">{s.desc}</p>
              <div className="artifact">{s.artifact}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── METHOD ARTIFACTS ──────────────────────────────────────────────────
function BriefArtifact() {
  return (
    <div className="artifact-card">
      <div className="head">
        <span>brief · 28 OCT 2026</span>
        <span className="head-sub">v1.2</span>
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
        <div style={{ color: "var(--terra)", fontWeight: 700, fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>cliente ideal</div>
        Despacho ley 2ª oportunidad · ticket 3.000€<br />
        Cierra con autónomos endeudados 30-55 años
      </div>
      <div style={{ height: 1, background: "var(--rule)", margin: "4px 0" }} />
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", lineHeight: 1.6 }}>
        <div style={{ color: "var(--terra)", fontWeight: 700, fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6, fontFamily: "var(--font-mono)" }}>palanca</div>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 12.5, color: "var(--ink-2)" }}>
          Segmentar por deuda &gt; 5k. Mensaje de alivio, no de "asesoramiento".
        </span>
      </div>
    </div>
  );
}

function SetupArtifact() {
  const tasks = [
    { t: "Píxel Meta", done: true },
    { t: "GA4 + GTM", done: true },
    { t: "Landing v1", done: true },
    { t: "Creatividades · 6", done: true },
    { t: "Campañas Meta", done: true },
    { t: "Google Ads search", done: true },
    { t: "Tracking llamadas", done: false },
  ];
  return (
    <div className="artifact-card">
      <div className="head">
        <span>setup checklist</span>
        <span className="live"><span className="b" />en aire</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6, fontFamily: "var(--font-display)", fontSize: 12, color: "var(--ink-2)" }}>
        {tasks.map((t, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{
              width: 14, height: 14, borderRadius: 3,
              border: `1px solid ${t.done ? "var(--terra)" : "var(--rule-strong)"}`,
              background: t.done ? "var(--terra)" : "transparent",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              color: "var(--paper)", fontSize: 10, fontWeight: 700,
            }}>{t.done ? "✓" : ""}</span>
            <span style={{ textDecoration: t.done ? "line-through" : "none", color: t.done ? "var(--ink-4)" : "var(--ink-2)" }}>{t.t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function WhatsArtifact() {
  return (
    <div className="artifact-card" style={{ background: "var(--paper-2)" }}>
      <div className="head">
        <span>whatsapp · Joel ↔ cliente</span>
        <span style={{ color: "var(--terra)" }}>10:42</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ alignSelf: "flex-start", maxWidth: "85%", background: "var(--card)", border: "1px solid var(--rule)", padding: "8px 12px", borderRadius: "12px 12px 12px 4px", fontFamily: "var(--font-display)", fontSize: 12, color: "var(--ink-2)" }}>
          Llevamos 18 leads en 5 días. Coste 5,80€ por lead. Hoy te paso 3 al CRM.
        </div>
        <div style={{ alignSelf: "flex-end", maxWidth: "85%", background: "oklch(54% 0.14 42 / 0.92)", padding: "8px 12px", borderRadius: "12px 12px 4px 12px", fontFamily: "var(--font-display)", fontSize: 12, color: "var(--paper)" }}>
          Hemos firmado dos esta mañana 🎯
        </div>
        <div style={{ alignSelf: "flex-start", maxWidth: "85%", background: "var(--card)", border: "1px solid var(--rule)", padding: "8px 12px", borderRadius: "12px 12px 12px 4px", fontFamily: "var(--font-display)", fontSize: 12, color: "var(--ink-2)" }}>
          Subo presupuesto un 25% sobre el ángulo que está cerrando.
        </div>
      </div>
    </div>
  );
}

function DashArtifact() {
  const bars = [22, 35, 28, 42, 38, 55, 48, 62, 58, 74, 68, 96];
  return (
    <div className="artifact-card">
      <div className="head">
        <span>panel · últimas 12 semanas</span>
        <span className="live"><span className="b" />en vivo</span>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 11, color: "var(--ink-4)" }}>Leads/semana</span>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, color: "var(--ink)" }}>+96</span>
      </div>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 3, height: 50, flex: 1 }}>
        {bars.map((h, i) => (
          <div key={i} style={{
            flex: 1,
            height: `${(h / 96) * 100}%`,
            background: i === bars.length - 1 ? "var(--terra)" : "var(--terra-soft)",
            borderRadius: 2,
            minHeight: 4,
          }} />
        ))}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--ink-5)" }}>
        <span>S1</span><span>S6</span><span>S12 ↑</span>
      </div>
    </div>
  );
}

// ─── DIFFERENTIATOR (VS TABLE) ─────────────────────────────────────────
function Differentiator() {
  const rows = [
    {
      topic: "Quién gestiona tu cuenta",
      sub: "El cerebro detrás del dinero",
      typical: "Un account manager que recibió tu cuenta hace dos semanas y la lleva junto a otras quince.",
      mine: "Yo. Sin gestor intermedio. La persona con la que hablas es la que ejecuta y la que decide.",
    },
    {
      topic: "Cuándo ves resultados",
      sub: "Velocidad real, no prometida",
      typical: "«Dale tres meses al algoritmo para que aprenda.» Lo que aprenden es que sigues pagando.",
      mine: "Sistema activo en 5 días. Primeros leads cualificados en la primera semana. Datos reales antes del primer cargo.",
    },
    {
      topic: "Qué se mide",
      sub: "Métricas que pagan la nómina",
      typical: "CTR, CPM, alcance. Métricas bonitas para informes de doce páginas. Nada que firme un contrato.",
      mine: "Leads cualificados, citas agendadas, contratos cerrados, ROI por euro invertido. Lo que tu contable entiende.",
    },
    {
      topic: "Cómo se ajusta lo que no funciona",
      sub: "Reacción antes de que duela",
      typical: "Reunión mensual para revisar lo del mes pasado. El daño ya está hecho.",
      mine: "Revisión diaria. Si algo no convierte en 72 horas, ya sé el motivo y ya está cambiado.",
    },
    {
      topic: "Cómo te comunicas conmigo",
      sub: "Acceso directo, sin filtros",
      typical: "Email a soporte. Respuesta en 48-72h. Reunión los martes a las 11h.",
      mine: "WhatsApp directo. Te respondo en horas, no días. Si hace falta, hablamos esta tarde.",
    },
    {
      topic: "Cuánto te cobro por cliente que no encaja",
      sub: "El riesgo es mío, no tuyo",
      typical: "Lo mismo que por uno que sí. Cobran por gestionar, no por resultado.",
      mine: "Si en la primera llamada veo que no encajas, te lo digo y te ahorras meses. No cobro por gestionar humo.",
    },
  ];

  return (
    <section className="section shell" id="diferenciador">
      <div className="section-label-row">
        <div>
          <div className="section-label">
            <span className="num">04</span>
            <span className="rule" />
            Por qué conmigo es distinto
          </div>
          <h2 className="section-title reveal" style={{ marginTop: 24 }}>
            Los datos los ven todos.<br />
            <em>Saber qué hacer con ellos</em> no.
          </h2>
        </div>
        <p className="section-lede reveal reveal-delay-1">
          Una agencia y yo tenemos las mismas plataformas y los mismos algoritmos. La diferencia está
          en quién interpreta y en quién decide rápido. Esto es lo que cambia, en concreto.
        </p>
      </div>

      <div className="reveal">
        <div className="vs-header">
          <div>Donde miran todos</div>
          <div>Lo típico</div>
          <div>Cómo lo hago yo</div>
        </div>
        <div className="vs-table">
          {rows.map((r, i) => (
            <div key={i} className="vs-row">
              <div className="topic">
                {r.topic}
                <div className="sub">{r.sub}</div>
              </div>
              <div className="typical">{r.typical}</div>
              <div className="mine">{r.mine}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── ROI TABLE ─────────────────────────────────────────────────────────
function ROITable() {
  return (
    <section className="section section-paper" id="resultados">
      <div className="shell">
        <div className="section-label-row">
          <div>
            <div className="section-label">
              <span className="num">05</span>
              <span className="rule" />
              ROI por sector
            </div>
            <h2 className="section-title reveal" style={{ marginTop: 24 }}>
              Cada euro invertido<br />
              <em>vuelve multiplicado.</em>
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 380 }}>
            <p className="section-lede reveal reveal-delay-1">
              Retornos medidos en clientes activos. No promesas: números que tus competidores
              firmaron este trimestre.
            </p>
            <p className="reveal reveal-delay-2" style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-4)", lineHeight: 1.55 }}>
              Sectores con más historial. Si el tuyo no aparece pero hay proceso de venta claro,
              el sistema se construye igual.
            </p>
          </div>
        </div>

        <div className="reveal">
          <div className="roi-table">
            <div className="roi-thead">
              <div>Sector</div>
              <div>Ticket</div>
              <div>ROI</div>
              <div>Valor / 1.000€</div>
              <div>Distribución</div>
            </div>
            {ROI_ROWS.map((r, i) => (
              <div key={i} className="roi-row">
                <div>
                  <div className="sector">{r.sector}</div>
                  <div className="ctx">{r.context}</div>
                </div>
                <div className="num tabular">{r.ticket.toLocaleString("es-ES")}€</div>
                <div className="roi tabular"><em>×</em>{r.roi}</div>
                <div className="per1k tabular">{r.per1k.toLocaleString("es-ES")}€</div>
                <div className="spark">
                  {[42, 58, 70, 64, 78, 88, r.peak].map((h, j) => (
                    <div key={j} className={`bar ${j === 6 ? "peak" : ""}`} style={{ height: `${h}%` }} />
                  ))}
                </div>
              </div>
            ))}
          </div>
          <p style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-5)", marginTop: 14, letterSpacing: "0.04em" }}>
            * Valor generado por cada 1.000€ de inversión publicitaria. Calculado sobre clientes activos durante 2025-2026.</p>
        </div>
      </div>
    </section>
  );
}

// ─── PLATFORMS ─────────────────────────────────────────────────────────
function Platforms() {
  return (
    <section className="section" id="plataformas">
      <div className="shell">
        <div className="section-label-row" style={{ marginBottom: 32 }}>
          <div>
            <div className="section-label">
              <span className="num">06</span>
              <span className="rule" />
              Canales que activo
            </div>
            <h2 className="section-title reveal" style={{ marginTop: 24, fontSize: "clamp(30px, 4vw, 52px)" }}>
              Presencia total.<br />
              Clientes desde <em>cualquier</em> canal.
            </h2>
          </div>
          <p className="section-lede reveal reveal-delay-1">
            Cada plataforma tiene su lógica. Saber cuál activar, cuándo y cómo es lo que separa
            el gasto del retorno. No vendo herramientas: vendo combinaciones que funcionan en tu sector.
          </p>
        </div>
      </div>

      <div className="shell-wide" style={{ padding: 0 }}>
        <div className="platforms-strip reveal">
          <Marquee
            items={PLATFORMS}
            gap={14}
            duration={50}
            renderItem={(p) => (
              <div className="platform-pill">
                <span className="ico" style={{ background: p.color, borderRadius: 4 }} />
                <div>
                  <div className="name">{p.name}</div>
                  <div className="sub">{p.sub}</div>
                </div>
              </div>
            )}
          />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Method, Differentiator, ROITable, Platforms });