@extends('layouts.app')

@section('title', 'Contact Auravista | Get a Quote')
@section('meta_description', 'Contact Auravista about your private-label skin care, hair care, or personal-care requirements.')

@section('content')
<main class="overflow-hidden bg-white text-[#1f3443]" data-page-contact>
    <section class="relative bg-[#f7f1ea] pb-14 pt-28 sm:pb-16 sm:pt-32 lg:pb-20 lg:pt-32">
        <div class="pointer-events-none absolute inset-0 [background:radial-gradient(circle_at_75%_20%,rgba(187,122,88,.16),transparent_28%)]" aria-hidden="true"></div>
        <div class="relative mx-auto grid max-w-[1400px] gap-12 px-5 md:px-10 lg:grid-cols-[.95fr_1.05fr] lg:items-center lg:px-16">
            <div data-inner-stagger>
                <p class="inner-eyebrow">Contact us</p>
                <h1 class="inner-display mt-6 max-w-[10ch]">Tell us what you want the range to become.</h1>
                <p class="mt-6 max-w-xl text-base leading-8 text-[#40261a]/70">Share the product direction, business context, and where you are in the process. A fully finalized brief is not required.</p>
                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="#project-form" class="inner-button">Send an enquiry</a>
                    <a href="{{ route('products') }}" class="inner-button inner-button-outline">Explore products</a>
                </div>
            </div>
            <div class="relative pb-7" data-inner-image>
                <div class="ml-auto h-[22rem] w-[88%] overflow-hidden rounded-[1.8rem] sm:h-[24rem] xl:h-[26rem]">
                    <img src="{{ asset('images/inner-pages/contact-banner.webp') }}" alt="Personal-care bottles arranged with natural ingredients" width="1400" height="1100" fetchpriority="high" class="h-full w-full object-cover" data-inner-parallax>
                </div>
                <aside class="absolute bottom-0 left-0 max-w-[18rem] rounded-[1.25rem] border border-[#1f3443]/10 bg-white p-5">
                    <p class="text-xs uppercase tracking-[.14em] text-[#b86f45]">Useful starting context</p>
                    <p class="mt-3 text-sm leading-6 text-[#40261a]/68">Category · business type · project stage · target timing</p>
                </aside>
            </div>
        </div>
    </section>

    <section class="border-y border-[#1f3443]/10 bg-white py-16 lg:py-20" aria-labelledby="contact-path-heading">
        <div class="mx-auto max-w-[1400px] px-5 md:px-10 lg:px-16">
            <div class="grid gap-8 lg:grid-cols-[.65fr_1.35fr] lg:items-end" data-inner-reveal>
                <div><p class="inner-eyebrow">How projects begin</p><h2 id="contact-path-heading" class="mt-5 max-w-[10ch] text-4xl leading-none tracking-[-.05em]">From first context to a clearer next step.</h2></div>
                <p class="max-w-xl text-sm leading-7 text-[#40261a]/62 lg:justify-self-end">The first exchange is designed to establish direction—not to assume every development decision has already been made.</p>
            </div>
            <ol class="mt-10 grid gap-3 md:grid-cols-3" data-inner-stagger>
                @foreach([
                    ['Share the direction', 'Tell us the product, category, customer, or range idea you want to explore.'],
                    ['Review the requirements', 'Bring product and packaging context together around the actual business need.'],
                    ['Define the next stage', 'Establish the most useful route into product review, refinement, or preparation.'],
                ] as $index => $step)
                    <li class="relative overflow-hidden rounded-[1.25rem] border border-[#1f3443]/10 bg-[#f7f1ea] p-6">
                        <span class="absolute right-4 top-2 font-[var(--font-heading)] text-6xl font-semibold tracking-[-.08em] text-[#1f3443]/6" aria-hidden="true">0{{ $index + 1 }}</span>
                        <p class="text-xs font-semibold tracking-[.13em] text-[#b86f45]">0{{ $index + 1 }}</p><h3 class="mt-8 text-xl">{{ $step[0] }}</h3><p class="mt-3 text-sm leading-7 text-[#40261a]/62">{{ $step[1] }}</p>
                    </li>
                @endforeach
            </ol>
        </div>
    </section>

    <section id="project-form" class="contact-project scroll-mt-24 py-20 lg:py-28">
        <div class="mx-auto max-w-[1400px] px-5 md:px-10 lg:px-16">
            <div class="mb-10 grid gap-6 lg:grid-cols-[1fr_.7fr] lg:items-end" data-inner-reveal>
                <div>
                    <p class="inner-eyebrow">Contact us</p>
                    <h2 class="mt-5 max-w-[12ch] text-4xl leading-none tracking-[-.05em] sm:text-5xl">Give us the useful outline.</h2>
                </div>
                <p class="max-w-xl text-sm leading-7 text-[#40261a]/65 lg:justify-self-end">A focused outline gives us a better view of your product, packaging, and development needs. You do not need every decision finalized.</p>
            </div>

            <div class="grid items-start gap-7 lg:grid-cols-[minmax(0,1fr)_22rem]">
                <div class="contact-form-card" data-inner-reveal>
                    <div class="contact-form-card__header">
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-[.14em] text-[#b86f45]">Confidential project outline</p>
                            <h3 class="mt-2 text-2xl tracking-[-.04em]">Tell us about your enquiry.</h3>
                        </div>
                        <span class="contact-form-card__time">About 2 minutes</span>
                    </div>

                    @if($selectedProduct)
                        <div class="contact-selected-product" data-selected-product>
                            <img src="{{ asset($selectedProduct['primary_image']) }}" alt="" width="72" height="72" class="h-[4.5rem] w-[4.5rem] rounded-[1rem] object-cover">
                            <div class="min-w-0 flex-1">
                                <p class="text-[.68rem] font-semibold uppercase tracking-[.14em] text-[#b86f45]">Selected product</p>
                                <p class="mt-1 truncate font-medium">{{ $selectedProduct['name'] }}</p>
                                <p class="mt-1 text-xs text-[#40261a]/52">This product will be included in your enquiry context.</p>
                            </div>
                            <span class="hidden h-9 w-9 items-center justify-center rounded-full bg-[#1f3443] text-white sm:inline-flex" aria-hidden="true">✓</span>
                        </div>
                    @endif

                    @if(session('contact_status'))
                        <div class="mx-6 mt-6 rounded-[1rem] border border-[#8c9875]/30 bg-[#8c9875]/10 px-4 py-3 text-sm text-[#1f3443]" role="status">
                            {{ session('contact_status') }}
                        </div>
                    @endif

                    <form action="{{ route('contact.submit') }}" method="POST" aria-describedby="form-status" data-contact-brief-form>
                        @csrf
                        <fieldset class="contact-form-group">
                            <div class="grid gap-x-5 gap-y-1 sm:grid-cols-2">
                                <div class="form-field"><label for="name">Name <span class="required-mark">Required</span></label><input id="name" name="name" type="text" value="{{ old('name') }}" autocomplete="name" placeholder="Your full name" required aria-describedby="name_error" @error('name') aria-invalid="true" @enderror><p id="name_error" class="form-error" aria-live="polite">@error('name'){{ $message }}@enderror</p></div>
                                <div class="form-field"><label for="email">Email <span class="required-mark">Required</span></label><input id="email" name="email" type="email" value="{{ old('email') }}" autocomplete="email" placeholder="name@company.com" required aria-describedby="email_error" @error('email') aria-invalid="true" @enderror><p id="email_error" class="form-error" aria-live="polite">@error('email'){{ $message }}@enderror</p></div>
                                <div class="form-field"><label for="phone">Phone <span class="required-mark">Required</span></label><input id="phone" name="phone" type="tel" value="{{ old('phone') }}" autocomplete="tel" placeholder="Country code and number" required aria-describedby="phone_error" @error('phone') aria-invalid="true" @enderror><p id="phone_error" class="form-error" aria-live="polite">@error('phone'){{ $message }}@enderror</p></div>
                                <div class="form-field"><label for="city">City <span class="required-mark">Required</span></label><input id="city" name="city" type="text" value="{{ old('city') }}" autocomplete="address-level2" placeholder="Your city" required aria-describedby="city_error" @error('city') aria-invalid="true" @enderror><p id="city_error" class="form-error" aria-live="polite">@error('city'){{ $message }}@enderror</p></div>
                                <div class="form-field sm:col-span-2">
                                    <label for="enquiry_for">Enquiry for <span class="required-mark">Required</span></label>
                                    <select id="enquiry_for" name="enquiry_for" required aria-describedby="enquiry_for_error">
                                        <option value="">Select enquiry type</option>
                                        <option value="skin-care" @selected(old('enquiry_for') === 'skin-care')>Skin Care</option>
                                        <option value="hair-care" @selected(old('enquiry_for') === 'hair-care')>Hair Care</option>
                                        <option value="personal-care" @selected(old('enquiry_for') === 'personal-care')>Personal Care</option>
                                        <option value="private-label-range" @selected(old('enquiry_for') === 'private-label-range' || (!old('enquiry_for') && $selectedProduct))>Specific product / private-label range</option>
                                        <option value="packaging" @selected(old('enquiry_for') === 'packaging')>Packaging and presentation</option>
                                        <option value="other" @selected(old('enquiry_for') === 'other')>Other enquiry</option>
                                    </select>
                                    <p id="enquiry_for_error" class="form-error" aria-live="polite">@error('enquiry_for'){{ $message }}@enderror</p>
                                </div>
                                <div class="form-field sm:col-span-2"><label for="message">Message <span class="required-mark">Required</span></label><textarea id="message" name="message" rows="4" class="contact-message" required placeholder="Tell us briefly what you would like to discuss." aria-describedby="message_error" @error('message') aria-invalid="true" @enderror>{{ old('message') }}</textarea><p id="message_error" class="form-error" aria-live="polite">@error('message'){{ $message }}@enderror</p></div>
                            </div>
                        </fieldset>

                        @if($selectedProduct)<input type="hidden" name="product_slug" value="{{ $selectedProduct['slug'] }}">@endif

                        <div class="contact-form-submit">
                            <div class="flex max-w-md items-start gap-3">
                                <span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#f7f1ea] text-[#b86f45]" aria-hidden="true">i</span>
                                <p id="form-status" class="text-xs leading-5 text-[#40261a]/58">Your details are used only to review and respond to this project enquiry.</p>
                            </div>
                            <button type="submit" class="inner-button contact-submit-button">Submit enquiry <span aria-hidden="true">→</span></button>
                        </div>
                    </form>
                </div>

                <aside class="space-y-5 lg:sticky lg:top-28" data-inner-reveal>
                    <div class="contact-support-card">
                        <p class="text-xs font-semibold uppercase tracking-[.15em] text-[#e5ad8d]">Help us prepare</p>
                        <h3 class="mt-5 text-2xl leading-tight">Context makes the first conversation more useful.</h3>
                        <ul class="mt-6 divide-y divide-white/12 border-y border-white/12 text-sm text-white/72">
                            <li class="flex gap-3 py-4"><span class="text-[#e5ad8d]">01</span><span>Target customer and route to market</span></li>
                            <li class="flex gap-3 py-4"><span class="text-[#e5ad8d]">02</span><span>Priority products or categories</span></li>
                            <li class="flex gap-3 py-4"><span class="text-[#e5ad8d]">03</span><span>Current packaging decisions</span></li>
                            <li class="flex gap-3 py-4"><span class="text-[#e5ad8d]">04</span><span>Project stage and timing direction</span></li>
                        </ul>
                        <a href="mailto:hello@auravista.com" class="mt-7 inline-flex min-h-11 items-center gap-2 border-b border-white/25 text-sm text-white">hello@auravista.com <span aria-hidden="true">↗</span></a>
                    </div>
                    <div class="rounded-[1.4rem] border border-[#1f3443]/10 bg-white/70 p-6">
                        <p class="text-xs uppercase tracking-[.14em] text-[#b86f45]">Product categories</p>
                        <p class="mt-3 text-sm leading-7 text-[#40261a]/68">Skin Care · Hair Care · Personal Care · Coordinated ranges</p>
                    </div>
                </aside>
            </div>
        </div>
    </section>

    <section class="bg-[#1f3443] py-16 text-[#f6f0e8] sm:py-20">
        <div class="mx-auto max-w-[1400px] px-5 text-center md:px-10 lg:px-16" data-inner-reveal>
            <p class="text-xs uppercase tracking-[.16em] text-[#e5ad8d]">A useful first step</p>
            <h2 class="mx-auto mt-5 max-w-[18ch] text-4xl leading-none tracking-[-.05em] sm:text-5xl">Your brief can still be taking shape when the conversation starts.</h2>
        </div>
    </section>
</main>
@endsection