@extends('layouts.app')
@section('title', 'Contact — De Eventa')

@section('content')
<div class="pt-20">

<section class="py-20 bg-dark-800 text-center">
    <div class="max-w-4xl mx-auto px-4">
        <p class="section-subtitle">Get In Touch</p>
        <h1 class="section-title mb-4">Contact Us</h1>
        <div class="gold-divider"></div>
    </div>
</section>

<section class="py-20 bg-dark-900">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12">

            {{-- Info --}}
            <div>
                <h3 class="font-serif text-2xl text-white font-bold mb-8">Let's Talk About Your Event</h3>
                <div class="space-y-6">
                    @foreach([
                        ['icon'=>'phone','label'=>'Phone','value'=>'+880 1XXX-XXXXXX'],
                        ['icon'=>'email','label'=>'Email','value'=>'info@de-eventa.com'],
                        ['icon'=>'location','label'=>'Address','value'=>'Dhaka, Bangladesh'],
                        ['icon'=>'clock','label'=>'Hours','value'=>'Sat–Thu, 9am – 8pm'],
                    ] as $info)
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-gold-500/10 border border-gold-500/30 rounded-sm flex items-center justify-center shrink-0">
                            @if($info['icon'] === 'phone')
                            <svg class="w-4 h-4 text-gold-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                            @elseif($info['icon'] === 'email')
                            <svg class="w-4 h-4 text-gold-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                            @elseif($info['icon'] === 'location')
                            <svg class="w-4 h-4 text-gold-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            @else
                            <svg class="w-4 h-4 text-gold-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            @endif
                        </div>
                        <div>
                            <p class="text-dark-400 text-xs uppercase tracking-wider mb-1">{{ $info['label'] }}</p>
                            <p class="text-white">{{ $info['value'] }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Form --}}
            <div>
                @if(session('success'))
                <div class="bg-green-900/30 border border-green-500 text-green-300 px-6 py-4 rounded-sm mb-6">
                    {{ session('success') }}
                </div>
                @endif

                <form action="{{ route('contact.store') }}" method="POST" class="space-y-4">
                    @csrf
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-dark-200 text-sm mb-2">Name *</label>
                            <input type="text" name="name" value="{{ old('name') }}"
                                   class="input-dark @error('name') border-red-500 @enderror"
                                   placeholder="Your name">
                            @error('name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-dark-200 text-sm mb-2">Phone</label>
                            <input type="tel" name="phone" value="{{ old('phone') }}"
                                   class="input-dark" placeholder="+880 1XXX-XXXXXX">
                        </div>
                    </div>
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Email *</label>
                        <input type="email" name="email" value="{{ old('email') }}"
                               class="input-dark @error('email') border-red-500 @enderror"
                               placeholder="your@email.com">
                        @error('email')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-dark-200 text-sm mb-2">Message *</label>
                        <textarea name="message" rows="5"
                                  class="input-dark @error('message') border-red-500 @enderror"
                                  placeholder="How can we help you?">{{ old('message') }}</textarea>
                        @error('message')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <button type="submit" class="btn-gold w-full py-4">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</section>

</div>
@endsection