Integrations

@props([
    'eyebrow' => 'Integrations',
    'heading' => 'Connect your entire stack',
    'subheading' => 'One platform at the center of your tools. Sync data across the apps your team already uses — no glue code required.',
    'brand' => 'Acme',
    'innerNodes' => null,
    'outerNodes' => null,
])

@php
    $innerNodes ??= [
        ['label' => 'Slack', 'initials' => 'SL'],
        ['label' => 'Notion', 'initials' => 'NO'],
        ['label' => 'Linear', 'initials' => 'LI'],
        ['label' => 'GitHub', 'initials' => 'GH'],
    ];

    $outerNodes ??= [
        ['label' => 'Stripe', 'initials' => 'ST'],
        ['label' => 'Figma', 'initials' => 'FI'],
        ['label' => 'Zapier', 'initials' => 'ZA'],
        ['label' => 'HubSpot', 'initials' => 'HS'],
        ['label' => 'Segment', 'initials' => 'SE'],
        ['label' => 'Vercel', 'initials' => 'VE'],
    ];

    // Evenly space chips around a circle. Returns inline `left/top` percentages
    // (position only — no colour — so the raw-colour guard is satisfied), centred
    // with -translate-1/2. Radius is a % of the square container's half-size.
    $placeOnRing = function (int $count, float $radius, float $startDeg = -90.0): array {
        $out = [];
        for ($k = 0; $k < $count; $k++) {
            $rad = deg2rad($startDeg + $k * (360 / $count));
            $out[] = sprintf('left:%.3f%%;top:%.3f%%', 50 + $radius * cos($rad), 50 + $radius * sin($rad));
        }
        return $out;
    };

    // Outer chips sit on the outer ring; inner chips offset by half a step so the
    // two rings interleave rather than line up radially.
    $outerCoords = $placeOnRing(count($outerNodes), 44);
    $innerStep = count($innerNodes) > 0 ? 180 / count($innerNodes) : 0;
    $innerCoords = $placeOnRing(count($innerNodes), 25, -90 + $innerStep);
@endphp

<section {{ $attributes->merge(['class' => 'relative isolate overflow-hidden bg-gradient-to-b from-primary/5 via-background to-background py-16 text-foreground sm:py-24']) }}>
    <div class="mx-auto max-w-3xl px-4 text-center">
        <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>

        <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
            {{ __($heading) }}
        </h2>

        <p class="mx-auto mt-4 max-w-2xl text-pretty text-xl text-muted-foreground">
            {{ __($subheading) }}
        </p>
    </div>

    <div class="mt-16 flex items-center justify-center px-4">
        <div class="relative aspect-square w-full max-w-md sm:max-w-lg">
            {{-- Outer ring: dashed border + outer chips, orbiting slowly clockwise.
                 Each chip gets a nested, inversely-animated wrapper so the ring
                 rotates while the chip label stays upright. --}}
            <div class="absolute inset-0 motion-safe:animate-[spin_60s_linear_infinite]" aria-hidden="true">
                <div class="absolute inset-[6%] rounded-full border border-dashed border-border/70"></div>
            </div>

            {{-- Inner ring: solid border + inner chips, orbiting slowly counter-clockwise.
                 The direction keyword is folded into the single arbitrary `animate-[…]`
                 value (rather than a sibling `[animation-direction:reverse]` utility)
                 because Tailwind groups every `motion-safe:` utility into one trailing
                 @media block — a separate, unprefixed direction longhand would land
                 earlier in the stylesheet and be reset back to `normal` by the later
                 `animation` shorthand it shares an element with. --}}
            <div class="absolute inset-0 motion-safe:animate-[spin_40s_linear_infinite_reverse]" aria-hidden="true">
                <div class="absolute inset-[25%] rounded-full border border-border"></div>
            </div>

            {{-- Outer integration chips, evenly spaced on the outer ring --}}
            <div class="absolute inset-0 motion-safe:animate-[spin_60s_linear_infinite]">
                @foreach ($outerNodes as $i => $node)
                    <div class="absolute -translate-x-1/2 -translate-y-1/2" style="{{ $outerCoords[$i] }}">
                        <div class="motion-safe:animate-[spin_60s_linear_infinite_reverse]">
                            <x-ui.card class="flex size-12 items-center justify-center rounded-full p-0 shadow-sm sm:size-14">
                                <span class="text-xs font-semibold tracking-tight text-muted-foreground sm:text-sm">{{ $node['initials'] }}</span>
                                <span class="sr-only">{{ __($node['label']) }}</span>
                            </x-ui.card>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Inner integration chips, on the inner ring, orbiting the opposite direction --}}
            <div class="absolute inset-0 motion-safe:animate-[spin_40s_linear_infinite_reverse]">
                @foreach ($innerNodes as $i => $node)
                    <div class="absolute -translate-x-1/2 -translate-y-1/2" style="{{ $innerCoords[$i] }}">
                        <div class="motion-safe:animate-[spin_40s_linear_infinite]">
                            <x-ui.card class="flex size-11 items-center justify-center rounded-full p-0 shadow-sm sm:size-12">
                                <span class="text-xs font-semibold tracking-tight text-card-foreground">{{ $node['initials'] }}</span>
                                <span class="sr-only">{{ __($node['label']) }}</span>
                            </x-ui.card>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Central brand node --}}
            <div class="absolute inset-0 m-auto flex size-20 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg ring-8 ring-background sm:size-24">
                <span class="text-xl font-bold tracking-tight sm:text-2xl">{{ $brand }}</span>
            </div>
        </div>
    </div>
</section>