// method-build.jsx — Bloques 5 (método semanal), 6 (qué construye), 7 (antes/después)

const IconRepeat = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/>
  </svg>
);
const IconTools = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" 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 IconRefresh = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>
  </svg>
);

const IconVideo = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
  </svg>
);
const IconCase = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
  </svg>
);
const IconTarget = (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"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>
  </svg>
);
const IconLive = (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="9"/><circle cx="12" cy="12" r="3" fill="currentColor"/>
  </svg>
);
const IconFeedback = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
  </svg>
);
const IconHands = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M16 11V7a4 4 0 0 0-8 0v4"/><rect x="3" y="11" width="18" height="11" rx="2"/>
  </svg>
);

function WeeklyMethod() {
  const cards = [
    { Icon: IconVideo,    n: "01", t: "Vídeos cortos",   d: "Para entender el concepto de forma clara y directa." },
    { Icon: IconCase,     n: "02", t: "Caso guiado",     d: "Para ver cómo se aplica en situaciones reales." },
    { Icon: IconTarget,   n: "03", t: "Reto práctico",   d: "Para construir algo útil desde cero." },
    { Icon: IconLive,     n: "04", t: "Sesión guiada en directo", d: "Con instructor experto en directo." },
    { Icon: IconFeedback, n: "05", t: "Revisión personalizada",   d: "Para mejorar y afinar cada entrega." },
    { Icon: IconHands,    n: "06", t: "Acompañamiento",  d: "Seguimiento personalizado durante todo el proceso." },
  ];
  return (
    <section id="metodo" className="block weekly-method" data-screen-label="05 Método" data-comment-anchor="weekly-method">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconRepeat style={{ width: 16, height: 16 }} /> Cómo funciona
        </div>
        <h2 className="h-section reveal" style={{ marginTop: 24, maxWidth: "20ch", transitionDelay: "60ms" }}>
          Un método práctico y directo.
        </h2>
        <p className="lead-p reveal" style={{ marginTop: 24, transitionDelay: "120ms" }}>
          Aprende haciendo. Al terminar, sabrá construir sus propias herramientas con IA.
        </p>

        <div className="method-grid">
          {cards.map(({ Icon, n, t, d }, i) => (
            <article className="method-card reveal" key={n} style={{ transitionDelay: `${i * 50}ms` }}>
              <div className="method-num">{n}</div>
              <div className="method-ico"><Icon /></div>
              <h4>{t}</h4>
              <p>{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)" }}>
            Cada día, un paso más hacia la <em style={{ fontStyle: "normal", color: "var(--lead)" }}>autonomía digital.</em>
          </blockquote>
        </div>
      </div>
    </section>
  );
}

const IconGraduate = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" 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 IconCalendar = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
  </svg>
);
const IconAuto2 = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
  </svg>
);
const IconWand = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M15 4V2"/><path d="M15 16v-2"/><path d="M8 9h2"/><path d="M20 9h2"/><path d="M17.8 11.8L19 13"/><path d="M15 9h0"/><path d="M17.8 6.2L19 5"/><path d="M3 21l9-9"/><path d="M12.2 6.2L11 5"/>
  </svg>
);

function WhatBuilds() {
  const cards = [
    { Icon: IconGraduate, t: "Asistente de estudio propio", d: "Un asistente personalizado para estudiar mejor cualquier asignatura." },
    { Icon: IconCalendar, t: "Sistema de estudio",  d: "Para resumir, entender y retener más en menos tiempo." },
    { Icon: IconAuto2,    t: "Automatizaciones",    d: "Tareas repetitivas que se resuelven solas." },
    { Icon: IconWand,     t: "Herramientas útiles", d: "Creadas por él mismo para resolver algo real de su día a día." },
  ];
  return (
    <section id="construir" className="block what-builds" data-screen-label="06 Qué construye" data-comment-anchor="what-builds">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconTools style={{ width: 16, height: 16 }} /> Qué construye
        </div>
        <h2 className="h-section reveal" style={{ marginTop: 24, maxWidth: "20ch", transitionDelay: "60ms" }}>
          Qué puede construir <em style={{ fontStyle: "normal", color: "var(--lead)" }}>tu hijo</em>.
        </h2>

        <div className="red-grid">
          {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 className="anchor-quote anchor-quote--light reveal" style={{ marginTop: "clamp(48px, 6vw, 72px)" }}>
          <div className="mark" aria-hidden="true" style={{ color: "var(--lead)" }}>“</div>
          <blockquote style={{ color: "var(--fg)" }}>
            El objetivo no es aprender IA. Es <em style={{ fontStyle: "normal", color: "var(--lead)" }}>aprender a crear.</em>
          </blockquote>
        </div>
      </div>
    </section>
  );
}

function BeforeAfter() {
  return (
    <section id="transformacion" className="block before-after" data-screen-label="07 Antes / Después" data-comment-anchor="before-after">
      <div className="container">
        <div className="eyebrow reveal" style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <IconRefresh style={{ width: 16, height: 16 }} /> Transformación
        </div>
        <h2 className="h-section reveal" style={{ marginTop: 24, maxWidth: "22ch", transitionDelay: "60ms" }}>
          De <em style={{ fontStyle: "normal", color: "var(--fg-subtle)" }}>usuario de tecnología</em> a <em style={{ fontStyle: "normal", color: "var(--lead)" }}>constructor con criterio</em>.
        </h2>

        <div className="ba-grid">
          <article className="ba-card ba-before reveal">
            <div className="ba-label">Antes</div>
            <h4>Usa tecnología sin entenderla.</h4>
            <p>Consume lo que otros crean, sin criterio propio. La IA le da respuestas y él las acepta. Pierde la oportunidad de pensar.</p>
            <ul className="ba-list">
              <li>Copia y pega sin entender</li>
              <li>Sin método para estudiar</li>
              <li>Depende de respuestas rápidas</li>
            </ul>
          </article>
          <div className="ba-arrow" aria-hidden="true">
            <ArrowRight />
          </div>
          <article className="ba-card ba-after reveal" style={{ transitionDelay: "120ms" }}>
            <div className="ba-label">Después</div>
            <h4>Usa tecnología con criterio y construye con ella.</h4>
            <p>Con herramientas propias y decisiones informadas. Sabe cuándo aceptar lo que la IA propone — y cuándo no.</p>
            <ul className="ba-list">
              <li>Construye su propio asistente</li>
              <li>Aplica un método práctico y directo</li>
              <li>Resuelve problemas reales con IA</li>
            </ul>
          </article>
        </div>

        <div className="anchor-quote anchor-quote--light reveal" style={{ marginTop: "clamp(48px, 6vw, 72px)" }}>
          <div className="mark" aria-hidden="true" style={{ color: "var(--lead)" }}>“</div>
          <blockquote style={{ color: "var(--fg)" }}>
            Cuando un alumno entiende esto, deja de consumir tecnología y empieza a usarla a su favor.
            Y eso <em style={{ fontStyle: "normal", color: "var(--lead)" }}>ya no vuelve atrás.</em>
          </blockquote>
        </div>
      </div>
    </section>
  );
}

window.WeeklyMethod = WeeklyMethod;
window.WhatBuilds = WhatBuilds;
window.BeforeAfter = BeforeAfter;