{{#
    @name Page Builder: Contact Form & Studio Hub
    @desc Full booking inquiry form with live studio details, hours, and interactive map
#}}

<section class="py-16 sm:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start">
        
        {{# Left: Contact / Enquiry Form #}}
        <div class="lg:col-span-7 bg-white rounded-3xl p-8 sm:p-10 border border-neutral-200/90 shadow-md">
            
            <div class="mb-8">
                <h2 class="font-serif text-2xl sm:text-3xl font-bold text-neutral-900 mb-2">
                    {{ form_title ?? 'Book an Appointment or Enquire' }}
                </h2>
                <p class="text-neutral-500 text-sm">
                    {{ form_lead ?? 'Please fill in the details below and Victoria will be in touch promptly to confirm your booking.' }}
                </p>
            </div>

            {{ form:contact id="contact-form" }}

                {{ if success }}
                    <div class="p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm font-medium mb-6">
                        Thank you for your enquiry! Victoria will review your request and be in touch shortly.
                    </div>
                {{ /if }}

                {{ if errors }}
                    <div class="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-sm mb-6">
                        <span class="font-bold">Please check the following errors:</span>
                        <ul class="list-disc pl-5 mt-2 space-y-1">
                            {{ errors }}
                                <li>{{ value }}</li>
                            {{ /errors }}
                        </ul>
                    </div>
                {{ /if }}

                {{# Honeypot spam protection #}}
                <div class="hidden">
                    <label for="{{ honeypot }}">{{ honeypot }}</label>
                    <input type="text" name="{{ honeypot }}" id="{{ honeypot }}" value="" />
                </div>

                <div class="space-y-5">
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        {{# Name #}}
                        <div>
                            <label for="field-name" class="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                                Full Name <span class="text-rose-500">*</span>
                            </label>
                            <input 
                                type="text" 
                                name="name" 
                                id="field-name" 
                                value="{{ old:name }}"
                                required 
                                placeholder="Your Name"
                                class="w-full px-4 py-3 rounded-xl border border-neutral-300 focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none text-sm transition-all"
                            />
                        </div>

                        {{# Email #}}
                        <div>
                            <label for="field-email" class="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                                Email Address <span class="text-rose-500">*</span>
                            </label>
                            <input 
                                type="email" 
                                name="email" 
                                id="field-email" 
                                value="{{ old:email }}"
                                required 
                                placeholder="name@example.com"
                                class="w-full px-4 py-3 rounded-xl border border-neutral-300 focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none text-sm transition-all"
                            />
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        {{# Phone #}}
                        <div>
                            <label for="field-telephone" class="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                                Telephone Number <span class="text-rose-500">*</span>
                            </label>
                            <input 
                                type="tel" 
                                name="telephone" 
                                id="field-telephone" 
                                value="{{ old:telephone }}"
                                required 
                                placeholder="07720 772978"
                                class="w-full px-4 py-3 rounded-xl border border-neutral-300 focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none text-sm transition-all"
                            />
                        </div>

                        {{# Treatment Interest #}}
                        <div>
                            <label for="field-treatment_interest" class="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                                Treatment Interest
                            </label>
                            <select 
                                name="treatment_interest" 
                                id="field-treatment_interest"
                                class="w-full px-4 py-3 rounded-xl border border-neutral-300 focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none text-sm transition-all bg-white"
                            >
                                <option value="general">General Enquiry / Consultation</option>
                                <option value="caci" {{ (get:service | lower | contains('caci')) ? 'selected' : '' }}>CACI Synergy Non-Surgical Facial</option>
                                <option value="linda_meredith" {{ (get:service | lower | contains('linda')) ? 'selected' : '' }}>Linda Meredith Haute Couture Facial</option>
                                <option value="foundation_signature" {{ (get:service | lower | contains('signature')) ? 'selected' : '' }}>The Foundation Signature Anti-Ageing Facial</option>
                                <option value="bee_venom" {{ (get:service | lower | contains('bee')) ? 'selected' : '' }}>Heaven Bee Venom Facial</option>
                                <option value="body" {{ (get:service | lower | contains('body') or get:service | lower | contains('massage')) ? 'selected' : '' }}>Body Massage &amp; Exfoliation Rituals</option>
                                <option value="makeup" {{ (get:service | lower | contains('makeup')) ? 'selected' : '' }}>Jane Iredale Mineral Makeup / Bridal</option>
                                <option value="nails" {{ (get:service | lower | contains('nail') or get:service | lower | contains('pedicure')) ? 'selected' : '' }}>Luxury Manicure &amp; Pedicure / Shellac</option>
                                <option value="waxing_lashes" {{ (get:service | lower | contains('wax') or get:service | lower | contains('lash')) ? 'selected' : '' }}>Lashes, Brows &amp; Waxing</option>
                                <option value="voucher">Gift Voucher Purchase</option>
                            </select>
                        </div>
                    </div>

                    {{# Message #}}
                    <div>
                        <label for="field-message_body" class="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                            Appointment Preferences / Message <span class="text-rose-500">*</span>
                        </label>
                        <textarea 
                            name="message_body" 
                            id="field-message_body" 
                            rows="4" 
                            required
                            placeholder="Please let us know your preferred dates, times, or any specific skin concerns..."
                            class="w-full px-4 py-3 rounded-xl border border-neutral-300 focus:border-accent focus:ring-2 focus:ring-accent/20 outline-none text-sm transition-all"
                        >{{ old:message_body }}</textarea>
                    </div>

                    {{# Consent Checkbox #}}
                    <div class="pt-2">
                        <label class="flex items-start gap-3 cursor-pointer">
                            <input 
                                type="checkbox" 
                                name="consent" 
                                value="true"
                                required
                                class="mt-1 w-4 h-4 rounded text-accent focus:ring-accent border-neutral-300"
                            />
                            <span class="text-xs text-neutral-600 leading-normal">
                                I am happy to receive a response regarding my enquiry. We treat your personal data with complete confidentiality in accordance with our <a href="/privacy-policy" class="text-neutral-900 underline hover:text-accent-dark">Privacy Policy</a>.
                            </span>
                        </label>
                    </div>

                    {{# Submit Button #}}
                    <div class="pt-3">
                        <button 
                            type="submit" 
                            class="w-full sm:w-auto px-8 py-3.5 rounded-full bg-primary hover:bg-primary-hover text-white text-sm font-semibold tracking-wide uppercase transition-all shadow-sm hover:scale-[1.01]"
                        >
                            Send Appointment Enquiry
                        </button>
                    </div>

                </div>

            {{ /form:contact }}

        </div>

        {{# Right: Studio Information, Map, and Vouchers #}}
        {{ if show_studio_details }}
            <div class="lg:col-span-5 space-y-8">
                
                {{# Studio Direct Contact Box #}}
                <div class="bg-surface-sand/40 border border-neutral-200/80 rounded-3xl p-8 shadow-2xs">
                    <h3 class="font-serif text-xl font-bold text-neutral-900 mb-6">
                        Studio Information
                    </h3>

                    <ul class="space-y-5 text-sm">
                        <li class="flex items-start gap-3.5">
                            <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-accent-dark shrink-0 shadow-2xs">
                                <svg class="w-4 h-4" 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>
                                <div class="font-semibold text-neutral-900">Address</div>
                                <div class="text-neutral-600 mt-0.5 leading-relaxed">
                                    {{ company:address_street }}<br>
                                    {{ company:address_city }}, {{ company:address_county }}<br>
                                    {{ company:address_postcode }}
                                </div>
                                <a 
                                    href="{{ company:google_maps_url }}" 
                                    target="_blank" 
                                    rel="noopener noreferrer" 
                                    class="text-xs font-semibold text-accent-dark hover:text-neutral-900 mt-1 inline-block transition-colors"
                                >
                                    Get Directions &rarr;
                                </a>
                            </div>
                        </li>

                        <li class="flex items-start gap-3.5 pt-4 border-t border-neutral-200/70">
                            <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-accent-dark shrink-0 shadow-2xs">
                                <svg class="w-4 h-4" 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>
                                <div class="font-semibold text-neutral-900">Direct Telephone</div>
                                <a 
                                    href="tel:{{ company:telephone_clean }}" 
                                    class="text-neutral-700 hover:text-accent-dark font-medium mt-0.5 inline-block transition-colors"
                                >
                                    {{ company:telephone }}
                                </a>
                                <div class="text-2xs text-neutral-500 mt-0.5">Calls &amp; WhatsApp appointment requests</div>
                            </div>
                        </li>

                        <li class="flex items-start gap-3.5 pt-4 border-t border-neutral-200/70">
                            <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-accent-dark shrink-0 shadow-2xs">
                                <svg class="w-4 h-4" 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>
                                <div class="font-semibold text-neutral-900">Email</div>
                                <a 
                                    href="mailto:{{ company:email }}" 
                                    class="text-neutral-700 hover:text-accent-dark font-medium mt-0.5 inline-block transition-colors text-xs sm:text-sm break-all"
                                >
                                    {{ company:email }}
                                </a>
                            </div>
                        </li>

                        <li class="flex items-start gap-3.5 pt-4 border-t border-neutral-200/70">
                            <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-accent-dark shrink-0 shadow-2xs">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </div>
                            <div class="w-full">
                                <div class="font-semibold text-neutral-900 mb-2">Opening Hours</div>
                                <div class="space-y-1 text-xs">
                                    {{ company:opening_hours }}
                                        <div class="flex items-center justify-between py-0.5 {{ is_open ? 'text-neutral-700' : 'text-neutral-400' }}">
                                            <span class="font-medium">{{ day }}</span>
                                            <span>{{ hours }}</span>
                                        </div>
                                    {{ /company:opening_hours }}
                                </div>
                                <p class="text-2xs text-neutral-500 italic mt-2.5">
                                    {{ company:opening_hours_note }}
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>

                {{# SumUp Vouchers Card #}}
                {{ if show_vouchers_box }}
                    {{ partial:components/voucher_card }}
                {{ /if }}

                {{# Google Maps Embed #}}
                <div class="rounded-3xl overflow-hidden border border-neutral-200/80 shadow-2xs h-64 bg-neutral-100">
                    <iframe 
                        src="{{ company:google_maps_embed_url }}" 
                        width="100%" 
                        height="100%" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade"
                        title="The Foundation Beauty Studio Location"
                    ></iframe>
                </div>

            </div>
        {{ /if }}

    </div>
</section>