@extends('layouts.home')

@section('title','SriCourier | Courier Services')
@section('meta_description','Explore SriCourier services – same-day delivery, live tracking, COD, business logistics across Sri Lanka')

@section('content')

<!-- HERO -->
<section class="relative bg-black text-white">
    <div class="absolute inset-0 bg-gradient-to-r from-black/90 to-black/60"></div>

    <div class="relative max-w-7xl mx-auto px-6 py-28 text-center">
        <h1 class="text-4xl md:text-6xl font-extrabold">
            Courier Services Built for <span class="text-[#f97316]">Speed</span>
        </h1>
        <p class="mt-6 text-lg text-gray-300 max-w-3xl mx-auto">
            From instant city deliveries to nationwide logistics, SriCourier
            powers modern businesses and individuals across Sri Lanka.
        </p>
    </div>
</section>

<!-- SERVICES GRID -->
<section class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-6">

        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold">Our Core Services</h2>
            <p class="text-gray-500 mt-4">
                Smart delivery solutions designed for reliability and growth
            </p>
        </div>

        <div class="grid md:grid-cols-3 gap-10">

            <!-- Service -->
            <div class="group bg-white rounded-2xl p-8 shadow hover:shadow-xl transition">
                <div class="w-14 h-14 bg-orange-100 text-[#f97316] rounded-xl flex items-center justify-center text-2xl mb-6">
                    🚚
                </div>
                <h4 class="text-xl font-semibold mb-2">Same-Day Delivery</h4>
                <p class="text-gray-500">
                    Ultra-fast deliveries within major cities using smart route
                    optimization and nearby drivers.
                </p>
            </div>

            <div class="group bg-white rounded-2xl p-8 shadow hover:shadow-xl transition">
                <div class="w-14 h-14 bg-orange-100 text-[#f97316] rounded-xl flex items-center justify-center text-2xl mb-6">
                    📍
                </div>
                <h4 class="text-xl font-semibold mb-2">Live GPS Tracking</h4>
                <p class="text-gray-500">
                    Track your parcel in real time from pickup to doorstep with
                    accurate location updates.
                </p>
            </div>

            <div class="group bg-white rounded-2xl p-8 shadow hover:shadow-xl transition">
                <div class="w-14 h-14 bg-orange-100 text-[#f97316] rounded-xl flex items-center justify-center text-2xl mb-6">
                    🛡️
                </div>
                <h4 class="text-xl font-semibold mb-2">Secure Handling</h4>
                <p class="text-gray-500">
                    Verified drivers, parcel insurance and secure handling for
                    peace of mind.
                </p>
            </div>

            <div class="group bg-white rounded-2xl p-8 shadow hover:shadow-xl transition">
                <div class="w-14 h-14 bg-orange-100 text-[#f97316] rounded-xl flex items-center justify-center text-2xl mb-6">
                    💰
                </div>
                <h4 class="text-xl font-semibold mb-2">Cash on Delivery (COD)</h4>
                <p class="text-gray-500">
                    Collect payments on delivery with fast merchant settlements
                    and transparent reports.
                </p>
            </div>

            <div class="group bg-white rounded-2xl p-8 shadow hover:shadow-xl transition">
                <div class="w-14 h-14 bg-orange-100 text-[#f97316] rounded-xl flex items-center justify-center text-2xl mb-6">
                    📦
                </div>
                <h4 class="text-xl font-semibold mb-2">Business Logistics</h4>
                <p class="text-gray-500">
                    Scalable courier solutions for e-commerce, restaurants,
                    pharmacies and enterprises.
                </p>
            </div>

            <div class="group bg-white rounded-2xl p-8 shadow hover:shadow-xl transition">
                <div class="w-14 h-14 bg-orange-100 text-[#f97316] rounded-xl flex items-center justify-center text-2xl mb-6">
                    📊
                </div>
                <h4 class="text-xl font-semibold mb-2">Analytics & Reports</h4>
                <p class="text-gray-500">
                    Detailed dashboards with delivery performance, earnings and
                    customer insights.
                </p>
            </div>

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

<!-- WHO IT'S FOR -->
<section class="py-24 bg-gray-50">
    <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-12 text-center">

        <div>
            <div class="text-6xl mb-4">🏪</div>
            <h4 class="text-xl font-semibold mb-2">Merchants</h4>
            <p class="text-gray-500">
                Manage orders, payouts and deliveries from one powerful dashboard.
            </p>
        </div>

        <div>
            <div class="text-6xl mb-4">🚛</div>
            <h4 class="text-xl font-semibold mb-2">Drivers</h4>
            <p class="text-gray-500">
                Flexible work, optimized routes and fast weekly payouts.
            </p>
        </div>

        <div>
            <div class="text-6xl mb-4">👤</div>
            <h4 class="text-xl font-semibold mb-2">Individuals</h4>
            <p class="text-gray-500">
                Send parcels easily with live tracking and reliable delivery.
            </p>
        </div>

    </div>
</section>

<!-- CTA -->
<section class="py-24 bg-[#f97316] text-white text-center">
    <h2 class="text-4xl font-bold mb-4">Ready to Deliver Smarter?</h2>
    <p class="mb-8 text-white/90">
        Join SriCourier today and experience next-generation logistics
    </p>

    <div class="flex justify-center gap-4">
        <a href="{{ route('merchant.register') }}"
           class="bg-white text-black px-8 py-4 rounded-xl font-semibold">
            Become a Merchant
        </a>
        <a href="{{ route('track') }}"
           class="border border-white px-8 py-4 rounded-xl">
            Track Parcel
        </a>
    </div>
</section>

@endsection