@extends('layouts.app')

@section('title', 'Japan Pre-Order Service – Import Japanese Auction Vehicles Directly | MotoSolution')

@section('content')
<div class="bg-[#0B0F19] py-12 text-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Hero Header -->
        <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest bg-red-600/15 text-red-400 border border-red-500/30 mb-4">
                <i class="fa-solid fa-plane-arrival"></i> Direct Japan Auction Pre-Order
            </span>
            <h1 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight font-heading leading-tight">
                Import Your Dream Car From <span class="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-400">Japanese Auctions</span> With Total Transparency
            </h1>
            <p class="mt-4 text-slate-400 text-sm sm:text-base leading-relaxed">
                Skip inflated showroom middleman markups. Access 150,000+ authentic vehicles weekly from USS, TAA, CAA, and HAA auction floors with 100% genuine auction sheets and zero odometer tampering.
            </p>
            <div class="mt-8 flex flex-wrap justify-center gap-4">
                <a href="{{ route('auction.index') }}" class="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-sm shadow-xl shadow-red-900/30 transition">
                    <i class="fa-solid fa-gavel"></i>
                    <span>Browse Live Auction Lots</span>
                </a>
                <a href="{{ route('calculator') }}" class="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl bg-white/10 hover:bg-white/15 text-white font-bold text-sm border border-white/10 transition">
                    <i class="fa-solid fa-calculator text-amber-400"></i>
                    <span>Simulate Landed Cost</span>
                </a>
            </div>
        </div>

        <!-- Pre-Order Advantages (Why Pre-order with MotoSolution) -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-20">
            <div class="bg-slate-900/80 border border-white/10 rounded-2xl p-6 relative overflow-hidden group hover:border-red-500/50 transition">
                <div class="w-12 h-12 rounded-xl bg-red-600/20 text-red-400 flex items-center justify-center text-xl font-bold mb-4">
                    <i class="fa-solid fa-piggy-bank"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2 font-heading">Save 15% – 25% on Total Price</h3>
                <p class="text-slate-400 text-xs sm:text-sm leading-relaxed">
                    By eliminating dealership inventory holding costs and interest margins, you pay only the genuine auction hammer price plus actual freight and NBR customs.
                </p>
            </div>

            <div class="bg-slate-900/80 border border-white/10 rounded-2xl p-6 relative overflow-hidden group hover:border-red-500/50 transition">
                <div class="w-12 h-12 rounded-xl bg-blue-600/20 text-blue-400 flex items-center justify-center text-xl font-bold mb-4">
                    <i class="fa-solid fa-certificate"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2 font-heading">Verified Grade 4.5+ Quality</h3>
                <p class="text-slate-400 text-xs sm:text-sm leading-relaxed">
                    Select only high-grade vehicles with certified low mileage. Every auction sheet is verified directly against Japanese auction house records prior to bidding.
                </p>
            </div>

            <div class="bg-slate-900/80 border border-white/10 rounded-2xl p-6 relative overflow-hidden group hover:border-red-500/50 transition">
                <div class="w-12 h-12 rounded-xl bg-emerald-600/20 text-emerald-400 flex items-center justify-center text-xl font-bold mb-4">
                    <i class="fa-solid fa-timeline"></i>
                </div>
                <h3 class="text-lg font-bold text-white mb-2 font-heading">12-Step Real-Time Tracking</h3>
                <p class="text-slate-400 text-xs sm:text-sm leading-relaxed">
                    Track your car's complete voyage through your customer portal—from Japanese auction floor, RoRo vessel berthing, Chittagong C&F, to Dhaka PDI handover.
                </p>
            </div>
        </div>

        <!-- 7-Step Step-by-Step Roadmap -->
        <div class="mb-20">
            <div class="text-center max-w-2xl mx-auto mb-12">
                <h2 class="text-2xl sm:text-3xl font-extrabold text-white font-heading">The 7-Step Pre-Order Journey</h2>
                <p class="text-slate-400 text-xs sm:text-sm mt-2">Smooth, legally compliant, and completely managed from Japan to Dhaka.</p>
            </div>

            <div class="space-y-4 max-w-4xl mx-auto">
                
                <!-- Step 1 -->
                <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center gap-5">
                    <div class="w-12 h-12 rounded-2xl bg-red-600 text-white font-extrabold text-lg flex items-center justify-center shrink-0">
                        01
                    </div>
                    <div class="flex-1">
                        <h4 class="text-base font-bold text-white font-heading">Requirement Consultation & Model Selection</h4>
                        <p class="text-xs sm:text-sm text-slate-400 mt-1">
                            Meet our specialists at our Niketan showroom or via WhatsApp. Share your preferred model, package (e.g. G LED, Z, Premium), grade, color, and budget.
                        </p>
                    </div>
                    <span class="text-[11px] font-bold px-3 py-1 rounded-full bg-white/5 text-slate-300 shrink-0">Day 1</span>
                </div>

                <!-- Step 2 -->
                <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center gap-5">
                    <div class="w-12 h-12 rounded-2xl bg-red-600/80 text-white font-extrabold text-lg flex items-center justify-center shrink-0">
                        02
                    </div>
                    <div class="flex-1">
                        <h4 class="text-base font-bold text-white font-heading">Auction Sheet Verification & Bidding Authorization</h4>
                        <p class="text-xs sm:text-sm text-slate-400 mt-1">
                            We inspect daily auction listings from USS Tokyo, TAA, etc. Once we match your car, we translate the inspection sheet and set your maximum authorized bid ceiling.
                        </p>
                    </div>
                    <span class="text-[11px] font-bold px-3 py-1 rounded-full bg-white/5 text-slate-300 shrink-0">Day 2 – 5</span>
                </div>

                <!-- Step 3 -->
                <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center gap-5">
                    <div class="w-12 h-12 rounded-2xl bg-red-600/70 text-white font-extrabold text-lg flex items-center justify-center shrink-0">
                        03
                    </div>
                    <div class="flex-1">
                        <h4 class="text-base font-bold text-white font-heading">Live Bidding at Japanese Auction</h4>
                        <p class="text-xs sm:text-sm text-slate-400 mt-1">
                            Our licensed Japan auction agent bids in real-time on your behalf up to your authorized limit. If the bid is won below your budget, the savings are passed 100% to you!
                        </p>
                    </div>
                    <span class="text-[11px] font-bold px-3 py-1 rounded-full bg-white/5 text-slate-300 shrink-0">Auction Day</span>
                </div>

                <!-- Step 4 -->
                <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center gap-5">
                    <div class="w-12 h-12 rounded-2xl bg-red-600/60 text-white font-extrabold text-lg flex items-center justify-center shrink-0">
                        04
                    </div>
                    <div class="flex-1">
                        <h4 class="text-base font-bold text-white font-heading">Pre-Shipment Inspection (JAAI / JEVIC) & Yard Storage</h4>
                        <p class="text-xs sm:text-sm text-slate-400 mt-1">
                            Vehicle is transported to Yokohama / Nagoya port. Mandatory Bangladesh export pre-shipment radiation & odometer inspections are completed.
                        </p>
                    </div>
                    <span class="text-[11px] font-bold px-3 py-1 rounded-full bg-white/5 text-slate-300 shrink-0">Week 1 – 2</span>
                </div>

                <!-- Step 5 -->
                <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center gap-5">
                    <div class="w-12 h-12 rounded-2xl bg-red-600/50 text-white font-extrabold text-lg flex items-center justify-center shrink-0">
                        05
                    </div>
                    <div class="flex-1">
                        <h4 class="text-base font-bold text-white font-heading">RoRo Vessel Voyage to Chittagong Port</h4>
                        <p class="text-xs sm:text-sm text-slate-400 mt-1">
                            The vehicle is loaded onto specialized Roll-on/Roll-off vessels (NYK, MOL, or Kline). Bill of Lading (B/L) is issued and real-time tracking link is provided.
                        </p>
                    </div>
                    <span class="text-[11px] font-bold px-3 py-1 rounded-full bg-white/5 text-slate-300 shrink-0">Week 3 – 5</span>
                </div>

                <!-- Step 6 -->
                <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center gap-5">
                    <div class="w-12 h-12 rounded-2xl bg-red-600/40 text-white font-extrabold text-lg flex items-center justify-center shrink-0">
                        06
                    </div>
                    <div class="flex-1">
                        <h4 class="text-base font-bold text-white font-heading">Chittagong Port Customs & NBR Duty Payment</h4>
                        <p class="text-xs sm:text-sm text-slate-400 mt-1">
                            Our dedicated Chittagong C&F team submits the Bill of Entry, attends physical assessment with customs appraisers, and completes duty payment.
                        </p>
                    </div>
                    <span class="text-[11px] font-bold px-3 py-1 rounded-full bg-white/5 text-slate-300 shrink-0">Week 6</span>
                </div>

                <!-- Step 7 -->
                <div class="bg-slate-900 border border-red-500/30 rounded-2xl p-5 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center gap-5 bg-gradient-to-r from-slate-900 to-red-950/20">
                    <div class="w-12 h-12 rounded-2xl bg-emerald-600 text-white font-extrabold text-lg flex items-center justify-center shrink-0">
                        07
                    </div>
                    <div class="flex-1">
                        <h4 class="text-base font-bold text-white font-heading">Express Dhaka Delivery, BRTA Registration & Handover</h4>
                        <p class="text-xs sm:text-sm text-slate-400 mt-1">
                            Transported via dedicated car trailer to Dhaka. Full 120-point mechanical check, multi-stage paint correction, BRTA number plate issuance, and VIP delivery ceremony.
                        </p>
                    </div>
                    <span class="text-[11px] font-bold px-3 py-1 rounded-full bg-emerald-500/20 text-emerald-400 shrink-0">Week 7 – 8</span>
                </div>

            </div>
        </div>

        <!-- Pre-Order Inquiry Form & Concierge Contact -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch mb-12">
            
            <div class="lg:col-span-5 bg-gradient-to-br from-[#121826] to-[#1a121e] border border-white/10 rounded-2xl p-8 flex flex-col justify-between">
                <div>
                    <span class="text-xs font-bold uppercase tracking-wider text-red-400 block mb-2">Showroom VIP Consultation</span>
                    <h3 class="text-2xl font-bold text-white font-heading mb-4">Prefer to talk face-to-face?</h3>
                    <p class="text-slate-400 text-xs sm:text-sm leading-relaxed mb-6">
                        Visit our Niketan showroom in Gulshan-1. Our import advisors will pull up live auction terminals and analyze recent sales data together with you over Japanese green tea.
                    </p>
                    
                    <div class="space-y-4 text-xs">
                        <div class="flex items-start gap-3">
                            <i class="fa-solid fa-location-dot text-red-500 mt-1 text-sm"></i>
                            <div>
                                <span class="font-bold text-white">Dhaka Showroom:</span>
                                <p class="text-slate-400">{{ config('motosolution.showroom.address') }}</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fa-solid fa-clock text-amber-400 mt-1 text-sm"></i>
                            <div>
                                <span class="font-bold text-white">Business Hours:</span>
                                <p class="text-slate-400">{{ config('motosolution.showroom.hours') }}</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fa-brands fa-whatsapp text-emerald-400 mt-1 text-base"></i>
                            <div>
                                <span class="font-bold text-white">Direct WhatsApp:</span>
                                <p class="text-slate-400">+880 {{ config('motosolution.contact.whatsapp') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-8 pt-6 border-t border-white/10">
                    <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}?text=Hello%20MotoSolution,%20I%20am%20interested%20in%20a%20Japan%20Auction%20Pre-order." target="_blank" class="w-full flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-sm py-3 px-4 rounded-xl shadow-lg transition">
                        <i class="fa-brands fa-whatsapp text-lg"></i>
                        <span>Chat With Auction Specialist</span>
                    </a>
                </div>
            </div>

            <div class="lg:col-span-7 bg-slate-900 border border-white/10 rounded-2xl p-6 sm:p-8">
                <h3 class="text-xl font-bold text-white font-heading mb-1">Request a Custom Pre-Order Search</h3>
                <p class="text-xs text-slate-400 mb-6">Fill in your specifications and our auction procurement team will send you 3 curated auction candidates within 24 hours.</p>

                <form method="POST" action="{{ route('lead.store') }}" class="space-y-4">
                    @csrf
                    <input type="hidden" name="source" value="preorder_page">

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Your Full Name *</label>
                            <input type="text" name="name" required class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. Tanvir Ahmed">
                        </div>
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Phone Number / WhatsApp *</label>
                            <input type="text" name="phone" required class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. 01711-XXXXXX">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Desired Model *</label>
                            <input type="text" name="vehicle_interest" required class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. Harrier Hybrid">
                        </div>
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Year Range</label>
                            <select name="preferred_year" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none">
                                <option value="2023-2024">2023 – 2024 (1-2 yrs)</option>
                                <option value="2021-2022" selected>2021 – 2022 (3-4 yrs)</option>
                                <option value="2020">2020 (5 yrs)</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Budget in BDT</label>
                            <input type="text" name="budget_bdt" class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. 45 - 55 Lac">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Package & Color Preferences (Optional)</label>
                        <textarea name="message" rows="3" class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. Grade 4.5 or 5, Pearl White or Attitude Black, Leather seats, 360 camera, Modellista kit..."></textarea>
                    </div>

                    <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold text-sm py-3 px-6 rounded-xl shadow-lg shadow-red-900/30 transition">
                        <i class="fa-solid fa-paper-plane mr-1.5"></i> Submit Pre-Order Search Request
                    </button>
                </form>
            </div>

        </div>

    </div>
</div>
@endsection