import type { Metadata } from "next"
import Image from "next/image"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Backpack, Shirt, Footprints, Sun, Droplets, AlertCircle, CheckCircle2 } from "lucide-react"

export const metadata: Metadata = {
  title: "Equipamiento - Asociación Cultural Sanmartiniana",
  description:
    "Guía completa de equipamiento necesario para realizar el Cruce de los Andes. Información detallada sobre vestimenta, equipo y recomendaciones de seguridad.",
  openGraph: {
    title: "Equipamiento - Asociación Cultural Sanmartiniana",
    description: "Guía completa de equipamiento necesario para realizar el Cruce de los Andes.",
  },
}

export default function EquipamientoPage() {
  const equipmentSections = [
    {
      title: "Cabeza y Cuello",
      icon: Sun,
      items: [
        {
          name: "Sombrero de ala ancha",
          description:
            "De tela o cuero, con barbijo y retranca. No recomendamos gorras porque dejan libre la nuca y las orejas.",
        },
        {
          name: "Lentes oscuros",
          description: "Lo más cerrados posibles, con lazo o goma de agarre para que no se caigan.",
        },
        {
          name: "Pañuelo",
          description: "De hilo o algodón para proteger el cuello y/o la cabeza. Puede ser redondo tipo tubo (buff).",
        },
      ],
    },
    {
      title: "Torso",
      icon: Shirt,
      items: [
        {
          name: "Remeras o camisas manga larga",
          description:
            "Nos protegen del sol durante las jornadas. Colores claros. Preferiblemente sintéticas, se secan más rápido.",
        },
        {
          name: "Remera térmica",
          description: "Primera piel, ayudan para pasar los fríos de la noche y ante nevadas.",
        },
        {
          name: "Abrigo liviano",
          description: "Pullover de hilo, algodón no muy grueso o polar.",
        },
        {
          name: "Campera de abrigo",
          description: "Preferiblemente que sea liviana e impermeable.",
        },
        {
          name: "Equipo para la lluvia",
          description: "Preferiblemente pantalón y campera con capucha. NO recomendamos trajes gruesos de goma.",
        },
      ],
    },
    {
      title: "Piernas",
      icon: Footprints,
      items: [
        {
          name: "Pantalones cómodos",
          description: "Tipo cargo, bombacha de campo o de secado rápido (preferiblemente sin cierre para desmontar).",
        },
        {
          name: "Ropa interior cómoda",
          description: "Preferiblemente de algodón y con costuras suaves.",
        },
      ],
    },
    {
      title: "Pies y Manos",
      icon: Footprints,
      items: [
        {
          name: "Guantes para montar",
          description: "Puede ser de tipo jardinería. No llevar guantes de trabajo de descarne.",
        },
        {
          name: "Medias",
          description: "De algodón o hilo. O medias técnicas para montaña.",
        },
        {
          name: "Zapatillas",
          description:
            "Fuertes tipo trekking. No recomendamos borcegos porque pueden no ser cómodos según el tipo de estribo.",
        },
        {
          name: "Otro calzado",
          description: "Recomendamos llevar otro calzado más cómodo para el momento de descanso.",
        },
      ],
    },
    {
      title: "Equipos Generales",
      icon: Backpack,
      items: [
        {
          name: "Bolsa de dormir",
          description:
            "Recomendamos -10° (mínimo). Debe acondicionarse para que no se moje, envolverla en otra bolsa de plástico.",
        },
        {
          name: "Aislante térmico",
          description: "Para poner en el piso debajo de la bolsa cama.",
        },
        {
          name: "Plástico de 2x2 mts",
          description: "Para tapar elementos o cubrirse uno mismo de ser necesario.",
        },
        {
          name: "Cantimploras o Camel Bag",
          description: "Garantizar 2 litros de agua. No recomendamos botellas plásticas comunes.",
        },
        {
          name: "Elementos de rancho",
          description: "Plato hondo, cuchara, tenedor, cuchillo, jarrito con manija.",
        },
        {
          name: "Protector solar (+30)",
          description: "Para el cuerpo y los labios (No manteca de cacao).",
        },
        {
          name: "Linterna",
          description: "Tipo minero y/o linterna de mano chica.",
        },
        {
          name: "Elementos de higiene personal",
          description: "Toallas húmedas, cepillo de dientes, pasta, jabón, toalla de tela, papel higiénico.",
        },
      ],
    },
    {
      title: "Hidratación y Alimentación",
      icon: Droplets,
      items: [
        {
          name: "Agua",
          description: "Mínimo 2 litros por día. Tomar antes de tener sed.",
        },
        {
          name: "Comestibles opcionales",
          description: "Caramelos, frutas secas, barras de cereales, jugo en polvo, yerba, azúcar, té.",
        },
      ],
    },
  ]

  const routeSpecific = [
    {
      route: "Los Patos",
      items: [
        "Mochila (35-45 litros) con impermeable",
        "Alforja",
        "Gorro de abrigo o pasamontañas",
        "Guantes de abrigo (lana, neoprene)",
        "Pantalón térmico (opcional)",
        "Polainas para montar",
      ],
    },
    {
      route: "Uspallata Montados",
      items: ["Mochila (20-25 litros) con impermeable", "Alforja", "Pasamontañas", "Polainas para montar"],
    },
    {
      route: "Uspallata Infantería",
      items: [
        "Mochila (20-25 litros) solo elementos del día",
        "Pasamontañas",
        "Bastones tipo trekking (recomendado)",
        "Zapatillas cómodas para trekking",
        "Cinta hipoalergénica para ampollas",
      ],
    },
  ]

  const mandatoryRules = [
    "Etiquetar y poner su nombre a cada elemento portable y/o de valor",
    "Los elementos que puedan caerse durante la marcha serán recogidos por el personal del ejército, siempre que el terreno lo permita",
    "El bolso que quede en la base no debe ser grande. Debe contener la ropa para la fiesta y elementos extra",
    "Respetar las reglas de conductas y la línea de mando establecidas",
    "Está prohibido auto medicarse. Ante cualquier síntoma informarlo inmediatamente al médico",
    "NO se tendrá acceso a la Expedición si no se han entregado los estudios médicos indicados",
  ]

  const safetyGuidelines = [
    "Prepararse física y mentalmente para marchas montadas diarias de muchas horas",
    "Deberán saber ensillar, desensillar y equilibrar la carga de la mula",
    "Tomar agua antes de tener sed. Mínimo 2 litros de líquido por día",
    "Comer antes de tener hambre",
    "Caminar siempre a paso de tortuga, ritmo sereno. Nunca correr o apurarse inútilmente",
    "Mantener una distancia mínima entre animales, a 1.5 metros del animal de adelante",
    "Confiar en el animal. Son animales acostumbrados a la montaña y los senderos",
    "No tirar residuos de ningún tipo en la montaña. Cuidamos el ambiente",
  ]

  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="relative min-h-[500px] md:min-h-[600px] flex items-center">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/grupo-distante.webp"
            alt="Sendero de montaña 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">
          <div className="max-w-3xl">
            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-balance text-white">EQUIPAMIENTO</h1>
            <p className="text-lg md:text-xl text-white/95 leading-relaxed text-pretty">
              Guía completa del equipo necesario para realizar el Cruce de los Andes. La preparación adecuada es
              fundamental para el éxito de la expedición.
            </p>
          </div>
        </div>
      </section>

      {/* Equipment Sections */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-balance">
              Equipo para Realizar el Cruce de los Andes
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
              Elementos en común para todos los expedicionarios
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
            {equipmentSections.map((section, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="flex items-center gap-3 mb-2">
                    <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                      <section.icon className="h-5 w-5 text-primary" aria-hidden="true" />
                    </div>
                    <CardTitle className="text-xl">{section.title}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-4">
                    {section.items.map((item, itemIndex) => (
                      <li key={itemIndex} className="border-l-2 border-primary/20 pl-4">
                        <h3 className="font-semibold text-sm mb-1">{item.name}</h3>
                        <p className="text-sm text-muted-foreground leading-relaxed">{item.description}</p>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Route Specific Equipment */}
      <section className="py-16 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-balance">Equipamiento Específico por Ruta</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
              Elementos adicionales según la ruta elegida
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {routeSpecific.map((route, index) => (
              <Card key={index}>
                <CardHeader>
                  <CardTitle className="text-xl text-balance">{route.route}</CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {route.items.map((item, itemIndex) => (
                      <li key={itemIndex} className="flex items-start gap-2 text-sm">
                        <CheckCircle2 className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Mandatory Rules */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="flex items-center gap-3 mb-8">
              <div className="w-12 h-12 rounded-lg bg-destructive/10 flex items-center justify-center">
                <AlertCircle className="h-6 w-6 text-destructive" />
              </div>
              <h2 className="text-3xl md:text-4xl font-bold text-balance">Normas Obligatorias</h2>
            </div>

            <Card className="border-destructive/20">
              <CardContent className="pt-6">
                <ul className="space-y-3">
                  {mandatoryRules.map((rule, index) => (
                    <li key={index} className="flex items-start gap-3">
                      <span className="flex-shrink-0 w-6 h-6 rounded-full bg-destructive/10 text-destructive flex items-center justify-center text-sm font-semibold">
                        {index + 1}
                      </span>
                      <span className="text-sm leading-relaxed">{rule}</span>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Safety Guidelines */}
      <section className="py-16 md:py-24 bg-muted/30">
        <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-balance">Pautas de Seguridad y Conducta</h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {safetyGuidelines.map((guideline, index) => (
                <Card key={index} className="border-primary/20">
                  <CardContent className="pt-6">
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                      <p className="text-sm leading-relaxed">{guideline}</p>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Recommendations */}
      <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">Sugerencias Importantes</h2>
            <div className="space-y-4 text-muted-foreground leading-relaxed">
              <p>
                Todas las prendas y elementos deben ser probados antes de comenzar el Cruce de los Andes y asegurarse de
                sentirse cómodo con las mismas.
              </p>
              <p>
                Las prendas sintéticas son superiores a las de algodón, ya que secan más rápido (sudor o lluvia). Los
                colores claros son más frescos para estar expuestos al sol.
              </p>
              <p className="font-semibold text-foreground">
                Una buena hidratación es fundamental para un Cruce exitoso. Vestuario y equipo debe ser previamente
                probado y sentirse cómodo con el mismo.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}