@extends('layouts.landing')

@section('title', __('messages.contact_us') ?? 'Contact Us')

@section('content')
<section class="relative overflow-hidden bg-gradient-to-r from-red-800 via-red-700 to-stone-900 py-20 text-white">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl">
            <p class="mb-3 inline-flex rounded-full bg-white/15 px-4 py-1 text-sm font-semibold">Get in touch</p>
            <h1 class="text-4xl font-extrabold md:text-5xl">We are here to help your real estate team succeed.</h1>
            <p class="mt-5 text-lg text-red-100">Reach out for onboarding support, pricing questions, or a product walkthrough tailored to your business.</p>
        </div>
    </div>
</section>

<section class="bg-white py-16">
    <div class="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 lg:grid-cols-3 lg:px-8">
        <div class="rounded-2xl border border-stone-200 p-6 shadow-sm">
            <h2 class="text-lg font-bold text-stone-900">Email</h2>
            <p class="mt-2 text-stone-600">support@realestateplatform.com</p>
        </div>
        <div class="rounded-2xl border border-stone-200 p-6 shadow-sm">
            <h2 class="text-lg font-bold text-stone-900">Phone</h2>
            <p class="mt-2 text-stone-600">+255 700 000 000</p>
        </div>
        <div class="rounded-2xl border border-stone-200 p-6 shadow-sm">
            <h2 class="text-lg font-bold text-stone-900">Office Hours</h2>
            <p class="mt-2 text-stone-600">Mon - Fri, 8:00 AM - 6:00 PM</p>
        </div>
    </div>
</section>

<section class="bg-stone-50 py-16">
    <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <div class="rounded-3xl border border-stone-200 bg-white p-8 shadow-sm">
            <h2 class="text-2xl font-bold text-stone-900">Need immediate access?</h2>
            <p class="mt-3 text-stone-600">Create your account and start exploring the dashboard while our team helps with setup.</p>
            <div class="mt-6 flex flex-wrap gap-3">
                <a href="{{ route('register') }}" class="rounded-lg bg-red-600 px-5 py-3 text-sm font-semibold text-white hover:bg-red-700">Create account</a>
                <a href="{{ route('landing.faq') }}" class="rounded-lg border border-stone-300 px-5 py-3 text-sm font-semibold text-stone-700 hover:bg-stone-100">View FAQ</a>
            </div>
        </div>
    </div>
</section>
@endsection