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

export const metadata: Metadata = {
  title: 'Economic Impact',
  description:
    'The economic case for Plymouth Metro — analysing the £1.2 billion benefit-cost ratio, job creation, property value uplift, and regional productivity gains.',
}

const COMPARABLES = [
  { city: 'Edinburgh',    system: 'Edinburgh Trams',         opened: 2014, benefit: '£1.3bn', ridersPerYear: '8m+' },
  { city: 'Nottingham',  system: 'Nottingham Express Transit', opened: 2004, benefit: '£1.7bn', ridersPerYear: '18m+' },
  { city: 'Manchester',  system: 'Metrolink',                opened: 1992, benefit: '£4.2bn', ridersPerYear: '45m+' },
  { city: 'Sheffield',   system: 'Sheffield Supertram',      opened: 1994, benefit: '£1.1bn', ridersPerYear: '11m+' },
]

export default function EconomyPage() {
  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">Economic Impact</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">
              The economic case for Metro
            </h1>
            <p className="text-xl text-white/80 leading-relaxed">
              Plymouth Metro is not just a transport project — it is an economic catalyst.
              Independent analysis suggests a benefit-cost ratio of over 3:1 and a total
              economic uplift exceeding £1.2 billion over 30 years.
            </p>
          </div>
        </div>
      </section>

      {/* Headline figures */}
      <section className="py-14 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 lg:grid-cols-4 gap-6 text-center">
            {[
              { val: '£1.2bn',  sub: 'total economic value unlocked over 30 years' },
              { val: '3.1:1',   sub: 'benefit-cost ratio (BCR)' },
              { val: '4,500+',  sub: 'direct and indirect jobs created' },
              { val: '£340m',   sub: 'annual congestion cost currently lost' },
            ].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>

      {/* Analysis sections */}
      <section className="py-16 bg-metro-light">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">

          <div className="card">
            <h2 className="text-2xl font-bold text-metro-navy mb-4">Benefit-cost ratio</h2>
            <p className="text-metro-muted leading-relaxed mb-4">
              Using the Department for Transport's standard WebTAG appraisal framework, Plymouth
              Metro is estimated to deliver a benefit-cost ratio of 3.1:1. This means every £1 of
              public investment returns over £3 in economic, social, and environmental benefits —
              making it a highly competitive case for national transport funding.
            </p>
            <p className="text-metro-muted leading-relaxed">
              This BCR compares favourably with approved major transport schemes in the UK and
              would position Plymouth Metro well for City Region Sustainable Transport Settlements
              (CRSTS) and major DfT capital funding programmes.
            </p>
          </div>

          <div className="card">
            <h2 className="text-2xl font-bold text-metro-navy mb-4">Agglomeration and productivity</h2>
            <p className="text-metro-muted leading-relaxed mb-4">
              Transport economists estimate that rapid transit systems increase productivity by
              bringing more workers within viable commuting distance of job centres. Plymouth's
              disconnected geography — with Derriford, the city centre, Plymstock, and Plympton
              all poorly connected — means many workers accept long, slow journeys or simply
              don't apply for jobs they could do.
            </p>
            <p className="text-metro-muted leading-relaxed">
              Modelling based on Nottingham and Edinburgh data suggests Plymouth Metro would add
              approximately £180 million per year to the city's GVA (gross value added) through
              agglomeration effects alone by 2040.
            </p>
          </div>

          <div className="card">
            <h2 className="text-2xl font-bold text-metro-navy mb-4">Property value uplift</h2>
            <p className="text-metro-muted leading-relaxed mb-4">
              Academic studies consistently show that residential and commercial property values
              rise within 800 metres of rapid transit stations. Evidence from Edinburgh Trams,
              Nottingham Express Transit, and the Docklands Light Railway shows uplifts of
              between 10% and 25%.
            </p>
            <p className="text-metro-muted leading-relaxed">
              Applied to Plymouth's housing market, conservative modelling suggests a cumulative
              property value uplift of £400–600 million over the first decade of operation — a
              substantial return for landowners, council tax revenues, and local regeneration.
            </p>
          </div>

          <div className="card">
            <h2 className="text-2xl font-bold text-metro-navy mb-4">Job creation</h2>
            <p className="text-metro-muted leading-relaxed mb-4">
              Construction of Plymouth Metro would create approximately 1,200 direct construction
              jobs over the three-year build phase, with a further 600 permanent operational
              jobs once the network opens.
            </p>
            <p className="text-metro-muted leading-relaxed">
              Indirect and induced employment — in supply chains, station-adjacent businesses,
              and the broader economic activity stimulated by the network — would add a further
              estimated 2,700 jobs, bringing total employment impact to over 4,500.
            </p>
          </div>

          <div className="card">
            <h2 className="text-2xl font-bold text-metro-navy mb-4">Funding routes</h2>
            <p className="text-metro-muted leading-relaxed mb-4">
              Plymouth Metro would be eligible for a range of national and regional funding
              mechanisms, including City Region Sustainable Transport Settlements (CRSTS),
              Levelling Up Fund capital grants, Active Travel England investment, and potential
              UK Shared Prosperity Fund allocations.
            </p>
            <p className="text-metro-muted leading-relaxed">
              A hybrid public–private funding model — drawing on developer contributions, land
              value capture, and ticket revenue — would reduce the net public cost significantly
              compared to the gross capital figure.
            </p>
          </div>
        </div>
      </section>

      {/* Comparable systems — responsive table */}
      <section className="py-14 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-metro-navy mb-6">Comparable UK systems</h2>
          <div className="w-full overflow-x-auto rounded-2xl border border-metro-border">
            <table className="w-full min-w-[500px] text-sm">
              <thead>
                <tr className="bg-metro-light text-metro-navy">
                  <th className="text-left px-5 py-3 font-semibold">City</th>
                  <th className="text-left px-5 py-3 font-semibold">System</th>
                  <th className="text-left px-5 py-3 font-semibold">Opened</th>
                  <th className="text-left px-5 py-3 font-semibold">Economic benefit</th>
                  <th className="text-left px-5 py-3 font-semibold">Riders/year</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-metro-border">
                {COMPARABLES.map(row => (
                  <tr key={row.city} className="hover:bg-metro-light/50 transition-colors">
                    <td className="px-5 py-3 font-medium text-metro-navy">{row.city}</td>
                    <td className="px-5 py-3 text-metro-muted">{row.system}</td>
                    <td className="px-5 py-3 text-metro-muted">{row.opened}</td>
                    <td className="px-5 py-3 font-semibold text-metro-sky">{row.benefit}</td>
                    <td className="px-5 py-3 text-metro-muted">{row.ridersPerYear}</td>
                  </tr>
                ))}
                <tr className="bg-metro-navy/5 font-semibold">
                  <td className="px-5 py-3 text-metro-navy">Plymouth <span className="text-metro-sky">(projected)</span></td>
                  <td className="px-5 py-3 text-metro-muted">Plymouth Metro</td>
                  <td className="px-5 py-3 text-metro-muted">2032</td>
                  <td className="px-5 py-3 text-metro-sky">£1.2bn</td>
                  <td className="px-5 py-3 text-metro-muted">12m+</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p className="text-xs text-metro-muted mt-3">
            Economic benefit figures are indicative and based on published reports and DfT appraisals.
            Plymouth projections are modelled estimates subject to detailed feasibility study.
          </p>
        </div>
      </section>

      <section className="py-14 bg-metro-light">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 text-center">
          <h2 className="text-2xl font-bold text-metro-navy mb-3">
            Support the economic case
          </h2>
          <p className="text-metro-muted mb-6">
            Sign the petition to demonstrate public demand — a critical input to any funding
            application and political decision-making process.
          </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="/downloads" className="btn-secondary px-10 py-4">Download Briefing</Link>
          </div>
          <SocialShare title="The economic case for Plymouth Metro rapid transit" />
        </div>
      </section>
    </>
  )
}