@extends('layouts.landing')

@section('headers')
@endsection

@section('popup')
@endsection

@section('content')
    <main>
        <div class="py-20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Get in Touch</h1>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">Ready to scale your health and wellness offers? We'd
                        love to hear from you. Reach out to discuss partnerships and opportunities.</p>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
                    <div class="space-y-8">
                        <div>
                            <h2 class="text-3xl font-bold text-gray-900 mb-6">Let's Start a Conversation</h2>
                            <p class="text-lg text-gray-600 leading-relaxed mb-6">Whether you're looking to scale existing
                                offers or launch new health and wellness products, our team is here to help. We specialize
                                in performance marketing that delivers real results.</p>
                            <p class="text-lg text-gray-600 leading-relaxed">For inquiries and partnerships, please reach out
                                to us via email. Our team will respond promptly to discuss how we can help achieve your
                                marketing goals.</p>
                        </div>
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg">
                            <div data-slot="card-content" class="p-8">
                                <div class="flex items-center mb-4">
                                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4"><svg
                                            xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-mail h-6 w-6 text-blue-600" aria-hidden="true">
                                            <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
                                            <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                                        </svg></div>
                                    <div>
                                        <h3 class="text-xl font-semibold text-gray-900">Email Us</h3>
                                        <p class="text-gray-600">We'll get back to you within 24 hours</p>
                                    </div>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-4"><a href="mailto:hello@convertingoffers.net"
                                        class="text-lg font-medium text-blue-600 hover:text-blue-700 transition-colors">hello@convertingoffers.net</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="space-y-6">
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg hover:shadow-xl transition-shadow">
                            <div data-slot="card-content" class="p-8">
                                <div class="flex items-center mb-4">
                                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-map-pin h-6 w-6 text-green-600" aria-hidden="true">
                                            <path
                                                d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
                                            </path>
                                            <circle cx="12" cy="10" r="3"></circle>
                                        </svg></div>
                                    <h3 class="text-xl font-semibold text-gray-900">Global Offices</h3>
                                </div>
                                <div class="space-y-3">
                                    <div class="flex items-center">
                                        <div class="w-2 h-2 bg-red-500 rounded-full mr-3"></div><span
                                            class="text-gray-700">London, United Kingdom</span>
                                    </div>
                                    <div class="flex items-center">
                                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div><span
                                            class="text-gray-700">Dubai, United Arab Emirates</span>
                                    </div>
                                    <div class="flex items-center">
                                        <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div><span
                                            class="text-gray-700">India</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg hover:shadow-xl transition-shadow">
                            <div data-slot="card-content" class="p-8">
                                <div class="flex items-center mb-4">
                                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="lucide lucide-clock h-6 w-6 text-purple-600" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <polyline points="12 6 12 12 16 14"></polyline>
                                        </svg></div>
                                    <h3 class="text-xl font-semibold text-gray-900">Response Time</h3>
                                </div>
                                <p class="text-gray-600">We typically respond to all inquiries within 24 hours during
                                    business days. For urgent matters, please mention it in your email subject line.</p>
                            </div>
                        </div>
                        <div data-slot="card"
                            class="flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white">
                            <div data-slot="card-content" class="p-8">
                                <h3 class="text-xl font-semibold mb-4">Ready to Get Started?</h3>
                                <p class="mb-6 text-blue-100">Join the growing number of health and wellness brands that
                                    trust Converting Offers to scale their performance marketing.</p><a
                                    href="mailto:hello@convertingoffers.net" data-slot="button"
                                    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground shadow-xs hover:bg-[secondary-80] hover:opacity-80 h-9 px-4 py-2 has-[>svg]:px-3 w-full">Send
                                    Email <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="lucide lucide-arrow-right ml-2 h-4 w-4" aria-hidden="true">
                                        <path d="M5 12h14"></path>
                                        <path d="m12 5 7 7-7 7"></path>
                                    </svg></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-2xl p-8 lg:p-12">
                    <div class="text-center mb-8">
                        <h2 class="text-3xl font-bold text-gray-900 mb-4">What to Include in Your Email</h2>
                        <p class="text-lg text-gray-600 max-w-2xl mx-auto">Help us understand your needs better by
                            including the following information</p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg">
                            <div data-slot="card-content" class="p-6 text-center">
                                <div
                                    class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <span class="text-blue-600 font-bold text-lg">1</span></div>
                                <h3 class="font-semibold text-gray-900 mb-2">Your Business</h3>
                                <p class="text-gray-600 text-sm">Brief description of your company and industry</p>
                            </div>
                        </div>
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg">
                            <div data-slot="card-content" class="p-6 text-center">
                                <div
                                    class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <span class="text-green-600 font-bold text-lg">2</span></div>
                                <h3 class="font-semibold text-gray-900 mb-2">Your Goals</h3>
                                <p class="text-gray-600 text-sm">What you're looking to achieve with performance marketing
                                </p>
                            </div>
                        </div>
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg">
                            <div data-slot="card-content" class="p-6 text-center">
                                <div
                                    class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <span class="text-purple-600 font-bold text-lg">3</span></div>
                                <h3 class="font-semibold text-gray-900 mb-2">Current Challenges</h3>
                                <p class="text-gray-600 text-sm">Any specific obstacles you're facing</p>
                            </div>
                        </div>
                        <div data-slot="card"
                            class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 border-0 shadow-lg">
                            <div data-slot="card-content" class="p-6 text-center">
                                <div
                                    class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <span class="text-orange-600 font-bold text-lg">4</span></div>
                                <h3 class="font-semibold text-gray-900 mb-2">Timeline</h3>
                                <p class="text-gray-600 text-sm">When you're looking to start or launch</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('scripts')
@endsection