import type { Metadata } from "next";
import { CartProvider } from "@/components/CartContext";
import PromoPopupComponent from "@/components/PromoPopupComponent";
import "./globals.css";

export const metadata: Metadata = {
  title: "South Forsyth Middle School PTO",
  description: "Official Website for the South Forsyth Middle School Parent Teacher Organization. Stay connected, volunteer, and get your school swag.",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <CartProvider>
          <header className="site-header">
            <div className="container header-container">
              <a href="/" style={{ fontSize: '1.25rem', fontWeight: 800, color: 'white', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                <img src="/logo.png" alt="SFMS PTO Logo" style={{ height: '40px', width: 'auto' }} />
                <span className="sm:inline">SFMS PTO</span>
              </a>
              <nav className="nav-links">
                <a href="/about" className="nav-item">About</a>
                <a href="/shop" className="nav-item">Swag Shop</a>
                <a href="/volunteer" className="nav-item">Volunteer</a>
                <a href="/checkout" className="nav-item" style={{ fontWeight: 600, color: "white" }}>🛒 Cart</a>
                <a href="/admin" className="nav-item" style={{ borderLeft: "1px solid var(--border)", paddingLeft: "1rem" }}>Admin</a>
              </nav>
            </div>
          </header>
          <main className="main-content">
            {children}
          </main>
          <PromoPopupComponent />
          <footer style={{ padding: '2rem 0', borderTop: '1px solid var(--border)', marginTop: '4rem', textAlign: 'center', color: 'var(--text-muted)' }}>
            <div className="container">
              <p>&copy; {new Date().getFullYear()} South Forsyth Middle School PTO. All rights reserved.</p>
            </div>
          </footer>
        </CartProvider>
      </body>
    </html>
  );
}
