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

export const metadata: Metadata = {
  title: 'In The News',
  description: 'News coverage of Plymouth Metro, the Tavistock to Plymouth railway reinstatement, and South West rail resilience including Dawlish.',
}

const NEWS_ITEMS = [
  {
    date: '2026-03-01',
    source: 'Peninsula Transport',
    title: 'Plymouth Metro System Map Published',
    excerpt: 'Peninsula Transport STB publishes formal Plymouth Metro system map and timeline, with WSP commissioned to undertake the next phase of strategic and economic development work.',
    url: 'https://www.peninsulatransport.org.uk/our-work/plymouth-metro/',
    tag: 'Plymouth Metro',
    tagColour: 'bg-blue-100 text-blue-800',
  },
  {
    date: '2025-09-15',
    source: 'Plymouth City Council',
    title: 'Council Confirms 100% Support for Plymouth Metro',
    excerpt: 'In response to a public question at Full Council, Plymouth City Council confirmed it is "100% supportive of developing a Plymouth Metro" including a new Plympton station and reopening the line to Tavistock.',
    url: 'https://democracy.plymouth.gov.uk/documents/s155751/01%20Public-Question%20Black.pdf',
    tag: 'Plymouth Metro',
    tagColour: 'bg-blue-100 text-blue-800',
  },
  {
    date: '2024-02-04',
    source: 'Network Rail',
    title: 'Ten Years Since Dawlish: £165m Investment Has Protected Iconic Coastal Railway',
    excerpt: 'Network Rail marks the tenth anniversary of the February 2014 Dawlish storm that cut off the entire South West from the national rail network for eight weeks, celebrating the completion of the new sea wall.',
    url: 'https://www.networkrail.co.uk/stories/ten-years-since-dawlishs-railway-washed-away/',
    tag: 'Dawlish',
    tagColour: 'bg-red-100 text-red-800',
  },
  {
    date: '2023-11-01',
    source: 'Network Rail',
    title: 'Dawlish Sea Wall Withstands Storm Ciarán with Five-Metre Waves',
    excerpt: 'The new Dawlish sea wall successfully deflects Storm Ciarán\'s five-metre waves and 80mph winds, with trains continuing to run throughout. The wall was designed to protect the line for at least 100 years.',
    url: 'https://www.networkrail.co.uk/stories/ten-years-since-dawlishs-railway-washed-away/',
    tag: 'Dawlish',
    tagColour: 'bg-red-100 text-red-800',
  },
  {
    date: '2022-11-14',
    source: 'Devon County Council',
    title: 'Strategic Outline Business Case Submitted for Reopening Tavistock to Plymouth Rail Line',
    excerpt: 'Devon County Council submits its Strategic Outline Business Case to the Government\'s Restoring Your Railway programme, seeking £3m to develop the case for reinstating approximately five miles of track between Bere Alston and Tavistock. Forecast 394,000 passengers per year.',
    url: 'https://www.devon.gov.uk/news/outline-business-case-submitted-for-reopening-tavistock-to-plymouth-rail-line/',
    tag: 'Tavistock Line',
    tagColour: 'bg-purple-100 text-purple-800',
  },
  {
    date: '2022-04-06',
    source: 'Tavistock Times Gazette',
    title: 'Packed Tavistock Meeting Hears Rail Plan',
    excerpt: 'A sell-out audience at the Bedford Hotel hears from GWR, Network Rail, Devon County Council and the Peninsula Rail Group about plans to restore the Tavistock to Bere Alston railway. "I\'m going away thinking this could really happen," says the town mayor.',
    url: 'https://www.tavistock-today.co.uk/news/packed-tavistock-meeting-hears-rail-plan-544246',
    tag: 'Tavistock Line',
    tagColour: 'bg-purple-100 text-purple-800',
  },
  {
    date: '2021-11-25',
    source: 'Various',
    title: 'Okehampton Railway Reopens — Passenger Demand 240% Above Forecast',
    excerpt: 'The Exeter to Okehampton line reopens after decades of closure. Passenger usage comes in at 240 per cent higher than projected, proving that Beeching cuts can be successfully reversed — and setting a precedent for Tavistock.',
    url: 'https://www.devon.gov.uk/roads-and-transport/traffic-information/transport-planning/tavistock-to-plymouth-railway/',
    tag: 'Tavistock Line',
    tagColour: 'bg-purple-100 text-purple-800',
  },
  {
    date: '2021-10-27',
    source: 'Government',
    title: 'Spending Review 2021: £50,000 Announced for Tavistock Railway Business Case',
    excerpt: 'The Autumn Budget and Spending Review 2021 announces £50,000 of Restoring Your Railway funding for Devon County Council to develop the business case for reopening the Tavistock to Plymouth railway line.',
    url: 'https://www.devon.gov.uk/roads-and-transport/traffic-information/transport-planning/tavistock-to-plymouth-railway/',
    tag: 'Tavistock Line',
    tagColour: 'bg-purple-100 text-purple-800',
  },
  {
    date: '2020-10-09',
    source: 'BBC News',
    title: 'Dawlish Railway Line Flood Wall: First Section Opened',
    excerpt: 'Rail Minister Chris Heaton-Harris officially opens the first section of the new £80m Dawlish sea wall, saying the investment will "provide a resilient railway for generations to come."',
    url: 'https://feeds.bbci.co.uk/news/uk-england-devon-54297969',
    tag: 'Dawlish',
    tagColour: 'bg-red-100 text-red-800',
  },
  {
    date: '2019-05-01',
    source: 'Peninsula Transport',
    title: 'Plymouth Metro Concept Included in Peninsula Transport Strategy',
    excerpt: 'Peninsula Transport — the sub-national transport body for the South West — formally includes Plymouth Metro in its Peninsula Transport Strategy, calling for better use of existing rail services to support Plymouth\'s sustainable growth.',
    url: 'https://www.peninsulatransport.org.uk/our-work/plymouth-metro/',
    tag: 'Plymouth Metro',
    tagColour: 'bg-blue-100 text-blue-800',
  },
  {
    date: '2018-02-01',
    source: 'Plymouth City Council',
    title: 'Plymouth Plan Includes Plymouth Metro and New Plympton Station',
    excerpt: 'The Plymouth Plan — Plymouth City Council\'s statutory planning policy — formally includes Plymouth Metro and a new Plympton station under Policy GRO4, the growth and transport investment policy.',
    url: 'https://democracy.plymouth.gov.uk/documents/s155751/01%20Public-Question%20Black.pdf',
    tag: 'Plymouth Metro',
    tagColour: 'bg-blue-100 text-blue-800',
  },
  {
    date: '2014-04-04',
    source: 'BBC News',
    title: 'Dawlish Railway Reopens After Storm — 300 Engineers, Eight Weeks, £35m',
    excerpt: 'The Dawlish railway line reopens after eight weeks of emergency repairs following the devastating February 2014 storm that swept away 80 metres of track and cut off Cornwall, Plymouth, and the South West from the national rail network.',
    url: 'https://feeds.bbci.co.uk/news/uk-england-devon-26874503',
    tag: 'Dawlish',
    tagColour: 'bg-red-100 text-red-800',
  },
  {
    date: '2014-02-05',
    source: 'Network Rail',
    title: 'Dawlish Storm Cuts Off South West from National Rail Network',
    excerpt: 'A fierce storm on 4–5 February 2014 breaches the sea wall at Dawlish, washing away 80 metres of track. Cornwall (570k), Plymouth (262k), Torbay (136k), and south-west Devon are cut off from the British railway network. The only route between the South West and the rest of the UK is severed.',
    url: 'https://www.networkrail.co.uk/running-the-railway/our-routes/western/south-west-rail-resilience-programme/dawlish-sea-wall/',
    tag: 'Dawlish',
    tagColour: 'bg-red-100 text-red-800',
  },
]

export default function NewsPage() {
  const byYear: Record<number, typeof NEWS_ITEMS> = {}
  NEWS_ITEMS.forEach(item => {
    const year = new Date(item.date).getFullYear()
    if (!byYear[year]) byYear[year] = []
    byYear[year].push(item)
  })
  const years = Object.keys(byYear).map(Number).sort((a,b) => b-a)

  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">In The News</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">In The News</h1>
            <p className="text-xl text-white/80 leading-relaxed">
              Media coverage, government announcements, and key milestones for Plymouth Metro, the Tavistock line reinstatement, and South West rail resilience.
            </p>
          </div>
        </div>
      </section>

      {/* Filter badges */}
      <section className="py-6 bg-white border-b border-metro-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-wrap gap-2">
            <span className="badge bg-blue-100 text-blue-800">Plymouth Metro</span>
            <span className="badge bg-purple-100 text-purple-800">Tavistock Line</span>
            <span className="badge bg-red-100 text-red-800">Dawlish</span>
            <span className="text-xs text-metro-muted self-center ml-2">{NEWS_ITEMS.length} articles</span>
          </div>
        </div>
      </section>

      <section className="py-14 bg-metro-light">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          {years.map(year => (
            <div key={year} className="mb-12">
              <h2 className="text-2xl font-black text-metro-navy mb-6 sticky top-0 bg-metro-light py-2 z-10">
                {year}
              </h2>
              <div className="space-y-4">
                {byYear[year].map(item => (
                  <a key={item.title} href={item.url} target="_blank" rel="noopener noreferrer"
                    className="card flex items-start gap-4 group hover:border-metro-sky transition-colors">
                    <div className="flex-shrink-0 w-2 self-stretch rounded-full mt-1" style={{
                      background: item.tag === 'Plymouth Metro' ? '#2E9CCA'
                        : item.tag === 'Tavistock Line' ? '#8B5CF6' : '#E63946'
                    }} />
                    <div className="flex-1 min-w-0">
                      <div className="flex flex-wrap items-center gap-2 mb-2">
                        <span className={`text-xs font-semibold px-2 py-0.5 rounded ${item.tagColour}`}>{item.tag}</span>
                        <span className="text-xs text-metro-muted">{item.source}</span>
                        <time className="text-xs text-metro-muted">
                          {new Date(item.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
                        </time>
                      </div>
                      <h3 className="font-semibold text-metro-navy group-hover:text-metro-sky transition-colors mb-1 leading-snug">
                        {item.title}
                      </h3>
                      <p className="text-sm text-metro-muted leading-relaxed">{item.excerpt}</p>
                    </div>
                    <div className="flex-shrink-0 text-metro-muted group-hover:text-metro-sky transition-colors text-sm">↗</div>
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="py-12 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <SocialShare
            title="Plymouth Metro — In The News"
            text="Keep up with the latest news on Plymouth Metro and the Tavistock line reinstatement."
            url="https://plymouthmetro.co.uk/news"
          />
        </div>
      </section>
    </>
  )
}