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

export const metadata: Metadata = {
  title: "Paso de Comecaballos - Cruce de los Andes",
  description: "Detalles históricos del Paso de Comecaballos, apoyo a la columna norte comandada por Juan Dávila.",
}

export default function PasoDeComecaballosPage() {
  const details = [
    {
      icon: Users,
      label: "Comandante",
      value: "Juan Dávila",
    },
    {
      icon: Calendar,
      label: "Fecha",
      value: "Mediados de enero de 1817",
    },
    {
      icon: Clock,
      label: "Duración",
      value: "Aproximadamente 25 días",
    },
    {
      icon: Users,
      label: "Tropas",
      value: "Pequeño destacamento de 50 jinetes",
    },
    {
      icon: Target,
      label: "Objetivo",
      value: "Apoyar y coordinar con la columna de Zelada",
    },
    {
      icon: Trophy,
      label: "Resultado",
      value:
        "Cruzaron exitosamente y se unieron en Copiapó, cumpliendo su misión de distraer y desorganizar a las fuerzas realistas del norte chileno",
    },
  ]

  const galleryImages = [
    {
      src: "/images/pasos/fotosgenericas/53117874_2422012271183534_3907340793819430912_n.webp",
      alt: "Sendero rocoso hacia la cumbre",
    },
    {
      src: "/images/pasos/fotosgenericas/557147277_25106150312343074_3670564109737278947_n.webp",
      alt: "Paisaje con nieve y arroyo",
    },
    {
      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: "Panorámica colorida de montañas",
    },
    {
      src: "/images/pasos/fotosgenericas/53050761_2422000991184662_2434365842507431936_n.webp",
      alt: "Valle verde con cumbres nevadas",
    },
    {
      src: "/images/pasos/fotosgenericas/84284717_3093610894023665_2657835361740259328_n.webp",
      alt: "Valles rojizos bajo cielo azul",
    },
  ]

  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/557147277_25106150312343074_3670564109737278947_n.webp"
            alt="Vista panorámica del Paso de Comecaballos"
            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 Comecaballos</h1>
            <p className="text-xl text-white/95 text-pretty">Catamarca – 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 en la Coordinación</h3>
                    <p className="text-lg leading-relaxed">
                      Aunque pequeño en número, el destacamento de Comecaballos fue crucial para coordinar las
                      operaciones en el norte chileno. Al unirse con la columna de Zelada en Copiapó, contribuyeron
                      significativamente a desorganizar las fuerzas realistas y asegurar la frontera norte de la campaña
                      libertadora.
                    </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 Comecaballos
              </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>
  )
}