import type { Metadata } from 'next'
import './globals.css'
import TopNav from '@/components/TopNav'
import Footer from '@/components/Footer'

export const metadata: Metadata = {
  title: {
    template: '%s | Plymouth Metro',
    default: 'Plymouth Metro — Connecting Plymouth',
  },
  description:
    "Plymouth Metro is the campaign for a modern light rail and rapid transit network for Plymouth, Devon. Sign our petition, explore the route map, and help shape the city's transport future.",
  metadataBase: new URL('https://plymouthmetro.co.uk'),
  openGraph: {
    siteName: 'Plymouth Metro',
    locale: 'en_GB',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    site: '@PlymouthMetro',
  },
  robots: { index: true, follow: true },
}

const schemaOrg = {
  '@context': 'https://schema.org',
  '@graph': [
    {
      '@type': 'WebSite',
      '@id': 'https://plymouthmetro.co.uk/#website',
      url: 'https://plymouthmetro.co.uk/',
      name: 'Plymouth Metro',
      description: 'Campaign for a light rail and rapid transit network for Plymouth, Devon.',
    },
    {
      '@type': 'Organization',
      '@id': 'https://plymouthmetro.co.uk/#organization',
      name: 'Plymouth Metro Campaign',
      url: 'https://plymouthmetro.co.uk/',
      sameAs: [
        'https://twitter.com/PlymouthMetro',
        'https://www.facebook.com/PlymouthMetro',
        'https://www.instagram.com/plymouthmetro',
      ],
    },
  ],
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-GB" className="scroll-smooth">
      <head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <link rel="icon" href="/icon.svg" type="image/svg+xml" />
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#0B2545" />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaOrg) }}
        />
      </head>
      <body className="min-h-screen flex flex-col bg-white antialiased">
        <a href="#main-content" className="skip-link">
          Skip to main content
        </a>
        <TopNav />
        <main id="main-content" className="flex-1">
          {children}
        </main>
        <Footer />
      </body>
    </html>
  )
}
