<?php
/**
 * Wizard Step 1: Website Type Selection
 * 
 * @package TurboStarterTemplates
 * @since 1.0.5
 */

// Security: Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
// Get data from helper
$trstemp_categories = trstemp_get_parent_categories();
$trstemp_fallbacks  = trstemp_get_fallback_data();

$trstemp_icon_map        = $trstemp_fallbacks['icon_map'];
$trstemp_description_map = $trstemp_fallbacks['description_map'];
?>

<div class="trstemp-website-type-step">
    <div class="step-header">
        <h2><?php esc_html_e( 'What type of website are you building?', 'turbo-templates-library-for-elementor' ); ?></h2>
        <p><?php esc_html_e( 'Choose the category that best describes your website. This helps us recommend the perfect templates for you.', 'turbo-templates-library-for-elementor' ); ?></p>
    </div>

    <div class="website-types-grid">

        <?php if ( ! empty( $trstemp_categories ) ) : ?>
            <?php foreach ( $trstemp_categories as $trstemp_category ) :

                $trstemp_slug = sanitize_title( $trstemp_category['slug'] );

                /**
                 * ICON
                 * API icon থাকলে → API
                 * না থাকলে → fallback
                 */
                if ( ! empty( $trstemp_category['icon'] ) ) {
                    $trstemp_icon = esc_html( $trstemp_category['icon'] );
                } else {
                    $trstemp_icon = $trstemp_icon_map[ $trstemp_slug ] ?? '📦';
                }

                /**
                 * DESCRIPTION
                 * API description থাকলে → API
                 * না থাকলে → fallback
                 * fallback না থাকলে → empty
                 */
                if ( ! empty( $trstemp_category['description'] ) ) {
                    $trstemp_description = esc_html( $trstemp_category['description'] );
                } elseif ( isset( $trstemp_description_map[ $trstemp_slug ] ) ) {
                    $trstemp_description = esc_html( $trstemp_description_map[ $trstemp_slug ] );
                } else {
                    $trstemp_description = '';
                }

                ?>

                <div class="website-type-card" data-type="<?php echo esc_attr( $trstemp_slug ); ?>">
                    <div class="type-icon"><?php echo esc_html( $trstemp_icon ); ?></div>

                    <h3><?php echo esc_html( $trstemp_category['name'] ); ?></h3>

                    <?php if ( ! empty( $trstemp_description ) ) : ?>
                        <p><?php echo esc_html( $trstemp_description ); ?></p>
                    <?php endif; ?>

                    <div class="type-features">
                        <span><?php esc_html_e( '✓ Ready-made layouts', 'turbo-templates-library-for-elementor' ); ?></span>
                        <span><?php esc_html_e( '✓ Fully customizable', 'turbo-templates-library-for-elementor' ); ?></span>
                        <span><?php esc_html_e( '✓ Elementor optimized', 'turbo-templates-library-for-elementor' ); ?></span>
                    </div>
                </div>

            <?php endforeach; ?>
        <?php else : ?>
            <p><?php esc_html_e( 'No website types found.', 'turbo-templates-library-for-elementor' ); ?></p>
        <?php endif; ?>

    </div>

    <div class="selected-type-info" id="selected-type-info" style="display: none;">
        <div class="info-content">
            <h3>
                <?php esc_html_e( 'Great choice!', 'turbo-templates-library-for-elementor' ); ?>
                <span id="selected-type-name"></span>
                <?php esc_html_e( 'websites typically include:', 'turbo-templates-library-for-elementor' ); ?>
            </h3>
            <div id="selected-type-details"></div>
        </div>
    </div>
</div>
