@extends('layouts.site')

@section('title', 'Cookie Policy')

@section('content')
<main class="bg-white">
  <!-- Header -->
  <section class="border-b bg-gradient-to-br from-slate-50 to-white">
    <div class="mx-auto max-w-5xl px-6 py-12">
      <h1 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">
        Cookie Policy
      </h1>
      <p class="mt-3 text-slate-600">
        Effective date: <time datetime="2025-01-01">January 1, 2025</time>
      </p>
      <p class="mt-2 text-slate-600">
        This Cookie Policy explains what cookies are, how {{ config('app.name') }} uses them, and your choices regarding their use.
      </p>
    </div>
  </section>

  <!-- Content -->
  <section class="mx-auto max-w-5xl px-6 py-10">
    <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-10">
      <!-- Quick nav -->
      <nav aria-label="Table of contents" class="mb-8">
        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500">On this page</h2>
        <ol class="mt-3 grid gap-2 text-slate-700 sm:grid-cols-2">
          <li><a href="#what-are-cookies" class="hover:underline">1. What Are Cookies</a></li>
          <li><a href="#how-we-use" class="hover:underline">2. How We Use Cookies</a></li>
          <li><a href="#types" class="hover:underline">3. Types of Cookies We Use</a></li>
          <li><a href="#managing" class="hover:underline">4. Managing Cookies</a></li>
          <li><a href="#changes" class="hover:underline">5. Changes To This Policy</a></li>
        </ol>
      </nav>

      <!-- 1. What Are Cookies -->
      <section id="what-are-cookies" class="scroll-mt-24">
        <h2 class="text-2xl font-semibold text-slate-900">1. What Are Cookies</h2>
        <p class="mt-2 text-slate-700">
          Cookies are small text files placed on your computer or mobile device when you visit a website. They are widely
          used to make websites work more efficiently, as well as to provide reporting information.
        </p>
      </section>

      <!-- 2. How We Use Cookies -->
      <section id="how-we-use" class="mt-10 scroll-mt-24">
        <h2 class="text-2xl font-semibold text-slate-900">2. How We Use Cookies</h2>
        <p class="mt-2 text-slate-700">We use cookies for several purposes:</p>
        <ul class="mt-2 list-outside list-disc pl-6 text-slate-700 space-y-1">
          <li><strong>Essential Cookies:</strong> Required for core functionality; cannot be switched off.</li>
          <li><strong>Analytics Cookies:</strong> Help us count visits and measure site performance.</li>
          <li><strong>Functional Cookies:</strong> Provide enhanced functionality and personalization.</li>
          <li><strong>Targeting Cookies:</strong> May be set by advertising partners to build a profile of your interests.</li>
        </ul>
      </section>

      <!-- 3. Types of Cookies We Use -->
      <section id="types" class="mt-10 scroll-mt-24">
        <h2 class="text-2xl font-semibold text-slate-900">3. Types of Cookies We Use</h2>
        <div class="mt-4 overflow-x-auto rounded-xl border border-slate-200 shadow-sm">
          <table class="min-w-full divide-y divide-slate-200">
            <thead class="bg-slate-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-slate-500">Cookie</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-slate-500">Purpose</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-slate-500">Duration</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-200 bg-white">
              <tr>
                <td class="px-6 py-4 text-sm font-medium text-slate-900">session</td>
                <td class="px-6 py-4 text-sm text-slate-600">Maintain user session</td>
                <td class="px-6 py-4 text-sm text-slate-600">Session</td>
              </tr>
              <tr>
                <td class="px-6 py-4 text-sm font-medium text-slate-900">XSRF-TOKEN</td>
                <td class="px-6 py-4 text-sm text-slate-600">Security purposes</td>
                <td class="px-6 py-4 text-sm text-slate-600">Session</td>
              </tr>
              <tr>
                <td class="px-6 py-4 text-sm font-medium text-slate-900">_ga</td>
                <td class="px-6 py-4 text-sm text-slate-600">Google Analytics</td>
                <td class="px-6 py-4 text-sm text-slate-600">2 years</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- 4. Managing Cookies -->
      <section id="managing" class="mt-10 scroll-mt-24">
        <h2 class="text-2xl font-semibold text-slate-900">4. Managing Cookies</h2>
        <p class="mt-2 text-slate-700">
          You can configure your browser to accept, refuse, or delete cookies. If you disable cookies, some parts of the
          website may not function properly.
        </p>
        <p class="mt-2 text-slate-700">
          To learn more, visit <a href="https://www.aboutcookies.org" class="text-indigo-600 hover:underline">aboutcookies.org</a>
          or <a href="https://www.allaboutcookies.org" class="text-indigo-600 hover:underline">allaboutcookies.org</a>.
        </p>
      </section>

      <!-- 5. Changes -->
      <section id="changes" class="mt-10 scroll-mt-24">
        <h2 class="text-2xl font-semibold text-slate-900">5. Changes To This Cookie Policy</h2>
        <p class="mt-2 text-slate-700">
          We may update this Cookie Policy from time to time. We will notify you by posting the new policy on this page and
          updating the “Effective date” above. You are encouraged to review this page periodically for any updates.
        </p>
      </section>

      <!-- Sticky back-to-top -->
      <div class="mt-10 flex justify-end">
        <a href="#" class="inline-flex items-center rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">
          Back to top
        </a>
      </div>
    </div>
  </section>
</main>
@endsection