
<!DOCTYPE html>
<html lang="th" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Documentation - iHaveMovie</title>
    
    <!-- Favicon -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>">
    <meta name="description" content="เว็บฐานข้อมูลภาพยนตร์ — ค้นหา เรียกดู และรีวิว โดยข้อมูลหลักจาก The Movie Database (TMDB) พร้อมรหัส IMDB">
    <meta name="keywords" content="ฐานข้อมูลหนัง, TMDB, IMDB, ภาพยนตร์, รีวิวหนัง, คะแนนหนัง, หนังใหม่, หนังยอดนิยม">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://ihavemovie.com/api/">
    
    <!-- PWA Meta Tags -->
    <meta name="application-name" content="iHaveMovie">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="iHaveMovie">
    <meta name="format-detection" content="telephone=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="msapplication-config" content="/browserconfig.xml">
    <meta name="msapplication-TileColor" content="#0a0a0c">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="theme-color" content="#0a0a0c">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="https://ihavemovie.com/manifest.json">
    
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="https://ihavemovie.com/assets/images/icon-180x180.png">
    <link rel="apple-touch-icon" sizes="152x152" href="https://ihavemovie.com/assets/images/icon-152x152.png">
    <link rel="apple-touch-icon" sizes="144x144" href="https://ihavemovie.com/assets/images/icon-144x144.png">
    <link rel="apple-touch-icon" sizes="120x120" href="https://ihavemovie.com/assets/images/icon-120x120.png">
    <link rel="apple-touch-icon" sizes="114x114" href="https://ihavemovie.com/assets/images/icon-114x114.png">
    <link rel="apple-touch-icon" sizes="76x76" href="https://ihavemovie.com/assets/images/icon-76x76.png">
    <link rel="apple-touch-icon" sizes="72x72" href="https://ihavemovie.com/assets/images/icon-72x72.png">
    <link rel="apple-touch-icon" sizes="60x60" href="https://ihavemovie.com/assets/images/icon-60x60.png">
    <link rel="apple-touch-icon" sizes="57x57" href="https://ihavemovie.com/assets/images/icon-57x57.png">
    
    <!-- Standard Favicons -->
    <link rel="icon" type="image/png" sizes="32x32" href="https://ihavemovie.com/assets/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://ihavemovie.com/assets/images/favicon-16x16.png">
    <link rel="shortcut icon" href="https://ihavemovie.com/assets/images/favicon.ico">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://ihavemovie.com/api/">
    <meta property="og:title" content="API Documentation - iHaveMovie">
    <meta property="og:description" content="เว็บฐานข้อมูลภาพยนตร์ — ค้นหา เรียกดู และรีวิว โดยข้อมูลหลักจาก The Movie Database (TMDB) พร้อมรหัส IMDB">
    <meta property="og:image" content="https://ihavemovie.com/assets/images/og-default.jpg">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://ihavemovie.com/api/">
    <meta property="twitter:title" content="API Documentation - iHaveMovie">
    <meta property="twitter:description" content="เว็บฐานข้อมูลภาพยนตร์ — ค้นหา เรียกดู และรีวิว โดยข้อมูลหลักจาก The Movie Database (TMDB) พร้อมรหัส IMDB">
    <meta property="twitter:image" content="https://ihavemovie.com/assets/images/og-default.jpg">
    
    <link rel="icon" type="image/x-icon" href="https://ihavemovie.com/assets/images/favicon.ico">

    <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=Noto+Sans+Thai:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS (CDN) -->
    <script src="https://cdn.tailwindcss.com/?v=1776502088"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Noto Sans Thai"', 'Outfit', 'system-ui', 'sans-serif'],
                        display: ['Outfit', '"Noto Sans Thai"', 'system-ui', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            DEFAULT: '#f59e0b',
                            hover: '#fbbf24',
                            muted: 'rgba(245, 158, 11, 0.15)',
                        },
                    },
                },
            },
        };
    </script>
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="https://ihavemovie.com/assets/css/style.css?v=1776502088">
    
    <!-- Thai Language Support -->
    <script>
        // Thai date formatting for JavaScript
        function formatThaiDate(date, format = 'long') {
            const dateObj = new Date(date);
            const year = dateObj.getFullYear() + 543;
            const thaiMonths = [
                'มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน',
                'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'
            ];
            
            if (format === 'short') {
                return dateObj.getDate() + '/' + (dateObj.getMonth() + 1) + '/' + year;
            }
            
            return dateObj.getDate() + ' ' + thaiMonths[dateObj.getMonth()] + ' ' + year;
        }
        
        // Number formatting for Thai
        function formatThaiNumber(number) {
            return new Intl.NumberFormat('th-TH').format(number);
        }
    </script>
    
    <!-- Alpine.js -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js?v=1776502088"></script>
    
    </head>
<body class="bg-zinc-950 text-zinc-100 min-h-screen font-sans antialiased selection:bg-amber-500/30 selection:text-white">
    <a href="#main-content" class="skip-link">ข้ามไปยังเนื้อหา</a>
    <!-- Navigation -->
    <nav class="nav-glass sticky top-0 z-50 supports-[backdrop-filter]:bg-zinc-950/70" x-data="{ mobileMenuOpen: false, searchOpen: false, userMenuOpen: false }" aria-label="หลัก">
        <div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-14 sm:h-16">
                <!-- Logo and main navigation -->
                <div class="flex items-center space-x-4 sm:space-x-8">
                    <a href="https://ihavemovie.com" class="flex items-center space-x-2 touch-manipulation rounded-lg focus-visible:ring-2 focus-visible:ring-amber-400 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950">
                        <div class="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg shadow-amber-900/20">
                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
                            </svg>
                        </div>
                        <span class="text-lg sm:text-xl font-bold font-display tracking-tight text-white">iHaveMovie</span>
                    </a>
                    
                    <!-- Desktop navigation -->
                    <div class="hidden md:flex items-center space-x-6">
                        <a href="https://ihavemovie.com" 
                           class="text-amber-400 font-medium transition-colors duration-200 rounded-md px-1 py-0.5">
                            หน้าหลัก
                        </a>
                        <a href="https://ihavemovie.com/movies" 
                           class="text-zinc-400 hover:text-white transition-colors duration-200 rounded-md px-1 py-0.5">
                            ภาพยนตร์
                        </a>
                        <a href="https://ihavemovie.com/genres" 
                           class="text-zinc-400 hover:text-white transition-colors duration-200 rounded-md px-1 py-0.5">
                            ประเภท
                        </a>
                        <a href="https://ihavemovie.com/top-rated" 
                           class="text-zinc-400 hover:text-white transition-colors duration-200 rounded-md px-1 py-0.5">
                            ยอดนิยม
                        </a>
                    </div>
                </div>
                
                <!-- Search and user menu -->
                <div class="flex items-center space-x-2 sm:space-x-4">
                    <!-- Search -->
                    <div class="relative">
                        <button type="button" @click="searchOpen = !searchOpen" 
                                class="p-2 text-zinc-400 hover:text-white transition-colors duration-200 touch-manipulation rounded-lg hover:bg-white/5 active:bg-white/10"
                                x-bind:aria-expanded="searchOpen" aria-label="เปิดการค้นหา">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </button>
                        
                        <div x-show="searchOpen" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 scale-95"
                             x-transition:enter-end="opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="opacity-100 scale-100"
                             x-transition:leave-end="opacity-0 scale-95"
                             @click.outside="searchOpen = false"
                             class="absolute right-0 mt-2 w-72 sm:w-80 bg-zinc-900/95 backdrop-blur-xl border border-white/10 rounded-xl shadow-2xl shadow-black/40 z-50">
                            <form action="https://ihavemovie.com/search" method="GET" class="p-3 sm:p-4" role="search">
                                <input type="search" name="q" placeholder="ค้นหาภาพยนตร์..." autocomplete="off"
                                       class="w-full px-3 py-3 bg-zinc-800/80 border border-white/10 rounded-lg text-zinc-100 placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-500/40 focus:border-amber-500/40 text-base">
                            </form>
                        </div>
                    </div>
                    
                                            <!-- Login/Register - Desktop only -->
                        <div class="hidden md:flex items-center space-x-2">
                            <a href="https://ihavemovie.com/login" 
                               class="p-2 text-zinc-400 hover:text-white transition-colors duration-200 touch-manipulation rounded-lg hover:bg-white/5 text-sm font-medium">
                                เข้าสู่ระบบ
                            </a>
                            <span class="text-zinc-700" aria-hidden="true">|</span>
                            <a href="https://ihavemovie.com/register" 
                               class="bg-amber-500 hover:bg-amber-400 active:bg-amber-600 text-zinc-950 px-3 py-2 rounded-lg text-sm font-semibold transition-colors duration-200 touch-manipulation shadow-md shadow-amber-900/30">
                                สมัครสมาชิก
                            </a>
                        </div>
                                        
                    <!-- Mobile menu button -->
                    <button type="button" @click="mobileMenuOpen = !mobileMenuOpen" 
                            class="md:hidden p-2 text-zinc-400 hover:text-white transition-colors duration-200 touch-manipulation rounded-lg hover:bg-white/5 active:bg-white/10"
                            aria-label="เมนู">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path x-show="!mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                            <path x-show="mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Mobile menu -->
            <div x-show="mobileMenuOpen" 
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 -translate-y-1"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 -translate-y-1"
                 class="md:hidden border-t border-white/10 py-3 space-y-1 bg-zinc-950/95 backdrop-blur-md">
                <a href="https://ihavemovie.com" 
                   class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 active:bg-gray-600 transition-colors duration-200 touch-manipulation text-base font-medium">
                    🏠 หน้าหลัก
                </a>
                <a href="https://ihavemovie.com/movies" 
                   class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 active:bg-gray-600 transition-colors duration-200 touch-manipulation text-base font-medium">
                    🎬 ภาพยนตร์
                </a>
                <a href="https://ihavemovie.com/genres" 
                   class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 active:bg-gray-600 transition-colors duration-200 touch-manipulation text-base font-medium">
                    📂 ประเภท
                </a>
                <a href="https://ihavemovie.com/top-rated" 
                   class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 active:bg-gray-600 transition-colors duration-200 touch-manipulation text-base font-medium">
                    ⭐ ยอดนิยม
                </a>
                
                <!-- Mobile search -->
                <div class="px-4 py-3 border-t border-gray-700">
                    <form action="https://ihavemovie.com/search" method="GET">
                        <input type="text" name="q" placeholder="🔍 ค้นหาภาพยนตร์..." 
                               class="w-full px-4 py-3 bg-zinc-800/80 border border-white/10 rounded-lg text-zinc-100 placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-500/40 focus:border-amber-500/30 text-base">
                    </form>
                </div>

                                    <!-- Mobile login/register -->
                    <div class="border-t border-gray-700 pt-3 space-y-2">
                        <a href="https://ihavemovie.com/login" 
                           class="block mx-4 px-4 py-3 text-center bg-gray-700 hover:bg-gray-600 active:bg-gray-500 text-white rounded-lg transition-colors duration-200 touch-manipulation text-base font-medium">
                            🔑 เข้าสู่ระบบ
                        </a>
                        <a href="https://ihavemovie.com/register" 
                           class="block mx-4 px-4 py-3 text-center bg-amber-500 hover:bg-amber-400 active:bg-amber-600 text-zinc-950 rounded-lg transition-colors duration-200 touch-manipulation text-base font-semibold shadow-lg shadow-amber-900/25">
                            สมัครสมาชิก
                        </a>
                    </div>
                            </div>
        </div>
    </nav>

    <!-- Main content -->
    <main id="main-content">
<div class="min-h-screen bg-gray-900 py-16">
    <div class="max-w-6xl mx-auto px-4">
        <!-- Header -->
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-white mb-4">IHaveMovie API</h1>
            <p class="text-xl text-gray-400 mb-6">
                RESTful API for accessing movie data and user interactions
            </p>
            <div class="flex justify-center space-x-4">
                <span class="bg-green-600 text-white px-3 py-1 rounded-full text-sm">Version 1.0.0</span>
                <span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">JSON API</span>
                <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm">Rate Limited</span>
            </div>
        </div>

        <!-- Quick Start -->
        <div class="bg-gray-800 rounded-lg p-6 mb-8">
            <h2 class="text-2xl font-semibold text-white mb-4">Quick Start</h2>
            <div class="bg-gray-900 rounded p-4 mb-4">
                <code class="text-green-400">
                    curl -H "Accept: application/json" https://ihavemovie.com/api/movies
                </code>
            </div>
            <p class="text-gray-300">
                All API responses are in JSON format. Include <code class="bg-gray-700 px-2 py-1 rounded">Accept: application/json</code> header for best compatibility.
            </p>
        </div>

        <!-- Rate Limiting -->
        <div class="bg-gray-800 rounded-lg p-6 mb-8">
            <h2 class="text-2xl font-semibold text-white mb-4">Rate Limiting</h2>
            <p class="text-gray-300 mb-4">
                API requests are limited to <strong>100 requests per hour per IP address</strong>. 
                Rate limit information is included in response headers:
            </p>
            <ul class="text-gray-400 space-y-2">
                <li><code class="bg-gray-700 px-2 py-1 rounded">X-RateLimit-Limit</code>: Maximum requests per hour</li>
                <li><code class="bg-gray-700 px-2 py-1 rounded">X-RateLimit-Remaining</code>: Requests remaining in current window</li>
                <li><code class="bg-gray-700 px-2 py-1 rounded">X-RateLimit-Reset</code>: Time when rate limit resets</li>
            </ul>
        </div>

        <!-- Authentication -->
        <div class="bg-gray-800 rounded-lg p-6 mb-8">
            <h2 class="text-2xl font-semibold text-white mb-4">Authentication</h2>
            <p class="text-gray-300 mb-4">
                Some endpoints require user authentication. Authentication is session-based:
            </p>
            <ol class="text-gray-400 space-y-2 list-decimal list-inside">
                <li>Login through the web interface at <a href="https://ihavemovie.com/pages/login.php" class="text-blue-400">/pages/login.php</a></li>
                <li>Session cookies will be automatically included in subsequent API requests</li>
                <li>Admin operations require admin privileges</li>
            </ol>
        </div>

        <!-- Endpoints -->
        <div class="space-y-8">
            <!-- Movies Endpoints -->
            <div class="bg-gray-800 rounded-lg p-6">
                <h2 class="text-2xl font-semibold text-white mb-4">Movies Endpoints</h2>
                
                <div class="space-y-6">
                    <!-- Get All Movies -->
                    <div class="border-l-4 border-blue-500 pl-4">
                        <h3 class="text-lg font-semibold text-white mb-2">
                            <span class="bg-green-600 text-white px-2 py-1 rounded text-sm mr-2">GET</span>
                            /api/movies
                        </h3>
                        <p class="text-gray-300 mb-2">Get all movies with pagination support.</p>
                        <div class="bg-gray-900 rounded p-3 mb-2">
                            <strong class="text-gray-400">Query Parameters:</strong>
                            <ul class="text-gray-400 mt-1 text-sm">
                                <li><code>limit</code> - Number of items per page (max 100, default 20)</li>
                                <li><code>offset</code> - Number of items to skip (default 0)</li>
                                <li><code>page</code> - Page number (alternative to offset)</li>
                            </ul>
                        </div>
                        <div class="bg-gray-900 rounded p-3">
                            <code class="text-green-400">curl https://ihavemovie.com/api/movies?limit=10&page=2</code>
                        </div>
                    </div>

                    <!-- Get Movie by ID -->
                    <div class="border-l-4 border-blue-500 pl-4">
                        <h3 class="text-lg font-semibold text-white mb-2">
                            <span class="bg-green-600 text-white px-2 py-1 rounded text-sm mr-2">GET</span>
                            /api/movies/{id}
                        </h3>
                        <p class="text-gray-300 mb-2">Get detailed information about a specific movie.</p>
                        <div class="bg-gray-900 rounded p-3 mb-2">
                            <strong class="text-gray-400">Query Parameters:</strong>
                            <ul class="text-gray-400 mt-1 text-sm">
                                <li><code>include</code> - Additional data to include (genres, cast, reviews)</li>
                            </ul>
                        </div>
                        <div class="bg-gray-900 rounded p-3">
                            <code class="text-green-400">curl https://ihavemovie.com/api/movies/1?include=genres,cast</code>
                        </div>
                    </div>

                    <!-- Search Movies -->
                    <div class="border-l-4 border-blue-500 pl-4">
                        <h3 class="text-lg font-semibold text-white mb-2">
                            <span class="bg-green-600 text-white px-2 py-1 rounded text-sm mr-2">GET</span>
                            /api/movies/search
                        </h3>
                        <p class="text-gray-300 mb-2">Search movies by title, description, genre, or year.</p>
                        <div class="bg-gray-900 rounded p-3 mb-2">
                            <strong class="text-gray-400">Query Parameters:</strong>
                            <ul class="text-gray-400 mt-1 text-sm">
                                <li><code>q</code> - Search query (title, description)</li>
                                <li><code>genre</code> - Genre ID filter</li>
                                <li><code>year</code> - Release year filter</li>
                                <li><code>limit</code> - Results per page (default 20)</li>
                                <li><code>offset</code> - Results to skip (default 0)</li>
                            </ul>
                        </div>
                        <div class="bg-gray-900 rounded p-3">
                            <code class="text-green-400">curl "https://ihavemovie.com/api/movies/search?q=action&year=2023"</code>
                        </div>
                    </div>

                    <!-- Specialized Movie Lists -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="bg-gray-900 rounded p-4">
                            <h4 class="text-white font-semibold mb-2">
                                <span class="bg-green-600 text-white px-2 py-1 rounded text-xs mr-2">GET</span>
                                /api/movies/featured
                            </h4>
                            <p class="text-gray-400 text-sm">Get featured movies</p>
                        </div>
                        
                        <div class="bg-gray-900 rounded p-4">
                            <h4 class="text-white font-semibold mb-2">
                                <span class="bg-green-600 text-white px-2 py-1 rounded text-xs mr-2">GET</span>
                                /api/movies/trending
                            </h4>
                            <p class="text-gray-400 text-sm">Get trending movies</p>
                        </div>
                        
                        <div class="bg-gray-900 rounded p-4">
                            <h4 class="text-white font-semibold mb-2">
                                <span class="bg-green-600 text-white px-2 py-1 rounded text-xs mr-2">GET</span>
                                /api/movies/popular
                            </h4>
                            <p class="text-gray-400 text-sm">Get popular movies</p>
                        </div>
                        
                        <div class="bg-gray-900 rounded p-4">
                            <h4 class="text-white font-semibold mb-2">
                                <span class="bg-green-600 text-white px-2 py-1 rounded text-xs mr-2">GET</span>
                                /api/movies/top-rated
                            </h4>
                            <p class="text-gray-400 text-sm">Get top rated movies</p>
                        </div>
                    </div>

                    <!-- Admin Operations -->
                    <div class="bg-red-900 bg-opacity-20 border border-red-800 rounded-lg p-4">
                        <h4 class="text-red-400 font-semibold mb-2">Admin Only Operations</h4>
                        <div class="space-y-2 text-sm">
                            <div>
                                <span class="bg-blue-600 text-white px-2 py-1 rounded text-xs mr-2">POST</span>
                                <code class="text-gray-300">/api/movies</code> - Create new movie
                            </div>
                            <div>
                                <span class="bg-yellow-600 text-white px-2 py-1 rounded text-xs mr-2">PUT</span>
                                <code class="text-gray-300">/api/movies/{id}</code> - Update movie
                            </div>
                            <div>
                                <span class="bg-red-600 text-white px-2 py-1 rounded text-xs mr-2">DELETE</span>
                                <code class="text-gray-300">/api/movies/{id}</code> - Delete movie
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Response Examples -->
            <div class="bg-gray-800 rounded-lg p-6">
                <h2 class="text-2xl font-semibold text-white mb-4">Response Examples</h2>
                
                <h3 class="text-lg font-semibold text-white mb-2">Movie List Response</h3>
                <div class="bg-gray-900 rounded p-4 mb-6 overflow-x-auto">
                    <pre class="text-sm text-gray-300"><code>{
  "data": [
    {
      "id": 1,
      "title": "The Shawshank Redemption",
      "release_date": "1994-09-23",
      "vote_average": 8.7,
      "poster_path": "/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg",
      "poster_url": "https://image.tmdb.org/t/p/w500/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg"
    }
  ],
  "pagination": {
    "limit": 20,
    "offset": 0,
    "total": 1000,
    "has_more": true
  }
}</code></pre>
                </div>

                <h3 class="text-lg font-semibold text-white mb-2">Error Response</h3>
                <div class="bg-gray-900 rounded p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-300"><code>{
  "error": "Movie not found"
}</code></pre>
                </div>
            </div>

            <!-- Status Codes -->
            <div class="bg-gray-800 rounded-lg p-6">
                <h2 class="text-2xl font-semibold text-white mb-4">HTTP Status Codes</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <h3 class="text-lg font-semibold text-white mb-2">Success Codes</h3>
                        <ul class="text-gray-300 space-y-1">
                            <li><code class="text-green-400">200 OK</code> - Request successful</li>
                            <li><code class="text-green-400">201 Created</code> - Resource created</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-white mb-2">Error Codes</h3>
                        <ul class="text-gray-300 space-y-1">
                            <li><code class="text-red-400">400 Bad Request</code> - Invalid request</li>
                            <li><code class="text-red-400">401 Unauthorized</code> - Authentication required</li>
                            <li><code class="text-red-400">403 Forbidden</code> - Insufficient permissions</li>
                            <li><code class="text-red-400">404 Not Found</code> - Resource not found</li>
                            <li><code class="text-red-400">429 Too Many Requests</code> - Rate limit exceeded</li>
                            <li><code class="text-red-400">500 Internal Server Error</code> - Server error</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Testing -->
        <div class="bg-blue-900 bg-opacity-50 border border-blue-600 rounded-lg p-6 mt-8">
            <h2 class="text-2xl font-semibold text-white mb-4">Try it Out</h2>
            <p class="text-blue-100 mb-4">
                You can test the API endpoints directly using curl, Postman, or any HTTP client. 
                Here are some example requests you can try:
            </p>
            
            <div class="space-y-2">
                <div class="bg-gray-900 rounded p-3">
                    <code class="text-green-400">curl -H "Accept: application/json" https://ihavemovie.com/api/movies/featured</code>
                </div>
                <div class="bg-gray-900 rounded p-3">
                    <code class="text-green-400">curl -H "Accept: application/json" "https://ihavemovie.com/api/movies/search?q=action"</code>
                </div>
                <div class="bg-gray-900 rounded p-3">
                    <code class="text-green-400">curl -H "Accept: application/json" https://ihavemovie.com/api/movies/1</code>
                </div>
            </div>
        </div>
    </div>
</div>

    </main>

    <!-- Footer -->
    <footer class="bg-zinc-900/80 border-t border-white/10 backdrop-blur-sm">
        <div class="max-w-7xl mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- Brand -->
                <div class="col-span-1">
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-8 h-8 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center shadow-md shadow-amber-900/20">
                            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
                            </svg>
                        </div>
                        <span class="text-xl font-bold font-display tracking-tight text-white">iHaveMovie</span>
                    </div>
                    <p class="text-zinc-400 text-sm leading-relaxed mb-4">
                        ปลายทางที่ดีที่สุดสำหรับการค้นพบภาพยนตร์ที่น่าทึ่ง อ่านรีวิว และสร้างรายการดูส่วนตัวของคุณ
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-zinc-500 hover:text-amber-400 transition-colors duration-200 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                            </svg>
                        </a>
                        <a href="#" class="text-zinc-500 hover:text-amber-400 transition-colors duration-200 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
                            </svg>
                        </a>
                        <a href="#" class="text-zinc-500 hover:text-amber-400 transition-colors duration-200 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M22.2 5.6a3 3 0 0 0-2.1-2.1C18.25 3 12 3 12 3s-6.25 0-8.1.5a3 3 0 0 0-2.1 2.1C1.25 7.45 1.25 12 1.25 12s0 4.55.55 6.4a3 3 0 0 0 2.1 2.1c1.85.5 8.1.5 8.1.5s6.25 0 8.1-.5a3 3 0 0 0 2.1-2.1c.55-1.85.55-6.4.55-6.4s0-4.55-.55-6.4zM9.75 15.02l.01-6.04L15.5 12l-5.75 3.02z"/>
                            </svg>
                        </a>
                        <a href="#" class="text-zinc-500 hover:text-amber-400 transition-colors duration-200 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.739.1.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.054.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z"/>
                            </svg>
                        </a>
                    </div>
                </div>
                
                <!-- Navigation -->
                <div class="col-span-1">
                    <h3 class="text-zinc-200 font-semibold mb-4 text-sm uppercase tracking-wider">สำรวจ</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="https://ihavemovie.com/movies" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">ภาพยนตร์ทั้งหมด</a></li>
                        <li><a href="https://ihavemovie.com/genres" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">ประเภท</a></li>
                        <li><a href="https://ihavemovie.com/top-rated" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">คะแนนสูงสุด</a></li>
                        <li><a href="https://ihavemovie.com/latest" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">ภาพยนตร์ล่าสุด</a></li>
                        <li><a href="https://ihavemovie.com/trending" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">กำลังมาแรง</a></li>
                    </ul>
                </div>
                
                <!-- Account -->
                <div class="col-span-1">
                    <h3 class="text-zinc-200 font-semibold mb-4 text-sm uppercase tracking-wider">บัญชี</h3>
                    <ul class="space-y-2 text-sm">
                                                    <li><a href="https://ihavemovie.com/login" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">เข้าสู่ระบบ</a></li>
                            <li><a href="https://ihavemovie.com/register" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">สร้างบัญชี</a></li>
                                            </ul>
                </div>
                
                <!-- Support -->
                <div class="col-span-1">
                    <h3 class="text-zinc-200 font-semibold mb-4 text-sm uppercase tracking-wider">สนับสนุน</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="https://ihavemovie.com/about" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">เกี่ยวกับเรา</a></li>
                        <li><a href="https://ihavemovie.com/contact" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">ติดต่อเรา</a></li>
                        <li><a href="https://ihavemovie.com/privacy" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">นโยบายความเป็นส่วนตัว</a></li>
                        <li><a href="https://ihavemovie.com/terms" class="text-zinc-400 hover:text-amber-400 transition-colors duration-200">เงื่อนไขการใช้งาน</a></li>
                        <li><a href="https://ihavemovie.com/api/" class="text-zinc-400 hover:text-teal-400 transition-colors duration-200">API</a></li>
                    </ul>
                </div>
            </div>
            
            <hr class="border-white/10 my-8">
            
            <div class="flex flex-col md:flex-row justify-between items-center text-sm text-zinc-500">
                <p>&copy; 2026 iHaveMovie. สงวนลิขสิทธิ์ทั้งหมด</p>
                <p class="mt-2 md:mt-0">
                    สร้างด้วย ❤️
                </p>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script>
        window.__APP_URL__ = "https://ihavemovie.com";
    </script>
    <script src="https://ihavemovie.com/assets/js/app.js?v=1776502088"></script>
    
    <!-- PWA Script -->
    <script src="https://ihavemovie.com/assets/js/pwa.js?v=1776502088"></script>
    
    <!-- Movie Player JavaScript for pages that show movie cards -->
            <script>
            // Set global variables for movie functionality
            if (typeof window.APP_URL === 'undefined') {
                window.APP_URL = 'https://ihavemovie.com';
            }
        </script>
        <script src="https://ihavemovie.com/assets/js/movie.js?v=1776502088"></script>
        
        
    <!-- Performance optimization -->
    <script>
        // Lazy load images
        if ('IntersectionObserver' in window) {
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        img.classList.remove('lazy');
                        imageObserver.unobserve(img);
                    }
                });
            });

            document.querySelectorAll('img[data-src]').forEach(img => {
                imageObserver.observe(img);
            });
        }
        
        // Service Worker for caching (if available)
        if ('serviceWorker' in navigator && 'development' === 'production') {
            navigator.serviceWorker.register('https://ihavemovie.com/sw.js');
        }
    </script>
</body>
</html>