@extends('layouts.app')

@section('title', 'Contact Us — Showroom & Support | Furnitec')

@section('content')

<section class="bg-ink text-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-8 py-20 sm:py-28 text-center">
        <p class="eyebrow text-white/50 mb-6">We Reply Within 24 Hours</p>
        <h1 class="font-display text-4xl sm:text-6xl font-light">Let's Talk Furniture</h1>
        <p class="mt-6 text-white/65 text-lg font-light">Questions, custom orders, bulk quotes for your office or hotel — we're here.</p>
    </div>
</section>

<div class="max-w-[1400px] mx-auto px-4 sm:px-8 py-14 sm:py-24 grid lg:grid-cols-5 gap-12">
    {{-- Contact info --}}
    <div class="lg:col-span-2">
        <div class="divide-y divide-line border-y border-line">
            <a href="https://wa.me/8801714162950" class="flex items-center gap-5 py-6 group">
                <svg class="w-6 h-6 fill-current text-brand shrink-0" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                <div>
                    <p class="text-[11px] tracking-[0.2em] uppercase text-stone-warm">WhatsApp — fastest reply</p>
                    <p class="mt-1 group-hover:text-brand transition-colors">+880 1714-162950</p>
                </div>
            </a>
            <div class="flex items-center gap-5 py-6">
                <svg class="w-6 h-6 text-brand shrink-0" fill="none" stroke="currentColor" stroke-width="1.4" viewBox="0 0 24 24"><path d="M12 21s-7-5.5-7-11a7 7 0 1 1 14 0c0 5.5-7 11-7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg>
                <div>
                    <p class="text-[11px] tracking-[0.2em] uppercase text-stone-warm">Showroom</p>
                    <p class="mt-1">House 07, Road 07, Gulshan-1, Dhaka 1212</p>
                </div>
            </div>
            <a href="mailto:furnitecbd@gmail.com" class="flex items-center gap-5 py-6 group">
                <svg class="w-6 h-6 text-brand shrink-0" fill="none" stroke="currentColor" stroke-width="1.4" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="1"/><path d="m22 7-10 6L2 7"/></svg>
                <div>
                    <p class="text-[11px] tracking-[0.2em] uppercase text-stone-warm">Email</p>
                    <p class="mt-1 group-hover:text-brand transition-colors">furnitecbd@gmail.com</p>
                </div>
            </a>
            <a href="tel:+8801714162950" class="flex items-center gap-5 py-6 group">
                <svg class="w-6 h-6 text-brand shrink-0" fill="none" stroke="currentColor" stroke-width="1.4" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>
                <div>
                    <p class="text-[11px] tracking-[0.2em] uppercase text-stone-warm">Phone</p>
                    <p class="mt-1 group-hover:text-brand transition-colors">+880 1714-162950</p>
                </div>
            </a>
        </div>

        <div class="mt-10 overflow-hidden border border-line">
            <iframe title="Furnitec Showroom Location" src="https://www.google.com/maps?q=House+7+Road+7+Gulshan+1+Dhaka&output=embed"
                    class="w-full h-72 border-0" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>

    {{-- Form --}}
    <div class="lg:col-span-3">
        @if(session('contact_success'))
            <div class="mb-8 border border-emerald-600 text-emerald-800 p-4 flex items-center gap-3 text-sm">
                <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="m5 13 4 4L19 7"/></svg>
                {{ session('contact_success') }}
            </div>
        @endif

        <h2 class="eyebrow border-b border-line pb-4 mb-8">Send Us a Message</h2>
        <form action="{{ route('contact.submit') }}" method="POST" class="space-y-6">
            @csrf
            <div class="grid sm:grid-cols-2 gap-6">
                <div>
                    <label for="name" class="block text-[11px] tracking-[0.18em] uppercase font-semibold mb-2">Name *</label>
                    <input id="name" name="name" value="{{ old('name') }}" required class="input">
                    @error('name')<p class="text-brand text-xs mt-1.5">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="c_phone" class="block text-[11px] tracking-[0.18em] uppercase font-semibold mb-2">Phone</label>
                    <input id="c_phone" name="phone" value="{{ old('phone') }}" type="tel" class="input">
                </div>
            </div>
            <div class="grid sm:grid-cols-2 gap-6">
                <div>
                    <label for="c_email" class="block text-[11px] tracking-[0.18em] uppercase font-semibold mb-2">Email</label>
                    <input id="c_email" name="email" value="{{ old('email') }}" type="email" class="input">
                    @error('email')<p class="text-brand text-xs mt-1.5">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="subject" class="block text-[11px] tracking-[0.18em] uppercase font-semibold mb-2">Subject</label>
                    <input id="subject" name="subject" value="{{ old('subject') }}" class="input" placeholder="Custom order, bulk quote…">
                </div>
            </div>
            <div>
                <label for="message" class="block text-[11px] tracking-[0.18em] uppercase font-semibold mb-2">Message *</label>
                <textarea id="message" name="message" rows="6" required class="input">{{ old('message') }}</textarea>
                @error('message')<p class="text-brand text-xs mt-1.5">{{ $message }}</p>@enderror
            </div>
            <button class="btn btn-red">Send Message</button>
        </form>
    </div>
</div>

@endsection