import type { Metadata } from 'next'
import Link from 'next/link'

export const metadata: Metadata = {
  title: 'Sitemap',
  description: 'A full index of every page on the Plymouth Metro website — find exactly what you are looking for.',
}

const SITEMAP = [
  {
    heading: 'Campaign',
    colour: 'bg-metro-sky',
    icon: (
      <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="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5" />
      </svg>
    ),
    pages: [
      { label: 'Homepage',         href: '/',         desc: 'Campaign overview, key statistics, and calls to action.' },
      { label: 'About the Campaign', href: '/about',  desc: 'Who we are, our mission, and why Plymouth needs Metro.' },
      { label: 'Benefits',         href: '/benefits', desc: 'The wide-ranging benefits of a Plymouth Metro network.' },
      { label: 'Timeline',         href: '/timeline', desc: 'The proposed project phases from campaign to opening.' },
    ],
  },
  {
    heading: 'The Network',
    colour: 'bg-metro-teal',
    icon: (
      <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="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
      </svg>
    ),
    pages: [
      { label: 'Route Map',        href: '/map',      desc: 'Interactive map showing all 28 proposed stations across three lines.' },
      { label: 'Community Impact', href: '/impact',   desc: 'How Metro would transform health, education, and daily life.' },
      { label: 'Economic Impact',  href: '/economy',  desc: 'The £1.2bn economic case for Plymouth Metro.' },
    ],
  },
  {
    heading: 'Get Involved',
    colour: 'bg-amber-500',
    icon: (
      <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="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
      </svg>
    ),
    pages: [
      { label: 'Sign the Petition', href: '/support', desc: 'Add your name to the Plymouth Metro petition.' },
      { label: 'Contact Us',        href: '/contact', desc: 'Get in touch with the campaign team.' },
    ],
  },
  {
    heading: 'Resources',
    colour: 'bg-indigo-500',
    icon: (
      <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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
      </svg>
    ),
    pages: [
      { label: 'FAQ',              href: '/faq',       desc: 'Answers to frequently asked questions about the campaign and network.' },
      { label: 'Downloads',        href: '/downloads', desc: 'Briefings, route maps, economic analyses, and campaign documents.' },
      { label: 'Press & Media',    href: '/media',     desc: 'Press releases, brand assets, and media contact details.' },
    ],
  },
  {
    heading: 'Legal',
    colour: 'bg-metro-muted',
    icon: (
      <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="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
      </svg>
    ),
    pages: [
      { label: 'Privacy Policy',   href: '/privacy',   desc: 'How we collect, use, and protect your personal data under UK GDPR.' },
    ],
  },
]

export default function SitemapPage() {
  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">Sitemap</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">
              Sitemap
            </h1>
            <p className="text-xl text-white/80 leading-relaxed">
              Every page on the Plymouth Metro website, organised by section.
            </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">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {SITEMAP.map(section => (
              <div key={section.heading} className="card">
                {/* Section heading */}
                <div className="flex items-center gap-3 mb-5">
                  <div className={`w-9 h-9 rounded-xl ${section.colour} flex items-center justify-center text-white flex-shrink-0`}>
                    {section.icon}
                  </div>
                  <h2 className="text-lg font-bold text-metro-navy">{section.heading}</h2>
                </div>

                {/* Page links */}
                <ul className="space-y-3">
                  {section.pages.map(page => (
                    <li key={page.href}>
                      <Link
                        href={page.href}
                        className="group flex items-start gap-3 p-3 rounded-xl hover:bg-metro-light transition-colors duration-150"
                      >
                        <svg
                          viewBox="0 0 16 16"
                          fill="currentColor"
                          className="w-3.5 h-3.5 text-metro-sky flex-shrink-0 mt-1 group-hover:translate-x-0.5 transition-transform duration-150"
                          aria-hidden="true"
                        >
                          <path fillRule="evenodd" d="M2 8a.75.75 0 01.75-.75h8.69L8.22 4.03a.75.75 0 011.06-1.06l4.5 4.5a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06-1.06l3.22-3.22H2.75A.75.75 0 012 8z" clipRule="evenodd" />
                        </svg>
                        <div>
                          <p className="font-semibold text-metro-navy text-sm group-hover:text-metro-sky transition-colors duration-150">
                            {page.label}
                          </p>
                          <p className="text-xs text-metro-muted mt-0.5 leading-relaxed">
                            {page.desc}
                          </p>
                        </div>
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          {/* XML sitemap note -->*/}
          <div className="mt-10 bg-white rounded-2xl border border-metro-border p-6 flex gap-4 items-start">
            <div className="flex-shrink-0 w-9 h-9 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="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
              </svg>
            </div>
            <div>
              <p className="font-semibold text-metro-navy text-sm mb-1">Looking for the XML sitemap?</p>
              <p className="text-sm text-metro-muted leading-relaxed">
                The machine-readable XML sitemap for search engines is available at{' '}
                <a
                  href="/sitemap.xml"
                  className="text-metro-sky hover:underline font-medium"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  plymouthmetro.co.uk/sitemap.xml
                </a>
                .
              </p>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}