export const dynamic = 'force-dynamic'
import Link from 'next/link'
import Image from 'next/image'
import { Navbar } from '@/components/navbar'
import { Calendar, Clock, Star, ChevronRight } from 'lucide-react'

export default function Home() {
  return (
    <>
      <Navbar />
      <main className="flex-1 bg-[#080808]">

        {/* ── HERO ── */}
        <section className="relative min-h-screen flex flex-col items-center justify-center px-6 py-20 overflow-hidden">
          {/* Fondo con gradiente radial sutil */}
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_#1a1508_0%,_#080808_70%)] pointer-events-none" />
          {/* Líneas decorativas */}
          <div className="absolute inset-0 pointer-events-none opacity-5"
            style={{ backgroundImage: 'repeating-linear-gradient(0deg,transparent,transparent 80px,#C9A84C 80px,#C9A84C 81px)' }} />

          <div className="relative z-10 max-w-3xl mx-auto text-center">
            {/* Logo grande */}
            <div className="flex justify-center mb-10">
              <div className="relative">
                <div className="absolute inset-0 rounded-full blur-2xl bg-[#C9A84C] opacity-15 scale-110" />
                <Image
                  src="/logo.png"
                  alt="Barbería Lukakin"
                  width={280}
                  height={157}
                  style={{ width: 280, height: 280, objectFit: 'cover' }}
                  className="relative rounded-full ring-2 ring-[#C9A84C]/40"
                  priority
                />
              </div>
            </div>

            {/* Texto decorativo superior */}
            <p className="text-[#C9A84C] text-xs tracking-[0.4em] uppercase mb-4 font-light">
              Est. — Premium Barbershop
            </p>

            <h1 className="font-display text-6xl sm:text-7xl font-bold text-white mb-3 tracking-tight leading-tight">
              Barbería
            </h1>
            <h2 className="font-display text-6xl sm:text-7xl font-bold text-[#C9A84C] mb-8 tracking-tight leading-tight">
              Lukakin
            </h2>

            {/* Línea dorada */}
            <div className="gold-divider mb-8" />

            <p className="text-[#a89880] text-lg mb-12 max-w-md mx-auto font-light leading-relaxed">
              Donde el estilo y la precisión se encuentran. Agenda tu cita con los mejores artistas del cabello.
            </p>

            <div className="flex gap-4 justify-center flex-wrap">
              <Link href="/agendar">
                <button className="group flex items-center gap-2 bg-[#C9A84C] hover:bg-[#E8C97A] text-black font-semibold px-8 py-4 rounded-none tracking-widest text-sm uppercase transition-all duration-300 hover:shadow-[0_0_30px_rgba(201,168,76,0.4)]">
                  Reservar cita
                  <ChevronRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                </button>
              </Link>
              <Link href="/registro">
                <button className="flex items-center gap-2 border border-[#C9A84C]/50 hover:border-[#C9A84C] text-[#C9A84C] font-medium px-8 py-4 rounded-none tracking-widest text-sm uppercase transition-all duration-300 hover:bg-[#C9A84C]/5">
                  Crear cuenta
                </button>
              </Link>
            </div>
          </div>

          {/* Scroll indicator */}
          <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 opacity-40">
            <div className="w-px h-12 bg-gradient-to-b from-transparent to-[#C9A84C]" />
            <span className="text-[#C9A84C] text-xs tracking-[0.3em] uppercase">Scroll</span>
          </div>
        </section>

        {/* ── SERVICIOS DESTACADOS ── */}
        <section className="py-28 px-6 bg-[#0d0d0d]">
          <div className="max-w-5xl mx-auto">
            <div className="text-center mb-16">
              <p className="text-[#C9A84C] text-xs tracking-[0.4em] uppercase mb-4">Lo que ofrecemos</p>
              <h2 className="font-display text-4xl font-bold text-white mb-4">
                Experiencia de primer nivel
              </h2>
              <div className="gold-divider" />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-[#C9A84C]/10">
              {[
                {
                  icon: <Calendar className="h-7 w-7" />,
                  title: 'Agenda en línea',
                  desc: 'Reserva tu cita en segundos. Elige barbero, servicio y horario desde cualquier dispositivo.',
                },
                {
                  icon: <Clock className="h-7 w-7" />,
                  title: 'Sin esperas',
                  desc: 'Tu tiempo es valioso. Llega justo a tu hora y recibe atención inmediata.',
                },
                {
                  icon: <Star className="h-7 w-7" />,
                  title: 'Maestros del oficio',
                  desc: 'Nuestros barberos combinan técnica, precisión y pasión en cada servicio.',
                },
              ].map((f) => (
                <div key={f.title} className="bg-[#0d0d0d] p-10 text-center group hover:bg-[#111] transition-colors">
                  <div className="flex justify-center mb-6 text-[#C9A84C] opacity-80 group-hover:opacity-100 transition-opacity">
                    {f.icon}
                  </div>
                  <h3 className="font-display text-xl font-semibold text-white mb-3">{f.title}</h3>
                  <p className="text-[#666] text-sm leading-relaxed font-light">{f.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── CTA FINAL ── */}
        <section className="relative py-28 px-6 overflow-hidden">
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_#1a1508_0%,_#080808_70%)]" />
          <div className="absolute inset-0 opacity-5"
            style={{ backgroundImage: 'repeating-linear-gradient(90deg,transparent,transparent 80px,#C9A84C 80px,#C9A84C 81px)' }} />

          <div className="relative z-10 max-w-2xl mx-auto text-center">
            <p className="text-[#C9A84C] text-xs tracking-[0.4em] uppercase mb-4">¿Listo para el cambio?</p>
            <h2 className="font-display text-5xl font-bold text-white mb-4">
              Luce como lo que eres
            </h2>
            <div className="gold-divider mb-8" />
            <p className="text-[#666] mb-12 font-light">
              Reserva en menos de 2 minutos. Sin filas, sin esperas.
            </p>
            <Link href="/agendar">
              <button className="group flex items-center gap-2 mx-auto bg-[#C9A84C] hover:bg-[#E8C97A] text-black font-semibold px-10 py-4 rounded-none tracking-widest text-sm uppercase transition-all duration-300 hover:shadow-[0_0_40px_rgba(201,168,76,0.35)]">
                Reservar ahora
                <ChevronRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
              </button>
            </Link>
          </div>
        </section>
      </main>

      <footer className="bg-[#050505] border-t border-[#C9A84C]/10 py-10 text-center">
        <div className="flex justify-center mb-4">
          <Image src="/logo.png" alt="Barbería Lukakin" width={40} height={23} style={{ width: 40, height: 40, objectFit: 'cover' }} className="rounded-full opacity-70" />
        </div>
        <p className="text-[#333] text-xs tracking-[0.3em] uppercase">
          © {new Date().getFullYear()} Barbería Lukakin — Todos los derechos reservados
        </p>
      </footer>
    </>
  )
}