import type { Metadata } from "next";
import { headers } from "next/headers";
import "./globals.css";

export async function generateMetadata(): Promise<Metadata> {
  const request_headers = await headers();
  const host = request_headers.get("x-forwarded-host") ?? request_headers.get("host") ?? "localhost:3000";
  const protocol = request_headers.get("x-forwarded-proto") ?? (host.startsWith("localhost") ? "http" : "https");
  const origin = `${protocol}://${host}`;

  return {
    title: "Make the web move — Microkeeper Motion Playbook",
    description: "A practical guide to creating interactive motion videos with a prompt, brand files, HTML, CSS and JavaScript.",
    icons: {
      icon: "/brand/microkeeper-icon-red.svg",
      shortcut: "/brand/microkeeper-icon-red.svg",
    },
    openGraph: {
      title: "Make the web move.",
      description: "Two browser-made films. One repeatable process. No motion software required.",
      type: "website",
      images: [
        {
          url: `${origin}/og.png`,
          width: 1536,
          height: 1024,
          alt: "Make the web move — Microkeeper Motion Playbook",
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: "Make the web move.",
      description: "Two browser-made films. One repeatable process. No motion software required.",
      images: [`${origin}/og.png`],
    },
  };
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
