@extends('layouts.marketing')

@section('title', 'Contact Us – CuraHealthLine')

@section('content')
    <x-marketing-nav />
    
    <div class="mx-auto max-w-6xl px-6 pb-16" style="padding-top: 80px;">
        <div class="text-center mb-16">
            <h1 class="font-heading text-5xl text-ink mb-6">Get in Touch</h1>
            <p class="text-xl text-slate-600 max-w-3xl mx-auto">
                Have questions? We'd love to hear from you.
            </p>
        </div>

        <div class="grid lg:grid-cols-2 gap-12">
            <div>
                <div class="bg-white rounded-3xl shadow-sm ring-1 ring-slate-100 p-8">
                    <h2 class="font-heading text-2xl text-ink mb-6">Send us a message</h2>
                    
                    @if (session('success'))
                        <div class="mb-6 bg-green-50 border border-green-200 text-green-800 rounded-lg p-4">
                            {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ route('contact.submit') }}" method="POST" class="space-y-6">
                        @csrf
                        <div>
                            <label for="name" class="block text-sm font-semibold text-ink mb-2">Name</label>
                            <input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-brand focus:ring-2 focus:ring-brand/20 outline-none transition">
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-semibold text-ink mb-2">Email</label>
                            <input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-brand focus:ring-2 focus:ring-brand/20 outline-none transition">
                        </div>
                        <div>
                            <label for="subject" class="block text-sm font-semibold text-ink mb-2">Subject</label>
                            <input type="text" id="subject" name="subject" required class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-brand focus:ring-2 focus:ring-brand/20 outline-none transition">
                        </div>
                        <div>
                            <label for="message" class="block text-sm font-semibold text-ink mb-2">Message</label>
                            <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-brand focus:ring-2 focus:ring-brand/20 outline-none transition resize-none"></textarea>
                        </div>
                        <button type="submit" class="w-full rounded-full bg-brand px-6 py-3 text-white font-semibold shadow hover:-translate-y-0.5 transition-transform">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>

            <div class="space-y-6">
                <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-100 p-6">
                    <div class="text-4xl mb-3">📧</div>
                    <h3 class="text-xl font-semibold text-ink mb-2">Email</h3>
                    <p class="text-slate-600">info@curahealthline.com</p>
                    <p class="text-slate-600">support@curahealthline.com</p>
                </div>
                <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-100 p-6">
                    <div class="text-4xl mb-3">📞</div>
                    <h3 class="text-xl font-semibold text-ink mb-2">Phone</h3>
                    <p class="text-slate-600">+1 (800) CURA-123</p>
                </div>
                <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-100 p-6">
                    <div class="text-4xl mb-3">📍</div>
                    <h3 class="text-xl font-semibold text-ink mb-2">Office</h3>
                    <p class="text-slate-600">123 Healthcare Plaza<br>New York, NY 10001</p>
                </div>
                <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-100 p-6">
                    <div class="text-4xl mb-3">💬</div>
                    <h3 class="text-xl font-semibold text-ink mb-2">Live Chat</h3>
                    <p class="text-slate-600 mb-3">Available Monday-Friday, 9am-5pm EST</p>
                    <button class="rounded-full bg-teal px-4 py-2 text-white text-sm font-semibold hover:-translate-y-0.5 transition-transform">
                        Start Chat
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection