// "use client";
// import { Canvas } from "@react-three/fiber";
// import { OrbitControls } from "@react-three/drei";
// import { EffectComposer, Bloom } from "@react-three/postprocessing";
// import * as THREE from "three";

// function AISphere() {
//   return (
//     <mesh>
//       {/* AI Core Sphere */}
//       <sphereGeometry args={[1.2, 64, 64]} />
//       <meshStandardMaterial
//         color="#00f5d4"
//         emissive="#00f5d4"
//         emissiveIntensity={0.6}
//         roughness={0.2}
//         metalness={0.8}
//       />

//       {/* Wireframe overlay */}
//       <lineSegments>
//         <wireframeGeometry attach="geometry" args={[new THREE.SphereGeometry(1.21, 32, 32)]} />
//         <lineBasicMaterial color="#0ff" linewidth={1} />
//       </lineSegments>
//     </mesh>
//   );
// }

// export default function Hero3D() {
//   return (
//     <div className="w-full h-screen bg-black">
//       <Canvas camera={{ position: [0, 0, 5], fov: 60 }}>
//         <ambientLight intensity={0.3} />
//         <pointLight position={[5, 5, 5]} intensity={2} color="#00f5d4" />

//         {/* The futuristic AI sphere */}
//         <AISphere />

//         {/* Glow effects */}
//         <EffectComposer>
//           <Bloom intensity={1.2} luminanceThreshold={0.2} />
//         </EffectComposer>

//         <OrbitControls enableZoom={false} autoRotate autoRotateSpeed={1.5} />
//       </Canvas>
//     </div>
//   );
// }
// import { Canvas } from "@react-three/fiber";
// import { OrbitControls } from "@react-three/drei";
// import { Sphere, Line } from "@react-three/drei";
// import { useRef } from "react";
// import { useFrame } from "@react-three/fiber";
// import { EffectComposer, Bloom } from "@react-three/postprocessing";
// import { motion } from "framer-motion";
// import { ReactTyped } from "react-typed";
// import Navbar from "./Navbar";
// const Glow = ({ className = "" }) => (
//   <div
//     className={`pointer-events-none absolute inset-0 -z-10 opacity-60 blur-2xl 
//       [background:radial-gradient(60%_60%_at_20%_0%,rgba(0,255,255,.15),transparent_60%),radial-gradient(50%_50%_at_90%_20%,rgba(0,255,200,.12),transparent_60%),radial-gradient(40%_40%_at_50%_120%,rgba(0,200,255,.1),transparent_60%)] ${className}`}
//   />
// );
// function AnimatedNeuralNode({ position, color, size = 0.08 }) {
//   const ref = useRef();

//   useFrame((state) => {
//     if (ref.current) {
//       // Subtle pulsing animation
//       ref.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
//       ref.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
//       ref.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
//     }
//   });

//   return (
//     <Sphere ref={ref} args={[size, 64, 64]} position={position}>
//       <meshStandardMaterial
//         color={color}
//         emissive={color}
//         emissiveIntensity={2} // boost emissive
//         toneMapped={false} // important for bright bloom
//       />
//     </Sphere>
//   );
// }

// function NeuralStructure({
//   position = [0, 0, 0],
//   color = "#00faff",
//   nodeCount = 8,
// }) {
//   const nodes = useRef([]);

//   if (nodes.current.length === 0) {
//     for (let i = 0; i < nodeCount; i++) {
//       nodes.current.push([
//         (Math.random() - 0.5) * 3,
//         (Math.random() - 0.5) * 3,
//         (Math.random() - 0.5) * 3,
//       ]);
//     }
//   }

//   const connections = [];
//   for (let i = 0; i < nodeCount; i++) {
//     const connectionCount = 2 + Math.floor(Math.random() * 2);
//     const connectedIndices = new Set();

//     while (connectedIndices.size < connectionCount) {
//       const targetIndex = Math.floor(Math.random() * nodeCount);
//       if (targetIndex !== i) {
//         connectedIndices.add(targetIndex);
//       }
//     }

//     connectedIndices.forEach((targetIndex) => {
//       connections.push([i, targetIndex]);
//     });
//   }

//   return (
//     <group position={position}>
//       {nodes.current.map((pos, i) => (
//         <AnimatedNeuralNode key={i} position={pos} color={color} />
//       ))}

//       {connections.map(([start, end], i) => (
//         <Line
//           key={i}
//           points={[nodes.current[start], nodes.current[end]]}
//           color={color}
//           lineWidth={1}
//           transparent
//           opacity={0.6}
//           toneMapped={false} // allow bloom on lines too
//         />
//       ))}
//     </group>
//   );
// }

// export default function Home() {
//   const structures = [];
//   const colors = [
//     "#00faff",
//     "#00d9ff",
//     "#00bfff",
//     "#1e90ff",
//     "#007fff",
//     "#4dffff",
//   ];

//   for (let i = 0; i < 12; i++) {
//     structures.push({
//       position: [
//         (Math.random() - 0.5) * 15,
//         (Math.random() - 0.5) * 15,
//         (Math.random() - 0.5) * 15,
//       ],
//       color: colors[i % colors.length],
//       nodeCount: 5 + Math.floor(Math.random() * 6),
//     });
//   }

//   return (
//     <div className="w-screen h-screen border-t border-cyan-500/20
//         bg-[#0b1117]">
//       <Navbar/>
//       <div className="absolute inset-0 flex md:left-10 items-center justify-center z-10 pointer-events-none">
//          <Glow />
//         <motion.div
//           initial={{ opacity: 0, scale: 0.9 }}
//           animate={{ opacity: 1, scale: 1 }}
//           transition={{ duration: 1, ease: "easeOut" }}
//           className="px-8 py-6 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg text-center pointer-events-auto"
//         >
//           <motion.h1
//             initial={{ opacity: 0, y: -20 }}
//             animate={{ opacity: 1, y: 0 }}
//             transition={{ duration: 1, ease: "easeOut" }}
//             className="text-4xl  md:text-8xl font-bold text-cyan-200 drop-shadow-[0_0_15px_#00faff] special-font"
//             // style={{ fontFamily: "Roboto, sans-serif" }}
//           >
//             <b>MACHINE LEARNING FOR EVERYONE</b> (<b>ML4E</b>)
//           </motion.h1>

//           <motion.p
//             initial={{ opacity: 0, y: 20 }}
//             animate={{ opacity: 1, y: 0 }}
//             transition={{ delay: 0.5, duration: 1, ease: "easeOut" }}
//             className="mt-2 text-lg md:text-2xl text-blue-300 drop-shadow-[0_0_10px_#00d9ff]"
//             style={{ fontFamily: "Roboto, sans-serif" }}
//           >
//             <ReactTyped
//               strings={["THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA"]}
//               typeSpeed={50}
//               backSpeed={30}
//               backDelay={1500}
//               loop={false} 
//               showCursor={true} 
//             />
//           </motion.p>
//         </motion.div>
//       </div>

//       <Canvas camera={{ position: [0, 0, 10], fov: 30 }}>
//         <color attach="background" args={["#000000"]} />
//         <ambientLight intensity={0.3} />
//         <pointLight position={[10, 10, 10]} intensity={2} />

//         {structures.map((props, i) => (
//           <NeuralStructure key={i} {...props} />
//         ))}

//         <OrbitControls
//           enableZoom={true}
//           autoRotate
//           autoRotateSpeed={1.5} // adjust speed (default = 2.0)
//           enablePan={false}
//           enableRotate={window.innerWidth > 768}
//           touches={{
//             ONE: null,
//             TWO: null
//           }}
//         />

//         {/* 🌟 Bloom Effect for neon glow */}
//         <EffectComposer>
//           <Bloom
//             intensity={2.5} // strength of glow
//             kernelSize={3} // blur size
//             luminanceThreshold={0.1} // what gets bloomed
//             luminanceSmoothing={0.9}
//           />
//         </EffectComposer>
//       </Canvas>
//     </div>
//   );
// }
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Sphere, Line } from "@react-three/drei";
import { useRef } from "react";
import { useFrame } from "@react-three/fiber";
import { EffectComposer, Bloom } from "@react-three/postprocessing";
import { motion } from "framer-motion";
import { ReactTyped } from "react-typed";
import Navbar from "./Navbar";

const Glow = ({ className = "" }) => (
  <div
    className={`pointer-events-none absolute inset-0 -z-10 opacity-60 blur-2xl 
      [background:radial-gradient(60%_60%_at_20%_0%,rgba(0,255,255,.15),transparent_60%),radial-gradient(50%_50%_at_90%_20%,rgba(0,255,200,.12),transparent_60%),radial-gradient(40%_40%_at_50%_120%,rgba(0,200,255,.1),transparent_60%)] ${className}`}
  />
);

function AnimatedNeuralNode({ position, color, size = 0.08 }) {
  const ref = useRef();

  useFrame((state) => {
    if (ref.current) {
      // Subtle pulsing animation
      ref.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
      ref.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
      ref.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
    }
  });

  return (
    <Sphere ref={ref} args={[size, 64, 64]} position={position}>
      <meshStandardMaterial
        color={color}
        emissive={color}
        emissiveIntensity={2}
        toneMapped={false}
      />
    </Sphere>
  );
}

function NeuralStructure({
  position = [0, 0, 0],
  color = "#00faff",
  nodeCount = 18, // Fixed node count instead of random
}) {
  const nodes = useRef([]);

  if (nodes.current.length === 0) {
    for (let i = 0; i < nodeCount; i++) {
      nodes.current.push([
        (Math.random() - 0.5) * 3,
        (Math.random() - 0.5) * 3,
        (Math.random() - 0.5) * 3,
      ]);
    }
  }

  const connections = [];
  for (let i = 0; i < nodeCount; i++) {
    const connectionCount = 2 + Math.floor(Math.random() * 2);
    const connectedIndices = new Set();

    while (connectedIndices.size < connectionCount) {
      const targetIndex = Math.floor(Math.random() * nodeCount);
      if (targetIndex !== i) {
        connectedIndices.add(targetIndex);
      }
    }

    connectedIndices.forEach((targetIndex) => {
      connections.push([i, targetIndex]);
    });
  }

  return (
    <group position={position}>
      {nodes.current.map((pos, i) => (
        <AnimatedNeuralNode key={i} position={pos} color={color} />
      ))}

      {connections.map(([start, end], i) => (
        <Line
          key={i}
          points={[nodes.current[start], nodes.current[end]]}
          color={color}
          lineWidth={1}
          transparent
          opacity={0.6}
          toneMapped={false}
        />
      ))}
    </group>
  );
}

export default function Home() {
  const structures = [];
  const colors = [
    "#00faff",
    "#00d9ff",
    "#00bfff",
    "#1e90ff",
    "#007fff",
    "#4dffff",
  ];

  // Fixed number of structures (18 as requested between 12-24)
  const fixedStructureCount = 18;
  
  for (let i = 0; i < fixedStructureCount; i++) {
    structures.push({
      position: [
        (Math.random() - 0.5) * 15,
        (Math.random() - 0.5) * 15,
        (Math.random() - 0.5) * 15,
      ],
      color: colors[i % colors.length],
      nodeCount: 18, // Fixed node count for all structures
    });
  }

  return (
    <div className="w-screen min-h-screen border-t border-cyan-500/20 bg-[#0b1117] overflow-y-auto">
      <Navbar/>
      
      {/* Content Section - Now scrollable on mobile */}
      <div className="relative min-h-screen">
        <div className="absolute inset-0 flex md:left-10 items-center justify-center z-10 pointer-events-none">
          <Glow />
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 1, ease: "easeOut" }}
            className="px-8 py-6 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg text-center pointer-events-auto mx-4"
          >
            <motion.h1
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 1, ease: "easeOut" }}
              className="text-4xl md:text-8xl font-bold text-cyan-200 drop-shadow-[0_0_15px_#00faff] special-font"
            >
              <b>MACHINE LEARNING FOR EVERYONE</b> (<b>ML4E</b>)
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5, duration: 1, ease: "easeOut" }}
              className="mt-2 text-lg md:text-2xl text-blue-300 drop-shadow-[0_0_10px_#00d9ff]"
              style={{ fontFamily: "Roboto, sans-serif" }}
            >
              <ReactTyped
                strings={["THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA"]}
                typeSpeed={50}
                backSpeed={30}
                backDelay={1500}
                loop={false} 
                showCursor={true} 
              />
            </motion.p>
          </motion.div>
        </div>

        {/* Canvas with fixed height and proper z-index */}
        <div className="fixed inset-0 z-0">
          <Canvas camera={{ position: [0, 0, 10], fov: 30 }}>
            <color attach="background" args={["#000000"]} />
            <ambientLight intensity={0.3} />
            <pointLight position={[10, 10, 10]} intensity={2} />

            {structures.map((props, i) => (
              <NeuralStructure key={i} {...props} />
            ))}

            <OrbitControls
              enableZoom={false} // Disabled zoom completely
              autoRotate={false} // Disabled auto rotation
              enablePan={false}
              enableRotate={window.innerWidth > 768}
              minDistance={8} // Prevent zoom out
              maxDistance={12} // Prevent zoom in
              touches={{
                ONE: null,
                TWO: null
              }}
            />

            <EffectComposer>
              <Bloom
                intensity={2.5}
                kernelSize={3}
                luminanceThreshold={0.1}
                luminanceSmoothing={0.9}
              />
            </EffectComposer>
          </Canvas>
        </div>

        {/* Add some scrollable content to demonstrate scrolling */}
      
      </div>
    </div>
  );
}