AI Visibility Breakdown Analytics Card

<section
    class="scroll-mt-24 dark:border-neutral-800 dark:bg-neutral-900 bg-black border-neutral-800 border rounded-xl shadow-sm"
    id="visibility">
    <div
        class="flex dark:border-neutral-800 border-neutral-800 border-b pt-3 pr-5 pb-3 pl-5 items-center justify-between">
        <div class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18"
                viewBox="0 0 24 24" data-icon="lucide:eye" data-width="18"
                class="iconify text-orange-400 iconify--lucide">
                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    class="">
                    <path
                        d="M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0"
                        class=""></path>
                    <circle cx="12" cy="12" r="3" class=""></circle>
                </g>
            </svg>
            <h3 class="text-sm font-semibold dark:text-white text-neutral-100">AI Visibility Breakdown</h3>
        </div>
        <div class="flex rounded-md p-0.5 dark:bg-neutral-800 bg-neutral-900">
            <button class="rounded-sm px-2.5 py-1 text-xs font-medium shadow-sm dark:bg-neutral-700 dark:text-white bg-black">By Engine</button>
            <button class="rounded-sm px-2.5 py-1 text-xs font-medium text-neutral-500 dark:text-neutral-400 dark:hover:text-white hover:text-neutral-100">By Prompt</button>
        </div>
    </div>
    <div class="pt-5 pr-5 pb-5 pl-5">
        <!-- Tabs Content Placeholder -->
        <div class="flex flex-col gap-6 md:flex-row">
            <div class="flex w-full flex-col gap-2 md:w-48">
                <button class="flex items-center justify-between rounded-md px-3 py-2 text-xs font-medium dark:bg-indigo-900/20 dark:text-indigo-300 bg-indigo-950 text-indigo-300">
                                     <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:bot" data-width="14" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class=""><path d="M12 8V4H8" class=""></path><rect width="16" height="12" x="4" y="8" rx="2" class=""></rect><path d="M2 14h2m16 0h2m-7-1v2m-6-2v2"></path></g></svg> ChatGPT</div>
                                     <span class="font-bold">81%</span>
                                 </button>
                <button class="flex items-center justify-between rounded-md px-3 py-2 text-xs font-medium dark:text-neutral-400 dark:hover:bg-neutral-800 text-neutral-400 hover:bg-neutral-950">
                                     <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:sparkles" data-width="14" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4m2-2h-4"></path><circle cx="4" cy="20" r="2"></circle></g></svg> Gemini</div>
                                     <span class="font-bold">45%</span>
                                 </button>
                <button class="flex items-center justify-between rounded-md px-3 py-2 text-xs font-medium dark:text-neutral-400 dark:hover:bg-neutral-800 text-neutral-400 hover:bg-neutral-950">
                                     <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:search" data-width="14" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m21 21l-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></g></svg> Perplexity</div>
                                     <span class="font-bold">65%</span>
                                 </button>
            </div>

            <div
                class="flex-1 rounded-lg border p-4 dark:border-neutral-800 dark:bg-neutral-900/50 border-neutral-800 bg-neutral-950">
                <h4 class="text-sm font-semibold dark:text-white text-neutral-100">ChatGPT Perception</h4>
                <p class="mt-2 text-xs leading-relaxed dark:text-neutral-300 text-neutral-400">
                    "Acme Law Group is frequently identified as a top-tier personal injury firm. The AI emphasizes their
                    20-year track record but occasionally confuses their address with a former location."
                </p>
                <div class="mt-4 space-y-3">
                    <div>
                        <span class="text-[10px] font-medium uppercase text-neutral-500">Mentioned Services</span>
                        <div class="mt-1 flex flex-wrap gap-1.5">
                            <span class="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium dark:bg-blue-900/30 dark:text-blue-400 bg-blue-900 text-blue-200">Car Accidents</span>
                            <span class="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium dark:bg-blue-900/30 dark:text-blue-400 bg-blue-900 text-blue-200">Medical Malpractice</span>
                        </div>
                    </div>
                    <div>
                        <span class="text-[10px] font-medium uppercase text-neutral-500">Missing Services</span>
                        <div class="mt-1 flex flex-wrap gap-1.5">
                            <span class="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium dark:bg-blue-900/30 dark:text-blue-400 bg-blue-900 text-blue-200">Slip and Fall</span>
                        </div>
                    </div>
                </div>
                <div class="mt-4 border-t pt-3 dark:border-neutral-800 border-neutral-800">
                    <button class="text-xs font-medium hover:underline dark:text-indigo-400 text-indigo-400">Show raw response</button>
                </div>
            </div>
        </div>
    </div>
</section>