@extends('layouts.app')

@section('title', 'Contact | Saritha Aravinda')

@section('content')
<section class="section-space">
    <div class="shell">
        <div class="grid gap-16 lg:grid-cols-12 lg:gap-10 xl:gap-20">
            <div class="lg:col-span-5 lg:pr-8" data-reveal>
                <x-section-eyebrow>Get In Touch</x-section-eyebrow>
                <h1 class="display-2 max-w-3xl">Let’s talk about what you’re really looking for.</h1>
                <p class="body-lg mt-8 max-w-xl">A thoughtful decision starts with an honest conversation. Share what you’re considering, what matters most, and where you need clarity.</p>

                <div class="mt-14 border-t border-grey-200 sm:mt-20">
                    <div class="grid grid-cols-[3rem_1fr] gap-5 border-b border-grey-200 py-9">
                        <span class="pt-1 text-xs font-semibold tracking-[.16em] text-grey-400">01</span>
                        <div>
                            <p class="font-display text-xl">Tell me where you are</p>
                            <p class="mt-1 text-sm leading-6 text-grey-600">A few details help make our first conversation useful.</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-[3rem_1fr] gap-5 border-b border-grey-200 py-9">
                        <span class="pt-1 text-xs font-semibold tracking-[.16em] text-grey-400">02</span>
                        <div>
                            <p class="font-display text-xl">Expect a personal response</p>
                            <p class="mt-1 text-sm leading-6 text-grey-600">I’ll review your note and get back to you within two business days.</p>
                        </div>
                    </div>
                </div>

                <div class="mt-10 grid gap-6 text-sm sm:grid-cols-2">
                    <div>
                        <p class="text-[10px] font-semibold uppercase tracking-[.18em] text-grey-400">Write directly</p>
                        <a href="mailto:hello@sarithaaravinda.com" class="mt-2 inline-block break-all border-b border-grey-400 pb-1 transition hover:border-ink">hello@sarithaaravinda.com</a>
                    </div>
                    <div>
                        <p class="text-[10px] font-semibold uppercase tracking-[.18em] text-grey-400">Based in</p>
                        <p class="mt-2">Bengaluru, Karnataka</p>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-7 lg:border-l lg:border-grey-200 lg:pl-16" data-reveal x-data="contactForm()">
                <span class="text-xs font-semibold uppercase tracking-[.16em] text-grey-400">Private Enquiry</span>
                <h2 class="mt-3 font-display text-3xl leading-tight sm:text-4xl">Start a conversation</h2>

                <form class="mt-10 border-t border-grey-200 pt-10" @submit.prevent="submit" novalidate>
                    <div x-show="success" x-cloak class="mb-8 border-l-2 border-ink bg-grey-100 px-5 py-4 text-sm leading-6" role="status" x-text="success"></div>
                    <div x-show="generalError" x-cloak class="mb-8 border-l-2 border-red-700 bg-red-50 px-5 py-4 text-sm text-red-800" role="alert" x-text="generalError"></div>

                    <div class="grid gap-x-8 sm:grid-cols-2">
                        @foreach([['name', 'Your name', 'text', 'e.g. Ananya Rao', true], ['email', 'Email address', 'email', 'you@example.com', true], ['phone', 'Phone number', 'tel', '+91 98765 43210', false]] as [$name, $label, $type, $placeholder, $required])
                            <div class="group mb-8 {{ $name === 'phone' ? 'sm:col-span-2' : '' }}">
                                <label for="{{ $name }}" class="mb-2 flex items-center justify-between text-xs font-semibold uppercase tracking-[.15em] text-grey-600">
                                    <span>{{ $label }} @if($required)<span class="text-red-600" aria-hidden="true">*</span>@endif</span>
                                    @if(!$required)<span class="font-normal normal-case tracking-normal text-grey-400">Optional</span>@endif
                                </label>
                                <input
                                    id="{{ $name }}"
                                    name="{{ $name }}"
                                    type="{{ $type }}"
                                    placeholder="{{ $placeholder }}"
                                    x-model="form.{{ $name }}"
                                    @if($required) required aria-required="true" @endif
                                    :aria-invalid="Boolean(errors.{{ $name }})"
                                    :aria-describedby="errors.{{ $name }} ? '{{ $name }}-error' : null"
                                    class="w-full border-0 border-b border-grey-400 bg-transparent px-0 py-3 text-lg placeholder:text-grey-400/70 focus:border-ink focus:ring-0"
                                >
                                <p id="{{ $name }}-error" x-show="errors.{{ $name }}" x-cloak x-text="errors.{{ $name }}?.[0]" class="mt-2 text-base text-red-700"></p>
                            </div>
                        @endforeach
                    </div>

                    <div class="mb-8">
                        <label for="interest" class="mb-2 flex items-center justify-between text-xs font-semibold uppercase tracking-[.15em] text-grey-600">
                            <span>What can I help with? <span class="text-red-600" aria-hidden="true">*</span></span>
                        </label>
                        <div class="relative">
                            <select
                                id="interest"
                                name="interest"
                                x-model="form.interest"
                                required
                                aria-required="true"
                                :aria-invalid="Boolean(errors.interest)"
                                :aria-describedby="errors.interest ? 'interest-error' : null"
                                class="w-full appearance-none border-0 border-b border-grey-400 bg-transparent px-0 py-3 text-lg focus:border-ink focus:ring-0"
                                :class="form.interest === '' ? 'text-grey-400/70' : 'text-ink'"
                            >
                                <option value="" disabled>Select an option</option>
                                @foreach(['Residential', 'Commercial Leasing', 'Commercial Real Estate', 'NRI Advisory', 'Other'] as $option)
                                    <option value="{{ $option }}">{{ $option }}</option>
                                @endforeach
                            </select>
                            <svg aria-hidden="true" viewBox="0 0 12 8" fill="none" class="pointer-events-none absolute right-0 top-1/2 h-2 w-3 -translate-y-1/2 text-grey-400">
                                <path d="M1 1.25 6 6.25l5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <p id="interest-error" x-show="errors.interest" x-cloak x-text="errors.interest?.[0]" class="mt-2 text-base text-red-700"></p>
                    </div>

                    <div class="mb-9">
                        <div class="mb-2 flex items-center justify-between">
                            <label for="message" class="text-xs font-semibold uppercase tracking-[.15em] text-grey-600">A little context <span class="text-red-600" aria-hidden="true">*</span></label>
                            <span class="text-xs tracking-wide text-grey-400" x-text="`${form.message.length} / 3000`"></span>
                        </div>
                        <textarea
                            id="message"
                            name="message"
                            rows="5"
                            maxlength="3000"
                            placeholder="What are you exploring, and what would a good outcome look like?"
                            x-model="form.message"
                            required
                            aria-required="true"
                            :aria-invalid="Boolean(errors.message)"
                            :aria-describedby="errors.message ? 'message-error' : null"
                            class="w-full resize-y border border-grey-200 bg-ivory p-4 text-lg leading-8 placeholder:text-grey-400/70 focus:border-ink focus:ring-0"
                        ></textarea>
                        <p id="message-error" x-show="errors.message" x-cloak x-text="errors.message?.[0]" class="mt-2 text-base text-red-700"></p>
                    </div>

                    <div class="flex flex-col gap-5 border-t border-grey-200 pt-7 sm:flex-row sm:items-center sm:justify-between">
                        <p class="max-w-xs text-sm leading-6 text-grey-600">Your details are treated with care and used only to respond to your enquiry.</p>
                        <button type="submit" :disabled="loading" class="group inline-flex min-w-48 items-center justify-between gap-6 bg-ink px-7 py-4 text-sm font-semibold uppercase tracking-[.13em] text-white transition hover:bg-charcoal disabled:cursor-wait disabled:opacity-60">
                            <span x-text="loading ? 'Sending…' : 'Send enquiry'"></span>
                            <span class="text-base transition-transform group-hover:translate-x-1" aria-hidden="true">→</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<script>
    function contactForm() {
        return {
            loading: false,
            success: '',
            generalError: '',
            errors: {},
            form: { name: '', email: '', phone: '', interest: '', message: '' },

            async submit() {
                this.loading = true;
                this.success = '';
                this.errors = {};
                this.generalError = '';

                try {
                    const response = await fetch('{{ route('contact.store') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                        },
                        body: JSON.stringify(this.form),
                    });
                    const data = await response.json();

                    if (response.status === 422) {
                        this.errors = data.errors || {};
                        return;
                    }

                    if (!response.ok) throw new Error();

                    this.success = data.message;
                    this.form = { name: '', email: '', phone: '', interest: '', message: '' };
                } catch (error) {
                    this.generalError = 'Something went wrong. Please try again or email us directly.';
                } finally {
                    this.loading = false;
                }
            },
        };
    }
</script>
@endsection