@extends('storefront.layout')

@section('title', 'Contact')
@section('description', 'Reach out to Vida Mansa USA for account support and questions about our product line.')

@section('content')
@php
    $contactEmail = trim((string) config('checkout.support_email', 'retailpartner@vidamansausa.com')) ?: 'retailpartner@vidamansausa.com';
    $address = '1952 NW 93rd Avenue, Doral, Miami, FL 33172, USA';
@endphp

{{-- Page header --}}
<section class="bg-white border-b border-stone-200">
    <div class="max-w-6xl mx-auto px-6 lg:px-8 py-14">
        <p class="text-xs uppercase tracking-[0.2em] text-emerald-700 font-medium mb-3">Get in touch</p>
        <h1 class="text-4xl md:text-5xl font-semibold tracking-tight text-stone-900">Contact us</h1>
        <p class="mt-6 text-lg text-stone-600 max-w-3xl">
            Whether you need support on an existing account or want to learn more about the Vida Mansa line,
            our team is here to help. We review every inquiry personally and respond within one business day.
        </p>
    </div>
</section>

{{-- Map and contact form --}}
<section class="bg-stone-50 border-b border-stone-200">
    <div class="max-w-6xl mx-auto px-6 lg:px-8 py-16">
        <div class="grid lg:grid-cols-[0.95fr_1.05fr] gap-10 lg:gap-12 items-start">
            <div class="space-y-6">
                <div class="rounded-lg border border-emerald-200 bg-white p-6 sm:p-7 shadow-sm">
                    <p class="text-xs uppercase tracking-[0.2em] text-emerald-700 font-medium mb-2">Primary contact</p>
                    <h2 class="text-2xl sm:text-3xl font-semibold tracking-tight text-stone-900">Email our sales and support team</h2>
                    <p class="mt-3 text-sm leading-6 text-stone-600">
                        Email is the fastest way to reach us for product questions, account support, wholesale orders, payment, and credit inquiries.
                    </p>
                    <a href="mailto:{{ $contactEmail }}"
                       class="mt-5 inline-flex w-full items-center justify-center rounded-md bg-[#007a55] px-5 py-3 text-base font-semibold text-white shadow-sm transition hover:bg-emerald-800 sm:w-auto">
                        {{ $contactEmail }}
                    </a>
                </div>

                <div>
                    <p class="text-xs uppercase tracking-[0.2em] text-emerald-700 font-medium mb-2">Visit our warehouse</p>
                    <h2 class="text-3xl font-semibold tracking-tight text-stone-900">Vida Mansa LLC</h2>
                    <p class="mt-4 text-stone-600 leading-7">{{ $address }}</p>
                </div>

                <div class="overflow-hidden rounded-lg border border-stone-200 bg-white shadow-sm">
                    <iframe
                        title="Vida Mansa warehouse map"
                        src="https://www.google.com/maps?q=1952+NW+93rd+Avenue,+Doral,+Miami,+FL+33172,+USA&output=embed"
                        width="100%"
                        height="520"
                        class="block w-full min-h-[360px]"
                        style="border:0"
                        allowfullscreen=""
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>

            <div class="rounded-lg border border-stone-200 bg-white p-6 sm:p-8 shadow-sm">
                <p class="text-xs uppercase tracking-[0.2em] text-emerald-700 font-medium mb-2">Get in touch</p>
                <h2 class="text-3xl font-semibold tracking-tight text-stone-900">Send us a message</h2>
                <p class="mt-3 text-sm leading-6 text-stone-600">
                    Please enter the details of your request. A member of our support staff will respond as soon as possible.
                </p>

                @if (session('status'))
                    <div class="mt-6 rounded-md border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800">
                        {{ session('status') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="mt-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
                        Please review the highlighted fields and try again.
                    </div>
                @endif

                <form method="POST" action="{{ route('storefront.contact.submit') }}" class="mt-8 space-y-5">
                    @csrf

                    <div class="grid sm:grid-cols-2 gap-5">
                        <div>
                            <label for="contact-name" class="block text-sm font-medium text-stone-800">Your Name</label>
                            <input id="contact-name" name="name" type="text" value="{{ old('name') }}" required
                                   class="mt-2 w-full rounded-md border border-stone-300 bg-white px-3 py-3 text-sm text-stone-900 shadow-sm transition focus:border-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-600/20 @error('name') border-red-400 @enderror">
                            @error('name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="contact-email" class="block text-sm font-medium text-stone-800">Your Email</label>
                            <input id="contact-email" name="email" type="email" value="{{ old('email') }}" required
                                   class="mt-2 w-full rounded-md border border-stone-300 bg-white px-3 py-3 text-sm text-stone-900 shadow-sm transition focus:border-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-600/20 @error('email') border-red-400 @enderror">
                            @error('email')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div>
                        <label for="contact-phone" class="block text-sm font-medium text-stone-800">Phone Number</label>
                        <input id="contact-phone" name="phone" type="tel" value="{{ old('phone') }}"
                               class="mt-2 w-full rounded-md border border-stone-300 bg-white px-3 py-3 text-sm text-stone-900 shadow-sm transition focus:border-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-600/20 @error('phone') border-red-400 @enderror">
                        @error('phone')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label for="contact-message" class="block text-sm font-medium text-stone-800">Your message</label>
                        <textarea id="contact-message" name="message" rows="10" required
                                  class="mt-2 w-full rounded-md border border-stone-300 bg-white px-3 py-3 text-sm text-stone-900 shadow-sm transition focus:border-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-600/20 @error('message') border-red-400 @enderror">{{ old('message') }}</textarea>
                        @error('message')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <button type="submit" class="inline-flex w-full sm:w-auto items-center justify-center rounded-md bg-[#007a55] px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-600/30">
                        Submit now
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

{{-- Bottom CTA --}}
<section class="bg-[#007a55] text-white">
    <div class="max-w-5xl mx-auto px-6 lg:px-8 py-16 text-center">
        <h2 class="text-3xl md:text-4xl font-semibold tracking-tight">Ready to build your order?</h2>
        <p class="mt-3 text-emerald-50/85 max-w-2xl mx-auto">Browse current wholesale pricing and find the right Vida Mansa products for your shelves.</p>
        <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="{{ route('storefront.catalog') }}"
               class="inline-flex items-center rounded-md bg-[#ffd400] px-6 py-3 text-sm font-semibold text-[#007a55] shadow-sm transition hover:bg-yellow-300">
                Shop Now
            </a>
            <a href="mailto:{{ $contactEmail }}"
               class="inline-flex items-center rounded-md border border-white/45 bg-white/10 px-6 py-3 text-sm font-semibold text-white transition hover:bg-white hover:text-[#007a55]">
                Email us directly
            </a>
        </div>
    </div>
</section>

@endsection