import Link from 'next/link'
import { TreePine, MapPin, Users, Target, Heart, Globe, GraduationCap } from 'lucide-react'
import { Navigation } from '@/components/navigation'
import { Footer } from '@/components/footer'

const missionStats = [
  { value: '10,000,000', label: 'Trees Committed', icon: TreePine },
  { value: 'ASAL', label: 'Dryland Regions', icon: MapPin },
  { value: '780+', label: 'Runners So Far', icon: Users },
]

const timeline = [
  {
    year: '2022',
    title: 'The Beginning',
    description: 'Lukenya University Marathon launches with 150 runners and a bold mission: plant 10 million trees in Kenya\'s ASAL regions.',
  },
  {
    year: '2023',
    title: 'Growing Momentum',
    description: '280 runners join the cause. Corporate relay category introduced. First Environmental Partner signs on.',
  },
  {
    year: '2024',
    title: 'Record Participation',
    description: '350+ finishers. Wheelchair category sees record entries. Partnership with local reforestation NGOs expands.',
  },
  {
    year: '2025',
    title: 'The Future',
    description: 'Targeting 500+ participants. New university partnerships. Expanded tree-planting verification programme.',
  },
]

const asalInfo = [
  {
    icon: Globe,
    title: 'What are ASAL Regions?',
    description: 'Arid and Semi-Arid Lands cover over 80% of Kenya\'s land mass. These dryland ecosystems are home to millions of Kenyans and are most vulnerable to climate change.',
  },
  {
    icon: TreePine,
    title: 'Why Trees Matter',
    description: 'Reforestation in ASAL regions combats desertification, improves soil quality, provides sustainable livelihoods, and sequesters carbon dioxide from the atmosphere.',
  },
  {
    icon: Target,
    title: 'Our Approach',
    description: 'We partner with verified reforestation NGOs to plant indigenous tree species. Each tree is GPS-tracked and monitored for survival over 3 years.',
  },
]

export default function AboutPage() {
  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-24">
          <span className="text-[#ffcd05] font-semibold text-xs uppercase tracking-[0.12em] mb-4 block">
            Our Story
          </span>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4">
            Kenya&apos;s Only Environmental Marathon
          </h1>
          <p className="text-white/80 text-lg max-w-2xl mx-auto">
            More than a race. A movement to restore Kenya&apos;s dryland ecosystems, one entry at a time.
          </p>
        </div>
      </section>

      {/* Mission Stats */}
      <section className="bg-[#006838] py-12">
        <div className="max-w-5xl mx-auto px-4">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
            {missionStats.map((stat, index) => (
              <div key={index} className="text-center">
                <stat.icon className="w-8 h-8 text-[#ffcd05] mx-auto mb-2" />
                <p className="text-white font-extrabold text-2xl md:text-3xl">{stat.value}</p>
                <p className="text-white/70 text-sm">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 10M Trees Mission */}
      <section className="bg-white py-16 md:py-24">
        <div className="max-w-4xl mx-auto px-4">
          <div className="text-center mb-12">
            <TreePine className="w-12 h-12 text-[#006838] mx-auto mb-4" />
            <span className="text-[#006838] font-semibold text-xs uppercase tracking-[0.12em] mb-2 block">
              The 10 Million Trees Mission
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
              Run for Kenya. Plant a Future.
            </h2>
          </div>

          <div className="prose prose-lg max-w-none text-[#6b7280]">
            <p className="text-lg leading-relaxed mb-6">
              The Lukenya University Marathon was founded with a simple but ambitious goal: to become Kenya&apos;s first and only marathon with a verified environmental mission.
            </p>
            <p className="text-lg leading-relaxed mb-6">
              Every entry fee directly funds tree planting in Kenya&apos;s ASAL (Arid and Semi-Arid Land) regions — the dryland ecosystems that cover over 80% of our country and are most threatened by climate change. We don&apos;t just promise impact; we verify it. Each tree is GPS-tracked, monitored for survival, and reported in our annual impact report.
            </p>
            <p className="text-lg leading-relaxed">
              Our target: 10 million trees. Every entry brings Kenya one step closer to a greener future.
            </p>
          </div>
        </div>
      </section>

      {/* ASAL Information */}
      <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">
              Understanding the Impact
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
              Why ASAL Regions?
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {asalInfo.map((item, index) => (
              <div key={index} className="bg-white rounded-xl p-6 shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
                <item.icon className="w-10 h-10 text-[#006838] mb-4" />
                <h3 className="font-bold text-[#111518] mb-2">{item.title}</h3>
                <p className="text-[#6b7280] text-sm leading-relaxed">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="bg-white py-16 md:py-24">
        <div className="max-w-4xl 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">
              Our Journey
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
              Growing Every Year
            </h2>
          </div>

          <div className="space-y-8">
            {timeline.map((item, index) => (
              <div 
                key={index}
                className="flex gap-6"
              >
                <div className="flex flex-col items-center">
                  <div className="w-12 h-12 bg-[#006838] rounded-full flex items-center justify-center text-white font-bold text-sm">
                    {item.year}
                  </div>
                  {index < timeline.length - 1 && (
                    <div className="w-0.5 flex-1 bg-[#e5e7eb] mt-2" />
                  )}
                </div>
                <div className="flex-1 pb-8">
                  <h3 className="font-bold text-[#111518] text-lg mb-2">{item.title}</h3>
                  <p className="text-[#6b7280]">{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Lukenya University */}
      <section className="bg-[#006838] py-16 md:py-24">
        <div className="max-w-4xl mx-auto px-4">
          <div className="text-center mb-12">
            <GraduationCap className="w-12 h-12 text-[#ffcd05] mx-auto mb-4" />
            <span className="text-[#ffcd05] font-semibold text-xs uppercase tracking-[0.12em] mb-2 block">
              Our Home
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-white">
              Lukenya University
            </h2>
          </div>

          <div className="bg-white/10 backdrop-blur rounded-2xl p-8 md:p-12">
            <p className="text-white/90 text-lg leading-relaxed mb-6">
              Lukenya University, located in Machakos County, Kenya, serves as the proud host of the Lukenya University Marathon. The university&apos;s commitment to environmental sustainability and community development aligns perfectly with the marathon&apos;s mission.
            </p>
            <p className="text-white/90 text-lg leading-relaxed mb-6">
              The scenic campus and surrounding terrain provide a challenging yet beautiful course that showcases the natural beauty of Machakos County — while reminding every runner why protecting Kenya&apos;s landscapes matters.
            </p>
            <div className="flex flex-wrap justify-center gap-6">
              <div className="flex items-center gap-2 text-white/80">
                <MapPin className="w-5 h-5 text-[#ffcd05]" />
                <span>Machakos County, Kenya</span>
              </div>
              <div className="flex items-center gap-2 text-white/80">
                <Heart className="w-5 h-5 text-[#ffcd05]" />
                <span>University-Verified Programme</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Values Section */}
      <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">
              What We Stand For
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
              Our Values
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="bg-white rounded-xl p-6 text-center shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
              <div className="w-12 h-12 bg-[#006838]/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <TreePine className="w-6 h-6 text-[#006838]" />
              </div>
              <h3 className="font-bold text-[#111518] mb-2">Environmental Impact</h3>
              <p className="text-[#6b7280] text-sm">Every race entry contributes to verified reforestation.</p>
            </div>
            <div className="bg-white rounded-xl p-6 text-center shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
              <div className="w-12 h-12 bg-[#006838]/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Users className="w-6 h-6 text-[#006838]" />
              </div>
              <h3 className="font-bold text-[#111518] mb-2">Inclusivity</h3>
              <p className="text-[#6b7280] text-sm">7 categories welcoming runners of all abilities.</p>
            </div>
            <div className="bg-white rounded-xl p-6 text-center shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
              <div className="w-12 h-12 bg-[#006838]/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Target className="w-6 h-6 text-[#006838]" />
              </div>
              <h3 className="font-bold text-[#111518] mb-2">Transparency</h3>
              <p className="text-[#6b7280] text-sm">GPS-tracked trees and published impact reports.</p>
            </div>
            <div className="bg-white rounded-xl p-6 text-center shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
              <div className="w-12 h-12 bg-[#006838]/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Heart className="w-6 h-6 text-[#006838]" />
              </div>
              <h3 className="font-bold text-[#111518] mb-2">Community</h3>
              <p className="text-[#6b7280] text-sm">Building a movement of runners who care.</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">
            Join the Mission
          </h2>
          <p className="text-white/80 text-lg mb-8">
            Run with purpose. Plant a future. Be part of Kenya&apos;s environmental marathon movement.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <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>
            <Link
              href="/sponsors"
              className="inline-block border border-white text-white font-semibold text-sm px-10 py-4 rounded-lg hover:bg-white/10 transition-colors duration-200"
            >
              BECOME A PARTNER
            </Link>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  )
}