{{-- DRAFT: Generated {{ date('Y-m-d') }}. Review by UK-qualified solicitor recommended before launch. --}}
<x-layouts.legal
    title="Cookie Policy"
    heading="Cookie Policy"
    lastUpdated="{{ now()->format('j F Y') }}"
    metaDescription="The cookies and similar technologies FuelAlert uses, and how to manage them.">

    <section class="space-y-3">
        <h2 class="font-display text-2xl font-bold text-zinc-900">1. What cookies are</h2>
        <p>
            Cookies are small text files placed on your device by websites you visit. They allow a
            site to remember things between visits (for example, that you're signed in) and to
            measure how the site is used. This policy explains how FuelAlert uses cookies and
            similar technologies, and how you can manage them.
        </p>
    </section>

    <section class="space-y-3">
        <h2 class="font-display text-2xl font-bold text-zinc-900">2. Cookies we use</h2>
        <p>
            FuelAlert uses only <strong>essential</strong> cookies &mdash; cookies that are strictly
            necessary to deliver the service you've asked for. Under the Privacy and Electronic
            Communications Regulations (PECR), these do not require your consent, but we list them
            here for transparency.
        </p>
        <p>
            For aggregated usage metrics we run our own self-hosted instance of
            <strong>Umami Analytics</strong>, which is <strong>cookieless</strong> &mdash; it does
            not set any cookies, does not use device fingerprinting, and does not track you across
            sites. Because no personal data is collected, no consent is required.
        </p>

        <div class="overflow-x-auto">
            <table class="w-full border-collapse text-left text-sm">
                <thead class="bg-zinc-100">
                    <tr>
                        <th class="border border-zinc-300 px-3 py-2 font-semibold">Name</th>
                        <th class="border border-zinc-300 px-3 py-2 font-semibold">Purpose</th>
                        <th class="border border-zinc-300 px-3 py-2 font-semibold">Duration</th>
                        <th class="border border-zinc-300 px-3 py-2 font-semibold">Type</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="border border-zinc-300 px-3 py-2 font-mono text-xs">fuel_alert_session</td>
                        <td class="border border-zinc-300 px-3 py-2">Keeps you signed in and maintains your session state.</td>
                        <td class="border border-zinc-300 px-3 py-2">Session</td>
                        <td class="border border-zinc-300 px-3 py-2">Essential</td>
                    </tr>
                    <tr>
                        <td class="border border-zinc-300 px-3 py-2 font-mono text-xs">XSRF-TOKEN</td>
                        <td class="border border-zinc-300 px-3 py-2">Protects against cross-site request forgery attacks on forms and account actions.</td>
                        <td class="border border-zinc-300 px-3 py-2">Session</td>
                        <td class="border border-zinc-300 px-3 py-2">Essential</td>
                    </tr>
                    <tr>
                        <td class="border border-zinc-300 px-3 py-2 font-mono text-xs">remember_web_*</td>
                        <td class="border border-zinc-300 px-3 py-2">"Remember me" &mdash; keeps you signed in across browser restarts if you tick the box at login.</td>
                        <td class="border border-zinc-300 px-3 py-2">Up to 5 years</td>
                        <td class="border border-zinc-300 px-3 py-2">Essential</td>
                    </tr>
                    <tr>
                        <td class="border border-zinc-300 px-3 py-2 font-mono text-xs">fa_location</td>
                        <td class="border border-zinc-300 px-3 py-2">Stores your most recent postcode search so we can show local prices on return visits without re-querying.</td>
                        <td class="border border-zinc-300 px-3 py-2">30 days</td>
                        <td class="border border-zinc-300 px-3 py-2">Essential</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <p class="text-sm text-zinc-600">
            <strong>[PLACEHOLDER:</strong> Update the table above if any cookie names change. If a
            marketing tool is added in future, a Marketing row will be added here and consent will
            be requested before it loads.<strong>]</strong>
        </p>
    </section>

    <section class="space-y-3">
        <h2 class="font-display text-2xl font-bold text-zinc-900">3. Your choices</h2>
        <p>
            Because we currently only use essential cookies, there is nothing to opt in or out of
            on FuelAlert at this time. If we add non-essential cookies in future (for example,
            analytics or marketing), we will present a consent banner and you will be able to
            accept, reject, or customise your choice. We will not set non-essential cookies before
            you have given consent.
        </p>
        <p>
            All major browsers also let you view, block, or delete cookies. The ICO publishes
            guidance on managing cookies in your browser:
            <a class="text-accent underline" href="https://ico.org.uk/your-data-matters/online/cookies/" target="_blank" rel="noopener">ico.org.uk &middot; managing cookies</a>.
            Note that blocking essential cookies will prevent you from signing in.
        </p>
    </section>

    <section class="space-y-3">
        <h2 class="font-display text-2xl font-bold text-zinc-900">4. Changes to this policy</h2>
        <p>
            We may update this policy if we add new cookies, change our providers, or in response to
            legal or guidance changes. Material changes will be highlighted by an updated
            "Last updated" date at the top of this page.
        </p>
    </section>

    <section class="space-y-3">
        <h2 class="font-display text-2xl font-bold text-zinc-900">5. Contact</h2>
        <p>
            Questions about cookies? Email
            <a href="mailto:[PLACEHOLDER: hello@fuelalert.co.uk]" class="text-accent underline">[PLACEHOLDER: hello@fuelalert.co.uk]</a>.
        </p>
    </section>
</x-layouts.legal>