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

export const metadata: Metadata = {
  title: 'Press & Media',
  description:
    'Press resources for Plymouth Metro — download logos, campaign posters, social media assets, press releases, and contact the media team.',
}

const BRAND_ASSETS = [
  {
    title: 'Campaign Logo Pack',
    desc: 'Plymouth Metro logos in SVG, PNG, and EPS formats. Includes full colour, white, and dark background variants.',
    size: 'ZIP · 1.2 MB',
    emoji: '🎨',
    href: '/downloads/plymouth-metro-logo-pack.zip',
  },
  {
    title: 'Brand Guidelines',
    desc: 'Colours, typography, logo usage rules, and examples of correct and incorrect brand application.',
    size: 'PDF · 3.4 MB',
    emoji: '📐',
    href: '/downloads/plymouth-metro-brand-guidelines.pdf',
  },
  {
    title: 'Social Media Assets Pack',
    desc: 'Profile pictures, cover photos, and post templates for Facebook, Twitter/X, Instagram, and LinkedIn.',
    size: 'ZIP · 5.6 MB',
    emoji: '📱',
    href: '/downloads/social-media-assets.zip',
  },
  {
    title: 'A3 Campaign Poster',
    desc: 'High-resolution A3 print-ready poster featuring the Plymouth Metro train illustration. Portrait and landscape versions.',
    size: 'PDF · 4.8 MB',
    emoji: '🖨️',
    href: '/downloads/campaign-poster-a3.pdf',
  },
  {
    title: 'A4 Window Poster',
    desc: 'A4 portrait poster for window and noticeboard display. Print and display in your home, business, or community space.',
    size: 'PDF · 2.1 MB',
    emoji: '🪟',
    href: '/downloads/campaign-poster-a4.pdf',
  },
  {
    title: 'Train Illustration Pack',
    desc: 'The Plymouth Metro train illustration in full colour and white/transparent variants. SVG and PNG formats.',
    size: 'ZIP · 2.8 MB',
    emoji: '🚃',
    href: '/downloads/train-illustration-pack.zip',
  },
]

const PRESS_RELEASES = [
  {
    date: 'April 2025',
    title: 'Plymouth Metro Campaign Launches — Calling for Rapid Transit Investment',
    desc: 'Campaign group launches petition and calls on Plymouth City Council and national government to commit to a metro network for Plymouth.',
    href: '/downloads/press-release-campaign-launch.pdf',
  },
  {
    date: 'May 2025',
    title: 'Plymouth Metro Reaches 5,000 Petition Signatures',
    desc: 'Campaign milestone reached as residents across Plymouth, Plymstock, Plympton, and South Devon add their names.',
    href: '/downloads/press-release-5000-signatures.pdf',
  },
]

const FACTS = [
  { stat: '260,000+', label: 'Plymouth residents — one of the UK\'s largest cities without rapid transit' },
  { stat: '28',       label: 'proposed stations across three lines' },
  { stat: '£1.2bn',   label: 'estimated economic benefit over 30 years' },
  { stat: '3.1:1',    label: 'benefit-cost ratio — competitive for national funding' },
  { stat: '40,000+',  label: 'car journeys per day that could shift to Metro' },
  { stat: '45,000t',  label: 'CO₂ saved per year by 2040' },
]

export default function MediaPage() {
  return (
    <>
      {/* Hero */}
      <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">Press & Media</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">
              Press & Media Centre
            </h1>
            <p className="text-xl text-white/80 leading-relaxed">
              Resources for journalists, broadcasters, bloggers, and campaign
              partners. Download assets, read our key facts, and get in touch
              with the media team.
            </p>
          </div>
        </div>
      </section>

      {/* Press contact */}
      <section className="py-10 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-col sm:flex-row items-start sm:items-center justify-between gap-6">
            <div>
              <p className="text-sm font-semibold text-metro-muted uppercase tracking-wider mb-1">
                Press enquiries
              </p>
              <p className="text-metro-navy font-semibold text-lg">
                press@plymouthmetro.co.uk
              </p>
              <p className="text-metro-muted text-sm mt-1">
                We aim to respond to all media enquiries within 24 hours.
              </p>
            </div>
            <div className="flex gap-3">
              <a
                href="mailto:press@plymouthmetro.co.uk"
                className="btn-primary"
               style={{color:"#ffffff"}}>
                <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4" aria-hidden="true">
                  <path d="M3 4a2 2 0 00-2 2v1.161l8.441 4.221a1.25 1.25 0 001.118 0L19 7.162V6a2 2 0 00-2-2H3z" />
                  <path d="M19 8.839l-7.77 3.885a2.75 2.75 0 01-2.46 0L1 8.839V14a2 2 0 002 2h14a2 2 0 002-2V8.839z" />
                </svg>
                Email Press Team
              </a>
              <Link href="/contact" className="btn-secondary">
                Contact Form
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Key facts */}
      <section className="py-14 bg-metro-light">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-metro-navy mb-8">Key facts & figures</h2>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-5">
            {FACTS.map(f => (
              <div key={f.stat} className="card text-center">
                <p className="text-3xl font-black text-metro-sky mb-2">{f.stat}</p>
                <p className="text-xs text-metro-muted leading-snug">{f.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About the campaign — for press */}
      <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-5">About Plymouth Metro</h2>
          <div className="prose-metro">
            <p>
              Plymouth Metro is an independent campaign calling for a modern light rail and
              rapid transit network for Plymouth, Devon. The campaign was founded by Plymouth
              residents, transport professionals, and community advocates who believe Plymouth
              deserves world-class public transport.
            </p>
            <p>
              The proposed network would consist of three lines — Red (City Centre to Derriford
              Hospital), Blue (Plympton and Plymstock to Millbay), and Green (Ivybridge to City
              Centre) — served by 28 stations and operating electric, zero-emission vehicles.
            </p>
            <p>
              Plymouth is one of the largest cities in the UK without a rapid transit system.
              The campaign's petition has gathered thousands of signatures from residents across
              Plymouth and the surrounding region, demonstrating strong public demand for
              investment in sustainable transport infrastructure.
            </p>
            <p>
              Plymouth Metro is non-partisan and has no affiliation with any political party.
              The campaign works constructively with Plymouth City Council, local MPs, and
              national funding bodies to advance the case for rapid transit investment.
            </p>
          </div>
        </div>
      </section>

      {/* Press releases */}
      <section className="py-14 bg-metro-light">
        <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-7">Press releases</h2>
          <div className="space-y-4">
            {PRESS_RELEASES.map(pr => (
              <div key={pr.title} className="card flex items-start gap-5">
                <div className="flex-shrink-0 w-10 h-10 rounded-xl bg-metro-light flex items-center justify-center text-metro-sky">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-5 h-5" aria-hidden="true">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
                  </svg>
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-xs text-metro-muted mb-1">{pr.date}</p>
                  <h3 className="font-semibold text-metro-navy mb-1">{pr.title}</h3>
                  <p className="text-sm text-metro-muted leading-relaxed mb-3">{pr.desc}</p>
                  <a
                    href={pr.href}
                    className="inline-flex items-center gap-1.5 text-sm font-semibold text-metro-sky hover:text-metro-blue transition-colors"
                    aria-label={`Download press release: ${pr.title}`}
                  >
                    <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4" aria-hidden="true">
                      <path d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z" />
                      <path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" />
                    </svg>
                    Download PDF
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Brand & media downloads */}
      <section className="py-14 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-8">
            <div>
              <h2 className="text-2xl font-bold text-metro-navy">Brand & media assets</h2>
              <p className="text-metro-muted text-sm mt-1">
                All assets are free to use for editorial, press, and campaign purposes.
                Please credit Plymouth Metro Campaign when publishing.
              </p>
            </div>
            <Link href="/downloads" className="btn-secondary flex-shrink-0">
              All Downloads
            </Link>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {BRAND_ASSETS.map(asset => (
              <div key={asset.title} className="card flex items-start gap-4">
                <div className="text-3xl flex-shrink-0" aria-hidden="true">{asset.emoji}</div>
                <div className="flex-1 min-w-0">
                  <h3 className="font-semibold text-metro-navy mb-1">{asset.title}</h3>
                  <p className="text-sm text-metro-muted leading-relaxed mb-3">{asset.desc}</p>
                  <div className="flex items-center justify-between gap-3 flex-wrap">
                    <span className="text-xs text-metro-muted bg-metro-light px-2.5 py-1 rounded-lg">
                      {asset.size}
                    </span>
                    <a
                      href={asset.href}
                      className="inline-flex items-center gap-1.5 text-sm font-semibold text-metro-sky hover:text-metro-blue transition-colors"
                      aria-label={`Download ${asset.title}`}
                    >
                      <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4" aria-hidden="true">
                        <path d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z" />
                        <path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" />
                      </svg>
                      Download
                    </a>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Usage note */}
      <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 items-start">
            <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>
            <div>
              <p className="font-semibold text-metro-navy mb-1">Asset usage guidelines</p>
              <p className="text-sm text-metro-muted leading-relaxed">
                Plymouth Metro assets may be used freely for editorial, news, and campaign
                coverage. Please credit <strong className="text-metro-navy">Plymouth Metro Campaign</strong> when
                publishing. Assets must not be used for commercial purposes, altered in a
                way that misrepresents the campaign, or used to imply endorsement of any
                political party or commercial product. For licensing queries, contact{' '}
                <a href="mailto:press@plymouthmetro.co.uk" className="text-metro-sky hover:underline">
                  press@plymouthmetro.co.uk
                </a>.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Social share */}
      <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 — Press & Media Centre"
            text="Press resources for the Plymouth Metro campaign — logos, posters, press releases, and key facts."
            url="https://plymouthmetro.co.uk/media"
          />
        </div>
      </section>
    </>
  )
}