@extends('layouts.app')

@section('title', 'About Us – Redefining Japanese Automobile Import in Bangladesh | 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 Section -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center mb-20">
            <div class="lg:col-span-7">
                <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-gem"></i> Established 2018 · Niketan, Dhaka
                </span>
                <h1 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight font-heading leading-tight">
                    Radical Transparency in <span class="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-400">Japanese Car Imports</span>
                </h1>
                <p class="mt-5 text-slate-300 text-base sm:text-lg leading-relaxed">
                    MotoSolution was founded with a singular mission: to eliminate the deception, odometer rollbacks, and forged auction sheets that have plagued the Bangladesh reconditioned car industry for decades.
                </p>
                <p class="mt-4 text-slate-400 text-sm leading-relaxed">
                    Operating out of our flagship showroom in Niketan, Gulshan-1, Dhaka, we provide discerning Bangladeshi car buyers with direct, unfiltered access to Japan's premier auction floors. We share actual hammer prices, original Japanese auction sheets, and statutory NBR customs assessments without middleman inflation.
                </p>
                
                <div class="grid grid-cols-3 gap-6 mt-8 pt-8 border-t border-white/10">
                    <div>
                        <span class="text-2xl sm:text-4xl font-extrabold text-white font-heading">1,200+</span>
                        <span class="block text-xs text-slate-400 mt-1">Vehicles Delivered</span>
                    </div>
                    <div>
                        <span class="text-2xl sm:text-4xl font-extrabold text-red-500 font-heading">100%</span>
                        <span class="block text-xs text-slate-400 mt-1">Genuine Sheets</span>
                    </div>
                    <div>
                        <span class="text-2xl sm:text-4xl font-extrabold text-amber-400 font-heading">4.9/5</span>
                        <span class="block text-xs text-slate-400 mt-1">Client Satisfaction</span>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-5 relative">
                <div class="aspect-4/3 rounded-3xl bg-slate-800 border border-white/10 overflow-hidden shadow-2xl relative group">
                    <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1200&q=80" alt="MotoSolution Flagship Showroom" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
                    <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent"></div>
                    <div class="absolute bottom-6 left-6 right-6 p-4 rounded-xl bg-slate-900/90 border border-white/10 backdrop-blur-md">
                        <p class="text-xs font-bold text-white uppercase tracking-wider">MotoSolution Flagship Showroom</p>
                        <p class="text-[11px] text-slate-400">House 14, Road 3, Block B, Niketan, Gulshan-1, Dhaka</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Our Core Pillars -->
        <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">Our Core Operating Commitments</h2>
                <p class="text-slate-400 text-sm mt-2">Every vehicle imported or sold from our showroom adheres to strict Japanese quality protocols.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 hover:border-red-500/30 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-file-circle-check"></i>
                    </div>
                    <h3 class="text-lg font-bold text-white mb-2 font-heading">Direct Auction Membership</h3>
                    <p class="text-slate-400 text-xs sm:text-sm leading-relaxed">
                        We are registered corporate bidders across all major Japanese auction federations including USS, TAA (Toyota Auto Auction), CAA, and HAA. No third-party brokers in Japan.
                    </p>
                </div>

                <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 hover:border-red-500/30 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-gauge"></i>
                    </div>
                    <h3 class="text-lg font-bold text-white mb-2 font-heading">Strict Zero-Tamper Odometer Policy</h3>
                    <p class="text-slate-400 text-xs sm:text-sm leading-relaxed">
                        Every car comes with authentic JAAI radiation and mileage certificates verifying digital odometer history against Japanese transport ministry records.
                    </p>
                </div>

                <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 hover:border-red-500/30 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-truck-ramp-box"></i>
                    </div>
                    <h3 class="text-lg font-bold text-white mb-2 font-heading">Enclosed Trailer Port Transit</h3>
                    <p class="text-slate-400 text-xs sm:text-sm leading-relaxed">
                        We never drive newly landed vehicles on the rough 250km Chittagong-Dhaka highway. Vehicles are transported exclusively on secure enclosed hydraulic car trailers.
                    </p>
                </div>
            </div>
        </div>

        <!-- Showroom & Direct Contact -->
        <div class="bg-slate-900 border border-white/10 rounded-2xl p-8 sm:p-12 mb-12">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                <div>
                    <span class="text-xs font-bold uppercase tracking-wider text-red-400 block mb-2">Showroom & Headquarters</span>
                    <h3 class="text-2xl font-bold text-white font-heading mb-4">Visit Us in Niketan, Gulshan-1</h3>
                    <p class="text-slate-400 text-sm leading-relaxed mb-6">
                        Experience our ready stock collection of premium Toyota, Honda, Nissan, and Suzuki vehicles in a tranquil, climate-controlled showroom. Enjoy a cup of freshly brewed coffee while our team demonstrates live Japanese auction terminals.
                    </p>
                    <div class="space-y-3 text-xs sm:text-sm text-slate-300">
                        <p class="flex items-center gap-3">
                            <i class="fa-solid fa-map-pin text-red-500 w-5 text-center"></i>
                            <span>{{ config('motosolution.showroom.address') }}</span>
                        </p>
                        <p class="flex items-center gap-3">
                            <i class="fa-solid fa-phone text-blue-500 w-5 text-center"></i>
                            <span>+880 {{ config('motosolution.contact.phone') }}</span>
                        </p>
                        <p class="flex items-center gap-3">
                            <i class="fa-solid fa-clock text-amber-500 w-5 text-center"></i>
                            <span>{{ config('motosolution.showroom.hours') }}</span>
                        </p>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <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 text-center shadow-lg transition">
                        <i class="fa-solid fa-car mr-2"></i> Browse Ready Stock
                    </a>
                    <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}" target="_blank" class="px-6 py-3.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-sm text-center shadow-lg transition">
                        <i class="fa-brands fa-whatsapp mr-2"></i> Message on WhatsApp
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection