import Link from 'next/link'
import { TreePine, BarChart3, Award, Building } from 'lucide-react'
import { Navigation } from '@/components/navigation'
import { Footer } from '@/components/footer'

const sponsorshipTiers = [
  {
    name: 'Title Sponsor',
    investment: '[INVESTMENT TBD]',
    color: '#ffcd05',
    benefits: [
      'Exclusive naming rights: "The [Your Brand] Lukenya University Marathon"',
      'Logo on all race materials, signage, and digital assets',
      'Prime branding at start/finish line',
      'VIP hospitality tent for 20 guests',
      'Speaking opportunity at awards ceremony',
      'First right of refusal for subsequent years',
      'Exclusive press release and media coverage',
      'Full access to participant database (opt-in)',
    ],
  },
  {
    name: 'Gold Sponsor',
    investment: '[INVESTMENT TBD]',
    color: '#ffcd05',
    benefits: [
      'Logo on race bibs and finisher medals',
      'Branded water station on course',
      'VIP hospitality tent for 10 guests',
      'Logo on event website and social media',
      'Inclusion in press releases',
      'Banner placement at finish line',
      'Product sampling opportunity',
    ],
  },
  {
    name: 'Silver Sponsor',
    investment: '[INVESTMENT TBD]',
    color: '#9ca3af',
    benefits: [
      'Logo on event t-shirts',
      'Banner placement on course',
      'VIP passes for 5 guests',
      'Logo on event website',
      'Social media mentions',
      'Expo booth space',
    ],
  },
  {
    name: 'Community Sponsor',
    investment: '[INVESTMENT TBD]',
    color: '#006838',
    benefits: [
      'Logo on event website',
      'Social media recognition',
      'VIP passes for 2 guests',
      'Certificate of partnership',
      'Opportunity to provide goodie bag items',
    ],
  },
]

const esgBenefits = [
  { icon: TreePine, title: 'Verified Impact', description: 'Certified tree-planting offset with GPS-tracked verification in ASAL regions.' },
  { icon: BarChart3, title: 'Brand Alignment', description: 'Associate your brand with Kenya\'s only marathon with a verified environmental mission.' },
  { icon: Award, title: 'Annual Report', description: 'Comprehensive ESG impact report for your sustainability reporting needs.' },
]

export default function SponsorsPage() {
  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-[#006838] bg-white/10 backdrop-blur font-semibold text-xs uppercase tracking-[0.12em] px-4 py-2 rounded-full inline-block mb-4">
            Sponsorship Opportunities
          </span>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4">
            Partner With Purpose
          </h1>
          <p className="text-white/80 text-lg max-w-2xl mx-auto">
            Associate your brand with Kenya&apos;s only marathon with a verified environmental mission.
          </p>
        </div>
      </section>

      {/* Sponsorship Tiers */}
      <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">
              Investment Levels
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
              Sponsorship Tiers
            </h2>
          </div>

          <div className="space-y-6">
            {sponsorshipTiers.map((tier, index) => (
              <div 
                key={index}
                className="bg-white rounded-xl shadow-[0_2px_16px_rgba(0,0,0,0.08)] overflow-hidden"
              >
                <div 
                  className="h-1"
                  style={{ backgroundColor: tier.color }}
                />
                <div className="p-6 md:p-8">
                  <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
                    <div>
                      <h3 className="text-2xl font-extrabold text-[#111518]">{tier.name}</h3>
                    </div>
                    <p className="text-[#3bb34a] font-bold text-xl">KES {tier.investment}</p>
                  </div>
                  <ul className="space-y-2">
                    {tier.benefits.map((benefit, idx) => (
                      <li key={idx} className="flex items-start gap-2">
                        <span className="text-[#006838] mt-1">•</span>
                        <span className="text-[#6b7280]">{benefit}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Environmental Partner Tier - Special Section */}
      <section className="bg-[#006838] py-16 md:py-24">
        <div className="max-w-4xl mx-auto px-4">
          <div className="bg-white/10 rounded-2xl p-8 md:p-12">
            <div className="flex items-center gap-2 mb-6">
              <TreePine className="w-6 h-6 text-[#ffcd05]" />
              <span className="text-[#ffcd05] font-semibold text-xs uppercase tracking-[0.12em]">
                ESG Verified Partnership
              </span>
            </div>

            <h2 className="text-3xl md:text-4xl font-extrabold text-white mb-4">
              Environmental Partner
            </h2>
            <p className="text-white/80 text-lg mb-6">
              The anchor tier of Lukenya University Marathon. Join as our Environmental Partner and align your brand with Kenya&apos;s only marathon committed to verified reforestation in ASAL regions.
            </p>

            <div className="bg-white rounded-xl p-6 mb-8">
              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
                <div>
                  <span className="text-[#006838] font-semibold text-sm uppercase">Investment</span>
                  <p className="text-[#3bb34a] font-extrabold text-2xl">KES [INVESTMENT TBD]</p>
                </div>
                <span className="inline-block bg-[#006838] text-white text-xs font-bold px-4 py-2 rounded-full uppercase tracking-wider">
                  ESG Verified Partnership
                </span>
              </div>
              <ul className="space-y-2 text-[#6b7280]">
                <li className="flex items-start gap-2">
                  <span className="text-[#006838] mt-1">•</span>
                  Verified tree-planting offset in ASAL regions
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-[#006838] mt-1">•</span>
                  ASAL region impact report with GPS verification
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-[#006838] mt-1">•</span>
                  Environmental Partner branding on all race materials
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-[#006838] mt-1">•</span>
                  Speaking slot on environmental mission at pre-race expo
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-[#006838] mt-1">•</span>
                  Annual sustainability report co-branded with your organization
                </li>
              </ul>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
              {esgBenefits.map((benefit, index) => (
                <div key={index} className="text-center">
                  <benefit.icon className="w-10 h-10 text-[#ffcd05] mx-auto mb-3" />
                  <h4 className="font-bold text-white mb-2">{benefit.title}</h4>
                  <p className="text-white/70 text-sm">{benefit.description}</p>
                </div>
              ))}
            </div>

            <div className="text-center">
              <Link
                href="#contact"
                className="inline-block bg-[#ffcd05] text-[#111518] font-bold text-sm px-8 py-4 rounded-lg hover:bg-[#c4930f] transition-colors duration-200"
              >
                REQUEST ESG PARTNERSHIP BRIEF
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Why Partner 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">
              Why the Environmental Partner Tier?
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
              Corporate ESG Value
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-xl p-6 shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
              <TreePine className="w-10 h-10 text-[#006838] mb-4" />
              <h3 className="font-bold text-[#111518] mb-2">Verified Impact</h3>
              <p className="text-[#6b7280] text-sm">
                GPS-tracked tree planting in Kenya&apos;s ASAL regions with third-party verification. Real, measurable environmental impact.
              </p>
            </div>
            <div className="bg-white rounded-xl p-6 shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
              <Building className="w-10 h-10 text-[#006838] mb-4" />
              <h3 className="font-bold text-[#111518] mb-2">Brand Alignment</h3>
              <p className="text-[#6b7280] text-sm">
                Position your brand alongside Kenya&apos;s only marathon with a verified environmental mission. Authentic ESG storytelling.
              </p>
            </div>
            <div className="bg-white rounded-xl p-6 shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
              <BarChart3 className="w-10 h-10 text-[#006838] mb-4" />
              <h3 className="font-bold text-[#111518] mb-2">Annual Report</h3>
              <p className="text-[#6b7280] text-sm">
                Comprehensive environmental impact report suitable for corporate sustainability reporting and stakeholder communications.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Form */}
      <section id="contact" className="bg-white py-16 md:py-24">
        <div className="max-w-2xl 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">
              Get Started
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
              Ready to Discuss a Partnership?
            </h2>
            <p className="text-[#6b7280] mt-4">
              Fill in the form below and we&apos;ll respond within 2 business days.
            </p>
          </div>

          <form className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-[#111518] mb-1">Company Name *</label>
                <input
                  type="text"
                  className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors"
                  placeholder="Your company name"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-[#111518] mb-1">Contact Name *</label>
                <input
                  type="text"
                  className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors"
                  placeholder="Your name"
                />
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-[#111518] mb-1">Email *</label>
                <input
                  type="email"
                  className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors"
                  placeholder="you@company.com"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-[#111518] mb-1">Phone</label>
                <input
                  type="tel"
                  className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors"
                  placeholder="+254"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-[#111518] mb-1">Tier of Interest</label>
              <select className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors">
                <option value="">Select a tier</option>
                <option value="title">Title Sponsor</option>
                <option value="gold">Gold Sponsor</option>
                <option value="silver">Silver Sponsor</option>
                <option value="community">Community Sponsor</option>
                <option value="environmental">Environmental Partner</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-[#111518] mb-1">Message</label>
              <textarea
                rows={4}
                className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors resize-none"
                placeholder="Tell us about your sponsorship goals..."
              />
            </div>

            <button
              type="submit"
              className="w-full bg-[#3bb34a] text-white font-semibold text-sm py-4 rounded-lg hover:bg-[#2a9a3a] transition-colors duration-200"
            >
              SEND ENQUIRY
            </button>
          </form>
        </div>
      </section>

      {/* Current Sponsors */}
      <section className="bg-[#F5F7FC] py-16">
        <div className="max-w-5xl mx-auto px-4">
          <div className="text-center mb-10">
            <span className="text-[#006838] font-semibold text-xs uppercase tracking-[0.12em] mb-2 block">
              Our Current Partners
            </span>
            <h2 className="text-2xl font-bold text-[#111518]">
              Brands Running With Purpose
            </h2>
          </div>

          <div className="flex flex-wrap justify-center gap-6">
            {[1, 2, 3, 4, 5].map((_, index) => (
              <div 
                key={index}
                className="w-36 h-20 bg-white border border-[#e5e7eb] rounded-lg flex items-center justify-center"
              >
                <span className="text-[#6b7280] text-xs">Sponsor Logo</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  )
}