'use client';

import { CountdownTimer } from './CountdownTimer';
import { Sparkles, Calendar, MapPin, Users, Shirt, Heart, ShieldCheck, ArrowRight } from 'lucide-react';

interface WalkathonSpotlightProps {
  onRegisterClick: () => void;
  imageUrl?: string;
}

export function WalkathonSpotlight({ onRegisterClick, imageUrl }: WalkathonSpotlightProps) {
  const fallbackImage =
    imageUrl ||
    'https://images.unsplash.com/photo-1552674605-db6ffd4facb5?q=80&w=1600&auto=format&fit=crop';

  return (
    <section id="walkathon" className="py-10 sm:py-16 md:py-20 relative bg-white overflow-hidden border-t border-neutral-200">
      <div className="max-w-7xl mx-auto px-3.5 sm:px-6 lg:px-8 relative z-10">
        {/* Section Heading */}
        <div className="text-center max-w-3xl mx-auto mb-8 sm:mb-12">
          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-800 text-[10px] sm:text-xs font-bold uppercase tracking-widest mb-2.5">
            <Sparkles className="w-3 h-3 text-amber-600" />
            <span>Featured Annual Event</span>
          </div>
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-black text-neutral-900 uppercase tracking-tight mb-2 sm:mb-3">
            Calabar Walkathon 7.0
          </h2>
          <p className="text-amber-700 font-bold text-xs sm:text-sm md:text-base tracking-wide flex items-center justify-center gap-1.5">
            <Calendar className="w-4 h-4 text-amber-600" />
            <span>Saturday, September 19, 2026</span>
          </p>
          <p className="text-neutral-600 text-xs sm:text-sm mt-1.5 max-w-xl mx-auto">
            The largest community health and walking movement in Cross River State. Uniting thousands of citizens, professionals, and youth for 15km of health, music, and unity.
          </p>
        </div>

        {/* Spotlight Card */}
        <div className="rounded-3xl bg-neutral-50 border border-neutral-200 shadow-md overflow-hidden grid grid-cols-1 lg:grid-cols-12 gap-0">
          {/* Image & Overlay Highlights */}
          <div className="lg:col-span-6 relative min-h-[360px] lg:min-h-full">
            <img
              src={fallbackImage}
              alt="Calabar Walkathon Crowd"
              className="w-full h-full object-cover brightness-[0.95] contrast-[1.05]"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-neutral-950/70 via-transparent to-transparent" />
            
            {/* Overlay Badge */}
            <div className="absolute bottom-6 left-6 right-6 p-4 rounded-2xl bg-white/95 backdrop-blur-md border border-neutral-200 shadow-md flex items-center justify-between">
              <div>
                <p className="text-xs font-bold uppercase text-emerald-700 tracking-wider">Start & Finish</p>
                <p className="text-sm sm:text-base font-extrabold text-neutral-900">U.J. Esuene Stadium Route</p>
                <p className="text-xs text-neutral-500">Calabar, Cross River State</p>
              </div>
              <div className="text-right">
                <span className="px-3 py-1 rounded-full text-xs font-black uppercase bg-amber-100 text-amber-900 border border-amber-300">
                  15 KM
                </span>
                <p className="text-[11px] text-neutral-500 mt-1 font-semibold">6:00 AM Prompt</p>
              </div>
            </div>
          </div>

          {/* Details & Countdown */}
          <div className="lg:col-span-6 p-6 sm:p-10 lg:p-12 flex flex-col justify-between bg-white">
            <div>
              {/* Countdown block */}
              <div className="mb-8">
                <p className="text-xs font-bold uppercase text-neutral-500 tracking-widest text-center mb-3">
                  Countdown to Stride Time
                </p>
                <CountdownTimer targetDateString="September 19, 2026 06:00:00" />
              </div>

              {/* Event Benefits / Features */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 mb-8">
                <div className="p-3.5 rounded-xl bg-neutral-50 border border-neutral-200 flex items-start gap-3">
                  <div className="p-2 rounded-lg bg-emerald-100 text-emerald-800 border border-emerald-200 shrink-0">
                    <Shirt className="w-4 h-4" />
                  </div>
                  <div>
                    <h4 className="text-sm font-bold text-neutral-900">Official HBFC Kit</h4>
                    <p className="text-xs text-neutral-600">Custom dry-fit jersey, wristband, & race bib.</p>
                  </div>
                </div>

                <div className="p-3.5 rounded-xl bg-neutral-50 border border-neutral-200 flex items-start gap-3">
                  <div className="p-2 rounded-lg bg-emerald-100 text-emerald-800 border border-emerald-200 shrink-0">
                    <Heart className="w-4 h-4 text-rose-600" />
                  </div>
                  <div>
                    <h4 className="text-sm font-bold text-neutral-900">Free Health Checks</h4>
                    <p className="text-xs text-neutral-600">Vitals, BP, blood glucose, and BMI screening.</p>
                  </div>
                </div>

                <div className="p-3.5 rounded-xl bg-neutral-50 border border-neutral-200 flex items-start gap-3">
                  <div className="p-2 rounded-lg bg-amber-100 text-amber-800 border border-amber-200 shrink-0">
                    <ShieldCheck className="w-4 h-4 text-amber-700" />
                  </div>
                  <div>
                    <h4 className="text-sm font-bold text-neutral-900">Safety & Hydration</h4>
                    <p className="text-xs text-neutral-600">Paramedic escort, water stations, security teams.</p>
                  </div>
                </div>

                <div className="p-3.5 rounded-xl bg-neutral-50 border border-neutral-200 flex items-start gap-3">
                  <div className="p-2 rounded-lg bg-emerald-100 text-emerald-800 border border-emerald-200 shrink-0">
                    <Users className="w-4 h-4 text-emerald-700" />
                  </div>
                  <div>
                    <h4 className="text-sm font-bold text-neutral-900">Aerofit & Fellowship</h4>
                    <p className="text-xs text-neutral-600">Grand aerobics finale and networking brunch.</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Registration CTA Bar */}
            <div className="pt-6 border-t border-neutral-200 flex flex-col sm:flex-row items-center justify-between gap-4">
              <div>
                <p className="text-xs text-neutral-500">Individual & Corporate Entry</p>
                <p className="text-sm font-bold text-emerald-800">Open to All Fitness Levels</p>
              </div>

              <button
                id="walkathon-register-now-btn"
                onClick={onRegisterClick}
                className="w-full sm:w-auto px-7 py-3.5 rounded-xl font-bold text-sm tracking-wider uppercase bg-emerald-600 hover:bg-emerald-700 text-white shadow-md transition-all cursor-pointer flex items-center justify-center gap-2 group"
              >
                <span>Register Now</span>
                <ArrowRight className="w-4 h-4 text-amber-300 group-hover:translate-x-1 transition-transform" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}