{{-- 
    :::callout type="insight"
    text: "GE-AS was the first platform to pair AI trading plans with copy trading in a single wallet."
    :::
    
    Types: insight (orange), warning (amber), proof (green), note (blue)
    Text can also be markdown-flavoured HTML via `body` key.
--}}
@php
    $type = $type ?? 'insight';
    $text = $text ?? ($body ?? '');
    $title = $title ?? null;

    $themes = [
        'insight' => ['bg' => '#fff7ed', 'border' => '#fed7aa', 'accent' => '#f97316', 'icon' => 'i'],
        'warning' => ['bg' => '#fffbeb', 'border' => '#fde68a', 'accent' => '#f59e0b', 'icon' => '!'],
        'proof'   => ['bg' => '#f0fdf4', 'border' => '#bbf7d0', 'accent' => '#10b981', 'icon' => '✓'],
        'note'    => ['bg' => '#eff6ff', 'border' => '#bfdbfe', 'accent' => '#3b82f6', 'icon' => 'i'],
    ];
    $theme = $themes[$type] ?? $themes['insight'];
@endphp

@if(!empty($text))
<div style="display: flex; gap: 1rem; margin: 2rem 0; padding: 1.25rem 1.5rem; background: {{ $theme['bg'] }}; border: 1px solid {{ $theme['border'] }}; border-left: 4px solid {{ $theme['accent'] }}; border-radius: 8px;">
    <div style="flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: {{ $theme['accent'] }}; color: #ffffff; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 700; font-size: 0.9375rem; font-style: {{ $type === 'insight' || $type === 'note' ? 'italic' : 'normal' }};">
        {{ $theme['icon'] }}
    </div>
    <div style="flex: 1;">
        @if($title)
            <div style="font-family: 'DM Sans', sans-serif; font-weight: 600; color: #0f172a; margin-bottom: 0.375rem; font-size: 0.9375rem;">
                {{ $title }}
            </div>
        @endif
        <div style="font-family: 'IBM Plex Serif', Georgia, serif; color: #334155; font-size: 1rem; line-height: 1.65;">
            {!! nl2br(e($text)) !!}
        </div>
    </div>
</div>
@endif