import React, { useState } from "react";
import { TerminalBlock } from "../components/TerminalBlock";
import {
  ArrowRight,
  Activity,
  Search,
  Database,
  ChevronRight,
  GitCommit,
  BarChart,
  Server,
  Shield,
  Box,
  Cloud,
  Layers,
  Cpu,
  Lock,
  X,
  Zap,
  Globe,
} from "lucide-react";
import { Link } from "react-router-dom";
import { useLanguage } from "../App";

// Type definition for Projects
interface ProjectData {
  id: string;
  category: string;
  title: string;
  shortDesc: string;
  fullDesc: string;
  metrics: { label: string; value: string }[];
  stack: string[];
  architecture: string;
  challenge: string;
}

export const Home: React.FC = () => {
  const { language } = useLanguage();
  const [selectedProject, setSelectedProject] = useState<ProjectData | null>(
    null,
  );

  const content = {
    en: {
      new_research: "New Research: LoRA Without Regret",
      hero_title: "Engineering Intelligence.",
      hero_subtitle:
        "We bridge the gap between research papers and production environments. Specialized consulting for LLM infrastructure, evaluation pipelines, and custom model adaptation.",
      btn_services: "View Services",
      btn_research: "Read Research",
      latest_thinking: "Latest Thinking",
      view_archive: "View Archive",
      lora_desc:
        "Fine-tuning large models is expensive. Low-rank adaptation (LoRA) promises efficiency, but does it sacrifice performance? Our deep dive into rank scaling and matrix initialization.",
      technical_deep_dive: "Technical Deep Dive",
      expertise_title: "Our Expertise",
      process_title: "The Pipeline",
      process_desc:
        "We don't just write code; we engineer systems. Our engagement process is designed for transparency and velocity.",
      projects_title: "Selected Deployments",
      projects_desc:
        "We don't sell hours. We sell shipped, production-grade systems. Click on a project to view the architecture.",
      trusted_stack: "Built with Production Standards",
      modal_stack: "Tech Stack",
      modal_impact: "Business Impact",
      modal_arch: "Architecture Highlight",
      modal_challenge: "The Challenge",
      close: "Close",
      services: {
        mvp: {
          title: "MVP & Prototyping",
          desc: "From concept to deployed model in weeks. We build robust POCs using the latest foundation models (Gemini, Claude, OpenAI) to validate business value before heavy investment.",
        },
        audit: {
          title: "System Audit",
          desc: "Why is your RAG pipeline hallucinating? We perform deep architectural audits, evaluating retrieval quality, prompt efficacy, and security vulnerabilities.",
        },
        integration: {
          title: "Custom Integration",
          desc: "Fine-tuning and integrating open-weights models into your secure infrastructure. We handle the MLOps so you own your weights and your data.",
        },
      },
      learn_more: "Learn more",
      process_steps: [
        {
          step: "01",
          title: "Discovery & Audit",
          desc: "We define the metric that matters. Is it latency? Accuracy? Cost?",
        },
        {
          step: "02",
          title: "Prototyping",
          desc: "Rapid iteration using state-of-the-art models to validate feasibility.",
        },
        {
          step: "03",
          title: "Evaluation (Evals)",
          desc: "We build a custom test suite (Pass@k, RAGAS) before we ship.",
        },
        {
          step: "04",
          title: "Production",
          desc: "Containerization, CI/CD pipelines, and observability setup.",
        },
      ],
      stack: {
        infra: "Infrastructure",
        orchestration: "Orchestration",
        inference: "Inference & Serving",
        data: "Data & Vector Ops",
      },
      projects: [
        {
          id: "compliance",
          category: "FinTech / Legal",
          title: "ComplianceGuard AI",
          shortDesc:
            "Automated regulatory compliance checking for a Tier-1 bank. Reduced manual review time by 85% using a secure RAG pipeline.",
          fullDesc:
            "We architected a secure, on-premise Retrieval Augmented Generation (RAG) system that ingests thousands of changing regulatory documents (PDFs) and cross-references them with loan applications in real-time.",
          challenge:
            "The client was spending 2000+ man-hours monthly manually checking loan applications against constantly updating Bank of Thailand regulations. Privacy requirements prevented using public APIs.",
          architecture:
            'Hybrid-cloud setup. Sensitive data stays on-prem (OpenShift) using a fine-tuned Llama-3-70B for inference. Regulatory documents are indexed in Weaviate. LangChain orchestrates the "Reasoning" step to cite specific regulatory clauses.',
          metrics: [
            { label: "Review Time", value: "-85%" },
            { label: "False Positives", value: "< 2%" },
            { label: "Cost Saving", value: "$45k/mo" },
          ],
          stack: [
            "Llama 3 70B",
            "Weaviate",
            "OpenShift",
            "LangChain",
            "Python",
          ],
        },
        {
          id: "retail",
          category: "E-Commerce",
          title: "OmniFlow Agentic Router",
          shortDesc:
            "High-throughput customer support agent handling 50k+ daily tickets. Deflects 92% of queries with sub-2s latency.",
          fullDesc:
            "A sophisticated multi-agent system that acts as the first line of defense for a major e-commerce platform. It uses tool-calling to actually perform actions (check status, process refund) rather than just chatting.",
          challenge:
            'During "11.11" sales events, support volume spikes 10x. Traditional chatbots were too rigid, and human agents were overwhelmed. The system needed to be autonomous but safe.',
          architecture:
            'We built a Router Agent using GPT-4o-mini for speed. It classifies intent and routes to specialized Sub-Agents (Refund Agent, Logistics Agent). We implemented a "Human-in-the-loop" handover protocol for low-confidence scores.',
          metrics: [
            { label: "Deflection Rate", value: "92%" },
            { label: "Avg Response", value: "1.2s" },
            { label: "CSAT Score", value: "4.8/5" },
          ],
          stack: ["GPT-4o", "Redis", "FastAPI", "Kubernetes", "Postgres"],
        },
      ],
    },
    th: {
      new_research: "งานวิจัยใหม่: LoRA โดยไม่เสียใจ",
      hero_title: "วิศวกรรมแห่งปัญญาประดิษฐ์",
      hero_subtitle:
        "เราเชื่อมช่องว่างระหว่างงานวิจัยทางวิชาการและการใช้งานจริง เชี่ยวชาญด้านโครงสร้างพื้นฐาน LLM, การประเมินผล และการปรับแต่งโมเดลตามความต้องการ",
      btn_services: "ดูบริการของเรา",
      btn_research: "อ่านงานวิจัย",
      latest_thinking: "แนวคิดล่าสุด",
      view_archive: "ดูบทความทั้งหมด",
      lora_desc:
        "การ Fine-tune โมเดลขนาดใหญ่มีค่าใช้จ่ายสูง LoRA สัญญาว่าจะเพิ่มประสิทธิภาพ แต่จะลดคุณภาพหรือไม่? เจาะลึกเรื่อง Rank scaling และการเริ่มต้น Matrix",
      technical_deep_dive: "เจาะลึกทางเทคนิค",
      expertise_title: "ความเชี่ยวชาญของเรา",
      process_title: "กระบวนการทำงาน",
      process_desc:
        "เราไม่ได้แค่เขียนโค้ด แต่เราออกแบบระบบ กระบวนการของเราเน้นความโปร่งใสและความรวดเร็ว",
      projects_title: "ผลงานที่ผ่านมา",
      projects_desc:
        "เราไม่ได้ขายชั่วโมงการทำงาน แต่เราส่งมอบระบบที่ใช้งานได้จริง คลิกที่โปรเจกต์เพื่อดูสถาปัตยกรรม",
      trusted_stack: "สร้างด้วยมาตรฐานระดับ Production",
      modal_stack: "Tech Stack",
      modal_impact: "ผลลัพธ์ทางธุรกิจ",
      modal_arch: "จุดเด่นของสถาปัตยกรรม",
      modal_challenge: "ความท้าทาย",
      close: "ปิด",
      services: {
        mvp: {
          title: "MVP และต้นแบบ",
          desc: "จากแนวคิดสู่โมเดลที่ใช้งานได้จริงในไม่กี่สัปดาห์ เราสร้าง POC ที่แข็งแกร่งด้วยโมเดลล่าสุด (Gemini, Claude, OpenAI) เพื่อตรวจสอบความคุ้มค่าก่อนการลงทุนจริง",
        },
        audit: {
          title: "ตรวจสอบระบบ",
          desc: "ทำไมระบบ RAG ของคุณถึงให้ข้อมูลผิด? เราตรวจสอบสถาปัตยกรรมอย่างละเอียด ประเมินคุณภาพการสืบค้น และช่องโหว่ด้านความปลอดภัย",
        },
        integration: {
          title: "การรวมระบบตามสั่ง",
          desc: "ปรับแต่ง (Fine-tune) และรวมโมเดล Open-weights เข้ากับโครงสร้างพื้นฐานที่ปลอดภัยของคุณ เราดูแล MLOps เพื่อให้คุณเป็นเจ้าของข้อมูลและโมเดลอย่างแท้จริง",
        },
      },
      learn_more: "เรียนรู้เพิ่มเติม",
      process_steps: [
        {
          step: "01",
          title: "ค้นหา & ตรวจสอบ",
          desc: "เรากำหนดตัวชี้วัดที่สำคัญที่สุด ไม่ว่าจะเป็น ความหน่วง ความแม่นยำ หรือต้นทุน",
        },
        {
          step: "02",
          title: "สร้างต้นแบบ",
          desc: "ทำซ้ำอย่างรวดเร็วโดยใช้โมเดลล่าสุดเพื่อตรวจสอบความเป็นไปได้",
        },
        {
          step: "03",
          title: "การประเมินผล (Evals)",
          desc: "เราสร้างชุดทดสอบเฉพาะ (Pass@k, RAGAS) ก่อนส่งมอบงาน",
        },
        {
          step: "04",
          title: "Production",
          desc: "การทำ Containerization, ระบบ CI/CD และการติดตั้งระบบสังเกตการณ์",
        },
      ],
      stack: {
        infra: "Infrastructure",
        orchestration: "Orchestration",
        inference: "Inference & Serving",
        data: "Data & Vector Ops",
      },
      projects: [
        {
          id: "compliance",
          category: "FinTech / Legal",
          title: "ComplianceGuard AI",
          shortDesc:
            "ระบบตรวจสอบการปฏิบัติตามกฎระเบียบอัตโนมัติสำหรับธนาคารชั้นนำ ลดเวลาการตรวจสอบด้วยคนลง 85% โดยใช้ RAG pipeline ที่ปลอดภัย",
          fullDesc:
            "เราออกแบบระบบ Retrieval Augmented Generation (RAG) ภายในองค์กรที่ปลอดภัย ซึ่งนำเข้าเอกสารกฎระเบียบหลายพันฉบับที่เปลี่ยนแปลงตลอดเวลา และตรวจสอบเทียบกับคำขอสินเชื่อแบบเรียลไทม์",
          challenge:
            "ลูกค้าใช้เวลาคนทำงานกว่า 2,000 ชั่วโมงต่อเดือนในการตรวจสอบคำขอสินเชื่อด้วยตนเองเทียบกับกฎระเบียบธนาคารแห่งประเทศไทย ข้อกำหนดด้านความเป็นส่วนตัวไม่อนุญาตให้ใช้ Public API",
          architecture:
            'ระบบ Hybrid-cloud ข้อมูลสำคัญอยู่ภายในองค์กร (OpenShift) โดยใช้ Llama-3-70B ที่ปรับแต่งแล้ว เอกสารกฎระเบียบถูกจัดทำดัชนีใน Weaviate LangChain ควบคุมขั้นตอน "การให้เหตุผล" เพื่ออ้างอิงข้อกฎหมายเฉพาะ',
          metrics: [
            { label: "เวลาตรวจสอบ", value: "-85%" },
            { label: "False Positives", value: "< 2%" },
            { label: "ประหยัดต้นทุน", value: "$45k/เดือน" },
          ],
          stack: [
            "Llama 3 70B",
            "Weaviate",
            "OpenShift",
            "LangChain",
            "Python",
          ],
        },
        {
          id: "retail",
          category: "E-Commerce",
          title: "OmniFlow Agentic Router",
          shortDesc:
            "ระบบตอบรับลูกค้าความเร็วสูง รองรับ 50,000+ ตั๋วต่อวัน แก้ไขปัญหาอัตโนมัติได้ 92% ด้วยความเร็วต่ำกว่า 2 วินาที",
          fullDesc:
            "ระบบ Multi-agent อัจฉริยะที่ทำหน้าที่เป็นด่านหน้าสำหรับแพลตฟอร์มอีคอมเมิร์ซขนาดใหญ่ ใช้การเรียกใช้เครื่องมือ (Tool-calling) เพื่อดำเนินการจริง (ตรวจสอบสถานะ, คืนเงิน) แทนที่จะเป็นแค่การแชท",
          challenge:
            'ในช่วงเทศกาล "11.11" ปริมาณการติดต่อเพิ่มขึ้น 10 เท่า Chatbot แบบเดิมแข็งทื่อเกินไป และพนักงานรับมือไม่ไหว ระบบต้องทำงานอัตโนมัติแต่ปลอดภัย',
          architecture:
            'เราสร้าง Router Agent โดยใช้ GPT-4o-mini เพื่อความเร็ว โดยจำแนกเจตนาและส่งต่อไปยัง Agent เฉพาะทาง (Refund Agent, Logistics Agent) เราใช้โปรโตคอล "Human-in-the-loop" สำหรับเคสที่มีความมั่นใจต่ำ',
          metrics: [
            { label: "อัตราการตอบกลับ", value: "92%" },
            { label: "ความเร็วเฉลี่ย", value: "1.2s" },
            { label: "คะแนน CSAT", value: "4.8/5" },
          ],
          stack: ["GPT-4o", "Redis", "FastAPI", "Kubernetes", "Postgres"],
        },
      ],
    },
  };

  const t = content[language];

  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="pt-24 pb-24 bg-paper border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
              <Link
                to="/research/lora-without-regret"
                className="inline-flex items-center space-x-2 mb-8 bg-blue-50 border border-blue-100 rounded-full px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-accent hover:bg-blue-100 transition-colors"
              >
                <span className="w-2 h-2 rounded-full bg-accent animate-pulse"></span>
                <span>{t.new_research}</span>
              </Link>
              <h1 className="font-serif text-5xl md:text-6xl text-ink leading-tight mb-8">
                {t.hero_title}
              </h1>
              <p className="font-serif text-lg text-subtle mb-10 max-w-lg leading-relaxed">
                {t.hero_subtitle}
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Link
                  to="/services"
                  className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium text-white bg-ink hover:bg-gray-800 transition-all shadow-sm rounded-sm"
                >
                  {t.btn_services}
                </Link>
                <Link
                  to="/research"
                  className="inline-flex items-center justify-center px-6 py-3 border border-gray-200 text-base font-medium text-ink bg-white hover:bg-gray-50 transition-all rounded-sm"
                >
                  {t.btn_research}
                </Link>
              </div>
            </div>

            {/* Technical Trust Signal with Typing Effect */}
            <div className="lg:pl-12">
              <TerminalBlock
                title="audit_pipeline.py"
                typingEffect={true}
                lines={[
                  "$ python run_evals.py --model=gemini-2.5-pro",
                  "# Loading dataset: humaneval_v2...",
                  "# Initializing sandbox environment...",
                  "> Running 164 test cases...",
                  "> Pass@1: 92.4% [OK]",
                  "> Latency (p99): 450ms [WARN]",
                  "# Optimization suggestion:",
                  "# Switch to batch inference or semantic caching.",
                  "$ _",
                ]}
                className="transform lg:rotate-1 hover:rotate-0 transition-transform duration-500"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Trusted Stack / Logos (Revamped) */}
      <section className="py-20 bg-gray-50 border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {/* Infrastructure */}
            <div className="flex flex-col items-center text-center">
              <div className="mb-4 p-3 bg-white rounded-full shadow-sm border border-gray-100">
                <Cloud className="text-subtle" size={24} />
              </div>
              <h4 className="font-sans text-xs font-bold uppercase tracking-widest text-ink mb-2">
                {t.stack.infra}
              </h4>
              <p className="font-mono text-xs text-subtle">
                AWS, GCP, Azure, Terraform
              </p>
            </div>

            {/* Orchestration */}
            <div className="flex flex-col items-center text-center">
              <div className="mb-4 p-3 bg-white rounded-full shadow-sm border border-gray-100">
                <Box className="text-subtle" size={24} />
              </div>
              <h4 className="font-sans text-xs font-bold uppercase tracking-widest text-ink mb-2">
                {t.stack.orchestration}
              </h4>
              <p className="font-mono text-xs text-subtle">
                Kubernetes, Docker, Ray, Airflow
              </p>
            </div>

            {/* Inference */}
            <div className="flex flex-col items-center text-center">
              <div className="mb-4 p-3 bg-white rounded-full shadow-sm border border-gray-100">
                <Cpu className="text-subtle" size={24} />
              </div>
              <h4 className="font-sans text-xs font-bold uppercase tracking-widest text-ink mb-2">
                {t.stack.inference}
              </h4>
              <p className="font-mono text-xs text-subtle">
                vLLM, TorchServe, ONNX Runtime
              </p>
            </div>

            {/* Data */}
            <div className="flex flex-col items-center text-center">
              <div className="mb-4 p-3 bg-white rounded-full shadow-sm border border-gray-100">
                <Layers className="text-subtle" size={24} />
              </div>
              <h4 className="font-sans text-xs font-bold uppercase tracking-widest text-ink mb-2">
                {t.stack.data}
              </h4>
              <p className="font-mono text-xs text-subtle">
                Pinecone, Weaviate, Postgres, Redis
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Featured Research Snippet */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-baseline justify-between mb-12">
            <h2 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle">
              {t.latest_thinking}
            </h2>
            <Link
              to="/research"
              className="group flex items-center text-sm font-serif text-ink hover:text-accent"
            >
              {t.view_archive}{" "}
              <ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </Link>
          </div>

          <Link to="/research/lora-without-regret" className="block group">
            <article className="grid grid-cols-1 md:grid-cols-2 gap-12 border-t border-gray-100 pt-12">
              <div>
                <h3 className="font-serif text-3xl text-ink mb-4 group-hover:text-gray-600 transition-colors">
                  LoRA Without Regret
                </h3>
                <p className="font-serif text-subtle text-lg leading-relaxed mb-6">
                  {t.lora_desc}
                </p>
                <span className="text-xs font-sans font-bold uppercase text-accent">
                  {t.technical_deep_dive}
                </span>
              </div>
              <div className="bg-gray-50 p-8 flex items-center justify-center border border-gray-100">
                {/* Mini visualization for the teaser */}
                <div className="grid grid-cols-12 gap-1 w-full max-w-xs opacity-50 group-hover:opacity-80 transition-opacity">
                  {[...Array(48)].map((_, i) => (
                    <div
                      key={i}
                      className="aspect-square bg-blue-500"
                      style={{ opacity: Math.random() }}
                    />
                  ))}
                </div>
              </div>
            </article>
          </Link>
        </div>
      </section>

      {/* Services Preview */}
      <section className="py-24 bg-paper border-t border-gray-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-16">
            {t.expertise_title}
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Service 1 */}
            <div className="group p-8 border border-gray-200 bg-white hover:border-gray-400 transition-colors cursor-pointer relative overflow-hidden">
              <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <Activity size={64} />
              </div>
              <h3 className="font-serif text-xl text-ink mb-4 font-bold">
                {t.services.mvp.title}
              </h3>
              <p className="font-serif text-sm text-subtle leading-relaxed mb-8">
                {t.services.mvp.desc}
              </p>
              <Link
                to="/services"
                className="inline-flex items-center text-xs font-bold uppercase tracking-wider text-ink group-hover:text-accent"
              >
                {t.learn_more} <ChevronRight size={16} className="ml-1" />
              </Link>
            </div>

            {/* Service 2 */}
            <div className="group p-8 border border-gray-200 bg-white hover:border-gray-400 transition-colors cursor-pointer relative overflow-hidden">
              <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <Search size={64} />
              </div>
              <h3 className="font-serif text-xl text-ink mb-4 font-bold">
                {t.services.audit.title}
              </h3>
              <p className="font-serif text-sm text-subtle leading-relaxed mb-8">
                {t.services.audit.desc}
              </p>
              <Link
                to="/services"
                className="inline-flex items-center text-xs font-bold uppercase tracking-wider text-ink group-hover:text-accent"
              >
                {t.learn_more} <ChevronRight size={16} className="ml-1" />
              </Link>
            </div>

            {/* Service 3 */}
            <div className="group p-8 border border-gray-200 bg-white hover:border-gray-400 transition-colors cursor-pointer relative overflow-hidden">
              <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <Database size={64} />
              </div>
              <h3 className="font-serif text-xl text-ink mb-4 font-bold">
                {t.services.integration.title}
              </h3>
              <p className="font-serif text-sm text-subtle leading-relaxed mb-8">
                {t.services.integration.desc}
              </p>
              <Link
                to="/services"
                className="inline-flex items-center text-xs font-bold uppercase tracking-wider text-ink group-hover:text-accent"
              >
                {t.learn_more} <ChevronRight size={16} className="ml-1" />
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Process Pipeline Section */}
      <section className="py-24 bg-[#1e1e1e] text-white overflow-hidden relative">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="mb-16 max-w-2xl">
            <h2 className="font-sans font-bold text-xs uppercase tracking-widest text-green-400 mb-4">
              {t.process_title}
            </h2>
            <p className="font-serif text-2xl text-gray-300">
              {t.process_desc}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {t.process_steps.map((step, idx) => (
              <div key={idx} className="relative group">
                <div className="w-12 h-12 rounded-full border border-gray-600 bg-gray-800 flex items-center justify-center font-mono text-sm font-bold mb-6 group-hover:border-green-400 group-hover:text-green-400 transition-colors">
                  {step.step}
                </div>
                <h3 className="font-bold text-lg mb-2">{step.title}</h3>
                <p className="text-gray-400 font-serif text-sm leading-relaxed">
                  {step.desc}
                </p>
                {/* Connecting Line */}
                {idx < 3 && (
                  <div className="hidden md:block absolute top-6 left-14 w-[calc(100%-3rem)] h-px bg-gray-800"></div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Featured Projects (Improved Enterprise) */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="mb-16 text-center max-w-3xl mx-auto">
            <h2 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-4">
              {t.projects_title}
            </h2>
            <p className="font-serif text-lg text-subtle">{t.projects_desc}</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            {t.projects.map((project) => (
              <div
                key={project.id}
                onClick={() => setSelectedProject(project)}
                className="border border-gray-200 rounded-sm hover:shadow-xl transition-all duration-300 p-8 bg-white flex flex-col cursor-pointer group hover:-translate-y-1"
              >
                <div className="mb-6 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div
                      className={`p-2 rounded-md ${project.id === "compliance" ? "bg-blue-50 text-accent" : "bg-purple-50 text-purple-600"}`}
                    >
                      {project.id === "compliance" ? (
                        <Lock size={24} />
                      ) : (
                        <Zap size={24} />
                      )}
                    </div>
                    <span className="font-mono text-xs text-subtle uppercase tracking-widest">
                      {project.category}
                    </span>
                  </div>
                  <div className="opacity-0 group-hover:opacity-100 transition-opacity text-subtle">
                    <ArrowRight size={20} />
                  </div>
                </div>

                <h3 className="font-serif font-bold text-2xl text-ink mb-4">
                  {project.title}
                </h3>
                <p className="text-subtle font-serif text-base leading-relaxed mb-8 flex-grow">
                  {project.shortDesc}
                </p>

                <div className="grid grid-cols-3 gap-4 border-t border-gray-100 pt-6">
                  {project.metrics.map((metric, idx) => (
                    <div key={idx}>
                      <div className="font-mono text-lg font-bold text-ink">
                        {metric.value}
                      </div>
                      <div className="text-[10px] uppercase text-gray-400 font-sans font-bold">
                        {metric.label}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Project Modal */}
      {selectedProject && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 md:p-8">
          <div
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            onClick={() => setSelectedProject(null)}
          ></div>
          <div className="bg-white w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-lg shadow-2xl relative z-10 flex flex-col md:flex-row animate-in fade-in zoom-in duration-200">
            {/* Modal Left: Overview */}
            <div className="p-8 md:p-10 md:w-2/3">
              <h2 className="font-serif text-3xl font-bold text-ink mb-2">
                {selectedProject.title}
              </h2>
              <span className="font-mono text-xs uppercase tracking-widest text-accent mb-6 block">
                {selectedProject.category}
              </span>

              <div className="space-y-8">
                <div>
                  <h4 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-2">
                    {t.modal_challenge}
                  </h4>
                  <p className="font-serif text-subtle leading-relaxed">
                    {selectedProject.challenge}
                  </p>
                </div>
                <div>
                  <h4 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-2">
                    {t.modal_arch}
                  </h4>
                  <p className="font-serif text-ink leading-relaxed">
                    {selectedProject.architecture}
                  </p>
                </div>
                <div>
                  <h4 className="font-sans font-bold text-xs uppercase tracking-widest text-subtle mb-2">
                    {t.modal_impact}
                  </h4>
                  <div className="grid grid-cols-3 gap-4 bg-gray-50 p-4 rounded border border-gray-100">
                    {selectedProject.metrics.map((metric, idx) => (
                      <div key={idx}>
                        <div className="font-mono text-xl font-bold text-green-600">
                          {metric.value}
                        </div>
                        <div className="text-[10px] uppercase text-gray-400 font-sans font-bold">
                          {metric.label}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* Modal Right: Stack */}
            <div className="bg-[#1e1e1e] p-8 md:p-10 md:w-1/3 text-gray-300 border-l border-gray-800">
              <button
                onClick={() => setSelectedProject(null)}
                className="absolute top-4 right-4 text-gray-400 hover:text-white"
              >
                <X size={24} />
              </button>

              <h3 className="font-sans font-bold text-xs uppercase tracking-widest text-gray-500 mb-6">
                {t.modal_stack}
              </h3>
              <div className="space-y-3 font-mono text-sm">
                {selectedProject.stack.map((tech, i) => (
                  <div
                    key={i}
                    className="flex items-center gap-3 pb-3 border-b border-gray-800 last:border-0"
                  >
                    <div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
                    {tech}
                  </div>
                ))}
              </div>

              <div className="mt-12 p-6 bg-gray-800/50 rounded border border-gray-700">
                <Globe className="text-gray-500 mb-4" size={24} />
                <p className="font-serif text-xs italic text-gray-400 leading-relaxed">
                  "Pradit delivered this system 2 weeks ahead of schedule. The
                  documentation was better than our internal standard."
                </p>
                <div className="mt-2 font-sans text-[10px] font-bold uppercase text-gray-500">
                  - CTO, Client Partner
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};