// Alquie landing page — main app
// Sections: Hero · Problem · Solution · How It Works · Pedagogical Backing
//           · For Teachers/Schools · Social Proof · Pricing · Final CTA

const { useState, useEffect, useRef } = React;

// ─── Decorative squiggles (matches reference image visual signature) ─────
const Squiggle = ({ variant = "1", color, style, className }) => {
  const colorVal = color || "var(--brand-peach)";
  const paths = {
    "1": "M2 12 Q 12 2, 22 12 T 42 12 T 62 12 T 82 12",
    "2": "M2 8 C 14 -4, 26 20, 38 8 S 62 -4, 74 8",
    "3": "M2 14 L 12 4 M 14 14 L 22 4 M 24 14 L 32 4 M 34 14 L 42 4",
    "burst": "M20 2 L20 12 M30 5 L24 14 M38 14 L28 18 M30 26 L24 18 M20 30 L20 20 M10 26 L16 18 M2 18 L12 16 M10 6 L16 14",
    "arrow-curve": "M4 30 Q 30 30, 30 14 T 60 4 M 52 0 L 60 4 L 56 12",
    "star": "M16 2 L18 12 L28 14 L18 16 L16 26 L14 16 L4 14 L14 12 Z"
  };
  const viewBoxes = {
    "1": "0 0 84 16", "2": "0 0 76 16", "3": "0 0 44 18",
    "burst": "0 0 40 32", "arrow-curve": "0 0 64 32", "star": "0 0 32 28"
  };
  return (
    <svg className={className} viewBox={viewBoxes[variant]} style={{ ...style, overflow: "visible" }} fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
      <path d={paths[variant]} stroke={colorVal} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill={variant === "star" ? colorVal : "none"} />
    </svg>
  );
};

// ─── Brand mark used in nav and footer ────────────────────────────────
const BrandMark = ({ variant = "navy", height = 38 }) => (
  <img
    src={variant === "white" ? "assets/logo-blanco.png" : "assets/logo-azul.png"}
    alt="Alquie"
    style={{ height, width: "auto", display: "block", objectFit: "contain" }}
  />
);

// ─── Top navigation ───────────────────────────────────────────────────
const Nav = () => {
  const items = [
    { label: "Plataforma", href: "#solution" },
    { label: "Pedagogía", href: "#pedagogy" },
    { label: "Para escuelas", href: "#schools" },
    { label: "Precios", href: "#pricing" }
  ];
  return (
    <nav className="ach-nav">
      <BrandMark height={42} />
      <ul className="ach-nav__links">
        {items.map(i => <li key={i.label}><a href={i.href}>{i.label}</a></li>)}
      </ul>
      <div className="ach-nav__cta">
        <a className="ach-link" href="#login">Iniciar sesión</a>
        <a className="ach-btn ach-btn--primary" href="Sign Up.html">Registrarse</a>
      </div>
    </nav>
  );
};

// ─── 1. HERO ──────────────────────────────────────────────────────────
const Hero = () => (
  <section className="ach-hero">
    <div className="ach-hero__copy">
      <div className="ach-eyebrow">
        <span className="ach-eyebrow__dot" />
        Plataforma educativa · Inspirada en RPG
      </div>
      <h1 className="ach-h1">
        Convierte tu sala de clases en una <span className="ach-h1__accent">experiencia<Squiggle variant="1" color="var(--brand-coral)" className="ach-h1__underline" /></span> de la que tus alumnos quieran ser parte.
      </h1>
      <p className="ach-lead">
        Una plataforma de aprendizaje gamificada diseñada para aumentar el engagement, la participación y los resultados reales — sin agregar complejidad a tu enseñanza.
      </p>
      <div className="ach-hero__ctas">
        <a className="ach-btn ach-btn--primary-glass ach-btn--lg" href="Sign Up.html">Empieza con Alquie</a>
        <a className="ach-btn ach-btn--glass ach-btn--lg" href="Sign Up.html">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="5 3 19 12 5 21 5 3" fill="currentColor"/></svg>
          Ver una clase en acción
        </a>
      </div>
      <div className="ach-hero__trust">
        <div className="ach-trust-stat">
          <strong>+12.000</strong>
          <span>alumnos jugando</span>
        </div>
        <div className="ach-hero__divider" />
        <div className="ach-trust-stat">
          <strong>320+</strong>
          <span>escuelas en LATAM</span>
        </div>
        <div className="ach-hero__divider" />
        <div className="ach-trust-stat">
          <strong>4.9 / 5</strong>
          <span>según docentes</span>
        </div>
      </div>
    </div>

    <div className="ach-hero__visual">
      {/* Coral gradient backdrop */}
      <div className="ach-hero__photo">
        <div className="ach-hero__photo-inner" role="img" aria-label="Estudiante sonriendo con tablet en clase">
          <Squiggle variant="burst" color="var(--brand-peach)" className="ach-hero__burst" />
          <Squiggle variant="arrow-curve" color="var(--brand-coral)" className="ach-hero__arrow" />
        </div>
      </div>

      {/* Cutout student photo over the gradient */}
      <img src="assets/photos/student-ipad.png" alt="Alumna usando Alquie en su tablet" className="ach-hero__cutout" />

      {/* Floating UI cards — pulled from real product screens */}
      <div className="ach-float-card ach-float-card--quiz">
        <div className="ach-float-card__head">
          <img src="assets/icons/quiz-pociones.png" alt="" className="ach-float-card__icon" />
          <div>
            <div className="ach-float-card__eyebrow">Quiz de Pociones</div>
            <div className="ach-float-card__title">Sesión activa · 1 / 1</div>
          </div>
        </div>
        <div className="ach-float-card__progress">
          <div className="ach-float-card__progress-fill" style={{ width: "72%" }} />
        </div>
        <div className="ach-float-card__meta">
          <span>22 / 30 alumnos respondiendo</span>
          <span className="ach-pill ach-pill--mint">+72%</span>
        </div>
      </div>

      <div className="ach-float-card ach-float-card--xp">
        <img src="assets/icons/monedas.png" alt="" className="ach-float-card__icon-lg" />
        <div>
          <div className="ach-float-card__big">+1.240</div>
          <div className="ach-float-card__sub">monedas en la clase de hoy</div>
        </div>
      </div>
    </div>
  </section>
);

// ─── 2. THE PROBLEM ───────────────────────────────────────────────────
const Problem = () => {
  const issues = [
    { t: "Engagement bajo", d: "La mayoría de los alumnos siguen la clase sin participar activamente." },
    { t: "Estudiantes pasivos", d: "Escuchar no es aprender. La participación se concentra en los mismos 4 ó 5." },
    { t: "Atención fragmentada", d: "El aula compite con notificaciones, redes y un mundo más rápido." },
    { t: "Material poco interactivo", d: "Crear actividades que enganchen toma horas que el docente no tiene." }
  ];
  return (
    <section className="ach-section ach-problem">
      <div className="ach-section__head ach-section__head--center">
        <div className="ach-eyebrow">El problema</div>
        <h2 className="ach-h2">
          Enseñar hoy compite con todo lo que <span className="ach-u-accent">distrae<Squiggle variant="1" color="var(--brand-coral)" className="ach-u-accent__line" /></span>.
        </h2>
        <p className="ach-lead ach-mw-md">
          Los docentes no necesitan más contenido. Necesitan que sus clases vuelvan a captar la atención que merecen.
        </p>
      </div>
      <div className="ach-problem__grid">
        {issues.map((i, idx) => (
          <div key={i.t} className="ach-problem__card">
            <div className="ach-problem__num">0{idx + 1}</div>
            <h3 className="ach-h4">{i.t}</h3>
            <p className="ach-body">{i.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

// ─── 3. THE SOLUTION ──────────────────────────────────────────────────
const Solution = () => {
  // Hero feature with real screenshot — the flagship mechanic
  const hero = {
    icon: "quiz-pociones.png",
    screen: "assets/screens/quiz-pociones.png",
    title: "Quiz de Pociones",
    desc: "Cada pregunta se vuelve una poción que los alumnos fabrican respondiendo bien. Feedback inmediato, racha visible, y un caldero que celebra cada acierto.",
    tag: "Mecánica destacada"
  };
  // All other mechanics — uniform grid
  const mechanics = [
    { icon: "arena.png", title: "Arena de Duelos", desc: "Dos alumnos se enfrentan en duelos rápidos de conocimiento. La clase entera observa, vota y aprende." },
    { icon: "treasure-hunt.png", title: "Treasure Hunt", desc: "Búsquedas guiadas por pistas que activan razonamiento, lectura y exploración en grupo." },
    { icon: "raidboss.png", title: "Raidboss", desc: "Toda la clase colabora para vencer a un jefe — solo se gana respondiendo bien, juntos." },
    { icon: "ranking.png", title: "Rankings y clanes", desc: "Progreso visible y pertenencia. Motivación social bien diseñada, no presión." }
  ];
  return (
    <section id="solution" className="ach-section ach-solution">
      <div className="ach-section__head">
        <div className="ach-eyebrow">La solución</div>
        <h2 className="ach-h2">
          Mecánicas de juego, <span className="ach-u-accent">objetivos pedagógicos<Squiggle variant="1" color="var(--brand-peach)" className="ach-u-accent__line" /></span>.
        </h2>
        <p className="ach-lead ach-mw-md">
          Alquie introduce sistemas estructurados de participación en el aula, diseñados específicamente para educación. Cada mecánica está al servicio del aprendizaje, no al revés.
        </p>
      </div>

      {/* Hero feature — Quiz de Pociones with full screenshot */}
      <article className="ach-feature">
        <div className="ach-feature__copy">
          <div className="ach-feature__icon">
            <img src={`assets/icons/${hero.icon}`} alt="" />
          </div>
          <span className="ach-pill ach-pill--teal">{hero.tag}</span>
          <h3 className="ach-h3">{hero.title}</h3>
          <p className="ach-body">{hero.desc}</p>
        </div>
        <div className="ach-feature__shot">
          <img src={hero.screen} alt={`${hero.title} — captura del producto`} />
          <div className="ach-feature__shot-glow" aria-hidden />
        </div>
      </article>

      {/* Other mechanics — uniform grid */}
      <div className="ach-solution__more">
        {mechanics.map(m => (
          <div key={m.title} className="ach-solution__card">
            <div className="ach-solution__icon-wrap">
              <img src={`assets/icons/${m.icon}`} alt="" />
            </div>
            <h3 className="ach-h4">{m.title}</h3>
            <p className="ach-body-sm">{m.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

// ─── 4. HOW IT WORKS ──────────────────────────────────────────────────
const HowItWorks = () => {
  const steps = [
    { n: "1", t: "Crea actividades", d: "Sube tu material o usa los planes ya armados por nivel y asignatura. 5 minutos para una clase completa.", icon: "nueva-actividad.png" },
    { n: "2", t: "Tus alumnos participan", d: "Eligen su personaje, entran al capítulo, y compiten — solos, en duelos o en clanes. Tú ves todo en vivo.", icon: "alumnos.png" },
    { n: "3", t: "El progreso se vuelve motivación", d: "Niveles, monedas y rankings hacen que el avance se sienta. La motivación deja de ser un problema.", icon: "ranking.png" }
  ];
  return (
    <section className="ach-section ach-howitworks">
      <div className="ach-section__head ach-section__head--center">
        <div className="ach-eyebrow">Cómo funciona</div>
        <h2 className="ach-h2">Tres pasos. Cero curva de aprendizaje.</h2>
      </div>
      <div className="ach-howitworks__track">
        {steps.map((s, idx) => (
          <React.Fragment key={s.n}>
            <div className="ach-howitworks__step">
              <div className="ach-howitworks__step-icon">
                <img src={`assets/icons/${s.icon}`} alt="" />
                <span className="ach-howitworks__step-num">{s.n}</span>
              </div>
              <h3 className="ach-h4">{s.t}</h3>
              <p className="ach-body">{s.d}</p>
            </div>
            {idx < steps.length - 1 && (
              <div className="ach-howitworks__connect" aria-hidden>
                <svg viewBox="0 0 140 60" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
                  <path
                    d="M4 30 Q 35 8, 70 30 T 134 30"
                    stroke="var(--brand-coral)"
                    strokeWidth="3"
                    strokeLinecap="round"
                    strokeDasharray="2 9"
                  />
                </svg>
              </div>
            )}
          </React.Fragment>
        ))}
      </div>
    </section>
  );
};

// ─── 5. PEDAGOGICAL BACKING ──────────────────────────────────────────
const Pedagogy = () => {
  const pillars = [
    {
      eb: "Motivación",
      title: "Autonomía, competencia y vínculo",
      body: "Construido sobre la Teoría de la Autodeterminación de Deci & Ryan. Los alumnos eligen camino, ven su progreso real, y pertenecen a un grupo.",
      ref: "Deci & Ryan, Self-Determination Theory"
    },
    {
      eb: "Aprendizaje activo",
      title: "Participar, no escuchar",
      body: "La evidencia es clara: la participación activa mejora retención y comprensión versus instrucción pasiva — incluso en STEM.",
      ref: "Freeman et al., 2014 · PNAS"
    },
    {
      eb: "Feedback inmediato",
      title: "Saber al instante si lo lograste",
      body: "Quizzes, duelos y raids dan respuesta en segundos. El cerebro cierra el ciclo de aprendizaje cuando importa.",
      ref: "Hattie & Timperley, The Power of Feedback"
    }
  ];
  return (
    <section id="pedagogy" className="ach-section ach-pedagogy">
      <div className="ach-pedagogy__head">
        <div className="ach-eyebrow ach-eyebrow--light">Fundamento pedagógico</div>
        <h2 className="ach-h2 ach-h2--light">
          Construido sobre <span className="ach-u-accent ach-u-accent--light ach-u-accent--nowrap">cómo aprenden<Squiggle variant="1" color="var(--brand-peach)" className="ach-u-accent__line" /></span> los estudiantes — de verdad.
        </h2>
        <p className="ach-lead ach-lead--light ach-mw-md">
          No es entretenimiento con barniz educativo. Es un marco de engagement estructurado, anclado en cuatro líneas de evidencia.
        </p>
      </div>
      <div className="ach-pedagogy__grid">
        {pillars.map(p => (
          <article key={p.eb} className="ach-pedagogy__card">
            <div className="ach-eyebrow ach-eyebrow--peach">{p.eb}</div>
            <h3 className="ach-h3 ach-h3--light">{p.title}</h3>
            <p className="ach-body ach-body--light">{p.body}</p>
            <div className="ach-pedagogy__ref">↳ {p.ref}</div>
          </article>
        ))}
      </div>
    </section>
  );
};

// ─── 6. OUTCOMES (features framed as outcomes) ───────────────────────
const Outcomes = () => {
  const items = [
    { num: "01", t: "Cada pregunta vale algo", d: "Tus quiz dejan de ser \"levanten la mano\" y se vuelven momentos en los que toda la clase responde — porque hay algo en juego." },
    { num: "02", t: "Cada alumno sabe dónde va", d: "Niveles, monedas y badges hacen visible el progreso individual. La motivación deja de depender solo de la nota." },
    { num: "03", t: "Cada clase tiene un clímax", d: "Los raidbosses al final de un capítulo convierten una sesión más en un evento que los alumnos quieren no faltar." },
    { num: "04", t: "Cada error es aprendizaje", d: "Feedback en el instante, sin vergüenza. Los alumnos prueban, se equivocan y siguen — eso es estudiar." }
  ];
  return (
    <section className="ach-section ach-outcomes">
      <div className="ach-outcomes__top">
        <div className="ach-section__head">
          <div className="ach-eyebrow">Resultados</div>
          <h2 className="ach-h2">No son features. Son momentos que cambian tu clase.</h2>
        </div>
        <div className="ach-outcomes__stats">
          <div className="ach-stat ach-stat--coral">
            <strong>+89%</strong>
            <span>participación promedio en clases con Alquie</span>
          </div>
          <div className="ach-stat ach-stat--peach">
            <strong>3,2x</strong>
            <span>más respuestas por alumno por sesión</span>
          </div>
        </div>
      </div>
      <div className="ach-outcomes__grid">
        {items.map(i => (
          <div key={i.num} className="ach-outcomes__card">
            <div className="ach-outcomes__num">{i.num}</div>
            <h3 className="ach-h3">{i.t}</h3>
            <p className="ach-body">{i.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

// ─── 7. FOR TEACHERS & SCHOOLS ───────────────────────────────────────
const ForSchools = () => {
  const left = [
    { t: "Sin saber de juegos", d: "No necesitas haber jugado un RPG en tu vida. Si sabes armar una clase, sabes usar Alquie." },
    { t: "5 minutos para empezar", d: "Onboarding por código. Sube tu material, invita a tus alumnos, y a la siguiente clase ya están jugando." },
    { t: "Funciona en aulas reales", d: "Probado en escuelas con y sin tablets. Tu salón, sus celulares, y proyector — suficiente." },
    { t: "Alineado al currículo", d: "Tus contenidos, tus rúbricas, tus tiempos. Alquie es el motor; tú sigues siendo el diseñador." }
  ];
  return (
    <section id="schools" className="ach-section ach-schools">
      <div className="ach-schools__head">
        <div className="ach-eyebrow">Para profesores y escuelas</div>
        <h2 className="ach-h2 ach-schools__h2">
          Construido para el <span className="ach-u-accent">aula real<Squiggle variant="1" color="var(--brand-coral)" className="ach-u-accent__line" /></span>, no para una demo.
        </h2>
      </div>
      <div className="ach-schools__split">
        <div className="ach-schools__copy">
          <p className="ach-lead">
            Sabemos cómo se ven los lunes a las 8 de la mañana. Alquie está hecho para sostenerse en ese contexto — no en un escenario ideal.
          </p>
          <a className="ach-btn ach-btn--primary-glass ach-btn--lg" href="Sign Up.html">Hablar con el equipo educativo</a>
        </div>
        <div className="ach-schools__points">
          {left.map(p => (
            <div key={p.t} className="ach-schools__point">
              <div className="ach-schools__check" aria-hidden>
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <div>
                <h3 className="ach-h4">{p.t}</h3>
                <p className="ach-body">{p.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="ach-schools__shot">
        <div className="ach-schools__shot-label">
          <span className="ach-eyebrow">Vista del profesor</span>
          <h3 className="ach-h4">Tu curso, tus alumnos, todo a la vista en una sola pantalla.</h3>
        </div>
        <div className="ach-schools__shot-frame">
          <img src="assets/screens/dashboard-profesor.png" alt="Dashboard del profesor en Alquie" />
        </div>
      </div>
    </section>
  );
};

// ─── 8. SOCIAL PROOF ─────────────────────────────────────────────────
const SocialProof = () => {
  const quotes = [
    {
      n: "Carolina Méndez",
      r: "Profesora de Matemáticas · 6° básico",
      s: "Colegio San Andrés, Santiago",
      q: "Mis alumnos pelean por entrar primero a la clase. Antes peleaban por irse. Eso lo dice todo."
    },
    {
      n: "Rodrigo Salinas",
      r: "Profesor de Historia · 7° y 8° básico",
      s: "Liceo Bicentenario, Concepción",
      q: "El raidboss del fin de unidad cambió mis evaluaciones. Estudian para ganar — y aprenden mucho más."
    },
    {
      n: "María José Pérez",
      r: "Coordinadora académica",
      s: "Red de colegios Aurora, 4 sedes",
      q: "Bajamos las brechas de participación entre los alumnos más callados y el resto. Es la primera vez que vemos eso a esta escala."
    }
  ];
  return (
    <section className="ach-section ach-social">
      <div className="ach-section__head">
        <div className="ach-eyebrow">Lo que dicen quienes ya enseñan con Alquie</div>
        <h2 className="ach-h2">Profesores y escuelas que llegaron primero.</h2>
      </div>
      <div className="ach-social__grid">
        {quotes.map(q => (
          <figure key={q.n} className="ach-social__card">
            <svg viewBox="0 0 24 18" width="28" height="22" fill="var(--brand-coral)" aria-hidden><path d="M0 18V8C0 3.6 3 0 8 0v4C5.8 4 4 5.8 4 8h4v10H0zm14 0V8c0-4.4 3-8 8-8v4c-2.2 0-4 1.8-4 4h4v10h-8z"/></svg>
            <blockquote className="ach-social__q">{q.q}</blockquote>
            <figcaption className="ach-social__by">
              <div className="ach-social__avatar">{q.n.split(" ").map(n => n[0]).join("").slice(0, 2)}</div>
              <div>
                <div className="ach-social__name">{q.n}</div>
                <div className="ach-social__role">{q.r}</div>
                <div className="ach-social__school">{q.s}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
      <div className="ach-social__logos">
        <span className="ach-social__logos-label">Confían en Alquie</span>
        <div className="ach-social__logos-row">
          {["Colegio San Andrés", "Liceo Bicentenario", "Red Aurora", "Instituto del Pacífico", "Escuela Las Condes", "Colegio Matías Cousiño"].map(l => (
            <span key={l} className="ach-social__logo">{l}</span>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── 9. PRICING ──────────────────────────────────────────────────────
const Pricing = () => {
  const teacherPlans = [
    {
      eb: "Plan básico",
      name: "Profesor",
      price: "Gratis",
      sub: "Para siempre · sin tarjeta",
      bullets: [
        "Cursos y alumnos ilimitados",
        "Personajes, niveles y monedas",
        "Plantillas por asignatura",
        "Reportes básicos de progreso",
        "Soporte por correo"
      ],
      cta: "Crear cuenta gratis",
      featured: false
    },
    {
      eb: "Más popular",
      name: "Profesor Pro",
      price: "$6.900",
      priceSuffix: "CLP / mes",
      sub: "Todo lo del básico, más las mecánicas avanzadas:",
      bullets: [
        "Quiz de Pociones",
        "Treasure Hunt",
        "Arena de Duelos",
        "Raidboss colaborativo",
        "Soporte personalizado"
      ],
      cta: "Probar Pro 30 días",
      featured: true
    }
  ];
  return (
    <section id="pricing" className="ach-section ach-pricing">
      <div className="ach-section__head ach-section__head--center">
        <div className="ach-eyebrow">Precios para profesores</div>
        <h2 className="ach-h2">Empieza gratis. Sube a Pro cuando quieras desbloquear las mecánicas.</h2>
        <p className="ach-lead ach-mw-md">
          El plan básico ya incluye todo lo esencial. Pro suma las dinámicas avanzadas que hacen de cada clase un evento.
        </p>
      </div>
      <div className="ach-pricing__row">
        {teacherPlans.map(p => (
          <div key={p.name} className={`ach-pricing__card ${p.featured ? "ach-pricing__card--featured" : ""}`}>
            <div className="ach-pricing__head">
              <div>
                <div className="ach-eyebrow" style={{ marginBottom: 8 }}>{p.eb}</div>
                <h3 className="ach-pricing__name">{p.name}</h3>
              </div>
              <div className="ach-pricing__price">
                <span className="ach-pricing__amount">{p.price}</span>
                {p.priceSuffix && <span className="ach-pricing__suffix">{p.priceSuffix}</span>}
              </div>
            </div>
            <div className="ach-pricing__sub">{p.sub}</div>
            <ul className="ach-pricing__list">
              {p.bullets.map((b, i) => {
                const isObj = typeof b === "object";
                const text = isObj ? b.t : b;
                const icon = isObj ? b.icon : null;
                return (
                  <li key={i}>
                    {icon ? (
                      <img src={`assets/icons/${icon}`} alt="" className="ach-pricing__icon" />
                    ) : (
                      <span className="ach-pricing__check">
                        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                      </span>
                    )}
                    {text}
                  </li>
                );
              })}
            </ul>
            <a href="Sign Up.html" className={`ach-btn ach-btn--md ${p.featured ? "ach-btn--primary-glass" : "ach-btn--outline"}`}>{p.cta}</a>
          </div>
        ))}
      </div>
      <div className="ach-pricing__schools">
        <div>
          <div className="ach-eyebrow">Para colegios y redes</div>
          <h3 className="ach-h4" style={{ marginTop: 4 }}>Plan Escuela · a medida según tamaño y acompañamiento</h3>
          <p className="ach-body-sm" style={{ marginTop: 6 }}>Roles directivos, SSO, panel por red, formación docente y reportes a nivel institucional.</p>
        </div>
        <a className="ach-btn ach-btn--md ach-btn--outline" href="Sign Up.html">Hablar con ventas</a>
      </div>
    </section>
  );
};

// ─── 10. FINAL CTA ───────────────────────────────────────────────────
const FinalCTA = () => (
  <section className="ach-section ach-finalcta">
    <div className="ach-finalcta__inner">
      <Squiggle variant="burst" color="var(--brand-peach)" className="ach-finalcta__burst-1" />
      <Squiggle variant="burst" color="var(--brand-coral)" className="ach-finalcta__burst-2" />
      <img src="assets/alquie-texturizado.png" alt="" className="ach-finalcta__alquie" />
      <div className="ach-finalcta__copy">
        <div className="ach-finalcta__stats">
          <div className="ach-finalcta__stat"><strong>+89%</strong><span>participación promedio en clase</span></div>
          <div className="ach-finalcta__stat"><strong>3,2x</strong><span>más respuestas por alumno</span></div>
        </div>
        <div className="ach-eyebrow ach-eyebrow--peach">Una última cosa</div>
        <h2 className="ach-finalcta__h">
          Haz de tu sala un lugar al que tus alumnos <span className="ach-finalcta__accent">quieran<Squiggle variant="1" color="var(--brand-peach)" className="ach-u-accent__line" /></span> volver.
        </h2>
        <div className="ach-finalcta__ctas">
          <a className="ach-btn ach-btn--peach-glass ach-btn--lg" href="Sign Up.html">Empieza gratis con tu curso</a>
          <a className="ach-btn ach-btn--ghost-light ach-btn--lg" href="Sign Up.html">Agendar demo en tu colegio</a>
        </div>
        <div className="ach-finalcta__note">
          Sin tarjeta · 30 días con todas las funciones · Soporte por un humano de carne y hueso
        </div>
      </div>
    </div>
  </section>
);

// ─── Footer ───────────────────────────────────────────────────────────
const Footer = () => {
  const cols = [
    { h: "Plataforma", l: ["Profesor", "Alumno", "Modo proyector", "Banco de preguntas"] },
    { h: "Para escuelas", l: ["Plan Escuela", "Onboarding", "Casos de estudio", "Hablar con ventas"] },
    { h: "Recursos", l: ["Centro de ayuda", "Pedagogía", "Comunidad docente", "Blog"] },
    { h: "Empresa", l: ["Sobre Alquie", "Trabaja con nosotros", "Privacidad", "Términos"] }
  ];
  return (
    <footer className="ach-footer">
      <div className="ach-footer__top">
        <div className="ach-footer__brand">
          <BrandMark height={48} />
          <p className="ach-body-sm" style={{ marginTop: 12, maxWidth: 280 }}>
            Plataforma educativa gamificada para profesores y escuelas. Hecho con cariño en Chile.
          </p>
        </div>
        {cols.map(c => (
          <div key={c.h} className="ach-footer__col">
            <h4>{c.h}</h4>
            <ul>{c.l.map(i => <li key={i}><a href="#">{i}</a></li>)}</ul>
          </div>
        ))}
      </div>
      <div className="ach-footer__bottom">
        <span>© 2026 Alquie · Todos los derechos reservados</span>
        <span>contacto@alchie.cl</span>
      </div>
    </footer>
  );
};

// ─── Tweaks panel ─────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "coral",
  "heroLayout": "split",
  "showFantasyAccents": true,
  "headlineWeight": "all-sans",
  "darkPedagogy": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent globally via CSS var
  useEffect(() => {
    const accentMap = {
      coral: "var(--brand-coral)",
      peach: "var(--brand-peach)",
      teal: "var(--brand-teal)",
      mint: "var(--brand-mint)"
    };
    document.documentElement.style.setProperty("--ach-accent", accentMap[t.accent] || accentMap.coral);
    document.documentElement.style.setProperty("--ach-fantasy", t.showFantasyAccents ? "block" : "none");
    document.documentElement.dataset.headline = t.headlineWeight;
    document.documentElement.dataset.pedagogy = t.darkPedagogy ? "dark" : "light";
  }, [t]);

  return (
    <div className="ach-root">
      <Nav />
      <main>
        <Hero />
        <Problem />
        <Solution />
        <HowItWorks />
        <Pedagogy />
        <ForSchools />
        <SocialProof />
        <Pricing />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Color de acento" />
        <TweakRadio
          label="Acento principal"
          value={t.accent}
          options={["coral", "peach", "teal", "mint"]}
          onChange={v => setTweak("accent", v)}
        />
        <TweakSection label="Visual" />
        <TweakToggle
          label="Detalles fantasy (squiggles, mascot)"
          value={t.showFantasyAccents}
          onChange={v => setTweak("showFantasyAccents", v)}
        />
        <TweakRadio
          label="Estilo de titular"
          value={t.headlineWeight}
          options={["all-sans", "bold-mix", "all-display"]}
          onChange={v => setTweak("headlineWeight", v)}
        />
        <TweakSection label="Sección pedagogía" />
        <TweakToggle
          label="Fondo navy oscuro"
          value={t.darkPedagogy}
          onChange={v => setTweak("darkPedagogy", v)}
        />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);