import React, { useState, useEffect } from 'react';
import { 
  Menu, X, Search, ChevronRight, ArrowRight, CheckCircle2, 
  BarChart3, Globe, Shield, Users, Zap, Award, BookOpen, 
  MessageSquare, Briefcase, FileText, HelpCircle, ChevronLeft,
  Star, Quote, Cpu
} from 'lucide-react';

// --- DATA: 80 Articles Generation ---
const generateArticles = () => {
  const baseArticles = [
    {
      id: 1,
      title: "ทำไม AI Overview (SGE) ถึงเป็นจุดจบของ SEO แบบดั้งเดิม และคุณต้องปรับตัวอย่างไร?",
      category: "AI Search Strategy",
      date: "24 มีนาคม 2026",
      readTime: "5 นาที",
      excerpt: "เรียนรู้วิธีที่ Generative AI กำลังเปลี่ยนพฤติกรรมการค้นหาของผู้คน และเหตุผลที่การทำ SEO แบบใส่คีย์เวิร์ดเดิมๆ ไม่ได้ผลอีกต่อไป หากคุณไม่ติด AI Overview คุณอาจหายไปจากสายตาลูกค้า",
      content: `
        <p class="mb-4">ในยุคที่ Google และ Search Engine ชั้นนำเปลี่ยนผ่านไปสู่ <strong>AI Overview (หรือ Search Generative Experience - SGE)</strong> พฤติกรรมของผู้บริโภคได้เปลี่ยนไปอย่างสิ้นเชิง ผู้คนไม่คลิกเข้าไปดูทีละเว็บไซต์อีกต่อไป แต่พวกเขาอ่าน "คำตอบสรุป" ที่ AI สร้างขึ้นมาให้ทันทีหน้าแรก</p>
        <h3 class="text-xl font-bold mt-6 mb-3">จุดจบของ Blue Links?</h3>
        <p class="mb-4">สถิติจาก Ai Search Studio ชี้ให้เห็นว่ากว่า 65% ของผู้ใช้ พึงพอใจกับคำตอบที่ AI สรุปให้และไม่คลิกลิงก์ใดๆ ต่อ (Zero-click searches) นั่นหมายความว่า หากเว็บไซต์ของคุณไม่ได้เป็น <em>"แหล่งข้อมูลอ้างอิง" (Source Citation)</em> ที่ AI ดึงมาใช้ ทราฟฟิกของคุณจะลดลงอย่างน่าใจหาย</p>
        <h3 class="text-xl font-bold mt-6 mb-3">GEO (Generative Engine Optimization) คือทางรอด</h3>
        <p class="mb-4">การทำ SEO แบบดั้งเดิมที่เน้น Backlink ปริมาณมาก และการยัด Keyword (Keyword Stuffing) กำลังถูกลดความสำคัญลง อัลกอริทึมของ LLMs (Large Language Models) มองหา <strong>Context (บริบท)</strong> และ <strong>EEAT (Experience, Expertise, Authoritativeness, Trustworthiness)</strong></p>
        <ul class="list-disc pl-6 mb-4 space-y-2">
          <li><strong>สร้างเนื้อหาจากประสบการณ์จริง:</strong> AI ชอบเนื้อหาที่มีความเป็นมนุษย์ มีมุมมองที่ AI ไม่สามารถสร้างเองได้</li>
          <li><strong>โครงสร้างข้อมูลชัดเจน:</strong> ใช้ Schema Markup และ Entity-based SEO เพื่อให้ AI เข้าใจเนื้อหาของคุณได้ง่ายที่สุด</li>
          <li><strong>ความน่าเชื่อถือสูง:</strong> อ้างอิงแหล่งที่มา ระบุผู้เขียนที่มีความเชี่ยวชาญจริง</li>
        </ul>
        <p class="font-semibold text-indigo-700">ที่ Ai Search Studio เราเชี่ยวชาญในการปรับแต่งโครงสร้างเว็บไซต์และเนื้อหา เพื่อให้ AI ของ Google เลือกคุณเป็นอันดับแรกในการให้คำตอบผู้ใช้งาน</p>
      `
    },
    {
      id: 2,
      title: "เจาะลึกหลักการ EEAT: เคล็ดลับดึงดูด AI ให้เลือกอ้างอิงเว็บไซต์คุณ",
      category: "Content Optimization",
      date: "20 มีนาคม 2026",
      readTime: "7 นาที",
      excerpt: "EEAT ไม่ใช่แค่ตัวย่อ แต่คือแก่นชี้วัดคุณภาพเนื้อหาของ Google ทำความเข้าใจ Experience, Expertise, Authoritativeness และ Trustworthiness แบบเจาะลึก",
      content: "<p>เนื้อหาบทความ EEAT เจาะลึก... (จำลองเนื้อหา)</p>"
    },
    {
      id: 3,
      title: "Case Study: ดันยอดขายคลินิกความงามโต 300% ด้วยการติดหน้าแรก AI Overview",
      category: "Case Studies",
      date: "15 มีนาคม 2026",
      readTime: "4 นาที",
      excerpt: "ดูวิธีการที่เราเปลี่ยนทราฟฟิกที่ลดลง ให้กลับมาเป็นยอดจองคิวถล่มทลาย โดยการปรับเว็บไซต์ให้กลายเป็นผู้เชี่ยวชาญอันดับหนึ่งในมุมมองของ AI",
      content: "<p>เนื้อหา Case Study... (จำลองเนื้อหา)</p>"
    },
    {
      id: 4,
      title: "Entity-Based SEO คืออะไร? ทำไมถึงสำคัญกว่า Keyword Research",
      category: "Technical SEO",
      date: "10 มีนาคม 2026",
      readTime: "6 นาที",
      excerpt: "AI ไม่เข้าใจคำ แต่เข้าใจ 'ความหมายและความสัมพันธ์' (Entities) เรียนรู้วิธีสร้าง Knowledge Graph ให้ธุรกิจของคุณ",
      content: "<p>เนื้อหา Entity SEO... (จำลองเนื้อหา)</p>"
    },
    {
      id: 5,
      title: "5 ข้อผิดพลาดที่ทำให้เว็บคุณร่วงจาก AI Overview",
      category: "AI Search Strategy",
      date: "5 มีนาคม 2026",
      readTime: "5 นาที",
      excerpt: "เช็คด่วน! เว็บไซต์ของคุณกำลังทำข้อผิดพลาดเหล่านี้อยู่หรือไม่ ซึ่งทำให้ AI มองข้ามเนื้อหาของคุณไป",
      content: "<p>เนื้อหา 5 ข้อผิดพลาด... (จำลองเนื้อหา)</p>"
    }
  ];

  const categories = ["Technical SEO", "Content Optimization", "AI Search Strategy", "Case Studies", "Industry News"];
  const generated = [];

  for (let i = 6; i <= 80; i++) {
    generated.push({
      id: i,
      title: `เทคนิคการทำ AI SEO และกลยุทธ์ EEAT ฉบับที่ ${i}: ปรับจูนเว็บไซต์ให้เหนือคู่แข่ง`,
      category: categories[Math.floor(Math.random() * categories.length)],
      date: `${Math.floor(Math.random() * 28) + 1} กุมภาพันธ์ 2026`,
      readTime: `${Math.floor(Math.random() * 5) + 3} นาที`,
      excerpt: `บทความลำดับที่ ${i} เจาะลึกกลยุทธ์การปรับแต่งเว็บไซต์เพื่อให้ AI ตรวจจับความเชี่ยวชาญ และดึงข้อมูลไปแสดงผลบน AI Overview เพิ่มโอกาสทางธุรกิจได้อย่างยั่งยืน`,
      content: `<p>เนื้อหาบทความจำลองลำดับที่ ${i}... มุ่งเน้นไปที่การสร้าง Authority และการเขียนโครงสร้างข้อมูลที่ AI ชื่นชอบ...</p>`
    });
  }

  return [...baseArticles, ...generated];
};

const allArticles = generateArticles();

// --- MAIN APP COMPONENT ---
export default function App() {
  const [currentPage, setCurrentPage] = useState('home');
  const [currentData, setCurrentData] = useState(null);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // Scroll to top on page change
  useEffect(() => {
    window.scrollTo(0, 0);
    setIsMobileMenuOpen(false);
  }, [currentPage]);

  const navigate = (page, data = null) => {
    setCurrentPage(page);
    setCurrentData(data);
  };

  // --- NAVIGATION DATA ---
  const navLinks = [
    { id: 'home', label: 'หน้าแรก', icon: Globe },
    { id: 'about', label: 'เกี่ยวกับเรา', icon: Users },
    { id: 'services', label: 'บริการ', icon: Zap },
    { id: 'why-aio', label: 'ทำไมต้อง AI Overview?', icon: Cpu },
    { id: 'portfolio', label: 'ผลงาน', icon: BarChart3 },
    { id: 'pricing', label: 'ราคา', icon: Award },
    { id: 'workflow', label: 'ขั้นตอนทำงาน', icon: CheckCircle2 },
    { id: 'blog', label: 'บทความ & ความรู้', icon: BookOpen },
    { id: 'faq', label: 'FAQ', icon: HelpCircle },
    { id: 'careers', label: 'ร่วมงานกับเรา', icon: Briefcase },
    { id: 'contact', label: 'ติดต่อเรา', icon: MessageSquare },
  ];

  // --- COMPONENTS ---
  const Navbar = () => (
    <nav className="fixed top-0 w-full bg-white/80 backdrop-blur-md z-50 border-b border-slate-100 transition-all">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-20 items-center">
          <div className="flex-shrink-0 flex items-center cursor-pointer" onClick={() => navigate('home')}>
            <span className="text-2xl font-black tracking-tighter text-slate-900 flex items-center gap-2">
              <span className="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white">
                <Search size={18} strokeWidth={3} />
              </span>
              Ai Search Studio
            </span>
          </div>
          
          {/* Desktop Menu - Selected Links */}
          <div className="hidden md:flex space-x-8 items-center">
            <button onClick={() => navigate('services')} className="text-sm font-medium text-slate-600 hover:text-indigo-600 transition-colors">บริการของเรา</button>
            <button onClick={() => navigate('why-aio')} className="text-sm font-medium text-slate-600 hover:text-indigo-600 transition-colors">ทำไมต้อง AIO</button>
            <button onClick={() => navigate('portfolio')} className="text-sm font-medium text-slate-600 hover:text-indigo-600 transition-colors">ผลงาน</button>
            <button onClick={() => navigate('blog')} className="text-sm font-medium text-slate-600 hover:text-indigo-600 transition-colors">บทความ (80)</button>
            <button onClick={() => navigate('contact')} className="bg-slate-900 text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-indigo-600 transition-colors shadow-sm">
              ปรึกษาฟรี
            </button>
          </div>

          {/* Mobile menu button */}
          <div className="md:hidden flex items-center">
            <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="text-slate-600 hover:text-slate-900 focus:outline-none p-2">
              {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu Panel */}
      {isMobileMenuOpen && (
        <div className="md:hidden bg-white border-b border-slate-100 absolute w-full max-h-[80vh] overflow-y-auto shadow-xl">
          <div className="px-4 pt-2 pb-6 space-y-1">
            {navLinks.map((link) => (
              <button
                key={link.id}
                onClick={() => navigate(link.id)}
                className="w-full text-left px-3 py-4 text-base font-medium text-slate-700 hover:text-indigo-600 hover:bg-indigo-50 rounded-xl flex items-center gap-3 transition-colors"
              >
                <link.icon size={18} className="text-indigo-500" />
                {link.label}
              </button>
            ))}
            <button 
              onClick={() => navigate('contact')}
              className="w-full mt-4 bg-indigo-600 text-white px-4 py-4 rounded-xl text-center font-medium shadow-md"
            >
              เริ่มต้นปรึกษาฟรี
            </button>
          </div>
        </div>
      )}
    </nav>
  );

  const Footer = () => (
    <footer className="bg-slate-900 text-slate-300 py-16 border-t border-slate-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
          <div className="col-span-1 md:col-span-1">
            <span className="text-2xl font-black tracking-tighter text-white flex items-center gap-2 mb-6">
              <span className="w-8 h-8 rounded-lg bg-indigo-500 flex items-center justify-center text-white">
                <Search size={18} strokeWidth={3} />
              </span>
              Ai Search Studio
            </span>
            <p className="text-sm leading-relaxed mb-6">
              ผู้เชี่ยวชาญด้าน GEO (Generative Engine Optimization) และ EEAT ช่วยให้ธุรกิจของคุณเป็นที่หนึ่งในยุค AI Overview
            </p>
          </div>
          <div>
            <h4 className="text-white font-semibold mb-6">บริการหลัก</h4>
            <ul className="space-y-4 text-sm">
              <li><button onClick={() => navigate('services')} className="hover:text-white transition-colors">AI Overview Audit</button></li>
              <li><button onClick={() => navigate('services')} className="hover:text-white transition-colors">EEAT Content Strategy</button></li>
              <li><button onClick={() => navigate('services')} className="hover:text-white transition-colors">Entity Graph Building</button></li>
              <li><button onClick={() => navigate('pricing')} className="hover:text-white transition-colors">แพ็กเกจราคา</button></li>
            </ul>
          </div>
          <div>
            <h4 className="text-white font-semibold mb-6">บริษัท</h4>
            <ul className="space-y-4 text-sm">
              <li><button onClick={() => navigate('about')} className="hover:text-white transition-colors">เกี่ยวกับเรา</button></li>
              <li><button onClick={() => navigate('portfolio')} className="hover:text-white transition-colors">ผลงานที่ผ่านมา</button></li>
              <li><button onClick={() => navigate('careers')} className="hover:text-white transition-colors">ร่วมงานกับเรา</button></li>
              <li><button onClick={() => navigate('contact')} className="hover:text-white transition-colors">ติดต่อเรา</button></li>
            </ul>
          </div>
          <div>
            <h4 className="text-white font-semibold mb-6">ข้อมูล</h4>
            <ul className="space-y-4 text-sm">
              <li><button onClick={() => navigate('blog')} className="hover:text-white transition-colors">บทความ (80 บทความ)</button></li>
              <li><button onClick={() => navigate('faq')} className="hover:text-white transition-colors">คำถามที่พบบ่อย (FAQ)</button></li>
              <li><button onClick={() => navigate('privacy')} className="hover:text-white transition-colors">นโยบายความเป็นส่วนตัว</button></li>
            </ul>
          </div>
        </div>
        <div className="mt-16 pt-8 border-t border-slate-800 text-sm text-slate-500 flex flex-col md:flex-row justify-between items-center">
          <p>© 2026 Ai Search Studio. All rights reserved.</p>
          <p className="mt-2 md:mt-0">Designed with Minimalist & EEAT Principles.</p>
        </div>
      </div>
    </footer>
  );

  // --- PAGE COMPONENTS ---

  const PageHome = () => (
    <div className="animate-in fade-in duration-500">
      {/* Hero Section */}
      <section className="pt-32 pb-20 md:pt-48 md:pb-32 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto flex flex-col items-center text-center">
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-50 text-indigo-700 font-medium text-sm mb-8 border border-indigo-100">
          <Zap size={16} className="text-indigo-500" />
          <span>The Future of Search is Here</span>
        </div>
        <h1 className="text-5xl md:text-7xl font-black text-slate-900 tracking-tight leading-[1.1] mb-8 max-w-4xl">
          ให้ AI ของ Google <br className="hidden md:block"/>
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-500">
            เลือกคุณเป็นคำตอบแรก
          </span>
        </h1>
        <p className="text-lg md:text-xl text-slate-600 mb-12 max-w-2xl leading-relaxed">
          เปลี่ยนเว็บไซต์ของคุณให้อยู่เหนือคู่แข่งในยุค AI Overview (SGE) ด้วยกลยุทธ์การปรับแต่งเนื้อหามาตรฐาน EEAT สู่การเป็น "ผู้เชี่ยวชาญตัวจริง" ที่ AI ไว้วางใจ
        </p>
        <div className="flex flex-col sm:flex-row gap-4 w-full justify-center">
          <button onClick={() => navigate('contact')} className="px-8 py-4 bg-slate-900 text-white rounded-full font-semibold hover:bg-indigo-600 hover:shadow-lg transition-all flex items-center justify-center gap-2">
            รับคำปรึกษาฟรี (Free Audit) <ArrowRight size={18} />
          </button>
          <button onClick={() => navigate('why-aio')} className="px-8 py-4 bg-white text-slate-900 rounded-full font-semibold border border-slate-200 hover:border-slate-300 hover:bg-slate-50 transition-all">
            ทำไมต้อง AI Overview?
          </button>
        </div>
      </section>

      {/* Trust Indicators */}
      <section className="border-y border-slate-100 bg-slate-50/50 py-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <p className="text-sm font-medium text-slate-400 uppercase tracking-widest mb-6">แบรนด์ที่ไว้วางใจให้เราดูแล AI Search Strategy</p>
          <div className="flex flex-wrap justify-center gap-8 md:gap-16 opacity-50 grayscale">
            {/* Mock Logos */}
            <div className="text-xl font-bold flex items-center gap-2"><Globe/> TechCorp</div>
            <div className="text-xl font-bold flex items-center gap-2"><Briefcase/> FinServe</div>
            <div className="text-xl font-bold flex items-center gap-2"><Shield/> MedHealth</div>
            <div className="text-xl font-bold flex items-center gap-2"><Award/> EduPrime</div>
          </div>
        </div>
      </section>

      {/* Value Proposition */}
      <section className="py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6 leading-tight">
              การค้นหากำลังเปลี่ยนไป<br/>หากไม่ติด AIO = คุณหายไป
            </h2>
            <p className="text-slate-600 mb-8 leading-relaxed">
              ผู้คนไม่ได้คลิกเข้าไปอ่านทีละเว็บอีกต่อไป พวกเขาอ่านคำตอบที่ AI สรุปให้ หากเว็บไซต์ของคุณไม่มีค่า <strong>EEAT (Experience, Expertise, Authoritativeness, Trustworthiness)</strong> ที่สูงพอ AI จะข้ามคุณไปหาคู่แข่งทันที
            </p>
            <ul className="space-y-4">
              {[
                'สร้างเนื้อหาที่มีความเชี่ยวชาญเฉพาะทางสูง',
                'วางโครงสร้าง Entity ให้ AI เข้าใจง่าย',
                'อ้างอิงและสร้างความน่าเชื่อถือระดับสูง'
              ].map((item, i) => (
                <li key={i} className="flex items-start gap-3">
                  <CheckCircle2 className="text-indigo-600 mt-1 flex-shrink-0" size={20} />
                  <span className="text-slate-700 font-medium">{item}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="relative">
            <div className="absolute inset-0 bg-gradient-to-tr from-indigo-100 to-blue-50 rounded-3xl transform rotate-3"></div>
            <div className="relative bg-white p-8 rounded-3xl shadow-xl border border-slate-100">
              <div className="flex items-center gap-3 mb-6 pb-6 border-b border-slate-100">
                <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                  <Search className="text-blue-600" size={20} />
                </div>
                <div>
                  <div className="text-sm font-semibold">AI Overview</div>
                  <div className="text-xs text-slate-500">ผลการค้นหาที่สร้างโดย AI</div>
                </div>
              </div>
              <div className="space-y-4">
                <div className="h-4 bg-slate-100 rounded-full w-3/4"></div>
                <div className="h-4 bg-slate-100 rounded-full w-full"></div>
                <div className="h-4 bg-slate-100 rounded-full w-5/6"></div>
                <div className="p-4 bg-indigo-50 rounded-xl mt-6 border border-indigo-100">
                  <p className="text-sm text-indigo-900">
                    <strong>แหล่งข้อมูลอ้างอิง:</strong> เว็บไซต์ของคุณ (ติดอันดับ 1 เนื่องจากมี EEAT Score สูงสุด)
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );

  const PageAbout = () => (
    <div className="pt-32 pb-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
      <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-8 text-center">ทีมผู้เชี่ยวชาญด้าน<br/>Generative AI Search</h1>
      <p className="text-xl text-slate-600 text-center mb-16 leading-relaxed">
        เราคือทีมวิศวกรข้อมูลและนักกลยุทธ์คอนเทนต์ ที่ผสานความเข้าใจในอัลกอริทึม LLMs เข้ากับศิลปะการเล่าเรื่องแบบมนุษย์ (EEAT)
      </p>

      <div className="space-y-16">
        <section>
          <h2 className="text-2xl font-bold text-slate-900 mb-4 flex items-center gap-2"><Award className="text-indigo-600"/> วิสัยทัศน์ของเรา (Our Vision)</h2>
          <p className="text-slate-700 leading-relaxed">
            ในโลกที่ AI เข้ามามีบทบาทในการสรุปข้อมูล ข้อมูลขยะ (Spam) และคอนเทนต์ที่ไร้คุณภาพจะถูกคัดทิ้ง เราเชื่อว่า "ความเชี่ยวชาญที่แท้จริง" (True Expertise) คือสิ่งเดียวที่จะอยู่รอด ภารกิจของเราคือการช่วยให้ธุรกิจที่มีคุณภาพ ได้รับการมองเห็นและถูกอ้างอิงโดย AI เสมอ
          </p>
        </section>

        <section className="grid sm:grid-cols-2 gap-8">
          <div className="bg-slate-50 p-8 rounded-2xl border border-slate-100">
            <Shield className="text-indigo-600 w-10 h-10 mb-4" />
            <h3 className="text-xl font-bold text-slate-900 mb-2">Trust & Transparency</h3>
            <p className="text-slate-600">เราทำงานบนพื้นฐานของความโปร่งใส ปรับแต่งเว็บไซต์ของคุณด้วยวิธี White-hat ที่ยั่งยืนและปลอดภัยจากการอัปเดตของ Google</p>
          </div>
          <div className="bg-slate-50 p-8 rounded-2xl border border-slate-100">
            <Cpu className="text-indigo-600 w-10 h-10 mb-4" />
            <h3 className="text-xl font-bold text-slate-900 mb-2">Technical Excellence</h3>
            <p className="text-slate-600">เราไม่ได้แค่เขียนบทความ แต่เราออกแบบ "ข้อมูลที่มีโครงสร้าง" (Structured Data) ให้ AI เข้าใจง่ายที่สุด</p>
          </div>
        </section>
      </div>
    </div>
  );

  const PageServices = () => (
    <div className="pt-32 pb-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
      <div className="text-center max-w-3xl mx-auto mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">บริการปรับแต่ง AI Overview</h1>
        <p className="text-xl text-slate-600">บริการแบบครบวงจร (End-to-End) เพื่อสร้าง Authority ให้เว็บไซต์ของคุณ</p>
      </div>

      <div className="grid md:grid-cols-3 gap-8">
        {[
          {
            icon: Search,
            title: "AIO Technical Audit",
            desc: "ตรวจสอบโครงสร้างเว็บ ความเร็ว และ Schema Markup เพื่อให้แน่ใจว่า AI Bot สามารถเข้าถึงและทำความเข้าใจข้อมูล (Crawl & Render) ได้สมบูรณ์ 100%"
          },
          {
            icon: FileText,
            title: "EEAT Content Strategy",
            desc: "วางแผนและเขียนคอนเทนต์ระดับพรีเมียมที่แสดงออกถึง 'ประสบการณ์และความเชี่ยวชาญจริง' (First-hand experience) ซึ่งเป็นสิ่งที่ AI มองหาและให้คะแนนสูง"
          },
          {
            icon: Globe,
            title: "Entity Graph Building",
            desc: "สร้างเครือข่ายความสัมพันธ์ของข้อมูล (Knowledge Graph) โยงใยแบรนด์ของคุณเข้ากับหัวข้อสำคัญ เพื่อให้ AI จดจำคุณในฐานะผู้นำอุตสาหกรรม"
          }
        ].map((svc, i) => (
          <div key={i} className="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-shadow group">
            <div className="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-indigo-600 transition-colors">
              <svc.icon className="text-indigo-600 group-hover:text-white transition-colors" size={28} />
            </div>
            <h3 className="text-xl font-bold text-slate-900 mb-3">{svc.title}</h3>
            <p className="text-slate-600 leading-relaxed mb-6">{svc.desc}</p>
            <button onClick={() => navigate('contact')} className="text-indigo-600 font-medium flex items-center gap-1 hover:gap-2 transition-all">
              ดูรายละเอียด <ArrowRight size={16}/>
            </button>
          </div>
        ))}
      </div>
    </div>
  );

  const PageWhyAIO = () => (
    <div className="pt-32 pb-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
      <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-8 text-center">ทำไมคุณต้องแคร์ AI Overview?</h1>
      <p className="text-xl text-slate-600 text-center mb-16">เพราะมันไม่ใช่แค่อนาคต แต่มันคือ "ปัจจุบัน" ของ Search Engine</p>

      <div className="prose prose-lg prose-slate max-w-none">
        <p className="lead text-xl text-slate-700 font-medium mb-8">
          ลองจินตนาการดูว่า ลูกค้าพิมพ์ค้นหาคำว่า "คลินิกรักษาสิวที่ดีที่สุด" สิ่งแรกที่พวกเขาเห็นไม่ใช่ลิงก์เว็บไซต์ 10 อันดับแรก แต่เป็นย่อหน้าที่ AI เขียนสรุปมาให้ พร้อมอ้างอิงคลินิกเพียง 2-3 แห่ง... <strong>ถ้าคุณไม่อยู่ในนั้น ยอดคลิกของคุณคือศูนย์</strong>
        </p>

        <div className="my-12 p-8 bg-slate-900 text-white rounded-3xl">
          <h3 className="text-2xl font-bold mb-4 text-white">สถิติที่คุณต้องรู้ในปี 2026</h3>
          <ul className="space-y-4">
            <li className="flex items-center gap-3"><CheckCircle2 className="text-indigo-400"/> <strong>80%</strong> ของผู้ใช้งานพอใจกับคำตอบของ AI ทันทีโดยไม่ต้องคลิกเว็บ</li>
            <li className="flex items-center gap-3"><CheckCircle2 className="text-indigo-400"/> เว็บไซต์ที่ได้เป็นอ้างอิง (Citation) ใน AIO มีอัตรา Conversion Rate สูงกว่าถึง <strong>3 เท่า</strong></li>
            <li className="flex items-center gap-3"><CheckCircle2 className="text-indigo-400"/> ทราฟฟิกของเว็บที่ทำ SEO แบบเก่า (Keyword Stuffing) ลดลงเฉลี่ย <strong>40-60%</strong></li>
          </ul>
        </div>

        <h3 className="text-2xl font-bold text-slate-900 mb-4">กฎของเกมเปลี่ยนไปแล้ว</h3>
        <p className="mb-6">
          Google ไม่ได้ใช้แค่ Keyword Matching อีกต่อไป แต่พวกเขากำลังใช้ Large Language Models (LLMs) เพื่อ "ทำความเข้าใจ" โลก AI ต้องการความจริง ความเชี่ยวชาญ และความน่าเชื่อถือ ซึ่งนั่นคือแก่นของ <strong>EEAT (Experience, Expertise, Authoritativeness, Trustworthiness)</strong>
        </p>
        <p>
          ที่ Ai Search Studio เราไม่ได้ทำแค่หลอกอัลกอริทึม แต่เราช่วยสร้าง <strong>"แบรนด์ของคุณให้เป็นผู้เชี่ยวชาญตัวจริง"</strong> ในโลกดิจิทัล ที่ AI ไม่อาจปฏิเสธได้
        </p>

        <div className="mt-12 text-center">
          <button onClick={() => navigate('contact')} className="px-8 py-4 bg-indigo-600 text-white rounded-full font-bold hover:bg-indigo-700 transition-colors shadow-lg">
            เตรียมเว็บไซต์คุณให้พร้อมสำหรับ AI
          </button>
        </div>
      </div>
    </div>
  );

  const PagePortfolio = () => (
    <div className="pt-32 pb-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
      <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4 text-center">ผลงานของเรา</h1>
      <p className="text-xl text-slate-600 text-center mb-16">ความสำเร็จของลูกค้าที่ก้าวข้ามขีดจำกัดด้วย GEO & EEAT</p>

      <div className="grid md:grid-cols-2 gap-8">
        {[
          {
            client: "คลินิกทันตกรรมครบวงจร",
            metric: "+320%",
            metricDesc: "เพิ่มอัตราส่วนการจองคิวออนไลน์",
            story: "หลังจากปรับโครงสร้างเว็บด้วยหลัก EEAT และเขียนบทความสัมภาษณ์แพทย์ผู้เชี่ยวชาญ AI Overview เริ่มดึงข้อมูลของคลินิกไปตอบคำถาม 'จัดฟันใสที่ไหนดี' ทำให้ได้ลูกค้าคุณภาพสูงโดยตรง"
          },
          {
            client: "บริษัทซอฟต์แวร์ B2B (SaaS)",
            metric: "อันดับ 1",
            metricDesc: "ใน AI Citation แซงคู่แข่งระดับโลก",
            story: "เปลี่ยนจากบทความขายของ เป็นคู่มือเชิงลึกที่สร้างจาก 'ประสบการณ์ตรง' (Experience) ผนวกกับการวาง Entity Markup ที่ชัดเจน ทำให้ AI มองว่าเป็น Authority ในอุตสาหกรรม"
          },
          {
            client: "สถาบันการเงินและลงทุน",
            metric: "+150%",
            metricDesc: "Organic Traffic ทะลุเป้า",
            story: "กู้คืนทราฟฟิกที่หายไปจากการอัปเดต Helpful Content Update ด้วยการรื้อโครงสร้างเนื้อหาใหม่หมด และเสริม Authorship (ความน่าเชื่อถือของผู้เขียน) เพื่อดึง Trust Score คืนมา"
          },
          {
            client: "แพลตฟอร์ม E-Commerce ชิ้นส่วนไอที",
            metric: "Zero-Click",
            metricDesc: "แต่ยอดขายเพิ่มขึ้น",
            story: "แม้ผู้คนจะไม่คลิกเข้าเว็บโดยตรง แต่เราทำให้แบรนด์ติดอยู่ในคำแนะนำของ AI (Product Recommendation) ทำให้ลูกค้าเข้ามาหน้าเว็บพร้อมความต้องการซื้อที่ 100% ทันที"
          }
        ].map((item, i) => (
          <div key={i} className="bg-white p-8 md:p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all">
            <div className="text-sm font-semibold text-indigo-600 uppercase tracking-wide mb-2">{item.client}</div>
            <div className="flex items-end gap-3 mb-6">
              <div className="text-5xl font-black text-slate-900">{item.metric}</div>
              <div className="text-slate-500 font-medium mb-1">{item.metricDesc}</div>
            </div>
            <p className="text-slate-600 leading-relaxed">
              <Quote className="inline-block text-slate-300 w-6 h-6 mr-2 -mt-2" />
              {item.story}
            </p>
          </div>
        ))}
      </div>
    </div>
  );

  const PagePricing = () => (
    <div className="pt-32 pb-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
      <div className="text-center max-w-3xl mx-auto mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">การลงทุนที่คุ้มค่าในระยะยาว</h1>
        <p className="text-xl text-slate-600">โปร่งใส ชัดเจน ไม่มีข้อผูกมัดแอบแฝง ออกแบบเพื่อธุรกิจทุกขนาด</p>
      </div>

      <div className="grid md:grid-cols-3 gap-8 items-center">
        {/* Starter */}
        <div className="bg-white p-8 rounded-3xl border border-slate-200">
          <h3 className="text-2xl font-bold text-slate-900 mb-2">AIO Starter</h3>
          <p className="text-slate-500 mb-6">เหมาะสำหรับธุรกิจเริ่มต้นที่ต้องการวางรากฐาน EEAT</p>
          <div className="mb-8">
            <span className="text-4xl font-black text-slate-900">฿15,000</span><span className="text-slate-500">/เดือน</span>
          </div>
          <ul className="space-y-4 mb-8">
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-500 shrink-0"/><span>Technical AIO Audit (1 ครั้ง)</span></li>
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-500 shrink-0"/><span>สร้างบทความ EEAT 4 บท/เดือน</span></li>
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-500 shrink-0"/><span>Basic Schema Markup</span></li>
            <li className="flex gap-3 text-slate-400"><X className="shrink-0"/><span>Entity Graph Customization</span></li>
          </ul>
          <button onClick={() => navigate('contact')} className="w-full py-3 rounded-full font-semibold border-2 border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white transition-colors">เลือกแพ็กเกจนี้</button>
        </div>

        {/* Pro (Highlighted) */}
        <div className="bg-slate-900 p-8 rounded-3xl border border-slate-800 shadow-2xl relative transform md:-translate-y-4">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-indigo-500 text-white px-4 py-1 rounded-full text-sm font-bold tracking-wide">RECOMMENDED</div>
          <h3 className="text-2xl font-bold text-white mb-2">Authority Pro</h3>
          <p className="text-slate-400 mb-6">สำหรับธุรกิจที่ต้องการครองตำแหน่งใน AI Overview</p>
          <div className="mb-8">
            <span className="text-4xl font-black text-white">฿35,000</span><span className="text-slate-400">/เดือน</span>
          </div>
          <ul className="space-y-4 mb-8 text-slate-300">
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-400 shrink-0"/><span className="text-white">Full GEO Strategy & Audit</span></li>
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-400 shrink-0"/><span className="text-white">สร้างบทความระดับผู้เชี่ยวชาญ 8 บท/เดือน</span></li>
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-400 shrink-0"/><span className="text-white">Advanced Entity & Schema Markup</span></li>
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-400 shrink-0"/><span className="text-white">Authorship Optimization (สร้างโปรไฟล์ผู้เชี่ยวชาญ)</span></li>
          </ul>
          <button onClick={() => navigate('contact')} className="w-full py-3 rounded-full font-bold bg-indigo-500 text-white hover:bg-indigo-400 transition-colors shadow-lg">เลือกแพ็กเกจนี้</button>
        </div>

        {/* Enterprise */}
        <div className="bg-white p-8 rounded-3xl border border-slate-200">
          <h3 className="text-2xl font-bold text-slate-900 mb-2">Enterprise GEO</h3>
          <p className="text-slate-500 mb-6">โซลูชันเต็มรูปแบบสำหรับแบรนด์ขนาดใหญ่</p>
          <div className="mb-8">
            <span className="text-4xl font-black text-slate-900">Custom</span>
          </div>
          <ul className="space-y-4 mb-8">
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-500 shrink-0"/><span>ระบบครบวงจรปรับแต่งเฉพาะธุรกิจ</span></li>
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-500 shrink-0"/><span>Content Production จำนวนมากระดับสูง</span></li>
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-500 shrink-0"/><span>PR & Brand Mentions Strategy</span></li>
            <li className="flex gap-3"><CheckCircle2 className="text-indigo-500 shrink-0"/><span>Dedicated Account Manager</span></li>
          </ul>
          <button onClick={() => navigate('contact')} className="w-full py-3 rounded-full font-semibold border-2 border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white transition-colors">ติดต่อเพื่อประเมินราคา</button>
        </div>
      </div>
    </div>
  );

  const PageWorkflow = () => (
    <div className="pt-32 pb-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
      <div className="text-center mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">ขั้นตอนการทำงานของเรา</h1>
        <p className="text-xl text-slate-600">กระบวนการที่พิสูจน์แล้วว่าสามารถสร้าง Authority ให้กับแบรนด์ได้อย่างแท้จริง</p>
      </div>

      <div className="space-y-8 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-200 before:to-transparent">
        {[
          {
            step: "01",
            title: "Discovery & AIO Audit",
            desc: "เราเริ่มต้นด้วยการวิเคราะห์เว็บไซต์ของคุณ เทียบกับมาตรฐาน EEAT ประเมินโครงสร้าง ข้อมูลเชิงเทคนิค และค้นหาโอกาส (Gap) ที่คู่แข่งยังมองไม่เห็นในโลกของ AI Search"
          },
          {
            step: "02",
            title: "Entity & Strategy Blueprint",
            desc: "ออกแบบแผนที่ความรู้ (Knowledge Graph) ของแบรนด์คุณ กำหนดหัวข้อและโครงสร้างเนื้อหาที่จะทำให้ AI รับรู้ว่าคุณคือ 'ศูนย์กลางความเชี่ยวชาญ' ในอุตสาหกรรมนั้น"
          },
          {
            step: "03",
            title: "Execution (EEAT Content & Tech)",
            desc: "ทีมงานเริ่มลงมือปรับแต่งโครงสร้างเว็บ ใส่ Schema Markup เชิงลึก และสร้างเนื้อหาคุณภาพสูงที่เขียนจาก 'ประสบการณ์ตรง' (First-hand experience) พร้อมแหล่งอ้างอิงที่น่าเชื่อถือ"
          },
          {
            step: "04",
            title: "Monitor & Iteration",
            desc: "AI เรียนรู้และเปลี่ยนแปลงตลอดเวลา เราตรวจสอบผลลัพธ์ผ่าน AI Overview Tracking อัปเดตเนื้อหาให้สดใหม่ และปรับแต่งกลยุทธ์ให้คุณอยู่ในตำแหน่งผู้นำเสมอ"
          }
        ].map((item, i) => (
          <div key={i} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
            <div className="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white bg-indigo-600 text-white font-bold text-sm shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 shadow-md relative z-10">
              {item.step}
            </div>
            <div className="w-[calc(100%-4rem)] md:w-[calc(50%-3rem)] bg-white p-6 md:p-8 rounded-2xl border border-slate-100 shadow-sm hover:shadow-lg transition-all">
              <h3 className="text-xl font-bold text-slate-900 mb-3">{item.title}</h3>
              <p className="text-slate-600 leading-relaxed">{item.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  const PageFAQ = () => (
    <div className="pt-32 pb-24 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
      <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4 text-center">คำถามที่พบบ่อย</h1>
      <p className="text-xl text-slate-600 text-center mb-16">ข้อสงสัยเกี่ยวกับการทำ AI Overview Optimization</p>

      <div className="space-y-6">
        {[
          {
            q: "AI Overview (SGE) ต่างจาก SEO แบบเดิมอย่างไร?",
            a: "SEO แบบเดิมเน้นการแทรก Keyword และการหา Backlink เพื่อให้เว็บติดหน้าแรก (Blue links) แต่ AIO เน้นที่บริบท (Context) และความน่าเชื่อถือระดับสูง (EEAT) AI จะอ่าน ทำความเข้าใจ และสรุปข้อมูลมาตอบผู้ใช้เลย โดยจะดึงข้อมูลจากเว็บที่มันมองว่า 'เป็นผู้เชี่ยวชาญที่สุด' เท่านั้น"
          },
          {
            q: "ต้องใช้เวลานานแค่ไหนถึงจะเห็นผลลัพธ์?",
            a: "โดยปกติการสร้าง Authority ในสายตา AI จะใช้เวลา 3-6 เดือน ขึ้นอยู่กับฐานข้อมูลเดิมของเว็บไซต์คุณ อย่างไรก็ตาม การปรับโครงสร้าง Entity และ Technical ทันทีในเดือนแรก จะช่วยปูทางให้การเติบโตหลังจากนั้นมั่นคงและรวดเร็ว"
          },
          {
            q: "ถ้าไม่มี AI Overview ในไทย เราต้องทำไหม?",
            a: "ปัจจุบัน Google กำลังขยายบริการ AI Overview ไปทั่วโลกและภาษาไทยกำลังเข้าสู่ระบบนี้อย่างเต็มตัว การเตรียมตัวด้วยมาตรฐาน EEAT ตั้งแต่วันนี้ ไม่เพียงแต่จะทำให้คุณพร้อมรับ AIO แต่ยังช่วยเพิ่มอันดับ SEO แบบดั้งเดิมในปัจจุบันได้อย่างมหาศาล เพราะ Google อัปเดตระบบให้ความสำคัญกับเนื้อหาคุณภาพสูงแล้ว"
          },
          {
            q: "มีรับประกันอันดับการติด AI Overview ไหม?",
            a: "ในโลกของ Search Engine ที่โปร่งใส ไม่มีใครสามารถการันตีตำแหน่ง 100% ได้ (และใครที่การันตีมักใช้วิธีผิดกฎ) แต่เราการันตีว่า กระบวนการและคุณภาพเนื้อหาของเราอยู่ในระดับแนวหน้าที่จะเพิ่มโอกาสในการถูก AI อ้างอิงได้สูงสุดตามมาตรฐานของ Google"
          },
          {
            q: "EEAT หมายถึงอะไรแบบเข้าใจง่าย?",
            a: "E = Experience (มีประสบการณ์ตรง), E = Expertise (มีความเชี่ยวชาญในเรื่องนั้น), A = Authoritativeness (เป็นที่ยอมรับในวงการ), T = Trustworthiness (มีความน่าเชื่อถือ ปลอดภัย) สรุปคือ เว็บไซต์ต้องทำตัวเหมือนผู้เชี่ยวชาญตัวจริง ไม่ใช่แค่สร้างเนื้อหาเพื่อหลอกบอท"
          }
        ].map((item, i) => (
          <div key={i} className="bg-white p-6 md:p-8 rounded-2xl border border-slate-100 shadow-sm">
            <h3 className="text-lg font-bold text-slate-900 mb-3 flex gap-3">
              <span className="text-indigo-600">Q:</span> {item.q}
            </h3>
            <p className="text-slate-600 leading-relaxed pl-7 border-l-2 border-indigo-100 ml-1.5">{item.a}</p>
          </div>
        ))}
      </div>
    </div>
  );

  const PageBlogList = () => {
    // Simulated Pagination Logic
    const itemsPerPage = 10;
    const [currentPageNum, setCurrentPageNum] = useState(1);
    
    const totalPages = Math.ceil(allArticles.length / itemsPerPage);
    const startIndex = (currentPageNum - 1) * itemsPerPage;
    const currentArticles = allArticles.slice(startIndex, startIndex + itemsPerPage);

    return (
      <div className="pt-32 pb-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">คลังความรู้ AI SEO & EEAT</h1>
          <p className="text-xl text-slate-600">
            รวมบทความคุณภาพกว่า {allArticles.length} บทความ เพื่อยกระดับเว็บไซต์คุณสู่มาตรฐานโลก
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {currentArticles.map((article) => (
            <div 
              key={article.id} 
              className="bg-white rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all flex flex-col cursor-pointer overflow-hidden group"
              onClick={() => navigate('article-detail', article)}
            >
              <div className="p-8 flex-grow">
                <div className="flex justify-between items-center mb-4">
                  <span className="text-xs font-bold text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full">{article.category}</span>
                  <span className="text-xs text-slate-400 font-medium">{article.readTime} read</span>
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-4 group-hover:text-indigo-600 transition-colors leading-snug">{article.title}</h3>
                <p className="text-slate-600 line-clamp-3 text-sm leading-relaxed mb-6">
                  {article.excerpt}
                </p>
              </div>
              <div className="px-8 py-5 border-t border-slate-50 bg-slate-50/50 flex justify-between items-center">
                <span className="text-xs font-medium text-slate-500">{article.date}</span>
                <span className="text-indigo-600 text-sm font-semibold flex items-center gap-1 group-hover:gap-2 transition-all">
                  อ่านต่อ <ArrowRight size={16} />
                </span>
              </div>
            </div>
          ))}
        </div>

        {/* Pagination Controls */}
        <div className="mt-16 flex justify-center items-center gap-2">
          <button 
            disabled={currentPageNum === 1}
            onClick={() => {setCurrentPageNum(prev => prev - 1); window.scrollTo(0,0);}}
            className="p-2 rounded-full border border-slate-200 text-slate-600 disabled:opacity-50 hover:bg-slate-50 transition-colors"
          >
            <ChevronLeft size={20} />
          </button>
          
          <div className="text-sm font-medium text-slate-600 px-4">
            หน้า {currentPageNum} จาก {totalPages} (แสดงบทความที่ {startIndex + 1}-{Math.min(startIndex + itemsPerPage, allArticles.length)} จากทั้งหมด 80 บทความ)
          </div>

          <button 
            disabled={currentPageNum === totalPages}
            onClick={() => {setCurrentPageNum(prev => prev + 1); window.scrollTo(0,0);}}
            className="p-2 rounded-full border border-slate-200 text-slate-600 disabled:opacity-50 hover:bg-slate-50 transition-colors"
          >
            <ChevronRight size={20} />
          </button>
        </div>
      </div>
    );
  };

  const PageArticleDetail = () => {
    if (!currentData) return null;
    const article = currentData;

    return (
      <div className="pt-32 pb-24 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
        <button onClick={() => navigate('blog')} className="text-indigo-600 font-medium flex items-center gap-2 mb-8 hover:underline">
          <ChevronLeft size={18} /> กลับไปหน้ารวมบทความ
        </button>

        <div className="mb-10 text-center">
          <span className="text-sm font-bold text-indigo-600 bg-indigo-50 px-4 py-1.5 rounded-full inline-block mb-6">{article.category}</span>
          <h1 className="text-3xl md:text-5xl font-black text-slate-900 mb-6 leading-tight">{article.title}</h1>
          <div className="flex justify-center items-center gap-4 text-slate-500 text-sm font-medium">
            <span>{article.date}</span>
            <span>•</span>
            <span>ใช้เวลาอ่าน {article.readTime}</span>
          </div>
        </div>

        {/* Author EEAT Box */}
        <div className="bg-slate-50 border border-slate-100 rounded-2xl p-6 flex items-center gap-6 mb-12">
          <div className="w-16 h-16 bg-slate-300 rounded-full flex-shrink-0 flex items-center justify-center overflow-hidden">
             <Users size={32} className="text-slate-500" />
          </div>
          <div>
            <div className="font-bold text-slate-900 text-lg flex items-center gap-2">
              Ai Search Editorial Team <CheckCircle2 size={16} className="text-blue-500" />
            </div>
            <p className="text-sm text-slate-600 mt-1">ผู้เชี่ยวชาญด้านอัลกอริทึม Search Engine และกลยุทธ์คอนเทนต์ระดับแนวหน้า (EEAT Certified Authorship)</p>
          </div>
        </div>

        {/* Content Body */}
        <div 
          className="prose prose-lg prose-slate max-w-none prose-headings:font-bold prose-a:text-indigo-600 hover:prose-a:text-indigo-800"
          dangerouslySetInnerHTML={{ __html: article.content }}
        />

        <div className="mt-16 pt-8 border-t border-slate-200 text-center">
          <h3 className="text-2xl font-bold text-slate-900 mb-4">พร้อมที่จะให้ AI แนะนำเว็บไซต์ของคุณหรือยัง?</h3>
          <p className="text-slate-600 mb-8">ให้ทีมงานผู้เชี่ยวชาญของเราช่วยวิเคราะห์ (Audit) เว็บไซต์ของคุณ ฟรี!</p>
          <button onClick={() => navigate('contact')} className="px-8 py-4 bg-slate-900 text-white rounded-full font-bold hover:bg-indigo-600 transition-colors shadow-lg">
            จองคิวรับคำปรึกษาทันที
          </button>
        </div>
      </div>
    );
  };

  const PageCareers = () => (
    <div className="pt-32 pb-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
      <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6 text-center">ร่วมงานกับเรา</h1>
      <p className="text-xl text-slate-600 text-center mb-16 max-w-2xl mx-auto">
        มาร่วมเป็นส่วนหนึ่งของทีมที่กำลังพลิกโฉมวงการ Search Engine Optimization ในยุค AI Generative
      </p>

      <div className="bg-indigo-600 text-white rounded-3xl p-8 md:p-12 mb-16 text-center shadow-xl">
        <Star className="w-12 h-12 text-yellow-300 mx-auto mb-6" />
        <h2 className="text-3xl font-bold mb-4">Culture ของเราเน้น "ความเชี่ยวชาญจริง"</h2>
        <p className="text-indigo-100 text-lg max-w-2xl mx-auto">
          เราไม่ใช่โรงงานปั่นบทความขยะ เราคือนักวิจัย นักกลยุทธ์ และนักสร้างสรรค์ที่หลงใหลในเทคโนโลยี หากคุณรักความท้าทายของการเอาชนะอัลกอริทึมระดับโลก ที่นี่คือที่ของคุณ
        </p>
      </div>

      <h3 className="text-2xl font-bold text-slate-900 mb-6">ตำแหน่งที่เปิดรับ (Open Roles)</h3>
      <div className="space-y-4">
        {[
          { title: "Senior EEAT Content Strategist", type: "Full-time", location: "Bangkok / Hybrid" },
          { title: "Technical AI SEO Specialist", type: "Full-time", location: "Remote" },
          { title: "Data Scientist (NLP Focus)", type: "Full-time", location: "Bangkok" }
        ].map((job, i) => (
          <div key={i} className="flex flex-col md:flex-row md:items-center justify-between p-6 bg-white rounded-2xl border border-slate-200 hover:border-indigo-600 transition-colors cursor-pointer group">
            <div>
              <h4 className="text-lg font-bold text-slate-900 group-hover:text-indigo-600 transition-colors">{job.title}</h4>
              <div className="text-sm text-slate-500 mt-2 flex gap-4">
                <span>{job.type}</span>
                <span>•</span>
                <span>{job.location}</span>
              </div>
            </div>
            <button className="mt-4 md:mt-0 text-indigo-600 font-medium px-6 py-2 rounded-full border border-indigo-100 group-hover:bg-indigo-50 transition-colors">
              สมัครตำแหน่งนี้
            </button>
          </div>
        ))}
      </div>
    </div>
  );

  const PagePrivacy = () => (
    <div className="pt-32 pb-24 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in prose prose-slate max-w-none">
      <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-8 text-center">นโยบายความเป็นส่วนตัว</h1>
      <p className="text-center text-slate-500 mb-12">ปรับปรุงล่าสุด: 24 มีนาคม 2026</p>
      
      <p>ที่ Ai Search Studio เราให้ความสำคัญสูงสุดกับความเป็นส่วนตัวและข้อมูลของลูกค้า นโยบายนี้อธิบายถึงวิธีการที่เรารวบรวม ใช้งาน และปกป้องข้อมูลส่วนบุคคลของคุณตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล (PDPA)</p>
      
      <h3>1. ข้อมูลที่เรารวบรวม</h3>
      <p>เราอาจเก็บรวบรวมข้อมูลส่วนบุคคลของคุณ เช่น ชื่อ อีเมล เบอร์โทรศัพท์ และข้อมูลที่เกี่ยวข้องกับเว็บไซต์บริษัทของคุณ เมื่อคุณติดต่อเราเพื่อขอรับบริการ Audit หรือปรึกษากลยุทธ์</p>

      <h3>2. การใช้ข้อมูล</h3>
      <p>ข้อมูลที่เราได้รับจะถูกนำไปใช้เพื่อการวิเคราะห์เว็บไซต์ (SEO/AIO Audit) การนำเสนอบริการที่เหมาะสม และการติดต่อสื่อสารทางธุรกิจเท่านั้น เราไม่ขายหรือส่งต่อข้อมูลของคุณให้บุคคลที่สามโดยเด็ดขาด (Trust & Safety)</p>

      <h3>3. มาตรการรักษาความปลอดภัย</h3>
      <p>เราใช้มาตรการทางเทคนิคระดับสูง รวมถึงการเข้ารหัสข้อมูล เพื่อป้องกันการเข้าถึง การเปลี่ยนแปลง หรือการทำลายข้อมูลส่วนบุคคลของคุณโดยไม่ได้รับอนุญาต</p>

      <h3>4. สิทธิของคุณ</h3>
      <p>คุณมีสิทธิ์ในการเข้าถึง ขอแก้ไข หรือขอลบข้อมูลส่วนบุคคลของคุณที่อยู่ในการดูแลของเราได้ตลอดเวลา โดยติดต่อผ่านช่องทาง contact@aisearchstudio.com</p>
    </div>
  );

  const PageContact = () => (
    <div className="pt-32 pb-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 animate-in fade-in">
      <div className="text-center max-w-3xl mx-auto mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">ปรึกษาผู้เชี่ยวชาญ</h1>
        <p className="text-xl text-slate-600">ก้าวแรกสู่การเป็นผู้นำใน AI Overview ลงทะเบียนเพื่อรับบริการ AIO Audit เบื้องต้น ฟรี</p>
      </div>

      <div className="grid md:grid-cols-2 gap-16 items-start">
        <div className="bg-white p-8 md:p-10 rounded-3xl border border-slate-200 shadow-xl">
          <form className="space-y-6" onSubmit={(e) => { e.preventDefault(); alert('ขอบคุณที่ติดต่อเรา ทีมงานจะติดต่อกลับภายใน 24 ชั่วโมง'); }}>
            <div className="space-y-2">
              <label className="text-sm font-bold text-slate-700">ชื่อ-นามสกุล <span className="text-red-500">*</span></label>
              <input type="text" required className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-slate-50 focus:bg-white" placeholder="พิมพ์ชื่อของคุณ" />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-bold text-slate-700">อีเมลบริษัท <span className="text-red-500">*</span></label>
              <input type="email" required className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-slate-50 focus:bg-white" placeholder="email@company.com" />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-bold text-slate-700">URL เว็บไซต์ของคุณ</label>
              <input type="url" className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-slate-50 focus:bg-white" placeholder="https://www.yourwebsite.com" />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-bold text-slate-700">เรื่องที่ต้องการปรึกษา</label>
              <textarea rows="4" className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all bg-slate-50 focus:bg-white" placeholder="อธิบายปัญหาหรือเป้าหมายที่คุณต้องการ..."></textarea>
            </div>
            <button type="submit" className="w-full py-4 bg-slate-900 text-white rounded-xl font-bold hover:bg-indigo-600 transition-colors shadow-lg text-lg flex justify-center items-center gap-2">
              ส่งข้อความ <ArrowRight size={20} />
            </button>
            <p className="text-xs text-center text-slate-500">ข้อมูลของคุณจะถูกเก็บเป็นความลับตามนโยบายความเป็นส่วนตัว</p>
          </form>
        </div>

        <div className="space-y-10">
          <div>
            <h3 className="text-2xl font-bold text-slate-900 mb-6">ข้อมูลติดต่อ</h3>
            <div className="space-y-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center shrink-0">
                  <MessageSquare size={24} />
                </div>
                <div>
                  <div className="font-bold text-slate-900 mb-1">อีเมล</div>
                  <a href="mailto:hello@aisearchstudio.com" className="text-slate-600 hover:text-indigo-600">hello@aisearchstudio.com</a>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center shrink-0">
                  <Search size={24} />
                </div>
                <div>
                  <div className="font-bold text-slate-900 mb-1">ที่ตั้งสำนักงาน (HQ)</div>
                  <p className="text-slate-600">อาคาร T-One Building ชั้น 28<br/>ซอยสุขุมวิท 40, กรุงเทพมหานคร 10110</p>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-slate-50 p-8 rounded-3xl border border-slate-200">
            <h4 className="font-bold text-slate-900 mb-3 text-lg">ทำไมต้องติดต่อเราตอนนี้?</h4>
            <p className="text-slate-600 text-sm leading-relaxed mb-4">
              การทำ AIO Optimization คือการทำงานกับโครงสร้างที่ซับซ้อน ยิ่งคุณเริ่มสร้าง <strong>Entity Graph</strong> และสะสมความน่าเชื่อถือ (Trust) เร็วเท่าไหร่ คู่แข่งก็จะตามคุณทันได้ยากเท่านั้น
            </p>
            <div className="flex items-center gap-2 text-indigo-600 font-semibold text-sm">
              <CheckCircle2 size={16} /> ผู้เชี่ยวชาญพร้อมให้คำปรึกษา
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  // --- RENDER CONTROLLER ---
  const renderPage = () => {
    switch(currentPage) {
      case 'home': return <PageHome />;
      case 'about': return <PageAbout />;
      case 'services': return <PageServices />;
      case 'why-aio': return <PageWhyAIO />;
      case 'portfolio': return <PagePortfolio />;
      case 'pricing': return <PagePricing />;
      case 'workflow': return <PageWorkflow />;
      case 'faq': return <PageFAQ />;
      case 'blog': return <PageBlogList />;
      case 'article-detail': return <PageArticleDetail />;
      case 'careers': return <PageCareers />;
      case 'privacy': return <PagePrivacy />;
      case 'contact': return <PageContact />;
      default: return <PageHome />;
    }
  };

  return (
    <div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col selection:bg-indigo-200 selection:text-indigo-900">
      {/* Global Font Injection for Thai (Prompt) */}
      <style dangerouslySetInnerHTML={{__html: `
        @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800;900&display=swap');
        body { font-family: 'Prompt', sans-serif; }
      `}} />
      
      <Navbar />
      
      <main className="flex-grow">
        {renderPage()}
      </main>

      <Footer />
    </div>
  );
}