"use client";

import React from "react";
import Link from "next/link";
import { Sparkles, ShieldCheck, Clock, Award, ArrowRight, Play } from "lucide-react";

export function Hero({ onOpenVideo }: { onOpenVideo?: () => void }) {
  return (
    <section className="relative overflow-hidden bg-radial from-amber-950/90 via-stone-900 to-black text-amber-50 py-16 sm:py-24 lg:py-28">
      {/* Background Decorative Texture */}
      <div className="absolute inset-0 opacity-15 bg-[radial-gradient(#d97706_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none" />

      {/* Decorative Glow */}
      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-amber-600/20 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          
          {/* Left Column: Storytelling & Value Proposition */}
          <div className="lg:col-span-7 space-y-6 text-center lg:text-left">
            {/* Historical Heritage Badge */}
            <div className="inline-flex items-center gap-2 bg-amber-500/10 border border-amber-400/30 text-amber-300 px-3.5 py-1.5 rounded-full text-xs font-semibold tracking-wide backdrop-blur-xs">
              <Sparkles className="w-3.5 h-3.5 text-amber-400" />
              <span>Saga de Pasteleros desde 1758 · Obrador en Aspe (Alicante)</span>
            </div>

            {/* Main Headline */}
            <h1 className="font-serif text-3xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-white leading-tight">
              El Panettone Artesanal de <span className="text-amber-400 italic">Masa Madre</span> y 4 Días de Paciencia
            </h1>

            {/* Subheading */}
            <p className="text-base sm:text-lg text-amber-100/85 max-w-2xl mx-auto lg:mx-0 font-light leading-relaxed">
              Elaborado de manera 100% artesana siguiendo la receta tradicional de fermentación lenta de más de 30 horas. Sin aditivos ni conservantes industriales. Directo de nuestro obrador a tu mesa en 24-48h.
            </p>

            {/* Action Buttons */}
            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-2">
              <Link
                href="#catalogo"
                className="w-full sm:w-auto bg-amber-500 hover:bg-amber-400 text-stone-950 font-bold px-8 py-3.5 rounded-full text-sm tracking-wide shadow-lg hover:shadow-amber-500/25 transition transform hover:-translate-y-0.5 flex items-center justify-center gap-2"
              >
                <span>Comprar Panettone Online</span>
                <ArrowRight className="w-4 h-4" />
              </Link>
              <Link
                href="#artesania"
                className="w-full sm:w-auto bg-white/10 hover:bg-white/20 text-white font-medium border border-white/20 px-6 py-3.5 rounded-full text-sm tracking-wide backdrop-blur-xs transition flex items-center justify-center gap-2"
              >
                <Play className="w-3.5 h-3.5 fill-current" />
                <span>Ver Proceso de Elaboración</span>
              </Link>
            </div>

            {/* Trust Badges */}
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 pt-6 border-t border-amber-900/50 text-xs text-amber-200/80">
              <div className="flex items-center gap-2 justify-center lg:justify-start">
                <ShieldCheck className="w-4 h-4 text-amber-400 shrink-0" />
                <span>Masa Madre 100% Natural</span>
              </div>
              <div className="flex items-center gap-2 justify-center lg:justify-start">
                <Clock className="w-4 h-4 text-amber-400 shrink-0" />
                <span>4 Días / 30h Fermentación</span>
              </div>
              <div className="flex items-center gap-2 justify-center lg:justify-start">
                <Award className="w-4 h-4 text-amber-400 shrink-0" />
                <span>Envío GRATIS con Panettone</span>
              </div>
              <div className="flex items-center gap-2 justify-center lg:justify-start">
                <Sparkles className="w-4 h-4 text-amber-400 shrink-0" />
                <span>15 Sabores de Autor</span>
              </div>
            </div>
          </div>

          {/* Right Column: Featured Hero Product Image Card */}
          <div className="lg:col-span-5 relative">
            <div className="relative mx-auto max-w-sm lg:max-w-none">
              {/* Decorative Frame */}
              <div className="absolute -inset-1.5 bg-gradient-to-r from-amber-500 to-amber-700 rounded-2xl blur-lg opacity-40 group-hover:opacity-75 transition duration-1000 group-hover:duration-200" />
              
              <div className="relative bg-stone-900/90 border border-amber-500/30 rounded-2xl p-4 shadow-2xl overflow-hidden backdrop-blur-md">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src="https://raulasencio.es/wp-content/uploads/2014/12/Panttone-Milanes-2023-247x300.jpg"
                  alt="Panettone Milanés Raúl Asencio"
                  className="w-full h-80 sm:h-96 object-cover rounded-xl shadow-inner transform hover:scale-105 transition duration-700"
                />
                
                {/* Floating Product Badge */}
                <div className="absolute top-6 right-6 bg-amber-950/90 text-amber-300 border border-amber-500/40 px-3 py-1 rounded-full text-xs font-bold tracking-wider backdrop-blur-md shadow-lg">
                  El Clásico Milanés
                </div>

                {/* Bottom Overlay Info */}
                <div className="mt-3 flex items-center justify-between text-left px-2">
                  <div>
                    <h3 className="font-serif font-bold text-white text-base sm:text-lg">
                      Panettone Milanés Artesano
                    </h3>
                    <p className="text-xs text-amber-200/70">
                      1100 - 1200g · Masa Madre & Naranja Confitada
                    </p>
                  </div>
                  <div className="text-right">
                    <span className="text-amber-400 font-bold text-lg">32.50 €</span>
                    <span className="block text-[10px] text-emerald-400 font-medium">Envío Gratis</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}