// app/layout.tsx — Global metadata defaults
import type { Metadata } from "next";
 
export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  title: {
    default: "Example App — Build Better Products",
    template: "%s | Example App",
  },
  description: "The modern platform for building and shipping products faster.",
  keywords: ["product management", "SaaS", "collaboration"],
  authors: [{ name: "Example Team", url: "https://example.com" }],
  creator: "Example Team",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://example.com",
    siteName: "Example App",
    title: "Example App — Build Better Products",
    description: "The modern platform for building and shipping products faster.",
    images: [
      {
        url: "/og-image.png",
        width: 1200,
        height: 630,
        alt: "Example App",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Example App — Build Better Products",
    description: "The modern platform for building and shipping products faster.",
    creator: "@exampleapp",
    images: ["/og-image.png"],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  alternates: {
    canonical: "https://example.com",
  },
};

// app/blog/[slug]/page.tsx — Dynamic metadata for blog posts
import type { Metadata } from "next";
import { getPost } from "@/lib/posts";
import { notFound } from "next/navigation";
 
interface BlogPostPageProps {
  params: Promise<{ slug: string }>;
}
 
export async function generateMetadata({
  params,
}: BlogPostPageProps): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
 
  if (!post) return {};
 
  return {
    title: post.title,
    description: post.excerpt,
    authors: [{ name: post.author.name }],
    openGraph: {
      type: "article",
      title: post.title,
      description: post.excerpt,
      url: `https://example.com/blog/${slug}`,
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
      authors: [post.author.name],
      images: [
        {
          url: post.coverImage,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },
    alternates: {
      canonical: `https://example.com/blog/${slug}`,
    },
  };
}

// lib/seo/structured-data.ts — Type-safe JSON-LD builders
import type { Article, Organization, BreadcrumbList, FAQPage } from "schema-dts";
 
export function buildArticleSchema(post: BlogPost): Article {
  return {
    "@type": "Article",
    headline: post.title,
    description: post.excerpt,
    image: post.coverImage,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: {
      "@type": "Person",
      name: post.author.name,
      url: post.author.url,
    },
    publisher: {
      "@type": "Organization",
      name: "Example App",
      logo: {
        "@type": "ImageObject",
        url: "https://example.com/logo.png",
      },
    },
    mainEntityOfPage: {
      "@type": "WebPage",
      "@id": `https://example.com/blog/${post.slug}`,
    },
  };
}
 
export function buildFAQSchema(
  faqs: Array<{ question: string; answer: string }>
): FAQPage {
  return {
    "@type": "FAQPage",
    mainEntity: faqs.map((faq) => ({
      "@type": "Question",
      name: faq.question,
      acceptedAnswer: {
        "@type": "Answer",
        text: faq.answer,
      },
    })),
  };
}
 
export function buildBreadcrumbSchema(
  items: Array<{ name: string; url: string }>
): BreadcrumbList {
  return {
    "@type": "BreadcrumbList",
    itemListElement: items.map((item, index) => ({
      "@type": "ListItem",
      position: index + 1,
      name: item.name,
      item: item.url,
    })),
  };
}
 
// Component to inject JSON-LD into page
export function JsonLd({ data }: { data: Record<string, unknown> }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          "@context": "https://schema.org",
          ...data,
        }),
      }}
    />
  );
}

// app/sitemap.ts — Dynamic sitemap from database content
import type { MetadataRoute } from "next";
import { getAllPosts } from "@/lib/posts";
import { getAllProducts } from "@/lib/products";
 
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = "https://example.com";
 
  // Static pages
  const staticPages: MetadataRoute.Sitemap = [
    { url: baseUrl, lastModified: new Date(), changeFrequency: "daily", priority: 1.0 },
    { url: `${baseUrl}/about`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.8 },
    { url: `${baseUrl}/pricing`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.9 },
    { url: `${baseUrl}/blog`, lastModified: new Date(), changeFrequency: "daily", priority: 0.9 },
  ];
 
  // Dynamic blog posts
  const posts = await getAllPosts();
  const blogPages: MetadataRoute.Sitemap = posts.map((post) => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: "weekly" as const,
    priority: 0.7,
  }));
 
  // Dynamic product pages
  const products = await getAllProducts();
  const productPages: MetadataRoute.Sitemap = products.map((product) => ({
    url: `${baseUrl}/products/${product.id}`,
    lastModified: new Date(product.updatedAt),
    changeFrequency: "daily" as const,
    priority: 0.8,
  }));
 
  return [...staticPages, ...blogPages, ...productPages];
}

// app/robots.ts — Robots.txt with sitemap reference
import type { MetadataRoute } from "next";
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: "*",
        allow: "/",
        disallow: ["/api/", "/admin/", "/dashboard/", "/_next/"],
      },
      {
        userAgent: "GPTBot",
        allow: ["/blog/", "/docs/", "/pricing"],
        disallow: ["/api/", "/admin/", "/dashboard/"],
      },
    ],
    sitemap: "https://example.com/sitemap.xml",
  };
}

// lib/seo/web-vitals.ts — Production CWV tracking
import { onCLS, onINP, onLCP, onFCP, onTTFB } from "web-vitals";
 
type MetricName = "CLS" | "INP" | "LCP" | "FCP" | "TTFB";
 
interface WebVitalMetric {
  name: MetricName;
  value: number;
  rating: "good" | "needs-improvement" | "poor";
  navigationType: string;
}
 
function sendToAnalytics(metric: WebVitalMetric) {
  // Send to your analytics endpoint
  fetch("/api/analytics/web-vitals", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(metric),
    keepalive: true, // Ensure beacon sent on page unload
  });
}
 
export function reportWebVitals() {
  onCLS((metric) => sendToAnalytics(metric as WebVitalMetric));
  onINP((metric) => sendToAnalytics(metric as WebVitalMetric));
  onLCP((metric) => sendToAnalytics(metric as WebVitalMetric));
  onFCP((metric) => sendToAnalytics(metric as WebVitalMetric));
  onTTFB((metric) => sendToAnalytics(metric as WebVitalMetric));
}
 
// CWV Thresholds for reference:
// LCP: Good < 2.5s, Poor > 4.0s
// CLS: Good < 0.1,  Poor > 0.25
// INP: Good < 200ms, Poor > 500ms