import type { Metadata } from "next"
import Link from "next/link"
import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Users, Calendar, Clock, Mountain, Route, Swords, Trophy } from "lucide-react"

export const metadata: Metadata = {
  title: "Paso de Uspallata - Cruce de los Andes",
  description:
    "Detalles históricos del Paso de Uspallata, la segunda columna principal del Cruce de los Andes comandada por el General Juan Gregorio de Las Heras.",
}

export default function PasoDeUspallataPage() {
  const details = [
    {
      icon: Users,
      label: "Comandante",
      value: "General Juan Gregorio de Las Heras",
    },
    {
      icon: Calendar,
      label: "Fecha de partida",
      value: "19 de enero de 1817",
    },
    {
      icon: Clock,
      label: "Duración",
      value: "Unos 15 días de cruce",
    },
    {
      icon: Users,
      label: "Tropas",
      value: "Alrededor de 1.000 soldados, más artillería liviana",
    },
    {
      icon: Route,
      label: "Ruta",
      value: "Mendoza – Uspallata – Tambillos – Guardia Vieja – Santa Rosa de los Andes",
    },
    {
      icon: Mountain,
      label: "Altura máxima",
      value: "3.800 m",
    },
    {
      icon: Swords,
      label: "Combate",
      value: "Picheuta y Potrerillos (24 de enero), pequeña escaramuza con destacamento español, repelido con rapidez",
    },
    {
      icon: Trophy,
      label: "Resultado",
      value: "La columna se reunió con San Martín en Chacabuco y formó parte central del ataque final",
    },
  ]

  const galleryImages = [
    { src: "/images/puente-picheuta.webp", alt: "Vista del histórico puente de Picheuta" },
    { src: "/images/grupo-andes-1.webp", alt: "Grupo de expedicionarios en el paso de Uspallata" },
    { src: "/images/caravana-cielo-azul.webp", alt: "Caravana atravesando el paso" },
    { src: "/images/sendero-montaña.webp", alt: "Sendero de montaña en Uspallata" },
    { src: "/images/marcha-banderas.webp", alt: "Marcha histórica con banderas" },
    { src: "/images/grupo-distante.webp", alt: "Vista distante del grupo en las alturas" },
  ]

  return (
    <div className="flex flex-col">
      <section className="relative min-h-[400px] md:min-h-[500px] flex items-center">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/puente-picheuta.webp"
            alt="Vista panorámica del Paso de Uspallata"
            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">
          <Button variant="ghost" asChild className="mb-6 text-white hover:text-white hover:bg-white/10">
            <Link href="/cruce-de-los-andes">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Volver a Cruce de los Andes
            </Link>
          </Button>
          <div className="max-w-3xl">
            <h1 className="text-4xl md:text-5xl font-bold mb-4 text-balance text-white">Paso de Uspallata</h1>
            <p className="text-xl text-white/95 text-pretty">Mendoza – Los Andes – Santiago</p>
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-bold mb-8 text-center text-balance">Detalles Históricos</h2>

            <Card className="overflow-hidden mb-8">
              <CardContent className="p-8 md:p-10">
                <div className="grid gap-6">
                  {details.map((detail, index) => (
                    <div
                      key={index}
                      className="grid grid-cols-[auto_1fr] gap-4 items-start border-b border-border/40 pb-6 last:border-0 last:pb-0"
                    >
                      <div className="flex items-center gap-3 min-w-[180px] md:min-w-[220px]">
                        <detail.icon className="h-5 w-5 text-primary flex-shrink-0" />
                        <span className="font-semibold text-sm md:text-base">{detail.label}:</span>
                      </div>
                      <p className="text-muted-foreground leading-relaxed">{detail.value}</p>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card className="bg-primary/5 border-primary/20">
              <CardContent className="p-8">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center flex-shrink-0">
                    <Trophy className="h-6 w-6 text-primary" />
                  </div>
                  <div className="flex-1">
                    <h3 className="font-semibold text-xl mb-3">Importancia Histórica</h3>
                    <p className="text-lg leading-relaxed">
                      Fue el segundo eje principal de la operación, asegurando el cruce más directo hacia Santiago. El
                      Paso de Uspallata permitió que las fuerzas de Las Heras se unieran al grueso del ejército en el
                      momento decisivo de Chacabuco.
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-balance">Galería Fotográfica</h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
                Imágenes de las recreaciones históricas del Paso de Uspallata
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {galleryImages.map((image, index) => (
                <div
                  key={index}
                  className="aspect-[4/3] rounded-lg overflow-hidden shadow-lg relative group cursor-pointer"
                >
                  <Image
                    src={image.src || "/placeholder.svg"}
                    alt={image.alt}
                    fill
                    className="object-cover group-hover:scale-110 transition-transform duration-500"
                    loading="lazy"
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">Participa en la Recreación Histórica</h2>
            <p className="text-lg text-muted-foreground mb-8 leading-relaxed text-pretty">
              Únete a nuestra asociación y forma parte de las recreaciones históricas del Cruce de los Andes.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button asChild size="lg">
                <Link href="/contacto">Contactar</Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link href="/actividades">Ver Actividades</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}