// parents-traction.jsx — Bloques 8 (padres), 9 (tracción slim), 10 (proyecto final)

const IconUsers = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
  </svg>
);
const IconTrophy = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>
  </svg>
);
const IconTargetEyebrow = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>
  </svg>
);

function ParentsView() {
  const cards = [
    { t: "Utilidad inmediata",  d: "Aplica lo aprendido desde el primer día." },
    { t: "Evolución real",       d: "Progresos visibles y medibles a lo largo del programa." },
    { t: "Autonomía",            d: "Empieza a resolver por sí mismo sin depender constantemente de vosotros." },
    { t: "Proyectos tangibles",  d: "Resultados concretos que se pueden ver y mostrar." },
  ];
  return (
    <section id="padres" className="block parents-view" data-screen-label="08 Lo que ven los padres" data-comment-anchor="parents-view">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconUsers style={{ width: 16, height: 16 }} /> Para las familias
        </div>
        <h2 className="h-section reveal" style={{ marginTop: 24, maxWidth: "20ch", transitionDelay: "60ms" }}>
          Lo que vais a ver en vuestro hijo.
        </h2>

        <div className="banner banner--pink reveal" style={{ marginTop: 24, transitionDelay: "120ms" }}>
          <span><strong>No necesitáis entender IA</strong> para notar el cambio.</span>
        </div>

        <p className="lead-p reveal" style={{ marginTop: 24, transitionDelay: "180ms" }}>
          Lo importante para vosotros no es la tecnología. Es el <strong style={{ color: "var(--fg)" }}>impacto real en vuestro hijo</strong>.
        </p>

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

        <div className="anchor-quote anchor-quote--light reveal" style={{ marginTop: "clamp(56px, 7vw, 88px)" }}>
          <div className="mark" aria-hidden="true" style={{ color: "var(--lead)" }}>“</div>
          <blockquote style={{ color: "var(--fg)" }}>
            Como familia vais a notar progreso real, autonomía y criterio <em style={{ fontStyle: "normal", color: "var(--lead)" }}>desde el primer día.</em>
          </blockquote>
        </div>
      </div>
    </section>
  );
}

function Traction() {
  const metrics = [
    { k: "+3.000", l: "Alumnos formados." },
    { k: "Programas reales aplicados con alumnos",   l: "Con resultados reales y demostrables." },
    { k: "Experiencia educativa y tecnológica real",  l: "Experiencia construyendo tecnología y formando talento." },
  ];
  return (
    <section id="tracción" className="block traction" data-screen-label="09 Quién hay detrás" data-comment-anchor="traction">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconTrophy style={{ width: 16, height: 16 }} /> Quién hay detrás
        </div>
        <h2 className="h-section reveal" style={{ marginTop: 24, maxWidth: "20ch", transitionDelay: "60ms" }}>
          Quién hay detrás de Generación IA.
        </h2>
        <p className="lead-p reveal" style={{ marginTop: 24, transitionDelay: "120ms" }}>
          Formación en IA aplicada · Resultados medibles desde el primer día.
        </p>

        <div className="metrics-row metrics-row--three">
          {metrics.map((m, i) => (
            <div className="metric reveal" key={m.k} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="k">{m.k}</div>
              <div className="l">{m.l}</div>
            </div>
          ))}
        </div>

        <div className="anchor-quote reveal" style={{ marginTop: "clamp(48px, 6vw, 72px)", borderTop: "1px solid rgba(255,255,255,0.15)" }}>
          <div className="mark" aria-hidden="true">“</div>
          <blockquote>
            Esto no nace de una idea. <em style={{ fontStyle: "normal", color: "var(--lead)" }}>Nace de experiencia real formando talento.</em>
          </blockquote>
        </div>
      </div>
    </section>
  );
}

const IconGlobe = (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"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
  </svg>
);
const IconBotSmall = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <rect x="3" y="8" width="18" height="12" rx="3"/><circle cx="9" cy="14" r="1"/><circle cx="15" cy="14" r="1"/><line x1="12" y1="3" x2="12" y2="8"/>
  </svg>
);
const IconSystem = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
  </svg>
);
const IconBulbSolid = (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 FinalProject() {
  const cards = [
    { Icon: IconGlobe,     t: "Prototipo web funcional",          d: "Diseñado y construido por él mismo." },
    { Icon: IconBotSmall,  t: "Asistente IA propio",       d: "Entrenado para una función específica." },
    { Icon: IconSystem,    t: "Automatización útil",       d: "Que automatiza o resuelve algo real." },
    { Icon: IconBulbSolid, t: "Solución aplicada a un problema",d: "Aplicada a un problema concreto de su entorno." },
  ];
  return (
    <section id="proyecto" className="block final-project" data-screen-label="10 Proyecto final" data-comment-anchor="final-project">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconTargetEyebrow style={{ width: 16, height: 16 }} /> Proyecto final
        </div>
        <h2 className="h-section reveal" style={{ marginTop: 24, maxWidth: "22ch", transitionDelay: "60ms" }}>
          Tu hijo presenta algo <em style={{ fontStyle: "normal", color: "var(--lead)" }}>real</em> al final del programa.
        </h2>
        <p className="lead-p reveal" style={{ marginTop: 24, transitionDelay: "120ms" }}>
          Al final del programa completo, cada alumno presenta un proyecto propio funcional. No termina con teoría. Termina con evidencia.
        </p>

        <div className="banner banner--green reveal" style={{ transitionDelay: "180ms" }}>
          <span className="banner-ico" aria-hidden="true">✓</span>
          <span>Un proyecto que <strong>funciona de verdad</strong> y demuestra su capacidad real.</span>
        </div>

        <div className="red-grid" style={{ marginTop: "clamp(40px, 5vw, 56px)" }}>
          {cards.map(({ Icon, t, d }, i) => (
            <article className="red-card reveal" key={t} style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="red-card-ico"><Icon /></div>
              <h4>{t}</h4>
              <p>{d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ParentsView = ParentsView;
window.Traction = Traction;
window.FinalProject = FinalProject;