'use client';

import Link from 'next/link';
import { WebsiteData } from '@/lib/hbfc-data';
import {
  ArrowRight,
  Flame,
  Award,
  Users,
  Mountain,
  HeartHandshake,
  Compass,
  Calendar,
} from 'lucide-react';
import { motion } from 'motion/react';

interface HeroProps {
  data: WebsiteData;
  activePage?: 'home' | 'about' | 'events' | 'membership' | 'gallery' | 'contact';
  onRegisterWalkathon?: () => void;
  onOpenMembership?: () => void;
}

export function Hero({
  data,
}: HeroProps) {
  return (
    <section id="hero" className="relative bg-white py-8 sm:py-14 md:py-18 border-b border-neutral-200 overflow-hidden">
      {/* Refined ambient light backdrop - subtle warm tones, no harsh blue circle */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-amber-50/40 via-neutral-50/30 to-white pointer-events-none" />
      
      {/* Subtle decorative grid lines */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#00000005_1px,transparent_1px),linear-gradient(to_bottom,#00000005_1px,transparent_1px)] bg-[size:4rem_4rem] pointer-events-none" />

      {/* Floating subtle ambient warmth */}
      <motion.div
        animate={{
          scale: [1, 1.1, 1],
          opacity: [0.25, 0.4, 0.25],
          x: [0, 15, 0],
          y: [0, -10, 0],
        }}
        transition={{ duration: 9, repeat: Infinity, ease: 'easeInOut' }}
        className="absolute top-10 left-1/3 w-80 h-80 bg-amber-200/20 rounded-full blur-3xl pointer-events-none"
      />

      <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header Branding & Crest */}
        <div className="text-center max-w-3xl mx-auto">
          {/* Official Logo Crest */}
          <motion.div
            initial={{ opacity: 0, scale: 0.8, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
            className="flex justify-center mb-3 sm:mb-5"
          >
            <motion.div
              whileHover={{ scale: 1.05, rotate: 1 }}
              transition={{ type: 'spring', stiffness: 300, damping: 20 }}
              className="relative w-14 h-14 sm:w-20 sm:h-20 md:w-22 md:h-22 rounded-2xl bg-black border-2 border-amber-400 p-1 shadow-lg shadow-amber-950/15 flex items-center justify-center cursor-pointer"
            >
              <img
                src="/hbfc-logo.jpg"
                alt="Healthy Billionaires Fitness Club Official Logo"
                className="w-full h-full object-contain"
                referrerPolicy="no-referrer"
              />
            </motion.div>
          </motion.div>

          {/* Main Headline */}
          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.15 }}
            id="hero-headline"
            className="text-xl sm:text-3xl md:text-5xl font-black tracking-tight text-neutral-900 uppercase leading-[1.15] mb-2 sm:mb-3"
          >
            {data.hero.headline || 'HEALTH IS WEALTH'}
          </motion.h1>

          {/* Gold Accent Line */}
          <motion.div
            initial={{ scaleX: 0, opacity: 0 }}
            animate={{ scaleX: 1, opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.25 }}
            className="w-12 sm:w-16 h-1 bg-gradient-to-r from-amber-300 via-amber-400 to-amber-500 rounded-full mx-auto mb-3 sm:mb-4 origin-center"
          />

          {/* Subheadline Description */}
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            id="hero-subheadline"
            className="text-xs sm:text-sm md:text-base text-neutral-600 max-w-xl mx-auto leading-relaxed mb-5 sm:mb-7 px-2"
          >
            {data.hero.subheadline ||
              'Building healthier people, stronger communities and meaningful connections through fitness, adventure and impact.'}
          </motion.p>

          {/* Call To Action Buttons: 3 side-by-side components (Explore Heritage, Coming Events, Volunteer) */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3 mb-6 sm:mb-10 w-full"
          >
            {/* 1. Golden Explore Heritage Button */}
            <motion.div
              whileHover={{ scale: 1.03, y: -2 }}
              whileTap={{ scale: 0.97 }}
              className="w-full sm:w-auto"
            >
              <Link
                href="/about"
                id="hero-about-link"
                className="w-full sm:w-auto px-4 py-2 sm:px-6 sm:py-2.5 rounded-xl bg-gradient-to-r from-amber-400 via-amber-500 to-amber-600 hover:from-amber-300 hover:to-amber-500 text-neutral-950 font-black text-[11px] sm:text-xs uppercase tracking-wider shadow-sm hover:shadow-md border border-amber-300/80 transition-all flex items-center justify-center gap-1.5 group cursor-pointer"
              >
                <Compass className="w-3.5 h-3.5 text-neutral-950 group-hover:rotate-45 transition-transform duration-300" />
                <span>EXPLORE HERITAGE</span>
                <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1.5 transition-transform text-neutral-950" />
              </Link>
            </motion.div>

            {/* 2. Coming Events Button */}
            <motion.div
              whileHover={{ scale: 1.03, y: -2 }}
              whileTap={{ scale: 0.97 }}
              className="w-full sm:w-auto"
            >
              <Link
                href="/events"
                id="hero-events-link"
                className="w-full sm:w-auto px-4 py-2 sm:px-5 sm:py-2.5 rounded-xl bg-neutral-900 hover:bg-black text-white font-bold text-[11px] sm:text-xs uppercase tracking-wider shadow-sm hover:shadow-md border border-neutral-800 hover:border-emerald-500/50 transition-all flex items-center justify-center gap-1.5 group cursor-pointer"
              >
                <Calendar className="w-3.5 h-3.5 text-emerald-400" />
                <span>COMING EVENTS</span>
                <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1.5 transition-transform text-neutral-400 group-hover:text-emerald-400" />
              </Link>
            </motion.div>

            {/* 3. Volunteer Button */}
            <motion.div
              whileHover={{ scale: 1.03, y: -2 }}
              whileTap={{ scale: 0.97 }}
              className="w-full sm:w-auto"
            >
              <Link
                href="/membership"
                id="hero-volunteer-link"
                className="w-full sm:w-auto px-4 py-2 sm:px-5 sm:py-2.5 rounded-xl bg-emerald-700 hover:bg-emerald-800 text-white font-bold text-[11px] sm:text-xs uppercase tracking-wider shadow-sm hover:shadow-md border border-emerald-600 transition-all flex items-center justify-center gap-1.5 group cursor-pointer"
              >
                <HeartHandshake className="w-3.5 h-3.5 text-amber-300" />
                <span>VOLUNTEER</span>
                <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1.5 transition-transform text-white/80" />
              </Link>
            </motion.div>
          </motion.div>
        </div>

        {/* Executive Key Club Metrics Bar */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.5 }}
          className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-3.5 pt-5 border-t border-neutral-200"
        >
          <motion.div
            whileHover={{ y: -3, transition: { duration: 0.2 } }}
            className="bg-neutral-50 border border-neutral-200/80 rounded-xl sm:rounded-2xl p-2.5 sm:p-3.5 text-left hover:border-amber-300 hover:bg-white transition-all shadow-xs"
          >
            <div className="flex items-center gap-1 text-emerald-800 mb-0.5">
              <Users className="w-3 h-3 text-emerald-700" />
              <span className="text-[9px] sm:text-[10px] font-bold uppercase tracking-wider text-neutral-500">Fraternity</span>
            </div>
            <div className="text-base sm:text-xl font-black text-neutral-900 tracking-tight">500+</div>
            <div className="text-[9px] sm:text-[11px] text-neutral-600 mt-0.5 line-clamp-1">Active leaders & walkers</div>
          </motion.div>

          <motion.div
            whileHover={{ y: -3, transition: { duration: 0.2 } }}
            className="bg-neutral-50 border border-neutral-200/80 rounded-xl sm:rounded-2xl p-2.5 sm:p-3.5 text-left hover:border-amber-300 hover:bg-white transition-all shadow-xs"
          >
            <div className="flex items-center gap-1 text-emerald-800 mb-0.5">
              <Flame className="w-3 h-3 text-amber-600" />
              <span className="text-[9px] sm:text-[10px] font-bold uppercase tracking-wider text-neutral-500">Flagship</span>
            </div>
            <div className="text-base sm:text-xl font-black text-neutral-900 tracking-tight">15KM</div>
            <div className="text-[9px] sm:text-[11px] text-neutral-600 mt-0.5 line-clamp-1">Calabar Walkathon</div>
          </motion.div>

          <motion.div
            whileHover={{ y: -3, transition: { duration: 0.2 } }}
            className="bg-neutral-50 border border-neutral-200/80 rounded-xl sm:rounded-2xl p-2.5 sm:p-3.5 text-left hover:border-amber-300 hover:bg-white transition-all shadow-xs"
          >
            <div className="flex items-center gap-1 text-emerald-800 mb-0.5">
              <Mountain className="w-3 h-3 text-emerald-700" />
              <span className="text-[9px] sm:text-[10px] font-bold uppercase tracking-wider text-neutral-500">Altitude</span>
            </div>
            <div className="text-base sm:text-xl font-black text-neutral-900 tracking-tight">1,576m</div>
            <div className="text-[9px] sm:text-[11px] text-neutral-600 mt-0.5 line-clamp-1">Obudu expedition</div>
          </motion.div>

          <motion.div
            whileHover={{ y: -3, transition: { duration: 0.2 } }}
            className="bg-neutral-50 border border-neutral-200/80 rounded-xl sm:rounded-2xl p-2.5 sm:p-3.5 text-left hover:border-amber-300 hover:bg-white transition-all shadow-xs"
          >
            <div className="flex items-center gap-1 text-emerald-800 mb-0.5">
              <HeartHandshake className="w-3 h-3 text-amber-600" />
              <span className="text-[9px] sm:text-[10px] font-bold uppercase tracking-wider text-neutral-500">Civic Action</span>
            </div>
            <div className="text-base sm:text-xl font-black text-neutral-900 tracking-tight">100%</div>
            <div className="text-[9px] sm:text-[11px] text-neutral-600 mt-0.5 line-clamp-1">Free health drives</div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}

export default Hero;