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, Trophy, Target } from "lucide-react"

export const metadata: Metadata = {
  title: "Paso de Uspallata - Cruce de los Andes",
  description:
    "Detalles históricos del Paso de Uspallata, la ruta principal del Ejército de los Andes comandada por José de San Martín.",
}

export default function PasoUspallataPage() {
  const details = [
    {
      icon: Users,
      label: "Comandante",
      value: "General José de San Martín",
    },
    {
      icon: Calendar,
      label: "Fecha de salida",
      value: "19 de enero de 1817",
    },
    {
      icon: Clock,
      label: "Duración",
      value: "21 días aproximadamente",
    },
    {
      icon: Users,
      label: "Tropas",
      value: "Aproximadamente 3,500 hombres",
    },
    {
      icon: Mountain,
      label: "Terreno",
      value: "Ruta principal, más transitada pero igualmente desafiante",
    },
    {
      icon: Target,
      label: "Objetivo",
      value: "Ruta principal del Ejército de los Andes hacia Chile",
    },
    {
      icon: Trophy,
      label: "Resultado",
      value:
        "Exitoso cruce que permitió la convergencia de las fuerzas patriotas y las victorias posteriores en Chacabuco y Maipú",
    },
  ]

  const galleryImages = [
    {
      src: "/images/pasos/paso-uspallata/_DSC1875.webp",
      alt: "Expedicionarios con banderas de Argentina, Chile y otras naciones en ruta montañosa",
    },
    {
      src: "/images/pasos/paso-uspallata/_DSC2024.webp",
      alt: "Vista desde vagón ferroviario abandonado con montañas al fondo",
    },
    {
      src: "/images/pasos/paso-uspallata/DSC00390.webp",
      alt: "Grupo familiar de jinetes en el sendero andino",
    },
    {
      src: "/images/pasos/paso-uspallata/DSC00033.webp",
      alt: "Jinete en caballo gris atravesando campo de flores silvestres",
    },
    {
      src: "/images/pasos/paso-uspallata/_DSC2469.webp",
      alt: "Granadero en uniforme histórico montado con guía a pie",
    },
    {
      src: "/images/pasos/paso-uspallata/DSC01628.webp",
      alt: "Caravana de expedicionarios frente a picos nevados de la cordillera",
    },
    {
      src: "/images/pasos/paso-uspallata/_DSC1940.webp",
      alt: "Jinete cruzando terreno rocoso en el paso",
    },
    {
      src: "/images/pasos/paso-uspallata/_DSC1680.webp",
      alt: "Grupo caminando por ruta con banderas de múltiples naciones",
    },
    {
      src: "/images/pasos/paso-uspallata/_DSC2513.webp",
      alt: "Recreadores en trajes de época de San Martín y su ejército",
    },
    {
      src: "/images/pasos/paso-uspallata/_DSC2958.webp",
      alt: "Foto grupal de participantes en uniformes históricos y modernos",
    },
  ]

  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/grupo-distante.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, Argentina – Los Andes, Chile</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 Estratégica</h3>
                    <p className="text-lg leading-relaxed">
                      El Paso de Uspallata fue la ruta principal del Ejército de los Andes bajo el mando directo del
                      General San Martín. Esta columna transportaba la mayor parte de las tropas, artillería y
                      provisiones, siendo fundamental para el éxito de la campaña libertadora que culminó con las
                      victorias de Chacabuco y Maipú, asegurando la independencia de Chile.
                    </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>
  )
}