@props(['data'])

<section class="tx-global" data-tx-section>
    <div class="tx-global__eyebrow">
        <span class="tx-eyebrow tx-eyebrow--dim">{{ $data['eyebrow'] ?? 'International Business' }}</span>
    </div>
    <h2 class="tx-global__headline">{!! str_replace('Globally.', '<span class="tx-accent-text">Globally.</span>', $data['headline'] ?? 'Expand Your Business Globally.') !!}</h2>

    <div class="tx-global__grid">
        {{-- USA --}}
        <div class="tx-global__card tx-reveal-card">
            <div class="tx-global__card-top">
                <span class="tx-flag">🇺🇸</span>
                <span class="tx-currency">$ USD</span>
            </div>
            <h3 class="tx-global__card-title">{{ $data['usa_title'] ?? 'USA LLC Formation' }}</h3>
            <ul class="tx-global__list">
                @foreach($data['usa_features'] ?? [] as $feat)
                <li>{{ $feat }}</li>
                @endforeach
            </ul>
            <a href="{{ route('services.show', 'usa-llc-formation') }}" class="tx-global__cta">
                Start USA Registration
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10h12M12 6l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </a>
        </div>

        {{-- Divider line with bridge --}}
        <div class="tx-global__bridge">
            <svg viewBox="0 0 80 300" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path id="bridge-svg-cms" d="M40 0 C40 0, 10 70, 10 150 C10 230, 40 300, 40 300" stroke="#00E0A4" stroke-width="1" stroke-dasharray="6 6" fill="none"/>
            </svg>
        </div>

        {{-- UK --}}
        <div class="tx-global__card tx-reveal-card">
            <div class="tx-global__card-top">
                <span class="tx-flag">🇬🇧</span>
                <span class="tx-currency">£ GBP</span>
            </div>
            <h3 class="tx-global__card-title">{{ $data['uk_title'] ?? 'UK LTD Incorporation' }}</h3>
            <ul class="tx-global__list">
                @foreach($data['uk_features'] ?? [] as $feat)
                <li>{{ $feat }}</li>
                @endforeach
            </ul>
            <a href="{{ route('services.show', 'uk-company-formation') }}" class="tx-global__cta">
                Start UK Registration
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10h12M12 6l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </a>
        </div>
    </div>
</section>