@extends('layouts.home')

@section('title','Contact Us | SriCourier')
@section('meta_description','Contact SriCourier for support, partnerships, merchant onboarding, and delivery assistance 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-5xl mx-auto px-6 py-24 text-center">
        <h1 class="text-4xl md:text-5xl font-extrabold">
            Get in <span class="text-[#f97316]">Touch</span>
        </h1>
        <p class="mt-4 text-gray-300 text-lg">
            We’re here to help merchants, drivers & customers
        </p>
    </div>
</section>

<!-- CONTACT SECTION -->
<section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-3 gap-12">

    <!-- LEFT INFO -->
    <div class="space-y-8">

        <div class="bg-white rounded-2xl shadow p-8">
            <h3 class="text-xl font-bold mb-4">📍 Our Office</h3>
            <p class="text-gray-600">
                SriCourier HQ<br>
                Colombo, Sri Lanka
            </p>
        </div>

        <div class="bg-white rounded-2xl shadow p-8">
            <h3 class="text-xl font-bold mb-4">📞 Support</h3>
            <p class="text-gray-600">
                Phone: <strong>+94 11 XXX XXXX</strong><br>
                Email: <strong>support@sricourier.lk</strong>
            </p>
        </div>

        <div class="bg-white rounded-2xl shadow p-8">
            <h3 class="text-xl font-bold mb-4">🕒 Working Hours</h3>
            <p class="text-gray-600">
                Monday – Sunday<br>
                8:00 AM – 10:00 PM
            </p>
        </div>

    </div>

    <!-- CONTACT FORM -->
    <div class="lg:col-span-2 bg-white rounded-2xl shadow p-10">

        <h2 class="text-2xl font-bold mb-6">
            Send Us a Message
        </h2>

        <form method="POST" action="#">
            @csrf

            <div class="grid md:grid-cols-2 gap-6">
                <input type="text"
                       name="name"
                       placeholder="Full Name"
                       class="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500"
                       required>

                <input type="email"
                       name="email"
                       placeholder="Email Address"
                       class="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500"
                       required>
            </div>

            <div class="mt-6">
                <input type="text"
                       name="phone"
                       placeholder="Phone Number"
                       class="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500">
            </div>

            <div class="mt-6">
                <select name="subject"
                        class="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500">
                    <option value="">Select Subject</option>
                    <option>Customer Support</option>
                    <option>Merchant Partnership</option>
                    <option>Driver Onboarding</option>
                    <option>General Inquiry</option>
                </select>
            </div>

            <div class="mt-6">
                <textarea name="message"
                          rows="5"
                          placeholder="Your Message"
                          class="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500"
                          required></textarea>
            </div>

            <button type="submit"
                    class="mt-8 bg-[#f97316] hover:bg-orange-600 text-white px-8 py-4 rounded-xl font-semibold">
                Send Message
            </button>
        </form>

    </div>

</div>
</section>

<!-- MAP -->
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-6">
        <h2 class="text-2xl font-bold mb-6 text-center">
            Find Us on Map
        </h2>

        <div class="rounded-2xl overflow-hidden shadow h-96 flex items-center justify-center text-gray-400">
            🗺 Google Map integration here
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-24 bg-[#f97316] text-white text-center">
    <h2 class="text-4xl font-bold mb-4">Let’s Move Smarter Together</h2>
    <p class="mb-8 text-white/90">
        Join SriCourier as a merchant or delivery partner
    </p>

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

@endsection