"use client";

import * as React from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import type { Mesh } from "three";
import { cn } from "@/lib/utils";

function Knot({ color = "#8b5cf6" }: { color?: string }) {
  const ref = React.useRef<Mesh>(null);

  useFrame((_, delta) => {
    if (!ref.current) return;
    ref.current.rotation.x += delta * 0.25;
    ref.current.rotation.y += delta * 0.4;
  });

  return (
    <mesh ref={ref} castShadow>
      <torusKnotGeometry args={[1, 0.34, 200, 32]} />
      <meshStandardMaterial color={color} roughness={0.15} metalness={0.9} />
    </mesh>
  );
}

export interface HeroKnot3DProps {
  title?: string;
  subtitle?: string;
  color?: string;
  height?: number;
  className?: string;
}

export function HeroKnot3D({
  title = "Built in three dimensions",
  subtitle = "Drag to orbit. Everything renders on the GPU, in the browser.",
  color = "#8b5cf6",
  height = 420,
  className,
}: HeroKnot3DProps) {
  return (
    <div
      className={cn("relative w-full overflow-hidden rounded-2xl border bg-background", className)}
      style={{ height }}
    >
      <Canvas camera={{ position: [0, 0, 4.2], fov: 45 }} dpr={[1, 2]}>
        <color attach="background" args={["#0a0a0a"]} />
        <ambientLight intensity={0.4} />
        <directionalLight position={[4, 4, 4]} intensity={2.4} />
        <pointLight position={[-4, -2, -3]} intensity={18} color="#38bdf8" />
        <pointLight position={[4, -3, 2]} intensity={12} color="#f472b6" />
        <Knot color={color} />
        <OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.4} />
      </Canvas>

      <div className="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-8 text-center">
        <h2 className="text-2xl font-semibold tracking-tight text-white sm:text-3xl">{title}</h2>
        <p className="mx-auto mt-2 max-w-md text-sm text-white/70">{subtitle}</p>
      </div>
    </div>
  );
}

Related components