// Alquie · Landing v2 — General Sans + Fraunces, navy hero + claro brillante
// Animaciones: stagger on scroll, squiggles dibujándose, contadores, parallax sutil

const { useState, useEffect, useRef } = React;

// ─── Reveal on scroll (stagger) ──────────────────────────────────────
function useReveal() {
  useEffect(() => {
    const triggerCounter = (el) => {
      const target = parseFloat(el.dataset.to);
      const suffix = el.dataset.suffix || '';
      const decimals = parseInt(el.dataset.decimals || '0');
      const dur = 1800;
      const start = performance.now();
      const tick = (t) => {
        const p = Math.min((t - start) / dur, 1);
        const eased = 1 - Math.pow(1 - p, 3);
        const v = target * eased;
        el.textContent = v.toLocaleString('es-CL', {
          minimumFractionDigits: decimals,
          maximumFractionDigits: decimals
        }) + suffix;
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    };
    const activate = (el) => {
      el.classList.add('is-in');
      if (el.classList.contains('aq-counter')) triggerCounter(el);
    };
    const els = document.querySelectorAll('.aq-reveal, .aq-draw, .aq-glass-card, .aq-counter');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          activate(e.target);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.05 });
    els.forEach(el => {
      const r = el.getBoundingClientRect();
      const inView = r.top < window.innerHeight && r.bottom > 0;
      if (inView) {
        activate(el);
      } else {
        io.observe(el);
      }
    });
    return () => io.disconnect();
  }, []);
}

// ─── Parallax ───────────────────────────────────────────────────────
function useParallax() {
  useEffect(() => {
    const els = document.querySelectorAll('[data-parallax]');
    const onScroll = () => {
      const y = window.scrollY;
      els.forEach(el => {
        const speed = parseFloat(el.dataset.parallax) || 0.1;
        el.style.transform = `translateY(${y * speed}px)`;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
}

// ─── Asset placeholder ──────────────────────────────────────────────
const Asset = ({ tag, desc, w, h, style, src, alt, fit = 'cover' }) => {
  if (src) {
    return (
      <div className="aq-shot" style={{ ...style, ...(w ? { width: w } : {}), ...(h ? { height: h } : {}) }}>
        <img src={src} alt={alt || desc || tag} style={{ width: '100%', height: '100%', objectFit: fit, display: 'block' }} />
      </div>
    );
  }
  return (
    <div className="aq-asset" style={{ ...style, ...(w ? { width: w } : {}), ...(h ? { height: h } : {}) }}>
      <div className="aq-asset__tag">{tag}</div>
      <div className="aq-asset__desc">{desc}</div>
    </div>
  );
};

// ─── Squiggles ──────────────────────────────────────────────────────
const Doodle = ({ variant, color = "currentColor", className }) => {
  if (variant === "wave")
    return (
      <svg className={className} viewBox="0 0 90 30" fill="none">
        <path className="aq-draw" d="M3 18 Q 18 4, 30 18 T 56 18 T 84 12" stroke={color} strokeWidth="2.6" strokeLinecap="round" />
      </svg>
    );
  if (variant === "arrow")
    return (
      <svg className={className} viewBox="0 0 130 60" fill="none">
        <path className="aq-draw" d="M4 50 Q 30 6, 60 28 T 120 14" stroke={color} strokeWidth="2.6" strokeLinecap="round" strokeDasharray="2 7" />
        <path className="aq-draw" d="M110 6 L120 14 L114 24" stroke={color} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    );
  if (variant === "underline")
    return (
      <svg className={className} viewBox="0 0 200 14" preserveAspectRatio="none" fill="none">
        <path className="aq-draw" d="M2 9 Q 50 2, 100 7 T 198 5" stroke={color} strokeWidth="3" strokeLinecap="round" />
      </svg>
    );
  if (variant === "spark")
    return (
      <svg className={className} viewBox="0 0 24 24" fill={color}>
        <path d="M12 0 L13.5 10.5 L24 12 L13.5 13.5 L12 24 L10.5 13.5 L0 12 L10.5 10.5 Z" />
      </svg>
    );
  return null;
};

// ─── Brand mark ─────────────────────────────────────────────────────
// Alchemy text — letter-by-letter shimmer reveal
const AlchemyText = ({ text, startDelay = 0 }) => (
  <>
    {text.split('').map((ch, i) => (
      <span
        key={i}
        className="aq-alch-letter"
        style={{ animationDelay: `${startDelay + i * 0.035}s` }}
      >
        {ch === ' ' ? '\u00A0' : ch}
      </span>
    ))}
  </>
);

const Brand = ({ light = false }) => (
  <div className={light ? "aq-footer__brand" : "aq-nav__brand"}>
    <img
      src={light ? "assets/logo-blanco.png" : "assets/logo-azul.png"}
      alt="Alquie"
      className={light ? "aq-footer__logo-img" : "aq-nav__logo-img"}
    />
  </div>
);

// ─── NAV ────────────────────────────────────────────────────────────
const Nav = () => (
  <div className="aq-nav-wrap">
    <nav className="aq-nav">
      <Brand />
      <ul className="aq-nav__links">
        <li><a href="#solution">Plataforma</a></li>
        <li><a href="#pedagogy">Pedagogía</a></li>
        <li><a href="#schools">Profesor y estudiante</a></li>
        <li><a href="#pricing">Precios</a></li>
      </ul>
      <div className="aq-nav__cta">
        <div className="aq-lang">
          <span className="aq-lang__current">ES</span>
          <div className="aq-lang__menu">
            <a href="/es" className="is-active">Español</a>
            <a href="/en">English</a>
            <a href="/de">Deutsch</a>
            <a href="/fr">Français</a>
          </div>
        </div>
        <a href="https://app.alquie.com/login" style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink)' }}>Iniciar sesión</a>
        <a className="aq-btn aq-btn--navy aq-btn--md" href="/signup">Empieza gratis</a>
      </div>
    </nav>
  </div>
);

// ─── HERO ───────────────────────────────────────────────────────────
const Hero = () => (
  <section className="aq-hero">
    <div className="aq-hero__aurora" />
    <div className="aq-hero__noise" />
    <div className="aq-hero__inner">
      <div className="aq-hero__copy">
        <div className="aq-hero__eyebrow aq-reveal" data-delay="1">
          <span className="aq-hero__eyebrow-dot">✦</span>
          Plataforma educativa gamificada
        </div>
        <h1 className="aq-h1 aq-hero__h1 aq-alchemy" data-delay="2">
          <AlchemyText text="Aprender se siente como" />
          <br />
          <span style={{ whiteSpace: 'nowrap' }}>
            <AlchemyText text="una " startDelay={0.9} />
            <span className="accent">
              <i>aventura</i>
              <Doodle variant="underline" color="var(--coral)" />
            </span>
            <AlchemyText text=" por descubrir." startDelay={1.6} />
          </span>
        </h1>
        <p className="aq-lead aq-hero__lead aq-reveal" data-delay="3">
          Alquie es una plataforma de aprendizaje activo donde cada pregunta cuenta, cada alumno participa, y cada clase deja huella — sin sumar complejidad a tu día a día.
        </p>
        <div className="aq-hero__ctas aq-reveal" data-delay="4">
          <a className="aq-btn aq-btn--coral aq-btn--lg" href="/signup">Empieza gratis</a>
          <a className="aq-btn aq-btn--ghost-light aq-btn--lg" href="#demo">
            <span className="aq-btn-play">▶</span>
            Ver una clase en acción
          </a>
        </div>
      </div>

      <div className="aq-hero__stage aq-reveal" data-delay="3">
        <div className="aq-hero__orb aq-hero__orb--1" />
        <div className="aq-hero__orb aq-hero__orb--2" />
        <div className="aq-hero__orb aq-hero__orb--3" />

        <Doodle variant="wave" color="var(--peach)" className="aq-hero__doodle aq-hero__doodle--1" />
        <Doodle variant="arrow" color="rgba(255,255,255,0.4)" className="aq-hero__doodle aq-hero__doodle--2" />

        <div className="aq-hero__photo aq-hero__photo--filled">
          <img src="assets/photos/hero.png" alt="Alquie en clase" />
        </div>

        <div className="aq-glass-card aq-glass-card--quiz">
          <div className="aq-glass-card__eyebrow">En vivo</div>
          <div className="aq-glass-card__title">22 / 30 respondiendo</div>
          <div className="aq-glass-card__bar"><div className="aq-glass-card__bar-fill" /></div>
          <div className="aq-glass-card__meta">
            <span>Quiz · 6° básico</span>
            <span className="aq-glass-card__pill">+72%</span>
          </div>
        </div>

        <div className="aq-glass-card aq-glass-card--xp">
          <div className="aq-glass-card__eyebrow">Hoy en clase</div>
          <div className="aq-glass-card__big"><i>+</i><span className="aq-counter" data-to="1240">0</span></div>
          <div className="aq-glass-card__sub">puntos ganados por la clase</div>
        </div>
      </div>
    </div>
  </section>
);

// ─── 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 (
    <div className="aq-problem-wrap">
      <section className="aq-section">
        <div className="aq-section__head aq-section__head--center">
          <div className="aq-eyebrow aq-reveal">El problema</div>
          <h2 className="aq-h2 aq-reveal" data-delay="1">
            Enseñar hoy compite con todo lo que <i>distrae</i>.
          </h2>
          <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
            Los docentes no necesitan más contenido. Necesitan que sus clases vuelvan a captar la atención que merecen.
          </p>
        </div>
        <div className="aq-problem__grid">
          {issues.map((i, idx) => (
            <div key={i.t} className="aq-problem__card aq-reveal" data-delay={idx + 1}>
              <div className="aq-problem__num">0{idx + 1}</div>
              <h3 className="aq-h4">{i.t}</h3>
              <p className="aq-body" style={{ marginTop: 6 }}>{i.d}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

// ─── SOLUTION ───────────────────────────────────────────────────────
const Solution = () => {
  const mechanics = [
    { title: "Arena de Duelos", desc: "Dos alumnos se enfrentan en duelos rápidos. La clase entera observa, vota y aprende.", visual: "coral", icon: "assets/icons/arena.png", shot: "assets/screens/duelo-arena.png" },
    { title: "Treasure Hunt", desc: "Búsquedas guiadas por pistas que activan razonamiento, lectura y exploración en grupo.", visual: "teal", icon: "assets/icons/treasure-hunt.png", shot: "assets/screens/treasurehunt.png" },
    { title: "Raidboss", desc: "Toda la clase colabora para vencer a un jefe — solo se gana respondiendo bien, juntos.", visual: "mint", icon: "assets/icons/raidboss.png", shot: "assets/screens/raidboss.png", mod: "raid" },
    { title: "Quiz de Pociones", desc: "Quiz interactivo donde cada respuesta correcta es un ingrediente para crear pociones. Feedback inmediato y racha visible.", visual: "peach", icon: "assets/icons/quiz-pociones.png", shot: "assets/screens/quiz-pociones.png" }
  ];
  return (
    <section id="solution" className="aq-section">
      <div className="aq-section__head">
        <div className="aq-eyebrow aq-reveal">La solución</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Mecánicas que <i>enganchan</i>, objetivos que se cumplen.
        </h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Alquie introduce sistemas estructurados de participación en el aula. Cada mecánica está al servicio del aprendizaje, no al revés.
        </p>
      </div>

      <div className="aq-solution__more">
        {mechanics.map((m, i) => (
          <div key={m.title} className={`aq-mech-card aq-reveal${m.mod ? ' aq-mech-card--' + m.mod : ''}`} data-delay={i + 1}>
            <div className={`aq-mech-card__icon aq-mech-card__icon--${m.visual}`}>
              <img src={m.icon} alt="" />
            </div>
            <h4 className="aq-h4">{m.title}</h4>
            <p className="aq-body-sm">{m.desc}</p>
            <div className="aq-mech-card__hover">
              <img src={m.shot} alt="" loading="lazy" />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ─── HOW IT WORKS (sticky scroll storytelling) ───────────────────────
const HowItWorks = () => {
  const steps = [
    {
      glyph: "1",
      eyebrow: "Paso 01",
      t: "Crea una narrativa",
      d: "Antes de acceder al material, el alumno entra a una historia que enmarca lo que va a aprender. El contenido deja de ser ‘la tarea’ y se vuelve parte de un mundo.",
      shot: "assets/screens/actividades.png",
      shotAlt: "Narrativa de la actividad en el dashboard del profesor"
    },
    {
      glyph: "2",
      eyebrow: "Paso 02",
      t: "Tus alumnos participan",
      d: "Junto a su personaje, los alumnos leen la narrativa y se sumergen en un mundo de aprendizaje que quieren seguir descubriendo — clase a clase.",
      shot: "assets/screens/actividades2.png",
      shotAlt: "Alumno entrando a una actividad narrativa"
    },
    {
      glyph: "3",
      eyebrow: "Paso 03",
      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.",
      shot: "assets/screens/dashboard-alumno.png",
      shotAlt: "Dashboard del alumno mostrando su progreso"
    }
  ];
  const [activeStep, setActiveStep] = useState(0);
  const sectionRef = useRef(null);
  const stepRefs = useRef([]);

  useEffect(() => {
    const onScroll = () => {
      if (!sectionRef.current) return;
      const rect = sectionRef.current.getBoundingClientRect();
      const sectionTop = rect.top;
      const sectionHeight = rect.height;
      // progress: 0 when section top hits viewport top, 1 when section bottom hits viewport bottom
      const totalScrollable = sectionHeight - window.innerHeight;
      if (totalScrollable <= 0) return;
      const scrolled = -sectionTop;
      const progress = Math.max(0, Math.min(1, scrolled / totalScrollable));
      const idx = Math.min(steps.length - 1, Math.floor(progress * steps.length));
      setActiveStep(idx);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="aq-how-sticky" ref={sectionRef}>
      <div className="aq-how-sticky__inner">
        <div className="aq-how-sticky__pin">
          <div className="aq-how-sticky__copy">
            <div className="aq-eyebrow aq-reveal">Cómo funciona</div>
            <h2 className="aq-h2 aq-reveal" data-delay="1">
              Tres pasos. <i>Cero</i> curva de aprendizaje.
            </h2>
            <p className="aq-lead aq-reveal" data-delay="2" style={{ marginTop: 16, marginBottom: 36 }}>
              De crear la primera actividad a ver a tu sala enganchada — sin manuales, sin formación previa.
            </p>
            <ol className="aq-how-sticky__steps">
              {steps.map((s, i) => (
                <li
                  key={s.glyph}
                  className={`aq-how-sticky__step ${i === activeStep ? 'is-active' : ''} ${i < activeStep ? 'is-past' : ''}`}
                >
                  <div className="aq-how-sticky__num">
                    <span>{s.glyph}</span>
                  </div>
                  <div className="aq-how-sticky__step-body">
                    <div className="aq-how-sticky__step-eyebrow">{s.eyebrow}</div>
                    <h3 className="aq-h3">{s.t}</h3>
                    <p className="aq-body">{s.d}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
          <div className="aq-how-sticky__stage">
            {steps.map((s, i) => (
              <div
                key={s.glyph}
                className={`aq-how-sticky__shot ${i === activeStep ? 'is-active' : ''}`}
                aria-hidden={i !== activeStep}
              >
                <div className="aq-how-sticky__shot-frame">
                  <img src={s.shot} alt={s.shotAlt} />
                </div>
                <div className="aq-how-sticky__shot-tag">
                  <span className="aq-how-sticky__shot-dot" />
                  {s.eyebrow} · {s.t}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── PEDAGOGY ───────────────────────────────────────────────────────
const Pedagogy = () => {
  const pillars = [
    { eb: "Motivación", t: "Autonomía, competencia y vínculo", d: "Construido sobre la Teoría de la Autodeterminación. Los alumnos eligen camino, ven su progreso real, y pertenecen a un grupo.", ref: "Deci & Ryan, Self-Determination Theory" },
    { eb: "Aprendizaje activo", t: "Participar, no escuchar", d: "La evidencia es clara: la participación activa mejora retención y comprensión versus instrucción pasiva.", ref: "Freeman et al., 2014 · PNAS" },
    { eb: "Feedback inmediato", t: "Saber al instante si lo lograste", d: "Quizzes, duelos y raids dan respuesta en segundos. El cerebro cierra el ciclo de aprendizaje cuando importa.", ref: "Hattie & Timperley" }
  ];
  return (
    <section id="pedagogy" className="aq-section">
      <div className="aq-section__head">
        <div className="aq-eyebrow aq-reveal">Fundamento pedagógico</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Construido sobre <i>cómo aprenden</i> los estudiantes — de verdad.
        </h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          No es entretenimiento con barniz educativo. Es un marco de engagement estructurado, anclado en evidencia.
        </p>
      </div>
      <div className="aq-pedagogy__grid">
        {pillars.map((p, i) => (
          <article key={p.eb} className="aq-pedagogy__card aq-reveal" data-delay={i + 1}>
            <div className="aq-pedagogy__eyebrow">{p.eb}</div>
            <h3 className="aq-h3">{p.t}</h3>
            <p className="aq-body">{p.d}</p>
            <div className="aq-pedagogy__ref">↳ {p.ref}</div>
          </article>
        ))}
      </div>
    </section>
  );
};

// ─── FOR SCHOOLS ────────────────────────────────────────────────────
const ForSchools = () => {
  const tabs = [
    {
      key: 'profesores',
      label: 'Profesores',
      eyebrow: 'Para profesores',
      h: <>Construido para el <i>aula real</i>, no para una demo.</>,
      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.',
      shot: 'assets/screens/dashboard-profesor.png',
      shotAlt: 'Dashboard del profesor en Alquie',
      points: [
        { 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." }
      ]
    },
    {
      key: 'estudiantes',
      label: 'Estudiantes',
      eyebrow: 'Para estudiantes',
      h: <>Estudiar deja de sentirse como una <i>obligación</i>.</>,
      lead: 'Cada alumno arma su personaje, sube de nivel y compite con sus compañeros. El colegio empieza a parecerse al juego que sí quieren abrir.',
      shot: 'assets/screens/dashboard-alumno.png',
      shotAlt: 'Dashboard del alumno en Alquie',
      points: [
        { t: "Tu propio personaje", d: "Personalizas tu avatar, eliges tu clan, y subes de nivel mientras aprendes." },
        { t: "Progreso visible", d: "Niveles, monedas y rachas hacen que el avance se sienta — y se quede." },
        { t: "Competencia sana", d: "Duelos y rankings con tus compañeros: motivación social, no presión." },
        { t: "Aprende jugando", d: "Las pociones, los mapas y los raids son la materia. Sin disfraz." }
      ]
    }
  ];
  const [active, setActive] = useState('profesores');
  const tab = tabs.find(t => t.key === active);
  return (
    <section id="schools" className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Para profesores y estudiantes</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Una plataforma, <i>dos miradas</i>.
        </h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Cambia la perspectiva: lo que ve cada rol, lo que le importa, y cómo Alquie lo acompaña.
        </p>
      </div>

      <div className="aq-tabs aq-reveal" role="tablist">
        {tabs.map(t => (
          <button
            key={t.key}
            role="tab"
            aria-selected={active === t.key}
            className={`aq-tab ${active === t.key ? 'is-active' : ''}`}
            onClick={() => setActive(t.key)}
          >
            {t.label}
          </button>
        ))}
      </div>

      <div className="aq-schools__split" key={tab.key}>
        <div>
          <div className="aq-section__head" style={{ marginBottom: 32 }}>
            <div className="aq-eyebrow">{tab.eyebrow}</div>
            <h2 className="aq-h2">
              {tab.h}
            </h2>
            <p className="aq-lead" style={{ marginTop: 16 }}>
              {tab.lead}
            </p>
          </div>
          <div className="aq-schools__points">
            {tab.points.map((p, i) => (
              <div key={p.t} className="aq-schools__point">
                <div className="aq-schools__check">✓</div>
                <div>
                  <h4 className="aq-h4">{p.t}</h4>
                  <p className="aq-body-sm" style={{ marginTop: 4 }}>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="aq-schools__shot">
          <img
            src={tab.shot}
            alt={tab.shotAlt}
            style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
          />
        </div>
      </div>
    </section>
  );
};

// ─── SOCIAL PROOF ───────────────────────────────────────────────────
const SocialProof = () => {
  const quotes = [
    { n: "Nombre del docente", r: "Posición del docente", q: "Aquí va la reseña del docente." },
    { n: "Nombre del docente", r: "Posición del docente", q: "Aquí va la reseña del docente." },
    { n: "Nombre del docente", r: "Posición del docente", q: "Aquí va la reseña del docente." }
  ];
  return (
    <section className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Profesores que llegaron primero</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Las primeras voces de <i>quienes enseñan con Alquie.</i>
        </h2>
      </div>
      <div className="aq-social__grid">
        {quotes.map((q, i) => (
          <figure key={i} className="aq-quote aq-reveal" data-delay={i + 1} style={{ margin: 0 }}>
            <div className="aq-quote__mark">"</div>
            <blockquote className="aq-quote__q">{q.q}</blockquote>
            <figcaption className="aq-quote__by">
              <div className="aq-quote__avatar" style={{ background: 'rgba(0,53,88,0.08)', color: 'var(--ink-soft)' }}>—</div>
              <div>
                <div className="aq-quote__name">{q.n}</div>
                <div className="aq-quote__role">{q.r}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
};

// ─── PRICING ────────────────────────────────────────────────────────
const Pricing = ({ onContact }) => {
  const plans = [
    { eb: "Plan básico", name: "Profesor", price: "Gratis", sub: "Para siempre · sin tarjeta",
      bullets: ["1 curso","Hasta 40 alumnos","Personajes, niveles y monedas","Mapas de actividades","Todas las características base","Soporte por ticket"],
      cta: "Crear cuenta gratis", featured: false },
    { eb: "Más popular", name: "Profesor Pro", price: "6.99", suffix: "USD / mes", sub: "Todo lo del básico extendido, más:",
      bullets: ["Cursos ilimitados · sin límite de alumnos","Quiz de Pociones","Treasure Hunt","Arena de Duelos","Raidboss colaborativo","Soporte prioritario"],
      cta: "Cámbiate a Pro", featured: true }
  ];
  return (
    <section id="pricing" className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Precios para profesores</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Empieza <i>gratis</i>. Sube cuando quieras.
        </h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          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="aq-pricing__row">
        {plans.map((p, i) => (
          <div key={p.name} className={`aq-pricing__card ${p.featured ? "aq-pricing__card--featured" : ""} aq-reveal`} data-delay={i + 1}>
            <div className="aq-pricing__head">
              <div>
                <div className="aq-eyebrow" style={{ marginBottom: 8 }}>{p.eb}</div>
                <h3 className="aq-pricing__name">{p.name}</h3>
              </div>
              <div className="aq-pricing__price">
                <span className="aq-pricing__amount">{p.suffix ? "$" : ""}{p.price}</span>
                {p.suffix && <span className="aq-pricing__suffix">{p.suffix}</span>}
              </div>
            </div>
            <div className="aq-pricing__sub">{p.sub}</div>
            <ul className="aq-pricing__list">
              {p.bullets.map(b => (
                <li key={b}><span className="aq-pricing__check">✓</span>{b}</li>
              ))}
            </ul>
            <a href="#" className={`aq-btn ${p.featured ? "aq-btn--navy" : "aq-btn--ghost"}`}>{p.cta}</a>
          </div>
        ))}
      </div>
      <div className="aq-pricing__schools aq-reveal">
        <div>
          <div className="aq-eyebrow">Para colegios y redes</div>
          <h4 className="aq-h4" style={{ marginTop: 6 }}>Plan Escuela · a medida según tamaño y acompañamiento</h4>
        </div>
        <button className="aq-btn aq-btn--ghost" type="button" onClick={() => onContact('sales')}>Hablar con ventas</button>
      </div>
    </section>
  );
};

// ─── FINAL CTA ──────────────────────────────────────────────────────
const FinalCTA = ({ onContact }) => (
  <section className="aq-finalcta">
    <div className="aq-finalcta__inner">
      <div className="aq-eyebrow aq-reveal" style={{ color: 'var(--peach)', justifyContent: 'center', marginBottom: 18 }}>Una última cosa</div>
      <h2 className="aq-h2 aq-reveal" data-delay="1">
        Haz de tu sala un lugar al que <i>quieran</i> volver.
      </h2>
      <div className="aq-finalcta__ctas aq-reveal" data-delay="3">
        <a className="aq-btn aq-btn--coral aq-btn--lg" href="/signup">Empieza gratis con tu curso</a>
        <button className="aq-btn aq-btn--ghost-light aq-btn--lg" type="button" onClick={onContact}>Agendar demo en tu colegio</button>
      </div>
    </div>
  </section>
);

// ─── FOOTER ─────────────────────────────────────────────────────────
const Footer = ({ onContact }) => {
  const cols = [
    { h: "Plataforma", l: ["Plataforma","Onboarding","Centro de ayuda"] },
    { h: "Empresa", l: ["Sobre Alquie","Trabaja con nosotros","Privacidad","Términos"] }
  ];
  return (
    <footer className="aq-footer">
      <div className="aq-footer__inner">
        <div className="aq-footer__top">
          <div>
            <Brand light />
            <p style={{ marginTop: 14, maxWidth: 280, color: 'rgba(255,255,255,0.6)', fontSize: 14 }}>
              Plataforma educativa para profesores y escuelas. Hecho con cariño en Chile.
            </p>
          </div>
          {cols.map(c => (
            <div key={c.h} className="aq-footer__col">
              <h4>{c.h}</h4>
              <ul>{c.l.map(i => (
              <li key={i}>
                {i === 'Centro de ayuda'
                  ? <a href="#" onClick={e => { e.preventDefault(); onContact('support'); }}>{i}</a>
                  : <a href="#">{i}</a>}
              </li>
            ))}</ul>
            </div>
          ))}
        </div>
        <div className="aq-footer__bottom">
          <span>© 2026 Alquie · Todos los derechos reservados</span>
          <span>hola@alquie.com</span>
        </div>
      </div>
    </footer>
  );
};


// ─── Contact Modal ───────────────────────────────────────────────────
const SUPABASE_URL = 'https://ntuzvjmqdlehsjhgidzg.supabase.co';
const SUPABASE_ANON_KEY = 'sb_publishable_Sbw_p3mZBkWCWIncpFbfcw_8u0QQtFE';

const CONTACT_TOPICS = [
        { value: 'general', label: 'Consulta general' },
        { value: 'support', label: 'Soporte técnico' },
        { value: 'sales', label: 'Planes y ventas' },
];
const CONTACT_FIELDS = {
  title: 'Escríbenos',
  topicLabel: 'Tema',
  name: 'Nombre completo',
  email: 'Correo electrónico',
  school: 'Colegio o institución (opcional)',
  message: 'Mensaje',
  send: 'Enviar mensaje',
  sending: 'Enviando…',
  success: '¡Mensaje enviado! Te contactamos pronto.',
  error: 'Error al enviar. Intenta de nuevo.',
  lang: 'es',
};

const ContactModal = ({ open, topic, onClose }) => {
  const [selTopic, setSelTopic] = React.useState(topic || 'general');
  const [name, setName]         = React.useState('');
  const [email, setEmail]       = React.useState('');
  const [school, setSchool]     = React.useState('');
  const [message, setMessage]   = React.useState('');
  const [status, setStatus]     = React.useState('idle');

  React.useEffect(() => { if (open) setSelTopic(topic || 'general'); }, [open, topic]);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  if (!open) return null;

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch(`${SUPABASE_URL}/functions/v1/send-contact-email`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${SUPABASE_ANON_KEY}` },
        body: JSON.stringify({ name, email, school, message, topic: selTopic, lang: CONTACT_FIELDS.lang }),
      });
      if (!res.ok) throw new Error('error');
      setStatus('success');
    } catch { setStatus('error'); }
  };

  const F = CONTACT_FIELDS;
  return (
    <div className="aq-modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="aq-modal">
        <button className="aq-modal__close" onClick={onClose} aria-label="Cerrar">×</button>
        {status === 'success' ? (
          <div className="aq-modal__success">
            <div className="aq-modal__success-icon">✓</div>
            <p>{F.success}</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit}>
            <h3 className="aq-modal__title">{F.title}</h3>
            <div className="aq-modal__field">
              <label>{F.topicLabel}</label>
              <select value={selTopic} onChange={e => setSelTopic(e.target.value)}>
                {CONTACT_TOPICS.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
              </select>
            </div>
            <div className="aq-modal__row">
              <div className="aq-modal__field">
                <label>{F.name}</label>
                <input required value={name} onChange={e => setName(e.target.value)} />
              </div>
              <div className="aq-modal__field">
                <label>{F.email}</label>
                <input type="email" required value={email} onChange={e => setEmail(e.target.value)} />
              </div>
            </div>
            <div className="aq-modal__field">
              <label>{F.school}</label>
              <input value={school} onChange={e => setSchool(e.target.value)} />
            </div>
            <div className="aq-modal__field">
              <label>{F.message}</label>
              <textarea required rows={4} value={message} onChange={e => setMessage(e.target.value)} />
            </div>
            {status === 'error' && <p className="aq-modal__error">{F.error}</p>}
            <button type="submit" className="aq-btn aq-btn--coral aq-btn--lg" disabled={status === 'sending'} style={{width:'100%'}}>
              {status === 'sending' ? F.sending : F.send}
            </button>
          </form>
        )}
      </div>
    </div>
  );
};

// ─── App ────────────────────────────────────────────────────────────
function App() {
  useReveal();
  useParallax();
  const [contactOpen, setContactOpen] = React.useState(false);
  const [contactTopic, setContactTopic] = React.useState('general');
  const openContact = (topic) => { setContactTopic(topic); setContactOpen(true); };
  return (
    <div className="aq-root">
      <Nav />
      <main>
        <Hero />
        <Problem />
        <Solution />
        <HowItWorks />
        <Pedagogy />
        <ForSchools />
        <SocialProof />
        <Pricing onContact={openContact} />
        <FinalCTA onContact={() => openContact('sales')} />
      </main>
      <Footer onContact={openContact} />
      <ContactModal open={contactOpen} topic={contactTopic} onClose={() => setContactOpen(false)} />
    </div>
  );
}

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