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

@section('body')
<section class="hero">
    <div class="container">
        <div class="pill mb-3"><i class="fa-solid fa-money-check-dollar brand-dot"></i> Pricing</div>
        <h2 class="fw-bold mb-2">Simple packages for every project</h2>
        <p class="muted mb-4">You can customize quantities based on m² and surface condition.</p>

        <div class="row g-3">
            <div class="col-lg-4">
                <div class="cardx p-4 h-100">
                    <div class="badge badge-soft mb-2">Starter</div>
                    <div class="h3 fw-bold mb-0">$49</div>
                    <div class="muted">Small room / touch-up</div>
                    <ul class="mt-3 muted">
                        <li>Primer guidance</li>
                        <li>1–2 color suggestions</li>
                        <li>Coverage estimation</li>
                    </ul>
                    <a class="btn btn-outline-brand w-100" href="{{ route('front.contact') }}">Request Quote</a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="cardx p-4 h-100" style="border:2px solid rgba(226,33,44,.25)">
                    <div class="badge badge-soft mb-2">Most Popular</div>
                    <div class="h3 fw-bold mb-0">$129</div>
                    <div class="muted">Apartment / medium project</div>
                    <ul class="mt-3 muted">
                        <li>Interior + Primer plan</li>
                        <li>3–5 color combinations</li>
                        <li>On-site support (optional)</li>
                    </ul>
                    <a class="btn btn-brand w-100" href="{{ route('front.order.create') }}">Order Online</a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="cardx p-4 h-100">
                    <div class="badge badge-soft mb-2">Pro</div>
                    <div class="h3 fw-bold mb-0">$299</div>
                    <div class="muted">Villa / commercial</div>
                    <ul class="mt-3 muted">
                        <li>Exterior weather shield plan</li>
                        <li>Waterproofing add-on</li>
                        <li>Bulk supply discount</li>
                    </ul>
                    <a class="btn btn-outline-brand w-100" href="{{ route('front.contact') }}">Talk to Sales</a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection