@extends('layouts.nova.content-layout')

@section('page-content')

{{-- Table of contents --}}
<div class="max-w-3xl">
    <p class="text-sm text-white/40 mb-1">Last updated: <time datetime="2026-03-01">March 1, 2026</time></p>
    <p class="text-white/60 text-sm leading-relaxed mb-8">
        This Privacy Policy explains how Skinbase ("we", "us", "our") collects, uses, stores, and protects
        information about you when you use our website at <strong class="text-white">skinbase.org</strong>.
        By using Skinbase you agree to the practices described in this policy.
    </p>

    {{-- TOC --}}
    <nav class="mb-10 rounded-xl border border-white/[0.08] bg-white/[0.03] px-6 py-5">
        <h2 class="text-xs font-semibold uppercase tracking-widest text-white/40 mb-3">Contents</h2>
        <ol class="space-y-1.5 text-sm text-sky-400">
            <li><a href="#information-we-collect"  class="hover:text-sky-300 hover:underline transition-colors">1. Information We Collect</a></li>
            <li><a href="#how-we-use-information"  class="hover:text-sky-300 hover:underline transition-colors">2. How We Use Your Information</a></li>
            <li><a href="#cookies"                 class="hover:text-sky-300 hover:underline transition-colors">3. Cookies &amp; Tracking</a></li>
            <li><a href="#sharing"                 class="hover:text-sky-300 hover:underline transition-colors">4. Sharing of Information</a></li>
            <li><a href="#user-content"            class="hover:text-sky-300 hover:underline transition-colors">5. User-Generated Content</a></li>
            <li><a href="#data-retention"          class="hover:text-sky-300 hover:underline transition-colors">6. Data Retention</a></li>
            <li><a href="#security"                class="hover:text-sky-300 hover:underline transition-colors">7. Security</a></li>
            <li><a href="#your-rights"             class="hover:text-sky-300 hover:underline transition-colors">8. Your Rights</a></li>
            <li><a href="#advertising"             class="hover:text-sky-300 hover:underline transition-colors">9. Advertising</a></li>
            <li><a href="#third-party-links"       class="hover:text-sky-300 hover:underline transition-colors">10. Third-Party Links</a></li>
            <li><a href="#children"                class="hover:text-sky-300 hover:underline transition-colors">11. Children's Privacy</a></li>
            <li><a href="#changes"                 class="hover:text-sky-300 hover:underline transition-colors">12. Changes to This Policy</a></li>
            <li><a href="#contact"                 class="hover:text-sky-300 hover:underline transition-colors">13. Contact Us</a></li>
        </ol>
    </nav>

    {{-- Sections --}}
    <div class="space-y-10">

        {{-- 1 --}}
        <section id="information-we-collect">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">01</span>
                Information We Collect
            </h2>
            <p class="text-white/70 text-sm leading-relaxed mb-3">
                We collect information in two ways: information you give us directly, and information
                collected automatically as you use the site.
            </p>
            <h3 class="text-base font-semibold text-white mt-5 mb-2">Information you provide</h3>
            <ul class="list-disc list-inside space-y-1.5 text-sm text-white/70 pl-2">
                <li><strong class="text-white/90">Account registration</strong> — username, email address, and password (stored as a secure hash).</li>
                <li><strong class="text-white/90">Profile information</strong> — display name, avatar, bio, website URL, and location if you choose to provide them.</li>
                <li><strong class="text-white/90">Uploaded content</strong> — artworks, wallpapers, skins, and photographs, along with their titles, descriptions, and tags.</li>
                <li><strong class="text-white/90">Communications</strong> — messages sent through features such as private messaging, forum posts, comments, and bug reports.</li>
            </ul>
            <h3 class="text-base font-semibold text-white mt-5 mb-2">Information collected automatically</h3>
            <ul class="list-disc list-inside space-y-1.5 text-sm text-white/70 pl-2">
                <li><strong class="text-white/90">Log data</strong> — IP address, browser type and version, operating system, referring URL, pages visited, and timestamps.</li>
                <li><strong class="text-white/90">Usage data</strong> — download counts, favourite actions, search queries, and interaction events used to improve recommendations.</li>
                <li><strong class="text-white/90">Cookies &amp; local storage</strong> — see Section 3 for full details.</li>
            </ul>
        </section>

        {{-- 2 --}}
        <section id="how-we-use-information">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">02</span>
                How We Use Your Information
            </h2>
            <p class="text-white/70 text-sm leading-relaxed mb-3">We use the information we collect to:</p>
            <ul class="list-disc list-inside space-y-1.5 text-sm text-white/70 pl-2">
                <li>Provide, operate, and maintain the Skinbase service.</li>
                <li>Authenticate your identity and keep your account secure.</li>
                <li>Personalise your experience, including content recommendations.</li>
                <li>Send transactional emails (password resets, email verification, notifications you subscribe to).</li>
                <li>Moderate content and enforce our <a href="/rules-and-guidelines" class="text-sky-400 hover:underline">Rules &amp; Guidelines</a>.</li>
                <li>Analyse usage patterns to improve site performance and features.</li>
                <li>Detect, prevent, and investigate fraud, abuse, or security incidents.</li>
                <li>Comply with legal obligations.</li>
            </ul>
            <p class="mt-4 text-sm text-white/50">
                We will never sell your personal data or use it for purposes materially different from those
                stated above without first obtaining your explicit consent.
            </p>

            {{-- Lawful basis table (GDPR Art. 13(1)(c)) --}}
            <h3 class="text-base font-semibold text-white mt-6 mb-3">Lawful basis for processing (GDPR Art. 6)</h3>
            <div class="overflow-hidden rounded-lg border border-white/[0.08]">
                <table class="w-full text-sm">
                    <thead class="bg-white/[0.05]">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white/40">Processing activity</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white/40">Lawful basis</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/[0.05]">
                        <tr class="bg-white/[0.02]">
                            <td class="px-4 py-3 text-white/80">Account registration &amp; authentication</td>
                            <td class="px-4 py-3 text-white/60">Art. 6(1)(b) — Performance of contract</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-white/80">Delivering and operating the Service</td>
                            <td class="px-4 py-3 text-white/60">Art. 6(1)(b) — Performance of contract</td>
                        </tr>
                        <tr class="bg-white/[0.02]">
                            <td class="px-4 py-3 text-white/80">Transactional emails (password reset, verification)</td>
                            <td class="px-4 py-3 text-white/60">Art. 6(1)(b) — Performance of contract</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-white/80">Security, fraud prevention, abuse detection</td>
                            <td class="px-4 py-3 text-white/60">Art. 6(1)(f) — Legitimate interests</td>
                        </tr>
                        <tr class="bg-white/[0.02]">
                            <td class="px-4 py-3 text-white/80">Analytics &amp; site-performance monitoring</td>
                            <td class="px-4 py-3 text-white/60">Art. 6(1)(f) — Legitimate interests</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-white/80">Essential cookies (session, CSRF, remember-me)</td>
                            <td class="px-4 py-3 text-white/60">Art. 6(1)(f) — Legitimate interests</td>
                        </tr>
                        <tr class="bg-white/[0.02]">
                            <td class="px-4 py-3 text-white/80">Third-party advertising cookies</td>
                            <td class="px-4 py-3 text-white/60">Art. 6(1)(a) — <strong class="text-white/90">Consent</strong> (via cookie banner)</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-white/80">Compliance with legal obligations</td>
                            <td class="px-4 py-3 text-white/60">Art. 6(1)(c) — Legal obligation</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        {{-- 3 --}}
        <section id="cookies">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">03</span>
                Cookies &amp; Tracking
            </h2>
            <p class="text-white/70 text-sm leading-relaxed mb-4">
                Skinbase uses cookies — small text files stored in your browser — to deliver a reliable,
                personalised experience. No cookies are linked to sensitive personal data.
            </p>
            <div class="overflow-hidden rounded-lg border border-white/[0.08]">
                <table class="w-full text-sm">
                    <thead class="bg-white/[0.05]">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white/40">Cookie</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white/40">Purpose</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-white/40">Duration</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/[0.05]">
                        <tr class="bg-white/[0.02]">
                            <td class="px-4 py-3 text-white/80 font-mono text-xs">skinbase_session</td>
                            <td class="px-4 py-3 text-white/60">Authentication session identifier</td>
                            <td class="px-4 py-3 text-white/50">Browser session</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-white/80 font-mono text-xs">XSRF-TOKEN</td>
                            <td class="px-4 py-3 text-white/60">Cross-site request forgery protection</td>
                            <td class="px-4 py-3 text-white/50">Browser session</td>
                        </tr>
                        <tr class="bg-white/[0.02]">
                            <td class="px-4 py-3 text-white/80 font-mono text-xs">remember_web_*</td>
                            <td class="px-4 py-3 text-white/60">"Remember me" persistent login</td>
                            <td class="px-4 py-3 text-white/50">30 days</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-white/80 font-mono text-xs">__gads, ar_debug,<br>DSID, IDE, NID</td>
                            <td class="px-4 py-3 text-white/60">Google AdSense — interest-based ad targeting &amp; frequency capping. Only loaded after you accept cookies. (See Section 9)</td>
                            <td class="px-4 py-3 text-white/50">Up to 13 months</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <p class="mt-3 text-sm text-white/50">
                You can disable cookies in your browser settings. Doing so may prevent some features
                (such as staying logged in) from working correctly.
            </p>
        </section>

        {{-- 4 --}}
        <section id="sharing">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">04</span>
                Sharing of Information
            </h2>
            <p class="text-white/70 text-sm leading-relaxed">
                We do not sell or rent your personal data. We may share information only in the following
                limited circumstances:
            </p>
            <ul class="mt-3 list-disc list-inside space-y-1.5 text-sm text-white/70 pl-2">
                <li><strong class="text-white/90">Legal requirements</strong> — if required by law, court order, or governmental authority.</li>
                <li><strong class="text-white/90">Protection of rights</strong> — to enforce our policies, prevent fraud, or protect the safety of our users or the public.</li>
                <li><strong class="text-white/90">Service providers</strong> — trusted third-party vendors (e.g. hosting, email delivery, analytics) who are contractually bound to handle data only as instructed by us.</li>
                <li><strong class="text-white/90">Business transfers</strong> — in the event of a merger, acquisition, or sale of assets, you will be notified via email and/or a prominent notice on the site.</li>
            </ul>
        </section>

        {{-- 5 --}}
        <section id="user-content">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">05</span>
                User-Generated Content
            </h2>
            <p class="text-white/70 text-sm leading-relaxed">
                Artworks, comments, forum posts, and other content you upload or publish on Skinbase are
                publicly visible. Do not include personal information (phone numbers, home addresses, etc.)
                in public content. You retain ownership of your original work; by uploading you grant
                Skinbase a non-exclusive licence to display and distribute it as part of the service.
                You may delete your own content at any time from your dashboard.
            </p>
            <p class="mt-3 text-sm text-white/50">
                Content found to infringe copyright or violate our rules will be removed.
                To report a submission, please <a href="/bug-report" class="text-sky-400 hover:underline">contact a staff member</a>.
            </p>
        </section>

        {{-- 6 --}}
        <section id="data-retention">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">06</span>
                Data Retention
            </h2>
            <p class="text-white/70 text-sm leading-relaxed">
                We retain your account data for as long as your account is active. If you delete your
                account, we will remove or anonymise your personal data within <strong class="text-white/90">30 days</strong>,
                except where we are required to retain it for legal or fraud-prevention purposes.
                Anonymised aggregate statistics (e.g. download counts) may be retained indefinitely.
                Server log files containing IP addresses are rotated and deleted after <strong class="text-white/90">90 days</strong>.
            </p>
        </section>

        {{-- 7 --}}
        <section id="security">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">07</span>
                Security
            </h2>
            <p class="text-white/70 text-sm leading-relaxed">
                We implement industry-standard measures to protect your information, including:
            </p>
            <ul class="mt-3 list-disc list-inside space-y-1.5 text-sm text-white/70 pl-2">
                <li>HTTPS (TLS) encryption for all data in transit.</li>
                <li>Bcrypt hashing for all stored passwords — we never store passwords in plain text.</li>
                <li>CSRF protection on all state-changing requests.</li>
                <li>Rate limiting and account lockouts to resist brute-force attacks.</li>
            </ul>
            <p class="mt-3 text-sm text-white/50">
                No method of transmission over the Internet is 100% secure. If you believe your account
                has been compromised, please <a href="/bug-report" class="text-sky-400 hover:underline">contact us immediately</a>.
            </p>
        </section>

        {{-- 8 --}}
        <section id="your-rights">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">08</span>
                Your Rights
            </h2>
            <p class="text-white/70 text-sm leading-relaxed mb-3">
                Depending on where you live, you may have certain rights over your personal data:
            </p>
            <div class="grid sm:grid-cols-2 gap-3">
                @foreach ([
                    ['Access', 'Request a copy of the personal data we hold about you.'],
                    ['Rectification', 'Correct inaccurate or incomplete data via your account settings.'],
                    ['Erasure', 'Request deletion of your account and associated personal data.'],
                    ['Portability', 'Receive your data in a structured, machine-readable format.'],
                    ['Restriction', 'Ask us to limit how we process your data in certain circumstances.'],
                    ['Objection', 'Object to processing based on legitimate interests or for direct marketing.'],
                ] as [$right, $desc])
                <div class="rounded-lg border border-white/[0.07] bg-white/[0.03] px-4 py-3">
                    <p class="text-sm font-semibold text-white mb-0.5">{{ $right }}</p>
                    <p class="text-xs text-white/50">{{ $desc }}</p>
                </div>
                @endforeach
            </div>
            <p class="mt-4 text-sm text-white/50">
                To exercise any of these rights, please <a href="/bug-report" class="text-sky-400 hover:underline">contact us</a>.
                We will respond within 30 days. You also have the right to lodge a complaint with your
                local data protection authority.
            </p>
        </section>

        {{-- 9 --}}
        <section id="advertising">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">09</span>
                Advertising
            </h2>
            <p class="text-white/70 text-sm leading-relaxed mb-3">
                Skinbase uses <strong class="text-white/90">Google AdSense</strong> (operated by Google LLC,
                1600 Amphitheatre Parkway, Mountain View, CA 94043, USA) to display advertisements. Google AdSense
                may use cookies and web beacons to collect information about your browsing activity in order to
                serve interest-based (personalised) ads.
            </p>
            <p class="text-white/70 text-sm leading-relaxed mb-3">
                <strong class="text-white/90">Consent required.</strong> Google AdSense cookies are only loaded
                after you click <em>Accept all</em> in the cookie consent banner. If you choose
                <em>Essential only</em>, no advertising cookies will be placed.
                You can withdraw consent at any time by clicking <strong class="text-white/90">Cookie Preferences</strong>
                in the footer.
            </p>
            <p class="text-white/70 text-sm leading-relaxed mb-3">
                Data collected by Google AdSense (such as browser type, pages visited, and ad interactions) is
                processed by Google under
                <a href="https://policies.google.com/privacy" class="text-sky-400 hover:underline" target="_blank" rel="noopener noreferrer">Google's Privacy Policy</a>.
                Skinbase does not share any personally identifiable information with Google AdSense beyond what is
                automatically collected through the ad script.
            </p>
            <p class="text-white/70 text-sm leading-relaxed mb-3">
                Google's use of advertising cookies can be managed at
                <a href="https://www.google.com/settings/ads" class="text-sky-400 hover:underline" target="_blank" rel="noopener noreferrer">google.com/settings/ads</a>,
                or you may opt out of personalised advertising through the
                <a href="https://optout.aboutads.info/" class="text-sky-400 hover:underline" target="_blank" rel="noopener noreferrer">Digital Advertising Alliance opt-out</a>.
            </p>
            <p class="mt-1 text-sm text-white/50">
                Registered members may see reduced advertising frequency depending on their account status.
            </p>
        </section>

        {{-- 10 --}}
        <section id="third-party-links">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">10</span>
                Third-Party Links
            </h2>
            <p class="text-white/70 text-sm leading-relaxed">
                Skinbase may contain links to external websites. We are not responsible for the privacy
                practices or content of those sites and encourage you to review their privacy policies
                before disclosing any personal information.
            </p>
        </section>

        {{-- 11 --}}
        <section id="children">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">11</span>
                Children's Privacy
            </h2>
            <p class="text-white/70 text-sm leading-relaxed">
                Skinbase is a general-audience website. In compliance with the Children's Online Privacy
                Protection Act (COPPA) we do not knowingly collect personal information from children
                under the age of <strong class="text-white/90">13</strong>. If we become aware that a
                child under 13 has registered, we will promptly delete their account and data.
                If you believe a child has provided us with personal information, please
                <a href="/bug-report" class="text-sky-400 hover:underline">contact us</a>.
            </p>
        </section>

        {{-- 12 --}}
        <section id="changes">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">12</span>
                Changes to This Policy
            </h2>
            <p class="text-white/70 text-sm leading-relaxed">
                We may update this Privacy Policy from time to time. When we do, we will revise the
                "Last updated" date at the top of this page. For material changes we will notify
                registered members by email and/or by a prominent notice on the site. We encourage you
                to review this policy periodically. Continued use of Skinbase after changes are posted
                constitutes your acceptance of the revised policy.
            </p>
        </section>

        {{-- 13 --}}
        <section id="contact">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">
                <span class="text-sky-400 font-mono text-base">13</span>
                Contact Us
            </h2>
            <p class="text-white/70 text-sm leading-relaxed">
                If you have any questions, concerns, or requests regarding this Privacy Policy or our
                data practices, please reach out via our
                <a href="/bug-report" class="text-sky-400 hover:underline">contact form</a> or by
                sending a private message to any <a href="/staff" class="text-sky-400 hover:underline">staff member</a>.
                We aim to respond to all privacy-related enquiries within <strong class="text-white/90">10 business days</strong>.
            </p>

            <div class="mt-6 rounded-lg border border-sky-500/20 bg-sky-500/5 px-5 py-4 text-sm text-sky-300">
                <p class="font-semibold mb-1">Data Controller</p>
                <p class="text-sky-300/70">
                    Skinbase.org &mdash; operated by the Skinbase team.<br>
                    Contact: <a href="/bug-report" class="underline hover:text-sky-200">via contact form</a>
                </p>
            </div>
        </section>

    </div>
</div>

@endsection