frontend/src/pages/Technology.tsx

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-20 w-20"
                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("/mydevice")}
                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">
                EdgeMate 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 platform enables non-experts to
                personalize, test, and deploy LLM agents to edge devices with an
                intuitive web-based interface:
              </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>
                  React 18 + TypeScript frontend with shadcn/ui design system
                  for modern, accessible components.
                </li>
                <li className="flex items-start">
                  <span className="text-purple-600 mr-2">•</span>
                  FastAPI + Python 3.11+ backend with hybrid inference routing
                  between local FPGA and cloud APIs.
                </li>
                <li className="flex items-start">
                  <span className="text-purple-600 mr-2">•</span>
                  Integrated RAG system using LangChain, FAISS, and HuggingFace
                  Transformers for document processing.
                </li>
                <li className="flex items-start">
                  <span className="text-purple-600 mr-2">•</span>
                  Docker containerization with deployment on Hugging Face Spaces
                  for accessible demonstrations.
                </li>
              </ul>
            </div>

            {/* Software Features 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-semibold text-gray-900">
                      Frontend Stack
                    </span>
                    <div className="text-base text-gray-700 text-right">
                      <div>React 18 + TypeScript</div>
                      <div>shadcn/ui + Radix UI</div>
                      <div>Tailwind CSS + Vite</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-semibold text-gray-900">
                      Backend Stack
                    </span>
                    <div className="text-base text-gray-700 text-right">
                      <div>FastAPI + Python 3.11+</div>
                      <div>HuggingFace Transformers</div>
                      <div>OpenAI-compatible APIs</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-semibold text-gray-900">
                      AI/ML Components
                    </span>
                    <div className="text-base text-gray-700 text-right">
                      <div>LangChain + FAISS</div>
                      <div>sentence-transformers</div>
                      <div>Quantization Support</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-semibold text-gray-900">
                      Deployment
                    </span>
                    <div className="text-base text-gray-700 text-right">
                      <div>Docker Containerization</div>
                      <div>Hugging Face Spaces</div>
                      <div>REST API Integration</div>
                    </div>
                  </div>

                  <div className="flex justify-between items-start">
                    <span className="text-lg font-semibold 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-semibold 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 font-medium"
                style={{ backgroundColor: "#F0EEF5", color: "#6750A4" }}
              >
                {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
            onClick={() => navigate("/usecases")}
            className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3"
          >
            View use cases
          </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>
  );
}