// narrative.jsx — Bloques 2 (por qué ahora), 3 (qué es), 4 (qué aprende)

const IconWarning = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
    <path d="M12 9v4"/><path d="M12 17h.01"/>
  </svg>
);
const IconGraduation = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/>
  </svg>
);
const IconChart = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/>
  </svg>
);

function WhyNow() {
  const rows = [
    { hoy: "Consumir contenido",                 imp: "Pensar mejor" },
    { hoy: "Usar IA sin criterio",               imp: "Resolver problemas" },
    { hoy: "Depender de respuestas rápidas",     imp: "Construir herramientas" },
    { hoy: "Hacer lo que la IA propone",         imp: "Aprender más rápido" },
  ];
  return (
    <section id="por-que-ahora" className="block why-now" data-screen-label="02 Por qué ahora" data-comment-anchor="why-now">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconWarning style={{ width: 16, height: 16 }} /> Por qué ahora
        </div>
        <h2 className="h-section reveal" style={{ maxWidth: "20ch", marginTop: 24, transitionDelay: "60ms" }}>
          Tus hijos ya están usando IA. Pero casi nadie les enseña <em style={{ fontStyle: "normal", color: "var(--lead-200)" }}>criterio</em>.
        </h2>
        <p className="lead-p reveal" style={{ marginTop: 24, transitionDelay: "120ms", color: "rgba(255,255,255,0.72)" }}>
          La usan para estudiar, crear y resolver. Pero casi ninguno ha aprendido a pensar con ella, cuestionarla o construir algo propio.
          La pregunta clave no es <em style={{ fontStyle: "normal", color: "var(--white)" }}>si</em> tu hijo usará IA. Es <em style={{ fontStyle: "normal", color: "var(--white)" }}>si sabrá usarla con criterio.</em>
        </p>

        <div className="gap-table reveal" style={{ transitionDelay: "160ms" }}>
          <div className="gap-head">
            <span className="gap-col-head no">Hoy</span>
            <span className="gap-col-head yes">Lo importante</span>
          </div>
          {rows.map((r, i) => (
            <div className="gap-row" key={i}>
              <div className="gap-cell no"><span className="ic-x">×</span> {r.hoy}</div>
              <div className="gap-cell yes"><span className="ic-c">✓</span> {r.imp}</div>
            </div>
          ))}
        </div>

        <div className="anchor-quote reveal" style={{ transitionDelay: "200ms" }}>
          <div className="mark" aria-hidden="true">“</div>
          <blockquote>
            La ventaja no estará en usar IA. Estará en saber <em style={{ fontStyle: "normal", color: "var(--lead)" }}>pensar</em> y <em style={{ fontStyle: "normal", color: "var(--lead)" }}>construir</em> con ella.
          </blockquote>
        </div>
      </div>
    </section>
  );
}

const CheckIcon = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="compare-icon" {...props}>
    <polyline points="20 6 9 17 4 12"/>
  </svg>
);
const XIcon = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="compare-icon" {...props}>
    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
  </svg>
);

function WhatIs() {
  const no  = ["Enseñamos a usar ChatGPT", "Listado de herramientas", "Teoría desconectada", "Cursillo de fin de semana"];
  const yes = ["Enseñamos a construir con IA", "Retos prácticos", "Construcción progresiva", "Programa estructurado"];
  return (
    <section id="programa" className="block what-is" data-screen-label="03 Qué es" data-comment-anchor="what-is">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconGraduation style={{ width: 16, height: 16 }} /> El programa
        </div>
        <h2 className="h-section reveal" style={{ marginTop: 24, maxWidth: "22ch", transitionDelay: "60ms" }}>
          Tu hijo aprende a <em style={{ fontStyle: "normal", color: "var(--lead)" }}>construir</em> con IA, no solo a consumir tecnología.
        </h2>

        <div className="what-is-grid">
          <div className="reveal" style={{ transitionDelay: "120ms" }}>
            <p className="lead-p">
              Programa para alumnos de 15 a 18 años. Cada día, un paso más. Cada mes, algo nuevo que sabe hacer.
              Al final del programa, un proyecto propio funcional que demuestra su capacidad real.
            </p>
            <div className="compare" style={{ marginTop: 32 }}>
              <div className="compare-col no">
                <div className="compare-head">No enseñamos solo herramientas</div>
                {no.map((t) => (
                  <div className="compare-row" key={t}><XIcon /> {t}</div>
                ))}
              </div>
              <div className="compare-col yes">
                <div className="compare-head">Enseñamos a construir con ella</div>
                {yes.map((t) => (
                  <div className="compare-row" key={t}><CheckIcon /> {t}</div>
                ))}
              </div>
            </div>
          </div>

          <div className="reveal" style={{ transitionDelay: "180ms" }}>
            <VideoPosterCard
              title="El programa explicado paso a paso."
              label="Demostración del método Generación IA"
              idLabel="Vídeo 02 · 03:42"
            />
            <p style={{ fontSize: 13, color: "var(--fg-subtle)", marginTop: 16, fontFamily: "var(--font-mono)", letterSpacing: "0.06em" }}>
              Cómo es la experiencia dentro del programa.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

const IconBook = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
  </svg>
);
const IconClock = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
  </svg>
);
const IconTool = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
  </svg>
);
const IconLightbulb = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.74V17h8v-2.26A7 7 0 0 0 12 2z"/>
  </svg>
);

function Learning() {
  const cards = [
    { Icon: IconBook,      t: "Estudiar mejor",            d: "Herramientas propias que multiplican su rendimiento académico." },
    { Icon: IconClock,     t: "Organizarse mejor",         d: "Sistemas personales para gestionar tiempo, tareas y proyectos." },
    { Icon: IconTool,      t: "Crear herramientas propias",d: "Asistentes y automatizaciones diseñadas por ellos mismos." },
    { Icon: IconLightbulb, t: "Resolver problemas reales", d: "Aplicar IA a situaciones concretas de su vida y entorno." },
  ];
  return (
    <section id="aprendizaje" className="block learning" data-screen-label="04 Qué aprende" data-comment-anchor="learning">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconChart style={{ width: 16, height: 16 }} /> Qué aprende tu hijo
        </div>
        <h2 className="h-section reveal" style={{ marginTop: 24, maxWidth: "20ch", transitionDelay: "60ms" }}>
          Un programa donde tu hijo aprende <em style={{ fontStyle: "normal", color: "var(--lead)" }}>haciendo</em>.
        </h2>

        <div className="advanced-grid">
          {cards.map(({ Icon, t, d }, i) => (
            <article className="adv-card reveal" key={t} style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="ico"><Icon /></div>
              <h4>{t}</h4>
              <p>{d}</p>
            </article>
          ))}
        </div>

        <div className="banner banner--green reveal" style={{ transitionDelay: "240ms" }}>
          <span className="banner-ico" aria-hidden="true">✓</span>
          <span><strong>No memorizan. Construyen.</strong></span>
        </div>

        <div className="anchor-quote anchor-quote--light reveal" style={{ marginTop: "clamp(40px, 5vw, 64px)", transitionDelay: "120ms" }}>
          <div className="mark" aria-hidden="true" style={{ color: "var(--lead)" }}>“</div>
          <blockquote style={{ color: "var(--fg)" }}>
            Cada día <em style={{ fontStyle: "normal", color: "var(--lead)" }}>construye algo</em> que antes no sabía hacer.
          </blockquote>
        </div>
      </div>
    </section>
  );
}

window.WhyNow = WhyNow;
window.WhatIs = WhatIs;
window.Learning = Learning;