@extends('public.layout.app')
@section('title','Contact | PACHA PAINTS')

@section('body')
<section class="hero">
    <div class="container">
        <div class="pill mb-3"><i class="fa-solid fa-envelope brand-dot"></i> Contact</div>
        <div class="row g-4">
            <div class="col-lg-6">
                <h2 class="fw-bold mb-2">Let’s talk about your project</h2>
                <p class="muted">Send a message for quotation, dealership, or product guidance.</p>

                <div class="cardx p-3">
                    <form>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="small muted">Name</label>
                                <input class="form-control" placeholder="Your name">
                            </div>
                            <div class="col-md-6">
                                <label class="small muted">Phone</label>
                                <input class="form-control" placeholder="+93 ...">
                            </div>
                            <div class="col-12">
                                <label class="small muted">Subject</label>
                                <input class="form-control" placeholder="Quotation / Dealer / Support">
                            </div>
                            <div class="col-12">
                                <label class="small muted">Message</label>
                                <textarea class="form-control" rows="4" placeholder="Write details..."></textarea>
                            </div>
                            <div class="col-12 d-flex gap-2">
                                <button type="button" class="btn btn-brand px-4">
                                    <i class="fa-solid fa-paper-plane me-1"></i> Send
                                </button>
                                <a href="{{ route('front.order.create') }}" class="btn btn-outline-brand px-4">
                                    Online Order
                                </a>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <div class="col-lg-6">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="cardx p-3 h-100">
                            <div class="fw-semibold"><i class="fa-solid fa-location-dot brand-dot me-2"></i>Address</div>
                            <div class="muted mt-2">Kabul, Afghanistan</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="cardx p-3 h-100">
                            <div class="fw-semibold"><i class="fa-solid fa-phone brand-dot me-2"></i>Phone</div>
                            <div class="muted mt-2">+93 7xx xxx xxx</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="cardx p-3 h-100">
                            <div class="fw-semibold"><i class="fa-solid fa-envelope brand-dot me-2"></i>Email</div>
                            <div class="muted mt-2">info@pachapaints.com</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="cardx p-3 h-100">
                            <div class="fw-semibold"><i class="fa-brands fa-whatsapp brand-dot me-2"></i>WhatsApp</div>
                            <div class="muted mt-2">+93 7xx xxx xxx</div>
                        </div>
                    </div>
                </div>

                <div class="cardx p-3 mt-3">
                    <div class="fw-semibold mb-2">Map</div>
                    <div class="muted small">دلته Google Map iframe هم ایښودلای شئ.</div>
                    <div class="rounded-4 mt-2" style="height:260px;background:rgba(37,32,34,.06);border:1px solid var(--border);"></div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection