import "./globals.css";
import type { Metadata } from "next";
import { Inter, DM_Sans } from "next/font/google";
import Link from "next/link";
import { ReactNode } from "react";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
const dmSans = DM_Sans({
  subsets: ["latin"],
  variable: "--font-dm-sans",
  display: "swap",
  weight: ["400", "500", "700"],
});

export const metadata: Metadata = {
  title: "Pay It Forward Foundation — Build a first home, one brick at a time",
  description:
    "Pay It Forward Foundation is the 501(c)(3) public charity affiliated with HomeDividend. Donate to help fund first-time homebuyers — every brick, window, and roof tile is dedicated.",
};

const EIN = process.env.NEXT_PUBLIC_FOUNDATION_EIN || "[INSERT EIN]";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${dmSans.variable}`}>
      <body className="font-sans">
        <header className="border-b border-border bg-surface">
          <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-5">
            <Link href="/" className="block leading-tight">
              <div className="font-display text-lg font-bold tracking-wide text-text">
                PAY IT FORWARD FOUNDATION
              </div>
              <div className="text-xs text-textmuted">HomeDividend&rsquo;s 501(c)(3)</div>
            </Link>
            <nav className="flex items-center gap-6 text-sm">
              <Link href="/donate/about" className="text-text hover:text-primary">
                About
              </Link>
              <Link href="/donate/donors" className="text-text hover:text-primary">
                Donors
              </Link>
              <Link
                href="/donate"
                className="rounded-full bg-primary px-5 py-2 font-medium text-white hover:bg-primaryDark"
              >
                Donate
              </Link>
            </nav>
          </div>
        </header>

        <main>{children}</main>

        <footer className="mt-16 border-t border-border bg-surface">
          <div className="mx-auto max-w-6xl px-6 py-10 text-sm text-textmuted">
            <p className="leading-relaxed">
              <span className="font-medium text-text">
                Pay It Forward Foundation — Building one home at a time.
              </span>{" "}
              EIN: {EIN}. © 2026 PIFF. A 501(c)(3) public charity. All
              contributions tax-deductible to the extent allowed by law.
              Donations support HomeDividend&rsquo;s pre-purchase equity-share
              mortgage program via Program-Related Investment in the
              HomeDividend SPV.
            </p>
            <p className="mt-3 flex gap-4">
              <Link href="/privacy" className="hover:text-primary">
                Privacy
              </Link>
              <Link href="/donate/terms" className="hover:text-primary">
                Terms of Donation
              </Link>
            </p>
          </div>
        </footer>
      </body>
    </html>
  );
}
