import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
import Image from "next/image";
import Script from "next/script";
import { Navigation } from "@/components/layout/Navigation";
import { SubnavBar } from "@/components/layout/SubnavBar";
import InfoBanner from "@/components/layout/InfoBanner";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });

export const metadata: Metadata = {
  title: "Associação Portuguesa de Powerlifting (APP)",
  description:
    "Website da APP com acessibilidade WCAG 2.1 AA e suporte bilingue",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="pt" data-theme="light">
      <head>
        <Script
          defer
          data-domain="powerlifting.pt"
          src="https://plausible.comfy.solutions/js/script.file-downloads.hash.outbound-links.js"
          strategy="afterInteractive"
        />
        <Script id="plausible-init" strategy="afterInteractive">
          {`window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }`}
        </Script>
      </head>
      <body className={`${inter.variable} font-sans antialiased`}>        
        {/* Skip to main content link */}
        <a href="#main-content" className="skip-link">Saltar para o conteúdo</a>

        {/* Header Navigation */}
        <header className="app-header" role="banner">
          <div className="top-accent" aria-hidden="true"></div>
          <div className="container flex items-center justify-between py-3">
            <Link href="/pt" className="logo" aria-label="Página inicial APP">
              <Image
                src="/logo.png"
                alt="APP — Associação Portuguesa de Powerlifting"
                width={240}
                height={48}
                priority
                sizes="(max-width: 768px) 180px, 240px"
              />
            </Link>

            <Navigation />
          </div>
          {/* Persistent sub navigation for active section */}
          {/* Rendered below via SubnavBar for full-width bar */}
          <SubnavBar />
          </header>

          <InfoBanner />

          <main id="main-content" className="container py-6" role="main">
          {children}
        </main>

        <footer className="app-footer" role="contentinfo">
          <div className="container py-4">
            <div className="footer-main">
              <div className="footer-left">
                <p>© {new Date().getFullYear()} APP — Associação Portuguesa de Powerlifting</p>
                <p className="footer-attribution">feito por <a href="https://comfy.solutions" target="_blank" rel="noopener noreferrer">comfy.solutions</a> com &lt;3&nbsp;·&nbsp;<a href="https://forms.fillout.com/t/1rA9gLigcEus" target="_blank" rel="noopener noreferrer">Erros? Informe-nos!</a></p>
              </div>
              <nav className="footer-links" aria-label="Footer links">
                <Link href="/pt/privacidade">Privacidade</Link>
                <Link href="/pt/acessibilidade">Declaração de Acessibilidade</Link>
                <Link href="/pt/avisos-legais">Avisos Legais</Link>
              </nav>
            </div>
          </div>
        </footer>
      </body>
    </html>
  );
}
