/* Components for ASEC website */
const { useState, useEffect, useRef } = React;

// ---------- ICONS ----------
const Arrow = ({size=16}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14M13 5l7 7-7 7"/>
  </svg>
);
const ArrowDown = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 5v14M5 13l7 7 7-7"/>
  </svg>
);
const WA = () => (
  <svg viewBox="0 0 32 32"><path d="M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 01-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 01-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.03 1.318-1.044 2.264v.114c-.014.99.42 1.91.945 2.722 1.13 1.81 2.685 3.224 4.56 4.255.83.458 2.687 1.318 3.606 1.318.817 0 2.13-.33 2.43-1.146.13-.333.33-.78.33-1.116 0-.457-2.488-1.03-2.78-1.03zM16.11 3.765c-6.76 0-12.25 5.49-12.25 12.24 0 2.3.64 4.444 1.74 6.29L3.72 28.24l6.177-1.61a12.26 12.26 0 006.213 1.683c6.76 0 12.25-5.49 12.25-12.24S22.87 3.78 16.11 3.78z"/></svg>
);

// ---------- NAV ----------
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="nav-left">
          <a href="#" aria-label="ASEC"><img className="nav-logo" src="assets/logo.svg" alt="ASEC"/></a>
          <div className="nav-links">
            <a href="#programas">Programas</a>
            <a href="#asesor">Admisiones</a>
            <a href="#testimonios">Comunidad</a>
            <a href="#blog">Conocimiento</a>
            <a href="#campus">Campus</a>
          </div>
        </div>
        <div className="nav-right">
          <a href="#" className="btn btn-ghost" style={{padding:'10px 18px', fontSize:13}}>Portal alumno</a>
          <a href="#asesor" className="btn btn-primary" style={{padding:'12px 20px', fontSize:14}}>Inscríbete ya <Arrow size={14}/></a>
        </div>
      </div>
    </nav>
  );
}

// ---------- HEROES (4 variants) ----------
function HeroA() {
  return (
    <section className="hero hero-A">
      <div className="wrap">
        <div className="pill"><span className="dot"></span> Convocatoria Primavera 2026 abierta</div>
        <div className="grid" style={{marginTop: 28}}>
          <div>
            <h1>Tu futuro<br/>empieza en <em>ASEC</em>.</h1>
            <p className="lede">Centro de Estudios Universitarios Grupo ASEC. Prepa, Licenciaturas y Maestrías con acompañamiento real, becas y un ASECsor que camina contigo desde el día uno.</p>
            <div className="hero-foot">
              <a href="#asesor" className="btn btn-primary">Habla con tu ASECsor <Arrow/></a>
              <a href="#programas" className="btn btn-ghost">Ver programas</a>
            </div>
            <div className="stats">
              <div><div className="num">12k+</div><div className="lbl">Egresados desde 2003</div></div>
              <div><div className="num">97%</div><div className="lbl">Colocación laboral en 6m</div></div>
              <div><div className="num">24</div><div className="lbl">Programas académicos</div></div>
            </div>
          </div>
          <div className="photo">
            <img src={window.ph('estudiante enfermería — hero', 900, 1125, 'navy')} alt=""/>
            <div className="photo-tag"><span className="dot"/>Cristina · 5.º Enfermería</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroB() {
  return (
    <section className="hero hero-B">
      <div className="stage">
        <div className="bg"><img src={window.ph('salón de clases — full bleed', 1920, 1080, 'navy')} alt=""/></div>
        <div className="scrim"/>
        <div className="accent"/>
        <div className="wrap content">
          <div className="pill" style={{background:'rgba(255,255,255,.15)', color:'#fff', borderColor:'rgba(255,255,255,.25)'}}><span className="dot"/> Convocatoria Primavera 2026</div>
          <h1 style={{marginTop:20}}>Estudiar en ASEC<br/>ha sido la mejor <em style={{color:'#FFC857'}}>decisión</em></h1>
          <p className="lede">Prepa, Licenciaturas y Maestrías diseñadas para que ingreses, destaques y trabajes — con el apoyo de tu ASECsor en cada paso del camino.</p>
          <div className="hero-foot">
            <a href="#asesor" className="btn btn-primary">Inscríbete hoy <Arrow/></a>
            <a href="#programas" className="btn btn-white">Explorar programas</a>
          </div>
        </div>
        <div className="card">
          <div className="q">"ASEC me dio la confianza para cumplir mis metas sin dejar mi trabajo."</div>
          <div className="who">Cristina · 5.º semestre, Enfermería</div>
        </div>
      </div>
    </section>
  );
}

function HeroC() {
  return (
    <section className="hero hero-C">
      <div className="grid">
        <div className="left">
          <div>
            <div className="pill mono" style={{background:'rgba(255,255,255,.1)', color:'#fff', borderColor:'rgba(255,255,255,.2)'}}>EST. 2003 · CEU GRUPO ASEC</div>
            <h1 style={{marginTop:24}}>Talento que<br/>no espera <em>permisos</em>.</h1>
            <p className="lede" style={{marginTop:22}}>La inteligencia y el talento no dependen de la situación económica. En ASEC abrimos la puerta: becas, planes flexibles y programas acreditados.</p>
          </div>
          <div className="hero-foot" style={{marginTop:30, display:'flex', gap:14, flexWrap:'wrap'}}>
            <a href="#asesor" className="btn btn-primary">Habla con tu ASECsor <Arrow/></a>
            <a href="#programas" className="btn" style={{background:'rgba(255,255,255,.1)', color:'#fff', border:'1.5px solid rgba(255,255,255,.3)'}}>Ver programas <ArrowDown/></a>
          </div>
        </div>
        <div className="right">
          <div className="tag"><span style={{color:'var(--coral)', marginRight:6}}>●</span> Live · Campus Clínica 9</div>
          <img src={window.ph('campus ASEC · toma grande', 1200, 900, 'coral')} alt=""/>
        </div>
      </div>
      <div className="strip">
        <div className="track">
          {Array(2).fill(0).map((_,k)=>(
            <React.Fragment key={k}>
              <span><b>+12,000</b> egresados</span>
              <span><b>97%</b> colocación laboral</span>
              <span><b>24</b> programas académicos</span>
              <span><b>Becas</b> hasta 70%</span>
              <span><b>RVOE</b> SEP · FIMPES · CASE</span>
              <span><b>edX</b> certificaciones internacionales</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function HeroD() {
  return (
    <section className="hero hero-D">
      <div className="wrap">
        <div className="eyebrow">Centro de Estudios Universitarios Grupo ASEC</div>
        <h1 style={{marginTop:18}}>
          <span>Estudia.</span> <span className="outline">Crece.</span><br/>
          <span className="coral">Construye</span> <span>tu futuro.</span>
        </h1>
        <div className="row">
          <div>
            <p className="lede">Prepa, Licenciaturas y Maestrías con RVOE, acompañamiento 1-a-1 y becas reales. Sin filas. Sin letra chiquita. Con un ASECsor que te guía desde antes de inscribirte.</p>
            <div className="hero-foot">
              <a href="#asesor" className="btn btn-primary">Habla con tu ASECsor <Arrow/></a>
              <a href="#programas" className="btn btn-ghost">Ver programas</a>
            </div>
          </div>
          <div className="photos">
            <div className="p"><img src={window.ph('estudiante A', 600, 800, 'navy')} alt=""/></div>
            <div className="p"><img src={window.ph('estudiante B', 600, 800, 'coral')} alt=""/></div>
          </div>
        </div>
      </div>
    </section>
  );
}

const HEROES = { A: HeroA, B: HeroB, C: HeroC, D: HeroD };

// ---------- PROGRAMS ----------
function Programs() {
  const data = [
    { tag:'01 / PREPA', title:'Preparatoria ASEC', meta:['3 años','Bachillerato general','RVOE SEP'], desc:'Un bachillerato que te prepara para la universidad y la vida con mentoría académica personalizada.', tone:'navy' },
    { tag:'02 / LICENCIATURAS', title:'Licenciaturas', meta:['12 programas','Modalidad mixta','Becas hasta 70%'], desc:'Enfermería, Administración, Derecho, Psicología y más, con prácticas profesionales desde el 3.º semestre.', tone:'coral' },
    { tag:'03 / MAESTRÍAS', title:'Maestrías', meta:['6 programas','16 meses','Certificación edX'], desc:'Posgrados pensados para profesionales que trabajan: fines de semana, titulación ágil y red internacional.', tone:'ink' },
  ];
  return (
    <section className="section" id="programas">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{marginBottom:16}}>— Programas académicos</div>
            <h2>Un camino<br/>para cada meta.</h2>
          </div>
          <div className="side">Elige tu ruta, desde la preparatoria hasta posgrado. Todos los programas cuentan con RVOE, acompañamiento personal y un plan de financiamiento a tu medida.</div>
        </div>
        <div className="programs">
          {data.map((p, i) => (
            <div className="prog" key={i}>
              <div className="top">
                <img src={window.ph(p.title.toLowerCase(), 800, 600, p.tone)} alt=""/>
                <div className="badge">{p.tag}</div>
              </div>
              <div className="body">
                <h3>{p.title}</h3>
                <div className="meta">{p.meta.map((m,j)=><span key={j}>{m}</span>)}</div>
                <p>{p.desc}</p>
                <a href="#asesor" className="cta">Ver programa <Arrow/></a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- QUIZ CTA ----------
function Quiz() {
  const tiles = [
    'Salud','Negocios','Derecho','Diseño','Educación','Ingeniería',
    'Tecnología','Psicología','Comunicación','Arte','Finanzas','Ciencias'
  ];
  const [active, setActive] = useState([0, 4, 7]);
  useEffect(() => {
    const id = setInterval(() => {
      setActive(() => {
        const s = new Set();
        while (s.size < 3) s.add(Math.floor(Math.random()*12));
        return [...s];
      });
    }, 1400);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="section" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="quiz">
          <div className="l">
            <div className="eyebrow" style={{color:'#FFC857', marginBottom:16}}>— ¿No sabes qué estudiar?</div>
            <h2>7 preguntas.<br/>La carrera <em>hecha para ti</em>.</h2>
            <p>Nuestro test vocacional cruza tus intereses con las carreras donde más egresados de ASEC están trabajando hoy. Recibes una ruta clara, becas recomendadas y una cita con un ASECsor.</p>
            <div className="row">
              <a href="#" className="btn btn-primary">Empezar test (gratis) <Arrow/></a>
              <a href="#" className="btn" style={{background:'transparent', color:'#fff', border:'1.5px solid rgba(255,255,255,.3)'}}>Cómo funciona</a>
            </div>
          </div>
          <div className="r">
            <div className="tiles">
              {tiles.map((t, i) => (
                <div key={i} className={'tile ' + (active.includes(i) ? 'on' : '')}>{t}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- TESTIMONIALS ----------
function Testimonials() {
  return (
    <section className="section testimonials" id="testimonios">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{marginBottom:16}}>— Testimonios</div>
            <h2>Historias reales.<br/>Metas cumplidas.</h2>
          </div>
          <div className="side">Cada semestre más de 2,400 estudiantes eligen ASEC. Estas son algunas de las razones por las que se quedan.</div>
        </div>
        <div className="t-grid">
          <div className="t-main">
            <div className="ph"><img src={window.ph('testimonio principal — Cristina enfermería', 1100, 700, 'navy')} alt=""/></div>
            <div className="body">
              <div className="quote"><span className="q">“</span>Estudiar en ASEC ha sido la mejor decisión para cumplir mis metas. Los maestros me conocen por mi nombre y eso cambia todo.</div>
              <div className="who">
                <div><b style={{color:'#fff'}}>Cristina M.</b> · 5.º semestre, Enfermería</div>
                <div className="mono">01 / 04</div>
              </div>
            </div>
          </div>
          <div className="t-side">
            <div className="t-card">
              <div className="head">
                <div className="avatar"><img src={window.ph('L', 100, 100, 'coral')} alt=""/></div>
                <div><div className="name">Luis A.</div><div className="role">Egresado · Administración</div></div>
              </div>
              <div className="text">"Entré trabajando medio tiempo y salí dirigiendo el área. El plan flexible y el ASECsor hicieron la diferencia."</div>
              <div className="mono" style={{fontSize:11, color:'var(--muted)'}}>GEN. 2022</div>
            </div>
            <div className="t-card">
              <div className="head">
                <div className="avatar"><img src={window.ph('D', 100, 100, 'navy')} alt=""/></div>
                <div><div className="name">Daniela R.</div><div className="role">4.º Psicología</div></div>
              </div>
              <div className="text">"Las prácticas desde 3.º me dieron experiencia real. Aquí no esperas a titularte para empezar tu carrera."</div>
              <div className="mono" style={{fontSize:11, color:'var(--muted)'}}>GEN. 2024</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- ASECSOR ----------
function Asesor() {
  return (
    <section className="section" id="asesor">
      <div className="wrap">
        <div className="asesor">
          <div className="l">
            <div className="eyebrow">— Admisiones</div>
            <h2>Habla con tu<br/>ASECsor.</h2>
            <p>Un guía humano, no un bot. Te contactamos en menos de 24 horas con un plan de carrera y financiamiento hecho a tu medida — sin costo y sin compromiso.</p>
            <form onSubmit={e=>{e.preventDefault(); alert('¡Gracias! Tu ASECsor te contactará pronto.')}}>
              <input placeholder="Nombre completo" required/>
              <input placeholder="Teléfono (WhatsApp)" required/>
              <input className="full" type="email" placeholder="Correo electrónico" required/>
              <select className="full" required defaultValue="">
                <option value="" disabled>¿Qué te interesa estudiar?</option>
                <option>Preparatoria</option>
                <option>Licenciatura</option>
                <option>Maestría</option>
                <option>Aún no decido — quiero tomar el test</option>
              </select>
              <div className="submit">
                <button type="submit" className="btn btn-dark">Quiero mi plan <Arrow/></button>
                <span className="note">Respuesta en menos de 24h · Nunca compartimos tus datos.</span>
              </div>
            </form>
          </div>
          <div className="r">
            <div className="photo"><img src={window.ph('asesor académico — foto cálida', 900, 1100, 'navy')} alt=""/></div>
            <div className="overlay">
              <div className="av">RM</div>
              <div className="t"><b>Rosa Martínez</b><br/>Tu ASECsor · Zona Oriente</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- DIRECTOR ----------
function Director() {
  return (
    <section className="director">
      <div className="wrap">
        <div className="photo"><img src={window.ph('R. Ozuna · Director General', 900, 1125, 'ink')} alt=""/></div>
        <div className="t">
          <div className="eyebrow">— Carta del Director</div>
          <blockquote style={{marginTop:16}}>La inteligencia y el talento no dependen de la situación económica, y queremos asegurarnos de que nuestras puertas estén abiertas a los jóvenes.</blockquote>
          <cite><span className="bar"/><div><div className="name">R. Ozuna</div><div className="role">Director General · CEU Grupo ASEC</div></div></cite>
        </div>
      </div>
    </section>
  );
}

// ---------- BLOG ----------
function Blog() {
  const posts = [
    { cat:'Emprendimiento', title:'El emprendimiento en la era de la inteligencia artificial', meta:'Lectura · 6 min', img: window.ph('startup & IA', 900, 540, 'navy') },
    { cat:'Salud', title:'Entre la empatía y la ciencia: el desafío del profesional de la salud', meta:'Lectura · 8 min', img: window.ph('salud & empatía', 900, 540, 'coral') },
    { cat:'Tecnología', title:'Cinco herramientas digitales que todo universitario debería conocer', meta:'Lectura · 5 min', img: window.ph('herramientas digitales', 900, 540, 'sand') },
  ];
  return (
    <section className="section" id="blog">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{marginBottom:16}}>— Conocimiento continuo</div>
            <h2>Aprende antes<br/>de estudiar.</h2>
          </div>
          <div className="side">Artículos, guías y charlas de nuestros profesores. Porque educarse no empieza el primer día de clases.</div>
        </div>
        <div className="blog-grid">
          {posts.map((p, i) => (
            <a href="#" className="post" key={i}>
              <div className="img"><img src={p.img} alt=""/></div>
              <div className="body">
                <div className="cat">{p.cat}</div>
                <h4>{p.title}</h4>
                <div className="meta"><span>{p.meta}</span><span>Leer <Arrow size={12}/></span></div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- CAMPUS + VIDEO ----------
function Campus() {
  return (
    <section className="section" id="campus">
      <div className="wrap">
        <div className="video-block" style={{marginBottom:36}}>
          <img src={window.ph('video institucional ASEC', 1600, 800, 'navy')} alt=""/>
          <div className="play"><svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg></div>
          <div className="cap">
            <h3>Un día en ASEC</h3>
            <small>02:47 · Centro de Estudios Universitarios Grupo ASEC</small>
          </div>
        </div>
        <div className="campus">
          <div className="l">
            <div className="eyebrow" style={{color:'rgba(255,255,255,.6)'}}>— Campus Clínica 9</div>
            <h2>Te esperamos en<br/>nuestras instalaciones.</h2>
            <div className="list">
              <div className="row"><div className="k">Dirección</div><div>Av. Cuauhtémoc esq. Humboldt, Col. Centro</div></div>
              <div className="row"><div className="k">Horario</div><div>Lun a Vie · 7:00 — 21:00 &nbsp;·&nbsp; Sáb · 8:00 — 14:00</div></div>
              <div className="row"><div className="k">Teléfono</div><div>+52 (55) 5555 0190</div></div>
              <div className="row"><div className="k">WhatsApp</div><div>+52 55 1234 5678 · respuesta inmediata</div></div>
            </div>
            <div style={{marginTop:28, display:'flex', gap:12, flexWrap:'wrap'}}>
              <a href="#" className="btn btn-primary">Agendar visita <Arrow/></a>
              <a href="#" className="btn" style={{background:'rgba(255,255,255,.1)', color:'#fff', border:'1.5px solid rgba(255,255,255,.2)'}}>Ver en Maps</a>
            </div>
          </div>
          <div className="map">
            <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
              <rect width="400" height="400" fill="#e9e4d6"/>
              {/* Fake streets */}
              <g stroke="#d2c9b2" strokeWidth="18" fill="none">
                <path d="M -10 120 L 410 80"/>
                <path d="M -10 250 L 410 280"/>
                <path d="M 100 -10 L 140 410"/>
                <path d="M 280 -10 L 260 410"/>
              </g>
              <g stroke="#fff" strokeWidth="2" fill="none" opacity=".8">
                <path d="M -10 120 L 410 80"/>
                <path d="M -10 250 L 410 280"/>
                <path d="M 100 -10 L 140 410"/>
                <path d="M 280 -10 L 260 410"/>
              </g>
              {/* Blocks */}
              <g fill="#f5efe0">
                <rect x="10" y="140" width="80" height="90"/>
                <rect x="170" y="130" width="80" height="110"/>
                <rect x="300" y="115" width="90" height="140"/>
                <rect x="10" y="280" width="120" height="110"/>
                <rect x="170" y="290" width="80" height="100"/>
                <rect x="280" y="300" width="110" height="90"/>
              </g>
              <g fontFamily="ui-monospace, monospace" fontSize="10" fill="#a89c82">
                <text x="40" y="100">Av. Cuauhtémoc</text>
                <text x="40" y="270">Humboldt</text>
                <text x="300" y="40" transform="rotate(88 300 40)">Josefa V. Arévalo</text>
              </g>
            </svg>
            <div className="pin">📍 ASEC Clínica 9</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- ANUNCIOS ----------
function Anuncios() {
  return (
    <section className="section" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{marginBottom:16}}>— Anuncios</div>
            <h2>Lo que está<br/>pasando ahora.</h2>
          </div>
          <div className="side">Fechas, becas y eventos abiertos. Si quieres recibirlos en WhatsApp, dínoslo a tu ASECsor.</div>
        </div>
        <div className="announcements">
          <div className="an-main">
            <div className="cat">Beca destacada · hasta 30 abr</div>
            <div>
              <h3>Beca Talento 2026:<br/>hasta 70% en licenciaturas</h3>
              <p>Dirigida a estudiantes con promedio igual o mayor a 9.0 de preparatoria. Plazas limitadas. Aplica con tu ASECsor.</p>
            </div>
            <a href="#asesor" className="btn btn-white" style={{alignSelf:'start'}}>Aplicar a la beca <Arrow/></a>
          </div>
          <div className="an-sm">
            <div className="cat">Evento · Sáb 15 May</div>
            <h4>Open Day ASEC — recorre el campus, conoce maestros y resuelve tus dudas.</h4>
            <div className="when">09:00 · Campus Clínica 9</div>
          </div>
          <div className="an-sm alt">
            <div className="cat">Inicio de clases</div>
            <h4>Semestre Primavera comienza el lunes 8 de junio. Últimos lugares disponibles.</h4>
            <div className="when">08 Jun · Todos los programas</div>
          </div>
          <div className="an-sm alt">
            <div className="cat">Nuevo programa</div>
            <h4>Maestría en Inteligencia Artificial Aplicada — convocatoria única.</h4>
            <div className="when">Inicio · Ago 2026</div>
          </div>
          <div className="an-sm">
            <div className="cat">Alianza · edX</div>
            <h4>Certificaciones internacionales gratuitas para estudiantes activos.</h4>
            <div className="when">Disponible ahora</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- CRED ----------
function Credentials() {
  return (
    <section className="section" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="eyebrow" style={{textAlign:'center', marginBottom:20}}>— Acreditaciones y alianzas</div>
        <div className="cred">
          <div className="logo">SEP</div>
          <div className="logo">RVOE</div>
          <div className="logo">FIMPES</div>
          <div className="logo">CASE</div>
          <div className="logo">ANUIES</div>
          <div className="logo">edX</div>
          <div className="logo">Microsoft · Learn</div>
        </div>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="cols">
          <div className="brand">
            <img className="logo" src="assets/logo.svg" alt="ASEC"/>
            <p>Centro de Estudios Universitarios Grupo ASEC. Educación que abre puertas — desde 2003.</p>
            <div className="socials">
              <a href="#" aria-label="Instagram"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".5" fill="#fff"/></svg></a>
              <a href="#" aria-label="Facebook"><svg width="16" height="16" viewBox="0 0 24 24" fill="#fff"><path d="M13 22v-8h3l.5-4H13V7.5c0-1 .3-1.5 1.7-1.5H17V2.2C16.6 2.1 15.3 2 13.8 2 10.9 2 9 3.7 9 6.9V10H6v4h3v8h4z"/></svg></a>
              <a href="#" aria-label="TikTok"><svg width="16" height="16" viewBox="0 0 24 24" fill="#fff"><path d="M20 8.5a6.3 6.3 0 0 1-3.7-1.2v7.5a5.8 5.8 0 1 1-5.8-5.8v3a2.8 2.8 0 1 0 2.8 2.8V2h3a4 4 0 0 0 3.7 3.5z"/></svg></a>
              <a href="#" aria-label="YouTube"><svg width="16" height="16" viewBox="0 0 24 24" fill="#fff"><path d="M22 12s0-3.3-.4-4.9A2.5 2.5 0 0 0 19.8 5C18.2 4.6 12 4.6 12 4.6s-6.2 0-7.8.4A2.5 2.5 0 0 0 2.4 7.1C2 8.7 2 12 2 12s0 3.3.4 4.9c.2.9.9 1.6 1.8 1.9 1.6.4 7.8.4 7.8.4s6.2 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.9c.4-1.6.4-4.9.4-4.9zM10 15V9l5 3-5 3z"/></svg></a>
            </div>
          </div>
          <div>
            <h5>Programas</h5>
            <ul><li><a href="#">Preparatoria</a></li><li><a href="#">Licenciaturas</a></li><li><a href="#">Maestrías</a></li><li><a href="#">Educación continua</a></li><li><a href="#">Certificaciones edX</a></li></ul>
          </div>
          <div>
            <h5>Admisiones</h5>
            <ul><li><a href="#asesor">Habla con tu ASECsor</a></li><li><a href="#">Test vocacional</a></li><li><a href="#">Becas y financiamiento</a></li><li><a href="#">Revalidación</a></li><li><a href="#">Calendario escolar</a></li></ul>
          </div>
          <div>
            <h5>Contacto</h5>
            <ul>
              <li>Av. Cuauhtémoc esq. Humboldt</li>
              <li>Col. Centro</li>
              <li>+52 (55) 5555 0190</li>
              <li>hola@asec.edu.mx</li>
            </ul>
          </div>
        </div>
        <div className="bottom">
          <div>© 2026 Centro de Estudios Universitarios Grupo ASEC. Todos los derechos reservados.</div>
          <div style={{display:'flex', gap:24}}>
            <a href="#">Aviso de privacidad</a>
            <a href="#">Términos</a>
            <a href="#">RVOE</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------- TWEAKS PANEL ----------
function TweaksPanel({variant, setVariant, visible}) {
  if (!visible) return null;
  return (
    <div className="tweaks-panel">
      <h6>Tweaks · Hero variant</h6>
      <div className="opts">
        {['A','B','C','D'].map(k => (
          <button key={k} className={variant===k?'on':''} onClick={()=>setVariant(k)}>
            {k === 'A' && 'Editorial'}
            {k === 'B' && 'Full-bleed'}
            {k === 'C' && 'Asimétrico'}
            {k === 'D' && 'Tipográfico'}
          </button>
        ))}
      </div>
      <div style={{marginTop:12, fontSize:11.5, color:'var(--muted)', lineHeight:1.5}}>Activa/desactiva desde la barra superior para ocultar este panel.</div>
    </div>
  );
}

// Expose globally for babel scripts
Object.assign(window, {
  Nav, HEROES, Programs, Quiz, Testimonials, Asesor, Director, Blog, Campus, Anuncios, Credentials, Footer, TweaksPanel, WA
});