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

export const metadata: Metadata = {
  title: "Paso del Planchón - Cruce de los Andes",
  description:
    "Detalles históricos del Paso del Planchón, operación de distracción en el sur comandada por Ramón Freyre.",
}

export default function PasoDelPlanchonPage() {
  const details = [
    {
      icon: Users,
      label: "Comandante",
      value: "Ramón Freyre",
    },
    {
      icon: Calendar,
      label: "Fecha de partida",
      value: "Finales de enero de 1817",
    },
    {
      icon: Clock,
      label: "Duración",
      value: "Aproximadamente tres semanas, por terreno muy escarpado",
    },
    {
      icon: Users,
      label: "Tropas",
      value: "120 hombres de caballería e infantería ligera",
    },
    {
      icon: Target,
      label: "Objetivo",
      value: "Simular un avance principal hacia el sur chileno, para distraer tropas realistas",
    },
    {
      icon: Route,
      label: "Ubicación",
      value: "Sur de Mendoza, por el valle de Malargüe, cruzando hacia Talca",
    },
    {
      icon: Trophy,
      label: "Resultado",
      value:
        "Cumplió su objetivo: los realistas desviaron fuerzas hacia el sur, facilitando el avance del grueso del ejército",
    },
  ]

  const galleryImages = [
    {
      src: "/images/pasos/fotosgenericas/53050761_2422000991184662_2434365842507431936_n.webp",
      alt: "Valle verde con montañas nevadas",
    },
    {
      src: "/images/pasos/fotosgenericas/82979024_3093598400691581_2037999026044928000_n.webp",
      alt: "Terreno rocoso con nubes dramáticas",
    },
    {
      src: "/images/pasos/fotosgenericas/83564720_3093602004024554_7645492552287649792_n.webp",
      alt: "Sendero desértico hacia la cumbre",
    },
    {
      src: "/images/pasos/fotosgenericas/84284717_3093610894023665_2657835361740259328_n.webp",
      alt: "Panorámica de valles rojizos",
    },
    {
      src: "/images/pasos/fotosgenericas/568657934_25332893619668741_5259605997156626132_n.webp",
      alt: "Caballo solitario en paisaje andino",
    },
    {
      src: "/images/pasos/fotosgenericas/569293851_25332897763001660_5136862578226163009_n.webp",
      alt: "Vista panorámica colorida",
    },
  ]

  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/pasos/fotosgenericas/82979024_3093598400691581_2037999026044928000_n.webp"
            alt="Vista panorámica del Paso del Planchón"
            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 Planchón</h1>
            <p className="text-xl text-white/95 text-pretty">Sur de Mendoza – Talca, 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">
                      Esta columna cumplió un rol fundamental en la estrategia de San Martín al lograr distraer fuerzas
                      realistas hacia el sur, facilitando el avance del grueso del ejército por los pasos principales.
                      Aunque pequeña en número, su impacto estratégico fue decisivo para el éxito de la campaña.
                    </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 Planchón
              </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>
  )
}