@extends('layouts.app')

@section('title', 'MotoSolution Bangladesh – Japanese Reconditioned Cars & Live Auction Pre-Order')
@section('meta_description', 'Your Dream Car, Directly From Japan. Explore verified Japanese vehicles in Dhaka showroom, bid on live USS/TAA auctions, and calculate Bangladesh landed cost before you buy.')

@section('content')

<!-- 1. Hero Section: Premium Japanese Automotive Aesthetic -->
<section class="relative bg-[#0B0F19] text-white pt-12 pb-24 lg:pt-20 lg:pb-32 overflow-hidden">
    <!-- Ambient Japanese Red Radial Glows -->
    <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-red-600/15 rounded-full blur-3xl pointer-events-none -mr-48 -mt-48"></div>
    <div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-red-800/10 rounded-full blur-3xl pointer-events-none -ml-40 -mb-40"></div>
    
    <!-- Subtle Carbon Grid Pattern -->
    <div class="absolute inset-0 opacity-5 bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            
            <!-- Left Text Content -->
            <div class="lg:col-span-7 space-y-6 text-center lg:text-left">
                <!-- Specialist Badge -->
                <div class="inline-flex items-center gap-2.5 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs font-semibold text-slate-300">
                    <span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
                    <span>Japanese Automotive Import Specialists</span>
                    <span class="text-white/20">•</span>
                    <span class="text-red-400">Since 2016</span>
                </div>

                <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight font-heading leading-[1.1]">
                    {{ __('app.hero_title_1') }}<br>
                    <span class="bg-gradient-to-r from-red-500 via-red-400 to-amber-300 bg-clip-text text-transparent">
                        {{ __('app.hero_title_2') }}
                    </span>
                </h1>

                <p class="text-base sm:text-lg text-slate-300 max-w-2xl mx-auto lg:mx-0 font-normal leading-relaxed">
                    {{ __('app.hero_subtitle') }}
                </p>

                <!-- CTAs -->
                <div class="pt-3 flex flex-wrap items-center justify-center lg:justify-start gap-3.5">
                    <a href="{{ route('auction.index') }}" class="inline-flex items-center gap-2.5 px-6 py-3.5 rounded-xl bg-red-600 hover:bg-red-700 text-white text-sm font-bold shadow-xl shadow-red-900/40 transition hover:-translate-y-0.5">
                        <i class="fa-solid fa-satellite-dish text-white"></i>
                        <span>{{ __('app.explore_live_auctions') }}</span>
                    </a>
                    <a href="{{ route('inventory.index') }}" class="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl bg-white/10 hover:bg-white/15 text-white text-sm font-bold border border-white/10 transition hover:-translate-y-0.5">
                        <i class="fa-solid fa-car"></i>
                        <span>{{ __('app.browse_ready_stock') }}</span>
                    </a>
                    <a href="{{ route('calculator') }}" class="inline-flex items-center gap-2 px-5 py-3.5 rounded-xl bg-black/40 hover:bg-black/60 text-slate-300 hover:text-white text-sm font-semibold border border-white/10 transition">
                        <i class="fa-solid fa-calculator text-amber-400"></i>
                        <span>{{ __('app.calculate_import_cost') }}</span>
                    </a>
                </div>

                <!-- Trust Badges Metrics -->
                <div class="pt-8 border-t border-white/10 grid grid-cols-3 gap-6 max-w-lg mx-auto lg:mx-0">
                    <div>
                        <p class="text-2xl sm:text-3xl font-extrabold text-white font-heading">700+</p>
                        <p class="text-xs text-slate-400 font-medium mt-0.5">Vehicles Delivered</p>
                    </div>
                    <div>
                        <p class="text-2xl sm:text-3xl font-extrabold text-white font-heading">USS/TAA</p>
                        <p class="text-xs text-slate-400 font-medium mt-0.5">Direct Japan Auction</p>
                    </div>
                    <div>
                        <p class="text-2xl sm:text-3xl font-extrabold text-white font-heading">4.5★</p>
                        <p class="text-xs text-slate-400 font-medium mt-0.5">Average Grade</p>
                    </div>
                </div>
            </div>

            <!-- Right Visual Showcase: Premium Vehicle Card Spotlight -->
            <div class="lg:col-span-5 relative">
                <div class="relative bg-gradient-to-br from-[#1F2937] to-[#111827] p-3 sm:p-4 rounded-3xl border border-white/15 shadow-2xl">
                    <div class="relative rounded-2xl overflow-hidden aspect-[16/10] group">
                        <img src="https://images.unsplash.com/photo-1549399542-7e3f8b79c341?w=1000&q=80" alt="Toyota Harrier Z Leather" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/30"></div>
                        
                        <!-- Top Badges -->
                        <div class="absolute top-3.5 inset-x-3.5 flex items-center justify-between">
                            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-red-600/90 text-white text-xs font-bold shadow">
                                <span class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
                                Tokyo Auction Spotlight
                            </span>
                            <span class="px-2.5 py-1 rounded-lg bg-black/60 backdrop-blur-md text-amber-400 text-xs font-black border border-amber-400/30">
                                Grade 5.0
                            </span>
                        </div>

                        <!-- Bottom Vehicle Info -->
                        <div class="absolute bottom-3.5 inset-x-3.5">
                            <h3 class="text-lg font-extrabold text-white">2022 Toyota Harrier Z Leather</h3>
                            <p class="text-xs text-slate-300">1980cc • 19,500 km • JBL Sound • Dimming Sunroof</p>
                        </div>
                    </div>

                    <!-- Live Bidding Quick Bar -->
                    <div class="p-3.5 mt-2 bg-black/40 rounded-xl border border-white/10 flex items-center justify-between">
                        <div>
                            <span class="text-[10px] text-slate-400 block uppercase font-bold">Starting Auction Bid</span>
                            <span class="text-base font-extrabold text-white">¥2,850,000</span>
                        </div>
                        <div class="text-right">
                            <span class="text-[10px] text-slate-400 block uppercase font-bold">Est. Bangladesh Landed</span>
                            <span class="text-base font-extrabold text-emerald-400">৳68,50,000</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- 2. Quick Search & Filter Console -->
<section class="relative z-30 -mt-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white rounded-2xl p-6 shadow-2xl border border-slate-200">
        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100">
            <h2 class="text-sm font-bold uppercase tracking-wider text-slate-800 flex items-center gap-2">
                <i class="fa-solid fa-sliders text-red-600"></i>
                <span>Instant Vehicle Search Console</span>
            </h2>
            <span class="text-xs text-slate-500 font-medium">Search Ready Stock & Upcoming Japan Auctions</span>
        </div>

        <form method="GET" action="{{ route('inventory.index') }}" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
            <!-- Brand -->
            <div>
                <label class="block text-[11px] font-bold uppercase text-slate-500 mb-1">Make</label>
                <select name="make" class="w-full text-xs font-semibold bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                    <option value="">All Brands</option>
                    @foreach($makes as $make)
                        <option value="{{ $make }}">{{ $make }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Model -->
            <div>
                <label class="block text-[11px] font-bold uppercase text-slate-500 mb-1">Model</label>
                <input type="text" name="model" placeholder="e.g. Harrier, Vezel" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
            </div>

            <!-- Body Type -->
            <div>
                <label class="block text-[11px] font-bold uppercase text-slate-500 mb-1">Body Type</label>
                <select name="body_type" class="w-full text-xs font-semibold bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                    <option value="">All Types</option>
                    @foreach($bodyTypes as $bt)
                        <option value="{{ $bt }}">{{ $bt }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Year -->
            <div>
                <label class="block text-[11px] font-bold uppercase text-slate-500 mb-1">Year</label>
                <select name="year" class="w-full text-xs font-semibold bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                    <option value="">Any Year</option>
                    @foreach($years as $yr)
                        <option value="{{ $yr }}">{{ $yr }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Fuel -->
            <div>
                <label class="block text-[11px] font-bold uppercase text-slate-500 mb-1">Fuel Type</label>
                <select name="fuel_type" class="w-full text-xs font-semibold bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                    <option value="">All Fuel</option>
                    <option value="Hybrid">Hybrid</option>
                    <option value="Petrol">Petrol</option>
                    <option value="PHEV">Plug-in Hybrid</option>
                </select>
            </div>

            <!-- Budget Max -->
            <div>
                <label class="block text-[11px] font-bold uppercase text-slate-500 mb-1">Max Budget (BDT)</label>
                <select name="price_max" class="w-full text-xs font-semibold bg-slate-50 border border-slate-200 rounded-lg p-2.5 focus:border-red-600 focus:outline-none">
                    <option value="">No Limit</option>
                    <option value="3000000">Under ৳30 Lac</option>
                    <option value="5000000">Under ৳50 Lac</option>
                    <option value="7000000">Under ৳70 Lac</option>
                    <option value="10000000">Under ৳1.00 Crore</option>
                </select>
            </div>

            <!-- Submit -->
            <div class="col-span-2 sm:col-span-1 flex items-end">
                <button type="submit" class="w-full py-2.5 px-4 bg-red-600 hover:bg-red-700 text-white text-xs font-bold rounded-lg shadow transition flex items-center justify-center gap-1.5 h-[38px]">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <span>Find Cars</span>
                </button>
            </div>
        </form>
    </div>
</section>

<!-- 3. Japan Live Auctions Section -->
<section class="py-20 bg-slate-900 text-white relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-4">
            <div>
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 text-red-400 text-xs font-bold mb-3 border border-red-500/30">
                    <span class="w-2 h-2 rounded-full bg-red-500 animate-ping"></span>
                    USS, TAA, CAA, HAA Real-Time Feeds
                </div>
                <h2 class="text-3xl font-extrabold tracking-tight font-heading">Japan Live Auctions</h2>
                <p class="text-slate-400 text-sm mt-1">Upcoming vehicle lots from premier Japanese auction halls with verified auction inspection sheets</p>
            </div>
            <a href="{{ route('auction.index') }}" class="inline-flex items-center gap-2 text-sm font-bold text-red-400 hover:text-red-300 transition">
                <span>View All Live Lots ({{ \App\Models\AuctionVehicle::active()->count() }})</span>
                <i class="fa-solid fa-arrow-right"></i>
            </a>
        </div>

        <!-- Auction Cards Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($liveAuctions as $auction)
                <div class="bg-[#111827] rounded-2xl border border-white/10 overflow-hidden card-hover-effect flex flex-col justify-between">
                    <div>
                        <!-- Image Container with Badges -->
                        <div class="relative aspect-[16/10] overflow-hidden group">
                            <img src="{{ $auction->main_image }}" alt="{{ $auction->full_name }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/30"></div>

                            <!-- Auction House & Lot Badge -->
                            <div class="absolute top-3 left-3 flex items-center gap-1.5">
                                <span class="bg-black/70 backdrop-blur-md text-white text-[11px] font-bold px-2.5 py-1 rounded-md border border-white/15">
                                    {{ $auction->auctionHouse->name }}
                                </span>
                                <span class="bg-red-600 text-white text-[11px] font-black px-2 py-1 rounded-md shadow">
                                    Lot #{{ $auction->lot_number }}
                                </span>
                            </div>

                            <!-- Grade Badge -->
                            <div class="absolute top-3 right-3">
                                <span class="bg-amber-400 text-slate-950 text-xs font-black px-2.5 py-1 rounded-md shadow">
                                    Grade {{ $auction->auction_grade }}
                                </span>
                            </div>

                            <!-- Closing Countdown Bar -->
                            <div class="absolute bottom-3 inset-x-3 bg-black/60 backdrop-blur-md rounded-lg px-3 py-1.5 flex items-center justify-between text-xs border border-white/10">
                                <span class="text-slate-300 flex items-center gap-1">
                                    <i class="fa-solid fa-stopwatch text-red-400"></i> Auction Date:
                                </span>
                                <span class="font-bold text-amber-300">{{ $auction->auction_date->format('M d, Y') }} ({{ $auction->auction_time }})</span>
                            </div>
                        </div>

                        <!-- Card Body -->
                        <div class="p-5">
                            <h3 class="text-lg font-bold text-white leading-snug">
                                <a href="{{ route('auction.show', $auction->slug) }}" class="hover:text-red-400 transition">
                                    {{ $auction->full_name }}
                                </a>
                            </h3>

                            <!-- Specs Chips -->
                            <div class="flex flex-wrap gap-2 mt-3 text-xs text-slate-400">
                                <span class="bg-white/5 px-2.5 py-1 rounded-md border border-white/5"><i class="fa-solid fa-gauge mr-1"></i>{{ number_format($auction->mileage) }} km</span>
                                <span class="bg-white/5 px-2.5 py-1 rounded-md border border-white/5"><i class="fa-solid fa-gas-pump mr-1"></i>{{ $auction->fuel_type }}</span>
                                <span class="bg-white/5 px-2.5 py-1 rounded-md border border-white/5"><i class="fa-solid fa-gears mr-1"></i>{{ $auction->engine_cc }}cc</span>
                            </div>

                            <!-- Price Grid -->
                            <div class="mt-4 pt-4 border-t border-white/10 grid grid-cols-2 gap-3">
                                <div>
                                    <span class="text-[10px] uppercase font-bold text-slate-400 block">Starting Bid</span>
                                    <span class="text-base font-extrabold text-white">{{ $auction->formatted_starting_bid }}</span>
                                </div>
                                <div class="text-right">
                                    <span class="text-[10px] uppercase font-bold text-slate-400 block">Est. BD Landed Cost</span>
                                    <span class="text-base font-extrabold text-emerald-400">{{ $auction->formatted_estimated_bd_cost }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Card Actions -->
                    <div class="p-5 pt-0 grid grid-cols-2 gap-2">
                        <a href="{{ route('auction.show', $auction->slug) }}" class="py-2.5 px-3 bg-white/5 hover:bg-white/10 text-white text-xs font-semibold rounded-xl text-center border border-white/10 transition">
                            View Auction
                        </a>
                        <a href="{{ route('auction.show', $auction->slug) }}#bid-section" class="py-2.5 px-3 bg-red-600 hover:bg-red-700 text-white text-xs font-bold rounded-xl text-center shadow-lg shadow-red-900/40 transition">
                            Authorize Bid
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- 4. Featured Ready Stock Marketplace -->
<section class="py-20 bg-slate-50 text-slate-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-4">
            <div>
                <p class="text-xs font-bold uppercase tracking-wider text-red-600">Immediate Delivery</p>
                <h2 class="text-3xl font-extrabold tracking-tight font-heading text-slate-900 mt-1">Ready Stock in Dhaka Showroom</h2>
                <p class="text-slate-500 text-sm mt-1">Visit our Gulshan showroom today. High-grade reconditioned vehicles available for test drives.</p>
            </div>
            <a href="{{ route('inventory.index') }}" class="inline-flex items-center gap-2 text-sm font-bold text-red-600 hover:text-red-700 transition">
                <span>Browse All Ready Stock ({{ \App\Models\Vehicle::available()->count() }})</span>
                <i class="fa-solid fa-arrow-right"></i>
            </a>
        </div>

        <!-- Vehicle Cards Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($featuredStock as $car)
                <div class="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-xl transition-all overflow-hidden flex flex-col justify-between">
                    <div>
                        <!-- Image Container -->
                        <div class="relative aspect-[16/10] overflow-hidden group">
                            <img src="{{ $car->main_image }}" alt="{{ $car->full_name }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                            
                            <!-- Badges -->
                            <div class="absolute top-3 left-3">
                                <span class="bg-emerald-600 text-white text-[11px] font-black px-2.5 py-1 rounded-md shadow">
                                    Ready Stock
                                </span>
                            </div>
                            <div class="absolute top-3 right-3">
                                <span class="bg-slate-900/80 backdrop-blur-md text-amber-300 text-xs font-black px-2 py-1 rounded-md">
                                    Grade {{ $car->auction_grade }}
                                </span>
                            </div>
                            <div class="absolute bottom-3 left-3">
                                <span class="bg-black/60 backdrop-blur-md text-white text-[10px] font-bold px-2 py-0.5 rounded">
                                    Stock: {{ $car->stock_number }}
                                </span>
                            </div>
                        </div>

                        <!-- Card Info -->
                        <div class="p-5">
                            <h3 class="text-lg font-bold text-slate-900 leading-snug">
                                <a href="{{ route('inventory.show', $car->slug) }}" class="hover:text-red-600 transition">
                                    {{ $car->full_name }}
                                </a>
                            </h3>

                            <div class="flex flex-wrap gap-2 mt-3 text-xs text-slate-500">
                                <span class="bg-slate-100 px-2.5 py-1 rounded-md"><i class="fa-solid fa-gauge mr-1"></i>{{ $car->formatted_mileage }}</span>
                                <span class="bg-slate-100 px-2.5 py-1 rounded-md"><i class="fa-solid fa-gas-pump mr-1"></i>{{ $car->fuel_type }}</span>
                                <span class="bg-slate-100 px-2.5 py-1 rounded-md"><i class="fa-solid fa-gears mr-1"></i>{{ $car->engine_cc }}cc</span>
                                <span class="bg-slate-100 px-2.5 py-1 rounded-md"><i class="fa-solid fa-palette mr-1"></i>{{ $car->color }}</span>
                            </div>

                            <!-- Price -->
                            <div class="mt-4 pt-4 border-t border-slate-100 flex items-baseline justify-between">
                                <div>
                                    <span class="text-[10px] uppercase font-bold text-slate-400 block">Price</span>
                                    <span class="text-xl font-extrabold text-slate-900">{{ $car->formatted_price }}</span>
                                </div>
                                @if($car->discount_bdt > 0)
                                    <span class="text-xs text-emerald-600 font-bold bg-emerald-50 px-2 py-1 rounded">Save ৳{{ number_format($car->discount_bdt / 1000) }}k</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="p-5 pt-0 grid grid-cols-2 gap-2">
                        <a href="{{ route('inventory.show', $car->slug) }}" class="py-2.5 px-3 bg-slate-100 hover:bg-slate-200 text-slate-800 text-xs font-bold rounded-xl text-center transition">
                            View Specs
                        </a>
                        <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}?text=I%20am%20interested%20in%20Ready%20Stock%20{{ urlencode($car->full_name) }}%20({{ $car->stock_number }})." target="_blank" class="py-2.5 px-3 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold rounded-xl text-center shadow transition flex items-center justify-center gap-1.5">
                            <i class="fa-brands fa-whatsapp"></i> Inquire
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- 5. Bangladesh Import Landed Cost Calculator Banner CTA -->
<section class="py-16 bg-gradient-to-br from-[#0B0F19] via-[#111827] to-[#1F2937] text-white border-y border-white/10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
            <div class="lg:col-span-8 space-y-3">
                <span class="text-xs font-bold uppercase tracking-wider text-red-500">Total Financial Clarity</span>
                <h2 class="text-3xl sm:text-4xl font-extrabold font-heading">Know Your Total Bangladesh Landed Cost Before You Bid</h2>
                <p class="text-slate-300 text-sm leading-relaxed max-w-2xl">
                    Calculate your exact vehicle import expenditure according to the latest Bangladesh National Board of Revenue (NBR) customs tariff structure, including supplementary duty, VAT, Chittagong Port charges, and BRTA registration fees.
                </p>
            </div>
            <div class="lg:col-span-4 flex flex-col sm:flex-row lg:flex-col gap-3 justify-center">
                <a href="{{ route('calculator') }}" class="py-3.5 px-6 bg-red-600 hover:bg-red-700 text-white text-sm font-bold rounded-xl text-center shadow-xl shadow-red-900/40 transition">
                    <i class="fa-solid fa-calculator mr-2"></i> Launch Cost Calculator
                </a>
                <a href="{{ route('auction-sheet') }}" class="py-3.5 px-6 bg-white/10 hover:bg-white/15 text-white text-sm font-semibold rounded-xl text-center border border-white/10 transition">
                    <i class="fa-solid fa-file-contract mr-2"></i> Verify Auction Sheet
                </a>
            </div>
        </div>
    </div>
</section>

<!-- 6. Why MotoSolution Section -->
<section class="py-20 bg-white text-slate-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <p class="text-xs font-bold uppercase tracking-wider text-red-600">Why MotoSolution</p>
            <h2 class="text-3xl font-extrabold font-heading text-slate-900 mt-1">Built on Trust, Precision, and Direct Sourcing</h2>
            <p class="text-slate-500 text-sm mt-2">We eliminate middleman markups and inspection uncertainties, giving Bangladeshi buyers direct access to Japan's auction ecosystem.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 space-y-3">
                <div class="w-12 h-12 rounded-xl bg-red-50 text-red-600 flex items-center justify-center text-xl font-bold">
                    <i class="fa-solid fa-stamp"></i>
                </div>
                <h3 class="text-base font-bold text-slate-900">Verified Auction Sheets</h3>
                <p class="text-xs text-slate-500 leading-relaxed">Original Japanese auction inspection sheets verified by our Tokyo inspection team with translated inspector notes.</p>
            </div>

            <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 space-y-3">
                <div class="w-12 h-12 rounded-xl bg-red-50 text-red-600 flex items-center justify-center text-xl font-bold">
                    <i class="fa-solid fa-coins"></i>
                </div>
                <h3 class="text-base font-bold text-slate-900">Transparent Pricing</h3>
                <p class="text-xs text-slate-500 leading-relaxed">No surprise bills. Detailed itemized costs for CIF freight, customs duty, port clearance, and BRTA registration.</p>
            </div>

            <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 space-y-3">
                <div class="w-12 h-12 rounded-xl bg-red-50 text-red-600 flex items-center justify-center text-xl font-bold">
                    <i class="fa-solid fa-ship"></i>
                </div>
                <h3 class="text-base font-bold text-slate-900">12-Step Import CRM</h3>
                <p class="text-xs text-slate-500 leading-relaxed">Live customer portal tracking your vehicle journey from Japanese yard loading to Chittagong port release.</p>
            </div>

            <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 space-y-3">
                <div class="w-12 h-12 rounded-xl bg-red-50 text-red-600 flex items-center justify-center text-xl font-bold">
                    <i class="fa-solid fa-award"></i>
                </div>
                <h3 class="text-base font-bold text-slate-900">Complete Delivery Concierge</h3>
                <p class="text-xs text-slate-500 leading-relaxed">Comprehensive post-import detailing, 3M ceramic polish, BRTA digital number plate registration, and warranty.</p>
            </div>
        </div>
    </div>
</section>

<!-- 7. How It Works: Step 01 to Step 08 Visual Timeline -->
<section class="py-20 bg-slate-900 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <p class="text-xs font-bold uppercase tracking-wider text-red-400">Step-by-Step Journey</p>
            <h2 class="text-3xl font-extrabold font-heading mt-1">From Japan Auction Hall to Your Doorstep</h2>
            <p class="text-slate-400 text-sm mt-2">Transparent, seamless 8-step process backed by formal agreements and CRM tracking.</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Step 01 -->
            <div class="bg-[#111827] p-6 rounded-2xl border border-white/10 relative space-y-3">
                <span class="text-3xl font-extrabold text-red-600 font-heading">01</span>
                <h3 class="text-base font-bold text-white">Find Your Car</h3>
                <p class="text-xs text-slate-400 leading-relaxed">Select from ready stock or specify your auction pre-order requirement (make, year, package, color).</p>
            </div>

            <!-- Step 02 -->
            <div class="bg-[#111827] p-6 rounded-2xl border border-white/10 relative space-y-3">
                <span class="text-3xl font-extrabold text-red-600 font-heading">02</span>
                <h3 class="text-base font-bold text-white">Check Auction Sheet</h3>
                <p class="text-xs text-slate-400 leading-relaxed">Review authentic inspection grades, mileage verification, and scratch/dent condition maps.</p>
            </div>

            <!-- Step 03 -->
            <div class="bg-[#111827] p-6 rounded-2xl border border-white/10 relative space-y-3">
                <span class="text-3xl font-extrabold text-red-600 font-heading">03</span>
                <h3 class="text-base font-bold text-white">Calculate Landed Cost</h3>
                <p class="text-xs text-slate-400 leading-relaxed">Calculate exact NBR customs duty, shipping freight, port charges, and final Bangladesh landed bill.</p>
            </div>

            <!-- Step 04 -->
            <div class="bg-[#111827] p-6 rounded-2xl border border-white/10 relative space-y-3">
                <span class="text-3xl font-extrabold text-red-600 font-heading">04</span>
                <h3 class="text-base font-bold text-white">Place Maximum Bid</h3>
                <p class="text-xs text-slate-400 leading-relaxed">Authorize your maximum JPY ceiling online. Your bid enters MotoSolution review.</p>
            </div>

            <!-- Step 05 -->
            <div class="bg-[#111827] p-6 rounded-2xl border border-white/10 relative space-y-3">
                <span class="text-3xl font-extrabold text-red-600 font-heading">05</span>
                <h3 class="text-base font-bold text-white">MotoSolution Bids in Japan</h3>
                <p class="text-xs text-slate-400 leading-relaxed">Our Tokyo desk bids on the live floor. If won, you only pay the actual winning hammer price!</p>
            </div>

            <!-- Step 06 -->
            <div class="bg-[#111827] p-6 rounded-2xl border border-white/10 relative space-y-3">
                <span class="text-3xl font-extrabold text-red-600 font-heading">06</span>
                <h3 class="text-base font-bold text-white">Shipment to Chittagong</h3>
                <p class="text-xs text-slate-400 leading-relaxed">Vehicle inspected, loaded on car carrier vessel, and shipped directly to Chittagong Port.</p>
            </div>

            <!-- Step 07 -->
            <div class="bg-[#111827] p-6 rounded-2xl border border-white/10 relative space-y-3">
                <span class="text-3xl font-extrabold text-red-600 font-heading">07</span>
                <h3 class="text-base font-bold text-white">Customs & Registration</h3>
                <p class="text-xs text-slate-400 leading-relaxed">We manage C&F clearance, duty assessment, BRTA digital smart card, and plate registration.</p>
            </div>

            <!-- Step 08 -->
            <div class="bg-[#111827] p-6 rounded-2xl border border-white/10 relative space-y-3">
                <span class="text-3xl font-extrabold text-emerald-400 font-heading">08</span>
                <h3 class="text-base font-bold text-white">Showroom Delivery</h3>
                <p class="text-xs text-slate-400 leading-relaxed">Receive your pristine car at our Niketan Gulshan showroom or direct doorstep delivery.</p>
            </div>
        </div>
    </div>
</section>

<!-- 8. Client Testimonials -->
<section class="py-20 bg-slate-50 text-slate-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-14">
            <p class="text-xs font-bold uppercase tracking-wider text-red-600">Client Reviews</p>
            <h2 class="text-3xl font-extrabold font-heading text-slate-900 mt-1">Trusted by Discerning Car Buyers</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
                <div class="flex items-center text-amber-400 text-xs">
                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                </div>
                <p class="text-xs text-slate-600 leading-relaxed">
                    "Imported a 2022 Toyota Harrier Z Leather via MotoSolution Japan pre-order. Sourced at USS Tokyo exactly within my budget. The 12-step CRM timeline kept me updated all the way to Chittagong release."
                </p>
                <div class="pt-2 border-t border-slate-100 flex items-center gap-3">
                    <div class="w-9 h-9 rounded-full bg-red-600 text-white font-bold flex items-center justify-center text-xs">TA</div>
                    <div>
                        <p class="text-xs font-bold text-slate-900">Tanvir Ahmed</p>
                        <p class="text-[10px] text-slate-500">Banani, Dhaka</p>
                    </div>
                </div>
            </div>

            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
                <div class="flex items-center text-amber-400 text-xs">
                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                </div>
                <p class="text-xs text-slate-600 leading-relaxed">
                    "Transparency is what sets MotoSolution apart. They showed me the original auction sheet, explained the A1/U1 scratch codes, and the final landed bill matched the calculator estimate down to the last Taka."
                </p>
                <div class="pt-2 border-t border-slate-100 flex items-center gap-3">
                    <div class="w-9 h-9 rounded-full bg-emerald-600 text-white font-bold flex items-center justify-center text-xs">FR</div>
                    <div>
                        <p class="text-xs font-bold text-slate-900">Dr. Farhana Rahman</p>
                        <p class="text-[10px] text-slate-500">Dhanmondi, Dhaka</p>
                    </div>
                </div>
            </div>

            <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
                <div class="flex items-center text-amber-400 text-xs">
                    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                </div>
                <p class="text-xs text-slate-600 leading-relaxed">
                    "Pre-ordered our Land Cruiser Prado TX-L. Exceptional service from Tariqul and the auction team. BRTA registration and Chittagong port clearance were completely taken care of without hassle."
                </p>
                <div class="pt-2 border-t border-slate-100 flex items-center gap-3">
                    <div class="w-9 h-9 rounded-full bg-blue-600 text-white font-bold flex items-center justify-center text-xs">MS</div>
                    <div>
                        <p class="text-xs font-bold text-slate-900">Mirza Shahadat Hossain</p>
                        <p class="text-[10px] text-slate-500">Chittagong</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 9. FAQ Section Accordion -->
<section class="py-20 bg-white border-t border-slate-200">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <p class="text-xs font-bold uppercase tracking-wider text-red-600">Frequently Asked Questions</p>
            <h2 class="text-3xl font-extrabold font-heading text-slate-900 mt-1">Everything You Need to Know</h2>
        </div>

        <div class="space-y-3" x-data="{ active: null }">
            @foreach($faqs as $index => $faq)
                <div class="border border-slate-200 rounded-xl overflow-hidden">
                    <button @click="active = active === {{ $index }} ? null : {{ $index }}" class="w-full text-left p-4 bg-slate-50 hover:bg-slate-100 flex items-center justify-between font-bold text-sm text-slate-900 transition">
                        <span>{{ $faq->question }}</span>
                        <i class="fa-solid fa-chevron-down text-xs transition-transform" :class="{'rotate-180': active === {{ $index }}}"></i>
                    </button>
                    <div x-show="active === {{ $index }}" x-transition class="p-4 text-xs text-slate-600 bg-white border-t border-slate-200 leading-relaxed">
                        {{ $faq->answer }}
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- 10. Showroom Location & Contact Banner -->
<section class="py-16 bg-[#0B0F19] text-white border-t border-white/10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6">
        <h2 class="text-3xl font-extrabold font-heading">Ready to Source Your Next Japanese Car?</h2>
        <p class="text-slate-400 text-sm max-w-xl mx-auto">Visit our showroom in Niketan, Gulshan or contact our direct auction desk on WhatsApp for instant guidance.</p>
        <div class="flex flex-wrap items-center justify-center gap-4 pt-2">
            <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}?text=Hello%20MotoSolution,%20I%20would%20like%20to%20consult%20about%20importing%20a%20Japanese%20vehicle." target="_blank" class="px-6 py-3.5 bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-bold rounded-xl shadow-lg transition flex items-center gap-2">
                <i class="fa-brands fa-whatsapp text-lg"></i>
                <span>Chat with Auction Advisor</span>
            </a>
            <a href="tel:{{ config('motosolution.contact.phone') }}" class="px-6 py-3.5 bg-white text-slate-900 hover:bg-slate-100 text-sm font-bold rounded-xl shadow-lg transition flex items-center gap-2">
                <i class="fa-solid fa-phone text-red-600"></i>
                <span>Call +880 1714-116695</span>
            </a>
        </div>
    </div>
</section>

@endsection