@extends('layouts.public')

@section('content')
<main class="max-w-3xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
    <!-- Page Title -->
    <h1 class="text-3xl font-bold mb-6">Contact Us</h1>

    <!-- Introduction -->
    <p class="text-gray-700 mb-4">
        We’re here to help! Whether you have questions about subscriptions, credits, billing,
        or using our platform, our support team is ready to assist you.
    </p>
    <p class="text-gray-700 mb-8">
        To prevent spam and ensure high-quality support, contacting us is available only to registered users.
        Please log in to send us a message.
    </p>

    <!-- Login to Contact Button -->
    <div class="mb-12">
        <a href="{{route('auth.login')}}" class="inline-block bg-[#00B3B3] hover:bg-[#003366] text-white font-semibold py-3 px-6 rounded-lg transition">
            Login to Contact
        </a>
    </div>

    <!-- Alternative Info -->
    <h2 class="text-xl font-semibold mb-4">Support Information</h2>
    <p class="text-gray-700 mb-2">
        Before contacting us, you may find instant answers in our
        <a href="{{route('faqs')}}" class="text-blue-600 underline hover:text-blue-700">FAQ Page</a>.
    </p>
    <p class="text-gray-700 mb-2">
        We typically respond within 24–48 business hours.
    </p>

    <!-- Contact Methods -->
    <div class="mt-8 space-y-4">
        <div>
            <h3 class="font-semibold text-lg">Email</h3>
            <p class="text-gray-700">{{__system_settings('site_email')}}</p>
        </div>
        <div>
            <h3 class="font-semibold text-lg">Business Hours</h3>
            <p class="text-gray-700">Monday – Friday, 9:00 AM – 5:00 PM (Your Time Zone)</p>
        </div>
        <div>
            <h3 class="font-semibold text-lg">Response Time</h3>
            <p class="text-gray-700">Most inquiries are answered within 1–2 business days.</p>
        </div>
    </div>

    <!-- Final Note -->
    <div class="mt-12 bg-gray-50 p-6 rounded-lg border border-gray-200">
        <h3 class="font-semibold text-lg mb-2">Need Account Help?</h3>
        <p class="text-gray-700 mb-4">
            If you’re having trouble logging in or accessing your account, click the button below:
        </p>
        <a href="{{route('auth.login')}}" class="inline-block bg-[#00B3B3] hover:bg-[#003366] text-white font-semibold py-3 px-6 rounded-lg transition">
            Login to Contact Support
        </a>
    </div>
</main>

@endsection