@extends('layouts.app')

@section('title', 'Our Services – End-to-End Japanese Automotive Solutions | 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">
        
        <!-- 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-screwdriver-wrench"></i> Full Automotive Lifecycle
            </span>
            <h1 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight font-heading leading-tight">
                Complete Automotive Services <span class="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-400">Under One Roof</span>
            </h1>
            <p class="mt-4 text-slate-400 text-sm sm:text-base leading-relaxed">
                From live Japanese auction floor bidding and customs clearance to BRTA digital registration and 2-year hybrid warranties, we handle every detail of your automotive journey.
            </p>
        </div>

        <!-- 6 Core Service Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
            
            <!-- Service 1 -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-7 hover:border-red-500/40 transition group">
                <div class="w-14 h-14 rounded-2xl bg-red-600/20 text-red-400 flex items-center justify-center text-2xl font-bold mb-5 group-hover:scale-110 transition">
                    <i class="fa-solid fa-gavel"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-2 font-heading">Japan Live Auction Pre-Orders</h3>
                <p class="text-slate-400 text-xs sm:text-sm leading-relaxed mb-4">
                    Direct corporate access to 150,000+ daily vehicles across USS, TAA, CAA, and HAA auction lanes in Japan. Authorize your maximum bid ceiling in JPY and pay only true auction hammer rates.
                </p>
                <a href="{{ route('auction.index') }}" class="text-xs font-bold text-red-400 hover:text-red-300 flex items-center gap-1.5">
                    <span>Browse Live Auctions</span> <i class="fa-solid fa-arrow-right text-[10px]"></i>
                </a>
            </div>

            <!-- Service 2 -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-7 hover:border-red-500/40 transition group">
                <div class="w-14 h-14 rounded-2xl bg-blue-600/20 text-blue-400 flex items-center justify-center text-2xl font-bold mb-5 group-hover:scale-110 transition">
                    <i class="fa-solid fa-car"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-2 font-heading">Ready Stock Showroom Marketplace</h3>
                <p class="text-slate-400 text-xs sm:text-sm leading-relaxed mb-4">
                    Hand-picked, grade 4.5+ pristine reconditioned cars physically available at our Niketan showroom in Gulshan-1. Instant test drives, on-the-spot verification, and same-day delivery.
                </p>
                <a href="{{ route('inventory.index') }}" class="text-xs font-bold text-blue-400 hover:text-blue-300 flex items-center gap-1.5">
                    <span>Explore Ready Inventory</span> <i class="fa-solid fa-arrow-right text-[10px]"></i>
                </a>
            </div>

            <!-- Service 3 -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-7 hover:border-red-500/40 transition group">
                <div class="w-14 h-14 rounded-2xl bg-emerald-600/20 text-emerald-400 flex items-center justify-center text-2xl font-bold mb-5 group-hover:scale-110 transition">
                    <i class="fa-solid fa-ship"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-2 font-heading">Chittagong C&F & Customs Clearance</h3>
                <p class="text-slate-400 text-xs sm:text-sm leading-relaxed mb-4">
                    Licensed in-house customs clearing agents at Chittagong Port. Fast Bill of Entry filing, prompt physical assessment, statutory NBR customs tax payment, and rapid port gate release.
                </p>
                <a href="{{ route('calculator') }}" class="text-xs font-bold text-emerald-400 hover:text-emerald-300 flex items-center gap-1.5">
                    <span>Simulate Customs Duties</span> <i class="fa-solid fa-arrow-right text-[10px]"></i>
                </a>
            </div>

            <!-- Service 4 -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-7 hover:border-red-500/40 transition group">
                <div class="w-14 h-14 rounded-2xl bg-amber-600/20 text-amber-400 flex items-center justify-center text-2xl font-bold mb-5 group-hover:scale-110 transition">
                    <i class="fa-solid fa-certificate"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-2 font-heading">Auction Sheet Verification & Translation</h3>
                <p class="text-slate-400 text-xs sm:text-sm leading-relaxed mb-4">
                    Free cross-verification of any Japanese auction sheet against official auction databases. Complete English translation of inspector kanji remarks, diagram dent/scratch codes, and recall status.
                </p>
                <a href="{{ route('auction-sheet') }}" class="text-xs font-bold text-amber-400 hover:text-amber-300 flex items-center gap-1.5">
                    <span>Verify an Auction Sheet</span> <i class="fa-solid fa-arrow-right text-[10px]"></i>
                </a>
            </div>

            <!-- Service 5 -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-7 hover:border-red-500/40 transition group">
                <div class="w-14 h-14 rounded-2xl bg-purple-600/20 text-purple-400 flex items-center justify-center text-2xl font-bold mb-5 group-hover:scale-110 transition">
                    <i class="fa-solid fa-id-card"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-2 font-heading">BRTA Registration & Digital Number Plates</h3>
                <p class="text-slate-400 text-xs sm:text-sm leading-relaxed mb-4">
                    Hassle-free Dhaka Metro registration processing. We coordinate fitness certificates, tax tokens, retro-reflective RFID digital license plates, and smart card ownership transfer.
                </p>
                <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}" target="_blank" class="text-xs font-bold text-purple-400 hover:text-purple-300 flex items-center gap-1.5">
                    <span>Inquire About BRTA</span> <i class="fa-solid fa-arrow-right text-[10px]"></i>
                </a>
            </div>

            <!-- Service 6 -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-7 hover:border-red-500/40 transition group">
                <div class="w-14 h-14 rounded-2xl bg-rose-600/20 text-rose-400 flex items-center justify-center text-2xl font-bold mb-5 group-hover:scale-110 transition">
                    <i class="fa-solid fa-shield-halved"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-2 font-heading">2-Year Hybrid Warranty & Maintenance</h3>
                <p class="text-slate-400 text-xs sm:text-sm leading-relaxed mb-4">
                    Comprehensive warranty covering Toyota / Honda hybrid battery packs, inverters, engine internals, and CVT transmissions, supported by certified Japanese diagnostic scanners.
                </p>
                <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}" target="_blank" class="text-xs font-bold text-rose-400 hover:text-rose-300 flex items-center gap-1.5">
                    <span>Warranty Coverage Details</span> <i class="fa-solid fa-arrow-right text-[10px]"></i>
                </a>
            </div>

        </div>

        <!-- Pre-Order or Buy Banner -->
        <div class="bg-gradient-to-br from-slate-900 via-slate-900 to-red-950/40 border border-white/10 rounded-3xl p-8 sm:p-12 text-center">
            <h2 class="text-2xl sm:text-3xl font-extrabold text-white font-heading mb-3">Which Service Best Fits Your Schedule?</h2>
            <p class="text-slate-400 text-sm max-w-xl mx-auto mb-8">
                Need a vehicle immediately today? Choose from our showroom Ready Stock. Looking for specific customized options with maximum savings? Authorize a Japan auction pre-order.
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="{{ route('inventory.index') }}" class="px-6 py-3.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-sm shadow-xl transition">
                    <i class="fa-solid fa-car mr-2"></i> Showroom Ready Stock
                </a>
                <a href="{{ route('preorder') }}" class="px-6 py-3.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-sm transition">
                    <i class="fa-solid fa-gavel mr-2"></i> Japan Auction Pre-Order
                </a>
            </div>
        </div>

    </div>
</div>
@endsection