@extends('layouts.public')
@section('title', $api['name'] . ' – ' . config('app.name'))
@section('description', $api['description'])

@push('styles')
    <style>
        /* ── Hero ── */
        .api-hero {
            background: var(--bg-white);
            border-bottom: 1px solid var(--border);
            padding: 36px 0 0;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text-muted);
            text-decoration: none;
            margin-bottom: 20px;
            transition: color .15s;
        }

        .back-link:hover {
            color: var(--blue);
        }

        .hero-top {
            display: flex;
            align-items: flex-start;
            gap: 18px;
            margin-bottom: 20px;
        }

        .hero-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .hero-meta h1 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.9rem;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .hero-meta p {
            color: var(--text-muted);
            font-size: 15px;
            max-width: 640px;
            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .btn-get-key {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--blue);
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            padding: 11px 22px;
            border-radius: 9px;
            text-decoration: none;
            transition: background .15s;
        }

        .btn-get-key:hover {
            background: var(--blue-hover);
        }

        .hero-price {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-muted);
        }

        .hero-price strong {
            color: var(--text);
            font-size: 18px;
        }

        /* Stats bar */
        .stats-bar {
            display: flex;
            gap: 0;
            border-top: 1px solid var(--border);
            margin-top: 8px;
        }

        .stat-item {
            padding: 14px 24px;
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .stat-item:first-child {
            padding-left: 0;
        }

        .stat-label {
            font-size: 11px;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: .06em;
            font-weight: 600;
        }

        .stat-value {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }

        .stat-value.mono {
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
        }

        .stat-online {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .stat-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--green);
            flex-shrink: 0;
        }

        /* Tabs */
        .tabs-bar {
            background: var(--bg-white);
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 60px;
            z-index: 80;
        }

        .tabs-inner {
            display: flex;
            gap: 0;
        }

        .tab-btn {
            padding: 14px 20px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-muted);
            border: none;
            background: none;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all .15s;
            font-family: 'Inter', sans-serif;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .tab-btn:hover {
            color: var(--text);
        }

        .tab-btn.active {
            color: var(--blue);
            border-bottom-color: var(--blue);
            font-weight: 600;
        }

        /* Tab content */
        .tab-content {
            display: none;
            padding: 36px 0;
        }

        .tab-content.active {
            display: block;
        }

        /* Endpoints tab */
        .endpoint-row {
            background: var(--bg-white);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 10px;
            transition: all .15s;
        }

        .endpoint-row:hover {
            border-color: var(--blue);
            box-shadow: 0 2px 12px rgba(29, 78, 216, 0.06);
        }

        .method {
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 9px;
            border-radius: 5px;
            flex-shrink: 0;
        }

        .method-get {
            background: var(--blue-mid);
            color: var(--blue);
        }

        .method-post {
            background: var(--green-bg);
            color: var(--green);
        }

        .method-put {
            background: #fef3c7;
            color: var(--amber);
        }

        .method-delete {
            background: var(--red-bg);
            color: var(--red);
        }

        .ep-path {
            font-family: 'JetBrains Mono', monospace;
            font-size: 13.5px;
            color: var(--text);
        }

        .ep-desc {
            font-size: 13px;
            color: var(--text-muted);
            margin-left: auto;
        }

        /* Example tab */
        .example-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .code-panel h3 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: .05em;
        }

        .code-block {
            background: #1e293b;
            border-radius: 10px;
            overflow: hidden;
        }

        .code-block-header {
            background: #0f172a;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #334155;
        }

        .code-block-lang {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: #64748b;
            text-transform: uppercase;
        }

        .copy-btn {
            font-size: 12px;
            color: #64748b;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            font-family: 'Inter', sans-serif;
        }

        .copy-btn:hover {
            color: #94a3b8;
        }

        .code-block pre {
            padding: 18px 20px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            line-height: 1.8;
            overflow-x: auto;
            color: #e2e8f0;
            white-space: pre;
        }

        @media (max-width: 768px) {
            .example-grid {
                grid-template-columns: 1fr;
            }

            .stats-bar {
                flex-wrap: wrap;
            }
        }

        /* Pricing tab */
        .plan-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
        }

        .plan-card {
            background: var(--bg-white);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
            position: relative;
        }

        .plan-card.recommended {
            border-color: var(--blue);
            box-shadow: 0 0 0 1px var(--blue);
        }

        .plan-rec-badge {
            position: absolute;
            top: -11px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--blue);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .05em;
            padding: 3px 12px;
            border-radius: 999px;
            white-space: nowrap;
        }

        .plan-name {
            font-weight: 600;
            font-size: 13px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: .06em;
            margin-bottom: 10px;
        }

        .plan-price {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 2.2rem;
            font-weight: 700;
            line-height: 1;
        }

        .plan-price sup {
            font-size: 1rem;
            vertical-align: super;
        }

        .plan-price small {
            font-size: 1rem;
            color: var(--text-muted);
            font-weight: 400;
        }

        .plan-desc {
            color: var(--text-muted);
            font-size: 13px;
            margin: 8px 0 18px;
            line-height: 1.6;
        }

        .plan-divider {
            height: 1px;
            background: var(--border);
            margin-bottom: 18px;
        }

        .plan-features {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
            font-size: 13px;
        }

        .plan-features li {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .check-icon {
            color: var(--green);
            flex-shrink: 0;
        }

        .plan-btn {
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            text-align: center;
            text-decoration: none;
            display: block;
            transition: all .15s;
            border: 1px solid var(--border-mid);
            background: transparent;
            color: var(--text);
            font-family: 'Inter', sans-serif;
            cursor: pointer;
        }

        .plan-btn-blue {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue);
        }

        .plan-btn:hover {
            background: var(--bg);
        }

        .plan-btn-blue:hover {
            background: var(--blue-hover);
        }
    </style>
@endpush

@section('content')
    {{-- ── HERO ── --}}
    <div class="api-hero">
        <div class="container">
            <a href="{{ route('public.apis') }}" class="back-link">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="15 18 9 12 15 6" />
                </svg>
                Back to catalog
            </a>
            <div class="hero-top">
                <div class="hero-icon" style="background:{{ $api['icon_bg'] }};">
                    @if($api['icon'] === 'globe')
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="{{ $api['icon_color'] }}"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10" />
                            <line x1="2" y1="12" x2="22" y2="12" />
                            <path
                                d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
                        </svg>
                    @elseif($api['icon'] === 'credit-card')
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="{{ $api['icon_color'] }}"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
                            <line x1="1" y1="10" x2="23" y2="10" />
                        </svg>
                    @elseif($api['icon'] === 'message')
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="{{ $api['icon_color'] }}"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                        </svg>
                    @elseif($api['icon'] === 'shield')
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="{{ $api['icon_color'] }}"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                        </svg>
                    @elseif($api['icon'] === 'cloud')
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="{{ $api['icon_color'] }}"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="16 16 12 12 8 16" />
                            <line x1="12" y1="12" x2="12" y2="21" />
                            <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" />
                        </svg>
                    @elseif($api['icon'] === 'bell')
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="{{ $api['icon_color'] }}"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
                            <path d="M13.73 21a2 2 0 0 1-3.46 0" />
                        </svg>
                    @elseif($api['icon'] === 'dollar')
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="{{ $api['icon_color'] }}"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="12" y1="1" x2="12" y2="23" />
                            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
                        </svg>
                    @elseif($api['icon'] === 'eye')
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="{{ $api['icon_color'] }}"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
                            <circle cx="12" cy="12" r="3" />
                        </svg>
                    @else
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="{{ $api['icon_color'] }}"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8" />
                            <line x1="21" y1="21" x2="16.65" y2="16.65" />
                        </svg>
                    @endif
                </div>
                <div class="hero-meta">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                        <h1>{{ $api['name'] }}</h1>
                        <span class="badge badge-{{ $api['plan'] }}">{{ ucfirst($api['plan']) }}</span>
                    </div>
                    <p>{{ $api['description'] }}</p>
                </div>
            </div>
            <div class="hero-actions">
                @auth
                    <a href="{{ url('/dashboard') }}" class="btn-get-key">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path
                                d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
                        </svg>
                        Get API Key
                    </a>
                @else
                    <a href="{{ route('register') }}" class="btn-get-key">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path
                                d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
                        </svg>
                        Get API Key
                    </a>
                @endauth
                <div class="hero-price">
                    @if($api['price'] == 0)
                        <strong>Free</strong>
                    @else
                        <strong>${{ $api['price'] }}</strong>/month
                    @endif
                </div>
            </div>
            <div class="stats-bar">
                @foreach($api['stats'] as $stat)
                    <div class="stat-item">
                        <span class="stat-label">{{ $stat['label'] }}</span>
                        @if($stat['label'] === 'Base URL')
                            <span class="stat-value mono">{{ $stat['value'] }}</span>
                        @else
                            <span class="stat-value">{{ $stat['value'] }}</span>
                        @endif
                    </div>
                @endforeach
                <div class="stat-item">
                    <span class="stat-label">Status</span>
                    <span class="stat-value stat-online"><span class="stat-dot"></span>{{ $api['status'] }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- ── TABS ── --}}
    <div class="tabs-bar">
        <div class="container">
            <div class="tabs-inner">
                <button class="tab-btn active" onclick="switchTab('endpoints', this)">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="16 18 22 12 16 6" />
                        <polyline points="8 6 2 12 8 18" />
                    </svg>
                    Endpoints
                </button>
                <button class="tab-btn" onclick="switchTab('example', this)">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="2" />
                        <line x1="9" y1="9" x2="15" y2="9" />
                        <line x1="9" y1="12" x2="15" y2="12" />
                        <line x1="9" y1="15" x2="13" y2="15" />
                    </svg>
                    Example
                </button>
                <button class="tab-btn" onclick="switchTab('pricing', this)">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="1" x2="12" y2="23" />
                        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
                    </svg>
                    Pricing
                </button>
            </div>
        </div>
    </div>

    {{-- ── TAB: ENDPOINTS ── --}}
    <div id="tab-endpoints" class="tab-content active">
        <div class="container">
            @foreach($api['endpoints'] as $ep)
                <div class="endpoint-row">
                    <span class="method method-{{ strtolower($ep['method']) }}">{{ $ep['method'] }}</span>
                    <span class="ep-path">{{ $ep['path'] }}</span>
                    <span class="ep-desc">{{ $ep['desc'] }}</span>
                </div>
            @endforeach
        </div>
    </div>

    {{-- ── TAB: EXAMPLE ── --}}
    <div id="tab-example" class="tab-content">
        <div class="container">
            <div class="example-grid">
                <div class="code-panel">
                    <h3>Request</h3>
                    <div class="code-block">
                        <div class="code-block-header"><span class="code-block-lang">bash</span><button class="copy-btn"
                                onclick="copyCode(this)"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                                </svg>Copy</button></div>
                        <pre>{{ $api['example_request'] }}</pre>
                    </div>
                </div>
                <div class="code-panel">
                    <h3>Response</h3>
                    <div class="code-block">
                        <div class="code-block-header"><span class="code-block-lang">json</span><button class="copy-btn"
                                onclick="copyCode(this)"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                                </svg>Copy</button></div>
                        <pre>{{ $api['example_response'] }}</pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── TAB: PRICING ── --}}
    <div id="tab-pricing" class="tab-content">
        <div class="container">
            <div class="plan-cards">
                @php
                    $freePlan = $plans->where('code', 'free')->first();
                    $stdPlan = $plans->where('code', 'standard')->first();
                    $premPlan = $plans->where('code', 'premium')->first();
                    $freeFeats = $freePlan && $freePlan->features ? array_filter(explode("\n", trim($freePlan->features))) : ['1,000 requests/month', 'Access to free APIs', '1 API key'];
                    $stdFeats = $stdPlan && $stdPlan->features ? array_filter(explode("\n", trim($stdPlan->features))) : ['100k requests/month', 'All standard APIs', '5 API keys', 'Email support'];
                    $premFeats = $premPlan && $premPlan->features ? array_filter(explode("\n", trim($premPlan->features))) : ['Unlimited requests', 'All APIs', 'Unlimited keys', '24/7 priority support'];
                @endphp

                <div class="plan-card">
                    <div class="plan-name">{{ $freePlan->name ?? 'Free' }}</div>
                    <div class="plan-price">
                        <sup>$</sup>{{ $freePlan ? number_format($freePlan->price, 0) : '0' }}<small>/mo</small></div>
                    <div class="plan-desc">{{ $freePlan->description ?? 'Great for experimenting and hobby projects.' }}
                    </div>
                    <div class="plan-divider"></div>
                    <ul class="plan-features">
                        @foreach($freeFeats as $f)
                            @if(trim($f))
                                <li><svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12" />
                            </svg>{{ trim($f) }}</li>@endif
                        @endforeach
                    </ul>
                    @auth <a href="{{ url('/dashboard') }}" class="plan-btn">My Dashboard</a>
                    @else <a href="{{ route('register') }}" class="plan-btn">Get started free</a> @endauth
                </div>

                <div class="plan-card recommended">
                    <div class="plan-rec-badge">This API</div>
                    <div class="plan-name">{{ $stdPlan->name ?? 'Standard' }}</div>
                    <div class="plan-price">
                        <sup>$</sup>{{ $stdPlan ? number_format($stdPlan->price, 0) : '29' }}<small>/mo</small></div>
                    <div class="plan-desc">{{ $stdPlan->description ?? 'For production apps and growing teams.' }}</div>
                    <div class="plan-divider"></div>
                    <ul class="plan-features">
                        @foreach($stdFeats as $f)
                            @if(trim($f))
                                <li><svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12" />
                            </svg>{{ trim($f) }}</li>@endif
                        @endforeach
                    </ul>
                    @auth <a href="{{ url('/dashboard') }}" class="plan-btn plan-btn-blue">Manage plan</a>
                    @else <a href="{{ route('register') }}" class="plan-btn plan-btn-blue">Get Standard</a> @endauth
                </div>

                <div class="plan-card">
                    <div class="plan-name">{{ $premPlan->name ?? 'Premium' }}</div>
                    <div class="plan-price">
                        <sup>$</sup>{{ $premPlan ? number_format($premPlan->price, 0) : '79' }}<small>/mo</small></div>
                    <div class="plan-desc">{{ $premPlan->description ?? 'For high-volume usage and enterprise needs.' }}
                    </div>
                    <div class="plan-divider"></div>
                    <ul class="plan-features">
                        @foreach($premFeats as $f)
                            @if(trim($f))
                                <li><svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12" />
                            </svg>{{ trim($f) }}</li>@endif
                        @endforeach
                    </ul>
                    @auth <a href="{{ url('/dashboard') }}" class="plan-btn">Upgrade</a>
                    @else <a href="{{ route('register') }}" class="plan-btn">Get Premium</a> @endauth
                </div>
            </div>
            <p style="margin-top:20px;font-size:13px;color:var(--text-muted);text-align:center;">
                All prices in USD. <a href="{{ route('public.pricing') }}"
                    style="color:var(--blue);text-decoration:none;">View full pricing page</a>.
            </p>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function switchTab(name, btn) {
            document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            document.getElementById('tab-' + name).classList.add('active');
            btn.classList.add('active');
        }
        function copyCode(btn) {
            const pre = btn.closest('.code-block').querySelector('pre');
            navigator.clipboard.writeText(pre.innerText).then(() => {
                btn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Copied!';
                setTimeout(() => { btn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy'; }, 2000);
            });
        }
    </script>
@endpush