mport React, { Suspense, useRef, useMemo } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Stars, Text, Environment } from '@react-three/drei';
import * as THREE from 'three';

// --- Fallback Loader Component ---
// This will be displayed while the main components are loading.
function Loader() {
  return (
    <Text
      color="white"
      anchorX="center"
      anchorY="middle"
      fontSize={0.5}
    >
      LOADING ADVANCED VISUALIZATION...
    </Text>
  );
}

// --- Procedural Darkstar Model Component ---
// This version uses declarative geometry components for better stability with the renderer.
function Darkstar(props) {
    const group = useRef();

    // Use useMemo to create materials only once, preventing re-creation on re-renders.
    const materials = useMemo(() => ({
        body: new THREE.MeshStandardMaterial({
            color: '#181818',
            metalness: 0.85,
            roughness: 0.35,
            envMapIntensity: 0.7,
        }),
        cockpit: new THREE.MeshStandardMaterial({
            color: '#000000',
            metalness: 1.0,
            roughness: 0.1,
            envMapIntensity: 1.0,
        }),
        intake: new THREE.MeshStandardMaterial({
            color: '#252525',
            metalness: 0.9,
            roughness: 0.2,
        }),
        engineGlow: new THREE.MeshBasicMaterial({
            color: '#ff8a1e',
        }),
    }), []);
    
    // --- Memoized Geometries ---
    // Create complex shapes once to improve performance and stability.
    const wingShape = useMemo(() => new THREE.Shape([
        new THREE.Vector2(-30, 0),
        new THREE.Vector2(30, 0),
        new THREE.Vector2(10, 20)
    ]), []);

    const finShape = useMemo(() => new THREE.Shape([
        new THREE.Vector2(0, 0),
        new THREE.Vector2(-15, 0),
        new THREE.Vector2(0, 8)
    ]), []);


    // Slowly rotate the aircraft for a cinematic feel.
    useFrame((state, delta) => {
        if (group.current) {
            group.current.rotation.y += delta * 0.05;
        }
    });

    return (
        <group ref={group} {...props} dispose={null} scale={0.25} rotation={[0, Math.PI, 0]}>
            {/* Main Fuselage */}
            <mesh castShadow receiveShadow material={materials.body} position={[0, 0, 0]} rotation={[0, 0, 0]} scale={[1, 1, 0.8]}>
                <boxGeometry args={[100, 4, 10]} />
            </mesh>
            <mesh castShadow receiveShadow material={materials.body} position={[-65, 0, 0]} rotation={[0, 0, Math.PI / 2]}>
                <cylinderGeometry args={[2, 0.5, 30, 4]} />
            </mesh>

            {/* Wings */}
            <mesh castShadow receiveShadow material={materials.body} position={[10, 0.5, 20]} rotation={[0, 0, -0.1]}>
                <shapeGeometry args={[wingShape]} />
            </mesh>
            <mesh castShadow receiveShadow material={materials.body} position={[10, 0.5, -20]} rotation={[Math.PI, 0, 0.1]}>
                 <shapeGeometry args={[wingShape]} />
            </mesh>

            {/* Cockpit */}
            <mesh castShadow material={materials.cockpit} position={[-25, 3.5, 0]} scale={[1, 0.8, 1.2]}>
                <sphereGeometry args={[5, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2]} />
            </mesh>

            {/* Tail Fins */}
            <mesh castShadow material={materials.body} position={[45, 5, 8]} rotation={[0, -0.4, 0]}>
                <shapeGeometry args={[finShape]} />
            </mesh>
            <mesh castShadow material={materials.body} position={[45, 5, -8]} rotation={[Math.PI, 0.4, 0]}>
                 <shapeGeometry args={[finShape]} />
            </mesh>

             {/* Engine Intakes */}
            <mesh castShadow material={materials.intake} position={[20, -1, 7]} rotation={[0, 0, Math.PI / 2]}>
                <cylinderGeometry args={[4, 3, 15, 32]} />
            </mesh>
            <mesh castShadow material={materials.intake} position={[20, -1, -7]} rotation={[0, 0, Math.PI / 2]}>
                <cylinderGeometry args={[4, 3, 15, 32]} />
            </mesh>
            
            {/* Engine Exhaust & Glow */}
            <mesh material={materials.engineGlow} position={[55, -1, 4]}>
                <cylinderGeometry args={[2.5, 2.5, 2, 32]} />
            </mesh>
             <mesh material={materials.engineGlow} position={[55, -1, -4]}>
                <cylinderGeometry args={[2.5, 2.5, 2, 32]} />
            </mesh>
            {/* Point lights create the engine glow effect */}
            <pointLight color="#ff9f4f" intensity={250} distance={25} position={[55, -1, 4]} />
            <pointLight color="#ff9f4f" intensity={250} distance={25} position={[55, -1, -4]} />
        </group>
    );
}

// --- Main Scene Experience Component ---
// This component sets up the entire 3D environment
function Experience() {
  return (
    <>
      {/* Controls - Allows camera manipulation */}
      <OrbitControls
        enableDamping
        dampingFactor={0.05}
        minDistance={10}
        maxDistance={100}
        maxPolarAngle={Math.PI / 1.8}
      />
      
      {/* Lighting setup for realism */}
      <ambientLight intensity={0.2} />
      <directionalLight position={[10, 20, 5]} intensity={1.5} castShadow />
      
      {/* Environment provides realistic reflections and ambient light */}
      <Environment preset="night" blur={0.7} />

      {/* Dynamic starfield background */}
      <Stars radius={100} depth={50} count={10000} factor={4} saturation={0} fade speed={1} />
      
      {/* The aircraft model */}
      <Darkstar position={[0, 0, 0]} />
    </>
  );
}

// --- Main App Component ---
export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', background: '#050505' }}>
        <div style={{ position: 'absolute', top: '20px', left: '20px', zIndex: 100, color: 'white', fontFamily: 'sans-serif', pointerEvents: 'none' }}>
            <h1 style={{fontSize: '1.5em', margin: 0}}>SR-72 "Darkstar"</h1>
            <p style={{fontSize: '0.9em', margin: '5px 0 0', color: '#ccc'}}>Advanced Hypersonic Concept</p>
        </div>
        <Canvas
            shadows
            camera={{ position: [0, 10, 50], fov: 45 }}
        >
            {/* Suspense provides a fallback while assets load */}
            <Suspense fallback={<Loader />}>
                <Experience />
            </Suspense>
        </Canvas>
    </div>
  );
}



i  create a react code to get a advance visulation about SR-72 Darkstar aircraft soo this is my code and i get a error ..can u correct it and generate a visualization