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 del Portillo - Cruce de los Andes",
  description: "Detalles históricos del Paso del Portillo, protección del flanco sur comandada por Juan Manuel Cabot.",
}

export default function PasoDelPortilloPage() {
  const details = [
    {
      icon: Users,
      label: "Comandante",
      value: "Juan Manuel Cabot",
    },
    {
      icon: Calendar,
      label: "Fecha de salida",
      value: "20 de enero de 1817",
    },
    {
      icon: Clock,
      label: "Duración",
      value: "Entre 15 y 18 días",
    },
    {
      icon: Users,
      label: "Tropas",
      value: "Aproximadamente 150 hombres",
    },
    {
      icon: Mountain,
      label: "Terreno",
      value: "Cordillera alta, angosta y de clima severo",
    },
    {
      icon: Target,
      label: "Objetivo",
      value: "Acompañar y proteger el flanco sur del avance principal",
    },
    {
      icon: Trophy,
      label: "Resultado",
      value:
        "Lograron cruzar con éxito y se unieron a las fuerzas patriotas en territorio chileno, sin enfrentamientos relevantes",
    },
  ]

  const galleryImages = [
    {
      src: "/images/pasos/paso-del-portillo/IMG_2248.JPG",
      alt: "Caravana de jinetes atravesando el terreno montañoso del Paso del Portillo",
    },
    {
      src: "/images/pasos/paso-del-portillo/IMG_2278.JPG",
      alt: "Vista de la expedición con montañas nevadas de fondo",
    },
    {
      src: "/images/pasos/paso-del-portillo/IMG_2754.JPG",
      alt: "Jinetes con banderas argentinas en camino polvoriento",
    },
    {
      src: "/images/pasos/paso-del-portillo/IMG_2327.JPG",
      alt: "Grupo de expedicionarios cruzando el paisaje árido de la cordillera",
    },
    {
      src: "/images/pasos/paso-del-portillo/IMG_2871.JPG",
      alt: "Columna de jinetes en el sendero empinado del Portillo",
    },
    { src: "/images/pasos/paso-del-portillo/IMG_2326.JPG", alt: "Ascenso por la ladera arenosa con cielo despejado" },
    {
      src: "/images/pasos/paso-del-portillo/IMG_2043.JPG",
      alt: "Expedicionarios con banderas en terreno rocoso volcánico",
    },
    { src: "/images/pasos/paso-del-portillo/IMG_2872.JPG", alt: "Cruzando el angosto paso entre formaciones rocosas" },
    { src: "/images/pasos/paso-del-portillo/IMG_2873.JPG", alt: "Jinetes en el sendero pedregoso con vista posterior" },
    {
      src: "/images/pasos/paso-del-portillo/IMG_2265.JPG",
      alt: "Caravana bajo la imponente formación geológica estratificada",
    },
    {
      src: "/images/pasos/paso-del-portillo/P1010950.JPG",
      alt: "Grupo reunido en el monumento de Argentina en la cumbre del paso",
    },
    {
      src: "/images/pasos/paso-del-portillo/IMG_2874.JPG",
      alt: "Vista panorámica desde la cumbre con jinetes observando el valle serpenteante",
    },
    {
      src: "/images/pasos/paso-del-portillo/P1010968.JPG",
      alt: "Expedicionarios con trajes de época y bandera argentina en la cordillera",
    },
    {
      src: "/images/pasos/paso-del-portillo/IMG_3005.JPG",
      alt: "Momento dramático con rayos de sol atravesando las nubes sobre la expedición",
    },
    {
      src: "/images/pasos/paso-del-portillo/IMG_3050.JPG",
      alt: "Jinete con bandera argentina alzada en el paisaje andino",
    },
  ]

  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 del Portillo"
            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 del Portillo</h1>
            <p className="text-xl text-white/95 text-pretty">Tunuyán, Mendoza – San Gabriel, 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 Táctica</h3>
                    <p className="text-lg leading-relaxed">
                      El Paso del Portillo fue crucial para proteger el flanco sur del avance principal del ejército. A
                      pesar del terreno extremadamente difícil y el clima severo, la columna de Cabot cumplió
                      exitosamente su misión de asegurar esta ruta estratégica.
                    </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 del Portillo
              </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>
  )
}