import { Button } from "@/components/ui/button";
import Link from "next/link";
import type { Metadata } from "next";
import { homepage } from "@/marketing/content/homepage";
import { Footer } from "@/marketing/components";

export const metadata: Metadata = {
  title: homepage.meta.title,
  description: homepage.meta.description,
  openGraph: {
    title: homepage.meta.title,
    description: homepage.meta.description,
    url: "https://www.vibnai.com",
    siteName: "VIBN",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: homepage.meta.title,
    description: homepage.meta.description,
  },
};

export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Navigation */}
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <div className="flex gap-6 md:gap-10">
            <Link href="/" className="flex items-center space-x-2">
              <img 
                src="/vibn-black-circle-logo.png" 
                alt="Vib'n" 
                className="h-8 w-8"
              />
              <span className="text-xl font-bold">Vib&apos;n</span>
            </Link>
          </div>
          <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
            <nav className="flex items-center space-x-6">
              <Link
                href="/#features"
                className="text-sm font-medium transition-colors hover:text-primary"
              >
                Features
              </Link>
              <Link
                href="/#how-it-works"
                className="text-sm font-medium transition-colors hover:text-primary"
              >
                How It Works
              </Link>
              <Link
                href="/#pricing"
                className="text-sm font-medium transition-colors hover:text-primary"
              >
                Pricing
              </Link>
              <Link
                href="https://github.com/MawkOne/viben"
                target="_blank"
                rel="noopener noreferrer"
                className="text-sm font-medium transition-colors hover:text-primary"
              >
                GitHub
              </Link>
            </nav>
            <div className="flex items-center space-x-4">
              <Link href="/auth">
                <Button variant="ghost" size="sm">
                  Sign In
                </Button>
              </Link>
              <Link href="/auth">
                <Button size="sm">Get Started</Button>
              </Link>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 w-full">{children}</main>

      <Footer />
    </div>
  );
}