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

export const metadata: Metadata = {
  title: 'About the Campaign',
  description:
    'Learn about the Plymouth Metro campaign — who we are, why we\'re calling for rapid transit, and how you can get involved.',
}

export default function AboutPage() {
  return (
    <>
      {/* Page hero */}
      <section className="bg-hero-gradient text-white py-16 sm:py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl">
            <div className="badge bg-white/15 text-white mb-4">About the Campaign</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">
              A city that moves forward
            </h1>
            <p className="text-xl text-white/80 leading-relaxed">
              Plymouth Metro is a grassroots campaign pushing for a modern rapid transit network
              that every resident — of every age, income, and ability — can rely on.
            </p>
          </div>
        </div>
      </section>

      {/* Mission */}
      <section className="py-16 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl font-bold text-metro-navy mb-4">Our mission</h2>
              <p className="text-metro-muted leading-relaxed mb-4">
                Plymouth is one of the largest cities in the UK without a rapid transit system.
                Despite having a population of over 260,000, the city still relies almost entirely
                on ageing bus routes and private car use — leading to chronic congestion, high
                transport costs, and unequal access to jobs and services.
              </p>
              <p className="text-metro-muted leading-relaxed mb-4">
                Plymouth Metro exists to change that. We campaign for a light rail and rapid transit
                network that connects key destinations — from Derriford Hospital in the north, to
                the Barbican waterfront in the south, and from Plymstock in the east to Devonport
                in the west.
              </p>
              <p className="text-metro-muted leading-relaxed">
                We believe that world-class public transport is not a luxury — it is an essential
                foundation for a prosperous, inclusive, and sustainable Plymouth.
              </p>
            </div>
            <div className="space-y-4">
              {[
                { title: 'Community-led',    body: 'Founded by Plymouth residents who use the city\'s transport every day.' },
                { title: 'Evidence-based',   body: 'Our proposals are grounded in transport economics, urban planning, and comparable UK projects.' },
                { title: 'Cross-party',      body: 'We work with councillors and representatives from all political parties.' },
                { title: 'Inclusive design', body: 'Full accessibility, affordable fares, and real-time information are core requirements, not afterthoughts.' },
              ].map(item => (
                <div key={item.title} className="flex gap-4">
                  <div className="flex-shrink-0 w-6 h-6 rounded-full bg-metro-sky flex items-center justify-center mt-0.5">
                    <svg viewBox="0 0 12 12" fill="white" className="w-3 h-3" aria-hidden="true">
                      <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                    </svg>
                  </div>
                  <div>
                    <p className="font-semibold text-metro-navy">{item.title}</p>
                    <p className="text-sm text-metro-muted">{item.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* The problem */}
      <section className="py-16 bg-metro-light">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-metro-navy mb-6">The problem Plymouth faces</h2>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-10">
            {[
              { stat: '96%', label: 'of Plymouth commuters rely on private car or bus — the most carbon-intensive modes.' },
              { stat: '£340m', label: 'estimated annual cost of congestion to Plymouth\'s economy.' },
              { stat: '1 in 4', label: 'Plymouth households has no access to a private car — heavily dependent on slow bus services.' },
            ].map(item => (
              <div key={item.stat} className="card text-center">
                <p className="text-4xl font-black text-metro-sky mb-2">{item.stat}</p>
                <p className="text-sm text-metro-muted leading-relaxed">{item.label}</p>
              </div>
            ))}
          </div>
          <p className="text-metro-muted leading-relaxed mb-4">
            Plymouth's current transport infrastructure has not kept pace with the city's growth.
            Bus routes are frequently slow, unreliable, and inaccessible. The A38 and city centre
            roads experience regular gridlock during peak hours. And with Derriford Hospital — the
            region's major trauma centre — accessible only by car or a slow bus journey for many
            residents, the human cost is real.
          </p>
          <p className="text-metro-muted leading-relaxed">
            Meanwhile, comparable cities — Edinburgh, Nottingham, Manchester, and Sheffield — have
            already invested in rapid transit and are reaping the rewards in economic growth,
            reduced congestion, and improved quality of life. Plymouth should be next.
          </p>
        </div>
      </section>

      {/* Team / who we are */}
      <section className="py-16 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-metro-navy mb-4">Who we are</h2>
          <p className="text-metro-muted leading-relaxed mb-8">
            Plymouth Metro was founded by a group of local residents, transport professionals, and
            community advocates who share a common belief: Plymouth can and should have world-class
            public transport. Our volunteer team includes urban planners, engineers, economists,
            digital campaigners, and ordinary Plymothians who are tired of sitting in traffic.
          </p>
          <div className="bg-metro-light rounded-2xl p-8 border border-metro-border">
            <h3 className="font-semibold text-metro-navy text-lg mb-3">Get involved with the campaign</h3>
            <p className="text-metro-muted mb-5">
              We're always looking for volunteers, supporters, and experts to help grow the campaign.
              Whether you can spare an hour a month or want to take a leading role, we'd love to
              hear from you.
            </p>
            <div className="flex flex-col sm:flex-row gap-3">
              <Link href="/support" className="btn-primary" style={{color:"#ffffff"}}>Sign the Petition</Link>
              <Link href="/contact" className="btn-secondary">Contact the Team</Link>
            </div>
          </div>
        </div>
      </section>

      {/* Share */}
      <section className="py-12 bg-metro-light border-t border-metro-border">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <SocialShare title="About Plymouth Metro — the campaign for rapid transit" />
        </div>
      </section>
    </>
  )
}