<div class="wrap aysa-welcome-page" style="display:flex;align-items:center;gap:20px;">
    <img src="<?php
if (!defined('ABSPATH')) {
    exit;
}

 echo esc_url(plugin_dir_url(dirname(__FILE__, 2)) . 'assets/images/aysa-eyes.png'); ?>" alt="Aysa Eyes" class="aysa-eyes-img" style="width:67px;height:auto;" />
    <div class="aysa-welcome-content" style="flex:1;">
        <h1><?php echo esc_html__('Welcome to aysa', 'aysaaiseo'); ?></h1>

        <!-- AI Message commented out -->
        <!--
        <div class="aysa-chat-container">
            <div class="aysa-chat-message aysa-ai-message">
                <p id="aysa-dynamic-text"></p>
            </div>
        </div>
        -->
            <div id="aysa-setup-link-container" style="display: none; text-align: center; margin-top: 20px;">
                <a href="<?php echo esc_url(admin_url('admin.php?page=aysa-setup-seo-profile')); ?>" class="button aysa-btn-primary">
                    <?php echo esc_html__('Let\'s get started - Setup your SEO Profile', 'aysaaiseo'); ?>
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .aysa-welcome-page {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center horizontally */
        justify-content: center; /* Center vertically */
        min-height: calc(100vh - 100px); /* Adjust based on header/footer height if any */
        text-align: center; /* Center h1 */
    }
    .aysa-welcome-page h1 {
        margin-bottom: 30px;
        font-size: 2.5rem;
        font-weight: bold;
    }
    .aysa-welcome-page .aysa-chat-container {
        background-color: #f9f9f9;
        border-radius: 8px;
        padding: 30px;
        max-width: 700px;
        /* margin-top: 20px; /* Removed as flex will handle centering */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        width: 100%; /* Ensure it takes up space to be centered */
    }
    .aysa-welcome-page .aysa-chat-message {
        padding: 10px 15px;
        border-radius: 15px;
        margin-bottom: 10px;
        max-width: 100%;
        line-height: 1.6;
        text-align: center;
        justify-content: center;
        display: flex;
    }
    .aysa-welcome-page .aysa-ai-message {
        background-color: #e1f0ff;
        color: #333;
        align-self: center;
        border-bottom-left-radius: 0;
        display: inline-block;
        min-width: 50%;
        text-align: center;
    }
    .aysa-welcome-page .aysa-ai-message p {
        margin: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.35rem;
        font-weight: bold;
    }
    /* Blinking cursor effect */
    #aysa-dynamic-text::after {
        content: '|';
        display: inline-block;
        animation: blink-animation 1s infinite;
        font-weight: bold;
    }
    @keyframes blink-animation {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
    /* Buton stil plugin Aysa */
    .button.aysa-btn-primary {
        background: #0073aa;
        color: #fff !important;
        font-weight: bold;
        border: none;
        border-radius: 6px;
        padding: 14px 32px;
        font-size: 18px;
        box-shadow: 0 2px 8px rgba(0,115,170,0.08);
        transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
        display: inline-block;
        cursor: pointer;
        margin-top: 10px;
        text-decoration: none;
    }
    .button.aysa-btn-primary:hover, .button.aysa-btn-primary:focus {
        background: #005f8b;
        box-shadow: 0 4px 16px rgba(0,115,170,0.15);
        transform: translateY(-2px) scale(1.03);
        color: #fff;
        text-decoration: none;
    }
    .aysa-eyes-img {
        width: 67px;
        height: auto;
        /* border-radius: 50%; */
        /* object-fit: cover; */
        display: block;
        margin: 0;
        background: #e6f7ea;
    }
</style>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        const textElement = document.getElementById('aysa-dynamic-text');
        const setupLinkContainer = document.getElementById('aysa-setup-link-container');
        const textToType = "Hello! I am Aysa, your AI assistant. I'm here to help you optimize your SEO and achieve better rankings. Let's explore how I can assist you!";
        let index = 0;
        const typingSpeed = 20; // Milliseconds per character (mai rapid)

        function typeWriter() {
            if (index < textToType.length) {
                textElement.innerHTML += textToType.charAt(index);
                index++;
                setTimeout(typeWriter, typingSpeed);
            } else {
                // Stop blinking animation
                const styleSheets = document.styleSheets;
                for (let i = 0; i < styleSheets.length; i++) {
                    try {
                         const cssRules = styleSheets[i].cssRules || styleSheets[i].rules;
                        for (let j = 0; j < cssRules.length; j++) {
                            if (cssRules[j].selectorText === '#aysa-dynamic-text::after') {
                                cssRules[j].style.animation = 'none';
                                cssRules[j].style.content = '""';
                                break;
                            }
                        }
                    } catch (e) {
                        // Catch potential security errors when accessing stylesheets from different origins
                        // console.warn("Could not access stylesheet: " + styleSheets[i].href, e);
                        continue; 
                    }
                }
                // Show the setup link
                if(setupLinkContainer) {
                    setupLinkContainer.style.display = 'block';
                }
            }
        }

        // Clear existing text and start typing
        if(textElement) {
            textElement.innerHTML = ''; 
            typeWriter();
        }
    });
</script> 
