@extends('site.layout')

@section('title', 'Support - Dewemoji')
@section('meta_description', 'Get help with Dewemoji installation, Pro activation, API usage, billing, and troubleshooting.')

@push('jsonld')
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "FAQPage",
  "mainEntity": [
    {"@@type":"Question","name":"How do I activate Pro?","acceptedAnswer":{"@@type":"Answer","text":"Open Dewemoji settings, paste your license key in Pro tab, and activate."}},
    {"@@type":"Question","name":"How many devices can I use?","acceptedAnswer":{"@@type":"Answer","text":"One license can activate up to 3 Chrome profiles."}},
    {"@@type":"Question","name":"How do I use my key in API?","acceptedAnswer":{"@@type":"Answer","text":"Send Authorization: Bearer YOUR_LICENSE_KEY header in requests."}}
  ]
}
</script>
@endpush

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 py-10">
    <h1 class="font-display text-4xl font-bold text-center">Support</h1>
    <p class="text-gray-400 text-center mt-2">Need help with Dewemoji? We got you.</p>

    <div class="grid gap-4 mt-8 md:grid-cols-2">
        <section class="glass-card rounded-2xl p-5">
            <h2 class="font-semibold">Install & activate</h2>
            <ol class="mt-3 list-decimal pl-5 text-sm text-gray-300 space-y-1">
                <li>Install from Chrome Web Store.</li>
                <li>Open Dewemoji settings.</li>
                <li>Paste key in Pro tab and activate.</li>
            </ol>
        </section>

        <section class="glass-card rounded-2xl p-5">
            <h2 class="font-semibold">API quick start</h2>
            <pre class="mt-3 text-xs overflow-x-auto bg-black/30 rounded-lg p-3"><code>curl -H "Authorization: Bearer YOUR_LICENSE_KEY" \
"{{ url('/v1/emojis') }}?q=love&limit=20"</code></pre>
        </section>

        <section class="glass-card rounded-2xl p-5 md:col-span-2">
            <h2 class="font-semibold">Common issues</h2>
            <ul class="mt-3 list-disc pl-5 text-sm text-gray-300 space-y-1">
                <li><strong>License limit reached:</strong> deactivate old profile first.</li>
                <li><strong>API 401 invalid key:</strong> ensure key is valid and active.</li>
                <li><strong>Insert not working:</strong> click into input and retry.</li>
            </ul>
            <p class="mt-4 text-sm text-gray-400">Still stuck? Email <a class="text-brand-ocean hover:underline" href="mailto:hello@dewemoji.com">hello@dewemoji.com</a>.</p>
        </section>
    </div>
</div>
@endsection