---
import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
import BentoGrid from '../components/BentoGrid.astro';
import BentoTile from '../components/BentoTile.astro';
import DecoOrb from '../components/DecoOrb.astro';
---

<Base title="นโยบายความเป็นส่วนตัว | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
  <Navigation />

  <PageHero
    badge="กฎหมาย"
    title="นโยบายความเป็นส่วนตัว"
    subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
  />

  <section class="section section-bento legal-section">
    <DecoOrb color="purple" size="450px" speed={0.3} position={{ top: '-100px', left: '-150px' }} opacity={0.2} blur="80px" />
    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-150px', right: '-100px' }} opacity={0.4} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <BentoGrid>
        <BentoTile span={8} surface="white" eyebrow="กฎหมาย" title="นโยบายความเป็นส่วนตัว">
          <div class="legal-body">
            <p class="legal-intro">บริษัท มอร์มินิมอร์ จำกัด ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน</p>

            <div class="legal-block">
              <h2>1. ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</h2>
              <p>ข้อมูลส่วนบุคคลที่บริษัทฯ อาจเก็บรวบรวมจากท่าน อาจรวมถึง:</p>
              <ul>
                <li><strong>ข้อมูลส่วนบุคคลทั่วไป:</strong> ชื่อ-นามสกุล ที่อยู่อีเมล หมายเลขโทรศัพท์</li>
                <li><strong>ข้อมูลการติดต่อ:</strong> ข้อมูลการติดต่อที่ท่านให้ไว้เมื่อลงทะเบียนหรือกรอกแบบฟอร์ม</li>
                <li><strong>ข้อมูลการใช้งาน:</strong> IP address, ข้อมูลการเข้าชมเว็บไซต์, คุกกี้</li>
              </ul>
            </div>

            <div class="legal-block">
              <h2>2. วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</h2>
              <p>เราเก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
              <ul>
                <li>เพื่อให้บริการและดูแลลูกค้า</li>
                <li>เพื่อติดต่อสื่อสารกับท่าน</li>
                <li>เพื่อปรับปรุงการให้บริการ</li>
                <li>เพื่อปฏิบัติตามกฎหมาย</li>
              </ul>
            </div>

            <div class="legal-block">
              <h2>3. การคุ้มครองข้อมูล</h2>
              <p>เรามีมาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการสูญหาย เข้าถึง ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยไม่ได้รับอนุญาต</p>
            </div>

            <div class="legal-block">
              <h2>4. สิทธิของท่าน</h2>
              <p>ท่านมีสิทธิในการเข้าถึง แก้ไข ลบ หรือระงับการใช้ข้อมูลส่วนบุคคลของท่าน กรุณาติดต่อเราผ่านช่องทางที่ระบุในเว็บไซต์</p>
            </div>
          </div>
        </BentoTile>

        <BentoTile span={4} surface="purple-soft" eyebrow="ข้อมูลเอกสาร" title="สรุปฉบับย่อ">
          <div class="aside-body">
            <p><strong>ชื่อเอกสาร:</strong> นโยบายความเป็นส่วนตัว</p>
            <p><strong>มีผลบังคับใช้:</strong> 5 พฤษภาคม 2569</p>
            <p><strong>จัดการโดย:</strong> MoreminiMore Co.,Ltd.</p>
            <p style="margin-top: 20px;"><strong>หัวข้อทั้งหมด 4 ข้อ:</strong></p>
            <ol class="toc-list">
              <li>ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</li>
              <li>วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</li>
              <li>การคุ้มครองข้อมูล</li>
              <li>สิทธิของท่าน</li>
            </ol>
          </div>
        </BentoTile>
      </BentoGrid>
    </div>
  </section>

  <Footer />
</Base>

<style>
  .legal-section { background: var(--color-white); }
  .section-bento { position: relative; overflow: hidden; }

  /* Body typography inside the prose tile */
  .legal-body { font-size: 16px; line-height: 1.8; color: var(--color-gray-700); }
  .legal-intro {
    font-size: 17px;
    color: var(--color-gray-700);
    margin-bottom: 36px;
    line-height: 1.7;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-gray-200);
  }
  .legal-block { margin-bottom: 36px; }
  .legal-block:last-child { margin-bottom: 0; }
  .legal-block h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--color-black);
  }
  .legal-block p {
    font-size: 16px;
    color: var(--color-gray-700);
    line-height: 1.8;
    margin-bottom: 12px;
  }
  .legal-block ul {
    margin: 12px 0 12px 24px;
  }
  .legal-block li {
    font-size: 16px;
    color: var(--color-gray-700);
    line-height: 1.8;
    margin-bottom: 8px;
  }
  .legal-block strong { color: var(--color-black); }

  /* Aside (purple-soft tile) */
  .aside-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-black);
  }
  .aside-body p { margin-bottom: 10px; }
  .aside-body strong { font-weight: 800; }
  .toc-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    counter-reset: toc;
  }
  .toc-list li {
    counter-increment: toc;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    font-weight: 600;
    position: relative;
    padding-left: 36px;
  }
  .toc-list li::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 10px;
    font-family: var(--font-display);
    font-weight: 900;
    opacity: 0.6;
  }
  .toc-list li:last-child { border-bottom: none; }

  @media (max-width: 640px) {
    .legal-intro { font-size: 16px; }
    .legal-block h2 { font-size: 20px; }
  }
</style>

<script>
  // Parallax orbs (use data-parallax-speed from DecoOrb)
  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
  function updateParallax() {
    const scrolled = window.scrollY;
    parallaxEls.forEach(el => {
      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
      const ty = scrolled * speed * -0.3;
      el.style.transform = `translate3d(0, ${ty}px, 0)`;
    });
  }
  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
</script>