import type { Metadata } from "next"
import Link from "next/link"
import Image from "next/image"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { MapPin } from "lucide-react"

export const metadata: Metadata = {
  title: "Cruce de los Andes - Asociación Cultural Sanmartiniana",
  description:
    "Descubre las seis rutas históricas del Cruce de los Andes realizadas por el Ejército Libertador del General San Martín.",
  openGraph: {
    title: "Cruce de los Andes - Asociación Cultural Sanmartiniana",
    description:
      "Descubre las seis rutas históricas del Cruce de los Andes realizadas por el Ejército Libertador del General San Martín.",
  },
}

export default function CruceDeLosAndesPage() {
  const routes = [
    {
      name: "Paso de Los Patos",
      subtitle: "San Juan – Putaendo – Santiago",
      image: "/images/pasos/paso-de-los-patos/banderas-formacion.webp",
      href: "/cruce-de-los-andes/paso-de-los-patos",
    },
    {
      name: "Paso de Uspallata",
      subtitle: "Mendoza – Los Andes – Santiago",
      image: "/images/puente-picheuta.webp",
      href: "/cruce-de-los-andes/paso-de-uspallata",
    },
    {
      name: "Paso del Planchón",
      subtitle: "Sur de Mendoza – Talca, Chile",
      image: "/images/caravana-cielo-azul.webp",
      href: "/cruce-de-los-andes/paso-del-planchon",
    },
    {
      name: "Paso del Portillo",
      subtitle: "Tunuyán, Mendoza – San Gabriel, Chile",
      image: "/images/grupo-distante.webp",
      href: "/cruce-de-los-andes/paso-del-portillo",
    },
    {
      name: "Paso de Guana",
      subtitle: "La Rioja – Copiapó, Chile",
      image: "/images/marcha-banderas.webp",
      href: "/cruce-de-los-andes/paso-de-guana",
    },
    {
      name: "Paso de Comecaballos",
      subtitle: "Catamarca – Copiapó, Chile",
      image: "/images/familia-caballos.webp",
      href: "/cruce-de-los-andes/paso-de-comecaballos",
    },
  ]

  return (
    <div className="flex flex-col">
      <section className="relative min-h-[500px] md:min-h-[600px] flex items-center">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/jinetes-picos-nevados.webp"
            alt="Jinetes con banderas atravesando la cordillera de los Andes con picos nevados"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-b from-primary/90 via-primary/80 to-primary/95" />
        </div>

        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl">
            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-balance text-white">CRUCE DE LOS ANDES</h1>
            <p className="text-lg md:text-xl text-white/95 leading-relaxed text-pretty">
              El proyecto pedagógico, histórico y cultural trasciende el Cruce de Los Andes a Lomo de Mula. Rescata los
              principios y valores del General Jose de San Martin como hombre, politico y militar para preservar el
              futuro y no dejar la historia librada al azar.
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16 items-center">
            <div className=" rounded-lg overflow-hidden shadow-xl relative h-full ">
              <Image
                src="/images/caravana-cielo-azul.webp"
                alt="Caravana de jinetes cruzando las montañas de los Andes"
                fill
                className="object-cover"
                loading="lazy"
              />
            </div>
            <div className="flex flex-col justify-center">
              <h2 className="text-xl md:text-2xl font-bold mb-4 text-balance">LAS RUTAS SANMARTINIANAS DEL CRUCE DE
                  LOS ANDES (1817)</h2>
              <div className="space-y-4 text-muted-foreground leading-relaxed">
                <p>
                  Entre enero y febrero de 1817, el Ejército de los Andes, al mando de José de San Martín, emprendió la
                  travesía de la cordillera con el objetivo de liberar Chile del dominio español. Fue una de las
                  campañas militares más audaces de la historia, diseñada con precisión estratégica y una organización
                  logística sin precedentes.
                </p>
                <p>
                  Participaron más de 5.000 hombres, junto a 10.000 mulas y 1.500 caballos, distribuidos en seis
                  columnas que cruzaron la cordillera por distintos pasos entre San Juan, Mendoza, La Rioja y Catamarca.
                  El plan buscaba sorprender al enemigo, dispersar sus fuerzas y concentrar el ataque principal en la
                  zona central de Chile.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Routes Section */}
      <section className="py-16 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-balance">Las Seis Rutas Sanmartinianas</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
              Cada ruta representó un desafío único y contribuyó al éxito de la campaña libertadora.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {routes.map((route, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow overflow-hidden">
                <div className="aspect-[16/10] overflow-hidden relative">
                  <Image
                    src={route.image || "/placeholder.svg"}
                    alt={`Paisaje de ${route.name} en la cordillera de los Andes`}
                    fill
                    className="object-cover hover:scale-105 transition-transform duration-300"
                    loading="lazy"
                  />
                </div>
                <CardHeader>
                  <div className="flex items-start justify-between mb-2">
                    <div className="w-10 h-10 rounded-lg bg-secondary/20 flex items-center justify-center">
                      <MapPin className="h-5 w-5 text-secondary" aria-hidden="true" />
                    </div>
                    <span className="text-sm font-medium text-muted-foreground">Ruta {index + 1}</span>
                  </div>
                  <CardTitle className="text-xl text-balance">{route.name}</CardTitle>
                  <p className="text-sm text-muted-foreground">{route.subtitle}</p>
                </CardHeader>
                <CardContent>
                  <Button asChild variant="outline" className="w-full bg-transparent">
                    <Link href={route.href}>Ver detalles</Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-balance">Galería Histórica</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
              Imágenes de nuestras recreaciones históricas del Cruce de los Andes
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="aspect-[4/3] rounded-lg overflow-hidden shadow-lg relative">
              <Image
                src="/images/cristo-redentor.webp"
                alt="Grupo en el monumento Cristo Redentor con banderas de Argentina, Chile y otras naciones"
                fill
                className="object-cover hover:scale-105 transition-transform duration-300"
                loading="lazy"
              />
            </div>
            <div className="aspect-[4/3] rounded-lg overflow-hidden shadow-lg relative">
              <Image
                src="/images/granaderos-historicos.webp"
                alt="Recreación histórica con granaderos en uniformes de época del ejército libertador"
                fill
                className="object-cover hover:scale-105 transition-transform duration-300"
                loading="lazy"
              />
            </div>
            <div className="aspect-[4/3] rounded-lg overflow-hidden shadow-lg relative">
              <Image
                src="/images/recreacion-historica.webp"
                alt="Recreación histórica con uniformes de época del ejército libertador"
                fill
                className="object-cover hover:scale-105 transition-transform duration-300"
                loading="lazy"
              />
            </div>
            <div className="aspect-[4/3] rounded-lg overflow-hidden shadow-lg relative">
              <Image
                src="/images/grupo-andes-1.webp"
                alt="Grupo completo de participantes en la recreación del Cruce de los Andes"
                fill
                className="object-cover hover:scale-105 transition-transform duration-300"
                loading="lazy"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Legacy Section */}
      <section className="py-16 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">Legado Histórico</h2>
            <p className="text-lg text-muted-foreground mb-8 leading-relaxed text-pretty">
              El Cruce de los Andes no solo fue una proeza militar, sino también un símbolo de determinación, coraje y
              visión estratégica. Esta gesta libertadora sentó las bases para la independencia de Chile y Perú,
              consolidando la libertad de América del Sur.
            </p>
            <Button asChild size="lg">
              <Link href="/actividades">Conocer actividades</Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}