<header>
    <h1 class="text-3xl font-extrabold text-slate-900">Contact</h1>
    <p class="mt-3 max-w-6xl text-base text-slate-600">
        Get in touch with us
    </p>
</header>

<section class="my-5">
    <h2 class="border-b-2 border-primary pb-3 text-xl font-semibold text-slate-900">Contact Information</h2>

    <div class="mt-6 grid gap-y-8 md:grid-cols-2 md:gap-x-12">
        <article class="flex items-start gap-5">
            <span class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary text-xl text-white" aria-hidden="true">
                <i class="fa-regular fa-envelope"></i>
            </span>
            <div class="min-w-0">
                <h3 class="text-xl font-bold text-slate-900">Email</h3>
                <p class="mt-1 text-base leading-7 text-slate-600">{{ config('mail.from.address') }}</p>
            </div>
        </article>

        <article class="flex items-start gap-5">
            <span class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary text-xl text-white" aria-hidden="true">
                <i class="fa-solid fa-phone"></i>
            </span>
            <div class="min-w-0">
                <h3 class="text-xl font-bold text-slate-900">Phone</h3>
                <p class="mt-1 text-base leading-7 text-slate-600">1-800-555-0123</p>
            </div>
        </article>

        <article class="flex items-start gap-5">
            <span class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary text-xl text-white" aria-hidden="true">
                <i class="fa-solid fa-location-dot"></i>
            </span>
            <div class="min-w-0">
                <h3 class="text-xl font-bold text-slate-900">Address</h3>
                <p class="mt-1 text-base leading-7 text-slate-600">123 Main Street</p>
                <p class="text-base leading-7 text-slate-600">Suite 100</p>
                <p class="text-base leading-7 text-slate-600">City, State 12345</p>
            </div>
        </article>

        <article class="flex items-start gap-5">
            <span class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary text-xl text-white" aria-hidden="true">
                <i class="fa-regular fa-clock"></i>
            </span>
            <div class="min-w-0">
                <h3 class="text-xl font-bold text-slate-900">Business Hours</h3>
                <p class="mt-1 text-base leading-7 text-slate-600">Monday - Friday: 9:00 AM - 5:00 PM</p>
                <p class="text-base leading-7 text-slate-600">Saturday - Sunday: Closed</p>
            </div>
        </article>
    </div>
</section>
