import Link from 'next/link'
import { ExternalLink, Calendar, Users, Trophy, ShieldCheck } from 'lucide-react'
import { Navigation } from '@/components/navigation'
import { Footer } from '@/components/footer'

const editions = [
  {
    year: 2024,
    date: 'October 2024',
    participants: '350+',
    highlight: 'Record participation in wheelchair category',
    resultsUrl: '#',
  },
  {
    year: 2023,
    date: 'October 2023',
    participants: '280',
    highlight: 'First corporate relay category introduced',
    resultsUrl: '#',
  },
  {
    year: 2022,
    date: 'October 2022',
    participants: '150',
    highlight: 'Inaugural edition - 10M Trees mission launched',
    resultsUrl: '#',
  },
]

const topFinishers = {
  fullMarathon: {
    men: [
      { place: '1st', name: '[Winner TBD]', time: '[TIME]', year: 2024 },
      { place: '2nd', name: '[Runner-up TBD]', time: '[TIME]', year: 2024 },
      { place: '3rd', name: '[Third TBD]', time: '[TIME]', year: 2024 },
    ],
    women: [
      { place: '1st', name: '[Winner TBD]', time: '[TIME]', year: 2024 },
      { place: '2nd', name: '[Runner-up TBD]', time: '[TIME]', year: 2024 },
      { place: '3rd', name: '[Third TBD]', time: '[TIME]', year: 2024 },
    ],
  },
}

export default function ResultsPage() {
  return (
    <div className="min-h-screen">
      <Navigation />

      {/* Page Hero */}
      <section className="bg-[#006838] pt-20">
        <div className="max-w-5xl mx-auto px-4 text-center py-16 md:py-20">
          <span className="text-[#006838] bg-white/10 backdrop-blur font-semibold text-xs uppercase tracking-[0.12em] px-4 py-2 rounded-full inline-block mb-4">
            Race History
          </span>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4">
            Results Archive
          </h1>
          <p className="text-white/80 text-lg max-w-2xl mx-auto">
            Complete results from all editions of the Lukenya University Marathon, certified by Sporthive.
          </p>
        </div>
      </section>

      {/* Sporthive Integration Banner */}
      <section className="bg-[#005030] py-6">
        <div className="max-w-5xl mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center justify-center gap-4">
            <div className="flex items-center gap-2">
              <ShieldCheck className="w-6 h-6 text-[#ffcd05]" />
              <span className="text-white font-semibold">Powered by Sporthive</span>
            </div>
            <span className="hidden md:block text-white/30">|</span>
            <p className="text-white/70 text-sm text-center md:text-left">
              Certified chip timing and official race results
            </p>
            <a 
              href="https://sporthive.com" 
              target="_blank" 
              rel="noopener noreferrer"
              className="flex items-center gap-1 text-[#ffcd05] hover:text-[#e5b02a] text-sm font-semibold transition-colors"
            >
              View on Sporthive
              <ExternalLink className="w-4 h-4" />
            </a>
          </div>
        </div>
      </section>

      {/* Edition History */}
      <section className="bg-white py-16 md:py-24">
        <div className="max-w-5xl mx-auto px-4">
          <div className="text-center mb-12">
            <span className="text-[#006838] font-semibold text-xs uppercase tracking-[0.12em] mb-2 block">
              All Editions
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
              Race History
            </h2>
          </div>

          <div className="space-y-6">
            {editions.map((edition) => (
              <div 
                key={edition.year}
                className="bg-white rounded-xl shadow-[0_2px_16px_rgba(0,0,0,0.08)] overflow-hidden"
              >
                <div className="h-1 bg-[#006838]" />
                <div className="p-6 md:p-8">
                  <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="text-2xl font-extrabold text-[#006838]">{edition.year}</h3>
                        <span className="text-[#6b7280] text-sm">{edition.date}</span>
                      </div>
                      <div className="flex items-center gap-4 mb-3">
                        <div className="flex items-center gap-1 text-[#111518]">
                          <Users className="w-4 h-4 text-[#006838]" />
                          <span className="text-sm font-medium">{edition.participants} Finishers</span>
                        </div>
                      </div>
                      <p className="text-[#6b7280] text-sm">{edition.highlight}</p>
                    </div>
                    <a
                      href={edition.resultsUrl}
                      className="inline-flex items-center gap-2 bg-[#3bb34a] text-white font-semibold text-sm px-6 py-3 rounded-lg hover:bg-[#2a9a3a] transition-colors duration-200"
                    >
                      View Full Results
                      <ExternalLink className="w-4 h-4" />
                    </a>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Top Finishers */}
      <section className="bg-[#F5F7FC] py-16 md:py-24">
        <div className="max-w-5xl mx-auto px-4">
          <div className="text-center mb-12">
            <span className="text-[#006838] font-semibold text-xs uppercase tracking-[0.12em] mb-2 block">
              2024 Highlights
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
              Top Finishers
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {/* Men's Full Marathon */}
            <div className="bg-white rounded-xl shadow-[0_2px_16px_rgba(0,0,0,0.08)] overflow-hidden">
              <div className="bg-[#006838] text-white px-6 py-4">
                <h3 className="font-bold">Full Marathon — Men</h3>
              </div>
              <div className="p-6">
                {topFinishers.fullMarathon.men.map((finisher, index) => (
                  <div 
                    key={index}
                    className={`flex items-center justify-between py-3 ${
                      index < topFinishers.fullMarathon.men.length - 1 ? 'border-b border-[#e5e7eb]' : ''
                    }`}
                  >
                    <div className="flex items-center gap-3">
                      <span className={`font-bold ${index === 0 ? 'text-[#ffcd05]' : 'text-[#111518]'}`}>
                        {finisher.place}
                      </span>
                      <span className="text-[#111518]">{finisher.name}</span>
                    </div>
                    <span className="text-[#6b7280] font-medium">{finisher.time}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Women's Full Marathon */}
            <div className="bg-white rounded-xl shadow-[0_2px_16px_rgba(0,0,0,0.08)] overflow-hidden">
              <div className="bg-[#006838] text-white px-6 py-4">
                <h3 className="font-bold">Full Marathon — Women</h3>
              </div>
              <div className="p-6">
                {topFinishers.fullMarathon.women.map((finisher, index) => (
                  <div 
                    key={index}
                    className={`flex items-center justify-between py-3 ${
                      index < topFinishers.fullMarathon.women.length - 1 ? 'border-b border-[#e5e7eb]' : ''
                    }`}
                  >
                    <div className="flex items-center gap-3">
                      <span className={`font-bold ${index === 0 ? 'text-[#ffcd05]' : 'text-[#111518]'}`}>
                        {finisher.place}
                      </span>
                      <span className="text-[#111518]">{finisher.name}</span>
                    </div>
                    <span className="text-[#6b7280] font-medium">{finisher.time}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="bg-white py-16 md:py-24">
        <div className="max-w-5xl mx-auto px-4">
          <div className="text-center mb-12">
            <span className="text-[#006838] font-semibold text-xs uppercase tracking-[0.12em] mb-2 block">
              Growing Every Year
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
              Race Statistics
            </h2>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div className="bg-[#F5F7FC] rounded-xl p-6 text-center">
              <Calendar className="w-8 h-8 text-[#006838] mx-auto mb-3" />
              <p className="text-[#006838] font-extrabold text-3xl">3</p>
              <p className="text-[#6b7280] text-sm">Editions</p>
            </div>
            <div className="bg-[#F5F7FC] rounded-xl p-6 text-center">
              <Users className="w-8 h-8 text-[#006838] mx-auto mb-3" />
              <p className="text-[#006838] font-extrabold text-3xl">780+</p>
              <p className="text-[#6b7280] text-sm">Total Finishers</p>
            </div>
            <div className="bg-[#F5F7FC] rounded-xl p-6 text-center">
              <Trophy className="w-8 h-8 text-[#006838] mx-auto mb-3" />
              <p className="text-[#006838] font-extrabold text-3xl">7</p>
              <p className="text-[#6b7280] text-sm">Categories</p>
            </div>
            <div className="bg-[#F5F7FC] rounded-xl p-6 text-center">
              <ShieldCheck className="w-8 h-8 text-[#006838] mx-auto mb-3" />
              <p className="text-[#006838] font-extrabold text-3xl">100%</p>
              <p className="text-[#6b7280] text-sm">Certified Results</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-[#006838] py-16">
        <div className="max-w-3xl mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-extrabold text-white mb-4">
            Ready to Add Your Name?
          </h2>
          <p className="text-white/80 text-lg mb-8">
            Join the growing list of finishers at Kenya&apos;s environmental marathon.
          </p>
          <Link
            href="/registration"
            className="inline-block bg-[#ffcd05] text-[#111518] font-bold text-sm px-10 py-4 rounded-lg hover:bg-[#c4930f] transition-colors duration-200"
          >
            REGISTER NOW
          </Link>
        </div>
      </section>

      <Footer />
    </div>
  )
}