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

export const metadata: Metadata = {
  title: 'Benefits of Plymouth Metro',
  description:
    'Discover the wide-ranging benefits of a Plymouth Metro rapid transit network — for commuters, businesses, the environment, and the whole community.',
}

const BENEFITS = [
  {
    category: 'Commuters & Residents',
    colour: 'bg-metro-sky',
    items: [
      { title: 'Faster journeys',        body: 'Metro-speed services could cut journey times by up to 35% compared to current bus routes on the same corridors.' },
      { title: 'Reliable timetables',    body: 'Dedicated trackway or protected lane means services run on time regardless of road congestion.' },
      { title: 'Affordable travel',      body: 'Planned zone-based fares to keep costs low, with multi-journey and weekly passes available.' },
      { title: 'Level-access boarding',  body: 'Every station and vehicle designed to full accessibility standards — step-free for all passengers.' },
      { title: 'Real-time information',  body: 'Live departure boards at every station, plus app and web journey planning integrated with national transport data.' },
    ],
  },
  {
    category: 'Economy & Business',
    colour: 'bg-metro-teal',
    items: [
      { title: 'Workforce connectivity', body: 'Employers across Plymouth can draw from a larger talent pool as commute times fall and car dependence reduces.' },
      { title: 'Agglomeration effects',  body: 'Faster connections between business districts increase productivity through knowledge sharing and collaboration.' },
      { title: 'Property value uplift',  body: 'Studies of comparable UK systems show 10–20% property value increases within 800m of rapid transit stations.' },
      { title: 'Tourism boost',          body: 'Seamless connections to the Barbican, Royal Citadel, and waterfront areas would increase visitor spend.' },
      { title: 'Inward investment',      body: 'World-class transit infrastructure is a key factor in attracting major employers and development projects.' },
    ],
  },
  {
    category: 'Environment & Climate',
    colour: 'bg-green-500',
    items: [
      { title: 'Zero-emission traction', body: 'Electric-powered vehicles produce no direct emissions, supporting Plymouth\'s net-zero 2030 target.' },
      { title: 'Reduced car journeys',   body: 'Modelling suggests Metro could remove 40,000+ car journeys from Plymouth roads every day.' },
      { title: 'Lower CO₂ per trip',    body: 'Rail and light rail produce up to 70% less carbon per passenger kilometre than the average private car.' },
      { title: 'Active travel links',    body: 'Every station designed with secure cycle parking and walking routes, encouraging multimodal journeys.' },
      { title: 'Air quality gains',      body: 'Fewer combustion vehicles on key corridors means measurable improvements in roadside air quality.' },
    ],
  },
  {
    category: 'Health & Wellbeing',
    colour: 'bg-metro-amber',
    items: [
      { title: 'Derriford access',       body: 'Direct, frequent connections to the hospital reduce stress and delays for patients, staff, and visitors.' },
      { title: 'Reduced road danger',    body: 'Fewer cars on the road means fewer accidents, casualties, and related NHS costs.' },
      { title: 'Active travel gateway',  body: 'Walking to and from stations adds regular physical activity to daily routines without gym membership.' },
      { title: 'Social inclusion',       body: 'Better transport means better access to jobs, education, healthcare, and social activities for all residents.' },
      { title: 'Mental health',          body: 'Reliable, stress-free commutes have a well-documented positive effect on mental health and work–life balance.' },
    ],
  },
]

export default function BenefitsPage() {
  return (
    <>
      <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">Benefits</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">
              The case for Plymouth Metro
            </h1>
            <p className="text-xl text-white/80 leading-relaxed">
              From faster daily commutes to millions of tonnes of CO₂ saved, the benefits of
              Plymouth Metro reach every corner of the city and beyond.
            </p>
          </div>
        </div>
      </section>

      {/* Summary row */}
      <section className="py-12 bg-white border-b border-metro-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center">
            {[
              { val: '35%',     sub: 'faster journey times' },
              { val: '40k+',    sub: 'fewer daily car trips' },
              { val: '70%',     sub: 'less CO₂ per passenger km' },
              { val: '£1.2bn',  sub: 'economic value unlocked' },
            ].map(s => (
              <div key={s.sub}>
                <p className="text-3xl sm:text-4xl font-black text-metro-sky">{s.val}</p>
                <p className="text-sm text-metro-muted mt-1">{s.sub}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefit categories */}
      <section className="py-16 bg-metro-light">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-14">
          {BENEFITS.map(group => (
            <div key={group.category}>
              <div className="flex items-center gap-3 mb-6">
                <span className={`w-3 h-3 rounded-full ${group.colour}`} />
                <h2 className="text-2xl font-bold text-metro-navy">{group.category}</h2>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
                {group.items.map(item => (
                  <div key={item.title} className="card">
                    <h3 className="font-semibold text-metro-navy mb-2">{item.title}</h3>
                    <p className="text-sm text-metro-muted leading-relaxed">{item.body}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 bg-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 text-center">
          <h2 className="text-3xl font-bold text-metro-navy mb-4">
            Help make these benefits a reality
          </h2>
          <p className="text-metro-muted mb-8">
            Sign the petition to show Plymouth's decision-makers that residents 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" style={{color:"#ffffff"}}>Sign the Petition</Link>
            <Link href="/economy" className="btn-secondary px-10 py-4">Economic Analysis</Link>
          </div>
          <SocialShare title="Benefits of Plymouth Metro rapid transit" />
        </div>
      </section>
    </>
  )
}