import React, { useEffect, useRef } from 'react';
import { 
  Crosshair, Navigation, Target, Activity, Zap, Shield, Eye, 
  Map, Video, Cpu, Wifi, Battery, ChevronRight, Save, XSquare, 
  AlertCircle, ChevronLeft, LocateFixed, Fingerprint
} from 'lucide-react';

const SarasScope3D = () => {
  const mountRef = useRef(null);

  useEffect(() => {
    let scene, camera, renderer, animationId, group;

    const initThree = () => {
      if (!mountRef.current || !window.THREE) return;

      const THREE = window.THREE;
      const width = mountRef.current.clientWidth || 500;
      const height = mountRef.current.clientHeight || 400;

      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
      camera.position.set(0, 5, 20);

      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(width, height);
      renderer.setPixelRatio(window.devicePixelRatio);
      
      if (mountRef.current.firstChild) {
          mountRef.current.removeChild(mountRef.current.firstChild);
      }
      mountRef.current.appendChild(renderer.domElement);

      // Lighting Setup
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
      scene.add(ambientLight);
      
      const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
      dirLight.position.set(10, 20, 10);
      scene.add(dirLight);
      
      const blueLight = new THREE.PointLight(0x06b6d4, 2, 50);
      blueLight.position.set(-5, 0, 5);
      scene.add(blueLight);

      group = new THREE.Group();

      // Procedural Model Materials
      const bodyMat = new THREE.MeshStandardMaterial({ color: 0x1e293b, roughness: 0.7, metalness: 0.3 });
      const metalMat = new THREE.MeshStandardMaterial({ color: 0x475569, roughness: 0.4, metalness: 0.8 });
      const lensMat = new THREE.MeshStandardMaterial({ color: 0x082f49, roughness: 0.1, metalness: 0.9, transparent: true, opacity: 0.9 });
      
      // Main Scope Body
      const bodyGeo = new THREE.CylinderGeometry(1.5, 1.5, 8, 32);
      bodyGeo.rotateZ(Math.PI / 2);
      const body = new THREE.Mesh(bodyGeo, bodyMat);
      group.add(body);

      // Front Lens Hood
      const frontHoodGeo = new THREE.CylinderGeometry(1.8, 1.5, 2, 32);
      frontHoodGeo.rotateZ(Math.PI / 2);
      const frontHood = new THREE.Mesh(frontHoodGeo, bodyMat);
      frontHood.position.set(-5, 0, 0);
      group.add(frontHood);

      // Front Glass Lens
      const lensGeo = new THREE.CylinderGeometry(1.6, 1.6, 0.2, 32);
      lensGeo.rotateZ(Math.PI / 2);
      const frontLens = new THREE.Mesh(lensGeo, lensMat);
      frontLens.position.set(-5.9, 0, 0);
      group.add(frontLens);

      // Eyepiece
      const eyePieceGeo = new THREE.CylinderGeometry(1.2, 1.5, 1.5, 32);
      eyePieceGeo.rotateZ(Math.PI / 2);
      const eyePiece = new THREE.Mesh(eyePieceGeo, metalMat);
      eyePiece.position.set(4.75, 0, 0);
      group.add(eyePiece);

      // Top Sensor/Compute Module
      const topBoxGeo = new THREE.BoxGeometry(4, 1.2, 2.5);
      const topBox = new THREE.Mesh(topBoxGeo, bodyMat);
      topBox.position.set(-1, 1.8, 0);
      group.add(topBox);

      // Top Module Camera/Sensor Lens
      const sensorGeo = new THREE.CylinderGeometry(0.5, 0.5, 0.5, 16);
      sensorGeo.rotateZ(Math.PI / 2);
      const sensor = new THREE.Mesh(sensorGeo, lensMat);
      sensor.position.set(-3, 1.8, 0);
      group.add(sensor);

      // Rail Mount Base
      const mountGeo = new THREE.BoxGeometry(6, 1, 1.5);
      const mountMesh = new THREE.Mesh(mountGeo, metalMat);
      mountMesh.position.set(0, -1.8, 0);
      group.add(mountMesh);

      // Picatinny Rail Interface Simulator
      const railGeo = new THREE.BoxGeometry(6, 0.2, 2);
      const railMesh = new THREE.Mesh(railGeo, bodyMat);
      railMesh.position.set(0, -2.4, 0);
      group.add(railMesh);

      scene.add(group);

      // Initial isometric angle
      group.rotation.y = -Math.PI / 6;
      group.rotation.x = Math.PI / 12;

      // Mouse/Touch Interaction logic
      let isDragging = false;
      let previousMousePosition = { x: 0, y: 0 };

      const onMouseDown = (e) => { isDragging = true; };
      const onMouseUp = () => { isDragging = false; };
      const onMouseMove = (e) => {
        if (isDragging && group) {
          const deltaMove = {
            x: e.offsetX - previousMousePosition.x,
            y: e.offsetY - previousMousePosition.y
          };
          group.rotation.y += deltaMove.x * 0.01;
          group.rotation.x += deltaMove.y * 0.01;
        }
        previousMousePosition = { x: e.offsetX, y: e.offsetY };
      };

      const onTouchStart = (e) => {
        isDragging = true;
        previousMousePosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
      };
      const onTouchEnd = () => { isDragging = false; };
      const onTouchMove = (e) => {
         if (isDragging && group) {
          const deltaMove = {
            x: e.touches[0].clientX - previousMousePosition.x,
            y: e.touches[0].clientY - previousMousePosition.y
          };
          group.rotation.y += deltaMove.x * 0.01;
          group.rotation.x += deltaMove.y * 0.01;
        }
        previousMousePosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
      };

      const canvas = renderer.domElement;
      canvas.addEventListener('mousedown', onMouseDown);
      window.addEventListener('mouseup', onMouseUp);
      canvas.addEventListener('mousemove', onMouseMove);
      canvas.addEventListener('touchstart', onTouchStart, {passive: true});
      window.addEventListener('touchend', onTouchEnd);
      canvas.addEventListener('touchmove', onTouchMove, {passive: true});

      // Render Loop
      const animate = () => {
        animationId = requestAnimationFrame(animate);
        if (!isDragging) {
            group.rotation.y += 0.003; // Auto rotate slowly when not interacting
        }
        renderer.render(scene, camera);
      };
      animate();

      const handleResize = () => {
        if (!mountRef.current) return;
        const w = mountRef.current.clientWidth;
        const h = mountRef.current.clientHeight;
        renderer.setSize(w, h);
        camera.aspect = w / h;
        camera.updateProjectionMatrix();
      };
      window.addEventListener('resize', handleResize);
    };

    // Load Three.js dynamically
    if (!window.THREE) {
      const script = document.createElement('script');
      script.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
      script.onload = initThree;
      document.head.appendChild(script);
    } else {
      initThree();
    }

    return () => {
      if (animationId) cancelAnimationFrame(animationId);
      window.removeEventListener('mouseup', () => {});
      window.removeEventListener('touchend', () => {});
    };
  }, []);

  return (
    <div className="relative rounded-xl overflow-hidden shadow-2xl border-4 border-slate-700 bg-slate-800 w-full min-h-[400px]">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-slate-700 to-slate-900"></div>
      
      <div ref={mountRef} className="absolute inset-0 z-10 cursor-grab active:cursor-grabbing"></div>
      
      <div className="absolute bottom-4 left-4 z-20 bg-slate-900/80 px-3 py-2 rounded text-cyan-400 font-mono text-xs border border-slate-700 backdrop-blur-sm flex items-center shadow-lg">
        <span className="w-2 h-2 bg-cyan-500 rounded-full animate-pulse mr-3 shadow-[0_0_8px_#06b6d4]"></span>
        LIVE 3D RENDER: SARAS TYPE-1 MODULE <span className="text-slate-500 ml-2">(DRAG TO ROTATE)</span>
      </div>
      
      <div className="absolute top-0 left-0 w-full h-full bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:40px_40px] opacity-20 pointer-events-none"></div>
    </div>
  );
};

export default function App() {
  return (
    <div className="min-h-screen bg-slate-900 text-slate-100 font-sans selection:bg-cyan-900">
      
      {/* PAGE 1: COVER */}
      <section className="relative w-full min-h-screen flex flex-col justify-center items-center overflow-hidden border-b-8 border-slate-800">
        {/* Background Graphic Simulation */}
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1595054225545-09511d7fdb31?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center opacity-20 mix-blend-luminosity"></div>
          <div className="absolute inset-0 bg-gradient-to-b from-slate-900/80 via-slate-900/60 to-slate-900"></div>
          
          {/* HUD Overlay Elements */}
          <div className="absolute top-10 left-10 flex space-x-4 text-cyan-400 font-mono text-sm">
            <div className="flex items-center space-x-2 bg-cyan-900/30 px-3 py-1 border border-cyan-800 rounded">
              <Activity size={16} /> <span>AMMO: 150</span>
            </div>
            <div className="flex items-center space-x-2 bg-cyan-900/30 px-3 py-1 border border-cyan-800 rounded">
              <Crosshair size={16} /> <span>MAG: X1</span>
            </div>
          </div>
          <div className="absolute top-10 right-10 text-cyan-400 font-mono">
            <LocateFixed size={48} className="opacity-50 animate-pulse" />
          </div>
          <div className="absolute bottom-10 left-10 flex space-x-2 text-cyan-400 font-mono text-sm">
             <button className="flex items-center px-4 py-2 bg-slate-800/80 hover:bg-cyan-900/50 border border-slate-700 transition"><Save size={16} className="mr-2"/> SAVE</button>
             <button className="flex items-center px-4 py-2 bg-slate-800/80 hover:bg-cyan-900/50 border border-slate-700 transition"><ChevronRight size={16} className="mr-2"/> EXIT</button>
             <button className="flex items-center px-4 py-2 bg-slate-800/80 hover:bg-red-900/50 border border-slate-700 transition text-red-400"><XSquare size={16} className="mr-2"/> CANCEL</button>
          </div>
          {/* Thermal Target Simulation */}
          <div className="absolute top-1/2 left-3/4 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 border-2 border-red-500/50 rounded-full flex items-center justify-center">
             <div className="w-48 h-48 border border-red-500/30 rounded-full animate-ping absolute"></div>
             <Target size={40} className="text-red-500" />
          </div>
        </div>

        <div className="relative z-10 text-center max-w-4xl px-6">
          <h2 className="text-cyan-500 font-bold tracking-[0.2em] mb-4 text-sm md:text-base uppercase flex items-center justify-center gap-2">
            <Shield size={18}/> Security & Tactical EO Solutions
          </h2>
          <h1 className="text-6xl md:text-8xl font-black text-white tracking-tighter mb-6 drop-shadow-lg">
            SARAS
          </h1>
          <p className="text-xl md:text-3xl text-slate-300 font-light tracking-wide mb-8">
            Smart Assault Rifle Augmentation System
          </p>
          <div className="w-24 h-1 bg-gradient-to-r from-orange-500 via-white to-green-500 mx-auto mb-8"></div>
          <p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto italic">
            Empowering the Indian Infantry for Multi-Domain Operations.
          </p>
          <div className="mt-12 inline-block px-6 py-2 border border-slate-600 rounded-full text-slate-400 font-mono text-sm uppercase tracking-widest bg-slate-800/50 backdrop-blur-sm">
            Designed for Atmanirbhar Bharat
          </div>
        </div>
      </section>

      {/* PAGE 2: OVERVIEW & CONFIGURATIONS */}
      <section className="w-full bg-slate-100 text-slate-900 py-20 px-6 md:px-12 lg:px-24">
        <div className="max-w-7xl mx-auto">
          
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 mb-20">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 text-slate-800 border-l-4 border-cyan-600 pl-4">The Future of Indian Infantry</h2>
              <p className="text-lg text-slate-600 mb-6 leading-relaxed">
                The <strong className="text-slate-900">Smart Assault Rifle Augmentation System (SARAS)</strong> is a unique computer platform for assault weapons designed for the future infantry soldier.
              </p>
              <p className="text-lg text-slate-600 leading-relaxed">
                SARAS provides a wide range of advanced capabilities for enhanced combat lethality, soldier survivability and improved situational awareness, connecting to various applications, reconnaissance networks and combat management systems.
              </p>

              <h3 className="text-2xl font-bold mt-12 mb-4 text-slate-800">Flexible Design & Configurations</h3>
              <p className="text-lg text-slate-600 mb-6">
                SARAS transforms any assault rifle into a smart weapon. Modified for existing equipment like the <span className="font-semibold text-slate-800">AK-203</span> or <span className="font-semibold text-slate-800">SIG 716</span>, it offers two distinct configurations:
              </p>
              <ul className="space-y-4">
                <li className="flex items-start bg-white p-4 rounded shadow-sm border border-slate-200">
                  <div className="bg-cyan-100 p-2 rounded mr-4"><Target className="text-cyan-700" size={24}/></div>
                  <div>
                    <h4 className="font-bold text-slate-800">SARAS Type 1</h4>
                    <p className="text-slate-600 text-sm">System includes a built-in weapon sight.</p>
                  </div>
                </li>
                <li className="flex items-start bg-white p-4 rounded shadow-sm border border-slate-200">
                  <div className="bg-cyan-100 p-2 rounded mr-4"><Eye className="text-cyan-700" size={24}/></div>
                  <div>
                    <h4 className="font-bold text-slate-800">SARAS Type 2</h4>
                    <p className="text-slate-600 text-sm">Enables seamless use of any existing weapon sight as needed.</p>
                  </div>
                </li>
              </ul>
            </div>

            {/* Interactive 3D Render of SARAS Module */}
            <SarasScope3D />
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
             {/* Graphic Simulation: Split Screen */}
             <div className="flex w-full h-[400px] rounded-xl overflow-hidden shadow-2xl border-4 border-slate-800">
                <div className="w-1/2 bg-slate-700 relative flex items-center justify-center p-6 text-center">
                   <div className="absolute inset-0 bg-black/40"></div>
                   <div className="relative z-10">
                     <Shield size={48} className="text-slate-400 mx-auto mb-2"/>
                     <p className="text-slate-200 font-bold text-sm">GHATAK PLATOON IN COVER</p>
                     <p className="text-slate-400 text-xs mt-2">URBAN CI OPERATION</p>
                   </div>
                </div>
                <div className="w-1/2 bg-cyan-900 relative flex items-center justify-center p-6 border-l-2 border-cyan-500">
                   <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-cyan-800 to-slate-900 opacity-80"></div>
                   <div className="relative z-10 text-center">
                     <Target size={48} className="text-cyan-400 mx-auto mb-2 animate-pulse"/>
                     <p className="text-cyan-200 font-bold text-sm font-mono">DIGITAL BARREL FEED</p>
                     <div className="flex justify-center space-x-2 mt-4">
                       <span className="w-2 h-2 bg-red-500 rounded-full animate-ping"></span>
                       <span className="text-red-400 text-xs font-mono">HOSTILE DETECTED</span>
                     </div>
                   </div>
                </div>
             </div>

             <div>
                <h2 className="text-3xl md:text-4xl font-bold mb-6 text-slate-800 border-l-4 border-cyan-600 pl-4">Shooting Out of Position</h2>
                <p className="text-lg text-slate-600 mb-6 leading-relaxed">
                  SARAS is designed to relay data through the weapon sight. The images from the optic system are sent directly to the eyepiece and displayed on a cutting-edge user interface with unique digital display technologies.
                </p>
                <p className="text-lg text-slate-600 font-medium bg-orange-50 border-l-4 border-orange-500 p-4 rounded-r">
                  Provides the soldier with new shooting options - such as shooting out of position or around corners. This is critical for urban warfare and trench defenses along the Line of Control (LoC).
                </p>
             </div>
          </div>

          <div className="mt-20">
             <h2 className="text-center text-3xl font-bold mb-12 text-slate-800">Unique Operational Capabilities</h2>
             <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
                {[
                  { icon: <Fingerprint />, title: "Automatic Target Recognition (ATR)" },
                  { icon: <Video />, title: "Video Motion Detection (VMD)" },
                  { icon: <Navigation />, title: "Smart Navigation" },
                  { icon: <Activity />, title: "Fire and Motion Detection" },
                  { icon: <Map />, title: "Range Estimation" },
                  { icon: <Crosshair />, title: "Ballistic Correction" },
                ].map((feature, idx) => (
                  <div key={idx} className="bg-white p-6 rounded-lg shadow-sm border border-slate-200 text-center hover:border-cyan-500 transition hover:-translate-y-1">
                     <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-cyan-50 text-cyan-600 mb-4">
                        {feature.icon}
                     </div>
                     <h4 className="font-bold text-slate-800">{feature.title}</h4>
                  </div>
                ))}
             </div>
          </div>

        </div>
      </section>

      {/* PAGE 3: TECHNOLOGY & SPECIFICATIONS */}
      <section className="w-full bg-slate-900 text-slate-100 py-20 px-6 md:px-12 lg:px-24 border-t border-slate-800 relative overflow-hidden">
        
        {/* Tricolor decorative background elements */}
        <div className="absolute top-0 right-0 w-64 h-64 bg-orange-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/4"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-green-500/5 rounded-full blur-3xl translate-y-1/4 -translate-x-1/4"></div>

        <div className="max-w-7xl mx-auto relative z-10">
          
          <div className="text-center max-w-3xl mx-auto mb-16">
             <Cpu size={48} className="text-cyan-500 mx-auto mb-6" />
             <h2 className="text-3xl md:text-5xl font-bold mb-6 text-white">Sophisticated Applications & Technologies</h2>
             <p className="text-slate-400 text-lg">
               SARAS supports the development of applications in an open architecture environment, enabling integration of additional assault weapon solutions incorporating advanced sensors, artificial intelligence (AI), and augmented reality (AR).
             </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-20">
            {/* Situational Awareness */}
            <div className="bg-slate-800/50 border border-slate-700 p-6 rounded-xl backdrop-blur-sm">
              <h3 className="text-cyan-400 font-bold text-xl mb-4 flex items-center"><Wifi className="mr-2" size={20}/> Situational Awareness</h3>
              <ul className="space-y-3 text-slate-300 text-sm">
                <li className="flex items-center"><ChevronRight size={16} className="text-cyan-600 mr-2"/> Friend or foe identification</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-cyan-600 mr-2"/> Connection to C2/CI systems</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-cyan-600 mr-2"/> Video anchoring of the scene</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-cyan-600 mr-2"/> MESH communication</li>
              </ul>
            </div>

            {/* Survivability */}
            <div className="bg-slate-800/50 border border-slate-700 p-6 rounded-xl backdrop-blur-sm">
              <h3 className="text-orange-400 font-bold text-xl mb-4 flex items-center"><Shield className="mr-2" size={20}/> Survivability</h3>
              <ul className="space-y-3 text-slate-300 text-sm">
                <li className="flex items-center"><ChevronRight size={16} className="text-orange-600 mr-2"/> Shooting from shelter</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-orange-600 mr-2"/> Identifying targets</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-orange-600 mr-2"/> Day and dusk vision</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-orange-600 mr-2"/> Night vision</li>
              </ul>
            </div>

            {/* Lethalness */}
            <div className="bg-slate-800/50 border border-slate-700 p-6 rounded-xl backdrop-blur-sm">
              <h3 className="text-red-400 font-bold text-xl mb-4 flex items-center"><Crosshair className="mr-2" size={20}/> Lethality</h3>
              <ul className="space-y-3 text-slate-300 text-sm">
                <li className="flex items-center"><ChevronRight size={16} className="text-red-600 mr-2"/> Auto passive range estimation</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-red-600 mr-2"/> Shot counter</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-red-600 mr-2"/> Control of weapon stoppage</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-red-600 mr-2"/> Fire control logic</li>
              </ul>
            </div>

            {/* Additional */}
            <div className="bg-slate-800/50 border border-slate-700 p-6 rounded-xl backdrop-blur-sm">
              <h3 className="text-green-400 font-bold text-xl mb-4 flex items-center"><Zap className="mr-2" size={20}/> Additional Capabilities</h3>
              <ul className="space-y-3 text-slate-300 text-sm">
                <li className="flex items-center"><ChevronRight size={16} className="text-green-600 mr-2"/> [REC] Secure Recording</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-green-600 mr-2"/> GPS & Compass (High-Alt)</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-green-600 mr-2"/> Paramedic Assist</li>
                <li className="flex items-center"><ChevronRight size={16} className="text-green-600 mr-2"/> Built-in Energy Strap</li>
              </ul>
            </div>
          </div>

          {/* Technical Specifications Table */}
          <div className="bg-slate-800 rounded-xl overflow-hidden border border-slate-700 shadow-2xl">
            <div className="bg-slate-900 px-6 py-4 border-b border-slate-700 flex items-center justify-between">
              <h3 className="text-xl font-bold text-white">Technical Specifications</h3>
              <Battery className="text-cyan-500" />
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-left text-sm">
                <thead className="bg-slate-800/50 text-slate-400 uppercase text-xs">
                  <tr>
                    <th className="px-6 py-4 font-semibold">Feature</th>
                    <th className="px-6 py-4 font-semibold border-l border-slate-700">17µ SARAS</th>
                    <th className="px-6 py-4 font-semibold border-l border-slate-700 text-cyan-400">12µ SARAS (Advanced)</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-700/50">
                  <tr className="hover:bg-slate-700/30 transition">
                    <td className="px-6 py-4 font-medium text-slate-300">Thermal Sensor</td>
                    <td className="px-6 py-4 border-l border-slate-700">Uncooled 640x480 17μ</td>
                    <td className="px-6 py-4 border-l border-slate-700 text-cyan-100">Uncooled 640x480 12μ</td>
                  </tr>
                  <tr className="hover:bg-slate-700/30 transition bg-slate-800/20">
                    <td className="px-6 py-4 font-medium text-slate-300">HFOV</td>
                    <td className="px-6 py-4 border-l border-slate-700">27°</td>
                    <td className="px-6 py-4 border-l border-slate-700 text-cyan-100">27°</td>
                  </tr>
                  <tr className="hover:bg-slate-700/30 transition">
                    <td className="px-6 py-4 font-medium text-slate-300">Detection (Human)</td>
                    <td className="px-6 py-4 border-l border-slate-700">580m</td>
                    <td className="px-6 py-4 border-l border-slate-700 text-cyan-100">580m</td>
                  </tr>
                  <tr className="hover:bg-slate-700/30 transition bg-slate-800/20">
                    <td className="px-6 py-4 font-medium text-slate-300">Recognition (Human)</td>
                    <td className="px-6 py-4 border-l border-slate-700">250m</td>
                    <td className="px-6 py-4 border-l border-slate-700 text-cyan-100">250m</td>
                  </tr>
                  <tr className="hover:bg-slate-700/30 transition">
                    <td className="px-6 py-4 font-medium text-slate-300">Identification (Human)</td>
                    <td className="px-6 py-4 border-l border-slate-700">120m</td>
                    <td className="px-6 py-4 border-l border-slate-700 text-cyan-100">120m</td>
                  </tr>
                  <tr className="hover:bg-slate-700/30 transition bg-slate-800/20">
                    <td className="px-6 py-4 font-medium text-slate-300">Display Type</td>
                    <td className="px-6 py-4 border-l border-slate-700">800x600 OLED</td>
                    <td className="px-6 py-4 border-l border-slate-700 text-cyan-100">800x600 OLED</td>
                  </tr>
                  <tr className="hover:bg-slate-700/30 transition">
                    <td className="px-6 py-4 font-medium text-slate-300">Total Weight (inc. batt)</td>
                    <td className="px-6 py-4 border-l border-slate-700">1000g</td>
                    <td className="px-6 py-4 border-l border-slate-700 text-cyan-400 font-bold">850g</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-black text-slate-500 py-8 text-center px-6">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between">
          <div className="flex items-center space-x-4 mb-4 md:mb-0">
             {/* Emblem Placeholders */}
             <div className="w-10 h-10 rounded-full border border-slate-600 flex items-center justify-center text-xs font-bold text-slate-400">
               IAF
             </div>
             <div className="w-10 h-10 rounded border border-slate-600 flex items-center justify-center text-xs font-bold text-slate-400">
               MII
             </div>
          </div>
          
          <div className="text-sm">
             <p>© 2026 Security & Tactical EO Solutions.</p>
             <p className="mt-1">Concept inspired by modern Tactical EO Solutions. Personalised for the Indian Army.</p>
          </div>
        </div>
        
        {/* Tricolor Bottom Border */}
        <div className="h-2 w-full mt-8 bg-gradient-to-r from-orange-500 via-white to-green-500"></div>
      </footer>
    </div>
  );
}