<?php
/**
 * Server-side rendering for Author Pro Hero Block
 */

// Extract attributes
$block_id = isset($attributes['blockId']) ? $attributes['blockId'] : 'hero-' . uniqid();
$anchor = isset($attributes['anchor']) ? $attributes['anchor'] : '';
$element_id = !empty($anchor) ? $anchor : $block_id;

$badge_text = isset($attributes['badgeText']) ? $attributes['badgeText'] : '#1 New York Times Bestseller';
$badge_icon = isset($attributes['badgeIcon']) ? $attributes['badgeIcon'] : 'fas fa-star';
$title = isset($attributes['title']) ? $attributes['title'] : 'Atomic <br> <em>Habits</em>';
$subtitle = isset($attributes['subtitle']) ? $attributes['subtitle'] : 'An Easy & Proven Way to Build Good Habits & Break Bad Ones';
$description = isset($attributes['description']) ? $attributes['description'] : 'No matter your goals, Atomic Habits offers a proven framework for improving--every day.';
$book_image_url = isset($attributes['bookImageUrl']) ? $attributes['bookImageUrl'] : 'https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=800';
$store_buttons = isset($attributes['storeButtons']) ? $attributes['storeButtons'] : [];
$show_floating_card = isset($attributes['showFloatingCard']) ? $attributes['showFloatingCard'] : true;
$floating_card_top_label = isset($attributes['floatingCardTopLabel']) ? $attributes['floatingCardTopLabel'] : 'Free';
$floating_card_main_label = isset($attributes['floatingCardMainLabel']) ? $attributes['floatingCardMainLabel'] : 'Read Sample';
$floating_card_icon = isset($attributes['floatingCardIcon']) ? $attributes['floatingCardIcon'] : 'fas fa-play';
$floating_card_url = isset($attributes['floatingCardUrl']) ? $attributes['floatingCardUrl'] : '#';
$rating_stars = isset($attributes['ratingStars']) ? $attributes['ratingStars'] : 5;
$rating_value = isset($attributes['ratingValue']) ? $attributes['ratingValue'] : '4.9/5';
$rating_text = isset($attributes['ratingText']) ? $attributes['ratingText'] : 'Rating on Goodreads (10k+ Reviews)';
$bg_color = isset($attributes['bgColor']) && !empty($attributes['bgColor']) ? $attributes['bgColor'] : '';
$shape_color = isset($attributes['shapeColor']) && !empty($attributes['shapeColor']) ? $attributes['shapeColor'] : '';
$accent_color = isset($attributes['accentColor']) && !empty($attributes['accentColor']) ? $attributes['accentColor'] : '';
$border_color = isset($attributes['borderColor']) && !empty($attributes['borderColor']) ? $attributes['borderColor'] : '';
$padding_top = isset($attributes['paddingTop']) ? $attributes['paddingTop'] : 80;
$padding_bottom = isset($attributes['paddingBottom']) ? $attributes['paddingBottom'] : 80;

// Process title to convert <em> tags to accent styling
$processed_title = preg_replace('/<em>(.*?)<\/em>/i', '<span class="text-accent italic">$1</span>', $title);

// Generate stars HTML
$stars_html = '';
$full_stars = floor($rating_stars);
$has_half = ($rating_stars - $full_stars) >= 0.5;

for ($i = 0; $i < $full_stars; $i++) {
    $stars_html .= '★';
}
if ($has_half) {
    $stars_html .= '★';
}

// Dynamic styles
$styles = [];

// Background color
if ($bg_color) {
    $styles[] = "#{$element_id} { background-color: {$bg_color} !important; }";
}

// Shape color
if ($shape_color) {
    $styles[] = "#{$element_id} .hero-shape { background-color: {$shape_color} !important; }";
}

// Accent color - override text-accent, bg-accent, border-accent
if ($accent_color) {
    $styles[] = "#{$element_id} .text-accent { color: {$accent_color} !important; }";
    $styles[] = "#{$element_id} .bg-accent { background-color: {$accent_color} !important; }";
    $styles[] = "#{$element_id} .border-accent { border-color: {$accent_color} !important; }";
    $styles[] = "#{$element_id} .hover\\:text-accent:hover { color: {$accent_color} !important; }";
    $styles[] = "#{$element_id} .hover\\:bg-accent:hover { background-color: {$accent_color} !important; }";
    $styles[] = "#{$element_id} .hover\\:border-accent:hover { border-color: {$accent_color} !important; }";
    $styles[] = "#{$element_id} .group:hover .group-hover\\:text-accent { color: {$accent_color} !important; }";
}

// Border color - override border-gray-200, border-gray-100
if ($border_color) {
    $styles[] = "#{$element_id} .border-gray-200 { border-color: {$border_color} !important; }";
    $styles[] = "#{$element_id} .border-gray-100 { border-color: {$border_color} !important; }";
    $styles[] = "#{$element_id} .border-slate-100 { border-color: {$border_color} !important; }";
    $styles[] = "#{$element_id} .hover\\:border-accent:hover { border-color: {$border_color} !important; }";
}

$scoped_style_block = !empty($styles) ? "<style>" . implode(' ', $styles) . "</style>" : "";

$wrapper_attributes = get_block_wrapper_attributes([
    'class' => 'awt-author-pro-hero bg-paper relative overflow-hidden',
    'id'    => $element_id,
    'style' => "padding-top: {$padding_top}px; padding-bottom: {$padding_bottom}px;",
]);
?>

<?php echo $scoped_style_block; ?>

<section <?php echo $wrapper_attributes; ?>>
    <div class="hero-shape absolute top-0 right-0 w-1/2 h-full bg-blue-50/50 rounded-bl-[100px] -z-10"></div>

    <div class="awt-container mx-auto px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">

            <!-- Left Content -->
            <div class="order-2 md:order-1 space-y-8">
                <!-- Badge -->
                <?php if ($badge_text): ?>
                    <div
                        class="inline-flex items-center gap-2 px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-bold uppercase tracking-wider">
                        <svg class="w-4 h-4  fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                            <path
                                d="M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z" />
                        </svg>
                        <?php echo esc_html($badge_text); ?>
                    </div>
                <?php endif; ?>

                <!-- Title & Description -->
                <div>
                    <h1 class="text-5xl lg:text-7xl font-serif font-bold text-primary leading-none mb-4">
                        <?php echo wp_kses_post($processed_title); ?>
                    </h1>

                    <?php if ($subtitle): ?>
                        <p class="text-xl text-primary font-medium mb-4">
                            <?php echo esc_html($subtitle); ?>
                        </p>
                    <?php endif; ?>

                    <?php if ($description): ?>
                        <p class="text-secondary leading-relaxed text-lg">
                            <?php echo esc_html($description); ?>
                        </p>
                    <?php endif; ?>
                </div>

                <!-- Store Buttons -->
                <?php if (!empty($store_buttons)): ?>
                    <div class="pt-4 border-t border-gray-200">
                        <p class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Available On</p>
                        <div class="flex flex-wrap gap-4">
                            <?php foreach ($store_buttons as $button): ?>
                                <a href="<?php echo esc_url($button['url']); ?>"
                                    class="flex items-center gap-3 px-6 py-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:border-accent hover:shadow-md transition group">
                                    <?php if (!empty($button['iconImageUrl'])): ?>
                                        <img src="<?php echo esc_url($button['iconImageUrl']); ?>"
                                            alt="<?php echo esc_attr($button['mainLabel']); ?>" class="w-6 h-6 object-contain">
                                    <?php elseif (!empty($button['iconSvg'])): ?>
                                        <svg viewBox="0 0 576 512"
                                            class="w-6 h-6 fill-current text-primary group-hover:text-accent transition">
                                            <path d="<?php echo esc_attr($button['iconSvg']); ?>"></path>
                                        </svg>
                                    <?php endif; ?>
                                    <div class="text-left">
                                        <span class="block text-[10px] font-bold text-gray-400 uppercase leading-none">
                                            <?php echo esc_html($button['topLabel']); ?>
                                        </span>
                                        <span class="block text-sm font-bold text-primary">
                                            <?php echo esc_html($button['mainLabel']); ?>
                                        </span>
                                    </div>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Rating -->
                <?php if ($rating_stars > 0): ?>
                    <div class="flex items-center gap-4 text-sm font-medium text-gray-500">
                        <div class="flex text-yellow-500 text-base">
                            <?php echo $stars_html; ?>
                        </div>
                        <span><?php echo esc_html($rating_value); ?>     <?php echo esc_html($rating_text); ?></span>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Right Content - Book Image -->
            <div class="order-1 lg:order-2 flex justify-center lg:justify-end relative">
                <div
                    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-accent/20 rounded-full blur-3xl -z-10">
                </div>

                <div
                    class="relative w-[320px] md:w-[400px] aspect-[2/3] transform rotate-[-3deg] hover:rotate-0 transition duration-700 ease-out cursor-pointer group">
                    <div
                        class="absolute inset-0 bg-black/20 translate-y-4 translate-x-4 blur-lg rounded-lg -z-10 group-hover:translate-y-6 group-hover:translate-x-6 transition duration-700">
                    </div>

                    <?php if ($book_image_url): ?>
                        <img src="<?php echo esc_url($book_image_url); ?>" alt="Book Cover"
                            class="w-full h-full object-cover rounded-lg shadow-2xl border border-white/10">
                    <?php endif; ?>

                    <!-- Floating Card -->
                    <?php if ($show_floating_card): ?>
                        <a href="<?php echo esc_url($floating_card_url); ?>"
                            class="absolute bottom-6 -left-6 bg-white px-6 py-3 rounded shadow-xl flex items-center gap-2 hover:scale-105 transition">
                            <span class="w-8 h-8 rounded-full bg-accent text-white flex items-center justify-center">
                                <svg viewBox="0 0 576 512"
                                    class="w-6 h-6 fill-current text-white group-hover:text-white transition">
                                    <path
                                        d="M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z" />
                                </svg>
                            </span>
                            <div>
                                <span class="block text-xs font-bold text-gray-400 uppercase">
                                    <?php echo esc_html($floating_card_top_label); ?>
                                </span>
                                <span class="block text-sm font-bold text-primary">
                                    <?php echo esc_html($floating_card_main_label); ?>
                                </span>
                            </div>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</section>