import { Canvas, useFrame } from '@react-three/fiber';
import { Float, MeshDistortMaterial } from '@react-three/drei';
import { useRef } from 'react';
import * as THREE from 'three';

function FloatingGlassOrb() {
  const meshRef = useRef<THREE.Mesh>(null!);

  useFrame((state) => {
    // Gentle floating rotation tracking time elapsed
    meshRef.current.rotation.x = state.clock.getElapsedTime() * 0.2;
    meshRef.current.rotation.y = state.clock.getElapsedTime() * 0.3;
  });

  return (
    <Float speed={2} rotationIntensity={1.5} floatIntensity={2}>
      <mesh ref={meshRef}>
        <sphereGeometry args={[1, 64, 64]} />
        <MeshDistortMaterial
          color="#8b5cf6"
          roughness={0.1}
          metalness={0.8}
          distort={0.4}
          speed={2}
        />
      </mesh>
    </Float>
  );
}

export function HeroScene() {
  return (
    <div className="h-96 w-full">
      <Canvas camera={{ position: [0, 0, 3] }}>
        <ambientLight intensity={0.7} />
        <directionalLight position={[10, 10, 5]} intensity={1.5} />
        <FloatingGlassOrb />
      </Canvas>
    </div>
  );
}

1/4 🎨 Why @MengTo inspired an entire generation of Design Engineers:
Static mockups can never communicate the tactile feel of an interface. When designers learn to write React and SwiftUI, the bottleneck disappears.

2/4 3D on the web is no longer gatekept:
With React Three Fiber and Three.js, adding reactive 3D glass orbs, distorted meshes, and dynamic camera angles takes fewer than 50 lines of declarative JSX.

3/4 The rise of the hybrid builder:
In the age of AI coding agents, the most valuable builders are those with high design taste who also understand code architecture.

4/4 Follow @MengTo for masterclasses on SwiftUI, 3D web design, and bridging the gap between Figma and production code.