// sections-2.jsx — Diferencial (Infinity Loop), Casos, Filosofía, Proceso

function KDiferencial() {
  // Animate which label is "active" on the loop
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setActive((a) => (a + 1) % 6), 1600);
    return () => clearInterval(t);
  }, []);

  const labels = [
    { txt: "Estrategia", x: "16%", y: "12%" },
    { txt: "Creatividad", x: "50%", y: "6%" },
    { txt: "IA Systems", x: "84%", y: "12%" },
    { txt: "Performance", x: "84%", y: "88%" },
    { txt: "Contenido", x: "50%", y: "94%" },
    { txt: "Growth", x: "16%", y: "88%" },
  ];

  return (
    <section className="k-diff" data-screen-label="04 Diferencial">
      <div className="k-diff-text k-anim">
        <span className="k-eyebrow"><span className="k-dot" /> Diferencial</span>
        <h2 className="k-h1">No somos una agencia tradicional.</h2>
        <p className="k-body k-body-lg">
          Kapoz Lab combina creatividad humana, performance e inteligencia artificial para crear sistemas de crecimiento mucho más rápidos, estratégicos y escalables.
        </p>

        <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <CompareCol
            title="Agencia tradicional"
            tone="dim"
            items={["Contenido genérico", "Procesos lentos", "Mucha teoría", "Equipos separados", "Marketing tradicional"]}
          />
          <CompareCol
            title="Kapoz Lab"
            tone="accent"
            items={["Contenido con estrategia", "Ejecución rápida", "Growth real", "Sistema integral", "IA Marketing"]}
          />
        </div>
      </div>

      <div className="k-loop k-anim delay-2" aria-hidden="true">
        <InfinityLoop activeIdx={active} />
        {labels.map((l, i) => (
          <div
            key={l.txt}
            className={"k-loop-label" + (i === active ? " active" : "")}
            style={{ left: l.x, top: l.y, transform: "translate(-50%, -50%)" }}
          >
            {l.txt}
          </div>
        ))}
        <div className="k-loop-center" style={{ left: "50%", top: "50%", transform: "translate(-50%, -50%)" }}>
          IA Growth Studio
        </div>
      </div>
    </section>
  );
}

function CompareCol({ title, items, tone }) {
  return (
    <div style={{
      padding: "20px 4px 4px",
      borderTop: "1px solid var(--border-1)",
    }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em",
        textTransform: "uppercase",
        color: tone === "accent" ? "var(--accent)" : "var(--fg-3)",
        marginBottom: 14,
      }}>
        {title}
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {items.map((it) => (
          <li key={it} style={{
            fontSize: 14,
            color: tone === "accent" ? "var(--fg-1)" : "var(--fg-3)",
            display: "flex", alignItems: "center", gap: 8,
          }}>
            <span style={{ color: tone === "accent" ? "var(--accent)" : "var(--fg-4)" }}>
              {tone === "accent" ? "✓" : "—"}
            </span>
            {it}
          </li>
        ))}
      </ul>
    </div>
  );
}

function InfinityLoop({ activeIdx = 0 }) {
  // SVG path of an infinity / lemniscate
  // Width/height in viewBox: 600 x 360
  const D = "M 300 180 C 280 60, 80 60, 80 180 C 80 300, 280 300, 300 180 C 320 60, 520 60, 520 180 C 520 300, 320 300, 300 180 Z";
  return (
    <svg viewBox="0 0 600 360" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="loopGrad" x1="0%" y1="50%" x2="100%" y2="50%">
          <stop offset="0%" stopColor="#ffb800" stopOpacity="0.9" />
          <stop offset="50%" stopColor="#ff2d7a" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#b72cc8" stopOpacity="0.9" />
        </linearGradient>
        <linearGradient id="loopRunner" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%"   stopColor="#ffe27a" />
          <stop offset="35%"  stopColor="#ff8a1a" />
          <stop offset="70%"  stopColor="#ff2d7a" />
          <stop offset="100%" stopColor="#b72cc8" />
        </linearGradient>
        <radialGradient id="loopGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(var(--accent-rgb),0.6)" />
          <stop offset="100%" stopColor="rgba(var(--accent-rgb),0)" />
        </radialGradient>
        <filter id="loopBlur" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="2" />
        </filter>
        <filter id="loopRunnerGlow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="6" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      {/* Soft outer glow path */}
      <path
        d={D}
        fill="none"
        stroke="url(#loopGrad)"
        strokeWidth="18"
        opacity="0.22"
        filter="url(#loopBlur)"
      />
      {/* Main loop stroke */}
      <path
        d={D}
        fill="none"
        stroke="rgba(255,255,255,0.6)"
        strokeWidth="1.5"
      />

      {/* Outer wide soft trail — gives the runner a halo */}
      <path
        d={D}
        fill="none"
        stroke="url(#loopRunner)"
        strokeWidth="14"
        strokeLinecap="round"
        strokeDasharray="120 1400"
        opacity="0.35"
        style={{
          animation: "loopDash 6s linear infinite",
          filter: "blur(8px)",
        }}
      />
      {/* Bright animated runner along the path */}
      <path
        d={D}
        fill="none"
        stroke="url(#loopRunner)"
        strokeWidth="5"
        strokeLinecap="round"
        strokeDasharray="90 1400"
        opacity="1"
        style={{
          animation: "loopDash 6s linear infinite",
          filter: "drop-shadow(0 0 10px rgba(255,138,26,0.95)) drop-shadow(0 0 18px rgba(255,45,122,0.7))",
        }}
      />
      {/* Inner bright core for sparkle */}
      <path
        d={D}
        fill="none"
        stroke="#fff5d6"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeDasharray="30 1460"
        opacity="0.95"
        style={{
          animation: "loopDash 6s linear infinite",
          filter: "drop-shadow(0 0 6px rgba(255,255,255,0.9))",
        }}
      />

      <style>{`
        @keyframes loopDash {
          to { stroke-dashoffset: -1490; }
        }
      `}</style>
    </svg>
  );
}

function KCasos() {
  const cases = [
    {
      brand: "NUA",
      tag: "Marca de cuidado · DTC",
      thumbClass: "nua",
      chips: ["Estrategia TikTok", "Growth B2C", "UGC + creators", "Performance"],
      kpis: [
        { v: "4.2x", l: "ROAS Meta", accent: true },
        { v: "+280%", l: "Views 30d", accent: false },
        { v: "+38K", l: "Comunidad", accent: false },
        { v: "12.4M", l: "Vistas TikTok", accent: true },
      ],
      title: "Cómo construimos comunidad y ventas para una marca DTC con IA + UGC.",
    },
    {
      brand: "Akamai",
      tag: "Inmobiliaria · Awareness",
      thumbClass: "akamai",
      chips: ["Contenido viral", "Trends", "Estacionales", "Awareness"],
      kpis: [
        { v: "8.6M", l: "Alcance orgánico", accent: true },
        { v: "5.1x", l: "ROAS campañas", accent: false },
        { v: "+62%", l: "Inbound", accent: false },
        { v: "240K", l: "Engagement", accent: true },
      ],
      title: "Trends, contenido viral y campañas estacionales para escalar awareness inmobiliario.",
    },
  ];

  return (
    <section className="k-section" id="casos" data-screen-label="05 Casos">
      <div className="k-section-head k-anim">
        <span className="k-eyebrow"><span className="k-dot" /> Casos</span>
        <h2 className="k-h1">Resultados reales impulsados por <span className="k-grad-text">IA Marketing</span>.</h2>
      </div>

      <div className="k-cases-grid">
        {cases.map((c, i) => (
          <article key={c.brand} className={"k-case k-anim delay-" + (i + 1)}>
            <div className={"k-case-thumb " + c.thumbClass}>
              <span className="k-case-tag">{c.tag}</span>
              <span
                className="k-case-logo-kapoz"
                aria-label={c.brand}
                style={{
                  WebkitMaskImage: `url(assets/logo-${c.brand.toLowerCase()}-mask.png)`,
                  maskImage: `url(assets/logo-${c.brand.toLowerCase()}-mask.png)`,
                }}
              />
              <span className="k-case-thumb-glow" aria-hidden="true" />
            </div>
            <h3 className="k-case-title">{c.title}</h3>
            <div className="k-case-chips">
              {c.chips.map((ch) => <span key={ch} className="k-chip">{ch}</span>)}
            </div>
            <div className="k-case-kpis">
              {c.kpis.map((k) => (
                <div key={k.l} className="k-kpi">
                  <div className={"k-kpi-value" + (k.accent ? " accent" : "")}>{k.v}</div>
                  <div className="k-kpi-label">{k.l}</div>
                </div>
              ))}
            </div>
            <a href={window.B("casos/")} className="k-service-arrow" style={{ marginTop: 4 }}>
              Ver caso completo <ArrowRight size={14} />
            </a>
          </article>
        ))}
      </div>
    </section>
  );
}

function KFilosofia() {
  return (
    <section className="k-philosophy" id="filosofia" data-screen-label="06 Filosofía">
      <div className="k-philosophy-grid">
        <div className="k-philosophy-text">
          <div className="k-anim">
            <span className="k-eyebrow"><span className="k-dot" /> Filosofía</span>
          </div>
          <p className="k-philosophy-quote k-anim delay-1">
            <span className="em">El futuro del marketing es híbrido.</span>{" "}
            <span className="mute">Creemos que las mejores marcas del futuro serán las que combinen</span>{" "}
            <span className="em">creatividad humana, contenido auténtico</span>{" "}
            <span className="mute">e</span>{" "}
            <span className="accent">inteligencia artificial.</span>
          </p>
          <p className="k-body k-body-lg k-anim delay-2" style={{ marginTop: 24, maxWidth: 540 }}>
            No usamos IA para reemplazar ideas. La usamos para potenciar creatividad, estrategia y crecimiento.
          </p>
        </div>
        <div className="k-philosophy-art k-anim delay-2">
          <img src="assets/photo-jc.png" alt="Juan Carlos del Carpio" className="k-philosophy-photo" />
          <div className="k-philosophy-art-glow" aria-hidden="true" />
          <figcaption className="k-philosophy-caption">
            <strong className="k-philosophy-caption-name">Juan Carlos del Carpio</strong>
            <span className="k-philosophy-caption-role">Líder Digital · Founder, Kapoz Lab</span>
          </figcaption>
        </div>
      </div>
    </section>
  );
}

function KProceso() {
  const steps = [
    { n: "01", title: "Estrategia", body: "Entendemos tu marca y detectamos oportunidades reales de crecimiento." },
    { n: "02", title: "IA Systems", body: "Implementamos herramientas y procesos impulsados por inteligencia artificial." },
    { n: "03", title: "Content & Ads", body: "Creamos contenido y campañas orientadas a resultados, no a likes." },
    { n: "04", title: "Growth", body: "Optimizamos constantemente para escalar resultados de forma sostenida." },
  ];

  return (
    <section className="k-section" id="proceso" data-screen-label="07 Proceso">
      <div className="k-section-head k-anim">
        <span className="k-eyebrow"><span className="k-dot" /> Proceso</span>
        <h2 className="k-h1">Cómo trabajamos.</h2>
        <p className="k-body k-body-lg">
          Cuatro fases iterativas, no un funnel lineal. Cada ciclo aprende del anterior y se vuelve más afilado.
        </p>
      </div>

      <div className="k-process-grid">
        {steps.map((s, i) => (
          <div key={s.n} className={"k-step k-anim delay-" + (i + 1)}>
            <div className="k-step-num">{s.n} — fase</div>
            <h3 className="k-step-title">{s.title}</h3>
            <p className="k-step-body">{s.body}</p>
            {i < steps.length - 1 && <div className="k-step-line" />}
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { KDiferencial, KCasos, KFilosofia, KProceso, InfinityLoop, CompareCol });