@extends('site.layout')

@section('title', 'Terms - Dewemoji')
@section('meta_description', 'Read Dewemoji terms of service for website, API, and extension usage.')

@push('head')
<style>
    .legal-h2 { font-family: 'Space Grotesk', sans-serif; margin-top: 2rem; margin-bottom: .75rem; font-size: 1.3rem; color: #fff; font-weight: 700; }
    .legal-p { color: #9ca3af; line-height: 1.7; margin-bottom: .9rem; }
    .legal-ul { list-style: disc; padding-left: 1.2rem; color: #9ca3af; margin-bottom: .9rem; }
</style>
@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 text-gray-400 hover:text-white hover:bg-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 bg-white/10 text-brand-sun border border-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 items-center justify-between">
            <div>
                <div class="text-[11px] uppercase tracking-wider text-gray-500">Legal / Terms</div>
                <h1 class="font-display text-2xl md:text-3xl font-bold">Terms of Service</h1>
            </div>
            <div class="text-right">
                <div class="text-[10px] uppercase tracking-wider text-gray-500">Last Updated</div>
                <div class="text-sm text-gray-200">February 5, 2026</div>
            </div>
        </header>

        <div class="flex-1 overflow-y-auto p-6 md:p-10">
            <div class="max-w-4xl mx-auto">
                <div class="glass-card p-6 rounded-2xl mb-8">
                    <p class="legal-p mb-0">By using Dewemoji website, extension, or API, you agree to these terms.</p>
                </div>

                <h2 class="legal-h2">1. Acceptable use</h2>
                <ul class="legal-ul">
                    <li>Use the service lawfully and without abuse.</li>
                    <li>Do not attempt to bypass license controls or request limits.</li>
                    <li>Do not scrape or redistribute restricted content in violation of terms.</li>
                </ul>

                <h2 class="legal-h2">2. Accounts and licenses</h2>
                <p class="legal-p">Paid features require a valid license key. Device/profile activation limits apply based on plan rules.</p>

                <h2 class="legal-h2">3. Service availability</h2>
                <p class="legal-p">We continuously improve stability, but uptime is not guaranteed. Features may change over time.</p>

                <h2 class="legal-h2">4. Limitation of liability</h2>
                <p class="legal-p">Dewemoji is provided “as is” without warranties. We are not liable for indirect or consequential damages from service use.</p>

                <h2 class="legal-h2">5. Contact</h2>
                <p class="legal-p">Questions about terms: <a href="mailto:hello@dewemoji.com" class="text-brand-oceanSoft hover:text-white">hello@dewemoji.com</a>.</p>
            </div>
        </div>
    </main>
</div>
@endsection