@extends('layouts.landing')

@section('meta_title', __('privacy_policy.privacy_meta_title'))
@section('meta_description', __('privacy_policy.privacy_meta_description'))
@section('meta_keywords', __('privacy_policy.privacy_meta_keywords'))
@section('canonical_url', route('landing.privacy'))

@php
    use Illuminate\Support\Facades\Auth;

    $logoUrl = !empty($seo?->logo) ? asset($seo->logo) : asset('hisabseba.png');
    $footerLogoUrl = !empty($seo?->logo) ? asset($seo->logo) : asset('hisabseba.png');

    $isLoggedIn = Auth::guard('web')->check();
    $loginUrl = $isLoggedIn ? route('user.dashboard') : route('user.login');
    $registerUrl = $isLoggedIn ? route('user.dashboard') : route('user.register');
    $currentLocale = app()->getLocale();
@endphp

@push('styles')
<style>
    html { scroll-behavior: smooth; }
    [x-cloak] { display: none !important; }
</style>
<script>
    tailwind.config = {
        theme: {
            extend: {
                fontFamily: {
                    sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
                },
                boxShadow: {
                    soft: '0 10px 30px rgba(15, 23, 42, 0.08)',
                    premium: '0 30px 80px rgba(37, 99, 235, 0.20)',
                    glow: '0 20px 60px rgba(14, 165, 233, 0.18)',
                    glass: '0 18px 50px rgba(15, 23, 42, 0.18)',
                },
            }
        }
    }
</script>
@endpush

@section('content')
<div class="bg-slate-50 text-slate-800 antialiased">

    {{-- Background --}}
    <div class="pointer-events-none fixed inset-0 -z-10 overflow-hidden" aria-hidden="true">
        <div class="absolute -left-24 -top-24 h-72 w-72 rounded-full bg-blue-200/50 blur-3xl"></div>
        <div class="absolute top-[18%] -right-20 h-80 w-80 rounded-full bg-cyan-200/40 blur-3xl"></div>
        <div class="absolute bottom-[-120px] left-[15%] h-96 w-96 rounded-full bg-indigo-200/30 blur-3xl"></div>
    </div>

    {{-- Header --}}
    <header class="fixed left-0 right-0 top-0 z-50" x-data="{ mobileMenu: false }">
        <div class="w-full border-b border-white/10 bg-white/85 shadow-sm backdrop-blur-2xl">
            <div class="w-full px-4 sm:px-6 lg:px-10">
                <div class="flex items-center justify-between py-4">
                    <a href="{{ route('landing.home') }}" class="flex items-center gap-3" aria-label="{{ $seo->site_name ?? 'Hisab Seba' }}">
                        <img
                            src="{{ $logoUrl }}"
                            alt="{{ $seo->site_name ?? 'Hisab Seba' }}"
                            class="h-12 w-auto object-contain"
                        >
                    </a>

                    <nav class="hidden items-center gap-8 text-sm font-semibold text-slate-600 xl:flex">
                        <a href="{{ route('landing.home') }}#features" class="transition hover:text-blue-600">
                            {{ __('privacy_policy.features') }}
                        </a>
                        <a href="{{ route('landing.home') }}#pricing" class="transition hover:text-blue-600">
                            {{ __('privacy_policy.pricing') }}
                        </a>
                        <a href="{{ route('landing.about') }}" class="transition hover:text-blue-600">
                            {{ __('privacy_policy.about') }}
                        </a>
                        <a href="{{ route('landing.contact') }}" class="transition hover:text-blue-600">
                            {{ __('privacy_policy.contact') }}
                        </a>
                        <a href="{{ route('landing.privacy') }}" class="text-blue-600">
                            {{ __('privacy_policy.privacy_policy') }}
                        </a>
                    </nav>

                    <div class="hidden items-center gap-3 sm:flex">
                        <div class="inline-flex items-center rounded-2xl border border-slate-200 bg-white p-1 shadow-sm">
                            <a href="{{ route('locale.switch', 'bn') }}"
                               class="inline-flex items-center rounded-xl px-3 py-2 text-sm font-bold transition {{ $currentLocale === 'bn' ? 'bg-blue-600 text-white shadow-sm' : 'text-slate-600 hover:bg-slate-50' }}">
                                {{ __('privacy_policy.locale_bn') }}
                            </a>
                            <a href="{{ route('locale.switch', 'en') }}"
                               class="inline-flex items-center rounded-xl px-3 py-2 text-sm font-bold transition {{ $currentLocale === 'en' ? 'bg-blue-600 text-white shadow-sm' : 'text-slate-600 hover:bg-slate-50' }}">
                                {{ __('privacy_policy.locale_en') }}
                            </a>
                        </div>

                        <a href="{{ $loginUrl }}"
                           class="inline-flex items-center rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
                            {{ $isLoggedIn ? __('privacy_policy.dashboard') : __('privacy_policy.login') }}
                        </a>

                        <a href="{{ $registerUrl }}"
                           class="inline-flex items-center rounded-xl bg-gradient-to-r from-blue-600 to-cyan-500 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-blue-500/20 transition hover:from-blue-700 hover:to-cyan-600">
                            {{ $isLoggedIn ? __('privacy_policy.go_to_dashboard') : __('privacy_policy.start_free_trial') }}
                        </a>
                    </div>

                    <button @click="mobileMenu = !mobileMenu"
                            class="inline-flex items-center justify-center rounded-xl border border-slate-200 bg-white p-2.5 text-slate-700 xl:hidden"
                            type="button"
                            aria-label="{{ __('privacy_policy.toggle_mobile_menu') }}">
                        <svg x-show="!mobileMenu" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
                                  d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                        <svg x-show="mobileMenu" x-cloak xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
                                  d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <div x-show="mobileMenu" x-transition x-cloak class="pb-5 xl:hidden">
                    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
                        <div class="mb-4 flex items-center gap-2">
                            <a href="{{ route('locale.switch', 'bn') }}"
                               class="flex-1 rounded-xl px-4 py-2.5 text-center text-sm font-bold transition {{ $currentLocale === 'bn' ? 'bg-blue-600 text-white' : 'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50' }}">
                                {{ __('privacy_policy.locale_bn') }}
                            </a>
                            <a href="{{ route('locale.switch', 'en') }}"
                               class="flex-1 rounded-xl px-4 py-2.5 text-center text-sm font-bold transition {{ $currentLocale === 'en' ? 'bg-blue-600 text-white' : 'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50' }}">
                                {{ __('privacy_policy.locale_en') }}
                            </a>
                        </div>

                        <nav class="flex flex-col gap-3 text-sm font-semibold text-slate-700">
                            <a href="{{ route('landing.home') }}#features" class="rounded-lg px-3 py-2 hover:bg-slate-100">
                                {{ __('privacy_policy.features') }}
                            </a>
                            <a href="{{ route('landing.home') }}#pricing" class="rounded-lg px-3 py-2 hover:bg-slate-100">
                                {{ __('privacy_policy.pricing') }}
                            </a>
                            <a href="{{ route('landing.about') }}" class="rounded-lg px-3 py-2 hover:bg-slate-100">
                                {{ __('privacy_policy.about') }}
                            </a>
                            <a href="{{ route('landing.contact') }}" class="rounded-lg px-3 py-2 hover:bg-slate-100">
                                {{ __('privacy_policy.contact') }}
                            </a>
                            <a href="{{ route('landing.privacy') }}" class="rounded-lg bg-slate-100 px-3 py-2 text-blue-600">
                                {{ __('privacy_policy.privacy_policy') }}
                            </a>
                        </nav>

                        <div class="mt-4 grid gap-3 sm:grid-cols-2">
                            <a href="{{ $loginUrl }}"
                               class="inline-flex items-center justify-center rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
                                {{ $isLoggedIn ? __('privacy_policy.dashboard') : __('privacy_policy.login') }}
                            </a>
                            <a href="{{ $registerUrl }}"
                               class="inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-600 to-cyan-500 px-4 py-3 text-sm font-bold text-white transition hover:from-blue-700 hover:to-cyan-600">
                                {{ $isLoggedIn ? __('privacy_policy.go_to_dashboard') : __('privacy_policy.start_free_trial') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main class="pb-20 pt-32">

        {{-- Hero --}}
        <section class="relative overflow-hidden bg-gradient-to-br from-slate-950 via-blue-950 to-slate-900 py-24 text-white">
            <div class="absolute inset-0 opacity-20" aria-hidden="true">
                <div class="absolute left-0 top-0 h-72 w-72 rounded-full bg-blue-500 blur-3xl"></div>
                <div class="absolute bottom-0 right-0 h-72 w-72 rounded-full bg-cyan-500 blur-3xl"></div>
            </div>

            <div class="relative mx-auto max-w-5xl px-4 text-center sm:px-6 lg:px-8">
                <span class="inline-flex rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-semibold text-blue-100 backdrop-blur">
                    {{ __('privacy_policy.privacy_badge') }}
                </span>

                <h1 class="mt-6 text-4xl font-extrabold sm:text-5xl">
                    {{ __('privacy_policy.privacy_hero_title') }}
                </h1>

                <p class="mx-auto mt-6 max-w-3xl text-lg leading-8 text-slate-300">
                    {{ __('privacy_policy.privacy_hero_desc') }}
                </p>
            </div>
        </section>

        {{-- Policy summary cards --}}
        <section class="py-16">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="grid gap-6 md:grid-cols-3">
                    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
                        <div class="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-100 text-2xl">🔐</div>
                        <h2 class="text-lg font-bold text-slate-900">{{ __('privacy_policy.privacy_card_data_title') }}</h2>
                        <p class="mt-2 leading-7 text-slate-600">
                            {{ __('privacy_policy.privacy_card_data_desc') }}
                        </p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
                        <div class="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-100 text-2xl">🛡️</div>
                        <h2 class="text-lg font-bold text-slate-900">{{ __('privacy_policy.privacy_card_security_title') }}</h2>
                        <p class="mt-2 leading-7 text-slate-600">
                            {{ __('privacy_policy.privacy_card_security_desc') }}
                        </p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
                        <div class="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-purple-100 text-2xl">📩</div>
                        <h2 class="text-lg font-bold text-slate-900">{{ __('privacy_policy.privacy_card_contact_title') }}</h2>
                        <p class="mt-2 leading-7 text-slate-600">
                            {{ __('privacy_policy.privacy_card_contact_desc') }}
                        </p>
                    </div>
                </div>
            </div>
        </section>

        {{-- Policy --}}
        <section class="pb-24">
            <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
                <div class="rounded-[32px] border border-slate-200 bg-white p-8 shadow-soft md:p-10">
                    <div class="mb-8 border-b border-slate-100 pb-6">
                        <h2 class="text-3xl font-extrabold text-slate-900">
                            {{ __('privacy_policy.privacy_policy') }}
                        </h2>
                        <p class="mt-3 leading-8 text-slate-600">
                            {{ __('privacy_policy.privacy_intro') }}
                        </p>
                    </div>

                    <div class="space-y-10 leading-8 text-slate-600">
                        <div>
                            <h3 class="text-2xl font-extrabold text-slate-900">
                                1. {{ __('privacy_policy.privacy_section_1_title') }}
                            </h3>
                            <p class="mt-3">
                                {{ __('privacy_policy.privacy_section_1_desc') }}
                            </p>
                        </div>

                        <div>
                            <h3 class="text-2xl font-extrabold text-slate-900">
                                2. {{ __('privacy_policy.privacy_section_2_title') }}
                            </h3>
                            <p class="mt-3">
                                {{ __('privacy_policy.privacy_section_2_desc') }}
                            </p>
                        </div>

                        <div>
                            <h3 class="text-2xl font-extrabold text-slate-900">
                                3. {{ __('privacy_policy.privacy_section_3_title') }}
                            </h3>
                            <p class="mt-3">
                                {{ __('privacy_policy.privacy_section_3_desc') }}
                            </p>
                        </div>

                        <div>
                            <h3 class="text-2xl font-extrabold text-slate-900">
                                4. {{ __('privacy_policy.privacy_section_4_title') }}
                            </h3>
                            <p class="mt-3">
                                {{ __('privacy_policy.privacy_section_4_desc') }}
                            </p>
                        </div>

                        <div>
                            <h3 class="text-2xl font-extrabold text-slate-900">
                                5. {{ __('privacy_policy.privacy_section_5_title') }}
                            </h3>
                            <p class="mt-3">
                                {{ __('privacy_policy.privacy_section_5_desc') }}
                            </p>
                        </div>

                        <div>
                            <h3 class="text-2xl font-extrabold text-slate-900">
                                6. {{ __('privacy_policy.privacy_section_6_title') }}
                            </h3>
                            <p class="mt-3">
                                {{ __('privacy_policy.privacy_section_6_desc') }}
                            </p>
                        </div>

                        <div>
                            <h3 class="text-2xl font-extrabold text-slate-900">
                                7. {{ __('privacy_policy.privacy_section_7_title') }}
                            </h3>
                            <p class="mt-3">
                                {!! __('privacy_policy.privacy_section_7_desc', ['email' => '<span class="font-semibold text-blue-600 break-all">'.e($seo->support_email ?: __('privacy_policy.default_support_email')).'</span>']) !!}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- CTA --}}
        <section class="bg-white py-24">
            <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
                <div class="rounded-[32px] bg-gradient-to-r from-blue-600 to-cyan-500 p-10 text-center text-white shadow-premium">
                    <h2 class="text-3xl font-extrabold sm:text-4xl">
                        {{ __('privacy_policy.privacy_cta_title') }}
                    </h2>
                    <p class="mt-4 text-lg text-blue-50">
                        {{ __('privacy_policy.privacy_cta_desc') }}
                    </p>
                    <div class="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
                        <a href="{{ route('landing.home') }}"
                           class="inline-flex items-center justify-center rounded-2xl bg-white px-8 py-4 text-base font-bold text-blue-700 transition hover:bg-slate-100">
                            {{ __('privacy_policy.back_to_home') }}
                        </a>
                        <a href="{{ route('landing.contact') }}"
                           class="inline-flex items-center justify-center rounded-2xl border border-white/20 bg-white/10 px-8 py-4 text-base font-semibold text-white transition hover:bg-white/20">
                            {{ __('privacy_policy.contact_us') }}
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    {{-- Footer --}}
    <footer class="bg-slate-900 text-slate-300">
        <div class="w-full px-4 py-14 sm:px-6 lg:px-10">
            <div class="grid gap-10 md:grid-cols-4">
                <div class="md:col-span-2">
                    <div class="flex items-center gap-3">
                        <img
                            src="{{ $footerLogoUrl }}"
                            alt="{{ $seo->site_name ?? 'Hisab Seba' }}"
                            class="h-10 w-auto object-contain"
                        >
                        <div>
                            <p class="text-lg font-extrabold text-white">{{ $seo->site_name ?? 'Hisab Seba' }}</p>
                            <p class="text-sm text-slate-400">{{ __('privacy_policy.footer_tagline') }}</p>
                        </div>
                    </div>
                    <p class="mt-4 max-w-md text-sm leading-7 text-slate-400">
                        {{ __('privacy_policy.privacy_footer_desc') }}
                    </p>
                </div>

                <div>
                    <h3 class="text-sm font-bold uppercase tracking-wider text-white">{{ __('privacy_policy.company') }}</h3>
                    <ul class="mt-4 space-y-3 text-sm text-slate-400">
                        <li><a href="{{ route('landing.about') }}" class="transition hover:text-white">{{ __('privacy_policy.about') }}</a></li>
                        <li><a href="{{ route('landing.contact') }}" class="transition hover:text-white">{{ __('privacy_policy.contact') }}</a></li>
                        <li><a href="{{ route('landing.privacy') }}" class="text-white">{{ __('privacy_policy.privacy_policy') }}</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-sm font-bold uppercase tracking-wider text-white">{{ __('privacy_policy.access') }}</h3>
                    <ul class="mt-4 space-y-3 text-sm text-slate-400">
                        <li><a href="{{ route('user.login') }}" class="transition hover:text-white">{{ __('privacy_policy.login') }}</a></li>
                        <li><a href="{{ route('user.register') }}" class="transition hover:text-white">{{ __('privacy_policy.register') }}</a></li>
                        <li><a href="{{ route('landing.home') }}" class="transition hover:text-white">{{ __('privacy_policy.home') }}</a></li>
                    </ul>
                </div>
            </div>

            <div class="mt-10 border-t border-slate-800 pt-6 text-center text-sm text-slate-500">
                &copy; {{ date('Y') }} {{ $seo->site_name ?? 'Hisab Seba' }}. {{ __('privacy_policy.all_rights_reserved') }}
            </div>
        </div>
    </footer>
</div>
@endsection