<?php
// Dynamic Portfolio - Bawornwit Panyakaew
require_once 'db.php';

// Projects Data Array
$projects = [
    1 => [
        'title' => "Smart Agriculture via Arduino IoT",
        'subtitle' => "โปรเจกต์ Arduino ระบบควบคุมฟาร์มอัจฉริยะ",
        'image' => "https://images.unsplash.com/photo-1553406830-ef2513450d76?auto=format&fit=crop&w=800&q=80",
        'tag' => "IoT / Hardware",
        'tags' => ["Arduino", "IoT", "ESP8266", "Hardware", "C++"],
        'short_desc' => "ระบบควบคุมและรดน้ำแปลงเกษตรอัจฉริยะ ตรวจวัดระดับความชื้นในดินและสั่งการผ่านแอพพลิเคชั่นและ Cloud Database ส่งข้อมูลแจ้งเตือนทันทีผ่าน Line Notify",
        'description' => "ระบบควบคุมฟาร์มอัจฉริยะตรวจวัดความชื้นในดิน อุณหภูมิ และระดับน้ำ เชื่อมต่อสั่งการผ่าน Application และ Cloud Service แบบ Real-time ตัวเครื่องจะรดน้ำอัตโนมัติเมื่อค่าความชื้นต่ำกว่าเกณฑ์ และส่งการแจ้งเตือนไปยังสมาร์ทโฟนของผู้ใช้งาน",
        'features' => [
            "ตรวจจับระดับความชื้นในดินและอุณหภูมิอากาศแบบ Real-time",
            "ระบบสั่งเปิด-ปิดปั๊มน้ำอัตโนมัติ (Relay Switch Control)",
            "เชื่อมต่อ WiFi ด้วยบอร์ด NodeMCU ESP8266",
            "แจ้งเตือนผ่าน Line Notify ทันทีเมื่อเกิดความผิดปกติในระบบ",
            "เก็บข้อมูลสถิติประวัติย้อนหลังด้วยฐานข้อมูล Firebase"
        ]
    ],
    2 => [
        'title' => "PC Assembly Guide & Diagnostic Manual",
        'subtitle' => "คู่มือประกอบคอมพิวเตอร์และการตรวจเช็กอาการเสีย",
        'image' => "https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?auto=format&fit=crop&w=800&q=80",
        'tag' => "Maintenance",
        'tags' => ["Hardware", "Maintenance", "Windows", "Manual"],
        'short_desc' => "รวบรวมข้อมูลเทคนิคการประกอบคอมพิวเตอร์อย่างมืออาชีพ การจัดระเบียบสายไฟสายส่งลม และคู่มือซ่อมบำรุงวิเคราะห์อาการเสียเบื้องต้นสำหรับผู้เริ่มต้น",
        'description' => "คู่มือแบบบูรณาการที่รวบรวมเทคนิค วิธีการจัดสเปก และขั้นตอนการประกอบเครื่องคอมพิวเตอร์ทีละขั้นตอนอย่างละเอียด รวมถึงเทคนิคการแก้ไขปัญหาพื้นฐาน (Troubleshooting) ที่เขียนขึ้นเพื่อใช้งานเป็นสื่อการเรียนการสอนในสาขาวิชาชีพ",
        'features' => [
            "อธิบายขั้นตอนการเลือกชิ้นส่วนหลัก CPU, RAM, Mainboard, GPU ให้สอดคล้องกัน",
            "เทคนิคการจัดสายไฟ (Cable Management) ภายในเคสอย่างถูกต้องเพื่อการไหลเวียนของลม",
            "ตารางวิเคราะห์อาการเสียทั่วไป (เช่น ไฟไม่เข้าเครื่อง, บอร์ดร้องเตือน, จอฟ้า)",
            "คู่มือการติดตั้งและตั้งค่า BIOS / UEFI เบื้องต้นอย่างละเอียด"
        ]
    ],
    3 => [
        'title' => "Network Infrastructure Design",
        'subtitle' => "การออกแบบและวางระบบเครือข่ายภายในองค์กรจำลอง",
        'image' => "https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=800&q=80",
        'tag' => "Networking",
        'tags' => ["Networking", "Cisco Packet Tracer", "Subnetting", "Routing"],
        'short_desc' => "ออกแบบและวางระบบเครือข่ายความปลอดภัยสูงภายในองค์กรจำลอง แบ่งแยกแผนกด้วย VLAN กำหนด IP Address และควบคุม ACL สิทธิ์การเข้าถึงข้อมูล",
        'description' => "จำลองการวางโครงสร้างระบบเครือข่าย (Network Design) สำหรับองค์กรขนาดเล็กถึงกลาง มีการแบ่งโซนความปลอดภัย VLANs, จัดการ IP Address Subnetting และการกำหนดสิทธิ์การเข้าถึงข้อมูลผ่าน ACL",
        'features' => [
            "แบ่งแผนกเพื่อความปลอดภัยด้วย VLAN (HR, IT, Guest, Management)",
            "กำหนดนโยบาย IP address ด้วย Class C Variable Length Subnet Masking (VLSM)",
            "ตั้งค่า Dynamic Routing OSPF ระหว่างสาขา",
            "ทดสอบและจำลองประสิทธิภาพเครือข่ายใน Cisco Packet Tracer"
        ]
    ]
];

// Experience Data Array
$timeline = [
    [
        'date' => "มีนาคม 2026 - ปัจจุบัน",
        'title' => "ฝึกงานตำแหน่ง IT Technician",
        'company' => "NCPCOMPUTER",
        'desc' => "รับผิดชอบการซ่อมบำรุงและประกอบอุปกรณ์คอมพิวเตอร์ ตรวจสอบแก้ไขระบบเครือข่ายภายในร้าน คอยบริการให้คำปรึกษาแนะนำการจัดสเปกคอมพิวเตอร์ให้ตรงกับความต้องการของลูกค้า และลงระบบปฏิบัติการ/ซอฟต์แวร์",
        'badge' => "Internship",
        'badge_color' => "cyan"
    ],
    [
        'date' => "2023 - ปัจจุบัน",
        'title' => "ประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) เทคโนโลยีคอมพิวเตอร์",
        'company' => "วิทยาลัยเทคโนโลยีชื่อดัง",
        'desc' => "เรียนรู้โครงสร้างสถาปัตยกรรมคอมพิวเตอร์ การเขียนโปรแกรมไมโครคอนโทรลเลอร์ (Arduino, ESP32) การวางโครงสร้างสายสัญญาณและออกแบบเครือข่ายคอมพิวเตอร์",
        'badge' => "Education",
        'badge_color' => "indigo"
    ]
];

// Check if user wants to view messages
$viewMessages = isset($_GET['view']) && $_GET['view'] === 'messages';
$messagesList = [];
if ($viewMessages) {
    if ($pdo !== null) {
        try {
            $messagesList = $pdo->query('SELECT * FROM portfolio_contacts ORDER BY created_at DESC')->fetchAll();
        } catch (\Exception $e) {
            // Failed, try read JSON
            $messagesList = json_decode(@file_get_contents('messages.json'), true) ?: [];
        }
    } else {
        $messagesList = json_decode(@file_get_contents('messages.json'), true) ?: [];
    }
}
?>
<!DOCTYPE html>
<html lang="th" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio - Computer Technology & IT Support</title>
  <meta name="description" content="แฟ้มสะสมผลงาน (Portfolio) ของนักศึกษาสาขาเทคโนโลยีคอมพิวเตอร์ และ IT Support / IT Technician - ดีไซน์ทันสมัย รองรับทุกอุปกรณ์">

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Theme Initialization -->
  <script>
    (function () {
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.setAttribute('data-theme', 'dark');
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.removeAttribute('data-theme');
        document.documentElement.classList.remove('dark');
      }
    })();
  </script>

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: ['class', '[data-theme="dark"]'],
      theme: {
        extend: {
          colors: {
            bgDark: '#0B0F19',
            cardDark: 'rgba(17, 24, 39, 0.7)',
          },
          fontFamily: {
            sans: ['Outfit', 'Prompt', 'sans-serif'],
          },
          animation: {
            'fade-in': 'fadeIn 0.3s ease-out forwards',
          },
          keyframes: {
            fadeIn: {
              '0%': { opacity: '0', transform: 'translateY(-10px)' },
              '100%': { opacity: '1', transform: 'translateY(0)' },
            }
          }
        }
      }
    }
  </script>

  <!-- Custom Styles -->
  <link rel="stylesheet" href="assets/css/style.css">

  <!-- Lucide Icons CDN -->
  <script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="bg-[var(--color-bg)] text-gray-800 dark:text-gray-100 antialiased selection:bg-indigo-500/30 selection:text-indigo-200 transition-colors duration-300 pb-24 md:pb-0">

  <!-- Glowing Background Grid -->
  <div class="bg-grid-glow"></div>

  <!-- NAVIGATION BAR -->
  <nav class="fixed top-0 left-0 w-full z-40 glass-nav transition-all duration-300">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16 md:h-20">
        <!-- Logo -->
        <a href="index.php#home" class="flex items-center gap-2 group">
          <div class="w-10 h-10 rounded-lg bg-gradient-to-tr from-indigo-500 to-cyan-400 flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-indigo-500/20 group-hover:scale-105 transition-transform">
            P
          </div>
          <span class="font-bold text-lg md:text-xl tracking-tight bg-gradient-to-r from-gray-800 via-gray-600 to-gray-500 dark:from-white dark:via-gray-200 dark:to-gray-400 bg-clip-text text-transparent transition-colors duration-300">
            PORTFOLIO
          </span>
        </a>

        <!-- Desktop Menu -->
        <div class="hidden md:flex items-center gap-8">
          <a href="index.php#home" class="nav-link active text-sm font-medium transition-colors">หน้าแรก</a>
          <a href="index.php#about" class="nav-link text-sm font-medium transition-colors">เกี่ยวกับฉัน</a>
          <a href="index.php#skills" class="nav-link text-sm font-medium transition-colors">ทักษะความสามารถ</a>
          <a href="index.php#projects" class="nav-link text-sm font-medium transition-colors">ผลงาน</a>
          <a href="index.php#contact" class="nav-link text-sm font-medium transition-colors">ติดต่อฉัน</a>
          <?php if ($viewMessages): ?>
            <a href="index.php" class="text-sm font-bold text-indigo-500">ย้อนกลับ</a>
          <?php else: ?>
            <a href="?view=messages" class="text-sm text-gray-450 dark:text-gray-500 hover:text-indigo-500" title="ดูข้อความที่ส่งมา"><i data-lucide="inbox" class="w-4 h-4 inline"></i></a>
          <?php endif; ?>
        </div>

        <!-- Actions (Desktop) -->
        <div class="hidden md:flex items-center gap-4">
          <button id="theme-toggle" aria-label="Toggle Theme" class="p-2.5 rounded-lg border border-gray-200 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-850 text-gray-600 hover:text-gray-950 dark:text-gray-300 dark:hover:text-white active:scale-95 transition-all">
            <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i>
            <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i>
          </button>
          <a href="index.php#contact" class="px-5 py-2.5 rounded-lg text-sm font-medium text-white bg-gradient-to-r from-indigo-600 to-cyan-500 hover:from-indigo-500 hover:to-cyan-400 shadow-md shadow-indigo-600/20 active:scale-95 transition-all flex items-center gap-2 btn-glow">
            <i data-lucide="send" class="w-4 h-4"></i> ติดต่อฉัน
          </a>
        </div>

        <!-- Mobile Actions -->
        <div class="md:hidden flex items-center gap-3">
          <button id="theme-toggle-mobile" aria-label="Toggle Theme" class="p-2.5 rounded-lg bg-gray-100 border border-gray-200 dark:bg-gray-800/50 dark:border-gray-700/50 hover:bg-gray-200 dark:hover:bg-gray-800 active:scale-95 transition-all text-gray-600 dark:text-gray-300">
            <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i>
            <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i>
          </button>
        </div>
      </div>
    </div>
  </nav>

  <?php if ($viewMessages): ?>
  <!-- MESSAGES LOG VIEW -->
  <main class="max-w-4xl mx-auto px-4 pt-28 pb-12">
    <div class="glass-panel p-6 md:p-8 rounded-2xl">
        <h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
            <i data-lucide="inbox" class="text-indigo-500"></i> ข้อความติดต่อกลับล่าสุด
        </h2>
        <?php if (empty($messagesList)): ?>
            <p class="text-gray-500 text-center py-10">ยังไม่มีข้อความส่งเข้ามาในขณะนี้</p>
        <?php else: ?>
            <div class="space-y-4">
                <?php foreach ($messagesList as $msg): ?>
                    <div class="p-5 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-gray-900/50">
                        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 mb-3">
                            <span class="font-bold text-gray-900 dark:text-white"><?= htmlspecialchars($msg['name']) ?></span>
                            <span class="text-xs text-gray-500"><?= htmlspecialchars($msg['created_at'] ?? $msg['timestamp'] ?? '') ?></span>
                        </div>
                        <p class="text-sm text-indigo-500 mb-2 font-medium"><?= htmlspecialchars($msg['email']) ?></p>
                        <p class="text-sm text-gray-750 dark:text-gray-300 bg-gray-50 dark:bg-gray-950 p-4 rounded-lg"><?= nl2br(htmlspecialchars($msg['message'])) ?></p>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
  </main>

  <?php else: ?>

  <!-- HERO SECTION -->
  <section id="home" class="min-h-screen pt-24 md:pt-0 flex items-center relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20 w-full">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
        <!-- Text Content -->
        <div class="lg:col-span-7 space-y-6 text-center lg:text-left order-2 lg:order-1">
          <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/30 text-indigo-350 dark:text-indigo-300 text-xs md:text-sm font-semibold tracking-wider uppercase mx-auto lg:mx-0 animate-pulse">
            <span class="w-2 h-2 rounded-full bg-emerald-400"></span> Available for Internship / Work
          </div>

          <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white leading-tight">
            สวัสดีครับ, ผม <br class="hidden sm:inline">
            <span class="bg-gradient-to-r from-indigo-500 via-cyan-500 to-emerald-500 dark:from-indigo-400 dark:via-cyan-400 dark:to-emerald-400 bg-clip-text text-transparent">
              บวรวิทย์ ปัญญาแก้ว
            </span>
          </h1>

          <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-gray-700 dark:text-gray-300 flex items-center justify-center lg:justify-start gap-2 h-10">
            <span class="typing-text typing-cursor"></span>
          </h2>

          <p class="text-gray-600 dark:text-gray-400 text-base sm:text-lg max-w-xl mx-auto lg:mx-0 leading-relaxed">
            นักศึกษาเทคโนโลยีคอมพิวเตอร์ผู้หลงใหลในการแก้ปัญหาฮาร์ดแวร์ การจัดการระบบเครือข่าย และการเขียนโปรแกรมควบคุม IoT ยินดีต้อนรับเข้าสู่แฟ้มสะสมผลงานออนไลน์ของผมครับ
          </p>

          <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4">
            <a href="#projects" class="w-full sm:w-auto px-8 py-3.5 rounded-xl font-medium text-white bg-indigo-600 hover:bg-indigo-500 shadow-lg shadow-indigo-600/30 hover:shadow-indigo-500/40 active:scale-95 transition-all text-center flex items-center justify-center gap-2 btn-glow">
              <i data-lucide="briefcase" class="w-5 h-5"></i> ดูผลงานของฉัน
            </a>
            <a href="#contact" class="w-full sm:w-auto px-8 py-3.5 rounded-xl font-medium text-gray-700 hover:text-gray-950 dark:text-gray-300 dark:hover:text-white bg-gray-100 dark:bg-gray-900/60 border border-gray-200 dark:border-gray-800 hover:border-gray-350 dark:hover:border-gray-700 active:scale-95 transition-all text-center flex items-center justify-center gap-2 glass-panel">
              <i data-lucide="mail" class="w-5 h-5"></i> ติดต่อฉัน
            </a>
          </div>
        </div>

        <!-- Profile Illustration -->
        <div class="lg:col-span-5 flex justify-center order-1 lg:order-2">
          <div class="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 float-animation">
            <div class="absolute -inset-4 rounded-full bg-gradient-to-r from-indigo-500 to-cyan-400 opacity-20 blur-3xl"></div>
            <div class="w-full h-full rounded-2xl overflow-hidden glass-panel p-2 flex items-center justify-center">
              <img src="assets/images/profile.png" alt="Profile" class="w-full h-full object-cover rounded-xl bg-white dark:bg-gray-950">
            </div>

            <!-- Floating Badge 1 -->
            <div class="absolute -bottom-6 -left-6 bg-white/95 dark:bg-gray-900/90 border border-gray-200 dark:border-gray-800 backdrop-blur px-5 py-3 rounded-2xl hidden sm:flex items-center gap-3 shadow-2xl transition-colors duration-300">
              <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center text-emerald-500 dark:text-emerald-400">
                <i data-lucide="award" class="w-6 h-6"></i>
              </div>
              <div>
                <p class="text-xs text-gray-500 dark:text-gray-400 font-medium">GPAX สะสม</p>
                <p class="text-sm font-bold text-gray-850 dark:text-white">2.85 / 4.00</p>
              </div>
            </div>

            <!-- Floating Badge 2 -->
            <div class="absolute -top-6 -right-6 bg-white/95 dark:bg-gray-900/90 border border-gray-200 dark:border-gray-800 backdrop-blur px-5 py-3 rounded-2xl hidden sm:flex items-center gap-3 shadow-2xl transition-colors duration-300">
              <div class="w-10 h-10 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-500 dark:text-indigo-400">
                <i data-lucide="wrench" class="w-6 h-6"></i>
              </div>
              <div>
                <p class="text-xs text-gray-500 dark:text-gray-400 font-medium">ตำแหน่งหลัก</p>
                <p class="text-sm font-bold text-gray-850 dark:text-white">IT Support / IoT</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ABOUT ME SECTION -->
  <section id="about" class="py-20 border-t border-gray-200 dark:border-gray-900/50 relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
        <h2 class="text-xs uppercase tracking-widest text-indigo-500 dark:text-indigo-400 font-bold">About Me</h2>
        <p class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">ประวัติส่วนตัวและการทำงาน</p>
        <div class="w-16 h-1 bg-gradient-to-r from-indigo-500 to-cyan-400 mx-auto rounded-full"></div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
        <div class="lg:col-span-6 space-y-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white">มุ่งมั่นพัฒนาทักษะด้านเทคโนโลยีแบบ Full-Stack</h3>
          <p class="text-gray-650 dark:text-gray-300 leading-relaxed">
            สวัสดีครับ ผม บวรวิทย์ ปัญญาแก้ว ปัจจุบันเป็นนักศึกษาสาขาเทคโนโลยีคอมพิวเตอร์ ผมมีความสนใจอย่างลึกซึ้งเกี่ยวกับการทำงานของคอมพิวเตอร์ ทั้งในส่วนของโครงสร้างฮาร์ดแวร์ การจัดการเครือข่ายที่มีความซับซ้อน และการนำบอร์ดควบคุมอัจฉริยะ (IoT) มาประยุกต์ใช้งานในชีวิตจริง
          </p>
          <p class="text-gray-650 dark:text-gray-300 leading-relaxed">
            ผมชอบความท้าทายในการค้นหาอาการเสียและซ่อมแซมระบบอุปกรณ์ไอที (Hardware Troubleshooting) รวมถึงการเรียนรู้เทคโนโลยีใหม่ๆ อยู่เสมอเพื่อพร้อมก้าวเข้าสู่การทำงานจริงในสายงานไอทีอย่างมีประสิทธิภาพ
          </p>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
            <div class="p-4 rounded-xl bg-white/60 dark:bg-gray-900/50 border border-gray-250 dark:border-gray-800/80 flex items-center gap-3 transition-colors duration-300">
              <i data-lucide="book-open" class="w-5 h-5 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
              <div>
                <span class="text-xs text-gray-500 dark:text-gray-400 block">สาขาวิชา</span>
                <span class="text-sm font-semibold text-gray-800 dark:text-white">เทคโนโลยีคอมพิวเตอร์</span>
              </div>
            </div>
            <div class="p-4 rounded-xl bg-white/60 dark:bg-gray-900/50 border border-gray-250 dark:border-gray-800/80 flex items-center gap-3 transition-colors duration-300">
              <i data-lucide="map-pin" class="w-5 h-5 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
              <div>
                <span class="text-xs text-gray-500 dark:text-gray-400 block">ที่อยู่ปัจจุบัน</span>
                <span class="text-sm font-semibold text-gray-800 dark:text-white">เชียงใหม่, ประเทศไทย</span>
              </div>
            </div>
            <div class="p-4 rounded-xl bg-white/60 dark:bg-gray-900/50 border border-gray-250 dark:border-gray-800/80 flex items-center gap-3 transition-colors duration-300">
              <i data-lucide="languages" class="w-5 h-5 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
              <div>
                <span class="text-xs text-gray-500 dark:text-gray-400 block">ภาษา</span>
                <span class="text-sm font-semibold text-gray-800 dark:text-white">ไทย (Native), อังกฤษ (Basic)</span>
              </div>
            </div>
            <div class="p-4 rounded-xl bg-white/60 dark:bg-gray-900/50 border border-gray-250 dark:border-gray-800/80 flex items-center gap-3 transition-colors duration-300">
              <i data-lucide="calendar" class="w-5 h-5 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
              <div>
                <span class="text-xs text-gray-500 dark:text-gray-400 block">ว่างพร้อมทำงาน</span>
                <span class="text-sm font-semibold text-gray-800 dark:text-white">เริ่มต้น กรกฎาคม 2026</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Experience Timeline -->
        <div class="lg:col-span-6 space-y-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
            <i data-lucide="history" class="text-indigo-500 dark:text-indigo-400"></i> ประวัติการศึกษาและการฝึกงาน
          </h3>

          <div class="relative border-l border-gray-200 dark:border-gray-800 ml-4 space-y-8">
            <?php foreach ($timeline as $item): ?>
            <div class="relative pl-8 group">
              <div class="absolute left-0 top-1.5 w-3 h-3 rounded-full bg-indigo-500 -translate-x-1.5 timeline-dot"></div>
              <div class="p-5 rounded-xl glass-panel relative">
                <span class="inline-block px-2.5 py-0.5 mb-2 text-xs font-semibold text-<?= $item['badge_color'] ?>-600 dark:text-<?= $item['badge_color'] ?>-300 bg-<?= $item['badge_color'] ?>-500/10 border border-<?= $item['badge_color'] ?>-200 dark:border-<?= $item['badge_color'] ?>-500/20 rounded">
                  <?= $item['date'] ?>
                </span>
                <h4 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-300 transition-colors">
                  <?= $item['title'] ?>
                </h4>
                <p class="text-sm font-semibold text-indigo-600 dark:text-indigo-400"><?= $item['company'] ?></p>
                <p class="text-xs text-gray-650 dark:text-gray-400 mt-2 leading-relaxed">
                  <?= $item['desc'] ?>
                </p>
              </div>
            </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- SKILLS SECTION -->
  <section id="skills" class="py-20 border-t border-gray-200 dark:border-gray-900/50 relative bg-gray-100/30 dark:bg-gray-950/20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
        <h2 class="text-xs uppercase tracking-widest text-indigo-500 dark:text-indigo-400 font-bold">Skills</h2>
        <p class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">ความสามารถและความถนัด</p>
        <div class="w-16 h-1 bg-gradient-to-r from-indigo-500 to-cyan-400 mx-auto rounded-full"></div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Category 1: Hardware -->
        <div class="p-6 md:p-8 rounded-2xl glass-panel space-y-6">
          <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 pb-4">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
              <i data-lucide="cpu" class="text-indigo-500 dark:text-indigo-400 w-6 h-6"></i> Hardware Tech
            </h3>
            <span class="px-2 py-0.5 text-2xs bg-indigo-500/10 text-indigo-600 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-500/20 rounded font-semibold uppercase">Advanced</span>
          </div>

          <div class="space-y-4">
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span class="font-medium text-gray-700 dark:text-gray-300">PC Assembly & Fitting</span>
                <span class="text-indigo-500 dark:text-indigo-400 font-semibold">95%</span>
              </div>
              <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-indigo-500 to-cyan-400 rounded-full" style="width: 95%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span class="font-medium text-gray-700 dark:text-gray-300">Hardware Troubleshooting</span>
                <span class="text-indigo-500 dark:text-indigo-400 font-semibold">90%</span>
              </div>
              <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-indigo-500 to-cyan-400 rounded-full" style="width: 90%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span class="font-medium text-gray-700 dark:text-gray-300">Arduino & IoT Controllers</span>
                <span class="text-indigo-500 dark:text-indigo-400 font-semibold">85%</span>
              </div>
              <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-indigo-500 to-cyan-400 rounded-full" style="width: 85%"></div>
              </div>
            </div>
            <div class="pt-2">
              <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-2">เครื่องมือที่เชี่ยวชาญ:</p>
              <div class="flex flex-wrap gap-1.5">
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Multimeter</span>
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Soldering Iron</span>
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Oscilloscope</span>
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">NodeMCU</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Category 2: Software -->
        <div class="p-6 md:p-8 rounded-2xl glass-panel space-y-6">
          <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 pb-4">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
              <i data-lucide="terminal" class="text-cyan-500 dark:text-cyan-400 w-6 h-6"></i> Software & OS
            </h3>
            <span class="px-2 py-0.5 text-2xs bg-cyan-500/10 text-cyan-600 dark:text-cyan-300 border border-cyan-200 dark:border-cyan-500/20 rounded font-semibold uppercase">Intermediate</span>
          </div>

          <div class="space-y-4">
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span class="font-medium text-gray-700 dark:text-gray-300">Windows OS (Client & Server)</span>
                <span class="text-cyan-600 dark:text-cyan-400 font-semibold">90%</span>
              </div>
              <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-cyan-500 to-emerald-400 rounded-full" style="width: 90%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span class="font-medium text-gray-700 dark:text-gray-300">C++ / Embedded Programming</span>
                <span class="text-cyan-600 dark:text-cyan-400 font-semibold">75%</span>
              </div>
              <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-cyan-500 to-emerald-400 rounded-full" style="width: 75%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span class="font-medium text-gray-700 dark:text-gray-300">HTML5 / CSS3 / JavaScript</span>
                <span class="text-cyan-600 dark:text-cyan-400 font-semibold">70%</span>
              </div>
              <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-cyan-500 to-emerald-400 rounded-full" style="width: 70%"></div>
              </div>
            </div>
            <div class="pt-2">
              <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-2">ซอฟต์แวร์ที่ใช้งานบ่อย:</p>
              <div class="flex flex-wrap gap-1.5">
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Arduino IDE</span>
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">VS Code</span>
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">VMware ESXi</span>
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Rufus</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Category 3: Networking -->
        <div class="p-6 md:p-8 rounded-2xl glass-panel space-y-6">
          <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 pb-4">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
              <i data-lucide="network" class="text-emerald-500 dark:text-emerald-400 w-6 h-6"></i> Networking
            </h3>
            <span class="px-2 py-0.5 text-2xs bg-emerald-500/10 text-emerald-600 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-500/20 rounded font-semibold uppercase">Intermediate</span>
          </div>

          <div class="space-y-4">
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span class="font-medium text-gray-700 dark:text-gray-300">LAN / WAN Cabling (UTP/Fiber)</span>
                <span class="text-emerald-500 dark:text-emerald-400 font-semibold">85%</span>
              </div>
              <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-emerald-500 to-indigo-500 rounded-full" style="width: 85%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span class="font-medium text-gray-700 dark:text-gray-300">Router & Switch Config</span>
                <span class="text-emerald-500 dark:text-emerald-400 font-semibold">80%</span>
              </div>
              <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-emerald-500 to-indigo-500 rounded-full" style="width: 80%"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between text-sm mb-1">
                <span class="font-medium text-gray-700 dark:text-gray-300">IP Subnetting & Routing</span>
                <span class="text-emerald-500 dark:text-emerald-400 font-semibold">75%</span>
              </div>
              <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-emerald-500 to-indigo-500 rounded-full" style="width: 75%"></div>
              </div>
            </div>
            <div class="pt-2">
              <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-2">ทฤษฎีและอุปกรณ์ที่เชี่ยวชาญ:</p>
              <div class="flex flex-wrap gap-1.5">
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Cisco IOS</span>
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">MikroTik RouterOS</span>
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">IPv4/IPv6 VLSM</span>
                <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">RJ45 Crimping</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- PROJECTS & PORTFOLIO SECTION -->
  <section id="projects" class="py-20 border-t border-gray-200 dark:border-gray-900/50 relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
        <h2 class="text-xs uppercase tracking-widest text-indigo-500 dark:text-indigo-400 font-bold">Portfolio</h2>
        <p class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">ผลงานเด่นของฉัน</p>
        <div class="w-16 h-1 bg-gradient-to-r from-indigo-500 to-cyan-400 mx-auto rounded-full"></div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <?php foreach ($projects as $id => $p): ?>
        <div class="group rounded-2xl overflow-hidden glass-panel flex flex-col h-full border border-gray-200 dark:border-gray-800/80 hover:border-indigo-500/30 transition-all duration-300">
          <div class="relative h-48 md:h-52 overflow-hidden bg-gray-100 dark:bg-gray-950">
            <img src="<?= $p['image'] ?>" alt="<?= $p['title'] ?>" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900/40 dark:from-gray-950 via-transparent to-transparent opacity-60"></div>
            <span class="absolute top-4 right-4 px-2.5 py-1 text-2xs font-semibold uppercase tracking-wider bg-indigo-600 dark:bg-indigo-500/80 backdrop-blur-sm text-white rounded-md"><?= $p['tag'] ?></span>
          </div>

          <div class="p-6 flex flex-col flex-grow space-y-4">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-indigo-650 dark:group-hover:text-indigo-400 transition-colors">
              <?= $p['title'] ?>
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed flex-grow line-clamp-3">
              <?= $p['short_desc'] ?>
            </p>
            <div class="flex flex-wrap gap-1.5">
              <?php foreach ($p['tags'] as $tag): ?>
                <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 rounded border border-gray-200 dark:border-gray-800"><?= $tag ?></span>
              <?php endforeach; ?>
            </div>
            <div class="pt-4 border-t border-gray-200 dark:border-gray-800/80 flex items-center justify-between">
              <button data-project-id="<?= $id ?>" class="view-project-btn text-indigo-650 hover:text-indigo-550 dark:text-indigo-400 dark:hover:text-indigo-300 text-sm font-semibold flex items-center gap-1.5 transition-colors cursor-pointer">
                ดูรายละเอียดเพิ่ม <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
              </button>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </section>

  <!-- CONTACT SECTION -->
  <section id="contact" class="py-20 border-t border-gray-200 dark:border-gray-900/50 relative bg-gray-100/10 dark:bg-gray-950/10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
        <h2 class="text-xs uppercase tracking-widest text-indigo-500 dark:text-indigo-400 font-bold">Contact</h2>
        <p class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">ช่องทางการติดต่อ</p>
        <div class="w-16 h-1 bg-gradient-to-r from-indigo-500 to-cyan-400 mx-auto rounded-full"></div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
        <div class="lg:col-span-5 space-y-6">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white">มาทำโปรเจกต์ที่ยอดเยี่ยมร่วมกันครับ</h3>
          <p class="text-gray-650 dark:text-gray-400 leading-relaxed text-sm md:text-base">
            หากคุณมีความคิดสร้างสรรค์ที่อยากพัฒนา ระบบฮาร์ดแวร์ที่ต้องการการบำรุงรักษา หรือต้องการที่ปรึกษาด้านเทคโนโลยีคอมพิวเตอร์และเครือข่าย สามารถส่งรายละเอียดเพื่อพูดคุยแลกเปลี่ยนกันได้เลยครับ
          </p>

          <div class="space-y-4">
            <a href="mailto:maibuauty@gmail.com" class="p-4 rounded-xl glass-panel flex items-center gap-4 hover:translate-x-1 group">
              <div class="w-11 h-11 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-500 dark:text-indigo-400 group-hover:scale-110 transition-transform">
                <i data-lucide="mail" class="w-5 h-5"></i>
              </div>
              <div>
                <span class="text-xs text-gray-500 dark:text-gray-400 block font-medium">อีเมลตรง</span>
                <span class="text-sm font-semibold text-gray-800 dark:text-white group-hover:text-indigo-650 dark:group-hover:text-indigo-300 transition-colors">maibuauty@gmail.com</span>
              </div>
            </a>

            <a href="https://github.com" target="_blank" class="p-4 rounded-xl glass-panel flex items-center gap-4 hover:translate-x-1 group">
              <div class="w-11 h-11 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-400 group-hover:scale-110 transition-transform">
                <i data-lucide="github" class="w-5 h-5"></i>
              </div>
              <div>
                <span class="text-xs text-gray-500 dark:text-gray-400 block font-medium">ดูซอร์สโค้ดเพิ่มเติม</span>
                <span class="text-sm font-semibold text-gray-800 dark:text-white group-hover:text-indigo-650 dark:group-hover:text-indigo-300 transition-colors">github.com/bawornwit-pc</span>
              </div>
            </a>

            <div class="p-4 rounded-xl glass-panel flex items-center gap-4 group">
              <div class="w-11 h-11 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-500 dark:text-indigo-400 group-hover:scale-110 transition-transform">
                <i data-lucide="phone" class="w-5 h-5"></i>
              </div>
              <div>
                <span class="text-xs text-gray-500 dark:text-gray-400 block font-medium">เบอร์โทรศัพท์</span>
                <span class="text-sm font-semibold text-gray-800 dark:text-white">095-204-8124</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Contact Form Card -->
        <div class="lg:col-span-7">
          <form id="contact-form" class="p-6 md:p-8 rounded-2xl glass-panel space-y-6">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white">ส่งข้อความหาฉัน</h3>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div class="space-y-2">
                <label for="name" class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">ชื่อของคุณ</label>
                <input type="text" id="name" name="name" required class="w-full px-4 py-3 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-indigo-500/60 focus:ring-1 focus:ring-indigo-500/60 transition-all text-sm">
              </div>
              <div class="space-y-2">
                <label for="email" class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">อีเมลผู้ติดต่อ</label>
                <input type="email" id="email" name="email" required class="w-full px-4 py-3 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-indigo-500/60 focus:ring-1 focus:ring-indigo-500/60 transition-all text-sm">
              </div>
            </div>

            <div class="space-y-2">
              <label for="message" class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">ข้อความ</label>
              <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-indigo-500/60 focus:ring-1 focus:ring-indigo-500/60 transition-all text-sm" placeholder="เขียนข้อความหรือรายละเอียดงานที่ต้องการนำเสนอ..."></textarea>
            </div>

            <button type="submit" class="w-full py-4 px-6 rounded-xl font-semibold text-white bg-indigo-600 hover:bg-indigo-500 active:scale-[0.98] transition-all flex items-center justify-center gap-2 btn-glow shadow-lg shadow-indigo-600/30">
              <i data-lucide="send" class="w-4 h-4"></i> ส่งข้อความทันที
            </button>
          </form>
        </div>
      </div>
    </div>
  </section>
  <?php endif; ?>

  <!-- FOOTER -->
  <footer class="py-8 border-t border-gray-200 dark:border-gray-900/40 bg-gray-55 dark:bg-gray-950/80">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
      <div class="flex items-center gap-2">
        <div class="w-8 h-8 rounded bg-gradient-to-tr from-indigo-500 to-cyan-400 flex items-center justify-center text-white font-bold text-base shadow">
          P
        </div>
        <span class="text-sm font-semibold tracking-wider text-gray-600 dark:text-gray-400">
          Bawornwit Portfolio
        </span>
      </div>
      <p class="text-xs text-gray-550 dark:text-gray-500">
        © 2026 Bawornwit Panyakaew. All rights reserved. Designed for excellence.
      </p>
    </div>
  </footer>

  <!-- MOBILE BOTTOM TAB BAR -->
  <div class="fixed bottom-0 left-0 right-0 z-40 md:hidden bg-white/80 dark:bg-gray-950/80 border-t border-gray-200 dark:border-gray-850 backdrop-blur-lg px-4 py-2 shadow-2xl transition-all duration-300 rounded-t-2xl">
    <div class="flex justify-around items-center h-12">
      <a href="index.php#home" class="nav-link flex flex-col items-center justify-center text-center gap-1 flex-1 py-1">
        <i data-lucide="home" class="w-5 h-5"></i>
        <span class="text-[10px] font-semibold tracking-tight">หน้าแรก</span>
      </a>
      <a href="index.php#about" class="nav-link flex flex-col items-center justify-center text-center gap-1 flex-1 py-1">
        <i data-lucide="user" class="w-5 h-5"></i>
        <span class="text-[10px] font-semibold tracking-tight">เกี่ยวกับฉัน</span>
      </a>
      <a href="index.php#skills" class="nav-link flex flex-col items-center justify-center text-center gap-1 flex-1 py-1">
        <i data-lucide="award" class="w-5 h-5"></i>
        <span class="text-[10px] font-semibold tracking-tight">ทักษะ</span>
      </a>
      <a href="index.php#projects" class="nav-link flex flex-col items-center justify-center text-center gap-1 flex-1 py-1">
        <i data-lucide="briefcase" class="w-5 h-5"></i>
        <span class="text-[10px] font-semibold tracking-tight">ผลงาน</span>
      </a>
      <a href="index.php#contact" class="nav-link flex flex-col items-center justify-center text-center gap-1 flex-1 py-1">
        <i data-lucide="mail" class="w-5 h-5"></i>
        <span class="text-[10px] font-semibold tracking-tight">ติดต่อ</span>
      </a>
    </div>
  </div>

  <!-- PROJECT MODAL POPUP -->
  <div id="project-modal" class="hidden fixed inset-0 z-50 overflow-y-auto bg-gray-950/80 backdrop-blur-sm items-center justify-center p-4">
    <div class="relative w-full max-w-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-2xl p-6 md:p-8 max-h-[90vh] overflow-y-auto animate-fade-in transition-colors duration-300">
      <button id="modal-close" class="absolute top-4 right-4 p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-850 dark:hover:bg-gray-850 active:scale-95 text-gray-500 hover:text-gray-950 dark:text-gray-400 dark:hover:text-white transition-all cursor-pointer border border-transparent dark:border-gray-800">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
      <div id="modal-content" class="flex flex-col space-y-4"></div>
    </div>
  </div>

  <!-- TOAST NOTIFICATION -->
  <div id="toast" class="hidden fixed bottom-5 right-5 z-50 flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-900 border border-indigo-500/30 rounded-xl shadow-2xl">
    <div class="toast-icon-container">
      <i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-500 dark:text-emerald-400"></i>
    </div>
    <span class="toast-text text-sm text-gray-800 dark:text-gray-200 font-medium"></span>
  </div>

  <!-- Share Projects Data dynamically to JS -->
  <script>
      window.projectsData = <?= json_encode($projects, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;
  </script>

  <!-- Scripts -->
  <script src="assets/js/app.js"></script>
</body>
</html>