import type { Metadata } from 'next'
import Link from 'next/link'

export const metadata: Metadata = {
  title: 'นโยบายคุกกี้ | MoreminiMore',
  description: 'นโยบายการใช้คุกกี้ของเว็บไซต์ moreminimore.com',
  keywords: 'นโยบายคุกกี้, Cookie, PDPA, MoreminiMore',
  openGraph: {
    title: 'นโยบายคุกกี้ | MoreminiMore',
    description: 'นโยบายการใช้คุกกี้ของเว็บไซต์ moreminimore.com',
    url: 'https://moreminimore.com/cookie-policy',
    siteName: 'MoreminiMore',
    locale: 'th_TH',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'นโยบายคุกกี้ | MoreminiMore',
    description: 'นโยบายการใช้คุกกี้ของเว็บไซต์ moreminimore.com',
  },
  alternates: {
    canonical: 'https://moreminimore.com/cookie-policy',
  },
}

export default function CookiePolicyPage() {
  return (
    <main className="flex-grow">
      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-br from-yellow-50 to-white">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl md:text-5xl font-bold text-center mb-12 text-gray-900">
            นโยบายคุกกี้
          </h1>

          <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
            {/* Document Info */}
            <div className="bg-yellow-50 rounded-lg p-6 mb-8 border border-yellow-200">
              <p className="text-gray-700 text-base">
                <strong>ชื่อเว็บไซต์:</strong> MoreminiMore<br />
                <strong>ผู้ควบคุมข้อมูล:</strong> บริษัท มอร์มินิมอร์ จำกัด<br />
                <strong>มีผลบังคับใช้วันที่:</strong> 1 มีนาคม 2569<br />
                <strong>แก้ไขล่าสุด:</strong> 1 เมษายน 2569
              </p>
            </div>

            {/* Table of Contents */}
            <div className="bg-yellow-50 rounded-lg p-6 mb-8 border border-yellow-200">
              <h2 className="text-xl font-bold mb-4 text-gray-900">สารบัญ</h2>
              <nav className="space-y-2">
                <a href="#section-1" className="block text-gray-700 hover:text-accent-blue transition-colors">1. คุกกี้คืออะไร?</a>
                <a href="#section-2" className="block text-gray-700 hover:text-accent-blue transition-colors">2. ประเภทของคุกกี้ที่เราใช้</a>
                <a href="#section-3" className="block text-gray-700 hover:text-accent-blue transition-colors">3. คุกกี้ที่จำเป็น (Necessary)</a>
                <a href="#section-4" className="block text-gray-700 hover:text-accent-blue transition-colors">4. คุกกี้เพื่อประสิทธิภาพ (Performance)</a>
                <a href="#section-5" className="block text-gray-700 hover:text-accent-blue transition-colors">5. คุกกี้เพื่อการทำงาน (Functional)</a>
                <a href="#section-6" className="block text-gray-700 hover:text-accent-blue transition-colors">6. คุกกี้เพื่อการตลาด (Marketing)</a>
                <a href="#section-7" className="block text-gray-700 hover:text-accent-blue transition-colors">7. การจัดการคุกกี้</a>
                <a href="#section-8" className="block text-gray-700 hover:text-accent-blue transition-colors">8. การเปลี่ยนแปลงนโยบาย</a>
                <a href="#section-9" className="block text-gray-700 hover:text-accent-blue transition-colors">9. การติดต่อ</a>
              </nav>
            </div>

            {/* Section 1: What are Cookies */}
            <h2 id="section-1" className="text-2xl font-bold mb-4 text-gray-900 mt-8">1. คุกกี้คืออะไร?</h2>
            <p className="mb-6 text-gray-600">
              คุกกี้ (Cookies) คือไฟล์ข้อความขนาดเล็กที่เว็บไซต์ส่งไปเก็บไว้ในอุปกรณ์ของท่าน (คอมพิวเตอร์, สมาร์ทโฟน, หรือแท็บเล็ต) เมื่อท่านเข้าชมเว็บไซต์ คุกกี้ช่วยให้เว็บไซต์จดจำการตั้งค่าและการกระทำของท่านได้
            </p>
            <p className="mb-6 text-gray-600">
              คุกกี้ถูกใช้อย่างแพร่หลายเพื่อปรับปรุงประสบการณ์การใช้งานเว็บไซต์ เช่น จดจำการเข้าสู่ระบบ จดจำสินค้าในตะกร้า หรือปรับแต่งเนื้อหาตามความชอบของท่าน
            </p>

            {/* Section 2: Types We Use */}
            <h2 id="section-2" className="text-2xl font-bold mb-4 text-gray-900 mt-8">2. ประเภทของคุกกี้ที่เราใช้</h2>
            <p className="mb-6 text-gray-600">
              เราใช้คุกกี้หลายประเภทบนเว็บไซต์ของเรา ซึ่งสามารถจำแนกได้ดังนี้:
            </p>
            <ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
              <li><strong>คุกกี้ที่จำเป็น (Necessary Cookies)</strong> - จำเป็นสำหรับการทำงานพื้นฐานของเว็บไซต์</li>
              <li><strong>คุกกี้เพื่อประสิทธิภาพ (Performance Cookies)</strong> - ช่วยวิเคราะห์และปรับปรุงการทำงานของเว็บไซต์</li>
              <li><strong>คุกกี้เพื่อการทำงาน (Functional Cookies)</strong> - จดจำการตั้งค่าของท่าน</li>
              <li><strong>คุกกี้เพื่อการตลาด (Marketing Cookies)</strong> - ติดตามกิจกรรมเพื่อแสดงโฆษณาที่เกี่ยวข้อง</li>
            </ul>

            {/* Section 3: Necessary Cookies */}
            <h2 id="section-3" className="text-2xl font-bold mb-4 text-gray-900 mt-8">3. คุกกี้ที่จำเป็น (Necessary Cookies)</h2>
            <p className="mb-4 text-gray-600">
              คุกกี้ที่จำเป็นเป็นคุกกี้ที่ไม่สามารถปิดใช้งานได้ เนื่องจากจำเป็นสำหรับการทำงานพื้นฐานของเว็บไซต์ คุกกี้เหล่านี้ไม่เก็บข้อมูลส่วนบุคคลที่สามารถระบุตัวตนได้
            </p>
            <div className="bg-gray-50 rounded-lg p-4 mb-4">
              <p className="text-sm text-gray-600 mb-2"><strong>ตัวอย่าง:</strong></p>
              <ul className="list-disc pl-6 text-sm text-gray-600 space-y-1">
                <li>Session cookies - จดจำการเข้าสู่ระบบ</li>
                <li>Security cookies - รักษาความปลอดภัย</li>
                <li>load balancing cookies - กระจายภาระการทำงาน</li>
              </ul>
            </div>
            <p className="mb-6 text-gray-600">
              <strong>หมายเหตุ:</strong> คุกกี้ประเภทนี้ไม่ต้องได้รับความยินยอมจากท่านตามกฎหมาย PDPA เนื่องจากจำเป็นสำหรับการให้บริการที่ท่านร้องขอโดยตรง
            </p>

            {/* Section 4: Performance Cookies */}
            <h2 id="section-4" className="text-2xl font-bold mb-4 text-gray-900 mt-8">4. คุกกี้เพื่อประสิทธิภาพ (Performance Cookies)</h2>
            <p className="mb-4 text-gray-600">
              คุกกี้เพื่อประสิทธิภาพช่วยให้เราเข้าใจว่าผู้เข้าชมใช้งานเว็บไซต์ของเราอย่างไร โดยรวบรวมข้อมูลที่ไม่ระบุตัวตน เช่น หน้าที่เข้าชมบ่อยที่สุด เวลาที่ใช้บนเว็บไซต์ และข้อความแสดงข้อผิดพลาด
            </p>
            <div className="bg-gray-50 rounded-lg p-4 mb-4">
              <p className="text-sm text-gray-600 mb-2"><strong>บริการที่เราใช้:</strong></p>
              <ul className="list-disc pl-6 text-sm text-gray-600 space-y-1">
                <li><strong>Umami Analytics</strong> - ระบบวิเคราะห์เว็บไซต์ที่เน้นความเป็นส่วนตัว (Privacy-focused)</li>
                <li><strong>Google Analytics 4 (GA4)</strong> - หากท่านให้ความยินยอม</li>
              </ul>
            </div>
            <p className="mb-6 text-gray-600">
              คุกกี้เหล่านี้ <strong>ต้องได้รับความยินยอม</strong>จากท่านก่อนการใช้งาน ท่านสามารถปฏิเสธได้โดยคลิก &quot;ปฏิเสธทั้งหมด&quot; บนแบนเนอร์คุกกี้ หรือจัดการการตั้งค่าได้ตลอดเวลา
            </p>

            {/* Section 5: Functional Cookies */}
            <h2 id="section-5" className="text-2xl font-bold mb-4 text-gray-900 mt-8">5. คุกกี้เพื่อการทำงาน (Functional Cookies)</h2>
            <p className="mb-4 text-gray-600">
              คุกกี้เพื่อการทำงานช่วยจดจำการตั้งค่าและความชอบของท่าน เช่น ภาษาที่ใช้ ภูมิภาค หรือการกำหนดค่าต่างๆ บนเว็บไซต์
            </p>
            <div className="bg-gray-50 rounded-lg p-4 mb-4">
              <p className="text-sm text-gray-600 mb-2"><strong>ตัวอย่าง:</strong></p>
              <ul className="list-disc pl-6 text-sm text-gray-600 space-y-1">
                <li>จดจำการตั้งค่าภาษาไทย/อังกฤษ</li>
                <li>จดจำสินค้าที่เคยดู</li>
                <li>จดจำการตั้งค่าการแสดงผล</li>
              </ul>
            </div>
            <p className="mb-6 text-gray-600">
              คุกกี้เหล่านี้ <strong>ต้องได้รับความยินยอม</strong> จากท่านก่อนการใช้งาน
            </p>

            {/* Section 6: Marketing Cookies */}
            <h2 id="section-6" className="text-2xl font-bold mb-4 text-gray-900 mt-8">6. คุกกี้เพื่อการตลาด (Marketing Cookies)</h2>
            <p className="mb-4 text-gray-600">
              คุกกี้เพื่อการตลาดใช้เพื่อติดตามพฤติกรรมการท่องเว็บของท่าน เพื่อแสดงโฆษณาที่เกี่ยวข้องกับความสนใจของท่าน คุกกี้เหล่านี้อาจถูกใช้โดยพันธมิตรด้านโฆษณาของเรา
            </p>
            <div className="bg-gray-50 rounded-lg p-4 mb-4">
              <p className="text-sm text-gray-600 mb-2"><strong>วัตถุประสงค์:</strong></p>
              <ul className="list-disc pl-6 text-sm text-gray-600 space-y-1">
                <li>แสดงโฆษณาที่เกี่ยวข้องกับความสนใจของท่าน</li>
                <li>วัดประสิทธิภาพของแคมเปญโฆษณา</li>
                <li>จำกัดจำนวนครั้งที่เห็นโฆษณา</li>
              </ul>
            </div>
            <p className="mb-6 text-gray-600">
              คุกกี้เหล่านี้ <strong>ต้องได้รับความยินยอม</strong> จากท่านก่อนการใช้งาน เราไม่ใช้คุกกี้เพื่อการตลาดโดยตรงบนเว็บไซต์นี้ แต่หากมีการใช้งาน ท่านจะได้รับแจ้งและสามารถให้ความยินยอมหรือปฏิเสธได้
            </p>

            {/* Section 7: Managing Cookies */}
            <h2 id="section-7" className="text-2xl font-bold mb-4 text-gray-900 mt-8">7. การจัดการคุกกี้</h2>
            <p className="mb-4 text-gray-600">
              ท่านสามารถจัดการความยินยอมคุกกี้ได้หลายวิธี:
            </p>

            <h3 className="text-xl font-semibold mb-3 text-gray-700">7.1 แบนเนอร์คุกกี้บนเว็บไซต์</h3>
            <p className="mb-4 text-gray-600">
              เมื่อท่านเข้าชมเว็บไซต์ครั้งแรก ท่านจะเห็นแบนเนอร์คุกกี้ที่ให้ท่านเลือก:
            </p>
            <ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
              <li><strong>ยอมรับทั้งหมด</strong> - อนุญาตคุกกี้ทุกประเภท</li>
              <li><strong>ปฏิเสธทั้งหมด</strong> - ปฏิเสธคุกกี้ที่ไม่จำเป็น</li>
              <li><strong>ตั้งค่าเอง</strong> - เลือกประเภทคุกกี้ที่ต้องการเป็นรายตัว</li>
            </ul>

            <h3 className="text-xl font-semibold mb-3 text-gray-700">7.2 การเปลี่ยนแปลงการตั้งค่า</h3>
            <p className="mb-4 text-gray-600">
              ท่านสามารถเปลี่ยนแปลงการตั้งค่าคุกกี้ได้ตลอดเวลา โดย:
            </p>
            <ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
              <li>ล้างข้อมูลคุกกี้ในเบราว์เซอร์ของท่าน</li>
              <li>เข้าชมเว็บไซต์อีกครั้งเพื่อแสดงแบนเนอร์คุกกี้ใหม่</li>
              <li>ติดต่อเราเพื่อขอลบข้อมูลคุกกี้ที่เราเก็บรวบรวม</li>
            </ul>

            <h3 className="text-xl font-semibold mb-3 text-gray-700">7.3 การปิดใช้งานในเบราว์เซอร์</h3>
            <p className="mb-4 text-gray-600">
              ท่านสามารถปฏิเสธหรือบล็อกคุกกี้ได้โดยการเปลี่ยนแปลงการตั้งค่าในเบราว์เซอร์:
            </p>
            <ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
              <li><strong>Chrome:</strong> การตั้งค่า &gt; ความเป็นส่วนตัวและการรักษาความปลอดภัย &gt; คุกกี้</li>
              <li><strong>Firefox:</strong> การตั้งค่า &gt; ความเป็นส่วนตัวและการรักษาความปลอดภัย</li>
              <li><strong>Safari:</strong> การตั้งค่า &gt; ความเป็นส่วนตัว</li>
              <li><strong>Edge:</strong> การตั้งค่า &gt; คุกกี้และการอนุญาตไซต์</li>
            </ul>
            <p className="mb-6 text-gray-600">
              <strong>หมายเหตุ:</strong> การปิดใช้งานคุกกี้อาจส่งผลกระทบต่อการทำงานของเว็บไซต์บางส่วน
            </p>

            {/* Section 8: Policy Changes */}
            <h2 id="section-8" className="text-2xl font-bold mb-4 text-gray-900 mt-8">8. การเปลี่ยนแปลงนโยบาย</h2>
            <p className="mb-6 text-gray-600">
              เราอาจอัปเดตนโยบายคุกกี้นี้เป็นครั้งคราวเพื่อให้สอดคล้องกับการเปลี่ยนแปลงของเว็บไซต์หรือกฎหมาย การเปลี่ยนแปลงที่สำคัญจะถูกประกาศบนหน้านี้พร้อมวันที่อัปเดตใหม่
            </p>
            <p className="mb-6 text-gray-600">
              เราขอแนะนำให้ท่านตรวจสอบนโยบายนี้เป็นระยะเพื่อรับทราบการเปลี่ยนแปลง
            </p>

            {/* Section 9: Contact */}
            <h2 id="section-9" className="text-2xl font-bold mb-4 text-gray-900 mt-8">9. การติดต่อ</h2>
            <p className="mb-4 text-gray-600">
              หากท่านมีคำถามเกี่ยวกับนโยบายคุกกี้นี้ กรุณาติดต่อเรา:
            </p>
            <ul className="list-disc pl-6 mb-6 text-gray-600 space-y-2">
              <li><strong>อีเมล:</strong> <a href="mailto:contact@moreminimore.com" className="text-accent-blue hover:underline">contact@moreminimore.com</a></li>
              <li><strong>โทรศัพท์:</strong> <a href="tel:0809955945" className="text-accent-blue hover:underline">080-995-5945</a></li>
              <li><strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</li>
            </ul>

            {/* Footer Note */}
            <div className="mt-12 p-6 bg-yellow-50 border-l-4 border-primary rounded">
              <p className="text-gray-700 text-base">
                <strong>หมายเหตุ:</strong> นโยบายคุกกี้นี้เป็นส่วนหนึ่งของ <Link href="/privacy-policy" className="text-accent-blue hover:underline">นโยบายความเป็นส่วนตัว</Link> และ <Link href="/terms-of-service" className="text-accent-blue hover:underline">ข้อกำหนดและเงื่อนไข</Link> ของเรา
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}