"use client";
import * as React from "react";
import { MotionConfig, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";
import { defaultHaloData, type FrameColor, type HaloData } from "./data";
import { Preorder, Specs, type PreorderSelection } from "./sections/buy";
import { Faq, Footer } from "./sections/faq-footer";
import { Hotspots, Spatial } from "./sections/features";
import { RevealSection } from "./sections/reveal";
import { Hero, Navbar } from "./sections/top";
import { scrollToId } from "./sections/ui";

export type { HaloData, FrameColor, PreorderSelection };
export { defaultHaloData };

export interface SpatialProductLaunchTemplateProps {
  /** Override any content group (hero, reveal, specs, preorder…). Missing groups use the demo content. */
  data?: Partial<HaloData>;
  /** Frame colour id selected initially (shared by hero, exploded view, hotspots and preorder). */
  initialColor?: string;
  /** Called when the visitor reserves; resolve when your backend has saved it. */
  onReserve?: (selection: PreorderSelection) => Promise<void> | void;
  className?: string;
}

export function SpatialProductLaunchTemplate({ data, initialColor, onReserve, className }: SpatialProductLaunchTemplateProps) {
  const d = React.useMemo(() => ({ ...defaultHaloData, ...data }), [data]);
  const reduce = useReducedMotion();
  const colors = d.preorder.colors;
  const [color, setColor] = React.useState<FrameColor>(() => colors.find((c) => c.id === initialColor) ?? colors[0]);
  const toPreorder = React.useCallback(() => scrollToId("preorder", reduce), [reduce]);

  return (
    <MotionConfig reducedMotion="user">
      <div className={cn("relative w-full overflow-x-clip bg-background text-foreground antialiased selection:bg-cyan-300/40", className)}>
        <Navbar brand={d.brand} links={d.nav} onPreorder={toPreorder} />
        <main>
          <Hero hero={d.hero} color={color} colors={colors} onColor={setColor} onPreorder={toPreorder} onInside={() => scrollToId("reveal", reduce)} />
          <RevealSection reveal={d.reveal} color={color} />
          <Hotspots hotspots={d.hotspots} color={color} />
          <Spatial spatial={d.spatial} />
          <Specs specs={d.specs} />
          <Preorder preorder={d.preorder} color={color} onColor={setColor} onReserve={onReserve} />
          <Faq faq={d.faq} />
        </main>
        <Footer brand={d.brand} footer={d.footer} onPreorder={toPreorder} />
      </div>
    </MotionConfig>
  );
}