@extends('layouts.home')

@section('title','SriCourier | Pricing')
@section('meta_description','Transparent courier pricing in Sri Lanka. Same-day delivery, intercity shipping and business courier solutions.')

@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">
            Simple & <span class="text-[#f97316]">Transparent</span> Pricing
        </h1>
        <p class="mt-6 text-lg text-gray-300 max-w-3xl mx-auto">
            No hidden fees. Pay only for what you deliver.
        </p>
    </div>
</section>

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

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

            <!-- CITY -->
            <div class="bg-white rounded-2xl p-8 shadow hover:shadow-xl transition text-center">
                <h4 class="text-xl font-semibold mb-2">City Delivery</h4>
                <p class="text-gray-500 mb-6">Same-day urban delivery</p>

                <div class="text-4xl font-extrabold text-[#f97316] mb-4">
                    LKR 250+
                </div>

                <ul class="space-y-3 text-gray-600 mb-6">
                    <li>✔ Same-day delivery</li>
                    <li>✔ Live GPS tracking</li>
                    <li>✔ Secure handling</li>
                </ul>

                <a href="{{ route('track') }}"
                   class="inline-block bg-[#f97316] text-white px-6 py-3 rounded-xl font-semibold hover:bg-orange-600">
                    Track Parcel
                </a>
            </div>

            <!-- INTERCITY -->
            <div class="bg-black text-white rounded-2xl p-8 shadow-xl text-center scale-105">
                <span class="inline-block bg-[#f97316] px-4 py-1 rounded-full text-sm mb-4">
                    Most Popular
                </span>

                <h4 class="text-xl font-semibold mb-2">Inter-City Delivery</h4>
                <p class="text-gray-300 mb-6">Nationwide shipping</p>

                <div class="text-4xl font-extrabold text-[#f97316] mb-4">
                    LKR 450+
                </div>

                <ul class="space-y-3 text-gray-300 mb-6">
                    <li>✔ Next-day delivery</li>
                    <li>✔ Islandwide coverage</li>
                    <li>✔ Delivery confirmation</li>
                </ul>

                <a href="{{ route('services') }}"
                   class="inline-block bg-white text-black px-6 py-3 rounded-xl font-semibold">
                    View Services
                </a>
            </div>

            <!-- BUSINESS -->
            <div class="bg-white rounded-2xl p-8 shadow hover:shadow-xl transition text-center">
                <h4 class="text-xl font-semibold mb-2">Business / Bulk</h4>
                <p class="text-gray-500 mb-6">Custom courier solutions</p>

                <div class="text-4xl font-extrabold text-[#f97316] mb-4">
                    Custom
                </div>

                <ul class="space-y-3 text-gray-600 mb-6">
                    <li>✔ COD & settlements</li>
                    <li>✔ API integration</li>
                    <li>✔ Priority support</li>
                </ul>

                <a href="{{ route('merchant.register') }}"
                   class="inline-block bg-[#f97316] text-white px-6 py-3 rounded-xl font-semibold hover:bg-orange-600">
                    Become a Merchant
                </a>
            </div>

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

<!-- PRICING CALCULATOR -->
<section class="py-24 bg-gray-50">
    <div class="max-w-4xl mx-auto px-6">

        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold">Pricing Calculator</h2>
            <p class="text-gray-500 mt-3">
                Estimate delivery cost instantly
            </p>
        </div>

        <div class="bg-white rounded-2xl shadow p-8 space-y-6">

            <div class="grid md:grid-cols-3 gap-6">
                <div>
                    <label class="text-sm text-gray-500">Delivery Type</label>
                    <select id="type"
                            class="w-full mt-1 px-4 py-3 rounded-xl border focus:outline-none">
                        <option value="city">City</option>
                        <option value="intercity">Inter-City</option>
                    </select>
                </div>

                <div>
                    <label class="text-sm text-gray-500">Weight (kg)</label>
                    <input id="weight" type="number" min="1"
                           class="w-full mt-1 px-4 py-3 rounded-xl border focus:outline-none"
                           placeholder="1">
                </div>

                <div>
                    <label class="text-sm text-gray-500">COD?</label>
                    <select id="cod"
                            class="w-full mt-1 px-4 py-3 rounded-xl border focus:outline-none">
                        <option value="no">No</option>
                        <option value="yes">Yes</option>
                    </select>
                </div>
            </div>

            <div class="text-center">
                <p class="text-gray-500">Estimated Price</p>
                <p id="price"
                   class="text-4xl font-extrabold text-[#f97316] mt-2">
                    LKR 0.00
                </p>
            </div>

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

<!-- CTA -->
<section class="py-24 bg-[#f97316] text-white text-center">
    <h2 class="text-4xl font-bold mb-4">Start Delivering with SriCourier</h2>
    <p class="mb-8 text-white/90">
        Fast, reliable and affordable courier services
    </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('contact') }}"
           class="border border-white px-8 py-4 rounded-xl">
            Contact Sales
        </a>
    </div>
</section>

@endsection

@push('scripts')
<script>
function calculate() {
    const type = document.getElementById('type').value;
    const weight = parseFloat(document.getElementById('weight').value || 1);
    const cod = document.getElementById('cod').value;

    let price = type === 'city' ? 250 : 450;
    price += (weight - 1) * 80;

    if (cod === 'yes') price += 50;

    document.getElementById('price').innerText =
        'LKR ' + price.toFixed(2);
}

['type','weight','cod'].forEach(id =>
    document.getElementById(id).addEventListener('input', calculate)
);
</script>
@endpush