@extends('layouts.app')

@section('content')

<section class="page-hero">
    <div class="container-site">
        <p class="page-hero-label">Contact</p>
        <h1 class="page-hero-title">Let's talk about your operation.</h1>
        <p class="page-hero-subtitle">
            Sales enquiries, support questions, hardware quotes, or partnership discussions — reach the right team directly.
        </p>
    </div>
</section>

<section class="section bg-surface">
    <div class="container-site">
        <div class="grid lg:grid-cols-3 gap-10">

            {{-- Contact info sidebar --}}
            <div class="space-y-6">
                @foreach([
                    ['Sales',      route('book-demo'),  'Book a Demo',  'For new customers looking to evaluate PhyloPOS for their restaurant or retail business.', 'trending-up'],
                    ['Support',    'mailto:' . config('phylopos.company.support_email'), config('phylopos.company.support_email'), 'For existing customers — implementation, technical, and operational queries.', 'shield'],
                    ['Phone',      'tel:' . str_replace(' ', '', config('phylopos.company.phone')), config('phylopos.company.phone'), 'Monday–Saturday, 9AM–7PM IST.', 'phone'],
                    ['Location',   '#', config('phylopos.company.address'), 'Serving India and select international markets.', 'map-pin'],
                ] as [$label, $href, $text, $desc, $icon])
                <div class="card p-6 flex gap-4">
                    <div class="w-10 h-10 rounded-xl bg-teal-50 flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-teal-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            @include('components.icons.' . $icon)
                        </svg>
                    </div>
                    <div>
                        <div class="text-xs font-bold tracking-wide uppercase text-graphite-400 mb-1">{{ $label }}</div>
                        <a href="{{ $href }}" class="font-semibold text-emerald-900 hover:text-teal-600 transition-colors text-sm block mb-1">
                            {{ $text }}
                        </a>
                        <p class="text-xs text-graphite-500 leading-relaxed">{{ $desc }}</p>
                    </div>
                </div>
                @endforeach
            </div>

            {{-- Contact form --}}
            <div class="lg:col-span-2">
                <div class="card p-8 md:p-10">
                    <h2 class="font-bold text-graphite-900 text-xl mb-2">Send us a message</h2>
                    <p class="text-graphite-500 text-sm mb-8">We respond within one business day.</p>

                    <div x-data="formDemo()">
                        <div x-show="submitted" x-cloak class="text-center py-10">
                            <div class="w-14 h-14 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
                                <svg class="w-7 h-7 text-emerald-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                    @include('components.icons.check')
                                </svg>
                            </div>
                            <h3 class="font-bold text-graphite-900 mb-2">Message sent.</h3>
                            <p class="text-graphite-500 text-sm">We will be in touch within one business day.</p>
                        </div>

                        <form x-show="!submitted"
                              @submit.prevent="submit($event)"
                              action="{{ route('contact.store') }}"
                              method="POST"
                              class="space-y-5" novalidate>
                            @csrf

                            {{-- Honeypot --}}
                            <div class="absolute -left-[9999px]" aria-hidden="true" tabindex="-1">
                                <input type="text" name="website" tabindex="-1" autocomplete="off">
                            </div>

                            <div x-show="errors._global" x-cloak class="bg-red-50 border border-red-200 rounded-xl p-3 text-sm text-red-700">
                                <span x-text="errors._global"></span>
                            </div>

                            <div class="grid sm:grid-cols-2 gap-5">
                                <div>
                                    <label class="form-label" for="c-name">Full Name <span class="text-red-500">*</span></label>
                                    <input id="c-name" name="name" type="text" class="form-input" placeholder="Priya Nair" required>
                                    <p x-show="errors.name" x-cloak class="form-error" x-text="errors.name?.[0]"></p>
                                </div>
                                <div>
                                    <label class="form-label" for="c-email">Email <span class="text-red-500">*</span></label>
                                    <input id="c-email" name="email" type="email" class="form-input" placeholder="priya@thegardencafe.in" required>
                                    <p x-show="errors.email" x-cloak class="form-error" x-text="errors.email?.[0]"></p>
                                </div>
                            </div>

                            <div class="grid sm:grid-cols-2 gap-5">
                                <div>
                                    <label class="form-label" for="c-company">Company</label>
                                    <input id="c-company" name="company" type="text" class="form-input" placeholder="The Garden Cafe">
                                </div>
                                <div>
                                    <label class="form-label" for="c-mobile">Mobile</label>
                                    <input id="c-mobile" name="mobile" type="tel" class="form-input" placeholder="+91 98765 43210">
                                </div>
                            </div>

                            <div>
                                <label class="form-label" for="c-subject">Subject <span class="text-red-500">*</span></label>
                                <div class="relative">
                                    <select id="c-subject" name="subject" class="form-select" required>
                                        <option value="">Select a subject</option>
                                        <option value="sales">Sales / New Enquiry</option>
                                        <option value="support">Support / Technical</option>
                                        <option value="hardware">Hardware Quote</option>
                                        <option value="partnership">Partnership / Reseller</option>
                                        <option value="other">Other</option>
                                    </select>
                                    <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-graphite-400 pointer-events-none" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <p x-show="errors.subject" x-cloak class="form-error" x-text="errors.subject?.[0]"></p>
                            </div>

                            <div>
                                <label class="form-label" for="c-message">Message <span class="text-red-500">*</span></label>
                                <textarea id="c-message" name="message" rows="4" class="form-input resize-none" placeholder="Tell us about your business and what you are looking for…" required></textarea>
                                <p x-show="errors.message" x-cloak class="form-error" x-text="errors.message?.[0]"></p>
                            </div>

                            <button type="submit" class="btn-primary-lg w-full" :disabled="loading">
                                <span x-show="!loading">Send Message</span>
                                <span x-show="loading" x-cloak>Sending…</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection