@extends('frontend.layouts.app')

@section('content')

<section class="relative py-24 text-center bg-black overflow-hidden border-b border-red-950/50">
    @if(!empty($page?->banner_image))
        <div class="absolute inset-0 bg-cover bg-center opacity-30"
             style="background-image:url('{{ asset('storage/' . $page->banner_image) }}')"></div>
        <div class="absolute inset-0 bg-black/75"></div>
    @endif

    <div class="relative max-w-5xl mx-auto px-6">
        <h1 class="text-7xl">
            {{ $page->title ?? 'Contact' }}
        </h1>

        <p class="text-gray-400 mt-3 text-lg">
            {{ $page->meta_description ?? 'Bookings, partnerships, media, and fan messages.' }}
        </p>
    </div>
</section>

<section class="max-w-7xl mx-auto px-6 py-16 grid md:grid-cols-2 gap-10">
    <div class="bg-[#111] rounded-3xl p-8 border border-red-950">
        <h2 class="text-4xl mb-6">Get in Touch</h2>

        @if(!empty($page?->content))
            <div class="prose prose-invert max-w-none text-gray-300 leading-8 mb-8">
                {!! $page->content !!}
            </div>
        @endif

        @if(session('success'))
            <div class="bg-green-600/20 border border-green-600 text-green-300 p-4 rounded-xl mb-6">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('contact.store') }}" method="POST" class="space-y-4">
            @csrf

            <input
                type="text"
                name="name"
                placeholder="Your Name"
                class="w-full bg-black border border-gray-700 rounded-xl px-4 py-3 text-white"
            >

            <input
                type="email"
                name="email"
                placeholder="Your Email"
                class="w-full bg-black border border-gray-700 rounded-xl px-4 py-3 text-white"
            >

            <input
                type="text"
                name="phone"
                placeholder="Phone Number"
                class="w-full bg-black border border-gray-700 rounded-xl px-4 py-3 text-white"
            >

            <input
                type="text"
                name="subject"
                placeholder="Subject"
                class="w-full bg-black border border-gray-700 rounded-xl px-4 py-3 text-white"
            >

            <textarea
                name="message"
                rows="6"
                placeholder="Write your message..."
                class="w-full bg-black border border-gray-700 rounded-xl px-4 py-3 text-white"
            ></textarea>

            <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-full font-semibold">
                Send Message
            </button>
        </form>
    </div>

    <div class="bg-[#111] rounded-3xl p-8 border border-red-950">
        <h2 class="text-4xl mb-6">Contact Details</h2>

        <div class="space-y-4 text-gray-300 text-lg">
            <p><strong>Email:</strong> {{ $settings->email ?? 'officialbmggh@gmail.com' }}</p>
            <p><strong>Phone:</strong> {{ $settings->phone ?? '+233501550000' }}</p>
            <p><strong>Address:</strong> {{ $settings->address ?? 'Accra - Ghana' }}</p>
        </div>
    </div>
</section>
@endsection