import { Canvas } from '@react-three/fiber';
import { ScrollControls } from '@react-three/drei';
import { Scene } from '../components/home/Scene';
import { Overlay } from '../components/home/Overlay';
import { Suspense } from 'react';

export default function Home() {
  return (
    <div className="w-screen h-screen bg-zinc-950 overflow-hidden">
      <Canvas shadows camera={{ position: [0, 0, 10], fov: 45 }}>
        <Suspense fallback={null}>
          <ScrollControls pages={3} damping={0.2}>
            <Scene />
            <Overlay />
          </ScrollControls>
        </Suspense>
      </Canvas>
    </div>
  );
}