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 Los Patos - Cruce de los Andes",
  description:
    "Detalles históricos del Paso de Los Patos, la columna principal del Cruce de los Andes comandada por el General José de San Martín.",
  openGraph: {
    title: "Paso de Los Patos - Cruce de los Andes",
    description:
      "Detalles históricos del Paso de Los Patos, la columna principal del Cruce de los Andes comandada por el General José de San Martín.",
  },
}

export default function PasoDeLosPatosPage() {
  const details = [
    {
      icon: Users,
      label: "Comandante",
      value: "General José de San Martín, junto al general Miguel Estanislao Soler",
    },
    {
      icon: Calendar,
      label: "Fecha de partida",
      value: "18 de enero de 1817 desde el campamento de El Plumerillo (Mendoza)",
    },
    {
      icon: Clock,
      label: "Duración",
      value: "Aproximadamente 20 días de marcha",
    },
    {
      icon: Users,
      label: "Tropas",
      value: "Unos 3.500 hombres, incluyendo infantería, caballería y artillería ligera",
    },
    {
      icon: Mountain,
      label: "Animales",
      value: "Más de 7.000 mulas y 1.000 caballos",
    },
    {
      icon: Mountain,
      label: "Altura máxima",
      value: "4.500 m s. n. m.",
    },
    {
      icon: Route,
      label: "Trayecto",
      value: "Uspallata – Barreal – Valle Hermoso – Paso de Los Patos – Putaendo – San Felipe – Santiago",
    },
    {
      icon: Swords,
      label: "Combates",
      value:
        "Achupallas (4 de febrero) y Las Coimas (7 de febrero), donde las fuerzas patriotas vencieron pequeños destacamentos realistas",
    },
    {
      icon: Trophy,
      label: "Resultado",
      value:
        "El grueso del ejército descendió hacia el valle de Aconcagua y, reunido con la columna de Las Heras, venció en la Batalla de Chacabuco (12 de febrero de 1817)",
    },
  ]

  const galleryImages = [
    { src: "/images/pasos/paso-de-los-patos/caravana-montanas.webp", alt: "Caravana atravesando las montañas andinas" },
    {
      src: "/images/pasos/paso-de-los-patos/banderas-formacion.webp",
      alt: "Formación con banderas de Argentina, Chile y Perú",
    },
    { src: "/images/pasos/paso-de-los-patos/jinete-bandera.webp", alt: "Jinete portando la bandera argentina" },
    { src: "/images/pasos/paso-de-los-patos/vista-valles.webp", alt: "Vista panorámica de los valles andinos" },
    { src: "/images/pasos/paso-de-los-patos/jinete-artistico.webp", alt: "Jinete con bandera en composición artística" },
    { src: "/images/pasos/paso-de-los-patos/descenso-valles.webp", alt: "Descenso del grupo por los valles de colores" },
    { src: "/images/pasos/paso-de-los-patos/paso-nieve.webp", alt: "Cruce por el paso con nieve y múltiples banderas" },
    { src: "/images/pasos/paso-de-los-patos/campamento.webp", alt: "Campamento en el valle durante la expedición" },
    {
      src: "/images/pasos/paso-de-los-patos/paisaje-colorido.webp",
      alt: "Paisaje de valles multicolores en la cordillera",
    },
    {
      src: "/images/pasos/paso-de-los-patos/grupo-completo.webp",
      alt: "Grupo completo de expedicionarios con banderas",
    },
    {
      src: "/images/pasos/paso-de-los-patos/IMG_8895.webp",
      alt: "Jinetes con banderas en camino montañoso",
    },
    {
      src: "/images/pasos/paso-de-los-patos/IMG_8897.webp",
      alt: "Formación de jinetes con banderas internacionales",
    },
    {
      src: "/images/pasos/paso-de-los-patos/IMG_8957.webp",
      alt: "Banderas ondeando en el cruce",
    },
    {
      src: "/images/pasos/paso-de-los-patos/IMG_8894.webp",
      alt: "Ascenso del grupo por la pendiente rocosa",
    },
    {
      src: "/images/pasos/paso-de-los-patos/IMG_8898.webp",
      alt: "Jinetes en caballos blancos con banderas",
    },
    {
      src: "/images/pasos/paso-de-los-patos/IMG_8960.webp",
      alt: "Ceremonia con bandera argentina en campamento",
    },
    {
      src: "/images/pasos/paso-de-los-patos/IMG_8956.webp",
      alt: "Vista aérea de la caravana en el desierto andino",
    },
    {
      src: "/images/pasos/paso-de-los-patos/IMG_8892.webp",
      alt: "Caravana al atardecer cruzando el valle",
    },
    {
      src: "/images/pasos/paso-de-los-patos/IMG_8954.webp",
      alt: "Expedición atravesando paisaje multicolor",
    },
    {
      src: "/images/pasos/paso-de-los-patos/IMG_8896.webp",
      alt: "Perspectiva desde dentro del grupo en ascenso",
    },
  ]

  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="relative min-h-[400px] md:min-h-[500px] flex items-center">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/jinetes-picos-nevados.webp"
            alt="Vista panorámica del Paso de Los Patos en la cordillera de los Andes"
            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 Los Patos</h1>
            <p className="text-xl text-white/95 text-pretty">San Juan – Putaendo – Santiago</p>
          </div>
        </div>
      </section>

      {/* Details 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>

            {/* Importance Section */}
            <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 la columna principal del cruce y la que logró el triunfo decisivo. El Paso de Los Patos
                      representa la hazaña más audaz de la campaña libertadora, donde el General San Martín condujo al
                      grueso del Ejército de los Andes a través de uno de los pasos más desafiantes de la cordillera,
                      logrando sorprender a las fuerzas realistas y asegurar la victoria que llevaría a la independencia
                      de Chile.
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Gallery 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 Los Patos
              </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>

      {/* CTA 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. Revive
              esta gesta épica y honra el legado del General San Martín.
            </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>
  )
}