@extends('layouts.site')

@section('title', trans('site.meta_title'))

@section('content')
<!-- Hero Section -->
<section class="gradient-bg py-20 lg:py-28 border-b border-slate-200 dark:border-slate-800/80 relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        
        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-500/10 border border-brand-500/30 text-brand-600 dark:text-brand-400 text-xs font-semibold mb-8">
            <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
            {{ trans('site.hero_badge') }}
        </div>

        <h1 class="text-3xl sm:text-5xl lg:text-6xl font-black tracking-tight text-slate-900 dark:text-white max-w-4xl mx-auto leading-tight sm:leading-tight">
            {{ trans('site.hero_title_1') }} <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-500 to-brand-600 dark:from-emerald-400 dark:to-brand-500">{{ trans('site.hero_title_2') }}</span> {{ trans('site.hero_title_3') }}
        </h1>

        <p class="mt-6 text-base sm:text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto leading-relaxed">
            {{ trans('site.hero_desc') }}
        </p>

        <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="#pricing" class="w-full sm:w-auto px-8 py-3.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold text-base shadow-xl shadow-brand-500/30 transition transform hover:-translate-y-0.5 force-white">
                {{ trans('site.hero_cta_start') }}
            </a>
            <a href="/docs/api" target="_blank" class="w-full sm:w-auto px-8 py-3.5 rounded-xl bg-white hover:bg-slate-50 text-slate-800 border border-slate-300 shadow-sm dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200 dark:border-slate-700 font-bold text-base transition">
                {{ trans('site.hero_cta_docs') }}
            </a>
        </div>

        <!-- Trust Badges -->
        <div class="mt-14 pt-10 border-t border-slate-200 dark:border-slate-800/60 max-w-3xl mx-auto grid grid-cols-2 sm:grid-cols-4 gap-6 text-center text-slate-600 dark:text-slate-400 text-xs font-medium">
            <div class="flex items-center justify-center gap-2">
                <i class="fa-solid fa-shield-halved text-brand-500 dark:text-brand-400"></i> {{ trans('site.hero_badge_ubl') }}
            </div>
            <div class="flex items-center justify-center gap-2">
                <i class="fa-solid fa-key text-brand-500 dark:text-brand-400"></i> {{ trans('site.hero_badge_crypto') }}
            </div>
            <div class="flex items-center justify-center gap-2">
                <i class="fa-solid fa-location-dot text-brand-500 dark:text-brand-400"></i> {{ trans('site.hero_badge_saudi') }}
            </div>
            <div class="flex items-center justify-center gap-2">
                <i class="fa-solid fa-bolt text-brand-500 dark:text-brand-400"></i> {{ trans('site.hero_badge_clearance') }}
            </div>
        </div>
    </div>
</section>

<section id="how-it-works" class="py-20 bg-white dark:bg-navy-950 border-b border-slate-200 dark:border-slate-800/80">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <h2 class="text-xs font-bold text-brand-600 dark:text-brand-400 tracking-wider uppercase mb-2">{{ trans('site.how_title_top') }}</h2>
            <p class="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white">{{ trans('site.how_heading') }}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="p-6 rounded-2xl bg-slate-50/80 dark:bg-navy-900/70 border border-slate-200 dark:border-white/10 backdrop-blur-xl">
                <div class="w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 dark:text-brand-400 flex items-center justify-center mb-4">
                    <i class="fa-solid fa-building"></i>
                </div>
                <p class="text-[11px] font-bold text-slate-400 mb-1">01</p>
                <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">{{ trans('site.how_1_title') }}</h3>
                <p class="text-slate-600 dark:text-slate-400 text-xs leading-relaxed">{{ trans('site.how_1_desc') }}</p>
            </div>
            <div class="p-6 rounded-2xl bg-slate-50/80 dark:bg-navy-900/70 border border-slate-200 dark:border-white/10 backdrop-blur-xl">
                <div class="w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 dark:text-brand-400 flex items-center justify-center mb-4">
                    <i class="fa-solid fa-link"></i>
                </div>
                <p class="text-[11px] font-bold text-slate-400 mb-1">02</p>
                <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">{{ trans('site.how_2_title') }}</h3>
                <p class="text-slate-600 dark:text-slate-400 text-xs leading-relaxed">{{ trans('site.how_2_desc') }}</p>
            </div>
            <div class="p-6 rounded-2xl bg-slate-50/80 dark:bg-navy-900/70 border border-slate-200 dark:border-white/10 backdrop-blur-xl">
                <div class="w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 dark:text-brand-400 flex items-center justify-center mb-4">
                    <i class="fa-solid fa-file-invoice-dollar"></i>
                </div>
                <p class="text-[11px] font-bold text-slate-400 mb-1">03</p>
                <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">{{ trans('site.how_3_title') }}</h3>
                <p class="text-slate-600 dark:text-slate-400 text-xs leading-relaxed">{{ trans('site.how_3_desc') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Features Grid -->
<section id="features" class="py-20 bg-slate-50 dark:bg-navy-900/40 border-b border-slate-200 dark:border-slate-800/80">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <h2 class="text-xs font-bold text-brand-600 dark:text-brand-400 tracking-wider uppercase mb-2">{{ trans('site.feat_title_top') }}</h2>
            <p class="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white">{{ trans('site.feat_heading') }}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="p-6 rounded-2xl bg-white dark:bg-navy-900/80 border border-slate-200 dark:border-slate-800 hover:border-brand-500/50 shadow-sm transition">
                <div class="w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 dark:text-brand-400 flex items-center justify-center text-xl mb-4">
                    <i class="fa-solid fa-file-code"></i>
                </div>
                <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">{{ trans('site.feat_1_title') }}</h3>
                <p class="text-slate-600 dark:text-slate-400 text-xs leading-relaxed">
                    {{ trans('site.feat_1_desc') }}
                </p>
            </div>

            <div class="p-6 rounded-2xl bg-white dark:bg-navy-900/80 border border-slate-200 dark:border-slate-800 hover:border-brand-500/50 shadow-sm transition">
                <div class="w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 dark:text-brand-400 flex items-center justify-center text-xl mb-4">
                    <i class="fa-solid fa-lock"></i>
                </div>
                <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">{{ trans('site.feat_2_title') }}</h3>
                <p class="text-slate-600 dark:text-slate-400 text-xs leading-relaxed">
                    {{ trans('site.feat_2_desc') }}
                </p>
            </div>

            <div class="p-6 rounded-2xl bg-white dark:bg-navy-900/80 border border-slate-200 dark:border-slate-800 hover:border-brand-500/50 shadow-sm transition">
                <div class="w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 dark:text-brand-400 flex items-center justify-center text-xl mb-4">
                    <i class="fa-solid fa-rotate"></i>
                </div>
                <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">{{ trans('site.feat_3_title') }}</h3>
                <p class="text-slate-600 dark:text-slate-400 text-xs leading-relaxed">
                    {{ trans('site.feat_3_desc') }}
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Code Demo Section -->
<section class="py-20 border-b border-slate-200 dark:border-slate-800/80 bg-white dark:bg-navy-950">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="text-xs font-bold text-brand-600 dark:text-brand-400 tracking-wider uppercase mb-2">{{ trans('site.api_section_badge') }}</h2>
                <h3 class="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white mb-4">{{ trans('site.api_section_heading') }}</h3>
                <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-6">
                    {{ trans('site.api_section_desc') }}
                </p>
                <ul class="space-y-3 text-xs text-slate-600 dark:text-slate-300 mb-8">
                    <li class="flex items-center gap-2">
                        <i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.api_bullet_1') }}
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.api_bullet_2') }}
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.api_bullet_3') }}
                    </li>
                </ul>
                <a href="/docs/api" target="_blank" class="inline-flex items-center gap-2 text-sm font-bold text-brand-600 dark:text-brand-400 hover:text-brand-500 transition">
                    {{ trans('site.api_explore_docs') }}
                </a>
            </div>

            <div class="code-terminal rounded-2xl bg-navy-900 border border-slate-800 p-6 overflow-hidden shadow-2xl code-font text-xs text-slate-300" dir="ltr">
                <div class="flex items-center justify-between pb-4 mb-4 border-b border-slate-800 text-slate-500">
                    <span>POST /api/v1/invoices</span>
                    <span>cURL / REST API</span>
                </div>
<pre class="overflow-x-auto text-emerald-400"><code>curl -X POST https://api.emzatca.com/api/v1/invoices \
  -H "X-API-Key: sk_live_9f82c..." \
  -H "Content-Type: application/json" \
  -d '{
    "device_id": "pos-device-uuid",
    "invoice_number": "INV-2026-001",
    "type": "simplified",
    "issue_date": "2026-09-16",
    "issue_time": "12:30:00",
    "buyer": { "name": "أحمد الشمري" },
    "lines": [
      {
        "name": "اشتراك خدمة سنوي",
        "quantity": 1,
        "unit_price": 500,
        "vat_rate": 15
      }
    ]
  }'</code></pre>
            </div>
        </div>
    </div>
</section>

<!-- Free Tools Showcase -->
<section id="tools" class="py-20 bg-slate-50 dark:bg-navy-900/30 border-b border-slate-200 dark:border-slate-800/80">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <h2 class="text-xs font-bold text-brand-600 dark:text-brand-400 tracking-wider uppercase mb-2">{{ trans('site.tools_title_top') }}</h2>
            <p class="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white">{{ trans('site.tools_heading') }}</p>
            <p class="text-slate-600 dark:text-slate-400 text-xs mt-2">{{ trans('site.tools_sub') }}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <a href="{{ route('tools.qr') }}" class="group p-6 rounded-2xl bg-white dark:bg-navy-900/60 border border-slate-200 dark:border-slate-800 hover:border-brand-500 shadow-sm transition block">
                <div class="w-10 h-10 rounded-xl bg-brand-500/10 text-brand-500 dark:text-brand-400 flex items-center justify-center text-lg mb-4 group-hover:scale-110 transition">
                    <i class="fa-solid fa-qrcode"></i>
                </div>
                <h3 class="text-base font-bold text-slate-900 dark:text-white mb-2 group-hover:text-brand-600 dark:group-hover:text-brand-400 transition">{{ trans('site.tool_qr_title') }}</h3>
                <p class="text-slate-600 dark:text-slate-400 text-xs leading-relaxed">
                    {{ trans('site.tool_qr_desc') }}
                </p>
            </a>

            <a href="{{ route('tools.vat-validator') }}" class="group p-6 rounded-2xl bg-white dark:bg-navy-900/60 border border-slate-200 dark:border-slate-800 hover:border-brand-500 shadow-sm transition block">
                <div class="w-10 h-10 rounded-xl bg-brand-500/10 text-brand-500 dark:text-brand-400 flex items-center justify-center text-lg mb-4 group-hover:scale-110 transition">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </div>
                <h3 class="text-base font-bold text-slate-900 dark:text-white mb-2 group-hover:text-brand-600 dark:group-hover:text-brand-400 transition">{{ trans('site.tool_vat_title') }}</h3>
                <p class="text-slate-600 dark:text-slate-400 text-xs leading-relaxed">
                    {{ trans('site.tool_vat_desc') }}
                </p>
            </a>

            <a href="{{ route('tools.vat-calc') }}" class="group p-6 rounded-2xl bg-white dark:bg-navy-900/60 border border-slate-200 dark:border-slate-800 hover:border-brand-500 shadow-sm transition block">
                <div class="w-10 h-10 rounded-xl bg-brand-500/10 text-brand-500 dark:text-brand-400 flex items-center justify-center text-lg mb-4 group-hover:scale-110 transition">
                    <i class="fa-solid fa-calculator"></i>
                </div>
                <h3 class="text-base font-bold text-slate-900 dark:text-white mb-2 group-hover:text-brand-600 dark:group-hover:text-brand-400 transition">{{ trans('site.tool_calc_title') }}</h3>
                <p class="text-slate-600 dark:text-slate-400 text-xs leading-relaxed">
                    {{ trans('site.tool_calc_desc') }}
                </p>
            </a>
        </div>
    </div>
</section>

<!-- Pricing Section -->
<section id="pricing" class="py-20 bg-slate-50 dark:bg-navy-950 border-b border-slate-200 dark:border-slate-800/80">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <h2 class="text-xs font-bold text-brand-600 dark:text-brand-400 tracking-wider uppercase mb-2">{{ trans('site.price_title_top') }}</h2>
            <p class="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white">{{ trans('site.price_heading') }}</p>
            <p class="text-slate-600 dark:text-slate-400 text-xs mt-2">{{ trans('site.price_sub') }}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Free Trial -->
            <div class="p-8 rounded-2xl bg-white dark:bg-navy-900/50 border border-slate-200 dark:border-slate-800 flex flex-col justify-between shadow-sm">
                <div>
                    <span class="text-xs font-bold text-slate-500 dark:text-slate-400">{{ trans('site.plan_free_badge') }}</span>
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white mt-1">{{ trans('site.plan_free') }}</h3>
                    <div class="mt-4 mb-6">
                        <span class="text-4xl font-black text-slate-900 dark:text-white">{{ trans('site.price_free_val') }}</span>
                        <span class="text-xs text-slate-500 dark:text-slate-400 font-bold">{{ trans('site.price_free_period') }}</span>
                    </div>
                    <ul class="space-y-3 text-xs text-slate-600 dark:text-slate-300 border-t border-slate-200 dark:border-slate-800 pt-6">
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_free_b1') }}</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_free_b2') }}</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_free_b3') }}</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_free_b4') }}</li>
                    </ul>
                </div>
                <a href="{{ route('register') }}" class="mt-8 block text-center py-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-white font-bold text-xs border border-slate-200 dark:border-transparent transition">
                    {{ trans('site.plan_free_cta') }}
                </a>
            </div>

            <!-- Starter / Growth Plan -->
            <div class="p-8 rounded-2xl pricing-featured-card bg-white dark:bg-gradient-to-b dark:from-navy-900 dark:to-navy-950 border-2 border-brand-500 relative flex flex-col justify-between shadow-xl shadow-brand-500/10">
                <div class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-brand-500 text-[10px] font-bold text-white uppercase tracking-wider shadow-md force-white">
                    {{ trans('site.plan_growth_popular') }}
                </div>
                <div>
                    <span class="text-xs font-bold text-brand-600 dark:text-brand-400">{{ trans('site.plan_growth_badge') }}</span>
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white mt-1">{{ trans('site.plan_growth') }}</h3>
                    <div class="mt-4 mb-6">
                        <span class="text-4xl font-black text-slate-900 dark:text-white">{{ trans('site.price_growth_val') }}</span>
                        <span class="text-xs text-slate-500 dark:text-slate-400 font-bold">{{ trans('site.price_growth_period') }}</span>
                    </div>
                    <ul class="space-y-3 text-xs text-slate-600 dark:text-slate-300 border-t border-slate-200 dark:border-slate-800 pt-6">
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_growth_b1') }}</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_growth_b2') }}</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_growth_b3') }}</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_growth_b4') }}</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_growth_b5') }}</li>
                    </ul>
                </div>
                <a href="{{ route('register') }}" class="mt-8 block text-center py-3 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold text-xs shadow-lg shadow-brand-500/25 transition force-white">
                    {{ trans('site.plan_growth_cta') }}
                </a>
            </div>

            <!-- Enterprise -->
            <div class="p-8 rounded-2xl bg-white dark:bg-navy-900/50 border border-slate-200 dark:border-slate-800 flex flex-col justify-between shadow-sm">
                <div>
                    <span class="text-xs font-bold text-slate-500 dark:text-slate-400">{{ trans('site.plan_enterprise_badge') }}</span>
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white mt-1">{{ trans('site.plan_enterprise') }}</h3>
                    <div class="mt-4 mb-6">
                        <span class="text-4xl font-black text-slate-900 dark:text-white">{{ trans('site.price_enterprise_val') }}</span>
                        <span class="text-xs text-slate-500 dark:text-slate-400 font-bold">{{ trans('site.price_enterprise_period') }}</span>
                    </div>
                    <ul class="space-y-3 text-xs text-slate-600 dark:text-slate-300 border-t border-slate-200 dark:border-slate-800 pt-6">
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_enterprise_b1') }}</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_enterprise_b2') }}</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_enterprise_b3') }}</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brand-500 dark:text-brand-400"></i> {{ trans('site.plan_enterprise_b4') }}</li>
                    </ul>
                </div>
                <a href="#contact" class="mt-8 block text-center py-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-white font-bold text-xs border border-slate-200 dark:border-transparent transition">
                    {{ trans('site.plan_enterprise_cta') }}
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section id="contact" class="py-16 gradient-bg border-t border-slate-200 dark:border-slate-800/80">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <h2 class="text-2xl sm:text-4xl font-black text-slate-900 dark:text-white mb-4">{{ trans('site.cta_heading') }}</h2>
        <p class="text-slate-600 dark:text-slate-300 text-sm max-w-xl mx-auto mb-8 leading-relaxed">
            {{ trans('site.cta_desc') }}
        </p>
        <div class="inline-flex items-center gap-4">
            <a href="mailto:support@emzatca.com" class="px-6 py-3 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold text-sm shadow-xl shadow-brand-500/30 transition force-white">
                {{ trans('site.cta_email_btn') }}
            </a>
            <a href="/docs/api" target="_blank" class="px-6 py-3 rounded-xl bg-white hover:bg-slate-50 text-slate-800 border border-slate-300 shadow-sm dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-300 dark:border-slate-700 font-bold text-sm transition">
                {{ trans('site.cta_docs_btn') }}
            </a>
        </div>
    </div>
</section>
@endsection