{{-- 
    :::cta
    headline: "Start with $50. Trade in 3 minutes."
    subtext: "No inventory. No shipping. Just arbitrage."   (optional)
    button: "Create your account"
    href: "/register?utm_source=blog&utm_content=post-slug"
    :::
--}}
@php
    $headline = $headline ?? '';
    $subtext = $subtext ?? null;
    $button = $button ?? 'Get started';
    $href = $href ?? '/register';
@endphp

@if(!empty($headline))
<div style="position: relative; margin: 3rem 0; padding: 2.5rem 2rem; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #ffffff 100%); border: 1px solid #fed7aa; text-align: center;">
    <div aria-hidden="true" style="position: absolute; top: -40%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(249, 115, 22, 0.15) 0%, transparent 70%); pointer-events: none;"></div>
    <div style="position: relative; z-index: 1;">
        <div style="font-family: 'IBM Plex Serif', Georgia, serif; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 500; color: #0f172a; line-height: 1.25; margin-bottom: {{ $subtext ? '0.75rem' : '1.5rem' }}; letter-spacing: -0.01em;">
            {{ $headline }}
        </div>
        @if($subtext)
            <div style="font-family: 'IBM Plex Serif', Georgia, serif; font-size: 1rem; color: #64748b; margin-bottom: 1.75rem; max-width: 480px; margin-left: auto; margin-right: auto;">
                {{ $subtext }}
            </div>
        @endif
        <a href="{{ $href }}" class="geas-cta-btn" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: #ffffff; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.9375rem; text-decoration: none; border-radius: 8px; box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3); transition: transform 0.15s ease, box-shadow 0.15s ease;" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 20px rgba(249, 115, 22, 0.4)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 14px rgba(249, 115, 22, 0.3)';">
            {{ $button }}
            <span class="geas-cta-arrow" style="transition: transform 0.15s ease;">→</span>
        </a>
    </div>
</div>
@endif