<?php
defined('ABSPATH') || exit;

// Enqueue tarot.js only when this block is rendered
wp_enqueue_script('ezhp-tarot-js');

// Track block usage (first render only)
if (function_exists('ezhp_track_block_usage')) {
    ezhp_track_block_usage('tarot-3card-spread', $attributes);
}

$ezhp_language = sanitize_text_field($attributes['language'] ?? 'en');

?>
<section class="ez-enneagram-section ez-tarot-spread" data-ezhp-lang="<?php echo esc_attr($ezhp_language); ?>">
    <div class="container">
    
        <!-- ⭐ Loading indicator -->
        <div id="tarotLoader" class="tarot-loader">
            <div class="tarot-spinner"></div>
        </div>
        
        <!-- ⭐ Content wrapper (hidden until loaded) -->
        <div class="tarot-content">
            <div class="header-area">
                <h1 id="selectHeader">Select Your Cards</h1>
                <button id="shuffleBtn">Shuffle Deck</button>
                <p id="selectInstructions">Select 3 cards for your reading</p>
            </div>

            <div class="deck-area" id="deckArea"></div>

            <div class="selected-cards">
                <div class="selected-slot" id="slot1">
                    <div class="position-label">Past</div>
                    <div>First Card</div>
                </div>
                <div class="selected-slot" id="slot2">
                    <div class="position-label">Present</div>
                    <div>Second Card</div>
                </div>
                <div class="selected-slot" id="slot3">
                    <div class="position-label">Future</div>
                    <div>Third Card</div>
                </div>
            </div>

            <div id="tarotReading" class="reading-container hidden"></div>
        </div>
        
    </div>
</section>