<?php
/**
 * Render About [Author Pro] Block
 */

$block_id = isset($attributes['blockId']) ? $attributes['blockId'] : '';
if (empty($block_id)) {
    $block_id = 'author-pro-about-' . uniqid();
}
$anchor = isset($attributes['anchor']) ? $attributes['anchor'] : '';
// Use Anchor if set, otherwise fallback to Block ID
$element_id = !empty($anchor) ? $anchor : $block_id;

$badge_text = isset($attributes['badgeText']) ? $attributes['badgeText'] : 'The Author';
$title = isset($attributes['title']) ? $attributes['title'] : "Crafting Stories That Matter";
$description = isset($attributes['description']) ? $attributes['description'] : '';
$author_image_url = isset($attributes['authorImageUrl']) ? $attributes['authorImageUrl'] : '';
$author_image_alt = isset($attributes['authorImageAlt']) ? $attributes['authorImageAlt'] : 'Author';
$features = isset($attributes['features']) ? $attributes['features'] : [];
$btn_text = isset($attributes['btnText']) ? $attributes['btnText'] : 'Read Full Bio';
$btn_url = isset($attributes['btnUrl']) ? $attributes['btnUrl'] : '#';
$padding_top = isset($attributes['paddingTop']) ? $attributes['paddingTop'] : 128;
$padding_bottom = isset($attributes['paddingBottom']) ? $attributes['paddingBottom'] : 128;
$bg_color = isset($attributes['bgColor']) ? $attributes['bgColor'] : '';

// Styling Attributes
$accent_color = isset($attributes['accentColor']) ? $attributes['accentColor'] : '';
$btn_bg_color = isset($attributes['btnBgColor']) ? $attributes['btnBgColor'] : '';
$btn_text_color = isset($attributes['btnTextColor']) ? $attributes['btnTextColor'] : '';
$btn_border_color = isset($attributes['btnBorderColor']) ? $attributes['btnBorderColor'] : '';
$btn_hover_bg_color = isset($attributes['btnHoverBgColor']) ? $attributes['btnHoverBgColor'] : '';
$btn_hover_text_color = isset($attributes['btnHoverTextColor']) ? $attributes['btnHoverTextColor'] : '';
$btn_hover_border_color = isset($attributes['btnHoverBorderColor']) ? $attributes['btnHoverBorderColor'] : '';

// Generate Dynamic CSS
$custom_css = "";

if ($accent_color) {
    $custom_css .= "#{$element_id} .awt-accent, #{$element_id} .awt-accent svg { color: {$accent_color} !important; }";
    $custom_css .= "#{$element_id} .awt-border-accent { border-color: {$accent_color} !important; }";
}

if ($btn_bg_color || $btn_text_color || $btn_border_color) {
    $custom_css .= "#{$element_id} .awt-btn {";
    if ($btn_bg_color) $custom_css .= " background-color: {$btn_bg_color};";
    if ($btn_text_color) $custom_css .= " color: {$btn_text_color};";
    if ($btn_border_color) $custom_css .= " border-color: {$btn_border_color};";
    $custom_css .= " }";
}

if ($btn_hover_bg_color || $btn_hover_text_color || $btn_hover_border_color) {
    $custom_css .= "#{$element_id} .awt-btn:hover {";
    if ($btn_hover_bg_color) $custom_css .= " background-color: {$btn_hover_bg_color};";
    if ($btn_hover_text_color) $custom_css .= " color: {$btn_hover_text_color};";
    if ($btn_hover_border_color) $custom_css .= " border-color: {$btn_hover_border_color};";
    $custom_css .= " }";
}

// CSS Variables for padding and background
$style = "padding-top: {$padding_top}px; padding-bottom: {$padding_bottom}px;";
if ($bg_color) {
    $style .= " background-color: {$bg_color};";
}

$wrapper_attributes = get_block_wrapper_attributes([
    'class' => 'awt-author-pro-about bg-white',
    'style' => $style,
    'id'    => $element_id // Ensure HTML ID matches CSS selector
]);

// Determine Button Classes Conditionally
$btn_classes = "awt-btn inline-block px-8 py-3 border font-bold rounded transition";
if (empty($btn_text_color)) {
    $btn_classes .= " text-primary";
}
if (empty($btn_border_color)) {
    $btn_classes .= " border-primary";
}
// Default hover classes only if custom hovers are not set
if (empty($btn_hover_bg_color)) {
    $btn_classes .= " hover:bg-primary";
}
if (empty($btn_hover_text_color)) {
    $btn_classes .= " hover:text-white";
}
?>

<?php if (!empty($custom_css)) : ?>
    <style><?php echo $custom_css; ?></style>
<?php endif; ?>

<section <?php echo $wrapper_attributes; ?>>
    <div class="awt-container mx-auto grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
        <!-- Left Column: Image -->
        <div class="relative" data-aos="fade-right">
             <div class="awt-border-accent absolute top-0 left-0 w-full h-full border-2 border-accent/20 rounded-2xl -z-10"></div>
            <?php if ($author_image_url) : ?>
                <img 
                    src="<?php echo esc_url($author_image_url); ?>" 
                    alt="<?php echo esc_attr($author_image_alt); ?>" 
                    class="rounded-xl shadow-xl w-full h-[500px] object-cover grayscale hover:grayscale-0 transition duration-500"
                >
            <?php else : ?>
                 <div class="rounded-xl shadow-xl w-full h-[500px] bg-gray-200 flex items-center justify-center text-gray-400">
                    <span><?php esc_html_e('Upload Image', 'author-website-templates'); ?></span>
                </div>
            <?php endif; ?>
        </div>

        <!-- Right Column: Content -->
        <div data-aos="fade-left">
            <span class="awt-accent text-accent font-bold text-xs uppercase tracking-widest mb-2 block"><?php echo esc_html($badge_text); ?></span>
            <h2 class="text-4xl font-serif font-bold text-primary mb-6">
                <?php echo wp_kses_post($title); ?>
            </h2>
            <?php if ($description): ?>
                <div class="text-secondary leading-relaxed mb-6">
                    <?php echo wp_kses_post($description); ?>
                </div>
            <?php endif; ?>

            <?php if (!empty($features)) : ?>
                <ul class="space-y-4 mb-8 ml-0">
                    <?php foreach ($features as $feature) : ?>
                        <li class="flex items-center gap-3 text-primary font-medium">
                            <span class="awt-accent"><svg class="w-6 h-6 text-accent" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"/></svg></span> <?php echo wp_kses_post($feature); ?>
                        </li>
                    <?php endforeach; ?>
                </ul>
            <?php endif; ?>

            <a
                href="<?php echo esc_url($btn_url); ?>"
                class="<?php echo esc_attr($btn_classes); ?>"
            >
                <?php echo esc_html($btn_text); ?>
            </a>

        </div>
    </div>
</section>