tab pages

import React, { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Shield, Zap, Activity } from 'lucide-react';

const SleekCyberTabs = () => {
  const [activeTab, setActiveTab] = useState(0);
  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
  const tabsRef = useRef([]);

  const tabs = [
    { 
      id: 'overview', 
      label: 'Overview', 
      icon: <Zap className="w-4 h-4" />,
      title: 'Neural Core Status',
      content: 'System architecture is operating within optimal parameters. Synaptic response times are at sub-millisecond levels across all active sectors.',
      metric: '98.4%',
      metricLabel: 'CORE STABILITY'
    },
    { 
      id: 'analytics', 
      label: 'Analytics', 
      icon: <Activity className="w-4 h-4" />,
      title: 'Vector Processing',
      content: 'Real-time telemetry confirms high-density data flows through the primary backbone. No bottlenecks detected in the current load cycle.',
      metric: '1.2 PB/s',
      metricLabel: 'THROUGHPUT'
    },
    { 
      id: 'security', 
      label: 'Security', 
      icon: <Shield className="w-4 h-4" />,
      title: 'Perimeter Defense',
      content: 'Automated threat mitigation protocols are actively scanning for signature mismatches. All unauthorized access attempts redirected to honeypots.',
      metric: 'SECURE',
      metricLabel: 'FIREWALL STATE'
    }
  ];

  useEffect(() => {
    const currentTab = tabsRef.current[activeTab];
    if (currentTab) {
      setIndicatorStyle({
        left: currentTab.offsetLeft,
        width: currentTab.offsetWidth
      });
    }
  }, [activeTab]);

  return (
    <div className="flex items-center justify-center w-full min-h-[500px] bg-[#0a0a0a] p-6">
      <div className="w-full max-w-xl bg-[#121212] rounded-2xl border border-zinc-800/50 shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] overflow-hidden">
        
        {/* Navigation Header */}
        <div className="relative flex items-center bg-[#121212] border-b border-zinc-800/50">
          {/* Traveling Neon Indicator */}
          <motion.div
            initial={false}
            animate={{
              left: indicatorStyle.left,
              width: indicatorStyle.width,
            }}
            transition={{ type: 'spring', stiffness: 350, damping: 30 }}
            className="absolute top-0 h-[2px] bg-[#00f3ff] shadow-[0_0_15px_rgba(0,243,255,1)] z-20"
          />

          {tabs.map((tab, idx) => (
            <button
              key={tab.id}
              ref={(el) => (tabsRef.current[idx] = el)}
              onClick={() => setActiveTab(idx)}
              className={`flex-1 relative py-6 px-4 flex items-center justify-center gap-2 transition-all duration-300 group
                ${idx !== tabs.length - 1 ? 'border-r border-zinc-800/20' : ''}
                ${activeTab === idx ? 'text-white' : 'text-zinc-500 hover:text-zinc-300'}
              `}
            >
              <span className={`transition-transform duration-300 ${activeTab === idx ? 'scale-110 text-[#00f3ff]' : 'opacity-50'}`}>
                {tab.icon}
              </span>
              <span className={`text-[10px] uppercase tracking-[0.2em] transition-all duration-300 
                ${activeTab === idx ? 'font-black' : 'font-normal'}
              `}>
                {tab.label}
              </span>
              
              {/* Micro-divider vanishing logic via inline style or classes handled by parent flex gap/borders */}
            </button>
          ))}
        </div>

        {/* Sliding Content Container */}
        <div className="relative overflow-hidden bg-gradient-to-b from-[#121212] to-[#0d0d0d]">
          <motion.div
            animate={{ x: `-${activeTab * 100}%` }}
            transition={{ 
                type: 'spring', 
                stiffness: 300, 
                damping: 35,
            }}
            style={{ 
                display: 'flex',
                // Motion blur simulation
                filter: `blur(${activeTab !== null ? 0 : 4}px)` 
            }}
            className="w-full"
          >
            {tabs.map((tab, idx) => (
              <div 
                key={tab.id} 
                className="min-w-full p-10 flex flex-col gap-6"
              >
                <div className="space-y-2">
                  <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: activeTab === idx ? 1 : 0, y: activeTab === idx ? 0 : 10 }}
                    transition={{ delay: 0.1 }}
                    className="text-[10px] text-[#00f3ff] font-mono tracking-widest uppercase"
                  >
                    System Protocol v5.0.2
                  </motion.div>
                  <motion.h2 
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: activeTab === idx ? 1 : 0, x: activeTab === idx ? 0 : -10 }}
                    transition={{ delay: 0.2 }}
                    className="text-2xl font-bold text-zinc-100 tracking-tight"
                  >
                    {tab.title}
                  </motion.h2>
                </div>

                <motion.p 
                  initial={{ opacity: 0 }}
                  animate={{ opacity: activeTab === idx ? 1 : 0 }}
                  transition={{ delay: 0.3 }}
                  className="text-zinc-400 text-sm leading-relaxed"
                >
                  {tab.content}
                </motion.p>

                <motion.div 
                    initial={{ scale: 0.95, opacity: 0 }}
                    animate={{ scale: activeTab === idx ? 1 : 0.95, opacity: activeTab === idx ? 1 : 0 }}
                    transition={{ delay: 0.4 }}
                    className="mt-4 flex items-center justify-between p-4 rounded-lg bg-zinc-900/50 border border-zinc-800"
                >
                    <div className="space-y-1">
                        <div className="text-[10px] text-zinc-500 uppercase tracking-tighter">{tab.metricLabel}</div>
                        <div className="text-xl font-mono font-bold text-[#00f3ff]">{tab.metric}</div>
                    </div>
                    <div className="h-10 w-10 flex items-center justify-center rounded-full border border-[#00f3ff]/20 bg-[#00f3ff]/5">
                        <div className="w-2 h-2 rounded-full bg-[#00f3ff] animate-pulse shadow-[0_0_8px_#00f3ff]"></div>
                    </div>
                </motion.div>
              </div>
            ))}
          </motion.div>
        </div>
      </div>
    </div>
  );
};

export default SleekCyberTabs;