<?php
if (!defined('ABSPATH')) {
    exit;
}
?>
<?php
$aysa_ai_visibility_language_base = strtolower(explode('-', (string) $interface_language)[0]);
$aysa_ai_visibility_direction = in_array($aysa_ai_visibility_language_base, array('ar', 'he', 'yi'), true) ? 'rtl' : 'ltr';
?>
<div class="wrap aysa-ai-visibility" id="aysa-ai-visibility-app" lang="<?php echo esc_attr($interface_language); ?>" dir="<?php echo esc_attr($aysa_ai_visibility_direction); ?>">
    <header class="aysa-ai-visibility__header">
        <div>
            <h1><?php echo esc_html__('AI Visibility', 'aysaaiseo'); ?></h1>
            <p data-aiv-i18n="description"><?php echo esc_html($shell['description']); ?></p>
        </div>
        <a class="button" href="<?php echo esc_url(admin_url('admin.php?page=aysa-agent8-v3-lab')); ?>">
            <span data-aiv-i18n="askAgent8"><?php echo esc_html($shell['askAgent8']); ?></span>
        </a>
    </header>
    <nav class="aysa-ai-visibility__tabs" role="tablist" aria-label="<?php echo esc_attr($shell['sections']); ?>" data-aiv-i18n-aria="sections" data-aiv-canonical-tabs>
        <button type="button" class="is-active" role="tab" id="aysa-aiv-tab-overview" aria-controls="aysa-aiv-panel-overview" aria-selected="true" tabindex="0" data-view="overview" data-aiv-i18n="overview"><?php echo esc_html($shell['overview']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-measurement" aria-controls="aysa-aiv-panel-measurement" aria-selected="false" tabindex="-1" data-view="measurement" data-aiv-i18n="measurement"><?php echo esc_html($shell['measurement']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-trends" aria-controls="aysa-aiv-panel-trends" aria-selected="false" tabindex="-1" data-view="trends" data-aiv-i18n="trends"><?php echo esc_html($shell['trends']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-conversations" aria-controls="aysa-aiv-panel-conversations" aria-selected="false" tabindex="-1" data-view="conversations" data-aiv-i18n="conversations"><?php echo esc_html($shell['conversations']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-signals" aria-controls="aysa-aiv-panel-signals" aria-selected="false" tabindex="-1" data-view="signals" data-aiv-i18n="signals"><?php echo esc_html($shell['signals']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-content-analyzer" aria-controls="aysa-aiv-panel-content-analyzer" aria-selected="false" tabindex="-1" data-view="content-analyzer" data-aiv-i18n="contentAnalyzer"><?php echo esc_html($shell['contentAnalyzer']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-commerce" aria-controls="aysa-aiv-panel-commerce" aria-selected="false" tabindex="-1" data-view="commerce" data-aiv-i18n="commerce"><?php echo esc_html($shell['commerce']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-correlation" aria-controls="aysa-aiv-panel-correlation" aria-selected="false" tabindex="-1" data-view="correlation" data-aiv-i18n="correlation"><?php echo esc_html($shell['correlation']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-knowledge-base" aria-controls="aysa-aiv-panel-knowledge-base" aria-selected="false" tabindex="-1" data-view="knowledge-base" data-aiv-i18n="knowledgeBase"><?php echo esc_html($shell['knowledgeBase']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-action-plan" aria-controls="aysa-aiv-panel-action-plan" aria-selected="false" tabindex="-1" data-view="action-plan" data-aiv-i18n="actionPlan"><?php echo esc_html($shell['actionPlan']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-impact" aria-controls="aysa-aiv-panel-impact" aria-selected="false" tabindex="-1" data-view="impact" data-aiv-i18n="impact"><?php echo esc_html($shell['impact']); ?></button>
        <button type="button" role="tab" id="aysa-aiv-tab-setup" aria-controls="aysa-aiv-panel-setup" aria-selected="false" tabindex="-1" data-view="setup" data-aiv-i18n="setup"><?php echo esc_html($shell['setup']); ?></button>
    </nav>
    <div class="aysa-ai-visibility__workspace">
        <section class="aysa-ai-visibility__state" role="status" aria-live="polite" aria-busy="true">
            <h2 data-aiv-i18n="checkingTitle"><?php echo esc_html($shell['checkingTitle']); ?></h2>
            <p data-aiv-i18n="checkingCopy"><?php echo esc_html($shell['checkingCopy']); ?></p>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-overview" aria-labelledby="aysa-aiv-tab-overview" tabindex="0" data-view-panel="overview" hidden>
            <div class="aysa-ai-visibility__run" role="status" aria-live="polite"></div>
            <div class="aysa-ai-visibility__metrics" aria-label="<?php echo esc_attr($shell['metrics']); ?>" data-aiv-i18n-aria="metrics"></div>
            <section class="aysa-ai-visibility__engines" hidden>
                <h2 data-aiv-i18n="answerEngines"><?php echo esc_html($shell['answerEngines']); ?></h2>
                <div class="aysa-ai-visibility__grid"></div>
            </section>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-measurement" aria-labelledby="aysa-aiv-tab-measurement" tabindex="0" data-view-panel="measurement" hidden>
            <div class="aysa-ai-visibility__measurement" aria-live="polite"></div>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-trends" aria-labelledby="aysa-aiv-tab-trends" tabindex="0" data-view-panel="trends" hidden>
            <div class="aysa-ai-visibility__trends" aria-live="polite"></div>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-conversations" aria-labelledby="aysa-aiv-tab-conversations" tabindex="0" data-view-panel="conversations" hidden>
            <div class="aysa-ai-visibility__evidence"></div>
            <div class="aysa-ai-visibility__pagination"></div>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-signals" aria-labelledby="aysa-aiv-tab-signals" tabindex="0" data-view-panel="signals" hidden>
            <div class="aysa-ai-visibility__signals" aria-live="polite"></div>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-content-analyzer" aria-labelledby="aysa-aiv-tab-content-analyzer" tabindex="0" data-view-panel="content-analyzer" hidden>
            <div class="aysa-ai-visibility__content-analyzer" aria-live="polite"></div>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-commerce" aria-labelledby="aysa-aiv-tab-commerce" tabindex="0" data-view-panel="commerce" hidden>
            <div class="aysa-ai-visibility__commerce" aria-live="polite"></div>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-correlation" aria-labelledby="aysa-aiv-tab-correlation" tabindex="0" data-view-panel="correlation" hidden>
            <div class="aysa-ai-visibility__correlation" aria-live="polite"></div>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-knowledge-base" aria-labelledby="aysa-aiv-tab-knowledge-base" tabindex="0" data-view-panel="knowledge-base" hidden>
            <div class="aysa-ai-visibility__knowledge-base" aria-live="polite"></div>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-action-plan" aria-labelledby="aysa-aiv-tab-action-plan" tabindex="0" data-view-panel="action-plan" hidden>
            <div class="aysa-ai-visibility__action-plan" aria-live="polite"></div>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-impact" aria-labelledby="aysa-aiv-tab-impact" tabindex="0" data-view-panel="impact" hidden>
            <div class="aysa-ai-visibility__impact" aria-live="polite"></div>
        </section>
        <section class="aysa-ai-visibility__view" role="tabpanel" id="aysa-aiv-panel-setup" aria-labelledby="aysa-aiv-tab-setup" tabindex="0" data-view-panel="setup" hidden>
            <h2 data-aiv-i18n="answerEngines"><?php echo esc_html($shell['answerEngines']); ?></h2>
            <p data-aiv-i18n="setupHint"><?php echo esc_html($shell['setupHint']); ?></p>
            <div class="aysa-ai-visibility__setup"></div>
        </section>
    </div>
</div>
