@extends('layouts.landing')

@section('meta_title', __('about.about_meta_title'))
@section('meta_description', __('about.about_meta_description'))
@section('meta_keywords', __('about.about_meta_keywords'))
@section('canonical_url', route('landing.about'))

@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

@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

@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 inset-x-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">
                            {{ __('about.features') }}
                        </a>
                        <a href="{{ route('landing.home') }}#loan-investment" class="transition hover:text-blue-600">
                            {{ __('about.loan_investment') }}
                        </a>
                        <a href="{{ route('landing.home') }}#pricing" class="transition hover:text-blue-600">
                            {{ __('about.pricing') }}
                        </a>
                        <a href="{{ route('landing.about') }}" class="text-blue-600">
                            {{ __('about.about') }}
                        </a>
                        <a href="{{ route('landing.contact') }}" class="transition hover:text-blue-600">
                            {{ __('about.contact') }}
                        </a>
                        <a href="{{ route('landing.privacy') }}" class="transition hover:text-blue-600">
                            {{ __('about.privacy_policy') }}
                        </a>
                    </nav>

                    <div class="hidden items-center gap-3 sm:flex">
                        {{-- Locale Switch --}}
                        <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' }}">
                                {{ __('about.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' }}">
                                {{ __('about.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 ? __('about.dashboard') : __('about.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 ? __('about.go_to_dashboard') : __('about.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="{{ __('about.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' }}">
                                {{ __('about.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' }}">
                                {{ __('about.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">
                                {{ __('about.features') }}
                            </a>
                            <a href="{{ route('landing.home') }}#loan-investment" class="rounded-lg px-3 py-2 hover:bg-slate-100">
                                {{ __('about.loan_investment') }}
                            </a>
                            <a href="{{ route('landing.home') }}#pricing" class="rounded-lg px-3 py-2 hover:bg-slate-100">
                                {{ __('about.pricing') }}
                            </a>
                            <a href="{{ route('landing.about') }}" class="rounded-lg bg-slate-100 px-3 py-2 text-blue-600">
                                {{ __('about.about') }}
                            </a>
                            <a href="{{ route('landing.contact') }}" class="rounded-lg px-3 py-2 hover:bg-slate-100">
                                {{ __('about.contact') }}
                            </a>
                            <a href="{{ route('landing.privacy') }}" class="rounded-lg px-3 py-2 hover:bg-slate-100">
                                {{ __('about.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 ? __('about.dashboard') : __('about.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 ? __('about.go_to_dashboard') : __('about.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-7xl px-4 sm:px-6 lg:px-8">
                <div class="grid items-center gap-12 lg:grid-cols-2">
                    <div>
                        <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">
                            {{ __('about.about_badge') }}
                        </span>

                        <h1 class="mt-6 text-4xl font-extrabold leading-tight sm:text-5xl">
                            {{ __('about.about_hero_title_1') }}
                            <span class="bg-gradient-to-r from-cyan-300 via-white to-blue-300 bg-clip-text text-transparent">
                                {{ __('about.about_hero_title_highlight') }}
                            </span>
                        </h1>

                        <p class="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
                            {{ __('about.about_hero_description') }}
                        </p>

                        <div class="mt-8 flex flex-col gap-4 sm:flex-row">
                            <a href="{{ $registerUrl }}"
                               class="inline-flex items-center justify-center rounded-2xl bg-white px-7 py-4 text-base font-bold text-blue-700 shadow-premium transition hover:bg-slate-100">
                                {{ $isLoggedIn ? __('about.go_to_dashboard') : __('about.start_free_trial') }}
                            </a>
                            <a href="{{ route('landing.contact') }}"
                               class="inline-flex items-center justify-center rounded-2xl border border-white/20 bg-white/10 px-7 py-4 text-base font-semibold text-white backdrop-blur transition hover:bg-white/20">
                                {{ __('about.contact_us') }}
                            </a>
                        </div>

                        <div class="mt-10 grid gap-4 sm:grid-cols-3">
                            <div class="rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                                <p class="text-2xl font-extrabold">24/7</p>
                                <p class="mt-1 text-xs text-slate-300">{{ __('about.access_247') }}</p>
                            </div>
                            <div class="rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                                <p class="text-2xl font-extrabold">{{ __('about.safe') }}</p>
                                <p class="mt-1 text-xs text-slate-300">{{ __('about.safe_system') }}</p>
                            </div>
                            <div class="rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                                <p class="text-2xl font-extrabold">{{ __('about.smart') }}</p>
                                <p class="mt-1 text-xs text-slate-300">{{ __('about.smart_reports') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-[32px] border border-white/10 bg-white/10 p-4 shadow-glass backdrop-blur-2xl">
                        <div class="rounded-[26px] bg-white p-6 shadow-soft">
                            <div class="grid gap-4 sm:grid-cols-2">
                                <div class="rounded-2xl border border-slate-100 bg-slate-50 p-5">
                                    <p class="text-sm text-slate-500">{{ __('about.mission') }}</p>
                                    <h2 class="mt-2 text-xl font-extrabold text-slate-900">
                                        {{ __('about.about_mission_title') }}
                                    </h2>
                                    <p class="mt-2 text-sm leading-6 text-slate-600">
                                        {{ __('about.about_mission_desc') }}
                                    </p>
                                </div>

                                <div class="rounded-2xl border border-slate-100 bg-slate-50 p-5">
                                    <p class="text-sm text-slate-500">{{ __('about.vision') }}</p>
                                    <h2 class="mt-2 text-xl font-extrabold text-slate-900">
                                        {{ __('about.about_vision_title') }}
                                    </h2>
                                    <p class="mt-2 text-sm leading-6 text-slate-600">
                                        {{ __('about.about_vision_desc') }}
                                    </p>
                                </div>

                                <div class="rounded-2xl border border-slate-100 bg-slate-50 p-5 sm:col-span-2">
                                    <p class="text-sm text-slate-500">{{ __('about.core_focus') }}</p>
                                    <h2 class="mt-2 text-xl font-extrabold text-slate-900">
                                        {{ __('about.about_core_focus_title') }}
                                    </h2>
                                    <p class="mt-2 text-sm leading-6 text-slate-600">
                                        {{ __('about.about_core_focus_desc') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- Story --}}
        <section class="py-24">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="grid gap-8 lg:grid-cols-3">
                    <div class="lg:col-span-1">
                        <span class="inline-flex rounded-full bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-700">
                            {{ __('about.why_we_built_it') }}
                        </span>
                        <h2 class="mt-5 text-3xl font-extrabold text-slate-900">
                            {{ __('about.about_story_title') }}
                        </h2>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-soft lg:col-span-2">
                        <p class="text-lg leading-8 text-slate-600">
                            {{ __('about.about_story_para_1') }}
                        </p>

                        <p class="mt-6 text-lg leading-8 text-slate-600">
                            {{ __('about.about_story_para_2') }}
                        </p>
                    </div>
                </div>
            </div>
        </section>

        {{-- What We Offer --}}
        <section class="bg-white py-24">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="mx-auto max-w-3xl text-center">
                    <span class="inline-flex rounded-full bg-slate-100 px-4 py-2 text-sm font-semibold text-slate-700">
                        {{ __('about.what_we_offer') }}
                    </span>
                    <h2 class="mt-5 text-3xl font-extrabold text-slate-900 sm:text-4xl">
                        {{ __('about.about_offer_title') }}
                    </h2>
                    <p class="mt-4 text-lg text-slate-600">
                        {{ __('about.about_offer_desc') }}
                    </p>
                </div>

                <div class="mt-16 grid gap-8 md:grid-cols-2 xl:grid-cols-3">
                    <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8 shadow-soft">
                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-100 text-2xl">📘</div>
                        <h3 class="text-xl font-bold text-slate-900">{{ __('about.customer_supplier_ledger') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('about.about_offer_ledger_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8 shadow-soft">
                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-100 text-2xl">💳</div>
                        <h3 class="text-xl font-bold text-slate-900">{{ __('about.account_balance_management') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('about.about_offer_account_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8 shadow-soft">
                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-purple-100 text-2xl">🧾</div>
                        <h3 class="text-xl font-bold text-slate-900">{{ __('about.expense_management') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('about.about_offer_expense_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8 shadow-soft">
                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-cyan-100 text-2xl">🏦</div>
                        <h3 class="text-xl font-bold text-slate-900">{{ __('about.bank_loan_management') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('about.about_offer_loan_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8 shadow-soft">
                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-indigo-100 text-2xl">💼</div>
                        <h3 class="text-xl font-bold text-slate-900">{{ __('about.owner_investment_management') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('about.about_offer_investment_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8 shadow-soft">
                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-100 text-2xl">📈</div>
                        <h3 class="text-xl font-bold text-slate-900">{{ __('about.profit_loss_reports') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('about.about_offer_reports_desc') }}</p>
                    </div>
                </div>
            </div>
        </section>

        {{-- Values --}}
        <section class="py-24">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="mx-auto max-w-3xl text-center">
                    <span class="inline-flex rounded-full bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-700">
                        {{ __('about.our_values') }}
                    </span>
                    <h2 class="mt-5 text-3xl font-extrabold text-slate-900 sm:text-4xl">
                        {{ __('about.about_values_title') }}
                    </h2>
                </div>

                <div class="mt-16 grid gap-8 md:grid-cols-2 xl:grid-cols-4">
                    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-soft">
                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-100 text-2xl">🎯</div>
                        <h3 class="text-xl font-bold text-slate-900">{{ __('about.practical') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('about.about_value_practical_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-soft">
                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-100 text-2xl">⚡</div>
                        <h3 class="text-xl font-bold text-slate-900">{{ __('about.fast') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('about.about_value_fast_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-soft">
                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-purple-100 text-2xl">🔒</div>
                        <h3 class="text-xl font-bold text-slate-900">{{ __('about.reliable') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('about.about_value_reliable_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-soft">
                        <div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-100 text-2xl">📈</div>
                        <h3 class="text-xl font-bold text-slate-900">{{ __('about.growth_focused') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('about.about_value_growth_desc') }}</p>
                    </div>
                </div>
            </div>
        </section>

        {{-- Who It's For --}}
        <section class="bg-slate-900 py-24 text-white">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="grid gap-12 lg:grid-cols-2">
                    <div>
                        <span class="inline-flex rounded-full border border-white/10 bg-white/10 px-4 py-2 text-sm font-semibold text-blue-100">
                            {{ __('about.who_its_for') }}
                        </span>
                        <h2 class="mt-5 text-3xl font-extrabold sm:text-4xl">
                            {{ __('about.about_audience_title') }}
                        </h2>
                        <p class="mt-5 text-lg leading-8 text-slate-300">
                            {{ __('about.about_audience_desc') }}
                        </p>
                    </div>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <div class="rounded-2xl border border-white/10 bg-white/10 p-5">
                            <h3 class="text-lg font-bold">{{ __('about.shop_owners') }}</h3>
                            <p class="mt-2 text-sm leading-6 text-slate-300">{{ __('about.about_audience_shop_desc') }}</p>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-white/10 p-5">
                            <h3 class="text-lg font-bold">{{ __('about.wholesale_business') }}</h3>
                            <p class="mt-2 text-sm leading-6 text-slate-300">{{ __('about.about_audience_wholesale_desc') }}</p>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-white/10 p-5">
                            <h3 class="text-lg font-bold">{{ __('about.small_factories') }}</h3>
                            <p class="mt-2 text-sm leading-6 text-slate-300">{{ __('about.about_audience_factory_desc') }}</p>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-white/10 p-5">
                            <h3 class="text-lg font-bold">{{ __('about.growing_enterprises') }}</h3>
                            <p class="mt-2 text-sm leading-6 text-slate-300">{{ __('about.about_audience_enterprise_desc') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- CTA --}}
        <section class="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">
                        {{ __('about.about_cta_title') }}
                    </h2>
                    <p class="mt-4 text-lg text-blue-50">
                        {{ __('about.about_cta_desc') }}
                    </p>

                    <div class="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
                        <a href="{{ $registerUrl }}"
                           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">
                            {{ $isLoggedIn ? __('about.go_to_dashboard') : __('about.start_free_trial') }}
                        </a>
                        <a href="{{ route('landing.home') }}"
                           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">
                            {{ __('about.back_to_home') }}
                        </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">{{ __('about.footer_tagline') }}</p>
                        </div>
                    </div>
                    <p class="mt-4 max-w-md text-sm leading-7 text-slate-400">
                        {{ __('about.about_footer_desc') }}
                    </p>
                </div>

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

                <div>
                    <h3 class="text-sm font-bold uppercase tracking-wider text-white">{{ __('about.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">{{ __('about.login') }}</a></li>
                        <li><a href="{{ route('user.register') }}" class="transition hover:text-white">{{ __('about.register') }}</a></li>
                        <li><a href="{{ route('landing.home') }}" class="transition hover:text-white">{{ __('about.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' }}. {{ __('about.all_rights_reserved') }}
            </div>
        </div>
    </footer>
</div>
@endsection