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

export const metadata: Metadata = {
  title: 'Community Impact',
  description:
    'How Plymouth Metro would transform daily life — improving health, reducing inequality, connecting communities, and supporting a greener Plymouth.',
}

const IMPACT_AREAS = [
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-8 h-8" aria-hidden="true">
        <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
      </svg>
    ),
    title: 'Health & NHS',
    body: 'Direct, reliable access to Derriford Hospital — the region\'s major trauma centre — would reduce missed appointments, ease parking pressure, and cut ambulance demand. Fewer cars on the road means cleaner air and fewer road casualties, delivering real NHS cost savings.',
    stat: '£28m',
    statLabel: 'estimated annual NHS savings from reduced car casualties and better hospital access',
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-8 h-8" aria-hidden="true">
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
      </svg>
    ),
    title: 'Education & Young People',
    body: 'Faster, affordable connections to Plymouth universities, schools, and colleges — reducing transport as a barrier to educational attainment. University of Plymouth and Plymouth Marjon University students and staff would benefit directly from Metro access.',
    stat: '30,000+',
    statLabel: 'students and academic staff directly served by the proposed network',
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-8 h-8" aria-hidden="true">
        <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
      </svg>
    ),
    title: 'Social Inclusion',
    body: 'One in four Plymouth households has no private car. For these residents — including many elderly and disabled people — Metro would deliver genuine freedom of movement. Flat fares, level-access boarding, and audio-visual information systems designed to meet the needs of all passengers.',
    stat: '65,000',
    statLabel: 'Plymouth residents in car-free households who would gain reliable rapid transit access',
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-8 h-8" aria-hidden="true">
        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
      </svg>
    ),
    title: 'Neighbourhoods & Placemaking',
    body: 'Metro stations become focal points for community investment — bringing improved public spaces, local businesses, and new homes. Station quarters in Derriford, Plympton, and the Barbican would anchor major regeneration schemes and attract private development.',
    stat: '15,000',
    statLabel: 'new homes unlocked by development around proposed Metro station catchment areas',
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-8 h-8" 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: 'Environment & Climate',
    body: 'Every journey made by Metro instead of car removes emissions from Plymouth\'s air. Modelling based on comparable UK systems suggests Plymouth Metro could prevent over 45,000 tonnes of CO₂ per year by 2040, directly supporting the council\'s net-zero ambitions.',
    stat: '45,000t',
    statLabel: 'CO₂ prevented per year by 2040 through modal shift from car to Metro',
  },
  {
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-8 h-8" aria-hidden="true">
        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
      </svg>
    ),
    title: 'Defence & Naval Community',
    body: 'Devonport Naval Base is one of Plymouth\'s largest employers. An interchange station at Devonport would dramatically improve transport for thousands of Royal Navy personnel, civil servants, and support staff — reducing the military\'s own vehicle fleet and carbon footprint.',
    stat: '12,000',
    statLabel: 'Devonport Naval Base personnel who would gain direct Metro access',
  },
]

export default function ImpactPage() {
  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">Community Impact</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">
              Better transport, better lives
            </h1>
            <p className="text-xl text-white/80 leading-relaxed">
              The impact of Plymouth Metro would go far beyond faster commutes. It would reshape
              how people access healthcare, education, and opportunity — and make Plymouth a
              greener, more inclusive city.
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {IMPACT_AREAS.map(area => (
              <div key={area.title} className="card flex flex-col">
                <div className="w-14 h-14 rounded-2xl bg-metro-light flex items-center justify-center text-metro-sky mb-5">
                  {area.icon}
                </div>
                <h2 className="text-xl font-bold text-metro-navy mb-3">{area.title}</h2>
                <p className="text-metro-muted text-sm leading-relaxed flex-1 mb-5">{area.body}</p>
                <div className="pt-4 border-t border-metro-border">
                  <p className="text-3xl font-black text-metro-sky">{area.stat}</p>
                  <p className="text-xs text-metro-muted mt-1">{area.statLabel}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 bg-metro-light">
        <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">
            Be part of this change
          </h2>
          <p className="text-metro-muted mb-8">
            Sign the petition, share the campaign, and help build the case for a better Plymouth.
          </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="The community impact of Plymouth Metro rapid transit" />
        </div>
      </section>
    </>
  )
}
