<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<div class="score-grid">
    
    <div class="score-card">
        <h4 data-i18n="score_title" style="color: #64748b; text-transform: uppercase;">Visibility Score</h4>
        <div style="position: relative; width: 140px; height: 140px; margin: 20px auto;">
            <svg viewBox="0 0 36 36" style="transform: rotate(-90deg); width: 100%; height: 100%;">
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#f1f5f9" stroke-width="3" />
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="42, 100" />
            </svg>
            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.2rem; font-weight: 800; color: #0f172a;">42<span style="font-size: 1rem; opacity: 0.5;">/100</span></div>
        </div>
        <div data-i18n="status_critical" style="color: #ef4444; font-weight: 800; letter-spacing: 1px;">⚠️ CRITICAL STATUS</div>
    </div>

    <div class="score-card" style="text-align: left;">
        <h4 data-i18n="analysis_title" style="color: #64748b; text-transform: uppercase;">Competitive Analysis</h4>
        <div style="width:100%; margin-bottom: 20px;">
            <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f5f9;">
                <span data-i18n="pos_label">Your Real Position:</span>
                <span style="font-weight:700; color:#ef4444;">7th (Invisible)</span>
            </div>
            <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f5f9;">
                <span data-i18n="leader_label">Sector Leader:</span>
                <span style="font-weight:700;">Local Leader (1st)</span>
            </div>
            <div style="display: flex; justify-content: space-between; padding: 10px 0;">
                <span data-i18n="potential_label">Growth Potential:</span>
                <span style="font-weight:700; color:#10b981;">+300% Views</span>
            </div>
        </div>
        <h4 data-i18n="impact_title" style="font-size: 0.75rem; margin-bottom: 15px; color: #64748b;">PROJECTED BUSINESS IMPACT (TOP 3)</h4>
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
            <div style="background: #f0fdf4; padding: 15px 5px; border-radius: 8px; border: 1px solid #bbf7d0; text-align: center;">
                <span style="display: block; font-size: 1.4rem; font-weight: 900; color: #166534;">+45%</span>
                <span data-i18n="kpi_requests" style="font-size: 0.65rem; color: #15803d; font-weight: 700; text-transform: uppercase;">Requests</span>
            </div>
            <div style="background: #f0fdf4; padding: 15px 5px; border-radius: 8px; border: 1px solid #bbf7d0; text-align: center;">
                <span style="display: block; font-size: 1.4rem; font-weight: 900; color: #166534;">+60%</span>
                <span data-i18n="kpi_calls" style="font-size: 0.65rem; color: #15803d; font-weight: 700; text-transform: uppercase;">Calls</span>
            </div>
            <div style="background: #f0fdf4; padding: 15px 5px; border-radius: 8px; border: 1px solid #bbf7d0; text-align: center;">
                <span style="display: block; font-size: 1.4rem; font-weight: 900; color: #166534;">+55%</span>
                <span data-i18n="kpi_visits" style="font-size: 0.65rem; color: #15803d; font-weight: 700; text-transform: uppercase;">Visits</span>
            </div>
        </div>
    </div>
</div>
