@extends('layouts.app')

@section('content')

<div class="bg-gray-50 min-h-screen">

    {{-- Hero --}}
    <div class="relative bg-gradient-to-br from-emerald-700 via-emerald-600 to-emerald-500 overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute -top-20 -left-20 w-72 h-72 bg-white rounded-full blur-3xl"></div>
            <div class="absolute -bottom-20 -right-20 w-96 h-96 bg-emerald-300 rounded-full blur-3xl"></div>
        </div>
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 relative">
            <div class="max-w-2xl">
                <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-white/15 backdrop-blur-sm rounded-full text-emerald-100 text-xs font-medium mb-5">
                    <svg class="w-3.5 h-3.5" 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>
                    We'd love to hear from you
                </div>
                <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight">Get in Touch</h1>
                <p class="text-emerald-100 text-base sm:text-lg mt-3 max-w-xl">Have a question, suggestion, or just want to say hello? Our team is ready to assist you.</p>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 60" fill="none" class="w-full h-auto">
                <path d="M0 60V30C240 0 480 0 720 30C960 60 1200 60 1440 30V60H0Z" fill="#f9fafb"/>
            </svg>
        </div>
    </div>

    {{-- Contact Section --}}
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">

            {{-- Left: Info Cards --}}
            <div>
                <h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Let's start a conversation</h2>
                <p class="text-gray-500 mt-2 mb-8">Reach out through any of the channels below and we'll get back to you promptly.</p>

                <div class="space-y-4">
                    <div class="group bg-white rounded-2xl p-5 sm:p-6 shadow-sm border border-gray-100 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center shrink-0 group-hover:bg-emerald-100 transition-colors">
                                <svg class="w-5 h-5 text-emerald-600" 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>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Call Us</h3>
                                <p class="text-sm text-gray-500 mt-0.5">Available Mon-Fri, 8am-6pm EST</p>
                                <a href="tel:+12345678900" class="inline-flex items-center gap-1.5 text-emerald-600 hover:text-emerald-700 font-medium text-sm mt-2 transition-colors">
                                    +1 (234) 567-8900
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="group bg-white rounded-2xl p-5 sm:p-6 shadow-sm border border-gray-100 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center shrink-0 group-hover:bg-emerald-100 transition-colors">
                                <svg class="w-5 h-5 text-emerald-600" 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>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Email Us</h3>
                                <p class="text-sm text-gray-500 mt-0.5">We typically reply within 24 hours</p>
                                <a href="mailto:support@aphrodaily.com" class="inline-flex items-center gap-1.5 text-emerald-600 hover:text-emerald-700 font-medium text-sm mt-2 transition-colors">
                                    support@aphrodaily.com
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="group bg-white rounded-2xl p-5 sm:p-6 shadow-sm border border-gray-100 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center shrink-0 group-hover:bg-emerald-100 transition-colors">
                                <svg class="w-5 h-5 text-emerald-600" 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>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Visit Us</h3>
                                <p class="text-sm text-gray-500 mt-0.5">Come say hello at our store</p>
                                <p class="text-emerald-600 font-medium text-sm mt-2">
                                    123 Commerce Street, Business District<br>New York, NY 10001
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Social --}}
                <div class="mt-8 bg-white rounded-2xl p-5 sm:p-6 shadow-sm border border-gray-100">
                    <h3 class="font-semibold text-gray-900 mb-4">Follow Us</h3>
                    <div class="flex gap-3">
                        <a href="#" class="w-10 h-10 bg-gray-100 hover:bg-emerald-100 rounded-xl flex items-center justify-center text-gray-500 hover:text-emerald-600 transition-all">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-100 hover:bg-emerald-100 rounded-xl flex items-center justify-center text-gray-500 hover:text-emerald-600 transition-all">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-100 hover:bg-emerald-100 rounded-xl flex items-center justify-center text-gray-500 hover:text-emerald-600 transition-all">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-100 hover:bg-emerald-100 rounded-xl flex items-center justify-center text-gray-500 hover:text-emerald-600 transition-all">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg>
                        </a>
                    </div>
                </div>
            </div>

            {{-- Right: Form --}}
            <div>
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="px-6 sm:px-8 py-6 bg-gradient-to-r from-emerald-600 to-emerald-500">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-white/15 rounded-xl flex items-center justify-center">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <div>
                                <h3 class="text-white font-semibold text-lg">Send us a Message</h3>
                                <p class="text-emerald-100 text-sm">Fill out the form and we'll be in touch</p>
                            </div>
                        </div>
                    </div>
                    <div class="px-6 sm:px-8 py-6 sm:py-8">
                        <form action="{{ route('contact.submit') }}" method="POST">
                            @csrf
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
                                <div class="sm:col-span-1">
                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1.5">Your Name</label>
                                    <input type="text" id="name" name="name" required
                                        class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm bg-gray-50 focus:bg-white focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all placeholder:text-gray-400"
                                        placeholder="John Doe">
                                </div>
                                <div class="sm:col-span-1">
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">Your Email</label>
                                    <input type="email" id="email" name="email" required
                                        class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm bg-gray-50 focus:bg-white focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all placeholder:text-gray-400"
                                        placeholder="john@example.com">
                                </div>
                                <div class="sm:col-span-2">
                                    <label for="subject" class="block text-sm font-medium text-gray-700 mb-1.5">Subject</label>
                                    <input type="text" id="subject" name="subject" required
                                        class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm bg-gray-50 focus:bg-white focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all placeholder:text-gray-400"
                                        placeholder="How can we help?">
                                </div>
                                <div class="sm:col-span-2">
                                    <label for="message" class="block text-sm font-medium text-gray-700 mb-1.5">Your Message</label>
                                    <textarea id="message" name="message" required rows="5"
                                        class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm bg-gray-50 focus:bg-white focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all placeholder:text-gray-400 resize-none"
                                        placeholder="Tell us more about your inquiry..."></textarea>
                                </div>
                            </div>
                            <div class="mt-6">
                                <button type="submit"
                                    class="group inline-flex items-center justify-center gap-2 w-full px-6 py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-xl transition-all shadow-sm hover:shadow-md">
                                    Send Message
                                    <svg class="w-4 h-4 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Map Section --}}
    <div class="bg-white border-t border-gray-100">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
            <div class="text-center mb-10">
                <h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Find Us</h2>
                <p class="text-gray-500 mt-2">Visit our store during business hours</p>
            </div>
            <div class="bg-gray-100 rounded-2xl overflow-hidden shadow-sm border border-gray-100 h-64 sm:h-80 lg:h-96 flex items-center justify-center">
                <div class="text-center p-8">
                    <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-7 h-7 text-emerald-600" 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>
                    </div>
                    <p class="text-gray-500 text-sm font-medium">123 Commerce Street, Business District</p>
                    <p class="text-gray-500 text-sm">New York, NY 10001</p>
                    <p class="text-emerald-600 text-xs font-medium mt-3">Open Mon-Sat: 8:00 AM - 8:00 PM</p>
                </div>
            </div>
        </div>
    </div>

    {{-- FAQ --}}
    <div class="bg-gray-50 border-t border-gray-100">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
            <div class="text-center mb-10">
                <span class="inline-flex items-center gap-2 px-3 py-1 bg-emerald-100 text-emerald-700 text-xs font-semibold rounded-full mb-3">FAQ</span>
                <h2 class="text-2xl sm:text-3xl font-bold text-gray-900">Frequently Asked Questions</h2>
                <p class="text-gray-500 mt-2">Quick answers to common inquiries</p>
            </div>
            <div class="max-w-3xl mx-auto space-y-3">
                <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 sm:px-6 py-4 text-left transition-colors hover:bg-emerald-50/50">
                        <span class="text-sm sm:text-base font-medium text-gray-800 pr-4">How long does shipping take?</span>
                        <svg class="w-4 h-4 text-gray-400 shrink-0 transition-transform duration-200 faq-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div class="faq-body max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                        <div class="px-5 sm:px-6 pb-4 text-sm text-gray-600 leading-relaxed">
                            Standard shipping typically takes 3-5 business days within the continental US. Express shipping options are available at checkout for next-day or 2-day delivery.
                        </div>
                    </div>
                </div>
                <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 sm:px-6 py-4 text-left transition-colors hover:bg-emerald-50/50">
                        <span class="text-sm sm:text-base font-medium text-gray-800 pr-4">What is your return policy?</span>
                        <svg class="w-4 h-4 text-gray-400 shrink-0 transition-transform duration-200 faq-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div class="faq-body max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                        <div class="px-5 sm:px-6 pb-4 text-sm text-gray-600 leading-relaxed">
                            We offer a 30-day return policy for most items. Products must be unused and in original packaging. Simply contact our support team to initiate a return.
                        </div>
                    </div>
                </div>
                <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 sm:px-6 py-4 text-left transition-colors hover:bg-emerald-50/50">
                        <span class="text-sm sm:text-base font-medium text-gray-800 pr-4">Do you ship internationally?</span>
                        <svg class="w-4 h-4 text-gray-400 shrink-0 transition-transform duration-200 faq-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div class="faq-body max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                        <div class="px-5 sm:px-6 pb-4 text-sm text-gray-600 leading-relaxed">
                            Yes, we ship to many international destinations. Shipping costs and delivery times vary by location. You'll see available options at checkout.
                        </div>
                    </div>
                </div>
                <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 sm:px-6 py-4 text-left transition-colors hover:bg-emerald-50/50">
                        <span class="text-sm sm:text-base font-medium text-gray-800 pr-4">How can I track my order?</span>
                        <svg class="w-4 h-4 text-gray-400 shrink-0 transition-transform duration-200 faq-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div class="faq-body max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                        <div class="px-5 sm:px-6 pb-4 text-sm text-gray-600 leading-relaxed">
                            Once your order ships, you'll receive a tracking number via email. You can also track your order from your account dashboard anytime.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
function toggleFaq(btn) {
    var item = btn.closest('.faq-item');
    var body = item.querySelector('.faq-body');
    var chevron = item.querySelector('.faq-chevron');
    var isOpen = body.style.maxHeight && body.style.maxHeight !== '0px';

    document.querySelectorAll('.faq-item').forEach(function(el) {
        if (el !== item) {
            el.querySelector('.faq-body').style.maxHeight = '0';
            el.querySelector('.faq-chevron').classList.remove('rotate-180');
        }
    });

    if (isOpen) {
        body.style.maxHeight = '0';
        chevron.classList.remove('rotate-180');
    } else {
        body.style.maxHeight = body.scrollHeight + 'px';
        chevron.classList.add('rotate-180');
    }
}
</script>

@endsection