{{-- Innovation Cycle Section — 4 phases in circular diagram --}}
@php
$phases = __('approach.innovation_cycle.phases');
$icons = ['eye', 'line-chart', 'wrench', 'award'];
@endphp

<section class="w-full px-4 py-20">
    <div class="max-w-7xl mx-auto px-4">
        <x-atoms.title
            :subject="__('approach.innovation_cycle.subject')"
            :title="__('approach.innovation_cycle.title')"
            :subtitle="[__('approach.innovation_cycle.subtitle')]"
            align="center"
            class="mb-8 max-w-200 mx-auto" />

        <p class="text-base lg:text-xl text-muted-foreground text-center max-w-[700px] mx-auto mb-16 lg:mb-60 leading-[--gold]">
            {{ __('approach.innovation_cycle.description') }}
        </p>

        <div class="relative w-full mx-auto mb-12">
            {{-- Circle SVG decoration --}}
            <div class="w-full lg:max-w-210 mx-auto overflow-hidden">
                <div class="w-[130vmin] lg:w-full translate-y-[-50%] top-[50%] right-[25vw] absolute lg:static lg:translate-y-0 lg:top-0 lg:right-0">
                    @include('sections.approach.partials.circle-svg')
                </div>
            </div>

            {{-- Phase cards positioned around the circle --}}
            <div class="w-full max-w-170 aspect-square lg:absolute top-0 left-0 right-0 bottom-0 mx-auto my-auto">
                <div class="flex flex-col gap-4 lg:block w-full lg:absolute top-0 left-0 right-0 bottom-0" data-display-wrapped>
                    @foreach($phases as $index => $phase)
                    <div class="flex lg:flex-col items-center text-center border py-4 px-3 rounded-lg bg-glassmorphism gap-6 lg:gap-0 lg:absolute lg:w-38
                            {{ $index === 0 ? 'lg:top-0 lg:left-1/2 lg:-translate-x-1/2 lg:-translate-y-1/2' : '' }}
                            {{ $index === 1 ? 'lg:top-1/2 lg:right-0 lg:translate-x-1/2 lg:-translate-y-1/2' : '' }}
                            {{ $index === 2 ? 'lg:bottom-0 lg:left-1/2 lg:-translate-x-1/2 lg:translate-y-1/2' : '' }}
                            {{ $index === 3 ? 'lg:top-1/2 lg:left-0 lg:-translate-x-1/2 lg:-translate-y-1/2' : '' }}
                        " data-display-wrapped>
                        <div class="w-12 h-12 flex items-center justify-center rounded-full bg-primary/10 mb-4">
                            <x-atoms.icon :name="$icons[$index]" class="w-6 h-6 text-primary" />
                        </div>
                        <div class="flex flex-col justify-around lg:items-center lg:text-center">
                            <h3 class="text-lg font-semibold mb-1">{{ $phase['title'] }}</h3>
                            <p class="text-sm text-muted-foreground">{{ $phase['subtitle'] }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>