/* Squol landing — sections */
const { useState: useStateS, useEffect: useEffectS } = React;

/* ---------- NAV ---------- */
function TopNav({ invertOnDark }) {
  const [invert, setInvert] = useStateS(invertOnDark);
  useEffectS(() => {
    // detect when hero section is in viewport — invert; else not
    const onScroll = () => {
      const hero = document.querySelector('.hero');
      const finalCta = document.querySelector('.final-cta');
      const qr = document.querySelector('.qr-section');
      const y = window.scrollY + 32; // small offset
      const overDark =
        (hero && y < hero.offsetTop + hero.offsetHeight) ||
        (qr && y > qr.offsetTop && y < qr.offsetTop + qr.offsetHeight) ||
        (finalCta && y > finalCta.offsetTop && y < finalCta.offsetTop + finalCta.offsetHeight);
      setInvert(!!overDark);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
  };

  return (
    <nav className={`top ${invert ? 'invert' : ''}`}>
      <div className="wrap inner">
        <SquolLogo />
        <div className="nav-links">
          <a onClick={go('como')}>Cómo funciona</a>
          <a onClick={go('features')}>Funciones</a>
          <a onClick={go('credencial')}>Credencial QR</a>
          <a onClick={go('precios')}>Precios</a>
          <a onClick={go('contacto')}>Contacto</a>
        </div>
        <a href="https://panel.squol.app" target="_blank" rel="noopener" className="btn sm accent" style={{textDecoration:'none'}}>
          Ingresar
          <Icon.arrow className="arrow" style={{ width: 14, height: 14 }} />
        </a>
      </div>
    </nav>
  );
}

/* ---------- HERO ---------- */
function Hero({ showSecondary }) {
  return (
    <section className="hero" id="hero">
      <div className="wrap hero-grid">
        <div>
          <Reveal>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>La plataforma escolar mexicana</div>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ marginTop: 18 }}>
              Todo lo que tu escuela necesita,<br />
              en una <span className="accent">sola app.</span>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="lead" style={{ marginTop: 28 }}>
              Squol conecta a directores, docentes, padres y alumnos en un solo lugar.
              Alertas instantáneas, calificaciones, credencial inteligente con QR y mucho más.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div className="hero-ctas">
              <a href="https://panel.squol.app" target="_blank" rel="noopener" className="btn accent" style={{textDecoration:'none'}}>
                Inscribir mi escuela
                <Icon.arrow className="arrow" style={{ width: 16, height: 16 }} />
              </a>
              <button className="btn ghost invert" onClick={() => document.getElementById('como')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>
                Ver cómo funciona
              </button>
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ marginTop: 48 }} />
          </Reveal>
        </div>

        <div className="hero-stage">
          {showSecondary && (
            <Reveal delay={400}>
              <PhoneScreenshot
                className="hero-phone-back"
                src="assets/app-alumno.png"
                time="9:41"
                topPad={44}
              />
            </Reveal>
          )}
          <Reveal delay={480}>
            <PhoneScreenshot
              className="hero-phone-main"
              src="assets/app-login.png"
              time="9:41"
              topPad={44}
            />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- LOGOS / SOCIAL PROOF ---------- */
function LogosBar() {
  const schools = [
    { name: "Colegio Aurora", sub: "Tlalnepantla" },
    { name: "Instituto Cumbres", sub: "CDMX" },
    { name: "Liceo Monteverde", sub: "Puebla" },
    { name: "Colegio del Bosque", sub: "Guadalajara" },
    { name: "Escuela Vértice", sub: "Monterrey" },
  ];
  return (
    <section className="logos">
      <div className="wrap">
        <Reveal>
          <p className="label">Confiado por escuelas en México</p>
        </Reveal>
        <Reveal delay={120}>
          <div className="logo-row">
            {schools.map((s, i) => (
              <div className="school-logo" key={i}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                  {i === 0 && <><path d="M3 10l9-5 9 5-9 5-9-5z"/><path d="M6 11.5V17c0 1 3 3 6 3s6-2 6-3v-5.5"/></>}
                  {i === 1 && <><path d="M5 21V8l7-5 7 5v13"/><path d="M9 21v-6h6v6"/></>}
                  {i === 2 && <><circle cx="12" cy="12" r="8"/><path d="M12 4v16M4 12h16"/></>}
                  {i === 3 && <><path d="M4 19V9l8-5 8 5v10"/><path d="M9 19v-5h6v5"/></>}
                  {i === 4 && <><polygon points="12,3 22,9 22,15 12,21 2,15 2,9"/><path d="M12 12l10-6M12 12L2 6M12 12v9"/></>}
                </svg>
                <div className="text">
                  {s.name}
                  <small>{s.sub}</small>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- HOW IT WORKS ---------- */
function HowItWorks() {
  const [active, setActive] = useStateS(0);
  useEffectS(() => {
    const t = setInterval(() => setActive(a => (a + 1) % 3), 3000);
    return () => clearInterval(t);
  }, []);

  const steps = [
    {
      n: "01",
      title: "La escuela se registra",
      desc: "Crea tu cuenta institucional en minutos. Configura grupos, materias y periodos con plantillas listas.",
      icon: <Icon.school />,
    },
    {
      n: "02",
      title: "Invita a docentes y padres",
      desc: "Comparte un enlace o sube tu lista. Cada miembro entra con un código único y firma electrónica.",
      icon: <Icon.users />,
    },
    {
      n: "03",
      title: "Toda la comunidad conectada",
      desc: "Alertas, calificaciones, eventos y credencial QR — todo sincronizado en tiempo real.",
      icon: <Icon.link />,
    },
  ];

  return (
    <section className="section" id="como">
      <div className="wrap">
        <div className="section-head">
          <Reveal>
            <div className="eyebrow">Cómo funciona</div>
            <h2 style={{ marginTop: 16 }}>Tres pasos. Una comunidad escolar entera.</h2>
            <p className="lead">Desde la primera invitación hasta el último aviso, Squol mantiene a todos en sintonía sin papeleo ni cadenas de WhatsApp.</p>
          </Reveal>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 100}>
              <div
                className={`step ${active === i ? 'active' : ''}`}
                onMouseEnter={() => setActive(i)}
              >
                <div className="num">{s.n}</div>
                <div className="icon">{s.icon}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FEATURES BY PERSONA ---------- */
const PERSONAS = {
  directores: {
    label: "Directores",
    glyph: "🏫",
    eyebrow: "Para directores y administradores",
    title: "Control total de tu escuela, en la palma de tu mano.",
    desc: "Visualiza el pulso de cada grupo, captura calificaciones, gestiona accesos y toma decisiones con datos reales.",
    mockup: "browser",
    screen: "assets/screen-calificaciones.png",
    url: "panel.squol.app/calificaciones",
    bullets: [
      { icon: <Icon.grade />, h: "Captura de calificaciones", p: "Sube y publica boletas por periodo, con conversión automática y firma digital." },
      { icon: <Icon.chart />, h: "Estadísticas en vivo", p: "Asistencia, calificaciones y participación por grupo, grado o periodo." },
      { icon: <Icon.users />, h: "Gestión de usuarios", p: "Alta, baja y permisos de docentes, padres y alumnos sin sobresaltos." },
      { icon: <Icon.lock />, h: "Bloqueo de accesos", p: "Suspende cuentas, exige firma electrónica y audita cada cambio." },
    ],
  },
  padres: {
    label: "Padres",
    glyph: "👨‍👩‍👧",
    eyebrow: "Para padres y madres",
    title: "Sigue el día de tus hijos sin perderte de un solo aviso.",
    desc: "Alertas instantáneas, calificaciones y citas con docentes en una sola bandeja. Adiós a los recados perdidos.",
    mockup: "phone",
    screen: "assets/screen-alerta.png",
    bullets: [
      { icon: <Icon.bell />, h: "Alertas instantáneas", p: "Suspensiones, recordatorios y convocatorias llegan al momento." },
      { icon: <Icon.grade />, h: "Calificaciones al día", p: "Consulta el avance por materia y periodo, con boletas firmables." },
      { icon: <Icon.calendar />, h: "Agenda citas con docentes", p: "Reserva horarios disponibles sin llamadas ni cadenas de mensajes." },
      { icon: <Icon.family />, h: "Varios hijos, una cuenta", p: "Cambia entre perfiles sin volver a iniciar sesión." },
    ],
  },
  docentes: {
    label: "Docentes",
    glyph: "👩‍🏫",
    eyebrow: "Para docentes",
    title: "Menos distracciones, más tiempo enseñando.",
    desc: "Mantén la comunicación con padres y la gestión de tus citas en un solo lugar — sin sacrificar tiempo de clase.",
    mockup: "phone",
    screen: "assets/screen-alerta.png",
    bullets: [
      { icon: <Icon.megaphone />, h: "Publica avisos por grupo", p: "Mensajes generales o urgentes, segmentados por materia y horario." },
      { icon: <Icon.calendar />, h: "Gestiona citas con padres", p: "Abre franjas, confirma asistencia y manda recordatorios automáticos." },
      { icon: <Icon.clock />, h: "Registro de asistencia", p: "Tu propia asistencia laboral, sincronizada con dirección y nómina." },
      { icon: <Icon.bell />, h: "Notificaciones del director", p: "Mantente al tanto de cambios de horario, juntas y avisos urgentes." },
    ],
  },
  alumnos: {
    label: "Alumnos",
    glyph: "🎓",
    eyebrow: "Para alumnas y alumnos",
    title: "Tu credencial, tu horario y tu escuela en el bolsillo.",
    desc: "Una identidad digital que vale dentro y fuera del salón. Sin plástico, sin cargar boletas.",
    mockup: "credencial",
    bullets: [
      { icon: <Icon.qr />, h: "Credencial digital con QR", p: "Identifícate con un escaneo, válido todo el ciclo escolar." },
      { icon: <Icon.clock />, h: "Historial de asistencia", p: "Revisa entradas, salidas y retardos por periodo y materia." },
      { icon: <Icon.calendar />, h: "Calendario escolar", p: "Exámenes, eventos y días sin clases — sincronizado con tu calendario." },
      { icon: <Icon.bell />, h: "Avisos directos", p: "Recibe lo importante sin saturarte: solo de tus grupos y docentes." },
    ],
  },
};

function PersonaFeatures({ initial }) {
  const validInitial = PERSONAS[initial] ? initial : "directores";
  const [active, setActive] = useStateS(validInitial);
  const order = ["directores", "padres", "docentes", "alumnos"];

  return (
    <section className="section alt" id="features">
      <div className="wrap">
        <div className="section-head">
          <Reveal>
            <div className="eyebrow">Funciones por rol</div>
            <h2 style={{ marginTop: 16 }}>Cada persona, su Squol.</h2>
            <p className="lead">Una sola plataforma con cuatro experiencias hechas a la medida — sin sentirse pesada para nadie.</p>
          </Reveal>
        </div>

        <Reveal>
          <div className="persona-tabs">
            {order.map(k => (
              <button
                key={k}
                className={active === k ? "active" : ""}
                onClick={() => setActive(k)}
              >
                <span>{PERSONAS[k].glyph}</span>
                {PERSONAS[k].label}
              </button>
            ))}
          </div>
        </Reveal>

        {order.map((k, i) => {
          const p = PERSONAS[k];
          if (active !== k) return null;
          const reverse = i % 2 === 1;
          return (
            <div key={k} className={`feature-row ${reverse ? 'reverse' : ''}`}>
              <Reveal className="feature-copy copy">
                <div className="eyebrow">{p.eyebrow}</div>
                <h2 style={{ marginTop: 16 }}>{p.title}</h2>
                <p className="lead">{p.desc}</p>
                <div className="feature-list">
                  {p.bullets.map((b, j) => (
                    <div className="item" key={j}>
                      <div className="check">{b.icon}</div>
                      <div>
                        <h4>{b.h}</h4>
                        <p>{b.p}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </Reveal>
              <Reveal className="feature-phone-stage" delay={120}>
                <div className="bg-glow" />
                <PersonaScene persona={k} />
              </Reveal>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ---------- QR CREDENCIAL ---------- */
function QrSection() {
  return (
    <section className="qr-section" id="credencial">
      <div className="wrap qr-grid">
        <Reveal>
          <div className="eyebrow" style={{ color: 'var(--accent)' }}>Credencial inteligente con QR</div>
          <h2 style={{ marginTop: 16, color: '#fff' }}>
            Seguridad moderna<br/>
            para <span className="accent">tu escuela.</span>
          </h2>
          <p className="lead" style={{ marginTop: 24 }}>
            Cada alumno tiene un código QR en su credencial. Entra al plantel con un escaneo y notifica a papá, mamá o tutor al instante, además de registrar la asistencia.
          </p>
          <div className="feature-list" style={{ marginTop: 40 }}>
            <div className="item"><div className="check"><Icon.shield/></div><div><h4>Sin datos sensibles a la vista</h4><p>El QR no expone información del alumno: excelente comunicación con máxima seguridad.</p></div></div>
            <div className="item"><div className="check"><Icon.scan/></div><div><h4>Registro de entrada automática</h4><p>El escaneo en la puerta levanta la asistencia y abre el torniquete al instante.</p></div></div>
            <div className="item"><div className="check"><Icon.bell/></div><div><h4>Notificación a padres en tiempo real</h4><p>"Camilo acaba de llegar a la escuela" — sin abrir otra app.</p></div></div>
          </div>
        </Reveal>
        <Reveal className="feature-phone-stage" delay={150}>
          <div className="bg-glow" />
          <QrCredentialPhone />
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- PLATFORMS ---------- */
function Platforms() {
  return (
    <section className="platforms section" id="plataformas">
      <div className="wrap">
        <div className="section-head">
          <Reveal>
            <div className="eyebrow">Disponible en todas las plataformas</div>
            <h2 style={{ marginTop: 16 }}>Un Squol para cada dispositivo.</h2>
            <p className="lead">La misma experiencia, sincronizada en tiempo real. Funciona en iPhone, Android y cualquier navegador moderno.</p>
          </Reveal>
        </div>
        <div className="platforms-grid">
          <Reveal>
            <div className="platform-card">
              <div className="icon"><Icon.apple/></div>
              <h3>iOS</h3>
              <p>App nativa para iPhone y iPad con notificaciones push, Face ID y soporte para Apple Wallet de la credencial QR.</p>
              <span className="tag">iOS 15+ · App Store</span>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="platform-card">
              <div className="icon"><Icon.android/></div>
              <h3>Android</h3>
              <p>App nativa optimizada para todo el ecosistema Android, desde gama básica hasta plegables. Notificaciones inmediatas.</p>
              <span className="tag">Android 9+ · Google Play</span>
            </div>
          </Reveal>
          <Reveal delay={240}>
            <div className="platform-card">
              <div className="icon"><Icon.web/></div>
              <h3>Web</h3>
              <p>Panel completo para directores y docentes en cualquier navegador. Sin instalar nada, con la misma seguridad.</p>
              <span className="tag">Cualquier navegador moderno</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- PRICING ---------- */
function Pricing() {
  const plans = [
    {
      name: "Squol Ámbar",
      price: "Gratis",
      unit: "sin costo — para siempre",
      descr: "Para empezar a digitalizar la comunicación con tu comunidad.",
      cta: "Empezar gratis",
      featured: false,
      features: [
        "Hasta 200 alumnos",
        "Alertas y avisos ilimitados",
        "Calificaciones del periodo pasado",
        "Calendario",
        "Soporte por correo y WhatsApp",
        "Credencial Inteligente (módulo opcional)",
      ],
    },
    {
      name: "Squol Jade",
      price: "1 mes",
      unit: "de prueba sin costo",
      strikePrice: "$399 / mes",
      descr: "Todo lo que necesita una escuela moderna.",
      cta: "Inscribir mi escuela",
      featured: false,
      features: [
        "Hasta 400 alumnos",
        "Todo lo del plan Squol Ámbar",
        "Historial de calificaciones",
        "Citas con docentes",
        "Credencial Inteligente",
        "Circulares",
        "Asistencia docente",
      ],
      footnote: "*Consulta cómo obtener Squol SIN COSTO durante todo el Ciclo Escolar.",
    },
    {
      name: "Squol Obsidiana",
      price: "3 meses",
      unit: "de prueba sin costo",
      strikePrice: "$599 / mes",
      descr: "Para escuelas grandes que quieren todo el ecosistema Squol.",
      cta: "Inscribir mi escuela",
      featured: true,
      features: [
        "Alumnos ilimitados",
        "Todo lo del plan Squol Jade",
        "Soporte prioritario",
        "Agente de cuenta dedicado",
      ],
      footnote: "*Consulta cómo obtener Squol SIN COSTO durante todo el Ciclo Escolar.",
    },
  ];

  return (
    <section className="pricing" id="precios">
      <div className="wrap">
        <div className="section-head">
          <Reveal>
            <div className="eyebrow">Precios</div>
            <h2 style={{ marginTop: 16 }}>Un plan para cada escuela.</h2>
            <p className="lead">Sin contratos largos, sin sorpresas. Paga solo por los alumnos activos cada mes.</p>
          </Reveal>
        </div>
        <div className="price-grid">
          {plans.map((p, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className={`price-card ${p.featured ? 'featured' : ''}`}>
                {p.featured && <span className="badge">Más elegido</span>}
                <div>
                  <h3>{p.name}</h3>
                  {p.sub && <div className="plan-sub">{p.sub}</div>}
                </div>
                {p.strikePrice && <div className="strike-price">{p.strikePrice}</div>}
                <div className="price">
                  <span className="amount">{p.price}</span>
                  <span className="unit">{p.unit}</span>
                </div>
                <p className="descr">{p.descr}</p>
                <ul className="features">
                  {p.features.map((f, j) => (
                    <li key={j}><Icon.check/> {f}</li>
                  ))}
                  {p.excluded && p.excluded.map((f, j) => (
                    <li key={'x'+j} className="excluded">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
                      {f}
                    </li>
                  ))}
                </ul>
                <a href="https://panel.squol.app" target="_blank" rel="noopener" className={`btn cta ${p.featured ? '' : 'outline'}`} style={{textDecoration:'none'}}>
                  {p.cta} <Icon.arrow className="arrow" style={{ width: 14, height: 14 }}/>
                </a>
                {p.footnote && <div className="plan-footnote">{p.footnote}</div>}
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal>
          <p className="pricing-note">
            <b>Precios y promociones por tiempo limitado.</b> Aprovecha las condiciones especiales que tenemos disponibles para tu escuela.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- TESTIMONIALS ---------- */
function Testimonials() {
  const items = [
    {
      quote: "Antes mandábamos avisos por tres grupos de WhatsApp y siempre es difícil controlar todo. Con Squol, todos enterados en menos de un minuto.",
      name: "María Fernanda Leyva",
      role: "Directora Escolar",
      city: "Tlalnepantla, Estado de México",
      initial: "ML",
    },
    {
      quote: "Llevo a tres hijos en la misma escuela. Tener la información tan accesible en una sola app me ahorra tiempo y estoy más al pendiente.",
      name: "Andrés Rivera",
      role: "Padre de familia",
      city: "Puebla, Puebla",
      initial: "AR",
    },
    {
      quote: "Tengo total control en mis citas con padres, me organizo mejor y no descuido tiempo de clases.",
      name: "Prof. Israel Guerrero",
      role: "Docente de Lengua Materna",
      city: "Guadalajara, Jalisco",
      initial: "IG",
    },
    {
      quote: "Me da mucha tranquilidad saber que llegaron a la escuela con las alertas.",
      name: "Laura Castro",
      role: "Madre de familia",
      city: "Monterrey, Nuevo León",
      initial: "LC",
    },
  ];

  return (
    <section className="section" id="testimonios">
      <div className="wrap">
        <div className="section-head">
          <Reveal>
            <div className="eyebrow">Lo que dicen las escuelas</div>
            <h2 style={{ marginTop: 16 }}>Historias reales, comunidades unidas.</h2>
          </Reveal>
        </div>
        <div className="testi-grid">
          {items.map((t, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="testi-card">
                <div className="quote-mark">“</div>
                <p className="quote">{t.quote}</p>
                <div className="who">
                  <div className="avatar">{t.initial}</div>
                  <div>
                    <div className="name">{t.name}</div>
                    <div className="role">{t.role} · {t.city}</div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FINAL CTA ---------- */
function FinalCta() {
  return (
    <section className="final-cta" id="contacto">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>¿Listo para empezar?</div>
          <h2 style={{ marginTop: 16 }}>
            ¿Listo para transformar <span className="accent">tu escuela?</span>
          </h2>
          <p className="lead">Agenda una demo de 20 minutos. Te mostramos Squol con datos de tu propia escuela y resolvemos cualquier duda.</p>
          <div className="ctas">
            <a href="https://panel.squol.app" target="_blank" rel="noopener" className="btn accent" style={{textDecoration:'none'}}>
              Inscribir mi escuela
              <Icon.arrow className="arrow" style={{ width: 16, height: 16 }} />
            </a>
          </div>
          <div className="note">
            <span className="pulse" />
            Respuesta en menos de 24 horas — y normalmente mucho antes.
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer({ onOpenLegal }) {
  return (
    <footer>
      <div className="wrap inner">
        <div className="brand">
          <img src="assets/logo-squol.png" alt="Squol" />
          <span>Squol</span>
        </div>
        <div className="links">
          <a
            href="#"
            onClick={(e) => {
              e.preventDefault();
              if (onOpenLegal) onOpenLegal('privacy');
            }}
          >
            Privacidad
          </a>
          <a
            href="#"
            onClick={(e) => {
              e.preventDefault();
              if (onOpenLegal) onOpenLegal('terms');
            }}
          >
            Términos
          </a>
          <a href="#">Contacto</a>
          <a href="#">Estado del servicio</a>
        </div>
        <div className="copy">© 2026 Aryento Studio · Hecho en México 🇲🇽</div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  TopNav, Hero, LogosBar, HowItWorks, PersonaFeatures, QrSection,
  Platforms, Pricing, Testimonials, FinalCta, Footer
});