{{#
    @name Accreditations Strip
    @desc Brand partner logos and professional accreditation badges
#}}

<div class="py-8 border-y border-neutral-200/80 bg-surface-warm/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-6">
            <span class="text-xs font-semibold tracking-widest uppercase text-accent-dark">
                Accreditations &amp; Trusted Brand Partners
            </span>
        </div>
        
        <div class="flex flex-wrap items-center justify-center gap-6 sm:gap-10 text-neutral-600">
            <a href="/about#qualifications" class="group flex items-center gap-2 px-3 py-1.5 rounded-full border border-neutral-300/80 bg-white shadow-xs hover:border-accent hover:text-neutral-900 transition-all">
                <span class="w-2 h-2 rounded-full bg-accent"></span>
                <span class="text-xs font-bold tracking-wide">CIDESCO Accredited</span>
            </a>
            <a href="/about#qualifications" class="group flex items-center gap-2 px-3 py-1.5 rounded-full border border-neutral-300/80 bg-white shadow-xs hover:border-accent hover:text-neutral-900 transition-all">
                <span class="w-2 h-2 rounded-full bg-accent"></span>
                <span class="text-xs font-bold tracking-wide">BABTAC Member</span>
            </a>
            <a href="/about#qualifications" class="group flex items-center gap-2 px-3 py-1.5 rounded-full border border-neutral-300/80 bg-white shadow-xs hover:border-accent hover:text-neutral-900 transition-all">
                <span class="w-2 h-2 rounded-full bg-accent"></span>
                <span class="text-xs font-bold tracking-wide">CIBTAC &amp; ITEC</span>
            </a>
            <span class="hidden sm:inline-block w-px h-6 bg-neutral-300"></span>
            <div class="flex flex-wrap items-center justify-center gap-5 sm:gap-8 font-serif text-sm tracking-wide text-neutral-500">
                <span class="hover:text-neutral-800 transition-colors font-medium">CACI SYNERGY</span>
                <span class="hover:text-neutral-800 transition-colors font-medium">LINDA MEREDITH</span>
                <span class="hover:text-neutral-800 transition-colors font-medium">HEAVEN BEE VENOM</span>
                <span class="hover:text-neutral-800 transition-colors font-medium">JANE IREDALE</span>
                <span class="hover:text-neutral-800 transition-colors font-medium">SIENNA X</span>
            </div>
        </div>
    </div>
</div>