@extends('layouts.app')

@section('title', 'Contact Us & Customer Support | ' . ($storeConfig['brandName'] ?? 'Aangina'))
@section('meta_description', 'Get in touch with ' . ($storeConfig['brandName'] ?? 'Aangina') . ' customer support in Dhaka, Bangladesh.')

@section('content')
@php
    $contact = $storeConfig['storeContactInfo'] ?? [];
    $phone = $contact['phone'] ?? '+880 17XX-XXXXXX';
    $phoneRaw = $contact['phoneRaw'] ?? '01700000000';
    $whatsappNumber = $contact['whatsappNumber'] ?? '8801700000000';
    $supportHours = $contact['supportHours'] ?? 'Daily, 10:00 AM – 10:00 PM';
    $email = $contact['email'] ?? 'support@aangina.com.bd';
    $location = $contact['location'] ?? 'Dhaka, Bangladesh';
    $waUrl = 'https://wa.me/' . $whatsappNumber . '?text=' . rawurlencode('Assalamu Alaikum! I have an inquiry regarding ' . ($storeConfig['brandName'] ?? 'Aangina') . ' sarees.');
@endphp

<div
    x-data="{
        name: '',
        mobile: '',
        email: '',
        message: '',
        errors: {},

        submitInquiry() {
            const errs = {};
            if (!this.name.trim()) {
                errs.name = 'Please enter your name';
            }
            const cleanedPhone = this.mobile.replace(/[\s\-()]/g, '').replace(/^\+?88/, '');
            if (!/^01[3-9][0-9]{8}$/.test(cleanedPhone)) {
                errs.mobile = 'Please enter a valid 11-digit Bangladesh mobile number (01XXXXXXXXX)';
            }
            if (this.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email.trim())) {
                errs.email = 'Please enter a valid email address';
            }
            if (!this.message.trim()) {
                errs.message = 'Please enter your question or saree SKU inquiry';
            }

            this.errors = errs;
            if (Object.keys(errs).length > 0) {
                return;
            }

            this.name = '';
            this.mobile = '';
            this.email = '';
            this.message = '';
            this.$store.toast.show('Message sent! Our team will contact you shortly ✓', 'success');
        }
    }"
    class="py-8 sm:py-14 px-4 sm:px-6"
>
    <div class="max-w-[1024px] mx-auto">
        {{-- Breadcrumb & Top Header --}}
        <nav aria-label="Breadcrumb" class="mb-4">
            <ol class="flex items-center gap-1.5 text-[13px] text-text-muted">
                <li>
                    <a href="{{ route('home') }}" class="hover:text-brand-primary transition-colors">Home</a>
                </li>
                <li aria-hidden="true" class="text-border-subtle">/</li>
                <li class="text-text-primary font-medium" aria-current="page">Contact Us</li>
            </ol>
        </nav>

        <div class="max-w-[60ch]">
            <h1 class="type-h1 text-brand-primary">Get in Touch</h1>
            <p class="mt-2 type-body text-text-muted">
                Have a question about a saree, fabric weave, or delivery? Our team in Dhaka is happy to help.
            </p>
        </div>

        {{-- 2-Column Desktop / Stacked Mobile Layout (45% Left Support Channels / 55% Right Form) --}}
        <div class="mt-8 grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 items-start">

            {{-- LEFT COLUMN (45% / 5 Cols): Direct Support Channels --}}
            <div class="lg:col-span-5 bg-surface border border-border-subtle p-5 sm:p-7 space-y-6">
                <div>
                    <span class="type-overline text-brand-primary block">Direct Support</span>
                    <h2 class="type-h3 text-text-primary mt-0.5">Speak With Our Boutique Team</h2>
                </div>

                <div class="space-y-4 divide-y divide-border-subtle text-[14px]">
                    {{-- Call / Helpline --}}
                    <div class="pt-1">
                        <div class="text-[12px] font-semibold uppercase tracking-wider text-text-muted">
                            Call / Helpline
                        </div>
                        <a href="tel:{{ $phoneRaw }}" class="mt-1 block text-[17px] font-bold text-brand-primary hover:underline">
                            {{ $phone }}
                        </a>
                        <div class="mt-0.5 text-[12px] text-text-muted">
                            Support Hours: {{ $supportHours }}
                        </div>
                    </div>

                    {{-- Email --}}
                    <div class="pt-4">
                        <div class="text-[12px] font-semibold uppercase tracking-wider text-text-muted">
                            Customer Care Email
                        </div>
                        <a href="mailto:{{ $email }}" class="mt-1 block text-[15px] font-semibold text-text-primary hover:text-brand-primary transition-colors">
                            {{ $email }}
                        </a>
                    </div>

                    {{-- Location --}}
                    <div class="pt-4">
                        <div class="text-[12px] font-semibold uppercase tracking-wider text-text-muted">
                            Boutique Operations
                        </div>
                        <div class="mt-1 text-[15px] font-semibold text-text-primary">
                            {{ $location }}
                        </div>
                        <p class="mt-0.5 text-[12px] text-text-muted">
                            Nationwide doorstep delivery across all 64 districts of Bangladesh.
                        </p>
                    </div>
                </div>

                {{-- WhatsApp Instant Chat Button --}}
                <div class="pt-2">
                    <a
                        href="{{ $waUrl }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="btn-primary w-full"
                    >
                        CHAT ON WHATSAPP →
                    </a>
                </div>
            </div>

            {{-- RIGHT COLUMN (55% / 7 Cols): Simple Inquiry Form --}}
            <div class="lg:col-span-7 bg-surface border border-border-subtle p-5 sm:p-7">
                <div>
                    <span class="type-overline text-brand-primary block">Send an Inquiry</span>
                    <h2 class="type-h3 text-text-primary mt-0.5">Ask About a Saree or Order</h2>
                </div>

                <form @submit.prevent="submitInquiry()" novalidate class="mt-5 space-y-4">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="contact-name" class="label-base">
                                Your Name <span class="text-state-error">*</span>
                            </label>
                            <input
                                id="contact-name"
                                type="text"
                                x-model="name"
                                placeholder="Enter your full name"
                                class="input-base"
                                :class="errors.name ? 'input-error' : ''"
                            >
                            <p x-show="errors.name" x-text="errors.name" class="mt-1 text-[12px] text-state-error"></p>
                        </div>

                        <div>
                            <label for="contact-mobile" class="label-base">
                                Mobile Number <span class="text-state-error">*</span>
                            </label>
                            <input
                                id="contact-mobile"
                                type="tel"
                                x-model="mobile"
                                placeholder="01XXXXXXXXX"
                                class="input-base"
                                :class="errors.mobile ? 'input-error' : ''"
                            >
                            <p x-show="errors.mobile" x-text="errors.mobile" class="mt-1 text-[12px] text-state-error"></p>
                        </div>
                    </div>

                    <div>
                        <label for="contact-email" class="label-base">
                            Email Address <span class="text-text-muted font-normal">(Optional)</span>
                        </label>
                        <input
                            id="contact-email"
                            type="email"
                            x-model="email"
                            placeholder="yourname@example.com (Optional)"
                            class="input-base"
                            :class="errors.email ? 'input-error' : ''"
                        >
                        <p x-show="errors.email" x-text="errors.email" class="mt-1 text-[12px] text-state-error"></p>
                    </div>

                    <div>
                        <label for="contact-message" class="label-base">
                            Message / Saree SKU Inquiry <span class="text-state-error">*</span>
                        </label>
                        <textarea
                            id="contact-message"
                            rows="4"
                            x-model="message"
                            placeholder="Tell us the saree name, SKU (e.g. ANG-JM-101), or Order ID (#ANG-XXXX) you need assistance with..."
                            class="w-full p-3.5 bg-main border border-border-subtle text-[16px] lg:text-[15px] text-text-primary placeholder:text-text-muted focus:border-brand-primary focus:outline-none"
                            :class="errors.message ? 'border-state-error border-[1.5px]' : ''"
                        ></textarea>
                        <p x-show="errors.message" x-text="errors.message" class="mt-1 text-[12px] text-state-error"></p>
                    </div>

                    <div class="pt-1">
                        <button type="submit" class="btn-primary w-full sm:w-auto px-9">
                            SEND MESSAGE
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection