"use client";

import Image from "next/image";
import { useEffect, useRef, useState, type FormEvent } from "react";
import { loadWeeklyPromotion, type WeeklyPromotion } from "./promotion-workbook";

const defaultWeeklyPromotion: WeeklyPromotion = {
  course: "Técnico en Mecatrónica",
  offer: "4492254763",
  image: "/item/promocion-semanal.jpeg",
};

const careers = [
  { num: "01", name: "Técnico en Mecatrónica", text: "Integra mecánica, electrónica y control para intervenir sistemas automatizados.", image: "/item/mechatronics.jpeg", focus: "Automatización + control" },
  { num: "02", name: "Técnico en Mantenimiento Industrial", text: "Desarrolla capacidades para conservar equipos, diagnosticar fallas y sostener la operación.", image: "/item/industrial-maintenance.jpeg", focus: "Diagnóstico + confiabilidad" },
  { num: "03", name: "Técnico en Aire Acondicionado y Refrigeración", text: "Aprende instalación, operación y mantenimiento de sistemas térmicos y de refrigeración.", image: "/item/hvac.jpeg", focus: "Climatización + eficiencia" },
  { num: "04", name: "Técnico en Autos Híbridos", text: "Prepárate para diagnosticar y dar servicio a tecnologías de propulsión híbrida.", image: "/item/electric-cars.jpeg", focus: "Movilidad + alto voltaje" },
  { num: "05", name: "Técnico en Autos Eléctricos", text: "Especialízate en baterías, electrónica de potencia, diagnóstico y mantenimiento eléctrico.", image: "/item/electronics.jpeg", focus: "Baterías + electrónica" },
];

const workshops = ["Electricidad básica", "Tarjetas electrónicas", "Paneles solares", "Conversión automotriz", "Baterías"];
const diplomas = [
  { name: "Automatización", image: "/item/diplomados/automatizacion.png" },
  { name: "Refrigeración", image: "/item/diplomados/refrigeracion.png" },
  { name: "Electricidad", image: "/item/diplomados/electricidad.png" },
  { name: "Mantenimiento mecánico", image: "/item/diplomados/mantenimiento-mecanico.png" },
  { name: "Mantenimiento eléctrico", image: "/item/diplomados/mantenimiento-electrico.png" },
  { name: "Mantenimiento electrónico", image: "/item/diplomados/mantenimiento-electronico.png" },
];

export default function Home() {
  const [showEnrollmentAd, setShowEnrollmentAd] = useState(true);
  const [weeklyPromotion, setWeeklyPromotion] = useState(defaultWeeklyPromotion);
  const closeAdButton = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    let active = true;
    let workbookImage = "";

    loadWeeklyPromotion()
      .then((promotion) => {
        workbookImage = promotion.image;
        if (active) setWeeklyPromotion(promotion);
      })
      .catch((error) => console.warn("No se pudo cargar la promoción semanal.", error));

    return () => {
      active = false;
      if (workbookImage.startsWith("blob:")) URL.revokeObjectURL(workbookImage);
    };
  }, []);

  useEffect(() => {
    if (!showEnrollmentAd) return;

    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    closeAdButton.current?.focus();

    function closeWithEscape(event: KeyboardEvent) {
      if (event.key === "Escape") setShowEnrollmentAd(false);
    }

    document.addEventListener("keydown", closeWithEscape);
    return () => {
      document.body.style.overflow = previousOverflow;
      document.removeEventListener("keydown", closeWithEscape);
    };
  }, [showEnrollmentAd]);

  function handleInquirySubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const nombre = String(data.get("nombre") || "").trim();
    const whatsapp = String(data.get("whatsapp") || "").trim();
    const interes = String(data.get("interes") || "").trim();
    const message = `Hola ITEM, deseo solicitar información.\n\nNombre: ${nombre}\nWhatsApp: ${whatsapp}\nTema de interés: ${interes}`;
    window.open(`https://wa.me/524495791652?text=${encodeURIComponent(message)}`, "_blank", "noopener,noreferrer");
  }

  return <main>
    <a className="skipLink" href="#contenido">Saltar al contenido</a>
    {showEnrollmentAd && (
      <div className="enrollmentAdBackdrop" role="presentation">
        <section className="enrollmentAd" role="dialog" aria-modal="true" aria-labelledby="enrollment-ad-title" aria-describedby="enrollment-ad-description">
          <button ref={closeAdButton} className="enrollmentAdClose" type="button" onClick={() => setShowEnrollmentAd(false)} aria-label="Cerrar anuncio de inscripciones">×</button>
          <div className="enrollmentAdImage">
            <img src={weeklyPromotion.image} alt={`Imagen promocional de ${weeklyPromotion.course}`} />
            <span>Inscripciones abiertas</span>
          </div>
          <div className="enrollmentAdContent">
            <p className="enrollmentAdKicker">Convierte tu talento en una profesión</p>
            <h2 id="enrollment-ad-title">Estudia <em>{weeklyPromotion.course}</em></h2>
            <p id="enrollment-ad-description">Aprende mecánica, electrónica, automatización y control con una formación práctica conectada con la industria.</p>
            <div className="enrollmentAdOffer"><span>Promoción de la semana</span><strong>{weeklyPromotion.offer}</strong></div>
            <ul aria-label="Beneficios de la carrera">
              <li>Formación práctica</li>
              <li>Tecnología aplicada</li>
              <li>Perfil con futuro</li>
            </ul>
            <a className="enrollmentAdButton" href="#solicitud" onClick={() => setShowEnrollmentAd(false)}>Quiero inscribirme <span>↗</span></a>
            <button className="enrollmentAdContinue" type="button" onClick={() => setShowEnrollmentAd(false)}>Seguir viendo la página</button>
          </div>
        </section>
      </div>
    )}
    <header className="topbar">
      <a href="#inicio" className="headerLogo" aria-label="ITEM, inicio"><Image src="/item/logo-item-transparent.png" alt="ITEM" width={220} height={110} priority /></a>
      <nav aria-label="Navegación principal"><a href="#carreras">Carreras</a><a href="#formacion">Cursos</a><a href="#diplomados">Diplomados</a><a href="#instituto">Instituto</a><a href="#franquicia">Franquicia</a></nav>
      <details className="mobileNav"><summary aria-label="Abrir menú de navegación">Menú</summary><div><a href="#carreras">Carreras</a><a href="#formacion">Cursos</a><a href="#diplomados">Diplomados</a><a href="#instituto">Instituto</a><a href="#franquicia">Franquicia</a></div></details>
      <a className="navButton" href="#solicitud">Solicita informes <span>↗</span></a>
    </header>

    <section className="hero" id="inicio" aria-labelledby="titulo-principal">
      <Image src="/item/campus-night.jpeg" alt="Propuesta visual de las instalaciones de ITEM" fill priority sizes="100vw" className="heroImage" />
      <div className="heroShade" />
      <div className="heroContent">
        <div className="institutionName"><Image src="/item/logo-item-transparent.png" alt="Logotipo de ITEM" width={176} height={88} priority /><p>Instituto Tecnológico <span>en Electrónica y Mecatrónica</span></p></div>
        <p className="overline">Innovación · Tecnología · Formación profesional</p>
        <h1 id="titulo-principal">Formamos el talento que<br/><span>transforma el futuro.</span></h1>
        <p>Educación técnica práctica en electrónica, mecatrónica, mantenimiento y movilidad eléctrica, conectada con las necesidades reales de la industria.</p>
        <div className="heroActions"><a className="button red" href="#carreras">Conoce las carreras <span>→</span></a><a className="button outline" href="#solicitud">Habla con admisiones</a></div>
      </div>
      <div className="heroCiea"><Image src="/item/logo-ciea.jpeg" alt="Logotipo de certificación CIEA" fill sizes="(max-width: 850px) 105px, 165px" /></div>
      <div className="heroFoot"><span>Formación desde secundaria terminada</span><span>Aprendizaje práctico</span><span>Enfoque industrial</span></div>
    </section>

    <div id="contenido" tabIndex={-1}><section className="intro" id="carreras">
      <div className="kicker">Oferta académica</div>
      <div><h2>Aprende haciendo.<br/><em>Crece trabajando.</em></h2><p>Rutas técnicas para desarrollar habilidades aplicables, incorporarte al mercado laboral y construir una trayectoria profesional en sectores con alta demanda.</p></div>
    </section></div>

    <section className="careers">
      {careers.map((career) => <article className="career" key={career.num}>
        <div className="careerImage"><Image src={career.image} alt={`Formación en ${career.name}`} fill sizes="(max-width: 800px) 100vw, 40vw" /></div>
        <div className="careerBody"><span className="number">{career.num}</span><p className="focus">{career.focus}</p><h3>{career.name}</h3><p>{career.text}</p><a href="#solicitud">Solicitar plan de estudios <span>↗</span></a></div>
      </article>)}
    </section>

    <section className="portfolio" id="formacion">
      <div className="portfolioImage"><Image src="/item/specialties.jpeg" alt="Especialidades técnicas ITEM" fill sizes="(max-width: 800px) 100vw, 40vw" /></div>
      <div className="portfolioCopy"><div className="kicker gold">Formación continua</div><h2>Capacitación que responde a la industria.</h2><p>Complementa tu perfil o actualiza a tu equipo con contenidos enfocados en aplicación inmediata.</p>
        <div className="program"><span>Talleres</span><ul>{workshops.map(x=><li key={x}>{x}</li>)}</ul></div>
        <a className="button goldButton" href="#solicitud">Cotizar capacitación <span>→</span></a>
      </div>
    </section>

    <section className="diplomas" id="diplomados">
      <div className="diplomaIntro"><div className="kicker">Oferta de diplomados</div><h2>Especialízate para<br/><em>avanzar profesionalmente.</em></h2><p>Programas de formación práctica para fortalecer tus habilidades y responder a las necesidades actuales de la industria.</p></div>
      <div className="diplomaCards">{diplomas.map((diploma, index) => <article key={diploma.name}><div className="diplomaImage"><Image src={diploma.image} alt={`Diplomado en ${diploma.name}`} fill sizes="(max-width: 850px) 100vw, 33vw" /></div><div className="diplomaBody"><span>{String(index + 1).padStart(2, "0")}</span><h3>Diplomado en<br/>{diploma.name}</h3><a href="#solicitud" aria-label={`Solicitar informes del Diplomado en ${diploma.name}`}>Solicitar informes <b>↗</b></a></div></article>)}</div>
    </section>

    <section className="path">
      <div className="kicker">Tu ruta en ITEM</div><h2>Una formación orientada a avanzar.</h2>
      <div className="pathSteps"><article><b>01</b><h3>Acceso</h3><p>Ingreso desde secundaria terminada y una ruta técnica clara.</p></article><article><b>02</b><h3>Capacidad</h3><p>Práctica en electrónica, mecatrónica y sistemas industriales.</p></article><article><b>03</b><h3>Vinculación</h3><p>Competencias alineadas con necesidades reales de empresas.</p></article><article><b>04</b><h3>Empleo</h3><p>Acompañamiento hacia oportunidades laborales y crecimiento profesional.</p></article></div>
      <p className="legal">La propuesta de acompañamiento y cualquier garantía de colocación están sujetas a requisitos, evidencia y términos contractuales informados por ITEM.</p>
    </section>

    <section className="campus" id="instituto">
      <div className="campusCopy"><div className="kicker gold">Conoce ITEM</div><h2>Una identidad construida para el futuro.</h2><p>ITEM impulsa una educación tecnológica accesible, práctica y conectada con la realidad industrial. Su imagen institucional une innovación, confianza y formación profesional.</p><div className="values"><span>Innovación</span><span>Tecnología</span><span>Práctica</span><span>Empleabilidad</span></div></div>
      <div className="campusGallery"><div className="wide"><Image src="/item/campus-day.jpeg" alt="Propuesta diurna de fachada ITEM" fill sizes="60vw" /></div><div><Image src="/item/office.jpeg" alt="Propuesta de oficina institucional ITEM" fill sizes="30vw" /></div><div><Image src="/item/stationery.jpeg" alt="Identidad gráfica institucional ITEM" fill sizes="30vw" /></div></div>
    </section>

    <section className="franchise" id="franquicia">
      <div className="franchiseLead"><div className="kicker gold">Una inversión con propósito</div><p className="franchiseEyebrow">Franquicia ITEM</p><h2>Invierte en el talento que mueve a la industria.</h2><p className="franchiseIntro">Participa en un modelo educativo con vocación de crecimiento: formación técnica práctica, una marca con identidad propia y una oferta capaz de atender estudiantes, profesionales y empresas.</p><div className="franchisePromise"><span>Educación</span><i>+</i><span>Industria</span><i>+</i><span>Comunidad</span></div></div>
      <div className="franchiseOpportunity"><span className="opportunityLabel">La oportunidad</span><h3>Un centro. Diversas líneas de valor.</h3><div className="revenueGrid"><article><div className="revenueImage"><Image src="/item/mechatronics.jpeg" alt="Estudiante en formación técnica de mecatrónica" fill sizes="(max-width: 600px) 100vw, 25vw" /></div><div className="revenueBody"><b>01</b><h4>Carreras técnicas</h4><p>Programas orientados a habilidades con aplicación laboral.</p></div></article><article><div className="revenueImage"><Image src="/item/diplomados/automatizacion.png" alt="Formación práctica en automatización" fill sizes="(max-width: 600px) 100vw, 25vw" /></div><div className="revenueBody"><b>02</b><h4>Diplomados y cursos</h4><p>Formación continua para ampliar el alcance del centro.</p></div></article><article><div className="revenueImage"><Image src="/item/specialties.jpeg" alt="Capacitación técnica para la industria" fill sizes="(max-width: 600px) 100vw, 25vw" /></div><div className="revenueBody"><b>03</b><h4>Capacitación empresarial</h4><p>Soluciones para las necesidades técnicas de la industria local.</p></div></article><article><div className="revenueImage"><Image src="/item/uniform.jpeg" alt="Comunidad estudiantil especializada de ITEM" fill sizes="(max-width: 600px) 100vw, 25vw" /></div><div className="revenueBody"><b>04</b><h4>Comunidad especializada</h4><p>Relaciones duraderas con alumnos, egresados y empresas.</p></div></article></div><div className="franchiseSupport"><p><strong>No empiezas desde cero.</strong> ITEM aporta modelo académico y operativo, capacitación, acompañamiento e identidad institucional para impulsar una operación consistente.</p><a className="button investorButton" href="#solicitud">Quiero conocer la oportunidad <span>→</span></a></div><p className="legal franchiseLegal">Cada plaza requiere análisis de mercado, inversión y condiciones contractuales. No se garantizan rendimientos ni plazos de recuperación.</p></div>
    </section>

    <section className="identity"><div><Image src="/item/uniform.jpeg" alt="Propuesta de uniforme deportivo ITEM" fill sizes="50vw" /></div><div className="identityCopy"><div className="kicker">Comunidad ITEM</div><h2>Una marca que se vive dentro y fuera del aula.</h2><p>La identidad visual acompaña la experiencia del estudiante y proyecta una comunidad técnica moderna, profesional y orgullosa de lo que construye.</p></div></section>

    <section className="inquiry" id="solicitud">
      <div className="inquiryCopy"><div className="kicker">Solicitud de información</div><h2>Cuéntanos qué deseas estudiar.</h2><p>Déjanos tus datos y un asesor de ITEM podrá orientarte sobre la opción que más te interesa.</p><div className="inquirySteps"><span><b>01</b> Completa tus datos</span><span><b>02</b> Envía tu solicitud</span><span><b>03</b> Recibe atención personalizada</span></div></div>
      <form className="inquiryForm" onSubmit={handleInquirySubmit}>
        <div className="field"><label htmlFor="nombre">Nombre completo</label><input id="nombre" name="nombre" type="text" autoComplete="name" placeholder="Escribe tu nombre" required /></div>
        <div className="field"><label htmlFor="whatsapp">Número de WhatsApp</label><input id="whatsapp" name="whatsapp" type="tel" inputMode="tel" autoComplete="tel" placeholder="Ej. 449 123 4567" pattern="[0-9 +()\-]{10,20}" aria-describedby="whatsapp-ayuda" required /><small id="whatsapp-ayuda">Incluye 10 dígitos; puedes usar espacios o guiones.</small></div>
        <div className="field"><label htmlFor="interes">Tema de interés</label><select id="interes" name="interes" defaultValue="" required><option value="" disabled>Selecciona una opción</option><option>Carrera técnica</option><option>Diplomado</option><option>Curso o taller</option><option>Capacitación para empresas</option><option>Franquicia ITEM</option><option>Otro</option></select></div>
        <button className="inquirySubmit" type="submit">Enviar solicitud por WhatsApp <span>→</span></button>
        <p className="formNote">Al enviar, se abrirá WhatsApp con tu solicitud preparada para ITEM.</p>
      </form>
    </section>

    <section className="contact" id="contacto"><div><div className="kicker gold">Admisiones y alianzas</div><h2>Tu futuro técnico<br/>empieza aquí.</h2><p>Solicita información sobre carreras, cursos, diplomados, capacitación para empresas o el modelo de franquicia.</p></div><div className="contactCard"><a href="tel:+524495791652"><span>Teléfono</span><b>449 579 1652</b></a><a href="mailto:ITEM@itemedu.mx"><span>Correo</span><b>ITEM@itemedu.mx</b></a><a href="https://www.itemedu.mx" target="_blank" rel="noopener noreferrer"><span>Sitio institucional</span><b>www.itemedu.mx</b></a><address>Av. Siglo XXI 7301, Fraccionamiento Solidaridad III<br/>C.P. 20263, Aguascalientes, Ags.</address></div></section>
    <footer><a href="#inicio" className="logo footerLogo"><b>I<span>T</span>E<strong>M</strong></b><small>Instituto Tecnológico<br/>en Electrónica y Mecatrónica</small></a><p>Innovación · Tecnología · Formación profesional</p><a href="#inicio">Volver arriba ↑</a></footer>
  </main>;
}