import type { Metadata } from "next"
import Link from "next/link"
import Image from "next/image"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { BookOpen, Flag, Shield, Mountain, ScrollText } from "lucide-react"

export const metadata: Metadata = {
  title: "Actividades - Asociación Cultural Sanmartiniana",
  description:
    "Descubre nuestras actividades culturales, educativas y conmemorativas dedicadas a preservar el legado sanmartiniano.",
  openGraph: {
    title: "Actividades - Asociación Cultural Sanmartiniana",
    description:
      "Descubre nuestras actividades culturales, educativas y conmemorativas dedicadas a preservar el legado sanmartiniano.",
  },
}

export default function ActividadesPage() {
  const activities = [
    {
      title: "Charlas en colegios",
      slug: "charlas-en-colegios",
      icon: BookOpen,
    },
    {
      title: "Las postas",
      slug: "las-postas",
      icon: Flag,
    },
    {
      title: "Granaderos",
      slug: "granaderos",
      icon: Shield,
    },
    {
      title: "Preparación en seguridad para la montaña",
      slug: "preparacion-seguridad-montana",
      icon: Mountain,
    },
    {
      title: "Formación histórica",
      slug: "formacion-historica",
      icon: ScrollText,
    },
  ]

  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="relative h-[400px] md:h-[500px]">
        <Image
          src="/images/grupo-expedicion-andes.webp"
          alt="Grupo de expedicionarios caminando en los Andes con banderas"
          fill
          className="object-cover"
          priority
        />
      </section>

      {/* Title Section */}
      <section className="py-12 md:py-16 bg-background">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-center">
            <span className="text-6xl md:text-7xl lg:text-8xl text-primary">A</span>
            <span>CTIVIDADES</span>
          </h1>
        </div>
      </section>

      {/* Activities Grid */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
            {activities.map((activity) => {
              const Icon = activity.icon
              return (
                <Link
                  key={activity.slug}
                  href="#"
                  className="block transition-transform hover:scale-105 focus:scale-105 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-lg"
                >
                  <Card className="h-full hover:shadow-lg transition-shadow">
                    <CardHeader>
                      <div className="flex items-start gap-4">
                        <div className="p-3 rounded-lg bg-primary/10 text-primary shrink-0">
                          <Icon className="w-6 h-6" aria-hidden="true" />
                        </div>
                        <CardTitle className="text-xl text-balance">{activity.title}</CardTitle>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">Más información próximamente</p>
                    </CardContent>
                  </Card>
                </Link>
              )
            })}
          </div>

          <div className="max-w-3xl mx-auto text-center">
            <p className="text-muted-foreground leading-relaxed">
              Esta sección se encuentra en desarrollo. Próximamente encontrarás información detallada sobre cada una de
              nuestras actividades, incluyendo fechas, modalidades de participación y contenidos específicos. Por el
              momento, te invitamos a contactarnos para conocer más sobre cualquiera de estas propuestas.
            </p>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="bg-accent text-accent-foreground rounded-2xl p-8 md:p-12 text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-balance">¿Te interesa participar?</h2>
            <p className="text-lg mb-8 max-w-2xl mx-auto text-accent-foreground/90 text-pretty">
              Contactanos para conocer más sobre nuestras actividades y cómo podés sumarte a la Asociación Cultural
              Sanmartiniana.
            </p>
            <Button asChild size="lg" variant="secondary">
              <Link href="/contacto">Contactanos</Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}