---
// Cookie Policy Page for WorkRoot IT Solutions
// Features: Legal content covering cookie types, usage, and management

import BaseLayout from '../layouts/BaseLayout.astro';

const lastUpdated = 'March 20, 2026';
---

<BaseLayout
  title="Cookie Policy — How We Use Cookies & Tracking"
  description="Learn how WorkRoot IT Solutions uses cookies and similar tracking technologies, what each cookie does, and how to manage or disable them in your browser."
  noIndex={true}
>
  <!-- Hero Section -->
  <section class="relative bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900 py-16 lg:py-20">
    <div class="absolute inset-0 overflow-hidden">
      <div class="absolute top-0 left-1/4 w-96 h-96 bg-primary-500/10 rounded-full blur-3xl"></div>
      <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-accent-500/10 rounded-full blur-3xl"></div>
    </div>
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="max-w-3xl mx-auto text-center">
        <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
          Cookie <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-accent-400">Policy</span>
        </h1>
        <p class="text-lg text-secondary-300">
          Last updated: {lastUpdated}
        </p>
      </div>
    </div>
  </section>

  <!-- Content Section -->
  <section class="py-16 lg:py-24 bg-secondary-950">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="max-w-4xl mx-auto">
        <div class="prose prose-lg prose-invert prose-headings:text-white prose-p:text-secondary-300 prose-li:text-secondary-300 prose-strong:text-white max-w-none">

          <!-- Introduction -->
          <div class="bg-secondary-900/50 border border-secondary-800 rounded-2xl p-8 mb-8">
            <p class="text-secondary-300 leading-relaxed">
              This Cookie Policy explains how WorkRoot IT Solutions LLP (&ldquo;we,&rdquo; &ldquo;our,&rdquo; or &ldquo;us&rdquo;) uses cookies and similar tracking technologies when you visit <strong class="text-white">workroot.in</strong>. By using our website, you consent to our use of cookies as described in this policy. You can withdraw your consent at any time by adjusting your browser settings.
            </p>
          </div>

          <!-- Section 1 -->
          <div class="mb-12">
            <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
              <span class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-500/20 text-primary-400 text-lg font-bold">1</span>
              What Are Cookies?
            </h2>
            <div class="pl-13 space-y-4">
              <p class="text-secondary-300">
                Cookies are small text files that are placed on your device (computer, smartphone, or tablet) when you visit a website. They are widely used to make websites work more efficiently, remember your preferences, and provide information to the website owners.
              </p>
              <p class="text-secondary-300">
                Similar technologies include:
              </p>
              <ul class="list-disc pl-6 space-y-2 text-secondary-300">
                <li><strong class="text-white">Web beacons / pixel tags:</strong> Tiny invisible images embedded in web pages or emails that track page views and email opens.</li>
                <li><strong class="text-white">Local storage:</strong> Browser-side data storage (e.g. localStorage) used to remember preferences across sessions.</li>
                <li><strong class="text-white">Session storage:</strong> Similar to local storage but cleared when the browser tab is closed.</li>
                <li><strong class="text-white">Service worker cache:</strong> Files cached by our Progressive Web App (PWA) service worker for offline support.</li>
              </ul>
            </div>
          </div>

          <!-- Section 2 -->
          <div class="mb-12">
            <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
              <span class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-500/20 text-primary-400 text-lg font-bold">2</span>
              Types of Cookies We Use
            </h2>
            <div class="pl-13 space-y-6">

              <!-- Essential -->
              <div class="bg-secondary-900/50 border border-secondary-800 rounded-xl p-6">
                <div class="flex items-center gap-3 mb-3">
                  <span class="inline-block px-3 py-1 rounded-full bg-green-900/50 text-green-300 text-xs font-semibold uppercase tracking-wide">Always Active</span>
                  <h3 class="text-lg font-semibold text-white">Essential / Strictly Necessary Cookies</h3>
                </div>
                <p class="text-secondary-300 mb-3">
                  These cookies are required for the website to function correctly. They cannot be disabled because the site would not work without them.
                </p>
                <ul class="list-disc pl-6 space-y-1 text-secondary-300 text-sm">
                  <li>Session management and security tokens</li>
                  <li>Rate-limiting identifiers to protect our API endpoints from abuse</li>
                  <li>CSRF protection tokens</li>
                  <li>Load balancer routing cookies</li>
                </ul>
              </div>

              <!-- Functional -->
              <div class="bg-secondary-900/50 border border-secondary-800 rounded-xl p-6">
                <div class="flex items-center gap-3 mb-3">
                  <span class="inline-block px-3 py-1 rounded-full bg-primary-900/50 text-primary-300 text-xs font-semibold uppercase tracking-wide">Functional</span>
                  <h3 class="text-lg font-semibold text-white">Preference / Functional Cookies</h3>
                </div>
                <p class="text-secondary-300 mb-3">
                  These cookies remember your choices and preferences to provide a more personalised experience.
                </p>
                <ul class="list-disc pl-6 space-y-1 text-secondary-300 text-sm">
                  <li><strong class="text-white">Theme preference</strong> (<code class="text-primary-300 bg-primary-900/30 px-1 rounded">theme</code>) &mdash; Remembers whether you selected light or dark mode</li>
                  <li><strong class="text-white">PWA install prompt</strong> (<code class="text-primary-300 bg-primary-900/30 px-1 rounded">pwa-prompt-dismissed</code>) &mdash; Stores whether you dismissed the app install banner (localStorage, 7-day TTL)</li>
                  <li>Language and region preferences</li>
                </ul>
              </div>

              <!-- Analytics -->
              <div class="bg-secondary-900/50 border border-secondary-800 rounded-xl p-6">
                <div class="flex items-center gap-3 mb-3">
                  <span class="inline-block px-3 py-1 rounded-full bg-accent-900/50 text-accent-300 text-xs font-semibold uppercase tracking-wide">Analytics</span>
                  <h3 class="text-lg font-semibold text-white">Analytics / Performance Cookies</h3>
                </div>
                <p class="text-secondary-300 mb-3">
                  These cookies help us understand how visitors interact with our website so we can improve it. All data collected is aggregated and anonymised.
                </p>
                <ul class="list-disc pl-6 space-y-1 text-secondary-300 text-sm">
                  <li>Page view counts and navigation paths</li>
                  <li>Time spent on pages</li>
                  <li>Referral sources (how you found us)</li>
                  <li>Device type, browser, and operating system</li>
                  <li>Error rates and performance metrics</li>
                </ul>
                <p class="text-secondary-300 text-sm mt-3">
                  We use our own lightweight analytics system (<code class="text-primary-300 bg-primary-900/30 px-1 rounded">src/utils/analytics.ts</code>) that does not share data with third-party ad networks.
                </p>
              </div>

              <!-- Marketing -->
              <div class="bg-secondary-900/50 border border-secondary-800 rounded-xl p-6">
                <div class="flex items-center gap-3 mb-3">
                  <span class="inline-block px-3 py-1 rounded-full bg-secondary-700 text-secondary-300 text-xs font-semibold uppercase tracking-wide">Marketing</span>
                  <h3 class="text-lg font-semibold text-white">Marketing / Targeting Cookies</h3>
                </div>
                <p class="text-secondary-300">
                  We currently do not run retargeting campaigns or place third-party advertising cookies on our website. Should this change, we will update this policy and request your consent before doing so.
                </p>
              </div>

            </div>
          </div>

          <!-- Section 3 -->
          <div class="mb-12">
            <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
              <span class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-500/20 text-primary-400 text-lg font-bold">3</span>
              Specific Cookies We Set
            </h2>
            <div class="pl-13">
              <p class="text-secondary-300 mb-4">The following table lists the cookies currently set by workroot.in:</p>
              <div class="overflow-x-auto rounded-xl border border-secondary-800">
                <table class="w-full text-sm text-left">
                  <thead class="bg-secondary-800/70">
                    <tr>
                      <th class="px-4 py-3 text-secondary-200 font-semibold">Name</th>
                      <th class="px-4 py-3 text-secondary-200 font-semibold">Type</th>
                      <th class="px-4 py-3 text-secondary-200 font-semibold">Duration</th>
                      <th class="px-4 py-3 text-secondary-200 font-semibold">Purpose</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-secondary-800">
                    <tr class="bg-secondary-900/30">
                      <td class="px-4 py-3 text-primary-300 font-mono">theme</td>
                      <td class="px-4 py-3 text-secondary-400">Functional</td>
                      <td class="px-4 py-3 text-secondary-400">Persistent</td>
                      <td class="px-4 py-3 text-secondary-300">Stores your light/dark mode preference</td>
                    </tr>
                    <tr class="bg-secondary-900/10">
                      <td class="px-4 py-3 text-primary-300 font-mono">pwa-prompt-dismissed</td>
                      <td class="px-4 py-3 text-secondary-400">Functional</td>
                      <td class="px-4 py-3 text-secondary-400">7 days</td>
                      <td class="px-4 py-3 text-secondary-300">Suppresses the PWA install banner after dismissal</td>
                    </tr>
                    <tr class="bg-secondary-900/30">
                      <td class="px-4 py-3 text-primary-300 font-mono">_wr_session</td>
                      <td class="px-4 py-3 text-secondary-400">Essential</td>
                      <td class="px-4 py-3 text-secondary-400">Session</td>
                      <td class="px-4 py-3 text-secondary-300">Maintains server-side session state for API requests</td>
                    </tr>
                    <tr class="bg-secondary-900/10">
                      <td class="px-4 py-3 text-primary-300 font-mono">_wr_ratelimit</td>
                      <td class="px-4 py-3 text-secondary-400">Essential</td>
                      <td class="px-4 py-3 text-secondary-400">1 hour</td>
                      <td class="px-4 py-3 text-secondary-300">Prevents API abuse by tracking request frequency per IP</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p class="text-secondary-400 text-sm mt-3">
                <em>Note: localStorage entries are not cookies in the strict HTTP sense but serve a similar purpose. They are included here for full transparency.</em>
              </p>
            </div>
          </div>

          <!-- Section 4 -->
          <div class="mb-12">
            <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
              <span class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-500/20 text-primary-400 text-lg font-bold">4</span>
              Third-Party Cookies
            </h2>
            <div class="pl-13">
              <p class="text-secondary-300 mb-4">
                Our website may load resources from the following third-party domains, which may set their own cookies:
              </p>
              <ul class="list-disc pl-6 space-y-2 text-secondary-300">
                <li><strong class="text-white">Google Fonts</strong> (<code class="text-primary-300 bg-primary-900/30 px-1 rounded">fonts.googleapis.com</code>, <code class="text-primary-300 bg-primary-900/30 px-1 rounded">fonts.gstatic.com</code>) &mdash; Delivers the Plus Jakarta Sans and JetBrains Mono typefaces. Subject to <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer" class="text-primary-400 hover:underline">Google&rsquo;s Privacy Policy</a>.</li>
                <li><strong class="text-white">Unsplash</strong> (<code class="text-primary-300 bg-primary-900/30 px-1 rounded">images.unsplash.com</code>) &mdash; Serves placeholder images used in blog posts and portfolio. Subject to <a href="https://unsplash.com/privacy" target="_blank" rel="noopener noreferrer" class="text-primary-400 hover:underline">Unsplash&rsquo;s Privacy Policy</a>.</li>
              </ul>
              <p class="text-secondary-300 mt-4">
                We do not control these third-party cookies. Please review the respective privacy policies for information on how those parties use cookies.
              </p>
            </div>
          </div>

          <!-- Section 5 -->
          <div class="mb-12">
            <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
              <span class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-500/20 text-primary-400 text-lg font-bold">5</span>
              How to Manage Cookies
            </h2>
            <div class="pl-13 space-y-4">
              <p class="text-secondary-300">
                You can control and manage cookies in several ways. Please note that removing or blocking cookies may impact your user experience and some functionality may no longer be available.
              </p>

              <h3 class="text-xl font-semibold text-white mt-6 mb-3">Browser Settings</h3>
              <p class="text-secondary-300 mb-3">Most browsers allow you to refuse or accept cookies, delete existing cookies, and set preferences for certain websites. Instructions for popular browsers:</p>
              <ul class="list-disc pl-6 space-y-2 text-secondary-300">
                <li>
                  <strong class="text-white">Google Chrome:</strong>
                  Settings &rarr; Privacy and security &rarr; Cookies and other site data
                </li>
                <li>
                  <strong class="text-white">Mozilla Firefox:</strong>
                  Settings &rarr; Privacy &amp; Security &rarr; Cookies and Site Data
                </li>
                <li>
                  <strong class="text-white">Apple Safari:</strong>
                  Preferences &rarr; Privacy &rarr; Manage Website Data
                </li>
                <li>
                  <strong class="text-white">Microsoft Edge:</strong>
                  Settings &rarr; Cookies and site permissions &rarr; Manage and delete cookies
                </li>
              </ul>

              <h3 class="text-xl font-semibold text-white mt-6 mb-3">Opt-Out Links</h3>
              <ul class="list-disc pl-6 space-y-2 text-secondary-300">
                <li><a href="https://tools.google.com/dlpage/gaoptout" target="_blank" rel="noopener noreferrer" class="text-primary-400 hover:underline">Google Analytics Opt-out</a></li>
                <li><a href="https://www.youronlinechoices.eu/" target="_blank" rel="noopener noreferrer" class="text-primary-400 hover:underline">Your Online Choices (EU)</a></li>
                <li><a href="https://optout.networkadvertising.org/" target="_blank" rel="noopener noreferrer" class="text-primary-400 hover:underline">Network Advertising Initiative Opt-out</a></li>
              </ul>

              <h3 class="text-xl font-semibold text-white mt-6 mb-3">Service Worker &amp; PWA Cache</h3>
              <p class="text-secondary-300">
                To clear our service worker cache (used for offline support), open your browser&rsquo;s Developer Tools &rarr; Application &rarr; Storage &rarr; Clear site data. This will remove all cached assets and re-download them on your next visit.
              </p>
            </div>
          </div>

          <!-- Section 6 -->
          <div class="mb-12">
            <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
              <span class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-500/20 text-primary-400 text-lg font-bold">6</span>
              Your Consent
            </h2>
            <div class="pl-13">
              <p class="text-secondary-300 mb-4">
                By continuing to use our website after reading this policy, you consent to our use of cookies as described. For essential cookies, consent is not required as they are necessary for the site to function.
              </p>
              <p class="text-secondary-300">
                For non-essential cookies (functional, analytics), you can withdraw your consent at any time by clearing your cookies and browser storage via your browser settings. Your preferences will be reset, and you can choose whether to re-accept them on your next visit.
              </p>
            </div>
          </div>

          <!-- Section 7 -->
          <div class="mb-12">
            <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
              <span class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-500/20 text-primary-400 text-lg font-bold">7</span>
              Changes to This Policy
            </h2>
            <div class="pl-13">
              <p class="text-secondary-300">
                We may update this Cookie Policy from time to time to reflect changes in technology, law, or our business practices. We will notify you of any significant changes by posting the updated policy on this page with a new &ldquo;Last updated&rdquo; date. We encourage you to review this page periodically to stay informed about how we use cookies.
              </p>
            </div>
          </div>

          <!-- Section 8 -->
          <div class="mb-12">
            <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
              <span class="flex items-center justify-center w-10 h-10 rounded-full bg-primary-500/20 text-primary-400 text-lg font-bold">8</span>
              Contact Us
            </h2>
            <div class="pl-13">
              <p class="text-secondary-300 mb-4">If you have questions about our use of cookies or this Cookie Policy, please contact us:</p>
              <div class="bg-secondary-900/50 border border-secondary-800 rounded-xl p-6">
                <p class="text-secondary-300"><strong class="text-white">WorkRoot IT Solutions LLP</strong></p>
                <p class="text-secondary-300">Email: admin@workroot.in</p>
                <p class="text-secondary-300">Phone: <a href="tel:+919561417403" class="text-primary-400 hover:underline">+91 9561417403</a></p>
                <p class="text-secondary-300">Address: At Post Rajapur Shantinagar, Taluka Khatav, Dist Satara, MH 415503</p>
              </div>
              <p class="text-secondary-300 mt-4">
                For more information about how we handle your personal data, please also review our <a href="/privacy" class="text-primary-400 hover:underline">Privacy Policy</a> and <a href="/terms" class="text-primary-400 hover:underline">Terms of Service</a>.
              </p>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
</BaseLayout>
