import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { isLocale, type Locale } from "@/i18n/config";
import { localizedHref } from "@/lib/utils";
import { media } from "@/lib/assets";
import {
  Hero,
  IntroStatement,
  Pillars,
  FormFactor,
  DisplayOptics,
  OpticsFeatures,
  Displays,
  Experiences,
  Adjustment,
  Eyetracking,
  Press,
  CtaBand,
} from "@/components/blocks";

export const metadata: Metadata = {
  title: "Beyond 2 — The world's smallest VR headset",
  description:
    "Bigscreen Beyond 2: next-gen pancake optics, adjustable IPD, advanced eyetracking, at just 107 grams.",
};

/**
 * Redesign homepage — the original's build-up, rebuilt on the real product media
 * with the Scandinavian-precision language: black cinematic stages alternating
 * with light spec plates, one violet signal, footage and product shots carrying
 * each fold. Composed entirely from blocks.
 */
export default async function V2HomePage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  if (!isLocale(locale)) notFound();
  const l: Locale = locale;
  const shop = localizedHref(l, "/shop");

  return (
    <>
      <Hero
        lead="This is Beyond"
        numeral="2"
        subhead="The world's smallest VR headset."
        actions={[
          { label: "Order now", href: shop, variant: "brand" },
          { label: "Watch the trailer", href: "#film", variant: "outline" },
        ]}
        image={{ src: media.hero, alt: "A person wearing the Bigscreen Beyond 2 headset" }}
        chromeRight="↳ BEYOND 2"
      />

      <IntroStatement />
      <Pillars />

      <FormFactor />

      <DisplayOptics />
      <OpticsFeatures />
      <Displays />

      <Experiences href={localizedHref(l, "/experiences")} />

      <Adjustment />
      <Eyetracking />

      <Press />
      <CtaBand orderHref={shop} />
    </>
  );
}