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 de Guana - Cruce de los Andes",
  description: "Detalles históricos del Paso de Guana, operación en el norte chileno comandada por Francisco Zelada.",
}

export default function PasoDeGuanaPage() {
  const details = [
    {
      icon: Users,
      label: "Comandante",
      value: "Francisco Zelada",
    },
    {
      icon: Calendar,
      label: "Fecha",
      value: "12 de enero de 1817",
    },
    {
      icon: Clock,
      label: "Duración",
      value: "Un mes completo debido al terreno desértico y las grandes distancias",
    },
    {
      icon: Users,
      label: "Tropas",
      value: "120 hombres montados",
    },
    {
      icon: Route,
      label: "Ubicación",
      value: "Zona norte de la cordillera, actual región de Atacama",
    },
    {
      icon: Target,
      label: "Objetivo",
      value: "Distraer a los realistas en el norte chileno y asegurar la frontera norte de San Juan",
    },
    {
      icon: Trophy,
      label: "Resultado",
      value: "Llegaron a Copiapó, ocuparon la ciudad sin resistencia y proclamaron la independencia local",
    },
  ]

  const galleryImages = [
    {
      src: "/images/pasos/fotosgenericas/84867539_3119151204802967_5052379044868259840_n.webp",
      alt: "Vista distante de la cordillera",
    },
    {
      src: "/images/pasos/fotosgenericas/83780281_3093604994024255_4723541513869459456_n.webp",
      alt: "Ladera con vegetación escasa",
    },
    {
      src: "/images/pasos/fotosgenericas/84964899_3119153718136049_4788412025598377984_n.webp",
      alt: "Valle verde con picos nevados",
    },
    {
      src: "/images/pasos/fotosgenericas/52181500_2415347291850032_446354776884510720_n.webp",
      alt: "Vista panorámica de la cordillera",
    },
    {
      src: "/images/pasos/fotosgenericas/557459083_25106150512343054_3169155495485001543_n.webp",
      alt: "Cumbre brumosa con nieve",
    },
    {
      src: "/images/pasos/fotosgenericas/557591581_25106150589009713_8281190805027007449_n.webp",
      alt: "Valle brumoso con terreno rocoso",
    },
  ]

  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/84964899_3119153718136049_4788412025598377984_n.webp"
            alt="Vista panorámica del Paso de Guana"
            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 Guana</h1>
            <p className="text-xl text-white/95 text-pretty">La Rioja – Copiapó, 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 Guana fue fundamental para la estrategia de San Martín en el norte. Al ocupar Copiapó
                      sin resistencia y proclamar la independencia local, se aseguró la frontera norte y se dispersaron
                      las fuerzas realistas, facilitando el avance del grueso del ejército.
                    </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 Guana
              </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>
  )
}