import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'
import { Menu } from 'lucide-react'

export function Technology() {
  const [activeTab, setActiveTab] = useState('Hardware')
  const navigate = useNavigate()

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Navigation */}
      <nav className="bg-white border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            {/* Logo */}
            <div className="flex items-center">
              <img 
                src="/assets/logo.png" 
                alt="EdgeLLM Logo" 
                className="h-16 w-16"
                onError={(e) => {
                  console.error('Logo failed to load')
                  e.currentTarget.style.display = 'none'
                }}
              />
            </div>

            {/* Navigation Links */}
            <div className="hidden md:flex items-center space-x-8">
              <button onClick={() => navigate('/')} className="text-gray-700 hover:text-purple-600 font-medium">
                Home
              </button>
              <span className="text-white bg-purple-600 px-4 py-2 rounded-md font-medium">
                Technology
              </span>
              <button 
                onClick={() => navigate('/usecases')} 
                className="text-gray-700 hover:text-purple-600 font-medium transition-colors"
              >
                Use Cases
              </button>
              <Button 
                variant="outline" 
                onClick={() => navigate('/playground')}
                className="border-purple-600 text-purple-600 hover:bg-purple-50"
              >
                My device
              </Button>
            </div>

            {/* Mobile menu button */}
            <div className="md:hidden">
              <Button variant="ghost" size="sm">
                <Menu className="h-5 w-5" />
              </Button>
            </div>
          </div>
        </div>
      </nav>

       {/* Header Section */}
       <div className="py-24 px-4 sm:px-6 lg:px-8">
         <div className="max-w-4xl mx-auto text-center">
           {/* Title */}
           <h1 className="text-4xl md:text-5xl font-bold text-black mb-6">
             Our Technology
           </h1>
          <p className="text-xl text-purple-700 font-semibold max-w-2xl mx-auto mb-8">
            Low-cost FPGA-based design, optimized for Large Language Models on-device.
          </p>

          {/* Tabs */}
          <div className="flex justify-center mb-12">
            <div className="bg-white rounded-lg p-1 shadow-sm">
              {['Hardware', 'Software'].map((tab) => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  className={`px-6 py-2 rounded-md text-sm font-medium transition-all ${
                    activeTab === tab
                      ? 'bg-purple-600 text-white'
                      : 'text-gray-700 hover:text-purple-600'
                  }`}
                >
                  {tab}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Tab Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        {activeTab === 'Hardware' && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
            {/* Hardware Text Content */}
            <div>
              <h2 className="text-3xl font-semibold text-purple-600 mb-6">
                Hardware Description
              </h2>
              <p className="text-lg text-gray-800 leading-relaxed">
                Huoxu is an ultra–low-budget single-board computer designed specifically for large language model (LLM) deployment. 
                Despite its compact form factor and low power consumption, we provide:
              </p>
              <ul className="mt-6 space-y-3 text-lg text-gray-800">
                <li className="flex items-start">
                  <span className="text-purple-600 mr-2">•</span>
                  Accelerated inference performance — delivering up to 15 tokens per second on a 30B model, thanks to its optimized FPGA-based AI engine.
                </li>
                <li className="flex items-start">
                  <span className="text-purple-600 mr-2">•</span>
                  High memory capacity — up to 40GB RAM, enabling hosting of LLMs up to ≥30B parameters.
                </li>
                <li className="flex items-start">
                  <span className="text-purple-600 mr-2">•</span>
                  Cost efficiency — making advanced AI workloads accessible at low cost.
                </li>
              </ul>
            </div>

            {/* Hardware Specifications Card */}
            <Card className="bg-gradient-to-br from-purple-50 to-blue-50 border-0 shadow-lg">
              <CardContent className="p-8 space-y-6">
                <div className="flex flex-col space-y-4">
                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">Chip</span>
                    <span className="text-base text-gray-700">AMD Zynq UltraScale+ XCZU3EG</span>
                  </div>
                  
                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">Processor</span>
                    <div className="text-base text-gray-700 text-right">
                      <div>Quad-core 64-bit Arm Cortex-A53 CPU</div>
                      <div>Dual-core 64-bit Arm Cortex-R5 CPU</div>
                      <div>ARM Mali-400 GPU</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">FPGA Fabric</span>
                    <span className="text-base text-gray-700">70K LUT, 360 DSP slices</span>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">Memory</span>
                    <div className="text-base text-gray-700 text-right">
                      <div>8 GB 64-bit DDR4 (2400 Mbps) on CPU side</div>
                      <div>8 GB / 16 GB / 32 GB DDR4 (2133 Mbps) on FPGA side (SODIMM)</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">Storage</span>
                    <div className="text-base text-gray-700 text-right">
                      <div>256 GB PCIe 2.0 x1 NVMe SSD</div>
                      <div>MicroSD card slot</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">I/O</span>
                    <div className="text-base text-gray-700 text-right">
                      <div>USB 2.0 / 3.0 via Type-C</div>
                      <div>Mini DisplayPort</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )}

        {activeTab === 'Software' && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
            {/* Software Text Content */}
            <div>
              <h2 className="text-3xl font-semibold text-purple-600 mb-6">
                Software Stack
              </h2>
              <p className="text-lg text-gray-800 leading-relaxed">
                Our comprehensive software ecosystem is designed to maximize the potential of Huoxu hardware, 
                providing seamless LLM deployment and management capabilities:
              </p>
              <ul className="mt-6 space-y-3 text-lg text-gray-800">
                <li className="flex items-start">
                  <span className="text-purple-600 mr-2">•</span>
                  Custom FPGA-optimized inference engine with quantization support for efficient model deployment.
                </li>
                <li className="flex items-start">
                  <span className="text-purple-600 mr-2">•</span>
                  Edge LLM Platform — intuitive web interface for model management, chat, and system monitoring.
                </li>
                <li className="flex items-start">
                  <span className="text-purple-600 mr-2">•</span>
                  Support for popular model formats (GGUF, ONNX) and frameworks (Transformers, LLaMA.cpp).
                </li>
                <li className="flex items-start">
                  <span className="text-purple-600 mr-2">•</span>
                  REST API for seamless integration with existing applications and services.
                </li>
              </ul>
            </div>

            {/* Software Features Card */}
            <Card className="bg-gradient-to-br from-green-50 to-blue-50 border-0 shadow-lg">
              <CardContent className="p-8 space-y-6">
                <div className="flex flex-col space-y-4">
                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">OS Support</span>
                    <div className="text-base text-gray-700 text-right">
                      <div>Ubuntu 22.04 LTS</div>
                      <div>Custom Linux Distribution</div>
                    </div>
                  </div>
                  
                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">Model Formats</span>
                    <div className="text-base text-gray-700 text-right">
                      <div>GGUF (LLaMA.cpp)</div>
                      <div>ONNX</div>
                      <div>PyTorch</div>
                      <div>Transformers</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">Inference Engine</span>
                    <div className="text-base text-gray-700 text-right">
                      <div>Custom FPGA Accelerator</div>
                      <div>LLaMA.cpp Integration</div>
                      <div>Quantization Support</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">Management Interface</span>
                    <div className="text-base text-gray-700 text-right">
                      <div>Web-based Dashboard</div>
                      <div>REST API</div>
                      <div>CLI Tools</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">Development Tools</span>
                    <div className="text-base text-gray-700 text-right">
                      <div>Python SDK</div>
                      <div>Model Optimization Tools</div>
                      <div>Performance Profiler</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-bold text-gray-900">Security</span>
                    <div className="text-base text-gray-700 text-right">
                      <div>Secure Boot</div>
                      <div>Model Encryption</div>
                      <div>Access Control</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )}
      </div>

      {/* Why us? Comparison Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <h2 className="text-3xl font-semibold text-purple-600 mb-8">Why us?</h2>
        
        {/* Comparison Table */}
        <div className="bg-white rounded-3xl shadow-xl overflow-hidden">
          {/* Table Header */}
          <div className="grid grid-cols-4 bg-gradient-to-r from-gray-50 to-gray-100">
            <div className="p-6"></div>
            <div className="p-6 text-center">
              <Badge className="bg-purple-600 text-white font-bold px-4 py-2">Ours</Badge>
            </div>
            <div className="p-6 text-center">
              <span className="font-bold text-gray-800">Raspberry Pi 5</span>
            </div>
            <div className="p-6 text-center">
              <span className="font-bold text-gray-800">Jetson Orin Nano</span>
            </div>
          </div>

          {/* Table Rows */}
          {[
            { label: 'Price', ours: '$199', pi: '$120', jetson: '$249' },
            { label: 'RAM', ours: '24GB/40GB', pi: '16GB', jetson: '8GB' },
            { label: 'CPU', ours: 'Cortex-A53', pi: 'Cortex-A72', jetson: 'Cortex-A78' },
            { label: 'AI Engine', ours: 'Optimized Accelerator on FPGA', pi: 'Neon SIMD Instructions', jetson: 'Cuda/Tensor Core' },
            { label: 'Power', ours: '<10W', pi: '5-12 W', jetson: '7-25' },
            { label: 'LLM decode Performance', ours: '15 tokens/s', pi: '<5 tokens/s', jetson: '15 tokens/s' },
          ].map((row, index) => (
            <div key={row.label} className={`grid grid-cols-4 ${index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}`}>
              <div className="p-4 font-medium text-gray-900 border-r border-gray-200">
                {row.label}
              </div>
              <div className="p-4 text-center text-white bg-purple-600 font-medium">
                {row.ours}
              </div>
              <div className="p-4 text-center text-purple-600 font-medium border-r border-gray-200">
                {row.pi}
              </div>
              <div className="p-4 text-center text-purple-600 font-medium">
                {row.jetson}
              </div>
            </div>
          ))}
        </div>

        <div className="text-center mt-8">
          <Button className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3">
            View our vision
          </Button>
        </div>
      </div>

      {/* Device Layout Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <h2 className="text-3xl font-semibold text-purple-600 mb-8">The device layout plan</h2>
        
        <div className="bg-white rounded-2xl shadow-xl p-8 text-center">
          <div className="relative max-w-4xl mx-auto">
             <img 
               src="/assets/chips.png" 
               alt="Device Layout Plan" 
               className="w-full h-auto rounded-lg shadow-lg"
               onError={(e) => {
                 console.error('Chips image failed to load')
                 e.currentTarget.style.display = 'none'
               }}
             />
          </div>
          
          <div className="flex justify-center space-x-4 mt-8">
            <Button className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2">
              Get your device
            </Button>
            <Button variant="outline" className="border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-2">
              View use cases
            </Button>
          </div>
        </div>

        <p className="text-center text-gray-600 mt-6">
          Need help? Contact us to get customized device and services
        </p>
      </div>
    </div>
  )
}