@extends('layouts.landing')

@section('meta_title', __('home_page.meta_home_title'))
@section('meta_description', __('home_page.meta_home_description'))
@section('meta_keywords', __('home_page.meta_home_keywords'))
@section('canonical_url', route('landing.home'))

@php
    use Illuminate\Support\Facades\Auth;

    if (!function_exists('planDurationLabel')) {
        function planDurationLabel($days) {
            return match ((int) $days) {
                30 => __('home_page.month_1'),
                90 => __('home_page.month_3'),
                180 => __('home_page.month_6'),
                365 => __('home_page.year_1'),
                730 => __('home_page.year_2'),
                1095 => __('home_page.year_3'),
                default => __('home_page.days_label', ['days' => $days]),
            };
        }
    }

    if (!function_exists('planTagLabel')) {
        function planTagLabel($days) {
            if ($days <= 30) return __('home_page.starter');
            if ($days <= 90) return __('home_page.popular');
            if ($days <= 180) return __('home_page.best_value');
            if ($days <= 365) return __('home_page.growth');
            if ($days <= 730) return __('home_page.business');
            return __('home_page.enterprise');
        }
    }

    $popularPlanId = optional($plans->sortBy('price')->values()->get(1))->id ?? optional($plans->first())->id;

    $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('login');
    $registerUrl = $isLoggedIn ? route('user.dashboard') : route('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)',
                },
            }
        }
    }
</script>
@endpush

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

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

    <header class="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-white/80 backdrop-blur-2xl" x-data="{ mobileMenu: false }">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <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-7 text-sm font-semibold text-slate-600 xl:flex">
                    <a href="#features" class="transition hover:text-blue-600">{{ __('home_page.features') }}</a>
                    <a href="#loan-investment" class="transition hover:text-blue-600">{{ __('home_page.loan_investment') }}</a>
                    <a href="#pricing" class="transition hover:text-blue-600">{{ __('home_page.pricing') }}</a>
                    <a href="#testimonials" class="transition hover:text-blue-600">{{ __('home_page.testimonials') }}</a>
                    <a href="#faq" class="transition hover:text-blue-600">{{ __('home_page.faq') }}</a>
                    <a href="{{ route('landing.about') }}" class="transition hover:text-blue-600">{{ __('home_page.about') }}</a>
                    <a href="{{ route('landing.contact') }}" class="transition hover:text-blue-600">{{ __('home_page.contact') }}</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', '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' }}">
                            {{ __('home_page.locale_en_short') }}
                        </a>
                        <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' }}">
                            {{ __('home_page.locale_bn_short') }}
                        </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 ? __('home_page.dashboard') : __('home_page.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 ? __('home_page.go_to_dashboard') : __('home_page.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="{{ __('home_page.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', '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' }}">
                            {{ __('home_page.locale_en') }}
                        </a>
                        <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' }}">
                            {{ __('home_page.locale_bn') }}
                        </a>
                    </div>

                    <nav class="flex flex-col gap-3 text-sm font-semibold text-slate-700">
                        <a href="#features" @click="mobileMenu = false" class="rounded-lg px-3 py-2 hover:bg-slate-100">{{ __('home_page.features') }}</a>
                        <a href="#loan-investment" @click="mobileMenu = false" class="rounded-lg px-3 py-2 hover:bg-slate-100">{{ __('home_page.loan_investment') }}</a>
                        <a href="#pricing" @click="mobileMenu = false" class="rounded-lg px-3 py-2 hover:bg-slate-100">{{ __('home_page.pricing') }}</a>
                        <a href="#testimonials" @click="mobileMenu = false" class="rounded-lg px-3 py-2 hover:bg-slate-100">{{ __('home_page.testimonials') }}</a>
                        <a href="#faq" @click="mobileMenu = false" class="rounded-lg px-3 py-2 hover:bg-slate-100">{{ __('home_page.faq') }}</a>
                        <a href="{{ route('landing.about') }}" class="rounded-lg px-3 py-2 hover:bg-slate-100">{{ __('home_page.about') }}</a>
                        <a href="{{ route('landing.contact') }}" class="rounded-lg px-3 py-2 hover:bg-slate-100">{{ __('home_page.contact') }}</a>
                        <a href="{{ route('landing.privacy') }}" class="rounded-lg px-3 py-2 hover:bg-slate-100">{{ __('home_page.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 ? __('home_page.dashboard') : __('home_page.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 ? __('home_page.go_to_dashboard') : __('home_page.start_free_trial') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main>
        <section class="relative overflow-hidden bg-gradient-to-br from-slate-950 via-blue-950 to-slate-900 pb-24 pt-36 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-14 lg:grid-cols-2">
                    <div>
                        <div class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-semibold text-blue-100 backdrop-blur">
                            <span class="h-2.5 w-2.5 rounded-full bg-emerald-400"></span>
                            {{ __('home_page.trial_30_days_new_users') }}
                        </div>

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

                        <p class="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
                            {{ __('home_page.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 ? __('home_page.go_to_dashboard') : __('home_page.get_started_free') }}
                            </a>
                            <a href="#features" 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">
                                {{ __('home_page.explore_features') }}
                            </a>
                        </div>

                        <div class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-4">
                            <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">{{ __('home_page.cloud_access') }}</p>
                            </div>
                            <div class="rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                                <p class="text-2xl font-extrabold">{{ __('home_page.days_30') }}</p>
                                <p class="mt-1 text-xs text-slate-300">{{ __('home_page.free_trial') }}</p>
                            </div>
                            <div class="rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                                <p class="text-2xl font-extrabold">99.9%</p>
                                <p class="mt-1 text-xs text-slate-300">{{ __('home_page.uptime') }}</p>
                            </div>
                            <div class="rounded-2xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                                <p class="text-2xl font-extrabold">{{ __('home_page.all_in_one') }}</p>
                                <p class="mt-1 text-xs text-slate-300">{{ __('home_page.finance_control') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="relative">
                        <div class="absolute right-2 top-[-20px] z-20 rounded-2xl bg-amber-400 px-5 py-3 text-sm font-bold text-slate-900 shadow-2xl">
                            <span x-text="trialText"></span>
                        </div>

                        <div class="rounded-[32px] border border-white/10 bg-white/10 p-4 shadow-glow backdrop-blur-2xl">
                            <div class="rounded-[26px] bg-white p-5 shadow-soft">
                                <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                                    <div>
                                        <p class="text-sm text-slate-500">{{ __('home_page.financial_overview') }}</p>
                                        <h2 class="text-2xl font-extrabold text-slate-900">{{ __('home_page.business_dashboard') }}</h2>
                                    </div>
                                    <span class="inline-flex rounded-full bg-emerald-100 px-3 py-1 text-xs font-bold text-emerald-700">
                                        {{ __('home_page.real_time_insights') }}
                                    </span>
                                </div>

                                <div class="mt-5 grid grid-cols-2 gap-4">
                                    <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4">
                                        <p class="text-sm text-slate-500">{{ __('home_page.total_balance') }}</p>
                                        <p class="mt-2 text-2xl font-extrabold text-slate-900">৳ 210,000</p>
                                    </div>
                                    <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4">
                                        <p class="text-sm text-slate-500">{{ __('home_page.net_profit') }}</p>
                                        <p class="mt-2 text-2xl font-extrabold text-emerald-600">৳ 48,500</p>
                                    </div>
                                    <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4">
                                        <p class="text-sm text-slate-500">{{ __('home_page.bank_loan_due') }}</p>
                                        <p class="mt-2 text-2xl font-extrabold text-rose-600">৳ 65,000</p>
                                    </div>
                                    <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4">
                                        <p class="text-sm text-slate-500">{{ __('home_page.owner_investment') }}</p>
                                        <p class="mt-2 text-2xl font-extrabold text-blue-600">৳ 120,000</p>
                                    </div>
                                </div>

                                <div class="mt-5 rounded-2xl border border-slate-100 bg-white p-4">
                                    <canvas id="dashboardChart" class="h-72 w-full" aria-label="{{ __('home_page.business_finance_overview_chart') }}"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="features" class="bg-slate-50 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">
                        {{ __('home_page.powerful_features') }}
                    </span>
                    <h2 class="mt-5 text-3xl font-extrabold text-slate-900 sm:text-4xl">
                        {{ __('home_page.premium_finance_system') }}
                    </h2>
                    <p class="mt-4 text-lg text-slate-600">
                        {{ __('home_page.features_intro') }}
                    </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-white p-8 shadow-soft transition hover:-translate-y-1 hover:shadow-xl">
                        <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">{{ __('home_page.customer_supplier_ledger') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('home_page.customer_supplier_ledger_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-soft transition hover:-translate-y-1 hover:shadow-xl">
                        <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">{{ __('home_page.account_balance_management') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('home_page.account_balance_management_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-soft transition hover:-translate-y-1 hover:shadow-xl">
                        <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">{{ __('home_page.expense_management') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('home_page.expense_management_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-soft transition hover:-translate-y-1 hover:shadow-xl">
                        <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">{{ __('home_page.profit_loss_reports') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('home_page.profit_loss_reports_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-soft transition hover:-translate-y-1 hover:shadow-xl">
                        <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">{{ __('home_page.bank_loan_management') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('home_page.bank_loan_management_desc') }}</p>
                    </div>

                    <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-soft transition hover:-translate-y-1 hover:shadow-xl">
                        <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">{{ __('home_page.owner_investment_management') }}</h3>
                        <p class="mt-3 leading-7 text-slate-600">{{ __('home_page.owner_investment_management_desc') }}</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="loan-investment" class="bg-white py-24">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="grid gap-10 lg:grid-cols-2">
                    <div class="rounded-[30px] bg-gradient-to-br from-slate-900 via-blue-900 to-slate-800 p-8 text-white shadow-premium">
                        <span class="inline-flex rounded-full bg-white/10 px-4 py-2 text-sm font-semibold text-cyan-200">
                            {{ __('home_page.loan_control') }}
                        </span>
                        <h2 class="mt-5 text-3xl font-extrabold">{{ __('home_page.advanced_bank_loan_management') }}</h2>
                        <p class="mt-4 leading-8 text-slate-300">{{ __('home_page.advanced_bank_loan_management_desc') }}</p>

                        <div class="mt-8 space-y-4">
                            <div class="rounded-2xl border border-white/10 bg-white/10 p-4">
                                <h3 class="font-bold">{{ __('home_page.loan_entry_source_tracking') }}</h3>
                                <p class="mt-1 text-sm text-slate-300">{{ __('home_page.loan_entry_source_tracking_desc') }}</p>
                            </div>
                            <div class="rounded-2xl border border-white/10 bg-white/10 p-4">
                                <h3 class="font-bold">{{ __('home_page.installment_monitoring') }}</h3>
                                <p class="mt-1 text-sm text-slate-300">{{ __('home_page.installment_monitoring_desc') }}</p>
                            </div>
                            <div class="rounded-2xl border border-white/10 bg-white/10 p-4">
                                <h3 class="font-bold">{{ __('home_page.due_balance_visibility') }}</h3>
                                <p class="mt-1 text-sm text-slate-300">{{ __('home_page.due_balance_visibility_desc') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-[30px] border border-slate-200 bg-slate-50 p-8 shadow-soft">
                        <span class="inline-flex rounded-full bg-indigo-100 px-4 py-2 text-sm font-semibold text-indigo-700">
                            {{ __('home_page.capital_ownership') }}
                        </span>
                        <h2 class="mt-5 text-3xl font-extrabold text-slate-900">{{ __('home_page.owner_investment_withdrawal_management') }}</h2>
                        <p class="mt-4 leading-8 text-slate-600">{{ __('home_page.owner_investment_withdrawal_management_desc') }}</p>

                        <div class="mt-8 grid gap-4">
                            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                                <h3 class="font-bold text-slate-900">{{ __('home_page.capital_injection_tracking') }}</h3>
                                <p class="mt-1 text-sm text-slate-600">{{ __('home_page.capital_injection_tracking_desc') }}</p>
                            </div>
                            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                                <h3 class="font-bold text-slate-900">{{ __('home_page.owner_withdrawal_history') }}</h3>
                                <p class="mt-1 text-sm text-slate-600">{{ __('home_page.owner_withdrawal_history_desc') }}</p>
                            </div>
                            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                                <h3 class="font-bold text-slate-900">{{ __('home_page.net_investment_balance') }}</h3>
                                <p class="mt-1 text-sm text-slate-600">{{ __('home_page.net_investment_balance_desc') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="pricing" class="bg-slate-50 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-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm">
                        {{ __('home_page.subscription_plans') }}
                    </span>
                    <h2 class="mt-5 text-3xl font-extrabold text-slate-900 sm:text-4xl">{{ __('home_page.flexible_plans_heading') }}</h2>
                    <p class="mt-4 text-lg text-slate-600">{{ __('home_page.flexible_plans_desc') }}</p>
                </div>

                @if($plans->count())
                    <div class="mt-16 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
                        @foreach($plans as $plan)
                            @php
                                $isPopular = $plan->id === $popularPlanId;
                                $durationLabel = planDurationLabel($plan->duration_days);
                                $tagLabel = planTagLabel($plan->duration_days);
                            @endphp
                            <div class="relative rounded-3xl border {{ $isPopular ? 'border-blue-600 ring-2 ring-blue-100' : 'border-slate-200' }} bg-white p-6 shadow-soft transition hover:-translate-y-1 hover:shadow-xl">
                                @if($isPopular)
                                    <div class="absolute left-1/2 top-[-12px] -translate-x-1/2 rounded-full bg-gradient-to-r from-blue-600 to-cyan-500 px-4 py-1 text-xs font-bold text-white shadow-lg">
                                        {{ __('home_page.most_popular') }}
                                    </div>
                                @endif

                                <span class="inline-flex rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-600">{{ $tagLabel }}</span>
                                <h3 class="mt-5 text-lg font-bold text-slate-900">{{ $plan->name ?: $durationLabel }}</h3>
                                <p class="mt-3 text-3xl font-extrabold text-slate-900">৳{{ number_format($plan->price, 2) }}</p>
                                <p class="mt-2 text-sm text-slate-500">{{ __('home_page.duration') }}: {{ $durationLabel }}</p>

                                <ul class="mt-6 space-y-3 text-sm text-slate-600">
                                    <li>✔ {{ __('home_page.plan_feature_1') }}</li>
                                    <li>✔ {{ __('home_page.plan_feature_2') }}</li>
                                    <li>✔ {{ __('home_page.plan_feature_3') }}</li>
                                    <li>✔ {{ __('home_page.plan_feature_4') }}</li>
                                </ul>

                                <a href="{{ $registerUrl }}" class="mt-8 inline-flex w-full items-center justify-center rounded-2xl {{ $isPopular ? 'bg-gradient-to-r from-blue-600 to-cyan-500 text-white hover:from-blue-700 hover:to-cyan-600' : 'bg-slate-900 text-white hover:bg-slate-800' }} px-4 py-3 font-semibold transition">
                                    {{ $isLoggedIn ? __('home_page.go_to_dashboard') : __('home_page.subscribe_now') }}
                                </a>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="mx-auto mt-16 max-w-2xl rounded-3xl border border-dashed border-slate-300 bg-white p-12 text-center shadow-soft">
                        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 text-3xl">📦</div>
                        <h3 class="mt-5 text-2xl font-bold text-slate-900">{{ __('home_page.no_active_plans') }}</h3>
                        <p class="mt-3 text-slate-600">{{ __('home_page.no_active_plans_desc') }}</p>
                    </div>
                @endif
            </div>
        </section>

        <section id="testimonials" 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-blue-100 px-4 py-2 text-sm font-semibold text-blue-700">{{ __('home_page.testimonials') }}</span>
                    <h2 class="mt-5 text-3xl font-extrabold text-slate-900 sm:text-4xl">{{ __('home_page.trusted_by_growing_businesses') }}</h2>
                </div>

                <div class="mt-16 grid gap-8 md:grid-cols-3">
                    <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8 shadow-soft">
                        <div class="mb-5 text-xl text-amber-400">★★★★★</div>
                        <p class="leading-7 text-slate-600">{{ __('home_page.testimonial_1') }}</p>
                        <div class="mt-6">
                            <p class="font-bold text-slate-900">{{ __('home_page.testimonial_author_1') }}</p>
                            <p class="text-sm text-slate-500">{{ __('home_page.shop_owner') }}</p>
                        </div>
                    </div>
                    <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8 shadow-soft">
                        <div class="mb-5 text-xl text-amber-400">★★★★★</div>
                        <p class="leading-7 text-slate-600">{{ __('home_page.testimonial_2') }}</p>
                        <div class="mt-6">
                            <p class="font-bold text-slate-900">{{ __('home_page.testimonial_author_2') }}</p>
                            <p class="text-sm text-slate-500">{{ __('home_page.wholesale_business_owner') }}</p>
                        </div>
                    </div>
                    <div class="rounded-3xl border border-slate-200 bg-slate-50 p-8 shadow-soft">
                        <div class="mb-5 text-xl text-amber-400">★★★★★</div>
                        <p class="leading-7 text-slate-600">{{ __('home_page.testimonial_3') }}</p>
                        <div class="mt-6">
                            <p class="font-bold text-slate-900">{{ __('home_page.testimonial_author_3') }}</p>
                            <p class="text-sm text-slate-500">{{ __('home_page.factory_manager') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="faq" class="bg-slate-50 py-24" x-data="{ open: 1 }">
            <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
                <div class="mx-auto max-w-3xl text-center">
                    <span class="inline-flex rounded-full bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm">{{ __('home_page.faq') }}</span>
                    <h2 class="mt-5 text-3xl font-extrabold text-slate-900 sm:text-4xl">{{ __('home_page.frequently_asked_questions') }}</h2>
                </div>

                <div class="mt-14 space-y-4">
                    @foreach ([1,2,3,4] as $i)
                        <div class="rounded-2xl border border-slate-200 bg-white p-5">
                            <button class="flex w-full items-center justify-between text-left" @click="open === {{ $i }} ? open = null : open = {{ $i }}" type="button">
                                <span class="text-lg font-semibold text-slate-900">{{ __('home_page.faq_q'.$i) }}</span>
                                <span class="text-2xl text-slate-500" x-text="open === {{ $i }} ? '−' : '+'"></span>
                            </button>
                            <p x-show="open === {{ $i }}" x-transition class="mt-3 leading-7 text-slate-600">{{ __('home_page.faq_a'.$i) }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="relative overflow-hidden bg-slate-950 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-4xl px-4 text-center sm:px-6 lg:px-8">
                <h2 class="text-3xl font-extrabold sm:text-4xl">{{ __('home_page.cta_heading') }}</h2>
                <p class="mt-5 text-lg leading-8 text-slate-300">{{ __('home_page.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-gradient-to-r from-blue-600 to-cyan-500 px-8 py-4 text-base font-bold text-white shadow-lg shadow-blue-600/30 transition hover:from-blue-700 hover:to-cyan-600">
                        {{ $isLoggedIn ? __('home_page.go_to_dashboard') : __('home_page.start_free_trial') }}
                    </a>
                    <a href="{{ $loginUrl }}" 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">
                        {{ $isLoggedIn ? __('home_page.open_dashboard') : __('home_page.login_now') }}
                    </a>
                </div>
            </div>
        </section>
    </main>

    <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">{{ __('home_page.footer_tagline') }}</p>
                        </div>
                    </div>
                    <p class="mt-4 max-w-md text-sm leading-7 text-slate-400">{{ __('home_page.footer_desc') }}</p>
                </div>

                <div>
                    <h3 class="text-sm font-bold uppercase tracking-wider text-white">{{ __('home_page.product') }}</h3>
                    <ul class="mt-4 space-y-3 text-sm text-slate-400">
                        <li><a href="#features" class="transition hover:text-white">{{ __('home_page.features') }}</a></li>
                        <li><a href="#loan-investment" class="transition hover:text-white">{{ __('home_page.loan_investment') }}</a></li>
                        <li><a href="#pricing" class="transition hover:text-white">{{ __('home_page.pricing') }}</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-sm font-bold uppercase tracking-wider text-white">{{ __('home_page.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">{{ __('home_page.about') }}</a></li>
                        <li><a href="{{ route('landing.contact') }}" class="transition hover:text-white">{{ __('home_page.contact') }}</a></li>
                        <li><a href="{{ route('landing.privacy') }}" class="transition hover:text-white">{{ __('home_page.privacy_policy') }}</a></li>
                        <li><a href="{{ $loginUrl }}" class="transition hover:text-white">{{ $isLoggedIn ? __('home_page.dashboard') : __('home_page.login') }}</a></li>
                        <li><a href="{{ $registerUrl }}" class="transition hover:text-white">{{ $isLoggedIn ? __('home_page.go_to_dashboard') : __('home_page.register') }}</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' }}. {{ __('home_page.all_rights_reserved') }}
            </div>
        </div>
    </footer>
</div>
@endsection

@push('scripts')
<script>
    function landingPage() {
        return {
            trialEnd: new Date(new Date().setDate(new Date().getDate() + 30)),
            get trialDaysLeft() {
                return Math.max(0, Math.ceil((this.trialEnd - new Date()) / (1000 * 60 * 60 * 24)));
            },
            get trialText() {
                return @json(__('home_page.trial_days_left', ['days' => '__DAYS__'])).replace('__DAYS__', this.trialDaysLeft);
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        const chartElement = document.getElementById('dashboardChart');
        if (!chartElement || typeof Chart === 'undefined') return;

        new Chart(chartElement.getContext('2d'), {
            type: 'line',
            data: {
                labels: [
                    @json(__('home_page.month_jan')),
                    @json(__('home_page.month_feb')),
                    @json(__('home_page.month_mar')),
                    @json(__('home_page.month_apr')),
                    @json(__('home_page.month_may')),
                    @json(__('home_page.month_jun'))
                ],
                datasets: [
                    {
                        label: @json(__('home_page.business_balance')),
                        data: [60000, 75000, 72000, 89000, 98000, 120000],
                        borderColor: '#2563EB',
                        backgroundColor: 'rgba(37, 99, 235, 0.12)',
                        fill: true,
                        tension: 0.35,
                        pointRadius: 4,
                        pointHoverRadius: 6
                    },
                    {
                        label: @json(__('home_page.owner_investment')),
                        data: [20000, 35000, 40000, 50000, 70000, 85000],
                        borderColor: '#7C3AED',
                        fill: false,
                        tension: 0.35,
                        pointRadius: 4,
                        pointHoverRadius: 6
                    },
                    {
                        label: @json(__('home_page.loan_due')),
                        data: [90000, 85000, 78000, 74000, 69000, 65000],
                        borderColor: '#EF4444',
                        fill: false,
                        tension: 0.35,
                        pointRadius: 4,
                        pointHoverRadius: 6
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        labels: {
                            color: '#475569',
                            boxWidth: 12,
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        backgroundColor: '#0F172A',
                        titleColor: '#fff',
                        bodyColor: '#fff',
                        padding: 12,
                        cornerRadius: 12
                    }
                },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { color: '#64748B' }
                    },
                    y: {
                        grid: { color: 'rgba(148, 163, 184, 0.15)' },
                        ticks: { color: '#64748B' }
                    }
                }
            }
        });
    });
</script>
@endpush