@php
    $panel = $hero['panel'] ?? [];
    $chart = array_values(array_map('floatval', $panel['chart'] ?? [24, 36, 30, 48, 44, 62, 58, 74, 82, 78, 92]));
    $chart = count($chart) > 1 ? $chart : [0, 1];
    $min = min($chart);
    $max = max($chart);
    $span = max($max - $min, 1);
    $lastIndex = count($chart) - 1;
    $points = [];
    foreach ($chart as $index => $value) {
        $x = $lastIndex > 0 ? ($index / $lastIndex) * 100 : 0;
        $y = 92 - (($value - $min) / $span) * 72;
        $points[] = round($x, 2).','.round($y, 2);
    }
    $line = implode(' ', $points);
    $area = '0,100 '.$line.' 100,100';
    $heroStats = $hero['stats'] ?? [];
    $avatars = $hero['avatars'] ?? [];
@endphp

<section class="hero" id="top" @sectionTone($hero['style'] ?? [])>
    <div class="hero__grid" aria-hidden="true"></div>
    <div class="hero__glow" aria-hidden="true"></div>
    <div class="container hero__inner">
        <div class="hero__copy">
            @if(!empty($hero['badge']))
                <span class="badge reveal">
                    <span class="badge__dot" aria-hidden="true"></span>
                    <x-editable path="hero.badge">{{ $hero['badge'] }}</x-editable>
                </span>
            @endif

            <h1 class="hero__title reveal">
                <x-editable path="hero.titleLead" class="">{{ $hero['titleLead'] ?? '' }}</x-editable>
                @if(!empty($hero['titleAccent']))
                    <x-editable path="hero.titleAccent" as="em">{{ $hero['titleAccent'] }}</x-editable>
                @endif
                @if(!empty($hero['titleTail']))
                    <x-editable path="hero.titleTail">{{ $hero['titleTail'] }}</x-editable>
                @endif
            </h1>

            <p class="hero__subtitle reveal"><x-editable path="hero.subtitle">{{ $hero['subtitle'] ?? '' }}</x-editable></p>

            <div class="hero__actions reveal">
                @if(!empty($hero['primaryCta']['label']))
                    <a class="btn btn--accent" href="{{ $hero['primaryCta']['href'] ?? '#contact' }}" data-edit-href="hero.primaryCta.href">
                        <x-editable path="hero.primaryCta.label">{{ $hero['primaryCta']['label'] }}</x-editable>
                        <span class="btn__arrow" aria-hidden="true">&rarr;</span>
                    </a>
                @endif
                @if(!empty($hero['secondaryCta']['label']))
                    <a class="btn btn--ghost-dark" href="{{ $hero['secondaryCta']['href'] ?? '#solutions' }}" data-edit-href="hero.secondaryCta.href">
                        <x-editable path="hero.secondaryCta.label">{{ $hero['secondaryCta']['label'] }}</x-editable>
                    </a>
                @endif
            </div>

            <div class="hero__trust reveal">
                <div class="avatar-stack" aria-hidden="true">
                    @foreach(array_slice($avatars, 0, 5) as $initials)
                        <span class="avatar" data-edit="hero.avatars.{{ $loop->index }}">{{ $initials }}</span>
                    @endforeach
                </div>
                <p><x-editable path="hero.trustText">{{ $hero['trustText'] ?? '' }}</x-editable></p>
            </div>

            @if(count($heroStats))
                <dl class="hero__stats reveal">
                    @foreach($heroStats as $stat)
                        <div class="hero__stat">
                            <dt class="hero__stat-label" data-edit="hero.stats.{{ $loop->index }}.label">{{ $stat['label'] ?? '' }}</dt>
                            <dd class="hero__stat-value">
                                <span data-count="{{ $stat['value'] ?? 0 }}" data-edit="hero.stats.{{ $loop->index }}.value">{{ $stat['value'] ?? '' }}</span><span class="suffix" data-edit="hero.stats.{{ $loop->index }}.suffix">{{ $stat['suffix'] ?? '' }}</span>
                            </dd>
                        </div>
                    @endforeach
                </dl>
            @endif
        </div>

        <div class="hero__visual reveal" aria-hidden="true">
            <div class="hero__orbit hero__orbit--one"></div>
            <div class="hero__orbit hero__orbit--two"></div>

            <div class="panel">
                <div class="panel__bar">
                    <span class="panel__dots"><i></i><i></i><i></i></span>
                    <span class="panel__app" data-edit="hero.panel.app">{{ $panel['app'] ?? 'GrowthOS' }}</span>
                    <span class="panel__live"><i></i> <span data-edit="hero.panel.liveLabel">{{ $panel['liveLabel'] ?? 'Live' }}</span></span>
                </div>

                <div class="panel__body">
                    <p class="panel__label" data-edit="hero.panel.label">{{ $panel['label'] ?? 'Revenue this month' }}</p>
                    <div class="panel__value-row">
                        <strong class="panel__value" data-edit="hero.panel.value">{{ $panel['value'] ?? '' }}</strong>
                        @if(!empty($panel['delta']))
                            <span class="panel__delta" data-edit="hero.panel.delta">{{ $panel['delta'] }}</span>
                        @endif
                    </div>

                    <div class="panel__chart">
                        <div class="panel__chart-label">
                            <span data-edit="hero.panel.chartLabel">{{ $panel['chartLabel'] ?? 'Pipeline' }}</span>
                            <span class="panel__chart-key"><i></i> <span data-edit="hero.panel.chartKey">{{ $panel['chartKey'] ?? 'Revenue' }}</span></span>
                        </div>
                        <svg viewBox="0 0 100 100" preserveAspectRatio="none" role="img" aria-label="{{ $panel['chartLabel'] ?? 'Growth chart' }}">
                            <defs>
                                <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
                                    <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.35"/>
                                    <stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>
                                </linearGradient>
                                <linearGradient id="chartLine" x1="0" y1="0" x2="1" y2="0">
                                    <stop offset="0%" stop-color="#9b8cff"/>
                                    <stop offset="100%" stop-color="var(--accent)"/>
                                </linearGradient>
                            </defs>
                            <polygon points="{{ $area }}" fill="url(#chartFill)"/>
                            <polyline points="{{ $line }}" fill="none" stroke="url(#chartLine)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
                        </svg>
                    </div>

                    <div class="panel__mini">
                        @foreach(($panel['miniStats'] ?? []) as $stat)
                            <div class="panel__mini-item">
                                <span data-edit="hero.panel.miniStats.{{ $loop->index }}.label">{{ $stat['label'] ?? '' }}</span>
                                <strong data-edit="hero.panel.miniStats.{{ $loop->index }}.value">{{ $stat['value'] ?? '' }}</strong>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="panel__tags">
                    @foreach(($panel['tags'] ?? []) as $tag)
                        <span class="panel__tag" data-edit="hero.panel.tags.{{ $loop->index }}.label">{{ $tag['label'] ?? '' }}</span>
                    @endforeach
                </div>
            </div>

            @foreach(array_slice(($panel['floats'] ?? []), 0, 2) as $float)
                <div class="hero__float {{ $loop->first ? 'hero__float--top' : 'hero__float--bottom' }}">
                    <span class="{{ $loop->first ? 'hero__float-icon' : 'hero__float-spark' }}" data-edit="hero.panel.floats.{{ $loop->index }}.icon">{{ $float['icon'] ?? '' }}</span>
                    <span>
                        <strong data-edit="hero.panel.floats.{{ $loop->index }}.title">{{ $float['title'] ?? '' }}</strong>
                        <small data-edit="hero.panel.floats.{{ $loop->index }}.subtitle">{{ $float['subtitle'] ?? '' }}</small>
                    </span>
                </div>
            @endforeach
        </div>
    </div>
</section>