@extends('frontend.layouts.app', ['title' => 'Contact | New Florida', 'innerHeader' => true])

@section('content')
<section class="section-bg layout-pt-md layout-pb-md">
    <div class="section-bg__item col-12">
        <img src="img/pages/about/1.png" alt="Contact New Florida">
    </div>

    <div class="container">
        <div class="row justify-center text-center">
            <div class="col-xl-7 col-lg-8 col-md-10">
                <h1 class="text-40 md:text-25 fw-600 text-white">{{ $siteContact->contact_name ?? 'Talk to the New Florida Team' }}</h1>
                <div class="text-white mt-15">{{ $siteContact->contact_content ?? 'Questions about bookings, hosting, or local support? We are ready to help.' }}</div>
            </div>
        </div>
    </div>
</section>

<section class="layout-pt-lg layout-pb-md">
    <div class="container">
        <div class="row y-gap-30">
            <div class="col-lg-4 col-md-6">
                <div class="border-light rounded-4 px-30 py-30 text-center h-full">
                    <div class="text-40 text-blue-1">
                        <i class="icon-location-2"></i>
                    </div>
                    <h3 class="text-20 fw-500 mt-20">Visit Us</h3>
                    <p class="text-15 text-light-1 mt-10">{!! nl2br(e($siteContact->contact_addr ?? ('210 Emerald Coast Parkway' . PHP_EOL . 'Miramar Beach, Florida'))) !!}</p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="border-light rounded-4 px-30 py-30 text-center h-full">
                    <div class="text-40 text-blue-1">
                        <i class="icon-call"></i>
                    </div>
                    <h3 class="text-20 fw-500 mt-20">Call Support</h3>
                    <p class="text-15 text-light-1 mt-10">Available every day from 9 AM to 8 PM</p>
                    <a href="tel:{{ preg_replace('/\s+/', '', $siteContact->contact_phone ?? '+11234567890') }}" class="d-inline-block text-blue-1 fw-500 mt-10">{{ $siteContact->contact_phone ?? '+(1) 123 456 7890' }}</a>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="border-light rounded-4 px-30 py-30 text-center h-full">
                    <div class="text-40 text-blue-1">
                        <i class="icon-email"></i>
                    </div>
                    <h3 class="text-20 fw-500 mt-20">Email Us</h3>
                    <p class="text-15 text-light-1 mt-10">For partnerships, bookings, or hosting inquiries</p>
                    <a href="mailto:{{ $siteContact->contact_email ?? 'hello@newflorida.com' }}" class="d-inline-block text-blue-1 fw-500 mt-10">{{ $siteContact->contact_email ?? 'hello@newflorida.com' }}</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="layout-pb-lg">
    <div class="container">
        <div class="row y-gap-40">
            <div class="col-lg-7">
                <div class="border-light rounded-4 px-40 py-40">
                    <div class="sectionTitle -md">
                        <h2 class="sectionTitle__title">Send us a message</h2>
                        <p class="sectionTitle__text mt-5">Share your question and our team will get back to you shortly.</p>
                    </div>

                    <form class="contact-form row y-gap-20 pt-30">
                        <div class="col-md-6">
                            <input type="text" placeholder="Your Name">
                        </div>

                        <div class="col-md-6">
                            <input type="email" placeholder="Email Address">
                        </div>

                        <div class="col-md-6">
                            <input type="text" placeholder="Phone Number">
                        </div>

                        <div class="col-md-6">
                            <select>
                                <option selected>Choose Topic</option>
                                <option>Booking Support</option>
                                <option>Host Registration</option>
                                <option>General Inquiry</option>
                            </select>
                        </div>

                        <div class="col-12">
                            <textarea rows="6" placeholder="Tell us how we can help"></textarea>
                        </div>

                        <div class="col-12">
                            <button type="button" class="button -md bg-blue-1 text-white">Send Message</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="bg-light-2 rounded-4 px-30 py-30 h-full">
                    <h3 class="text-22 fw-500">Why travelers choose us</h3>

                    <div class="row y-gap-20 pt-30">
                        <div class="col-12">
                            <div class="d-flex x-gap-15 items-start">
                                <img src="img/featureIcons/1/1.svg" alt="Best rates" class="size-50">
                                <div>
                                    <div class="text-18 fw-500">Trusted local recommendations</div>
                                    <p class="text-15 text-light-1 mt-5">We help guests discover the right property and the right neighborhood.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="d-flex x-gap-15 items-start">
                                <img src="img/featureIcons/1/2.svg" alt="Fast booking" class="size-50">
                                <div>
                                    <div class="text-18 fw-500">Fast response from real people</div>
                                    <p class="text-15 text-light-1 mt-5">Our team supports both travelers and owners throughout the booking journey.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="d-flex x-gap-15 items-start">
                                <img src="img/featureIcons/1/3.svg" alt="Support" class="size-50">
                                <div>
                                    <div class="text-18 fw-500">Hosting guidance that converts</div>
                                    <p class="text-15 text-light-1 mt-5">From listing setup to guest inquiries, we help experts grow with confidence.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ratio ratio-15:9 rounded-4 mt-30 js-lazy" data-bg="img/general/map.png"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="layout-pt-md layout-pb-md bg-dark-2">
    <div class="container">
        <div class="row y-gap-30 justify-between items-center">
            <div class="col-auto">
                <div class="row y-gap-20 flex-wrap items-center">
                    <div class="col-auto">
                        <div class="icon-newsletter text-60 sm:text-40 text-white"></div>
                    </div>

                    <div class="col-auto">
                        <h4 class="text-26 text-white fw-600">Stay connected with New Florida</h4>
                        <div class="text-white">Get updates on featured stays, local guides, and hosting opportunities.</div>
                    </div>
                </div>
            </div>

            <div class="col-auto">
                <div class="single-field -w-410 d-flex x-gap-10 y-gap-20">
                    <div>
                        <input class="bg-white h-60" type="text" placeholder="Your Email">
                    </div>

                    <div>
                        <button class="button -md h-60 bg-blue-1 text-white">Subscribe</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection