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

export const metadata: Metadata = {
  title: 'Project Timeline',
  description:
    'The proposed Plymouth Metro delivery timeline — from campaign launch and feasibility study through to construction and opening.',
}

const PHASES = [
  {
    phase: 'Phase 1',
    period: '2024–2025',
    status: 'current',
    title: 'Campaign & Feasibility',
    colour: 'bg-metro-sky',
    milestones: [
      { done: true,  text: 'Campaign launched and petition open to public signatures' },
      { done: true,  text: 'Stakeholder engagement with Plymouth City Council' },
      { done: false, text: 'Independent transport feasibility study commissioned' },
      { done: false, text: 'Engagement with West of England Mayoral Combined Authority' },
      { done: false, text: 'Economic impact assessment published' },
    ],
  },
  {
    phase: 'Phase 2',
    period: '2025–2027',
    status: 'upcoming',
    title: 'Outline Design & Business Case',
    colour: 'bg-metro-blue',
    milestones: [
      { done: false, text: 'Preferred route corridor identified and consulted upon' },
      { done: false, text: 'Outline design and engineering surveys completed' },
      { done: false, text: 'Full business case submitted to Department for Transport' },
      { done: false, text: 'Strategic outline case approved and funding secured' },
      { done: false, text: 'Statutory public consultation on preferred route' },
    ],
  },
  {
    phase: 'Phase 3',
    period: '2027–2029',
    status: 'upcoming',
    title: 'Detailed Design & Consenting',
    colour: 'bg-indigo-500',
    milestones: [
      { done: false, text: 'Detailed engineering design and specification' },
      { done: false, text: 'Transport and Works Act Order (TWAO) submission' },
      { done: false, text: 'Planning approval and statutory consents granted' },
      { done: false, text: 'Procurement of rolling stock and infrastructure contractors' },
      { done: false, text: 'Construction phase mobilisation and advance works' },
    ],
  },
  {
    phase: 'Phase 4',
    period: '2029–2032',
    status: 'upcoming',
    title: 'Construction',
    colour: 'bg-metro-amber',
    milestones: [
      { done: false, text: 'Main infrastructure construction — trackway, stations, utilities' },
      { done: false, text: 'Systems installation — electrification, signalling, communications' },
      { done: false, text: 'Rolling stock delivery and depot construction' },
      { done: false, text: 'Testing and commissioning of full system' },
      { done: false, text: 'Staff recruitment, training, and operational readiness' },
    ],
  },
  {
    phase: 'Phase 5',
    period: '2032',
    status: 'upcoming',
    title: 'Opening & Operations',
    colour: 'bg-metro-teal',
    milestones: [
      { done: false, text: 'Red Line — Plymouth City Centre to Derriford opens' },
      { done: false, text: 'Blue Line — Plympton to Millbay opens' },
      { done: false, text: 'Green Line — Ivybridge to City Centre opens' },
      { done: false, text: 'Full through-running and interchange services operational' },
      { done: false, text: 'Ongoing network extension planning begins' },
    ],
  },
]

export default function TimelinePage() {
  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">Timeline</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">
              From campaign to reality
            </h1>
            <p className="text-xl text-white/80 leading-relaxed">
              Building a metro network takes time, but with strong public support and political
              will, Plymouth Metro can open by 2032. Here's the road ahead.
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="relative">
            {/* Vertical line */}
            <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-metro-border hidden sm:block" aria-hidden="true" />

            <div className="space-y-10">
              {PHASES.map((phase, idx) => (
                <div key={phase.phase} className="relative sm:pl-16">
                  {/* Circle on timeline */}
                  <div
                    className={`hidden sm:flex absolute left-0 w-12 h-12 rounded-full items-center justify-center
                                text-white font-bold text-sm flex-shrink-0 shadow-md ${phase.colour}`}
                    aria-hidden="true"
                  >
                    {idx + 1}
                  </div>

                  <div className={`card ${phase.status === 'current' ? 'border-metro-sky ring-2 ring-metro-sky/20' : ''}`}>
                    <div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-4">
                      <span className={`badge ${phase.colour} text-white`}>{phase.phase}</span>
                      <span className="text-metro-muted text-sm">{phase.period}</span>
                      {phase.status === 'current' && (
                        <span className="badge bg-green-100 text-green-700 ml-0 sm:ml-auto">
                          <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
                          In progress
                        </span>
                      )}
                    </div>
                    <h2 className="text-xl font-bold text-metro-navy mb-4">{phase.title}</h2>
                    <ul className="space-y-2.5">
                      {phase.milestones.map(m => (
                        <li key={m.text} className="flex items-start gap-3">
                          <div className={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5
                                          ${m.done ? 'bg-green-500' : 'bg-metro-border'}`}>
                            {m.done ? (
                              <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>
                            ) : (
                              <span className="w-2 h-2 rounded-full bg-metro-muted/40" />
                            )}
                          </div>
                          <span className={`text-sm leading-relaxed ${m.done ? 'text-metro-navy' : 'text-metro-muted'}`}>
                            {m.text}
                          </span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Note on timings */}
      <section className="py-10 bg-metro-light border-y border-metro-border">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex gap-4">
            <div className="flex-shrink-0">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}
                   className="w-6 h-6 text-metro-sky mt-0.5" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round"
                  d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
              </svg>
            </div>
            <p className="text-sm text-metro-muted leading-relaxed">
              <strong className="text-metro-navy">Please note:</strong> These timelines are indicative and based on
              comparable UK rapid transit projects. Actual delivery depends on securing funding,
              planning consents, and political commitment. The strongest factor within public
              control is demonstrating demand — which is why signing the petition matters.
            </p>
          </div>
        </div>
      </section>

      <section className="py-14 bg-white">
        <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">
            Help accelerate the timeline
          </h2>
          <p className="text-metro-muted mb-6">
            A strong petition is the first step. The more signatures we collect, the stronger
            the case for fast-tracking Plymouth Metro to the front of the funding queue.
          </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="Plymouth Metro project timeline" />
        </div>
      </section>
    </>
  )
}