@extends('layouts.app')

@section('title', 'Contact Us')

@section('content')

    <x-breadcrumb :items="[['label' => 'Contact']]" />

    {{-- Page hero --}}
    <section class="bg-cream-100 py-14 text-center lg:py-20">
        <div class="container-shop max-w-2xl">
            <p class="eyebrow mb-3">We're here to help</p>
            <h1 class="font-serif text-4xl font-medium sm:text-5xl">Get in Touch</h1>
            <p class="mt-4 leading-relaxed text-ink-700">
                Questions about an order, your skin, or which product to start with? Our team replies within one working day.
            </p>
        </div>
    </section>

    {{-- Contact cards --}}
    <section class="py-14 lg:py-16">
        <div class="container-shop grid gap-6 md:grid-cols-3">
            @foreach ([
                ['icon' => 'mail', 'title' => 'Email Us', 'line1' => 'care@divne.example', 'line2' => 'Replies within 24 hours'],
                ['icon' => 'phone', 'title' => 'Call / WhatsApp', 'line1' => '+91 98765 43210', 'line2' => 'Mon–Sat, 9:30 am – 6:30 pm IST'],
                ['icon' => 'map-pin', 'title' => 'Visit Us', 'line1' => '12, Green Valley Road', 'line2' => 'Coimbatore, Tamil Nadu 641001'],
            ] as $card)
                <div class="border border-cream-200 bg-cream-50 p-8 text-center">
                    <span class="mx-auto flex h-13 w-13 items-center justify-center rounded-full bg-moss-100 text-moss-700"><x-icon :name="$card['icon']" class="h-5.5 w-5.5" /></span>
                    <h2 class="mt-4 font-serif text-lg font-medium">{{ $card['title'] }}</h2>
                    <p class="mt-2 text-sm font-medium text-ink-900">{{ $card['line1'] }}</p>
                    <p class="mt-1 text-xs text-ink-500">{{ $card['line2'] }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Form + FAQ --}}
    <section class="pb-16 lg:pb-24">
        <div class="container-shop grid gap-12 lg:grid-cols-2">

            <div>
                <h2 class="section-title">Send us a message</h2>
                <p class="mt-3 text-sm text-ink-500">Fill in the form and we'll get back to you shortly.</p>
                <form class="mt-8 space-y-5" action="#" onsubmit="return false">
                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label for="name" class="field-label">Your Name <span class="text-terra-500">*</span></label>
                            <input id="name" type="text" autocomplete="name" class="field-input" required>
                        </div>
                        <div>
                            <label for="contact-email" class="field-label">Email <span class="text-terra-500">*</span></label>
                            <input id="contact-email" type="email" autocomplete="email" class="field-input" required>
                        </div>
                    </div>
                    <div>
                        <label for="subject" class="field-label">Subject <span class="text-terra-500">*</span></label>
                        <select id="subject" class="field-input cursor-pointer" required>
                            <option>Order support</option>
                            <option>Product recommendation</option>
                            <option>Returns & replacements</option>
                            <option>Wholesale / partnership</option>
                            <option>Something else</option>
                        </select>
                    </div>
                    <div>
                        <label for="message" class="field-label">Message <span class="text-terra-500">*</span></label>
                        <textarea id="message" rows="5" class="field-input resize-y" placeholder="Tell us how we can help…" required></textarea>
                        <p class="mt-1.5 text-xs text-ink-400">Include your order number if writing about an existing order.</p>
                    </div>
                    <button type="submit" class="btn-primary">Send Message</button>
                </form>
            </div>

            <div>
                <h2 class="section-title">Frequently asked</h2>
                <div class="mt-8 divide-y divide-cream-200 border-y border-cream-200">
                    @foreach ([
                        'How long does delivery take?' => 'Orders ship within 24 hours and typically arrive in 2–4 days in metros and 4–7 days elsewhere in India. You will receive a tracking link by email and SMS.',
                        'Do you offer Cash on Delivery?' => 'Yes — COD is available on orders up to ₹5,000 with a small ₹49 handling fee. Prepaid orders always ship free above ₹599.',
                        'What is your return policy?' => 'Because our products are personal-care items, we cannot accept opened returns. Damaged, leaking or incorrect items are replaced free within 7 days — just send us a photo.',
                        'Are your products safe for sensitive skin?' => 'Our formulations are fragrance-light, pH balanced and dermatologically tested. We always recommend a 24-hour patch test on the inner arm before first use.',
                        'Where are your products made?' => 'Everything is made in small batches at our own facility in Tamil Nadu, using milk from our farm and botanicals from partner growers.',
                    ] as $question => $answer)
                        <details class="group">
                            <summary class="flex cursor-pointer items-center justify-between gap-4 py-4.5 text-sm font-semibold text-ink-900 [&::-webkit-details-marker]:hidden">
                                {{ $question }}
                                <x-icon name="chevron-down" class="h-4 w-4 shrink-0 transition-transform duration-200 group-open:rotate-180" />
                            </summary>
                            <p class="pb-5 text-sm leading-relaxed text-ink-700">{{ $answer }}</p>
                        </details>
                    @endforeach
                </div>

                {{-- Map placeholder --}}
                <div class="mt-8 flex aspect-[2/1] items-center justify-center border border-cream-200 bg-cream-100">
                    <div class="text-center">
                        <x-icon name="map-pin" class="mx-auto h-8 w-8 text-moss-500" />
                        <p class="mt-2 text-xs font-semibold tracking-[0.18em] text-ink-500 uppercase">Store map placeholder</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection