const socialLinks = [
  {
    name: "Facebook",
    href: "https://www.facebook.com/people/Centro-de-Estudios-Superiores-Carlos-A-Carrillo/100028607546252/",
    icon: (
      <svg viewBox="0 0 24 24" className="h-6 w-6 fill-current" aria-hidden="true">
        <path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.23.19 2.23.19v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12Z" />
      </svg>
    ),
  },
  {
    name: "Instagram",
    href: "https://www.instagram.com/somoscarrillo",
    icon: (
      <svg viewBox="0 0 24 24" className="h-6 w-6 fill-current" aria-hidden="true">
        <path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2A3 3 0 0 0 4 7v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm11.5 1.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z" />
      </svg>
    ),
  },
  {
    name: "TikTok",
    href: "https://www.tiktok.com/@somoscarrillo",
    icon: (
      <svg viewBox="0 0 24 24" className="h-6 w-6 fill-current" aria-hidden="true">
        <path d="M14 3c.27 1.9 1.38 3.45 3 4.32 1.02.55 2.17.82 3.31.8v2.78a8.74 8.74 0 0 1-3.33-.65v5.18c0 3.73-3.02 6.75-6.75 6.75S3.48 19.16 3.48 15.43s3.02-6.75 6.75-6.75c.32 0 .64.02.94.07v2.89a4.17 4.17 0 0 0-.94-.11 3.9 3.9 0 1 0 3.9 3.9V3H14Z" />
      </svg>
    ),
  },
  {
    name: "YouTube",
    href: "https://www.youtube.com/@carrilloweb",
    icon: (
      <svg viewBox="0 0 24 24" className="h-6 w-6 fill-current" aria-hidden="true">
        <path d="M23 12s0-3.45-.44-5.11a2.8 2.8 0 0 0-1.97-1.97C18.93 4.48 12 4.48 12 4.48s-6.93 0-8.59.44A2.8 2.8 0 0 0 1.44 6.9C1 8.55 1 12 1 12s0 3.45.44 5.11a2.8 2.8 0 0 0 1.97 1.97c1.66.44 8.59.44 8.59.44s6.93 0 8.59-.44a2.8 2.8 0 0 0 1.97-1.97C23 15.45 23 12 23 12Zm-13.5 3.89V8.11L16 12l-6.5 3.89Z" />
      </svg>
    ),
  },
];

const oferta = [
  "Secundaria",
  "Bachillerato",
  "Bachillerato Modalidad Mixta",
  "Licenciatura en Educación Preescolar",
  "Maestrías",
  "Doctorado en Educación",
  "Cursos, talleres, diplomados, foros y conferencias",
];

const valores = [
  "Respeto",
  "Responsabilidad",
  "Honestidad",
  "Voluntad",
  "Lealtad",
  "Comunicación",
  "Colaboración",
  "Perseverancia",
];

const contactInfo = {
  whatsappDisplay: "921 236 7956",
  whatsappHref: "https://wa.me/529212367956?text=Hola%2C%20quiero%20informaci%C3%B3n%20sobre%20el%20Centro%20de%20Estudios%20Superiores%20Carlos%20A.%20Carrillo",
  telefonoDisplay: "921 21 2 66 20",
  telefonoHref: "tel:9212126620",
  direccion: [
    "Av. Revolución No. 413",
    "Col. Centro, C.P. 96400",
    "Coatzacoalcos, Veracruz",
  ],
  sitioWeb: "www.carrillo.edu.mx",
};

const logoSrc = "/mnt/data/Carrillo Cuadrado.jpg";

function LogoCard() {
  return (
    <div className="flex justify-center md:justify-start">
      <div className="w-full max-w-md rounded-3xl bg-white p-4 shadow-2xl">
        <img
          src={logoSrc}
          alt="Logo del Centro de Estudios Superiores Carlos A. Carrillo"
          className="w-full rounded-2xl object-contain"
        />
      </div>
    </div>
  );
}

function SocialIconLink({ name, href, icon }) {
  return (
    <a
      href={href}
      aria-label={name}
      title={name}
      target="_blank"
      rel="noreferrer"
      className="flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-950 text-white shadow-md transition hover:-translate-y-1 hover:shadow-xl"
    >
      {icon}
    </a>
  );
}

export default function CarlosCarrilloWeb() {
  return (
    <div className="min-h-screen bg-slate-50 text-slate-800">
      <header className="relative overflow-hidden bg-white">
        <div className="absolute inset-0 bg-gradient-to-br from-sky-100 via-white to-blue-100" />
        <div className="relative mx-auto grid max-w-7xl gap-10 px-6 py-12 md:grid-cols-2 md:px-10 lg:items-center lg:gap-16 lg:py-20">
          <LogoCard />

          <div>
            <div className="mb-4 inline-flex rounded-full border border-blue-200 bg-blue-50 px-4 py-2 text-sm font-semibold text-blue-900">
              Formación con valores y visión de futuro
            </div>
            <h1 className="text-4xl font-black tracking-tight text-blue-950 md:text-5xl lg:text-6xl">
              Centro de Estudios Superiores Carlos A. Carrillo
            </h1>
            <p className="mt-5 text-lg leading-8 text-slate-700">
              “No estudio para saber más, sino para ignorar menos”. Somos una institución educativa con amplia experiencia en Coatzacoalcos, Veracruz, comprometida con una educación incluyente, humana y de calidad.
            </p>

            <div className="mt-8 flex flex-wrap gap-4">
              <a
                href={contactInfo.whatsappHref}
                className="rounded-2xl bg-green-600 px-6 py-3 text-base font-bold text-white shadow-lg transition hover:-translate-y-0.5"
              >
                WhatsApp: {contactInfo.whatsappDisplay}
              </a>
              <a
                href={contactInfo.telefonoHref}
                className="rounded-2xl border-2 border-blue-900 px-6 py-3 text-base font-bold text-blue-950 transition hover:bg-blue-900 hover:text-white"
              >
                Teléfono fijo: {contactInfo.telefonoDisplay}
              </a>
            </div>

            <div className="mt-8 flex flex-wrap items-center gap-3">
              {socialLinks.map((item) => (
                <SocialIconLink key={item.name} {...item} />
              ))}
            </div>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-7xl space-y-8 px-6 py-10 md:px-10 lg:space-y-10">
        <section className="grid gap-6 lg:grid-cols-3">
          <div className="rounded-3xl bg-white p-8 shadow-lg lg:col-span-2">
            <h2 className="text-3xl font-black text-blue-950">Reseña institucional</h2>
            <p className="mt-4 leading-8 text-slate-700">
              Ubicados en Av. Revolución No. 413, Col. Centro, C.P. 96400, Coatzacoalcos, Veracruz, ofrecemos servicios educativos desde 1996. Contamos con niveles de preescolar, secundaria, bachillerato escolarizado y mixto, licenciatura, posgrado, así como conferencias, foros, talleres, diplomados y cursos presenciales y en línea.
            </p>
            <p className="mt-4 leading-8 text-slate-700">
              Nuestro modelo académico se basa en el constructivismo y en aprendizajes significativos. Disponemos de aulas climatizadas, salas de cómputo, espacios deportivos, cafeterías, áreas administrativas, apoyo psicológico, seguimiento académico y seguridad con circuito cerrado.
            </p>
          </div>

          <div className="rounded-3xl bg-blue-950 p-8 text-white shadow-lg">
            <h2 className="text-2xl font-black">Contacto</h2>
            <div className="mt-5 space-y-4 text-sm leading-7 text-blue-50">
              <p>
                <span className="font-bold text-white">Dirección:</span>
                <br />
                {contactInfo.direccion.map((linea) => (
                  <span key={linea}>
                    {linea}
                    <br />
                  </span>
                ))}
              </p>
              <p>
                <span className="font-bold text-white">Sitio web:</span>
                <br />
                {contactInfo.sitioWeb}
              </p>
              <p>
                <span className="font-bold text-white">WhatsApp:</span>
                <br />
                {contactInfo.whatsappDisplay}
              </p>
              <p>
                <span className="font-bold text-white">Teléfono:</span>
                <br />
                {contactInfo.telefonoDisplay}
              </p>
            </div>
          </div>
        </section>

        <section className="grid gap-6 lg:grid-cols-2">
          <div className="rounded-3xl bg-white p-8 shadow-lg">
            <h2 className="text-3xl font-black text-blue-950">Misión</h2>
            <p className="mt-4 leading-8 text-slate-700">
              Contribuir a la mejora educativa en apego a la libertad de expresión, a los principios participativos y democráticos y a una educación incluyente.
            </p>
          </div>

          <div className="rounded-3xl bg-white p-8 shadow-lg">
            <h2 className="text-3xl font-black text-blue-950">Visión</h2>
            <p className="mt-4 leading-8 text-slate-700">
              Transformar la conciencia de pertenencia nacional participativa y democrática, resaltando la educación como motor de crecimiento de nuestra localidad, estado y país.
            </p>
          </div>
        </section>

        <section className="grid gap-6 lg:grid-cols-2">
          <div className="rounded-3xl bg-white p-8 shadow-lg">
            <h2 className="text-3xl font-black text-blue-950">Oferta educativa</h2>
            <div className="mt-6 grid gap-3 sm:grid-cols-2">
              {oferta.map((item) => (
                <div key={item} className="rounded-2xl border border-sky-100 bg-sky-50 p-4 font-semibold text-slate-700">
                  {item}
                </div>
              ))}
            </div>
          </div>

          <div className="rounded-3xl bg-white p-8 shadow-lg">
            <h2 className="text-3xl font-black text-blue-950">Nuestros valores</h2>
            <div className="mt-6 flex flex-wrap gap-3">
              {valores.map((item) => (
                <span key={item} className="rounded-full bg-blue-100 px-4 py-2 font-bold text-blue-900">
                  {item}
                </span>
              ))}
            </div>

            <div className="mt-8 rounded-2xl bg-red-50 p-5">
              <h3 className="text-xl font-black text-red-700">Compromiso de calidad</h3>
              <p className="mt-3 leading-7 text-slate-700">
                Nuestro personal directivo, docente y administrativo trabaja para lograr la satisfacción de estudiantes, familias y egresados mediante servicios educativos con valor agregado, cumplimiento normativo y mejora continua.
              </p>
            </div>
          </div>
        </section>

        <section className="rounded-3xl bg-gradient-to-r from-blue-950 to-sky-600 p-8 text-white shadow-xl">
          <h2 className="text-3xl font-black">¿Por qué estudiar con nosotros?</h2>
          <div className="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            {[
              "Más de 30 años de experiencia educativa",
              "Modelo constructivista y aprendizajes significativos",
              "Instalaciones equipadas y acompañamiento académico",
              "Educación inclusiva, humana y con visión de futuro",
            ].map((item) => (
              <div key={item} className="rounded-2xl bg-white/10 p-5 backdrop-blur-sm">
                <p className="font-semibold leading-7">{item}</p>
              </div>
            ))}
          </div>
        </section>
      </main>
    </div>
  );
}

export function runBasicComponentChecks() {
  return {
    socialLinksCount: socialLinks.length === 4,
    ofertaCount: oferta.length >= 7,
    valoresCount: valores.length >= 8,
    hasWhatsAppHref: contactInfo.whatsappHref.startsWith("https://wa.me/"),
    hasPhoneHref: contactInfo.telefonoHref.startsWith("tel:"),
    hasLogoSrc: typeof logoSrc === "string" && logoSrc.length > 0,
  };
}