"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { TrendingUp, Target, Layers, BarChart3, ArrowUpRight } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } const sectors = [ { id: "str", title: "Market Strategy", value: "+42%", desc: "Positioning metrics based on consumer sentiment analysis.", icon: Target, }, { id: "ops", title: "Operational Flow", value: "0.12ms", desc: "Supply chain synchronization across global distribution hubs.", icon: Layers, }, { id: "growth", title: "Capital Growth", value: "$2.4M", desc: "Quarterly revenue velocity exceeding baseline projections.", icon: TrendingUp, }, { id: "data", title: "Insights Engine", value: "99.8%", desc: "Predictive accuracy for Q4 market trend fluctuations.", icon: BarChart3, } ]; export function FeatureSectorPulse() { const [active, setActive] = useState(null); return (

Strategic Overview // 2026

Predictive
Intelligence.

Harnessing multi-vector data points to stabilize market entry and accelerate capital velocity.

{/* Sectors Grid */}

{sectors.map((sector) => ( setActive(sector.id)} onMouseLeave={() => setActive(null)} className={cn( "relative p-6 @xl:p-8 rounded-3xl border transition-all duration-500 cursor-crosshair flex flex-col justify-between group overflow-hidden", active === sector.id ? "bg-white dark:bg-neutral-900 border-red-600/20 shadow-2xl z-30 scale-105 opacity-100" : "bg-transparent border-neutral-200 dark:border-neutral-800 opacity-40 grayscale" )} >

SEC_{sector.id.toUpperCase()}

{sector.value}

{sector.title}

{active === sector.id && ( {sector.desc} )} ))}

{/* HUD Connectors (Cruz técnica de fondo) */}

); } export default function FeatureSectorPulseDemo() { return ; }

Predictive Intelligence.

Predictive
Intelligence.