"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; interface FeatureDetail { id: string; title: string; description: string; badgeTitle: string; badgeSubtext: string; videoFeedText: string; feedStyle: string; markerPositionClass: string; tooltipClass: string; arrowClass: string; } const FEATURE_LIST: FeatureDetail[] = [ { id: "glowing-indicators", title: "CARBON ARMOR HEADLIGHTS", description: "Integrated high-density carbon-reinforced matrix LEDs capable of projecting an ultra-bright beam up to 250 meters. Features custom adaptive dynamic strobes for flight safety, weather penetration, and low-light search operations.", badgeTitle: "LED LUMINANCE", badgeSubtext: "2,400 Lumens / Strobe Active", videoFeedText: "Derix Cam Active", feedStyle: "border-amber-500/30", markerPositionClass: "top-[15%] left-[50%] -translate-x-1/2", tooltipClass: "bottom-11 left-1/2 -translate-x-1/2", arrowClass: "left-1/2 -translate-x-1/2", }, { id: "propellers", title: "AERODYNAMIC SILENT ROTORS", description: "Engineered with carbon composite propeller rotors for hyper-stable flight, maximum propulsion efficiency, and low-noise signature during high-speed cinematic filming.", badgeTitle: "PROPELLER SYS", badgeSubtext: "4x Brushless motor", videoFeedText: "Rotor Velocity 100%", feedStyle: "border-emerald-500/30", markerPositionClass: "bottom-[35%] left-[15%]", tooltipClass: "bottom-11 left-0 sm:left-[-16px]", arrowClass: "left-4 sm:left-6", }, { id: "camera", title: "4K HDR GIMBAL SYSTEM", description: "Advanced dual-axis mechanical gimbal with 4K Ultra HDR dual-optical sensors for unmatched stabilization, pristine color depth, and seamless vertical pan shots.", badgeTitle: "GIMBAL CONTROL", badgeSubtext: "Active track lock", videoFeedText: "Gimbal Angle -45\u00b0", feedStyle: "border-cyan-500/30", markerPositionClass: "bottom-[28%] right-[22%]", tooltipClass: "bottom-11 right-0 sm:right-[-16px]", arrowClass: "right-4 sm:right-6", }, ]; export default function Features({ className }: { className?: string }) { const [activeFeature, setActiveFeature] = useState(null); const placeholderFeature = { id: "none", title: "AWAITING TELEMETRY LINK", description: "Click any of the orange pulsing control hotspots or close-up preview cards on the drone blueprint above to initialize real-time component diagnostics and structural engineering specifications.", badgeTitle: "SYSTEM READY", badgeSubtext: "Select a probe point", videoFeedText: "CONNECTION IDLE", feedStyle: "border-neutral-200/40", }; const currentFeature = FEATURE_LIST.find((f) => f.id === activeFeature) || placeholderFeature; return ( <>

{/* Top Header Segment with Large watermark */} {/* Center Interactive Drone Display with hot-spots / zoom assets */}

{/* Circular HUD radar rings behind drone */}

{Array.from({ length: 24 }).map((_, i) => (

))}

{/* Tech Radial Glowing Background */}

{/* Central Drone Render Hero */}

{/* Top closeup block */}

setActiveFeature(activeFeature === "glowing-indicators" ? null : "glowing-indicators")} className={"absolute top-[-30px] md:top-[-8%] left-1/2 -translate-x-1/2 w-[110px] h-[58px] sm:w-[154px] sm:h-[82px] border rounded-[14px] overflow-hidden cursor-pointer transition-all duration-500 z-20 hover:scale-105 group select-none shadow-md " + (activeFeature === "glowing-indicators" ? "border-[#FF6B00] ring-2 ring-[#FF6B00]/10" : "border-neutral-200/80")} >

CHASSIS LED

{/* Left Wing closeup block */}

setActiveFeature(activeFeature === "propellers" ? null : "propellers")} className={"absolute bottom-[10%] left-4 sm:left-[10%] md:left-[15%] w-[120px] h-[64px] sm:w-[160px] sm:h-[86px] border rounded-[14px] overflow-hidden cursor-pointer transition-all duration-500 z-20 hover:scale-105 group select-none shadow-md " + (activeFeature === "propellers" ? "border-[#FF6B00] ring-2 ring-[#FF6B00]/10" : "border-neutral-200/80")} >

WING ROTOR

{/* Right Gimbal closeup block */}

setActiveFeature(activeFeature === "camera" ? null : "camera")} className={"absolute bottom-[10%] right-4 sm:right-[10%] md:right-[15%] w-[110px] h-[60px] sm:w-[150px] sm:h-[80px] border rounded-[14px] overflow-hidden cursor-pointer transition-all duration-500 z-20 hover:scale-105 group select-none shadow-md " + (activeFeature === "camera" ? "border-[#FF6B00] ring-2 ring-[#FF6B00]/10" : "border-neutral-200/80")} >

GIMBAL CAM

{/* Bottom Box Layout */}

{/* White Viewport Frame Shape Container */}

LIVE

ALT: 120M BAT: 88%

REC \u25cf 01:24 ISO: 100

{currentFeature.videoFeedText}

4K 60FPS

{/* Middle Vertical Soundwave/Spectral Divider */}

{[12, 24, 10, 18, 28, 8, 20, 26, 14, 30, 10, 16, 24, 18, 8, 22, 28, 12, 18, 10, 16, 22, 12, 20].map((width, idx) => { let activeFactor = 0.55; if (activeFeature === "propellers") activeFactor = 1.4; else if (activeFeature === "camera") activeFactor = 1.1; else if (activeFeature === "glowing-indicators") activeFactor = 0.85; const finalWidth = Math.min(Math.max(width * activeFactor, 4), 36); const isHighlight = idx % 5 === 0 || idx % 7 === 0; return (

); })}

{/* Right Information Column */}

ACTIVE SCHEMATIC SPEC

{currentFeature.title}

{currentFeature.description}

{currentFeature.badgeTitle} {currentFeature.badgeSubtext}

); }

ADVANCED FEATURES{"\n"}THAT DEFINE DERIX

{currentFeature.title}