@extends('website.layouts.app')

@section('content')
    @include('website.components.header')

    <main class="pt-20">
        <section class="bg-teal-deep text-white py-16 md:py-24 relative overflow-hidden">
            <div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.22)_1px,transparent_0)] [background-size:14px_14px]"></div>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
                <h1 class="text-4xl sm:text-5xl md:text-6xl font-heading font-bold mb-4 md:mb-6">Get in Touch</h1>
                <p class="text-base sm:text-xl text-teal-100 max-w-3xl mx-auto leading-relaxed">Have a question or want to partner with us? We'd love to hear from you.</p>
            </div>
        </section>

        <section class="py-16 md:py-24 bg-cream">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-16">
                    <div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg border border-gray-100">
                        <h2 class="text-2xl font-heading font-bold text-teal-deep mb-6">Send us a Message</h2>

                        <div id="formSuccess" class="hidden bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl mb-6 flex items-center gap-2">
                            <i data-lucide="check-circle" class="w-5 h-5"></i>
                            <span class="font-medium">Message sent successfully!</span>
                        </div>

                        <form id="contactForm" class="space-y-5 md:space-y-6" novalidate>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Name <span class="text-red-500">*</span>
                                </label>
                                <input
                                    type="text"
                                    name="name"
                                    required
                                    class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-deep/20 focus:border-teal-deep transition-all"
                                    placeholder="Your full name"
                                >
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Email <span class="text-red-500">*</span>
                                </label>
                                <input
                                    type="email"
                                    name="email"
                                    required
                                    class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-deep/20 focus:border-teal-deep transition-all"
                                    placeholder="you@example.com"
                                >
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Subject</label>
                                <div class="relative">
                                    <select
                                        name="subject"
                                        class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-deep/20 focus:border-teal-deep transition-all appearance-none"
                                    >
                                        <option>General Inquiry</option>
                                        <option>Partnership</option>
                                        <option>Support</option>
                                        <option>Feedback</option>
                                        <option>Other</option>
                                    </select>
                                    <i data-lucide="chevron-down" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 pointer-events-none"></i>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Message <span class="text-red-500">*</span>
                                </label>
                                <textarea
                                    name="message"
                                    required
                                    rows="4"
                                    class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-deep/20 focus:border-teal-deep transition-all resize-none"
                                    placeholder="How can we help you?"
                                ></textarea>
                            </div>

                            <button type="submit" class="w-full bg-amber-gold hover:bg-amber-dark text-white font-bold py-3.5 rounded-full shadow-lg hover:shadow-amber-gold/30 transition-all transform hover:-translate-y-0.5">
                                Send Message
                            </button>
                        </form>
                    </div>

                    <div class="space-y-8">
                        <div>
                            <h2 class="text-2xl font-heading font-bold text-teal-deep mb-6">Contact Information</h2>
                            <div class="space-y-5 md:space-y-6">
                                <div class="flex items-start gap-4">
                                    <div class="w-12 h-12 bg-teal-deep/10 rounded-full flex items-center justify-center shrink-0 text-teal-deep">
                                        <i data-lucide="map-pin" class="w-6 h-6"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-bold text-gray-900 mb-1">Registered Address</h3>
                                        <p class="text-gray-600">556/1/15, 5th Lane, Pitipana Town, Homagama, Sri Lanka</p>
                                    </div>
                                </div>

                                <div class="flex items-start gap-4">
                                    <div class="w-12 h-12 bg-teal-deep/10 rounded-full flex items-center justify-center shrink-0 text-teal-deep">
                                        <i data-lucide="phone" class="w-6 h-6"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-bold text-gray-900 mb-1">Phone</h3>
                                        <p class="text-gray-600">+94 70 630 2900</p>
                                    </div>
                                </div>

                                <div class="flex items-start gap-4">
                                    <div class="w-12 h-12 bg-teal-deep/10 rounded-full flex items-center justify-center shrink-0 text-teal-deep">
                                        <i data-lucide="mail" class="w-6 h-6"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-bold text-gray-900 mb-1">Email</h3>
                                        <p class="text-gray-600">support@savesmart.lk</p>
                                    </div>
                                </div>

                                <div class="flex items-start gap-4">
                                    <div class="w-12 h-12 bg-teal-deep/10 rounded-full flex items-center justify-center shrink-0 text-teal-deep">
                                        <i data-lucide="clock" class="w-6 h-6"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-bold text-gray-900 mb-1">Business Hours</h3>
                                        <p class="text-gray-600">Mon - Fri: 9:00 AM - 6:00 PM</p>
                                        <p class="text-gray-600">Sat: 9:00 AM - 1:00 PM</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <h3 class="text-xl font-heading font-bold text-teal-deep mb-4">Follow Us</h3>
                            <div class="flex gap-4">
                                @foreach (['facebook', 'instagram', 'twitter', 'linkedin'] as $social)
                                    <button type="button" class="w-10 h-10 bg-white border border-gray-200 rounded-full flex items-center justify-center text-gray-600 hover:bg-teal-deep hover:text-white hover:border-teal-deep transition-all">
                                        <i data-lucide="{{ $social }}" class="w-5 h-5"></i>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-16 md:py-24 bg-white">
            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-10 md:mb-16">
                    <h2 class="text-3xl md:text-4xl font-heading font-bold text-teal-deep mb-4">Frequently Asked Questions</h2>
                </div>
                <div class="space-y-4">
                    <div class="border border-gray-200 rounded-xl overflow-hidden">
                        <button
                            type="button"
                            class="faq-trigger w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors text-left"
                            aria-expanded="false"
                        >
                            <span class="font-bold text-teal-deep text-lg">How do I get my digital card?</span>
                            <i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-gray-400 transition-transform duration-300"></i>
                        </button>
                        <div class="faq-content hidden overflow-hidden">
                            <div class="p-6 pt-0 bg-white text-gray-600 leading-relaxed border-t border-gray-100">
                                Once you sign up, your digital card is instantly available in your dashboard. You can also download our mobile app to access it anytime.
                            </div>
                        </div>
                    </div>

                    <div class="border border-gray-200 rounded-xl overflow-hidden">
                        <button
                            type="button"
                            class="faq-trigger w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors text-left"
                            aria-expanded="false"
                        >
                            <span class="font-bold text-teal-deep text-lg">Where can I use my SaveSmart card?</span>
                            <i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-gray-400 transition-transform duration-300"></i>
                        </button>
                        <div class="faq-content hidden overflow-hidden">
                            <div class="p-6 pt-0 bg-white text-gray-600 leading-relaxed border-t border-gray-100">
                                You can use your card at any of our 500+ partner locations across Sri Lanka. Look for the SaveSmart sticker at the checkout or check our map.
                            </div>
                        </div>
                    </div>

                    <div class="border border-gray-200 rounded-xl overflow-hidden">
                        <button
                            type="button"
                            class="faq-trigger w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors text-left"
                            aria-expanded="false"
                        >
                            <span class="font-bold text-teal-deep text-lg">Is there a monthly fee?</span>
                            <i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-gray-400 transition-transform duration-300"></i>
                        </button>
                        <div class="faq-content hidden overflow-hidden">
                            <div class="p-6 pt-0 bg-white text-gray-600 leading-relaxed border-t border-gray-100">
                                We offer both a Free plan and a Premium plan. The Premium plan is billed monthly or annually and unlocks higher discounts.
                            </div>
                        </div>
                    </div>

                    <div class="border border-gray-200 rounded-xl overflow-hidden">
                        <button
                            type="button"
                            class="faq-trigger w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors text-left"
                            aria-expanded="false"
                        >
                            <span class="font-bold text-teal-deep text-lg">How do I become a partner?</span>
                            <i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-gray-400 transition-transform duration-300"></i>
                        </button>
                        <div class="faq-content hidden overflow-hidden">
                            <div class="p-6 pt-0 bg-white text-gray-600 leading-relaxed border-t border-gray-100">
                                We love working with new businesses! Please select "Partnership" in the contact form above, and our team will get back to you.
                            </div>
                        </div>
                    </div>

                    <div class="border border-gray-200 rounded-xl overflow-hidden">
                        <button
                            type="button"
                            class="faq-trigger w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors text-left"
                            aria-expanded="false"
                        >
                            <span class="font-bold text-teal-deep text-lg">Can I cancel my membership?</span>
                            <i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-gray-400 transition-transform duration-300"></i>
                        </button>
                        <div class="faq-content hidden overflow-hidden">
                            <div class="p-6 pt-0 bg-white text-gray-600 leading-relaxed border-t border-gray-100">
                                Yes, you can cancel your Premium membership at any time from your account settings. Your benefits will continue until the end of the billing period.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    @include('website.components.footer')
@endsection

@push('scripts')
<script>
    (function () {
        const form = document.getElementById('contactForm');
        const successMessage = document.getElementById('formSuccess');

        if (form && successMessage) {
            form.addEventListener('submit', function (event) {
                event.preventDefault();

                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                successMessage.classList.remove('hidden');
                form.reset();

                setTimeout(function () {
                    successMessage.classList.add('hidden');
                }, 3000);
            });
        }

        document.querySelectorAll('.faq-trigger').forEach(function (trigger) {
            trigger.addEventListener('click', function () {
                const content = trigger.nextElementSibling;
                const icon = trigger.querySelector('.faq-icon');
                const isOpen = trigger.getAttribute('aria-expanded') === 'true';

                trigger.setAttribute('aria-expanded', String(!isOpen));
                if (content) {
                    content.classList.toggle('hidden', isOpen);
                }
                if (icon) {
                    icon.classList.toggle('rotate-180', !isOpen);
                }
            });
        });
    })();
</script>
@endpush