'use client';

import { Canvas } from '@react-three/fiber';
import { OrbitControls, Stage, ContactShadows, Environment } from '@react-three/drei';
import { Suspense } from 'react';
import { Model } from './Model';
import { motion } from 'framer-motion';

export default function ShowcaseCanvas() {
  return (
    // Added 'bg-zinc-50' and a subtle 'bg-grid' style pattern
// Replace your div className with this:
<div className="relative h-[650px] w-full rounded-2xl overflow-hidden shadow-2xl bg-stone-100 border border-stone-200 bg-[linear-gradient(to_right,#d6d3d1_1px,transparent_1px),linear-gradient(to_bottom,#d6d3d1_1px,transparent_1px)] bg-[size:40px_40px]">      
      {/* 3D Canvas */}
      <Canvas shadows camera={{ position: [0, 0, 4], fov: 45 }}>
        <Suspense fallback={null}>
          <Environment preset="city" />
          <Stage intensity={0.5} adjustCamera={false}>
            <Model url="/models/shoe.glb" />
          </Stage>
          <ContactShadows opacity={0.4} scale={10} blur={2} far={4.5} />
        </Suspense>
        <OrbitControls 
          makeDefault 
          enablePan={false} 
          minPolarAngle={Math.PI / 4} 
          maxPolarAngle={Math.PI / 1.75} 
        />
      </Canvas>

      {/* UI Overlay */}
      <motion.div 
        initial={{ opacity: 0, x: 50 }} 
        animate={{ opacity: 1, x: 0 }} 
        transition={{ duration: 0.8, ease: "easeOut" }}
        className="absolute top-10 right-10 z-10 w-72 bg-black/80 backdrop-blur-xl p-6 rounded-2xl text-white shadow-2xl"
      >
        <h2 className="text-2xl font-bold tracking-tight">AIR JORDAN 1</h2>
        <p className="text-zinc-300 mt-2 text-sm leading-relaxed">
          Engineered for performance and style. Experience the pinnacle of sneaker culture.
        </p>
        <div className="flex items-center justify-between mt-6">
          <span className="text-lg font-bold">$170.00</span>
          <button className="bg-white text-black px-5 py-2 text-sm rounded-full font-bold hover:bg-zinc-200 transition-colors duration-300">
            BUY NOW
          </button>
        </div>
      </motion.div>
    </div>
  );
}