@extends('layouts.app')
@section('title', 'Contact Us - AVIOBOOTS')

@section('content')
<section id="contact" class="hero fade-in" @if(!empty($heroBg)) style="background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('{{ asset($heroBg) }}'); background-size:cover; background-position:center;" @else style="background:#222;" @endif>
    <div class="container">
        <h1>CONTACT US</h1>
        <p>{{ $tagline }}</p>
    </div>
</section>

<section class="section fade-in contact-page-section">
    <div class="container">
        @if(session('success'))
            <div style="background:#d4edda; color:#155724; padding:1rem; border-radius:8px; margin-bottom:2rem;">{{ session('success') }}</div>
        @endif
        <div class="contact-grid">
            <div class="contact-form-column">
                <h2 class="section-title">Send Message</h2>
                <form action="{{ route('contact.send') }}" method="POST" style="max-width:500px;">
                    @csrf
                    <div style="margin-bottom:1.5rem;">
                        <input type="text" name="name" placeholder="Your Name" required value="{{ old('name') }}" style="width:100%; padding:1rem; border:1px solid #ddd; border-radius:4px;">
                    </div>
                    <div style="margin-bottom:1.5rem;">
                        <input type="email" name="email" placeholder="Your Email" required value="{{ old('email') }}" style="width:100%; padding:1rem; border:1px solid #ddd; border-radius:4px;">
                    </div>
                    <div style="margin-bottom:1.5rem;">
                        <textarea name="message" placeholder="Your Message" rows="6" required style="width:100%; padding:1rem; border:1px solid #ddd; border-radius:4px;">{{ old('message') }}</textarea>
                    </div>
                    <button type="submit" class="btn" style="width:100%;">SEND MESSAGE</button>
                </form>
            </div>
            <div class="contact-info-column">
                <h2 style="margin-bottom:2rem;">Visit Us</h2>
                @if($address)
                    <div style="margin-bottom:2rem;">
                        <h4><i class="fa-solid fa-location-dot"></i> Showroom Address</h4>
                        <p style="margin-top:.5rem; line-height:1.7;">{!! nl2br(e($address)) !!}</p>
                    </div>
                @endif
                @if($phone || $email)
                    <div style="margin-bottom:2rem;">
                        <h4><i class="fa-solid fa-phone"></i> Phone &amp; Email</h4>
                        <p style="margin-top:.5rem; line-height:1.9;">
                            @if($phone){{ $phone }}<br>@endif
                            @if($email)<a href="mailto:{{ $email }}" style="color:inherit;">{{ $email }}</a>@endif
                        </p>
                    </div>
                @endif
                @if($hours)
                    <div style="margin-bottom:2rem;">
                        <h4><i class="fa-regular fa-clock"></i> Business Hours</h4>
                        <p style="margin-top:.5rem; line-height:1.7;">{!! nl2br(e($hours)) !!}</p>
                    </div>
                @endif
                <div class="contact-map-placeholder">Google Maps Embed Here</div>
            </div>
        </div>
    </div>
</section>

<section class="newsletter fade-in">
    <div class="container">
        <h2 class="section-title">Stay Updated</h2>
        <form>@csrf<input type="email" placeholder="Email for updates"><button type="submit" class="btn">Subscribe</button></form>
    </div>
</section>
@endsection