import Link from 'next/link'
import Image from 'next/image'
import { 
  ShieldCheck, 
  Trophy, 
  TreePine, 
  Users, 
  MapPin, 
  Globe,
  Bike,
  ArrowRight
} from 'lucide-react'
import { Navigation } from '@/components/navigation'
import { Footer } from '@/components/footer'
import { HeroCarousel } from '@/components/hero-carousel'
import { getPublicEvent, getPublicPrizes } from '@/lib/lukenya-api'
import {
  countWord,
  displayPrice,
  editionLabel,
  findPrize,
  formatClock,
  formatEventDate,
  formatMoney,
  registrationIsOpen,
  registrationStatusText,
  venueLine,
} from '@/lib/event-types'

export const revalidate = 60

const galleryImages = [
  'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-4-100_result.jpg',
  'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-5-100_result.jpg',
  'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-6-100_result.jpg',
  'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-7-100_result.jpg',
  'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-8-100_result.jpg',
]

const sponsors = [
  { name: 'Betika', url: 'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2025/04/Betika.jpg' },
  { name: 'Greenlife', url: 'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2025/04/Greenlife.jpg' },
  { name: 'Family Bank', url: 'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2025/04/Family-bank.jpg' },
  { name: 'Lukenya Schools', url: 'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2025/04/Lukenya-schools-1.jpg' },
]

const testimonials = [
  {
    quote: "The Lukenya Hills will humble you. The finish line will change you. I have run 11 marathons. This one meant something different.",
    name: "David M.",
    category: "42KM Full Marathon",
    edition: "4th Edition"
  },
  {
    quote: "I came for the race. I stayed because of the trees. Knowing my entry funded real reforestation made this the most purposeful race I have ever entered.",
    name: "Amina K.",
    category: "21KM Half Marathon",
    edition: "3rd Edition"
  }
]

export default async function HomePage() {
  const [event, prizes] = await Promise.all([getPublicEvent(), getPublicPrizes()])
  const edition = event.edition
  const categories = event.categories
  const isOpen = registrationIsOpen(event)
  const label = editionLabel(edition)
  const date = formatEventDate(edition?.event_date)
  const venue = venueLine(edition)
  const featured = categories.find((c) => c.is_featured) || categories[0]
  const featuredStart = featured ? formatClock(featured.start_time) : null

  const heroStats = [
    { value: '300+', label: 'Runners' },
    { value: label || 'Next', label: isOpen ? 'Edition: entries open' : 'Edition' },
    { value: categories.length ? String(categories.length) : '–', label: 'Categories' },
    { value: '10M', label: 'Trees Mission' },
  ]

  const trustSignals = [
    { icon: ShieldCheck, label: 'Sporthive Certified Timing' },
    { icon: Trophy, label: 'Competitive Prize Money' },
    { icon: TreePine, label: '10M Trees Mission' },
    { icon: Users, label: '300+ Annual Finishers' },
    { icon: MapPin, label: venue || 'Venue to be announced' },
    { icon: Globe, label: 'Open to International Runners' },
  ]

  const featuredPrizeCategory = featured?.prize_eligible ? featured.name : undefined
  const prizeCards = [
    { icon: Trophy, title: `Men, ${featured?.distance_label || 'Marathon'}, 1st place`, amount: findPrize(prizes, 'Men', 1, featuredPrizeCategory) },
    { icon: Trophy, title: `Women, ${featured?.distance_label || 'Marathon'}, 1st place`, amount: findPrize(prizes, 'Women', 1, featuredPrizeCategory) },
    { icon: Users, title: 'Top corporate relay team', amount: findPrize(prizes, 'Corporate Relay', 1) },
  ]

  return (
    <div className="min-h-screen bg-white">
      <Navigation />

      {/* SECTION 1 — HERO (FIX 1: Left-aligned layout) */}
      <section className="relative min-h-screen flex flex-col">
        <HeroCarousel />
        
        {/* Hero Content - LEFT ALIGNED */}
        <div className="relative z-10 flex-1 flex flex-col justify-center px-6 md:px-12 pt-20">
          <div className="max-w-[1200px] mx-auto w-full">
            <div className="max-w-[600px]">
              {/* Eyebrow Badge */}
              <span className="inline-block bg-[#3BB34A] text-white font-[family-name:var(--font-raleway)] font-semibold text-[11px] uppercase tracking-[0.06em] px-4 py-2 rounded-full mb-6">
                {['Kenya', edition?.county, label].filter(Boolean).join(' · ')}
              </span>

              {/* H1 */}
              <h1 className="font-[family-name:var(--font-antonio)] font-bold text-white text-[40px] md:text-[56px] lg:text-[88px] uppercase leading-none tracking-[-0.01em] mb-6">
                Run, Ride<br />& Restore.
              </h1>

              {/* Subheading */}
              <p className="font-[family-name:var(--font-quicksand)] font-medium text-white/85 text-[17px] md:text-[20px] leading-relaxed mb-10">
                Africa&apos;s only university-backed marathon with a verified reforestation mission.<br />
                {[categories.length ? `${categories.length} categories` : null, venue, date].filter(Boolean).join(' · ')}
              </p>

              {/* CTA Buttons */}
              <div className="flex flex-col sm:flex-row gap-4 mb-6">
                <Link
                  href="/registration"
                  className="h-[52px] px-7 bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#3BB34A] hover:text-white transition-colors duration-200 flex items-center justify-center"
                >
                  Register Now
                </Link>
                <Link
                  href="/race-info"
                  className="h-[52px] px-7 border border-white text-white font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-white hover:text-[#111518] transition-colors duration-200 flex items-center justify-center"
                >
                  Race Information
                </Link>
              </div>

              {/* FIX 2: Registration Status Badge (replaces countdown) */}
              <div 
                className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#3BB34A]"
                style={{ backgroundColor: 'rgba(59,179,74,0.20)' }}
              >
                <span className="w-2 h-2 rounded-full bg-[#3BB34A] animate-pulse-dot" />
                <span className="font-[family-name:var(--font-raleway)] font-bold text-[13px] text-[#3BB34A] uppercase">
                  {registrationStatusText(event)}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Stat Strip (FIX 3: Edition contradiction fixed) */}
        <div className="relative z-10 w-full bg-black/45 backdrop-blur-[4px]">
          <div className="max-w-7xl mx-auto px-6 py-7">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {heroStats.map((stat, index) => (
                <div 
                  key={index} 
                  className={`text-center py-2 ${
                    index < heroStats.length - 1 ? 'md:border-r md:border-white/15' : ''
                  }`}
                >
                  <p className="font-[family-name:var(--font-antonio)] font-bold text-[#F0C000] text-[22px]">
                    {stat.value}
                  </p>
                  <p className="font-[family-name:var(--font-quicksand)] font-medium text-white/60 text-[12px]">
                    {stat.label}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 2 — TRUST BAR (FIX 6: Icons restored, location canonicalized) */}
      <section className="bg-[#006838] py-9">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
            {trustSignals.map((signal, index) => (
              <div 
                key={index} 
                className={`flex flex-col items-center text-center py-2 ${
                  index < trustSignals.length - 1 ? 'lg:border-r lg:border-white/15' : ''
                }`}
              >
                <signal.icon className="w-[22px] h-[22px] text-[#FFF100] mb-2" strokeWidth={2} />
                <span className="font-[family-name:var(--font-raleway)] font-semibold text-white text-[13px]">
                  {signal.label}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FIX 8: NEW RACE DATE ANCHOR SECTION */}
      <section className="bg-[#111518] py-14">
        <div className="max-w-5xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-0">
            {/* Column 1 — WHEN */}
            <div className="text-center md:text-left md:border-r md:border-white/10 md:pr-8">
              <span className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] text-[#3BB34A] uppercase tracking-[0.14em]">
                Race Day
              </span>
              <div className="w-8 h-[2px] bg-[#F0C000] mt-2 mb-3 mx-auto md:mx-0" />
              <p className="font-[family-name:var(--font-antonio)] font-bold text-white text-[32px] md:text-[40px] leading-tight">
                {date ? date.toUpperCase() : 'DATE TO BE ANNOUNCED'}
              </p>
              <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[14px] mt-2">
                {label ? `${label} · ` : ''}Annual event
              </p>
            </div>

            {/* Column 2 — WHERE */}
            <div className="text-center md:text-left md:border-r md:border-white/10 md:px-8">
              <span className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] text-[#3BB34A] uppercase tracking-[0.14em]">
                Location
              </span>
              <div className="w-8 h-[2px] bg-[#F0C000] mt-2 mb-3 mx-auto md:mx-0" />
              <p className="font-[family-name:var(--font-antonio)] font-bold text-white text-[32px] md:text-[40px] leading-tight">
                {(edition?.venue || 'To be announced').toUpperCase()}
              </p>
              <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[14px] mt-2">
                {[edition?.county ? `${edition.county}, Kenya` : 'Kenya', featured && featuredStart ? `${featured.distance_label} start: ${featuredStart}` : null].filter(Boolean).join(' · ')}
              </p>
            </div>

            {/* Column 3 — START TIMES (from the race categories) */}
            <div className="text-center md:text-left md:pl-8">
              <span className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] text-[#3BB34A] uppercase tracking-[0.14em]">
                Start Times
              </span>
              <div className="w-8 h-[2px] bg-[#F0C000] mt-2 mb-3 mx-auto md:mx-0" />
              <p className="font-[family-name:var(--font-antonio)] font-bold text-white text-[32px] md:text-[40px] leading-tight">
                {featuredStart || 'TBA'}
              </p>
              <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[14px] mt-2">
                {categories.filter((c) => c.start_time).slice(0, 4).map((c) => `${c.distance_label} ${formatClock(c.start_time)}`).join(' · ') || 'Start times are published with the race categories.'}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 3 — ENVIRONMENTAL MISSION (FIX 7: Clarified 10,000 vs 10M) */}
      <section className="bg-white py-24 md:py-32">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-[55%_45%] gap-16 lg:gap-20 items-center">
            {/* Left Column */}
            <div>
              {/* Eyebrow */}
              <span className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[11px] uppercase tracking-[0.16em]">
                Our Mission
              </span>
              {/* Gold Rule */}
              <div className="w-10 h-[3px] bg-[#F0C000] mt-3 mb-4" />
              
              {/* H2 */}
              <h2 className="font-[family-name:var(--font-raleway)] font-bold text-[#006838] text-[34px] md:text-[48px] leading-[1.15] mb-4">
                More Than a Finish Line.
              </h2>

              {/* Body (FIX 7: Updated copy) */}
              <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#111518] text-[17px] leading-[1.75] mb-8">
                The 10 Million Trees Marathon exists because of a promise made to Kenya&apos;s dryland ecosystems. Every runner, every kilometre, every edition is a contribution to one of East Africa&apos;s most ambitious conservation programmes. By 2027, the programme will have planted 10 million trees across the ASAL region — a goal now in its 5th year of active delivery.
              </p>

              {/* Stat Pills */}
              <div className="flex flex-wrap gap-3 mb-8">
                <div className="bg-[#006838] text-white rounded-lg px-6 py-4 flex items-center gap-3">
                  <span className="font-[family-name:var(--font-raleway)] font-bold text-[24px]">10M</span>
                  <span className="font-[family-name:var(--font-quicksand)] font-medium text-[12px] text-white/80">Trees by 2027</span>
                </div>
                <div className="bg-[#006838] text-white rounded-lg px-6 py-4 flex items-center gap-3">
                  <span className="font-[family-name:var(--font-raleway)] font-bold text-[24px]">4</span>
                  <span className="font-[family-name:var(--font-quicksand)] font-medium text-[12px] text-white/80">Editions Completed</span>
                </div>
                <div className="bg-[#006838] text-white rounded-lg px-6 py-4 flex items-center gap-3">
                  <span className="font-[family-name:var(--font-raleway)] font-bold text-[24px]">ASAL</span>
                  <span className="font-[family-name:var(--font-quicksand)] font-medium text-[12px] text-white/80">Region Impact</span>
                </div>
              </div>

              {/* CTA */}
              <Link
                href="/about"
                className="inline-flex items-center gap-2 h-[52px] px-7 border-2 border-[#006838] text-[#006838] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#006838] hover:text-white transition-colors duration-200"
              >
                Our Conservation Story <ArrowRight size={16} />
              </Link>
            </div>

            {/* Right Column (FIX 7: Updated labels) */}
            <div className="text-center">
              <p className="font-[family-name:var(--font-antonio)] font-bold text-[#F0C000] text-[80px] md:text-[96px] leading-none">
                10,000+
              </p>
              <p className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[16px] mt-2 mb-2">
                Trees planted and GPS-tagged to date
              </p>
              <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[13px] mb-4">
                Goal: 10 Million by 2027 &middot; 4 editions completed &middot; On track
              </p>
              <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[14px] leading-[1.65] max-w-[280px] mx-auto mb-4">
                GPS-tagged planting zones in Lukenya Conservation Area. Documented, verified, reportable.
              </p>
              <span className="inline-block bg-[#3BB34A] text-white font-[family-name:var(--font-raleway)] font-bold text-[11px] uppercase px-4 py-2 rounded-full">
                Verified Programme
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 4 — RACE CATEGORIES (FIX 4: Removed TBD pricing, added fallback) */}
      <section className="bg-[#F9FAFB] py-24 md:py-32">
        <div className="max-w-7xl mx-auto px-6">
          {/* Header */}
          <div className="mb-12">
            <span className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[11px] uppercase tracking-[0.16em]">
              Race Categories
            </span>
            <div className="w-10 h-[3px] bg-[#F0C000] mt-3 mb-4" />
            <h2 className="font-[family-name:var(--font-raleway)] font-bold text-[#111518] text-[36px] md:text-[44px] leading-tight mb-3">
              Find Your Distance.
            </h2>
            <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[17px]">
              {categories.length ? `${countWord(categories.length)} ${categories.length === 1 ? 'category' : 'categories'}. ` : ''}Every level of runner and rider. One extraordinary finish line.
            </p>
          </div>

          {/* Category Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-10">
            {categories.length === 0 && (
              <p className="md:col-span-2 lg:col-span-4 font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[15px]">
                Race categories for the next edition will be published here soon.
              </p>
            )}
            {categories.map((category) => {
              const price = formatMoney(displayPrice(category, 'resident'), event.currency)
              const isCycling = category.discipline === 'Cycling'
              return (
              <div 
                key={category.name} 
                className={`relative bg-white rounded-xl shadow-[0_2px_20px_rgba(0,0,0,0.07)] p-7 flex flex-col ${
                  category.is_featured ? 'border-l-4 border-l-[#006838]' : ''
                }`}
              >
                {/* Prize Badge */}
                {category.prize_eligible && (
                  <span className="absolute top-4 right-4 bg-[#F0C000] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[10px] uppercase px-2 py-1 rounded">
                    Prize Money
                  </span>
                )}
                
                {/* Cycling Icon */}
                {isCycling && !category.prize_eligible && (
                  <Bike className="absolute top-4 right-4 w-5 h-5 text-[#3BB34A]" />
                )}

                {/* Distance */}
                <p className="font-[family-name:var(--font-antonio)] font-bold text-[#006838] text-[40px] leading-none">
                  {category.distance_label}
                </p>
                
                {/* Name */}
                <h3 className="font-[family-name:var(--font-raleway)] font-bold text-[#111518] text-[16px] mt-2">
                  {category.category_name}
                </h3>
                
                {/* Description */}
                <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[13px] leading-relaxed mt-2 mb-3 flex-1">
                  {category.short_description || category.eligibility || category.inclusions.join(' · ')}
                </p>

                {/* Featured race: inline stat */}
                {category.is_featured && category.prize_eligible && (
                  <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[12px] mb-3">
                    🏆 Prize money available &middot; Certified course &middot; Chip timing
                  </p>
                )}
                
                {/* Price */}
                <div className="mb-3">
                  {category.sold_out ? (
                    <span className="inline-block bg-[#E5E7EB] text-[#111518] font-[family-name:var(--font-raleway)] font-bold text-[12px] uppercase px-2.5 py-1 rounded">
                      Sold out
                    </span>
                  ) : price ? (
                    <>
                      <p className="font-[family-name:var(--font-antonio)] font-bold text-[#111518] text-[22px] leading-none">{price}</p>
                      <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[12px] mt-1">
                        {category.prices.early_bird_active ? 'Early-bird rate for Kenyan residents' : 'Kenyan resident rate'}
                      </p>
                    </>
                  ) : (
                    <span className="inline-block bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[12px] uppercase px-2.5 py-1 rounded">
                      Pricing announced soon
                    </span>
                  )}
                </div>
                
                {/* CTA */}
                <Link
                  href={isOpen && !category.sold_out ? `/registration?race=${encodeURIComponent(category.name)}#registration-form` : '/registration#waitlist'}
                  className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[13px] hover:underline inline-flex items-center gap-1"
                >
                  {isOpen && !category.sold_out ? 'Enter this race' : 'Join waitlist'} <ArrowRight size={14} />
                </Link>
              </div>
              )
            })}
          </div>

          {/* CTAs */}
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Link
              href="/race-info"
              className="h-[52px] px-7 border-2 border-[#006838] text-[#006838] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#006838] hover:text-white transition-colors duration-200 flex items-center justify-center"
            >
              View All Race Info
            </Link>
            <Link
              href="/registration"
              className="h-[52px] px-7 bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#3BB34A] hover:text-white transition-colors duration-200 flex items-center justify-center"
            >
              Register Now
            </Link>
          </div>
        </div>
      </section>

      {/* SECTION 5 — PRIZE MONEY TEASER (FIX 5: Replaced TBD with competitive framing) */}
      <section className="bg-[#006838] py-24 md:py-32">
        <div className="max-w-5xl mx-auto px-6">
          {/* Header */}
          <div className="text-center mb-12">
            <span className="font-[family-name:var(--font-raleway)] font-semibold text-[#FFF100] text-[11px] uppercase tracking-[0.16em]">
              Prize Money
            </span>
            <div className="w-10 h-[3px] bg-[#FFF100] mt-3 mb-4 mx-auto" />
            <h2 className="font-[family-name:var(--font-raleway)] font-bold text-white text-[36px] md:text-[44px] leading-tight">
              Compete for Real Rewards.
            </h2>
          </div>

          {/* Prize Cards: amounts come from the edition's prize rules */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            {prizeCards.map((card) => (
              <div key={card.title} className="bg-white rounded-xl p-8 shadow-[0_2px_20px_rgba(0,0,0,0.07)] text-center">
                <card.icon className="w-7 h-7 text-[#F0C000] mx-auto mb-3" />
                <p className="font-[family-name:var(--font-raleway)] font-semibold text-[#687279] text-[13px] mb-2">
                  {card.title}
                </p>
                <p className="font-[family-name:var(--font-antonio)] font-bold text-[#F0C000] text-[28px]">
                  {formatMoney(card.amount, prizes?.currency || event.currency) || 'PRIZE MONEY AVAILABLE'}
                </p>
                {!card.amount && (
                  <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[13px] mt-2">
                    Amounts published before entries open
                  </p>
                )}
              </div>
            ))}
          </div>

          {/* Prize structure note (FIX 5) */}
          <p className="text-center font-[family-name:var(--font-quicksand)] font-medium text-white/65 text-[14px] mb-10">
            Prize structure includes Men, Women, Wheelchair, and Corporate Relay categories. Full breakdown published on the Prize Money page.
          </p>

          {/* CTA */}
          <div className="text-center">
            <Link
              href="/prize-money"
              className="inline-flex items-center gap-2 h-[52px] px-7 border border-white text-white font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-white hover:text-[#111518] transition-colors duration-200"
            >
              View Full Prize Structure <ArrowRight size={16} />
            </Link>
          </div>
        </div>
      </section>

      {/* SECTION 6 — PAST EDITIONS / SOCIAL PROOF (FIX 3: Updated headline) */}
      <section className="bg-white py-24 md:py-32">
        <div className="max-w-7xl mx-auto px-6">
          {/* Header */}
          <div className="mb-10">
            <span className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[11px] uppercase tracking-[0.16em]">
              Past Editions
            </span>
            <div className="w-10 h-[3px] bg-[#F0C000] mt-3 mb-4" />
            <h2 className="font-[family-name:var(--font-raleway)] font-bold text-[#111518] text-[36px] md:text-[44px] leading-tight">
              300+ Runners. Across 4 Editions. One Growing Legacy.
            </h2>
          </div>

          {/* Photo Strip */}
          <div className="flex gap-4 overflow-x-auto pb-4 -mx-6 px-6 snap-x snap-mandatory scroll-smooth">
            {galleryImages.map((src, index) => (
              <div 
                key={index}
                className="flex-shrink-0 w-[340px] h-[220px] rounded-[10px] overflow-hidden snap-start relative group"
              >
                <Image
                  src={src}
                  alt={`Marathon gallery image ${index + 1}`}
                  fill
                  className="object-cover transition-transform duration-300 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-[#006838]/0 group-hover:bg-[#006838]/25 transition-colors duration-300" />
              </div>
            ))}
          </div>

          {/* Testimonials (ADDITIONAL FIX 2) */}
          <div className="flex flex-col md:flex-row justify-center gap-6 mt-12 mb-12">
            {testimonials.map((testimonial, index) => (
              <div 
                key={index}
                className="bg-white rounded-xl shadow-[0_2px_20px_rgba(0,0,0,0.07)] p-6 max-w-[380px]"
              >
                <span className="font-[family-name:var(--font-antonio)] font-bold text-[#F0C000] text-[48px] leading-[0.8] block mb-2">
                  &ldquo;
                </span>
                <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#111518] text-[15px] leading-[1.65] italic mb-3">
                  {testimonial.quote}
                </p>
                <p className="font-[family-name:var(--font-raleway)] font-bold text-[#006838] text-[13px]">
                  — {testimonial.name}
                </p>
                <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[12px]">
                  {testimonial.category} &middot; {testimonial.edition}
                </p>
              </div>
            ))}
          </div>

          {/* Stat */}
          <div className="text-center mb-10">
            <p className="font-[family-name:var(--font-antonio)] font-bold text-[#006838] text-[72px] md:text-[88px] leading-none">
              300+
            </p>
            <p className="font-[family-name:var(--font-raleway)] font-semibold text-[#687279] text-[18px] mt-2">
              runners have crossed this finish line
            </p>
          </div>

          {/* CTA */}
          <div className="text-center">
            <Link
              href="/results"
              className="inline-flex items-center gap-2 h-[52px] px-7 border-2 border-[#006838] text-[#006838] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#006838] hover:text-white transition-colors duration-200"
            >
              View Results Archive
            </Link>
          </div>
        </div>
      </section>

      {/* SECTION 7 — SPONSORS */}
      <section className="bg-[#F9FAFB] py-24 md:py-32">
        <div className="max-w-5xl mx-auto px-6 text-center">
          {/* Header */}
          <span className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[11px] uppercase tracking-[0.16em]">
            Our Sponsors
          </span>
          <div className="w-10 h-[3px] bg-[#F0C000] mt-3 mb-4 mx-auto" />
          <h2 className="font-[family-name:var(--font-raleway)] font-bold text-[#111518] text-[32px] md:text-[40px] leading-tight mb-10">
            Brands That Run With Purpose.
          </h2>

          {/* Sponsor Logos */}
          <div className="flex flex-wrap justify-center gap-10 mb-8">
            {sponsors.map((sponsor, index) => (
              <div 
                key={index}
                className="relative w-auto h-16 grayscale hover:grayscale-0 transition-all duration-300"
              >
                <Image
                  src={sponsor.url}
                  alt={sponsor.name}
                  width={120}
                  height={64}
                  className="h-16 w-auto object-contain"
                />
              </div>
            ))}
          </div>

          <p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[14px] mb-10">
            Including our Environmental Partner tier — the only ESG-verified sponsorship in Kenyan running.
          </p>

          {/* CTA */}
          <Link
            href="/sponsors"
            className="inline-flex items-center gap-2 h-[52px] px-7 bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#3BB34A] hover:text-white transition-colors duration-200"
          >
            Become a Partner <ArrowRight size={16} />
          </Link>
        </div>
      </section>

      {/* SECTION 8 — REGISTRATION CTA BAND */}
      <section className="bg-[#006838] py-24">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="font-[family-name:var(--font-antonio)] font-bold text-[#FFF100] text-[40px] md:text-[64px] uppercase leading-none mb-4">
            {edition?.trees_commitment_per_entry ? 'Your Entry Plants a Tree.' : 'Run With Purpose.'}
          </h2>
          <p className="font-[family-name:var(--font-quicksand)] font-medium text-white/80 text-[19px] mb-8">
            {isOpen ? `Register for the ${label || 'next edition'}. Run for Kenya. Entries open now.` : `Entries for the ${label || 'next edition'} open soon. Join the waitlist to hear first.`}
          </p>
          <Link
            href="/registration"
            className="inline-flex items-center justify-center h-14 px-10 bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[15px] uppercase tracking-[0.08em] rounded-md hover:bg-[#3BB34A] hover:text-white transition-colors duration-200"
          >
            Register Now
          </Link>
          <p className="font-[family-name:var(--font-quicksand)] font-medium text-white/50 text-[13px] mt-4">
            {featured?.prices.early_bird_active ? 'Early-bird pricing available. Secure your place before rates increase.' : 'Pay by M-PESA or card.'}
          </p>
        </div>
      </section>

      <Footer />
    </div>
  )
}