import type { Metadata } from "next";
import Link from "next/link";
import { Fraunces, Newsreader, JetBrains_Mono } from "next/font/google";
import { MarketingNav } from "@/components/marketing/MarketingNav";

// ── Editorial fonts — loaded once for all marketing pages ─────────
const fraunces = Fraunces({
  subsets: ["latin"],
  variable: "--font-fraunces",
  weight: ["300", "400", "500", "600"],
  style: ["normal", "italic"],
  display: "swap",
});
const newsreader = Newsreader({
  subsets: ["latin"],
  variable: "--font-newsreader",
  weight: ["300", "400", "500", "600"],
  style: ["normal", "italic"],
  display: "swap",
});
const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-jetbrains",
  weight: ["400", "500"],
  display: "swap",
});

export const metadata: Metadata = {
  title: {
    default: "Tia — Your baby's digital heirloom",
    template: "%s | Tia",
  },
  description:
    "Tia is a digital heirloom for your baby — not just a tracker. Log daily moments, track the IAP vaccination schedule, and build a living archive your child will one day inherit.",
  openGraph: {
    type: "website",
    siteName: "Tia",
    title: "Tia — Your baby's digital heirloom",
    description:
      "Log every feed, milestone, and memory. Built for Indian families. Privacy-first. Free during early access.",
  },
  twitter: {
    card: "summary_large_image",
    title: "Tia — Your baby's digital heirloom",
    description:
      "Log every feed, milestone, and memory. Built for Indian families. Privacy-first. Free during early access.",
  },
};

export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className={`${fraunces.variable} ${newsreader.variable} ${jetbrainsMono.variable}`}>
      <MarketingNav />

      <main>{children}</main>

      {/* Footer */}
      <footer className="bg-gray-50 border-t border-gray-100 mt-20">
        <div className="max-w-5xl mx-auto px-5 py-12">
          <div className="flex flex-col lg:flex-row lg:justify-between gap-10 mb-8">

            {/* Brand block */}
            <div className="lg:max-w-xs">
              <div className="flex items-center gap-2 mb-3">
                <span className="text-2xl">🌸</span>
                <span className="text-xl font-bold text-gray-900" style={{ fontFamily: "var(--font-caveat)" }}>
                  Tia
                </span>
              </div>
              <p className="font-newsreader text-sm text-gray-500 leading-relaxed">
                A digital heirloom for your baby.<br />Every moment, preserved — privately.
              </p>
            </div>

            {/* Three-column link group */}
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-8 lg:gap-14 text-sm">

              {/* Company */}
              <div className="flex flex-col gap-2">
                <p className="font-fraunces font-semibold text-gray-700 mb-1">Company</p>
                <Link href="/about" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">About</Link>
                <Link href="/blog" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Blog</Link>
                <Link href="/partners" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Partners</Link>
              </div>

              {/* Legal */}
              <div className="flex flex-col gap-2">
                <p className="font-fraunces font-semibold text-gray-700 mb-1">Legal</p>
                <Link href="/pricing" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Pricing</Link>
                <Link href="/privacy" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Privacy Policy</Link>
                <Link href="/terms" className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150">Terms of Service</Link>
              </div>

              {/* Contact */}
              <div className="flex flex-col gap-2">
                <p className="font-fraunces font-semibold text-gray-700 mb-1">Contact</p>
                <a
                  href="tel:+919554881799"
                  className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150"
                >
                  +91 95548 81799
                </a>
                <a
                  href="mailto:hello@tia.baby"
                  className="font-fraunces font-normal text-gray-500 hover:text-rose-600 transition-colors duration-150"
                >
                  hello@tia.baby
                </a>
              </div>

            </div>
          </div>
        </div>

        {/* Bottom bar — different shade */}
        <div className="bg-gray-100 border-t border-gray-200">
          <div className="max-w-5xl mx-auto px-5 py-4 grid grid-cols-1 sm:grid-cols-3 items-center gap-1 text-xs text-gray-500 text-center sm:text-left">
            <p>© {new Date().getFullYear()} Tia.</p>
            <p className="sm:text-center">We don&apos;t sell your data — we preserve it.</p>
            <p className="sm:text-right">Built with <span className="inline-block transition-transform duration-300 hover:scale-150 cursor-default select-none">❤️</span> in India.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}