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

@section('page-content')

<div class="max-w-3xl space-y-10">

    {{-- Intro --}}
    <div>
        <p class="text-neutral-400 text-sm mb-2">Last updated: March 1, 2026</p>
        <p class="text-neutral-300 leading-relaxed">
            Answers to the questions we hear most often. If something isn't covered here, feel free to reach out to
            any <a href="/staff" class="text-sky-400 hover:underline">staff member</a> — we're happy to help.
        </p>
    </div>

    {{-- Table of Contents --}}
    <nav class="rounded-xl border border-white/10 bg-white/[0.03] p-5">
        <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400 mb-3">Contents</p>
        <ol class="space-y-1.5 text-sm text-sky-400">
            <li><a href="#about" class="hover:underline">01 — About Skinbase</a></li>
            <li><a href="#uploading" class="hover:underline">02 — Uploading &amp; Submissions</a></li>
            <li><a href="#copyright" class="hover:underline">03 — Copyright &amp; Photoskins</a></li>
            <li><a href="#skinning" class="hover:underline">04 — Skinning Help</a></li>
            <li><a href="#account" class="hover:underline">05 — Account &amp; Profile</a></li>
            <li><a href="#community" class="hover:underline">06 — Community &amp; Forums</a></li>
            <li><a href="#policies" class="hover:underline">07 — Policies &amp; Conduct</a></li>
        </ol>
    </nav>

    {{-- 01 About Skinbase --}}
    <section id="about">
        <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-6">
            <span class="text-sky-400 font-mono text-base">01</span>
            About Skinbase
        </h2>
        <dl class="space-y-6">
            <div>
                <dt class="font-medium text-white">What is Skinbase?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Skinbase is a community gallery for desktop customisation — skins, themes, wallpapers, icons, and
                    more. Members upload their own creations, collect favourites, leave feedback, and discuss all things
                    design in the forums. We've been online since 2001 and still going strong.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Is Skinbase free to use?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Yes, completely. Browsing and downloading are free without an account. Registering (also free)
                    unlocks uploading, commenting, favourites, collections, and messaging.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Who runs Skinbase?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Skinbase is maintained by a small volunteer <a href="/staff" class="text-sky-400 hover:underline">staff team</a>.
                    Staff moderate uploads, help members, and keep the lights on. There is no corporate ownership —
                    this is a community project.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">How can I support Skinbase?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    The best support is participation — upload your work, leave constructive comments, report problems,
                    and invite other creators. You can also help by flagging rule-breaking content so staff can review it quickly.
                </dd>
            </div>
        </dl>
    </section>

    {{-- 02 Uploading & Submissions --}}
    <section id="uploading">
        <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-6">
            <span class="text-sky-400 font-mono text-base">02</span>
            Uploading &amp; Submissions
        </h2>
        <dl class="space-y-6">
            <div>
                <dt class="font-medium text-white">What file types are accepted?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Skins and resources are generally uploaded as <strong class="text-white">.zip</strong> archives.
                    Preview images are accepted as JPG, PNG, or WebP. Wallpapers may be uploaded directly as image files.
                    Check the upload form for the exact size and type limits per category.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Is there a file size limit?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Yes. The current limit is displayed on the upload page. If your file exceeds the limit, try removing
                    any unnecessary assets from the archive before re-uploading.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Why was my upload removed?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Uploads are removed when they break the <a href="/rules-and-guidelines" class="text-sky-400 hover:underline">Rules &amp; Guidelines</a> —
                    most commonly for containing photographs you don't own (photoskins), missing preview images, or
                    violating copyright. You will usually receive a message explaining the reason.
                    If you believe a removal was in error, contact a staff member.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Can I upload work-in-progress skins?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    You may share works-in-progress in the forums for feedback. The main gallery is intended for
                    finished, download-ready submissions only.
                </dd>
            </div>
        </dl>
    </section>

    {{-- 03 Copyright & Photoskins --}}
    <section id="copyright">
        <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-6">
            <span class="text-sky-400 font-mono text-base">03</span>
            Copyright &amp; Photoskins
        </h2>
        <dl class="space-y-6">
            <div>
                <dt class="font-medium text-white">What is a photoskin?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    A photoskin is a skin that uses photographic images — typically sourced from the internet — as its
                    primary visual element. Because those photos belong to the photographer (or their publisher), using
                    them without permission is copyright infringement.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Can I upload photoskins?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    <strong class="text-white">No.</strong> Photoskins are not allowed on Skinbase. All artwork in a
                    skin must be created by you, or you must include written proof of permission from the original
                    artist inside the zip file. Stock images with a licence that explicitly permits use in
                    redistributed works are allowed — include a copy of that licence in the zip.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Can I base my skin on someone else's artwork?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Only with documented permission. Include the permission statement (email, forum post, etc.) inside
                    your zip file and note it in your upload description. Staff may still remove the work if we cannot
                    verify the permission.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Someone uploaded my artwork without permission. What do I do?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Use the Report button on the artwork's page, or contact a
                    <a href="/staff" class="text-sky-400 hover:underline">staff member</a> directly.
                    Provide a link to the infringing upload and evidence that you are the copyright holder.
                    We take copyright complaints seriously and act promptly.
                </dd>
            </div>
        </dl>
    </section>

    {{-- 04 Skinning Help --}}
    <section id="skinning">
        <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-6">
            <span class="text-sky-400 font-mono text-base">04</span>
            Skinning Help
        </h2>
        <dl class="space-y-6">
            <div>
                <dt class="font-medium text-white">How do I make a skin?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Every application is different, but skins generally consist of a folder of images and small
                    text/config files. A good starting point is to unpack an existing skin (many Winamp skins are
                    simply renamed <code class="text-sky-300">.zip</code> files), study the structure, then replace the
                    images with your own artwork. Check the application's official documentation for its exact format.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">How do I apply a Windows theme?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    To change the visual style of Windows you typically need a third-party tool such as
                    <strong class="text-white">WindowBlinds</strong>, <strong class="text-white">SecureUxTheme</strong>,
                    or a patched <code class="text-sky-300">uxtheme.dll</code>. Install your chosen tool, download a
                    compatible theme from Skinbase, then follow the tool's instructions to apply it.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Where can I get help with a specific application?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    The forums are the best place — there are dedicated sections for popular skinnable applications.
                    You can also check the comments on popular skins for tips from other members.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">What image editing software do skinners use?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    The community uses a wide range of tools. Popular choices include
                    <strong class="text-white">Adobe Photoshop</strong>, <strong class="text-white">GIMP</strong> (free),
                    <strong class="text-white">Affinity Designer</strong>, <strong class="text-white">Figma</strong>,
                    and <strong class="text-white">Krita</strong> (free). The best tool is the one you're comfortable with.
                </dd>
            </div>
        </dl>
    </section>

    {{-- 05 Account & Profile --}}
    <section id="account">
        <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-6">
            <span class="text-sky-400 font-mono text-base">05</span>
            Account &amp; Profile
        </h2>
        <dl class="space-y-6">
            <div>
                <dt class="font-medium text-white">How do I set a profile picture?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Go to <strong class="text-white">Settings → Avatar</strong>, choose an image from your device, and
                    save. Your avatar appears on your profile page and next to all your comments.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Can I change my username?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Username changes are handled by staff. Send a message to a
                    <a href="/staff" class="text-sky-400 hover:underline">staff member</a> with your requested new name.
                    We reserve the right to decline requests that are inappropriate or conflict with an existing account.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">How do I delete my account?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Account deletion requests must be sent to staff. Please be aware that your publicly submitted
                    artwork may remain in the gallery under your username unless you also request removal of specific
                    uploads. See our <a href="/privacy-policy" class="text-sky-400 hover:underline">Privacy Policy</a>
                    for details on data retention.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">I forgot my password. How do I reset it?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Use the <strong class="text-white">Forgot password?</strong> link on the login page. An email with
                    a reset link will be sent to the address on your account. If you no longer have access to that
                    email, contact a staff member for assistance.
                </dd>
            </div>
        </dl>
    </section>

    {{-- 06 Community & Forums --}}
    <section id="community">
        <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-6">
            <span class="text-sky-400 font-mono text-base">06</span>
            Community &amp; Forums
        </h2>
        <dl class="space-y-6">
            <div>
                <dt class="font-medium text-white">Do I need an account to use the forums?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Guests can read most forum threads without an account. Posting, replying, and creating new topics
                    require a registered account.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">Can I promote my own work in the forums?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Yes — there are dedicated showcase and feedback sections. Limit self-promotion to those areas and
                    avoid spamming multiple threads with the same content.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">How do I report a bad comment or forum post?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Every comment and post has a Report link. Use it to flag content that breaks the rules; staff will
                    review it promptly. For urgent issues, message a
                    <a href="/staff" class="text-sky-400 hover:underline">staff member</a> directly.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">What are the messaging rules?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Private messaging is for genuine one-to-one communication. Do not use it to harass, solicit, or
                    send unsolicited promotional material. Violations can result in messaging being disabled on your account.
                </dd>
            </div>
        </dl>
    </section>

    {{-- 07 Policies & Conduct --}}
    <section id="policies">
        <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-6">
            <span class="text-sky-400 font-mono text-base">07</span>
            Policies &amp; Conduct
        </h2>
        <dl class="space-y-6">
            <div>
                <dt class="font-medium text-white">Are there many rules to follow?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    We keep the rules straightforward: respect everyone, only upload work you own or have permission to
                    share, and keep it drama-free. The full list is in our
                    <a href="/rules-and-guidelines" class="text-sky-400 hover:underline">Rules &amp; Guidelines</a>.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">What happens if I break the rules?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Depending on severity, staff may issue a warning, remove the offending content, temporarily
                    restrict your account, or permanently ban you. Serious offences (harassment, illegal content)
                    result in an immediate permanent ban with no prior warning.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">How do I appeal a ban or removed upload?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Contact a senior staff member and explain the situation calmly. Provide any supporting evidence.
                    Staff decisions can be reversed when new information comes to light, but appeals submitted
                    aggressively or repeatedly will not be reconsidered.
                </dd>
            </div>
            <div>
                <dt class="font-medium text-white">I still can't find what I need. What now?</dt>
                <dd class="mt-1.5 text-sm text-neutral-400 leading-relaxed">
                    Send a private message to any <a href="/staff" class="text-sky-400 hover:underline">staff member</a>
                    or post in the Help section of the forums. Someone from the community will usually respond
                    quickly.
                </dd>
            </div>
        </dl>
    </section>

    {{-- Footer note --}}
    <div class="rounded-xl border border-white/10 bg-white/[0.03] p-5 text-sm text-neutral-400 leading-relaxed">
        This FAQ is reviewed periodically. For legal matters such as copyright, data, or account deletion,
        please refer to our <a href="/privacy-policy" class="text-sky-400 hover:underline">Privacy Policy</a>
        and <a href="/rules-and-guidelines" class="text-sky-400 hover:underline">Rules &amp; Guidelines</a>,
        or contact the <a href="/staff" class="text-sky-400 hover:underline">staff team</a> directly.
    </div>

</div>

@endsection
