@php
    $faqs = [
        ['Where does the lead data come from?', 'Boss Of AI connects to established B2B data providers through a single provider layer. Contacts are enriched and business emails are verified before they reach your list, so you are not paying credits for addresses that bounce.'],
        ['Is this just another Apollo?', 'No. A list of emails is the starting point, not the product. Every lead can be researched, scored and turned into a written first message that references the actual business.'],
        ['What does a credit cost me?', 'Company searches, contact reveals and email verification cost one credit each. An AI research briefing costs five, and generated outreach costs two. The exact cost is shown before you run anything expensive.'],
        ['Can I export my leads?', 'Yes. Any search result or campaign exports to CSV, and the data is yours to use in whatever CRM or sending tool you already run.'],
        ['Do you send the emails for me?', 'Not yet. Boss Of AI writes and organises the outreach; you send it from your own inbox or sequencing tool, which keeps your deliverability under your control.'],
        ['Do I need a card to start?', 'No. The free plan gives you 50 credits so you can run real searches and judge the data quality before paying anything.'],
    ];
@endphp

<section id="faq" class="border-b border-graphite-200 py-16 md:py-24">
    <div class="shell grid gap-10 lg:grid-cols-[minmax(0,20rem)_1fr] lg:gap-16">
        <h2 class="text-3xl leading-tight md:text-[2.5rem]">Questions people ask before signing up</h2>

        <div class="divide-y divide-graphite-200 border-y border-graphite-200">
            @foreach ($faqs as $i => $faq)
                <div x-data="{ open: false }">
                    <h3>
                        <button type="button" @click="open = !open"
                                class="flex w-full items-center justify-between gap-6 py-5 text-left text-lg"
                                :aria-expanded="open" aria-controls="faq-panel-{{ $i }}">
                            <span>{{ $faq[0] }}</span>
                            <span class="relative mt-1 block h-3 w-3 shrink-0">
                                <span class="absolute top-1/2 left-0 h-[1.5px] w-3 -translate-y-1/2 bg-ink"></span>
                                <span class="absolute top-0 left-1/2 h-3 w-[1.5px] -translate-x-1/2 bg-ink transition-transform" :class="open && 'scale-y-0'"></span>
                            </span>
                        </button>
                    </h3>
                    <div id="faq-panel-{{ $i }}" x-show="open" x-collapse x-cloak>
                        <p class="max-w-[68ch] pb-5 text-[15px] leading-relaxed text-graphite-600">{{ $faq[1] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>