import type { Metadata } from 'next'
import Link from 'next/link'
import SocialShare from '@/components/SocialShare'

export const metadata: Metadata = {
  title: 'Plymouth Metro — Connecting Plymouth',
  description:
    'Plymouth Metro is the campaign for a modern light rail and rapid transit network for Plymouth. Sign the petition and help shape the city\'s future.',
}

const HEADLINE_STATS = [
  { value: '28+', label: 'Stations across three lines' },
  { value: '£1.2bn', label: 'Estimated economic boost' },
  { value: '40%', label: 'Potential reduction in city car journeys' },
  { value: '10k+', label: 'Supporters and counting' },
]

const FEATURE_CARDS = [
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-7 h-7" aria-hidden="true">
        <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
      </svg>
    ),
    title: 'Rapid Transit',
    body: 'Frequent, reliable services connecting Derriford Hospital, Plymouth City Centre, Plympton, and Ivybridge — cutting commute times by up to 35%.',
    href: '/benefits',
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-7 h-7" aria-hidden="true">
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
      </svg>
    ),
    title: 'Green Future',
    body: 'Electric, zero-emission traction supporting Plymouth\'s net-zero ambitions and reducing thousands of tonnes of CO₂ each year.',
    href: '/impact',
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-7 h-7" aria-hidden="true">
        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
      </svg>
    ),
    title: 'Economic Growth',
    body: 'Analysis shows Plymouth Metro would unlock over £1.2 billion in economic value — attracting investment, boosting tourism, and creating new jobs.',
    href: '/economy',
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-7 h-7" aria-hidden="true">
        <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
      </svg>
    ),
    title: 'Community First',
    body: 'Designed around the needs of Plymouth people — with accessible, affordable fares, level-access boarding, and real-time passenger information throughout.',
    href: '/impact',
  },
]

export default function HomePage() {
  return (
    <>
      {/* Hero */}
      <section className="relative bg-hero-gradient text-white overflow-hidden">
        {/* Background decoration */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
          <div className="absolute -top-20 -right-20 w-[500px] h-[500px] rounded-full bg-white/5" />
          <div className="absolute -bottom-32 -left-32 w-[600px] h-[600px] rounded-full bg-white/5" />
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 lg:py-36">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/15 text-sm font-medium mb-6 backdrop-blur-sm">
              <span className="w-2 h-2 rounded-full bg-metro-teal animate-pulse" />
              Campaign now open for signatures
            </div>
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black leading-[1.1] mb-6">
              Plymouth deserves a{' '}
              <span className="text-metro-sky">modern metro</span>{' '}
              network
            </h1>
            <p className="text-xl text-white/80 leading-relaxed mb-8 max-w-2xl">
              Plymouth Metro is the campaign for a rapid transit network that connects communities,
              cuts congestion, and powers the city's future. Join thousands of residents who
              want a better way to move around Plymouth.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 mb-10">
              <Link href="/support" className="btn-primary text-base px-8 py-4" style={{color:"#ffffff"}}>
                <svg viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5" aria-hidden="true">
                  <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
                </svg>
                Sign the Petition
              </Link>
              <Link href="/map" className="btn-outline-white text-base px-8 py-4" style={{color:"#ffffff"}}>
                <svg viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5" aria-hidden="true">
                  <path fillRule="evenodd" d="M8.157 2.176a1.5 1.5 0 00-1.147 0l-4.084 1.69A1.5 1.5 0 002 5.25v10.877a.75.75 0 001.067.673l3.616-1.495 4.033 1.668a1.5 1.5 0 001.147 0l4.084-1.69A1.5 1.5 0 0018 13.75V2.873a.75.75 0 00-1.067-.673l-3.616 1.495-4.033-1.668zM7.25 4.193v10.5L6 15.107V4.607l1.25-.414zm1.5 10.5V4.193l3.5 1.449v10.5l-3.5-1.45zm5 1.414V5.607l1.25-.518v10.5l-1.25.518z" clipRule="evenodd" />
                </svg>
                Explore the Route Map
              </Link>
            </div>
            <SocialShare compact />
          </div>
        </div>

        {/* Wave divider */}
        <div className="absolute bottom-0 left-0 right-0" aria-hidden="true">
          <svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full">
            <path d="M0 60L1440 60L1440 20C1200 55 960 10 720 30C480 50 240 5 0 40L0 60Z" fill="white" />
          </svg>
        </div>
      </section>

      {/* Stats */}
      <section className="py-14 bg-white" aria-label="Campaign statistics">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
            {HEADLINE_STATS.map(stat => (
              <div key={stat.label} className="text-center">
                <p className="text-3xl sm:text-4xl font-black text-metro-sky">{stat.value}</p>
                <p className="text-sm text-metro-muted mt-1">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Feature cards */}
      <section className="py-20 bg-metro-light" aria-labelledby="features-heading">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 id="features-heading" className="section-heading">
              Why Plymouth needs Metro
            </h2>
            <p className="section-sub mx-auto">
              A modern rapid transit network would transform how people live, work, and move around Plymouth.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {FEATURE_CARDS.map(card => (
              <Link
                key={card.title}
                href={card.href}
                className="card group hover:-translate-y-1 transition-transform duration-200"
              >
                <div className="w-12 h-12 rounded-xl bg-metro-light flex items-center justify-center
                                text-metro-sky group-hover:bg-metro-sky group-hover:text-white
                                transition-colors duration-200 mb-4">
                  {card.icon}
                </div>
                <h3 className="text-metro-navy font-semibold text-lg mb-2">{card.title}</h3>
                <p className="text-metro-muted text-sm leading-relaxed">{card.body}</p>
                <span className="inline-flex items-center gap-1 text-metro-sky text-sm font-medium mt-4
                                 group-hover:gap-2 transition-all duration-150">
                  Learn more
                  <svg viewBox="0 0 16 16" fill="currentColor" className="w-3.5 h-3.5" aria-hidden="true">
                    <path fillRule="evenodd" d="M2 8a.75.75 0 01.75-.75h8.69L8.22 4.03a.75.75 0 011.06-1.06l4.5 4.5a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06-1.06l3.22-3.22H2.75A.75.75 0 012 8z" clipRule="evenodd" />
                  </svg>
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Map preview CTA */}
      <section className="py-20 bg-white" aria-labelledby="map-preview-heading">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="rounded-3xl bg-hero-gradient overflow-hidden">
            <div className="px-8 sm:px-12 py-12 sm:py-16 flex flex-col lg:flex-row items-center gap-10">
              <div className="flex-1 text-white">
                <h2 id="map-preview-heading" className="text-3xl sm:text-4xl font-bold mb-4">
                  Explore the proposed route map
                </h2>
                <p className="text-white/80 text-lg leading-relaxed mb-6">
                  Three lines, 28 stations, and a vision for a fully connected Plymouth. Browse every
                  proposed station and see how Metro would serve your community.
                </p>
                <Link href="/map" className="btn-primary" style={{color:"#ffffff"}}>
                  Open Interactive Map
                </Link>
              </div>
              <div className="flex-shrink-0 flex gap-3 flex-wrap justify-center">
                {(['red', 'blue', 'green'] as const).map((line, i) => {
                  const labels = ['Red Line', 'Blue Line', 'Green Line']
                  const destinations = ['Derriford', 'Plympton', 'Ivybridge']
                  const colours = ['bg-red-500', 'bg-metro-sky', 'bg-metro-teal']
                  return (
                    <div key={line} className="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-xl">
                      <span className={`w-3 h-3 rounded-full ${colours[i]}`} />
                      <span className="text-white text-sm font-medium">{labels[i]} — {destinations[i]}</span>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Petition CTA */}
      <section className="py-20 bg-metro-light" aria-labelledby="petition-cta-heading">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 text-center">
          <h2 id="petition-cta-heading" className="section-heading mb-4">
            Add your voice today
          </h2>
          <p className="text-lg text-metro-muted mb-8">
            Every signature counts. Sign our petition to show decision-makers that Plymouth
            residents and commuters want rapid transit investment now.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
            <Link href="/support" className="btn-primary px-10 py-4 text-base" style={{color:"#ffffff"}}>
              Sign the Petition
            </Link>
            <Link href="/about" className="btn-secondary px-10 py-4 text-base">
              Learn More
            </Link>
          </div>
          <SocialShare
            title="Plymouth Metro — Sign the Petition"
            text="I've signed the Plymouth Metro petition. Join thousands calling for better public transport in Plymouth!"
            url="https://plymouthmetro.co.uk/support"
          />
        </div>
      </section>
    </>
  )
}