@extends('site.layout')

@section('title', 'Pricing - Dewemoji')
@section('meta_description', 'See Dewemoji plans for Free, Pro subscription, and Lifetime. One key unlocks Extension + API with up to 3 Chrome profile activations.')

@push('jsonld')
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@graph": [
    {
      "@@type": "Product",
      "name": "Dewemoji Pro License",
      "description": "One Pro license unlocks the Dewemoji extension and API.",
      "brand": {"@@type": "Brand", "name": "Dewemoji"},
      "offers": [
        {"@@type":"Offer","price":"3.00","priceCurrency":"USD","availability":"https://schema.org/InStock","url":"https://dwindown.gumroad.com/l/dewemoji-pro-subscription"},
        {"@@type":"Offer","price":"27.00","priceCurrency":"USD","availability":"https://schema.org/InStock","url":"https://dwindown.gumroad.com/l/dewemoji-pro-subscription"}
      ]
    },
    {
      "@@type": "Product",
      "name": "Dewemoji Lifetime License",
      "description": "Lifetime access to extension + API.",
      "brand": {"@@type": "Brand", "name": "Dewemoji"},
      "offers": {"@@type":"Offer","price":"69.00","priceCurrency":"USD","availability":"https://schema.org/InStock","url":"https://dwindown.gumroad.com/l/dewemoji-pro-lifetime"}
    }
  ]
}
</script>
@endpush

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-10">
    <div class="text-center mb-8">
        <h1 class="font-display text-4xl font-bold">Simple, fair pricing</h1>
        <p class="text-gray-400 mt-2">One Pro unlocks both Extension + API.</p>
    </div>

    <div class="grid gap-4 md:grid-cols-3">
        <section class="glass-card rounded-2xl p-6">
            <h2 class="text-xl font-semibold">Free</h2>
            <p class="text-gray-400 text-sm mt-1">For casual usage</p>
            <p class="text-3xl font-bold mt-4">$0</p>
            <ul class="mt-4 space-y-2 text-sm text-gray-300">
                <li>Extension access</li>
                <li>API testing access</li>
                <li>Daily cap 30 queries</li>
            </ul>
        </section>

        <section class="glass-card rounded-2xl p-6 border border-brand-ocean/40">
            <h2 class="text-xl font-semibold">Pro</h2>
            <p class="text-gray-400 text-sm mt-1">Most popular</p>
            <p class="text-3xl font-bold mt-4">$3/mo <span class="text-sm text-gray-400">or $27/yr</span></p>
            <ul class="mt-4 space-y-2 text-sm text-gray-300">
                <li>Unlimited extension usage</li>
                <li>API pro access</li>
                <li>Up to 3 Chrome profiles</li>
            </ul>
            <a href="https://dwindown.gumroad.com/l/dewemoji-pro-subscription" target="_blank" rel="noopener noreferrer" class="mt-5 inline-flex w-full justify-center rounded-lg bg-brand-ocean hover:bg-brand-oceanSoft px-4 py-2 font-semibold">Subscribe on Gumroad</a>
        </section>

        <section class="glass-card rounded-2xl p-6">
            <h2 class="text-xl font-semibold">Lifetime</h2>
            <p class="text-gray-400 text-sm mt-1">Pay once, use forever</p>
            <p class="text-3xl font-bold mt-4">$69</p>
            <ul class="mt-4 space-y-2 text-sm text-gray-300">
                <li>Extension + API access</li>
                <li>Future updates included</li>
                <li>IDR/Mayar available on request</li>
            </ul>
            <a href="https://dwindown.gumroad.com/l/dewemoji-pro-lifetime" target="_blank" rel="noopener noreferrer" class="mt-5 inline-flex w-full justify-center rounded-lg bg-brand-sun text-black hover:bg-brand-sunSoft px-4 py-2 font-semibold">Buy Lifetime</a>
        </section>
    </div>

    <div class="glass-card rounded-2xl p-6 mt-6 text-sm text-gray-300">
        <h3 class="font-semibold text-white">Licensing basics</h3>
        <ul class="mt-3 list-disc pl-5 space-y-1">
            <li>One key unlocks both extension and API.</li>
            <li>Use <code>Authorization: Bearer YOUR_LICENSE_KEY</code> for API requests.</li>
            <li>One license supports up to 3 active Chrome profiles.</li>
        </ul>
    </div>
</div>
@endsection