import type { Metadata, Viewport } from "next";
import { SmoothViewTransition } from "@/components/transitions/SmoothViewTransition";

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";

// Structured data for the Tuxedo Corn storefront. Combining a
// BreadcrumbList with a LocalBusiness (the farm stand) gives Google
// enough context to show rich results for the brand.
const tuxedoStructuredData = {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "BreadcrumbList",
      itemListElement: [
        { "@type": "ListItem", position: 1, name: "Home", item: BASE_URL },
        { "@type": "ListItem", position: 2, name: "Tuxedo Corn", item: `${BASE_URL}/tuxedo` },
      ],
    },
    {
      "@type": "LocalBusiness",
      "@id": `${BASE_URL}/tuxedo/#localbusiness`,
      name: "Tuxedo Corn",
      description:
        "Premium sweet corn and seasonal produce, delivered fresh from our Colorado farm to pickup stops near you.",
      url: `${BASE_URL}/tuxedo`,
      image: `${BASE_URL}/og-default.svg`,
      priceRange: "$$",
      address: {
        "@type": "PostalAddress",
        addressRegion: "CO",
        addressCountry: "US",
      },
      openingHoursSpecification: [
        {
          "@type": "OpeningHoursSpecification",
          dayOfWeek: ["Saturday", "Sunday"],
          description: "Pickup stops scheduled seasonally — see stops page",
        },
      ],
      sameAs: [
        // Social profiles can be added here
      ],
    },
  ],
};

export const metadata: Metadata = {
  title: {
    default: "Tuxedo Corn | Fresh Produce Wholesale",
    template: "%s | Tuxedo Corn",
  },
  description: "Premium sweet corn and seasonal produce delivered fresh from the farm to pickup stops near you. Shop wholesale pricing on Tuxedo Corn.",
  keywords: ["sweet corn", "Olathe Sweet", "Colorado produce", "wholesale corn", "farm fresh", "pickup stops", "wholesale produce"],
  authors: [{ name: "Tuxedo Corn" }],
  creator: "Tuxedo Corn",
  publisher: "Tuxedo Corn",
  openGraph: {
    title: "Tuxedo Corn | Olathe Sweet Sweet Corn",
    description: "Premium sweet corn and seasonal produce, delivered fresh from our Colorado farm to pickup stops near you.",
    url: `${BASE_URL}/tuxedo`,
    siteName: "Tuxedo Corn",
    locale: "en_US",
    type: "website",
    images: [
      {
        url: "/og-default.svg",
        width: 1200,
        height: 630,
        alt: "Tuxedo Corn - Olathe Sweet Sweet Corn",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Tuxedo Corn | Fresh Produce Wholesale",
    description: "Premium sweet corn and seasonal produce delivered fresh from our Colorado farm to pickup stops near you.",
    site: "@TuxedoCorn",
    creator: "@TuxedoCorn",
    images: ["/og-default.svg"],
  },
  alternates: {
    canonical: `${BASE_URL}/tuxedo`,
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
    },
  },
  other: {
    "application/ld+json": JSON.stringify(tuxedoStructuredData),
  },
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 5,
};

export default function TuxedoLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen relative">
      {/* Background gradient */}
      <div className="fixed inset-0 bg-gradient-to-br from-emerald-950/50 via-zinc-950 to-zinc-950" />
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-emerald-500/10 rounded-full blur-[120px]" />
      </div>
      {/* The storefront backdrop and ambient orbs are persistent. The
          page body itself crossfades between routes via the View
          Transitions API. */}
      <div id="page-content" className="relative outline-none">
        <SmoothViewTransition>{children}</SmoothViewTransition>
      </div>
    </div>
  );
}