@extends('layouts.website')

@section('title', 'Contact | Quickro POS')

@section('content')
<section class="mx-auto max-w-7xl px-6 py-20 lg:px-8">
    <div class="grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
        <div class="rounded-[2.5rem] bg-slate-950 p-8 text-white shadow-2xl lg:p-10">
            <p class="text-sm font-semibold uppercase tracking-[0.28em] text-brand-300">Contact</p>
            <h1 class="mt-4 text-4xl font-black">{{ $s['contact_heading'] ?? 'Reach the Quickro team' }}</h1>
            <p class="mt-6 text-base leading-8 text-slate-300">{{ $s['contact_description'] ?? 'Discuss rollouts, pricing, migration support, or technical questions with the team.' }}</p>
            <div class="mt-8 space-y-5 text-sm text-slate-300">
                <p><span class="font-semibold text-white">Email:</span> {{ $s['contact_email'] ?? 'support@quickropos.com' }}</p>
                <p><span class="font-semibold text-white">Phone:</span> {{ $s['contact_phone'] ?? '+92 300 0000000' }}</p>
                <p><span class="font-semibold text-white">Address:</span> {{ $s['contact_address'] ?? 'Lahore, Pakistan' }}</p>
            </div>
        </div>

        <div class="rounded-[2.5rem] border border-slate-200 bg-white p-8 shadow-sm lg:p-10">
            <h2 class="text-2xl font-bold text-slate-950">Send an inquiry</h2>
            <p class="mt-2 text-sm text-slate-500">This form remains presentational, but the surrounding contact data and calls to action are now fully driven from admin CMS settings.</p>
            <form method="POST" action="{{ route('website.contact.store') }}" class="mt-8 grid gap-5 md:grid-cols-2">
                @csrf
                <input type="text" name="name" value="{{ old('name') }}" placeholder="Your name" class="rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <input type="email" name="email" value="{{ old('email') }}" placeholder="Email address" class="rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <input type="text" name="business_name" value="{{ old('business_name') }}" placeholder="Business name" class="rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <input type="text" name="phone" value="{{ old('phone') }}" placeholder="Phone number" class="rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <textarea name="message" rows="6" placeholder="Tell us what you need" class="rounded-[1.75rem] border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10 md:col-span-2">{{ old('message') }}</textarea>
                <button type="submit" class="inline-flex items-center justify-center rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700 md:col-span-2">Send Message</button>
            </form>
        </div>
    </div>
</section>
@endsection