Integrations Page

@props([])

{{-- Integrations directory page — composes existing marketing blocks into a full screen. --}}
@php
    $integrations = [
        ['name' => 'Stripe', 'initial' => 'St', 'description' => 'Sync subscriptions, invoices and payouts into your billing dashboard in real time.', 'installed' => true, 'popular' => true],
        ['name' => 'GitHub', 'initial' => 'Gh', 'description' => 'Link pull requests and deploys to issues, and trigger workflows on every push.', 'installed' => false, 'popular' => true],
        ['name' => 'Slack', 'initial' => 'Sl', 'description' => 'Route alerts, approvals and daily digests straight to the right team channels.', 'installed' => true, 'popular' => false],
        ['name' => 'Segment', 'initial' => 'Se', 'description' => 'Stream a single, clean event pipeline to every downstream tool you run.', 'installed' => false, 'popular' => false],
        ['name' => 'Datadog', 'initial' => 'Da', 'description' => 'Forward metrics, traces and logs for end-to-end observability and alerting.', 'installed' => false, 'popular' => false],
        ['name' => 'Vercel', 'initial' => 'Ve', 'description' => 'Auto-deploy preview environments and surface build status on every branch.', 'installed' => false, 'popular' => true],
    ];

    $rowOne = [
        ['name' => 'Stripe', 'initials' => 'St'],
        ['name' => 'GitHub', 'initials' => 'Gh'],
        ['name' => 'Slack', 'initials' => 'Sl'],
        ['name' => 'Linear', 'initials' => 'Li'],
        ['name' => 'Notion', 'initials' => 'No'],
        ['name' => 'Vercel', 'initials' => 'Ve'],
        ['name' => 'Figma', 'initials' => 'Fi'],
    ];

    $rowTwo = [
        ['name' => 'Datadog', 'initials' => 'Da'],
        ['name' => 'Sentry', 'initials' => 'Sn'],
        ['name' => 'Segment', 'initials' => 'Se'],
        ['name' => 'PagerDuty', 'initials' => 'Pd'],
        ['name' => 'Zapier', 'initials' => 'Za'],
        ['name' => 'HubSpot', 'initials' => 'Hu'],
        ['name' => 'Airtable', 'initials' => 'Ai'],
    ];
@endphp

<div class="min-h-screen bg-background text-foreground">
    <x-blocks.header-navbar />

    <main>
        <x-blocks.integrations-grid
            eyebrow="Integrations directory"
            heading="Every tool in your stack, wired in"
            subheading="Connect the apps your team already lives in. One-click, two-way sync keeps data flowing across your stack with no glue code to maintain."
            :integrations="$integrations"
        />

        <x-blocks.integrations-marquee
            eyebrow="200+ native connectors"
            heading="If your team uses it, we connect to it"
            subheading="From payments to observability, every connector is built and maintained in-house — so the data stays in sync and you stay focused on shipping."
            :rowOne="$rowOne"
            :rowTwo="$rowTwo"
        />

        <x-blocks.closing-cta-centered
            frame="none"
            eyebrow="Build your own"
            heading="Need a connector we don't have yet?"
            subheading="Use the open API and webhooks to ship a custom integration in an afternoon, or request one from our team and we'll prioritise it."
            primaryCta="Read the API docs"
            secondaryCta="Request an integration"
        />
    </main>

    <x-blocks.footer-columns />
</div>