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

export const metadata: Metadata = {
  title: 'Downloads & Resources',
  description:
    'Download Plymouth Metro campaign briefings, route maps, economic analyses, and press materials.',
}

const DOWNLOADS = [
  {
    category: 'Campaign Documents',
    items: [
      {
        title: 'Plymouth Metro — Campaign Overview',
        desc: 'A concise summary of the campaign, proposed network, and key asks. Ideal for sharing with decision-makers.',
        size: 'PDF · 2.4 MB',
        icon: '📄',
        href: '/downloads/plymouth-metro-campaign-overview.pdf',
      },
      {
        title: 'Plymouth Metro — Full Briefing Document',
        desc: 'The complete campaign briefing including route proposals, economic analysis, and funding recommendations.',
        size: 'PDF · 8.1 MB',
        icon: '📋',
        href: '/downloads/plymouth-metro-full-briefing.pdf',
      },
      {
        title: 'Letter Template — Write to Your MP',
        desc: 'A pre-written letter template you can personalise and send to your local MP or councillor.',
        size: 'DOCX · 48 KB',
        icon: '✉️',
        href: '/downloads/letter-template-mp.docx',
      },
    ],
  },
  {
    category: 'Maps & Route Data',
    items: [
      {
        title: 'Proposed Route Map (A3 Print)',
        desc: 'High-resolution print-quality map showing all three lines, stations, and interchange points.',
        size: 'PDF · 4.8 MB',
        icon: '🗺️',
        href: '/downloads/plymouth-metro-route-map-a3.pdf',
      },
      {
        title: 'Station Data Spreadsheet',
        desc: 'Full list of all 28 proposed stations with coordinates, zones, and catchment population data.',
        size: 'XLSX · 120 KB',
        icon: '📊',
        href: '/downloads/plymouth-metro-station-data.xlsx',
      },
    ],
  },
  {
    category: 'Economic Analysis',
    items: [
      {
        title: 'Economic Impact Summary',
        desc: 'Summary of the economic case: benefit-cost ratio, job creation, property uplift, and comparable UK systems.',
        size: 'PDF · 1.9 MB',
        icon: '💹',
        href: '/downloads/economic-impact-summary.pdf',
      },
      {
        title: 'Comparable Systems Analysis',
        desc: 'Detailed analysis of outcomes from Edinburgh Trams, Nottingham NET, Manchester Metrolink, and Sheffield Supertram.',
        size: 'PDF · 3.2 MB',
        icon: '🔍',
        href: '/downloads/comparable-systems-analysis.pdf',
      },
    ],
  },
  {
    category: 'Press & Media',
    items: [
      {
        title: 'Press Release — Campaign Launch',
        desc: 'Official press release announcing the Plymouth Metro campaign and petition.',
        size: 'PDF · 340 KB',
        icon: '📰',
        href: '/downloads/press-release-campaign-launch.pdf',
      },
      {
        title: 'Campaign Logo Pack',
        desc: 'Plymouth Metro logos in SVG, PNG, and EPS formats for press and campaign use.',
        size: 'ZIP · 1.2 MB',
        icon: '🎨',
        href: '/downloads/plymouth-metro-logo-pack.zip',
      },
      {
        title: 'Social Media Assets',
        desc: 'Ready-to-share images and graphics for Twitter/X, Facebook, and Instagram.',
        size: 'ZIP · 5.6 MB',
        icon: '📱',
        href: '/downloads/social-media-assets.zip',
      },
    ],
  },
]

function DownloadCard({ title, desc, size, icon, href }: {
  title: string; desc: string; size: string; icon: string; href: string
}) {
  return (
    <div className="card flex items-start gap-4">
      <div className="text-3xl flex-shrink-0" aria-hidden="true">{icon}</div>
      <div className="flex-1 min-w-0">
        <h3 className="font-semibold text-metro-navy mb-1">{title}</h3>
        <p className="text-sm text-metro-muted leading-relaxed mb-3">{desc}</p>
        <div className="flex items-center justify-between gap-4 flex-wrap">
          <span className="text-xs text-metro-muted bg-metro-light px-2.5 py-1 rounded-lg">{size}</span>
          <a
            href={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 ${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>
  )
}

export default function DownloadsPage() {
  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">Downloads</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">
              Resources & downloads
            </h1>
            <p className="text-xl text-white/80 leading-relaxed">
              Briefings, maps, economic analyses, and press materials — everything you
              need to understand, share, and champion Plymouth Metro.
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 bg-metro-light">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
          {DOWNLOADS.map(group => (
            <div key={group.category}>
              <h2 className="text-xl font-bold text-metro-navy mb-5">{group.category}</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                {group.items.map(item => (
                  <DownloadCard key={item.title} {...item} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Note about placeholder files */}
      <section className="py-6 bg-amber-50 border-y border-amber-200">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex gap-3 items-start">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}
                 className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round"
                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
            </svg>
            <p className="text-sm text-amber-800">
              <strong>Note for site administrators:</strong> The download links above are placeholders.
              Replace each <code className="bg-amber-100 px-1 rounded">/downloads/…</code> path with your
              actual hosted files once they are ready. Files should be placed in the{' '}
              <code className="bg-amber-100 px-1 rounded">/public/downloads/</code> directory.
            </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">
            Ready to take action?
          </h2>
          <p className="text-metro-muted mb-6">
            Sign the petition, share the campaign, and help us reach every Plymouth resident.
          </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="/contact" className="btn-secondary px-10 py-4">Contact the Team</Link>
            <Link href="/media" className="btn-secondary px-10 py-4">Press & Media</Link>
          </div>
          <SocialShare title="Plymouth Metro downloads and campaign resources" />
        </div>
      </section>
    </>
  )
}