import type { Metadata } from "next"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Mountain, Calendar, Users, BookOpen } from "lucide-react"
import ParallaxHero from "@/components/parallax-hero"
import QuienesSomos from "@/components/quienes-somos"

export const metadata: Metadata = {
  title: "Inicio - Asociación Cultural Sanmartiniana Cuna de la Bandera",
  description:
    'Asociación Cultural Sanmartiniana "Cuna de la Bandera" - Proyecto pedagógico, histórico y cultural que trasciende el Cruce de los Andes. Preservamos y difundimos el legado del General San Martín.',
  openGraph: {
    title: "Asociación Cultural Sanmartiniana Cuna de la Bandera",
    description:
      "Proyecto pedagógico, histórico y cultural que trasciende el Cruce de los Andes. Preservamos el legado del General San Martín.",
    type: "website",
    locale: "es_AR",
  },
}

export default function HomePage() {
  const features = [
    {
      icon: Mountain,
      title: "Cruce de los Andes",
      description: "Explora las rutas históricas de la gesta sanmartiniana",
      href: "/cruce-de-los-andes",
    },
    {
      icon: Calendar,
      title: "Actividades",
      description: "Participa en nuestros eventos y programas culturales",
      href: "/actividades",
    },
    {
      icon: Users,
      title: "Comunidad",
      description: "Únete a nuestra comunidad de historia y cultura",
      href: "/contacto",
    },
    {
      icon: BookOpen,
      title: "Educación",
      description: "Recursos educativos sobre la historia argentina",
      href: "/actividades",
    },
  ]

  return (
    <div className="flex flex-col">
      {/* Parallax Hero Section */}
      <ParallaxHero />

      {/* Hero Section */}
      {/* <section className="relative py-16 md:py-24 overflow-hidden bg-black">
        <div className="absolute inset-0 z-0 opacity-5">
          <Image
            src="/images/marcha-banderas.webp"
            alt=""
            fill
            className="object-cover"
            aria-hidden="true"
            priority
          />
        </div>

        <div className="container mx-auto px-4 relative z-10">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
            <div className="md:col-span-4 flex justify-center md:justify-start">
              <div className="w-64 h-64 md:w-80 md:h-80 relative">
                <Image
                  src="/logo-sanmar.webp"
                  alt="Logo de la Asociación Cultural Sanmartiniana Cuna de la Bandera"
                  fill
                  className="object-contain"
                  priority
                />
              </div>
            </div>

            <div className="md:col-span-8">
              <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-balance text-foreground">
                Asociación Cultural Sanmartiniana &quot;Cuna de la Bandera&quot;
              </h1>
              <p className="text-lg md:text-xl mb-8 text-muted-foreground leading-relaxed text-pretty">
                Proyecto pedagógico, histórico y cultural que trasciende el
                Cruce de los Andes.
              </p>
              <Button asChild size="lg">
                <Link href="#quienes-somos">Conocé quiénes somos</Link>
              </Button>
            </div>
          </div>
        </div>
      </section> */}

      {/* Features Grid */}
      {/* <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">
              Nuestra Misión
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
              Promovemos el conocimiento y la valoración de la historia
              argentina a través de diversas actividades culturales y
              educativas.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {features.map((feature) => {
              const Icon = feature.icon;
              return (
                <Card
                  key={feature.title}
                  className="hover:shadow-lg transition-shadow"
                >
                  <CardHeader>
                    <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
                      <Icon
                        className="h-6 w-6 text-primary"
                        aria-hidden="true"
                      />
                    </div>
                    <CardTitle className="text-xl">{feature.title}</CardTitle>
                    <CardDescription className="text-base leading-relaxed">
                      {feature.description}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Button asChild variant="link" className="px-0">
                      <Link href={feature.href}>
                        Conocer más
                        <span className="sr-only"> sobre {feature.title}</span>
                      </Link>
                    </Button>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section> */}
      {/* 
      <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">
              La Gesta Libertadora
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
              Revivimos la historia del Cruce de los Andes a través de
              recreaciones históricas y actividades culturales
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="aspect-[4/3] rounded-lg overflow-hidden shadow-lg">
              <img
                src="/images/jinetes-banderas.webp"
                alt="Jinetes con banderas argentinas y provinciales atravesando la cordillera de los Andes"
                className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
              />
            </div>
            <div className="aspect-[4/3] rounded-lg overflow-hidden shadow-lg">
              <img
                src="/images/caravana-cielo-azul.webp"
                alt="Caravana de jinetes cruzando las montañas bajo un cielo azul intenso"
                className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
              />
            </div>
            <div className="aspect-[4/3] rounded-lg overflow-hidden shadow-lg">
              <img
                src="/images/recreacion-historica.webp"
                alt="Recreación histórica con participantes en uniformes de época del ejército libertador"
                className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
              />
            </div>
          </div>
        </div>
      </section> */}

      {/* Quiénes somos y Qué hacemos Section */}
      <QuienesSomos />

      {/* CTA Section */}
      <section className="relative w-full h-[70vh] overflow-hidden">
        {/* Imagen de fondo */}
        <div
          className="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage: "url('/images/marcha-banderas.webp')",
          }}
        />

        {/* Overlay oscuro para mejor legibilidad */}
        <div className="absolute inset-0 bg-black/40" />

        {/* Contenido centrado */}
        <div className="relative z-10 flex items-center justify-center h-full">
          <div className="text-center px-8 max-w-4xl mx-auto">
            <Button
              asChild
              size="lg"
              className="bg-[#092454] hover:bg-[#092454]/90 text-white px-16 py-8 text-2xl font-bold shadow-2xl"
            >
              <Link href="/contacto">Inscribite</Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}