"use client";

import { useRef } from "react";
import { ClientOnly } from "@/components/ClientOnly";
import { ScrollScene } from "@/components/ScrollScene";
import { ScrollOverlays } from "@/components/ScrollOverlays";
import { ConfiguratorSection } from "@/components/ConfiguratorSection";

export default function HomePage() {
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  return (
    <>
      {/* Fixed 3D scene behind everything */}
      <ClientOnly>
        <ScrollScene scrollContainerRef={scrollContainerRef} />
      </ClientOnly>

      {/* Text overlays that fade based on scroll */}
      <ScrollOverlays />

      {/* Scroll spacer with snap sections -- 7 sections for the landing */}
      <div ref={scrollContainerRef} style={{ position: "relative", zIndex: 1, pointerEvents: "none" }}>
        <div className="snap-section" />
        <div className="snap-section" />
        <div className="snap-section" />
        <div className="snap-section" />
        <div className="snap-section" />
        <div className="snap-section" />
        <div className="snap-section" />
      </div>

      {/* Configurator section */}
      <div style={{ position: "relative", zIndex: 20 }}>
        <ConfiguratorSection />
      </div>
    </>
  );
}