{{-- 
    :::chart type="line"
    title: "Average 30-day return by plan tier"
    caption: "Data from 12,000 completed cycles, Q1 2026"    (optional)
    x_labels: [Day 1, Day 7, Day 14, Day 21, Day 30]
    series:
      - name: "$5 plan"
        color: "#f97316"                                     (optional; falls back to palette)
        data: [0, 3, 8, 15, 22]
      - name: "$25 plan"
        data: [0, 4, 10, 18, 25]
    :::
    
    Supports type="line" or type="bar". Server-rendered SVG, no JS deps.
    Palette rotates through brand orange + neutrals for extra series.
--}}
@php
    $type = $type ?? 'line';
    $title = $title ?? '';
    $caption = $caption ?? null;
    $x_labels = $x_labels ?? [];
    $series = $series ?? [];
    $palette = ['#f97316', '#0f172a', '#64748b', '#94a3b8'];

    // Guard against malformed data
    $valid = !empty($x_labels) && !empty($series);
    $maxVal = 0;
    if ($valid) {
        foreach ($series as $s) {
            foreach (($s['data'] ?? []) as $v) {
                $maxVal = max($maxVal, (float) $v);
            }
        }
        $maxVal = $maxVal > 0 ? $maxVal * 1.15 : 1;
    }

    // SVG dimensions
    $W = 720; $H = 320;
    $padL = 44; $padR = 24; $padT = 24; $padB = 44;
    $plotW = $W - $padL - $padR;
    $plotH = $H - $padT - $padB;
    $stepX = count($x_labels) > 1 ? $plotW / (count($x_labels) - 1) : $plotW;
@endphp

@if($valid)
<figure style="margin: 2.5rem 0; padding: 1.75rem 1.5rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;">
    @if($title)
        <div style="font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; color: #0f172a; margin-bottom: 0.25rem;">
            {{ $title }}
        </div>
    @endif
    @if(!empty($series))
        <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #64748b;">
            @foreach($series as $si => $s)
                <div style="display: inline-flex; align-items: center; gap: 0.375rem;">
                    <span style="width: 10px; height: 10px; border-radius: 50%; background: {{ $s['color'] ?? $palette[$si % count($palette)] }};"></span>
                    <span>{{ $s['name'] ?? 'Series ' . ($si + 1) }}</span>
                </div>
            @endforeach
        </div>
    @endif
    <div style="width: 100%; overflow-x: auto;">
        <svg viewBox="0 0 {{ $W }} {{ $H }}" style="width: 100%; height: auto; display: block;" xmlns="http://www.w3.org/2000/svg">
            {{-- Grid lines (5 horizontal) --}}
            @for($g = 0; $g <= 4; $g++)
                @php $y = $padT + ($plotH * $g / 4); @endphp
                <line x1="{{ $padL }}" y1="{{ $y }}" x2="{{ $W - $padR }}" y2="{{ $y }}" stroke="#f1f5f9" stroke-width="1"/>
                <text x="{{ $padL - 8 }}" y="{{ $y + 4 }}" text-anchor="end" font-family="DM Sans, sans-serif" font-size="11" fill="#94a3b8">{{ number_format($maxVal - ($maxVal * $g / 4), 0) }}</text>
            @endfor

            {{-- X axis labels --}}
            @foreach($x_labels as $xi => $xl)
                @php $x = $padL + ($xi * $stepX); @endphp
                <text x="{{ $x }}" y="{{ $H - 16 }}" text-anchor="middle" font-family="DM Sans, sans-serif" font-size="11" fill="#94a3b8">{{ $xl }}</text>
            @endforeach

            {{-- Series --}}
            @foreach($series as $si => $s)
                @php
                    $color = $s['color'] ?? $palette[$si % count($palette)];
                    $data = $s['data'] ?? [];
                @endphp

                @if($type === 'line')
                    @php
                        $points = [];
                        foreach ($data as $di => $val) {
                            $px = $padL + ($di * $stepX);
                            $py = $padT + $plotH - (((float) $val / $maxVal) * $plotH);
                            $points[] = round($px, 2) . ',' . round($py, 2);
                        }
                        $polyPoints = implode(' ', $points);
                    @endphp
                    <polyline points="{{ $polyPoints }}" fill="none" stroke="{{ $color }}" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
                    @foreach($data as $di => $val)
                        @php
                            $px = $padL + ($di * $stepX);
                            $py = $padT + $plotH - (((float) $val / $maxVal) * $plotH);
                        @endphp
                        <circle cx="{{ round($px, 2) }}" cy="{{ round($py, 2) }}" r="3.5" fill="#ffffff" stroke="{{ $color }}" stroke-width="2"/>
                    @endforeach

                @elseif($type === 'bar')
                    @php
                        $groupCount = count($series);
                        $groupW = $stepX * 0.7;
                        $barW = $groupW / max($groupCount, 1);
                    @endphp
                    @foreach($data as $di => $val)
                        @php
                            $groupX = $padL + ($di * $stepX) - ($groupW / 2);
                            $bx = $groupX + ($si * $barW);
                            $bh = ((float) $val / $maxVal) * $plotH;
                            $by = $padT + $plotH - $bh;
                        @endphp
                        <rect x="{{ round($bx, 2) }}" y="{{ round($by, 2) }}" width="{{ round($barW - 2, 2) }}" height="{{ round($bh, 2) }}" fill="{{ $color }}" rx="2"/>
                    @endforeach
                @endif
            @endforeach
        </svg>
    </div>
    @if($caption)
        <figcaption style="margin-top: 0.75rem; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #64748b; font-style: italic;">
            {{ $caption }}
        </figcaption>
    @endif
</figure>
@endif