@extends('site.layout')

@section('title', 'Pricing - Dewemoji')
@section('meta_description', 'Choose Dewemoji pricing for Free, Pro subscription, and Lifetime access for website, extension, and API usage.')

@push('jsonld')
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@graph": [
    {
      "@@type": "Product",
      "name": "Dewemoji Pro License",
      "description": "One Pro license unlocks Dewemoji extension and API access.",
      "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 Dewemoji extension and 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="flex h-screen w-full">
    <aside class="hidden lg:flex w-20 lg:w-64 h-full glass-panel flex-col justify-between p-4 z-50 shrink-0">
        <div>
            <div class="flex items-center gap-3 px-2 mb-8 mt-2">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-white to-gray-300 flex items-center justify-center shadow-lg shadow-white/20 shrink-0">
                    <img src="/assets/logo/logo-mark.svg" alt="Dewemoji logo" class="w-7 h-7 object-contain" />
                </div>
                <h1 class="font-display font-bold text-lg tracking-tight hidden lg:block">Dewemoji</h1>
            </div>
            <nav class="space-y-1">
                <a href="{{ route('home') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
                    <i data-lucide="layout-grid" class="w-5 h-5"></i><span class="text-sm hidden lg:block">Discover</span>
                </a>
                <a href="{{ route('api-docs') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
                    <i data-lucide="book-open" class="w-5 h-5"></i><span class="text-sm hidden lg:block">API Docs</span>
                </a>
                <a href="{{ route('pricing') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-brand-sun border border-white/5 transition-all">
                    <i data-lucide="badge-dollar-sign" class="w-5 h-5"></i><span class="text-sm hidden lg:block">Pricing</span>
                </a>
                <a href="{{ route('support') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
                    <i data-lucide="life-buoy" class="w-5 h-5"></i><span class="text-sm hidden lg:block">Support</span>
                </a>
            </nav>
        </div>
        <div class="space-y-1">
            <a href="{{ route('privacy') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
                <i data-lucide="shield-check" class="w-5 h-5"></i><span class="text-sm hidden lg:block">Privacy</span>
            </a>
            <a href="{{ route('terms') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
                <i data-lucide="file-text" class="w-5 h-5"></i><span class="text-sm hidden lg:block">Terms</span>
            </a>
        </div>
    </aside>

    <main class="flex-1 flex flex-col h-full min-w-0 relative z-10">
        <header class="glass-header px-6 py-5 shrink-0 flex justify-end items-center gap-4">
            <span class="text-xs text-gray-500 hidden md:block">Billing shown in USD</span>
            <button class="text-sm font-semibold text-brand-oceanSoft hover:text-white transition-colors">Restore Purchases</button>
        </header>

        <div class="flex-1 overflow-y-auto p-6 md:p-10">
            <div class="max-w-5xl mx-auto">
                <div class="text-center mb-12">
                    <h1 class="font-display text-4xl md:text-5xl font-bold mb-3">Supercharge your <span class="text-gradient">emoji workflow</span></h1>
                    <p class="text-gray-400">Use Dewemoji for search, extension, and API in one license system.</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
                    <section class="glass-card rounded-3xl p-6 flex flex-col">
                        <h2 class="font-display text-xl font-bold">Starter</h2>
                        <p class="text-sm text-gray-500 mt-1">For casual usage</p>
                        <div class="mt-5 mb-6"><span class="text-4xl font-bold">$0</span><span class="text-gray-500">/mo</span></div>
                        <ul class="space-y-2 text-sm text-gray-300 flex-1">
                            <li>Extension access</li>
                            <li>Basic API testing</li>
                            <li>30 daily free queries</li>
                        </ul>
                        <button class="mt-6 w-full py-2.5 rounded-xl bg-white/5 border border-white/10 text-gray-300">Current Plan</button>
                    </section>

                    <section class="rounded-3xl p-6 flex flex-col border border-brand-ocean/40 bg-gradient-to-b from-brand-ocean/15 to-transparent shadow-[0_0_28px_rgba(32,83,255,0.18)] md:-translate-y-2">
                        <div class="inline-flex w-fit mb-3 px-2 py-1 text-[10px] font-bold rounded-full bg-brand-sun text-black">MOST POPULAR</div>
                        <h2 class="font-display text-xl font-bold text-brand-oceanSoft">Pro</h2>
                        <p class="text-sm text-gray-400 mt-1">For power users & teams</p>
                        <div class="mt-5 mb-6"><span class="text-4xl font-bold">$3</span><span class="text-gray-400">/mo</span> <span class="text-sm text-gray-500">or $27/yr</span></div>
                        <ul class="space-y-2 text-sm text-gray-200 flex-1">
                            <li>Semantic search engine</li>
                            <li>API Pro access</li>
                            <li>3 active Chrome profiles</li>
                            <li>Priority support</li>
                        </ul>
                        <a href="https://dwindown.gumroad.com/l/dewemoji-pro-subscription" target="_blank" rel="noopener noreferrer" class="mt-6 w-full py-2.5 rounded-xl bg-brand-ocean hover:bg-brand-oceanSoft text-white font-semibold text-center">Upgrade to Pro</a>
                    </section>

                    <section class="glass-card rounded-3xl p-6 flex flex-col">
                        <h2 class="font-display text-xl font-bold">Lifetime</h2>
                        <p class="text-sm text-gray-500 mt-1">Pay once, use forever</p>
                        <div class="mt-5 mb-6"><span class="text-4xl font-bold">$69</span></div>
                        <ul class="space-y-2 text-sm text-gray-300 flex-1">
                            <li>Lifetime extension + API</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-6 w-full py-2.5 rounded-xl bg-brand-sun hover:bg-brand-sunSoft text-black font-semibold text-center">Buy Lifetime</a>
                    </section>
                </div>

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