﻿<?php
/**
 * Ranking Africa — Dashboard (PHP)
 * Server-side auth guard: unauthenticated requests are redirected
 * to /signin before a single byte of HTML is sent — eliminates
 * the JS-auth flash entirely.
 */
require_once __DIR__ . '/includes/config.php';
$user = require_auth($pdo, true);   // redirects to /signin.html if not logged in

// Fetch plan name for display
$planStmt = $pdo->prepare(
    "SELECT name, slug FROM subscription_plans WHERE id = ? LIMIT 1"
);
$planStmt->execute([$user['plan_id']]);
$plan = $planStmt->fetch() ?: ['name' => 'Starter', 'slug' => 'starter'];

// Build the user object we'll inject into JavaScript
$jsUser = json_encode([
    'id'            => (int)$user['id'],
    'first_name'    => $user['first_name'],
    'last_name'     => $user['last_name'],
    'email'         => $user['email'],
    'company_name'  => $user['company_name'] ?? '',
    'website_url'   => $user['website_url'] ?? '',
    'industry'      => $user['industry'] ?? '',
    'phone'         => $user['phone'] ?? '',
    'timezone'      => $user['timezone'] ?? 'Africa/Nairobi',
    'language'      => $user['language'] ?? 'en',
    'plan_id'       => (int)$user['plan_id'],
    'plan_name'     => $plan['name'],
    'plan_slug'     => $plan['slug'],
    'is_admin'      => (bool)$user['is_admin'],
    'email_verified'=> (bool)$user['email_verified'],
    'auto_renewal'  => (bool)$user['auto_renewal'],
    'parent_user_id'=> $user['parent_user_id'] ? (int)$user['parent_user_id'] : null,
], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard — Ranking Africa</title>
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box}

        :root {
            --deep-blue: #003049;
            --flag-red: #d62828;
            --tangerine: #f77f00;
            --sunflower: #fcbf49;
            --custard: #eae2b7;
            --white: #FFFFFF;
            --gray-50: #F8FAFC;
            --gray-100: #F1F5F9;
            --gray-200: #E2E8F0;
            --gray-300: #CBD5E1;
            --gray-400: #94A3B8;
            --gray-500: #64748B;
            --gray-600: #475569;
            --gray-700: #334155;
            --gray-900: #0F172A;

            --gradient-sunset: linear-gradient(135deg, #d62828 0%, #f77f00 100%);
            --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
            --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
            --card-border: 1px solid #E2E8F0}

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: var(--white);
            color: var(--gray-900);
            -webkit-font-smoothing: antialiased}

        .app {
            min-height: 100vh;
            position: relative}

        /* ===== SIDEBAR ===== */
        .sidebar {
            background: var(--deep-blue);
            padding: 1.5rem;
            position: fixed;
            height: 100vh;
            width: 260px;
            overflow-y: auto;
            z-index: 100;
            display: flex;
            flex-direction: column}

        .sidebar-logo {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--custard);
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin-bottom: 2rem;
            padding-bottom: 1.25rem;
            border-bottom: 1px solid rgba(234,226,183,0.12);
            text-decoration: none;
            letter-spacing: -0.02em}

        .logo-icon {
            width: 32px; height: 32px;

            display: flex;
            align-items: center;
            justify-content: center;
            
            flex-shrink: 0}
        .logo-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 6px}

        .logo-icon svg { width: 18px; height: 18px; stroke: white; stroke-width: 2.5}

        .nav-section { margin-bottom: 1.5rem}

        .nav-label {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--sunflower);
            font-weight: 700;
            margin-bottom: 0.75rem;
            padding-left: 0.75rem}

        .nav-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.625rem 0.75rem;
            border-radius: 8px;
            color: rgba(234,226,183,0.65);
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s;
            margin-bottom: 0.25rem;
            cursor: pointer;
            border: none;
            background: none;
            width: 100%;
            line-height: 1.5;
            text-align: left}

        .nav-item:hover {
            background: rgba(234,226,183,0.06);
            color: var(--custard)}

        .nav-item.active {
            background: var(--flag-red);
            color: white;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(214,40,40,0.3)}

        .nav-icon {
            width: 18px; height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0}

        .nav-icon svg {
            width: 18px; height: 18px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none}

        .badge {
            margin-left: auto;
            background: var(--tangerine);
            color: white;
            font-size: 0.65rem;
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
            font-weight: 700}

        .badge-new {
            margin-left: auto;
            background: var(--flag-red);
            color: white;
            font-size: 0.6rem;
            padding: 0.125rem 0.5rem;
            border-radius: 4px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.03em}

        /* ===== MAIN ===== */
        .main {
            margin-left: 260px;
            padding: 1.5rem 2rem;
            width: calc(100% - 260px);
            background: var(--white);
            min-height: 100vh;
            box-sizing: border-box}

        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.75rem;
            padding-bottom: 1rem;
            border-bottom: var(--card-border)}

        .search-box {
            position: relative;
            width: 320px}

        .search-box input {
            width: 100%;
            padding: 0.625rem 1rem 0.625rem 2.5rem;
            border: var(--card-border);
            border-radius: 10px;
            font-size: 0.875rem;
            background: var(--gray-50);
            outline: none;
            transition: all 0.2s;
            color: var(--gray-900);
            font-family: inherit}

        .search-box input:focus {
            border-color: var(--flag-red);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(214,40,40,0.08)}

        .search-box input::placeholder { color: var(--gray-400)}

        .search-icon {
            position: absolute;
            left: 0.875rem;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center}

        .search-icon svg {
            width: 16px; height: 16px;
            stroke: var(--gray-400);
            stroke-width: 2.5;
            fill: none}

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 0.75rem}

        .icon-btn {
            width: 40px; height: 40px;
            border-radius: 10px;
            border: var(--card-border);
            background: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            transition: all 0.2s;
            color: var(--gray-500)}

        .icon-btn:hover {
            border-color: var(--flag-red);
            color: var(--flag-red);
            background: var(--gray-50)}

        .icon-btn svg {
            width: 18px; height: 18px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none}

        .notification-dot {
            position: absolute;
            top: 8px; right: 8px;
            width: 8px; height: 8px;
            background: var(--flag-red);
            border-radius: 50%;
            border: 2px solid white}

        .user-pill {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.375rem 0.75rem 0.375rem 0.375rem;
            background: var(--white);
            border-radius: 9999px;
            border: var(--card-border);
            cursor: pointer;
            transition: all 0.2s}

        .user-pill:hover { border-color: var(--gray-300)}

        .avatar {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: var(--gradient-sunset);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 0.75rem;
            flex-shrink: 0}

        .user-name {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.3}

        .plan-badge {
            font-size: 0.65rem;
            background: rgba(214,40,40,0.08);
            color: var(--flag-red);
            padding: 0.125rem 0.5rem;
            border-radius: 4px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em}

        /* ===== STATS ===== */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
            width: 100%}

        .stat-card {
            background: var(--white);
            border-radius: 12px;
            padding: 1.25rem;
            border: var(--card-border);
            box-shadow: var(--card-shadow);
            transition: all 0.2s}

        .stat-card:hover {
            box-shadow: var(--card-shadow-hover);
            border-color: var(--gray-300)}

        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 0.75rem}

        .stat-title {
            font-size: 0.8rem;
            color: var(--gray-500);
            font-weight: 600}

        .stat-icon {
            width: 36px; height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center}

        .stat-icon svg { width: 18px; height: 18px; stroke-width: 2; fill: none}

        .stat-icon.blue { background: rgba(0,48,73,0.06); color: var(--deep-blue)}
        .stat-icon.red { background: rgba(214,40,40,0.06); color: var(--flag-red)}
        .stat-icon.orange { background: rgba(247,127,0,0.06); color: var(--tangerine)}
        .stat-icon.gold { background: rgba(252,191,73,0.12); color: #b45309}
        .stat-icon.green { background: rgba(16,185,129,0.08); color: #059669}
        .stat-icon.purple { background: rgba(139,92,246,0.08); color: #7c3aed}

        .stat-value {
            font-size: 1.625rem;
            font-weight: 800;
            margin-bottom: 0.25rem;
            color: var(--gray-900);
            letter-spacing: -0.02em}

        .stat-change {
            font-size: 0.8rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.25rem}

        .stat-change svg { width: 14px; height: 14px; stroke-width: 2.5; fill: none}
        .stat-change.up { color: var(--deep-blue)}
        .stat-change.down { color: var(--flag-red)}

        /* ===== DASHBOARD GRID ===== */
        .dashboard-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 1.25rem;
            margin-bottom: 1.25rem;
            width: 100%}

        .card {
            background: var(--white);
            border-radius: 12px;
            padding: 1.5rem;
            border: var(--card-border);
            box-shadow: var(--card-shadow);
            width: 100%}

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.25rem}

        .card-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--gray-900)}

        .card-action {
            font-size: 0.8rem;
            color: var(--flag-red);
            font-weight: 600;
            cursor: pointer;
            background: none;
            border: none;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            transition: opacity 0.2s}

        .card-action:hover { opacity: 0.8}
        .card-action svg { width: 14px; height: 14px; stroke-width: 2.5; fill: none}

        .section-panel {
            display: none;
            animation: fadeIn 0.3s ease}

        .section-panel.active {
            display: block}

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px)}
            to { opacity: 1; transform: translateY(0)}
        }

        /* ===== SEO SCORE ===== */
        .seo-score-container {
            display: flex;
            align-items: center;
            gap: 2rem}

        .score-ring {
            position: relative;
            width: 130px; height: 130px;
            flex-shrink: 0}

        .score-ring svg {
            transform: rotate(-90deg);
            width: 130px; height: 130px}

        .score-ring-bg {
            fill: none;
            stroke: var(--gray-200);
            stroke-width: 8}

        .score-ring-fill {
            fill: none;
            stroke: url(#scoreGradient);
            stroke-width: 8;
            stroke-linecap: round;
            stroke-dasharray: 377;
            stroke-dashoffset: 56;
            transition: stroke-dashoffset 1s ease}

        .score-text {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            text-align: center}

        .score-number {
            font-size: 2.25rem;
            font-weight: 800;
            background: var(--gradient-sunset);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1}

        .score-label {
            font-size: 0.7rem;
            color: var(--gray-500);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-top: 0.25rem}

        .score-breakdown { flex: 1}

        .breakdown-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem}

        .breakdown-bar {
            flex: 1;
            height: 6px;
            background: var(--gray-200);
            border-radius: 9999px;
            overflow: hidden}

        .breakdown-fill {
            height: 100%;
            border-radius: 9999px;
            transition: width 1s ease}

        .breakdown-label {
            font-size: 0.75rem;
            color: var(--gray-600);
            width: 75px;
            font-weight: 600}

        .breakdown-value {
            font-size: 0.75rem;
            font-weight: 700;
            width: 28px;
            text-align: right;
            color: var(--gray-900)}

        /* ===== TABLES ===== */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto}

        .data-table th {
            text-align: left;
            padding: 0.625rem 0.75rem;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--gray-500);
            font-weight: 700;
            border-bottom: var(--card-border)}

        .data-table td {
            padding: 0.75rem;
            font-size: 0.85rem;
            border-bottom: 1px solid var(--gray-100);
            color: var(--gray-700);
            font-weight: 500}

        .data-table tr:hover td { background: var(--gray-50)}
        .data-table td strong { color: var(--gray-900); font-weight: 600}

        .status {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.25rem 0.625rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 700}

        .status svg { width: 12px; height: 12px; stroke-width: 2.5; fill: none}
        .status.up { background: rgba(0,48,73,0.06); color: var(--deep-blue)}
        .status.down { background: rgba(214,40,40,0.06); color: var(--flag-red)}
        .status.same { background: var(--gray-100); color: var(--gray-500)}

        /* ===== COMPETITORS ===== */
        .competitor-list {
            display: flex;
            flex-direction: column;
            gap: 0.625rem}

        .competitor-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem;
            background: var(--gray-50);
            border-radius: 10px;
            border: 1px solid transparent;
            transition: all 0.2s}

        .competitor-item:hover {
            border-color: var(--gray-200);
            background: var(--white);
            box-shadow: var(--card-shadow)}

        .competitor-info {
            display: flex;
            align-items: center;
            gap: 0.75rem}

        .competitor-favicon {
            width: 36px; height: 36px;
            border-radius: 8px;
            background: var(--white);
            border: var(--card-border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray-500);
            flex-shrink: 0}

        .competitor-favicon svg { width: 18px; height: 18px; stroke-width: 1.5; fill: none}

        .competitor-name {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--gray-900)}

        .competitor-url {
            font-size: 0.75rem;
            color: var(--gray-500);
            margin-top: 0.125rem}

        .competitor-metrics {
            display: flex;
            gap: 1.25rem;
            text-align: right}

        .metric small {
            display: block;
            font-size: 0.6rem;
            color: var(--gray-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 700;
            margin-bottom: 0.125rem}

        .metric span {
            font-weight: 800;
            font-size: 0.85rem;
            color: var(--gray-900)}

        /* ===== AD SPY ===== */
        .ad-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
            width: 100%}

        .ad-card {
            border: var(--card-border);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.2s;
            background: var(--white);
            box-shadow: var(--card-shadow)}

        .ad-card:hover {
            box-shadow: var(--card-shadow-hover);
            border-color: var(--gray-300)}

        .ad-preview {
            height: 110px;
            background: linear-gradient(135deg, #003049 0%, #d62828 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.02em}

        .ad-info { padding: 1rem}

        .ad-platform {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--gray-500);
            font-weight: 700;
            margin-bottom: 0.375rem}

        .ad-text {
            font-size: 0.8rem;
            color: var(--gray-700);
            line-height: 1.5;
            margin-bottom: 0.75rem}

        .ad-actions { display: flex; gap: 0.5rem}

        .btn-sm {
            padding: 0.375rem 0.75rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            line-height: 1}

        .btn-sm svg { width: 14px; height: 14px; stroke-width: 2; fill: none}

        .btn-copy {
            background: var(--gray-100);
            color: var(--gray-700)}

        .btn-copy:hover { background: var(--gray-200)}

        .btn-spin {
            background: var(--gradient-sunset);
            color: white}

        .btn-spin:hover { opacity: 0.9}

        .full-width { grid-column: 1 / -1}

        .chart-container {
            height: 180px;
            background: linear-gradient(to right, rgba(214,40,40,0.03) 0%, rgba(247,127,0,0.03) 100%);
            border-radius: 10px;
            display: flex;
            align-items: end;
            padding: 1rem;
            gap: 0.5rem}

        .chart-bar {
            flex: 1;
            background: var(--gradient-sunset);
            border-radius: 4px 4px 0 0;
            opacity: 0.75;
            transition: opacity 0.2s;
            min-height: 20px}

        .chart-bar:hover { opacity: 1}

        .tabs {
            display: flex;
            gap: 0.25rem;
            margin-bottom: 1.25rem;
            border-bottom: var(--card-border);
            padding-bottom: 0.5rem}

        .tab {
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background: none;
            color: var(--gray-500);
            transition: all 0.2s;
            line-height: 1}

        .tab.active {
            background: rgba(214,40,40,0.06);
            color: var(--flag-red)}

        .tab:hover:not(.active) {
            background: var(--gray-50);
            color: var(--gray-700)}

        .select-dropdown {
            border: var(--card-border);
            border-radius: 8px;
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
            color: var(--gray-700);
            background: var(--white);
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            outline: none}

        .select-dropdown:focus { border-color: var(--flag-red)}

        /* ===== CONTENT DRAFTS ===== */
        .drafts-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.25rem;
            width: 100%}

        .draft-card {
            background: var(--white);
            border-radius: 12px;
            padding: 1.25rem;
            border: var(--card-border);
            box-shadow: var(--card-shadow);
            transition: all 0.2s;
            position: relative;
            overflow: hidden}

        .draft-card:hover {
            box-shadow: var(--card-shadow-hover);
            border-color: var(--gray-300)}

        .draft-card.article {
            border-left: 3px solid var(--deep-blue)}

        .draft-card.social {
            border-left: 3px solid var(--tangerine)}

        .draft-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 0.875rem}

        .draft-type {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 800;
            padding: 0.25rem 0.5rem;
            border-radius: 4px}

        .draft-type.article {
            background: rgba(0,48,73,0.08);
            color: var(--deep-blue)}

        .draft-type.social {
            background: rgba(247,127,0,0.08);
            color: var(--tangerine)}

        .draft-date {
            font-size: 0.7rem;
            color: var(--gray-400);
            font-weight: 600}

        .draft-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 0.5rem;
            line-height: 1.4}

        .draft-excerpt {
            font-size: 0.85rem;
            color: var(--gray-500);
            line-height: 1.6;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden}

        .draft-meta {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 0.75rem;
            color: var(--gray-500);
            font-weight: 600}

        .draft-meta span {
            display: flex;
            align-items: center;
            gap: 0.25rem}

        .draft-actions {
            display: flex;
            gap: 0.5rem}

        .draft-btn {
            padding: 0.5rem 0.875rem;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            line-height: 1}

        .draft-btn svg { width: 14px; height: 14px; stroke-width: 2; fill: none}

        .draft-btn-primary {
            background: var(--flag-red);
            color: white}

        .draft-btn-primary:hover { background: #b51f1f}

        .draft-btn-secondary {
            background: var(--gray-100);
            color: var(--gray-700)}

        .draft-btn-secondary:hover { background: var(--gray-200)}

        .draft-btn-ghost {
            background: transparent;
            color: var(--gray-500);
            border: var(--card-border)}

        .draft-btn-ghost:hover { color: var(--flag-red); border-color: var(--flag-red)}

        .content-editor {
            background: var(--white);
            border-radius: 12px;
            padding: 1.5rem;
            border: var(--card-border);
            box-shadow: var(--card-shadow);
            margin-bottom: 1.25rem}

        .editor-toolbar {
            display: flex;
            gap: 0.5rem;
            padding-bottom: 0.75rem;
            border-bottom: var(--card-border);
            margin-bottom: 1rem}

        .editor-tool {
            width: 32px; height: 32px;
            border-radius: 6px;
            border: var(--card-border);
            background: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--gray-600);
            font-size: 0.8rem;
            font-weight: 700;
            transition: all 0.2s}

        .editor-tool:hover {
            border-color: var(--flag-red);
            color: var(--flag-red);
            background: var(--gray-50)}

        .editor-textarea {
            width: 100%;
            min-height: 300px;
            border: none;
            outline: none;
            font-family: inherit;
            font-size: 0.9rem;
            line-height: 1.7;
            color: var(--gray-700);
            resize: vertical}

        .editor-textarea::placeholder { color: var(--gray-400)}

        .quota-bar {
            background: var(--gray-100);
            border-radius: 9999px;
            height: 8px;
            overflow: hidden;
            margin-top: 0.5rem}

        .quota-fill {
            height: 100%;
            background: var(--gradient-sunset);
            border-radius: 9999px;
            transition: width 0.3s}

        .quota-text {
            font-size: 0.75rem;
            color: var(--gray-500);
            font-weight: 600;
            margin-top: 0.375rem}

        .form-group { margin-bottom: 1.125rem}
        .form-label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--gray-900)}
        .form-input {
            width: 100%;
            padding: 0.625rem 0.875rem;
            border: var(--card-border);
            border-radius: 8px;
            font-size: 0.875rem;
            transition: all 0.2s;
            outline: none;
            color: var(--gray-900);
            font-family: inherit;
            font-weight: 500}
        .form-input:focus { border-color: var(--flag-red); box-shadow: 0 0 0 3px rgba(214,40,40,0.08)}
        .form-input::placeholder { color: var(--gray-400)}
        .form-hint { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.375rem; font-weight: 500}
        .select-input {
            width: 100%;
            padding: 0.625rem 0.875rem;
            border: var(--card-border);
            border-radius: 8px;
            font-size: 0.875rem;
            color: var(--gray-900);
            background: var(--white);
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            outline: none}
        .select-input:focus { border-color: var(--flag-red)}
        .textarea-input {
            width: 100%;
            padding: 0.625rem 0.875rem;
            border: var(--card-border);
            border-radius: 8px;
            font-size: 0.875rem;
            transition: all 0.2s;
            outline: none;
            color: var(--gray-900);
            font-family: inherit;
            font-weight: 500;
            resize: vertical;
            min-height: 80px}
        .textarea-input:focus { border-color: var(--flag-red); box-shadow: 0 0 0 3px rgba(214,40,40,0.08)}
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.625rem 1.25rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            text-decoration: none;
            line-height: 1.5}
        .btn-primary {
            background: var(--flag-red);
            color:white!important;
            box-shadow: 0 4px 12px rgba(214,40,40,0.25)}
        .btn-primary:hover{background:#b51f1f;color:white!important;transform:translateY(-1px)}
        .btn-white {
            background: var(--white);
            color: var(--gray-700);
            border: var(--card-border)}
        .btn-white:hover { border-color: var(--flag-red); color: var(--flag-red); background: var(--gray-50)}

        /* ===== WALKTHROUGH TOUR ===== */
        .walkthrough-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(6px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem}
        .walkthrough-overlay.active { display: flex}

        .walkthrough-card {
            background: var(--white);
            border-radius: 20px;
            padding: 2.5rem;
            max-width: 420px;
            width: 100%;
            text-align: center;
            box-shadow: 0 25px 80px rgba(0,0,0,0.25);
            animation: tourPop 0.35s cubic-bezier(0.16, 1, 0.3, 1)}

        @keyframes tourPop {
            from { opacity: 0; transform: scale(0.9) translateY(20px)}
            to   { opacity: 1; transform: scale(1) translateY(0)}}

        .walkthrough-card .wt-icon {
            width: 64px; height: 64px;
            background: var(--gradient-sunset);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.25rem;
            color: white}
        .walkthrough-card .wt-icon svg { width: 28px; height: 28px; stroke-width: 2}

        .walkthrough-card h2 {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--gray-900);
            margin-bottom: 0.75rem;
            letter-spacing: -0.02em}

        .walkthrough-card p {
            font-size: 0.95rem;
            color: var(--gray-500);
            line-height: 1.65;
            margin-bottom: 1.5rem}

        .wt-dots {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem}

        .wt-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--gray-200);
            transition: background 0.2s}
        .wt-dot.active { background: var(--flag-red)}

        .wt-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem}

        .wt-skip {
            background: none;
            border: none;
            color: var(--gray-400);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            padding: 0.5rem;
            transition: color 0.2s}
        .wt-skip:hover { color: var(--gray-700)}

        @media (max-width: 480px) {
            .walkthrough-card { padding: 1.75rem 1.25rem; border-radius: 16px}
            .walkthrough-card h2 { font-size: 1.15rem}
            .walkthrough-card p { font-size: 0.875rem}
        }

        .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%}
        .dash-footer {
            margin-top: 3rem;
            padding: 1.5rem 0;
            border-top: 1px solid var(--gray-200);
            text-align: center;
            color: var(--gray-400);
            font-size: 0.8rem;
            font-weight: 500}

        @media (max-width: 1024px) {
            .app { grid-template-columns: 1fr}
            .sidebar { display: none}
            .main { margin-left: 0; width: 100%; max-width: 100vw; padding: 1rem}
            .stats-grid { grid-template-columns: repeat(2, 1fr)}
            .dashboard-grid { grid-template-columns: 1fr}
            .ad-grid { grid-template-columns: 1fr}
            .drafts-grid { grid-template-columns: 1fr}
            .search-box { width: 100%; max-width: 280px}
            .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch}
        }

        @media (max-width: 640px) {
            .stats-grid { grid-template-columns: 1fr}
            .topbar { flex-direction: column; gap: 1rem; align-items: stretch}
            .search-box { width: 100%; max-width: none}
            .topbar-actions { justify-content: flex-end}
            .seo-score-container { flex-direction: column; gap: 1.5rem}
            .dash-footer { margin-top: 2rem; padding: 1rem 0; font-size: 0.75rem}
        }

        /* ===== ONBOARDING TOUR ===== */
        .tour-overlay {
            position: fixed;
            inset: 0;
            z-index: 9998;
            background: transparent;
            pointer-events: none;
        }
        .tour-spotlight {
            position: absolute;
            border-radius: 12px;
            box-shadow: 0 0 0 9999px rgba(0, 48, 73, 0.78);
            pointer-events: none;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 9999;
        }
        .tour-spotlight.pulse {
            animation: tourPulse 2s infinite;
        }
        @keyframes tourPulse {
            0%, 100% { box-shadow: 0 0 0 9999px rgba(0, 48, 73, 0.78), 0 0 0 4px rgba(252, 191, 73, 0.4); }
            50% { box-shadow: 0 0 0 9999px rgba(0, 48, 73, 0.78), 0 0 0 8px rgba(252, 191, 73, 0.15); }
        }
        .tour-tooltip {
            position: absolute;
            z-index: 10000;
            background: white;
            border-radius: 14px;
            padding: 1.25rem 1.5rem;
            max-width: 320px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.1);
            border: 1px solid var(--gray-200);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: auto;
        }
        .tour-tooltip h4 {
            margin: 0 0 0.4rem;
            font-size: 1rem;
            font-weight: 800;
            color: var(--deep-blue);
        }
        .tour-tooltip p {
            margin: 0 0 1rem;
            font-size: 0.875rem;
            color: var(--gray-600);
            line-height: 1.5;
        }
        .tour-tooltip .tour-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
        }
        .tour-tooltip .tour-step-label {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--gray-400);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .tour-tooltip .tour-btn-group {
            display: flex;
            gap: 0.5rem;
        }
        .tour-tooltip button {
            padding: 0.45rem 1rem;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }
        .tour-btn-skip {
            background: transparent;
            color: var(--gray-500);
        }
        .tour-btn-skip:hover {
            color: var(--gray-700);
        }
        .tour-btn-prev {
            background: var(--gray-100);
            color: var(--gray-700);
        }
        .tour-btn-prev:hover {
            background: var(--gray-200);
        }
        .tour-btn-next {
            background: var(--flag-red);
            color: white;
        }
        .tour-btn-next:hover {
            background: #b51f1f;
        }
        .tour-tooltip .tour-arrow {
            position: absolute;
            width: 12px;
            height: 12px;
            background: white;
            transform: rotate(45deg);
        }
        .tour-tooltip[data-placement="bottom"] .tour-arrow {
            top: -6px;
            left: 24px;
            border-top: 1px solid var(--gray-200);
            border-left: 1px solid var(--gray-200);
        }
        .tour-tooltip[data-placement="top"] .tour-arrow {
            bottom: -6px;
            left: 24px;
            border-bottom: 1px solid var(--gray-200);
            border-right: 1px solid var(--gray-200);
        }
        .tour-tooltip[data-placement="right"] .tour-arrow {
            left: -6px;
            top: 20px;
            border-bottom: 1px solid var(--gray-200);
            border-left: 1px solid var(--gray-200);
        }

        /* ===== AI VISIBILITY ===== */
        .llm-score-ring { position: relative; width: 140px; height: 140px; flex-shrink: 0 }
        .llm-score-ring svg { transform: rotate(-90deg); width: 140px; height: 140px }
        .llm-score-ring .score-ring-bg { fill: none; stroke: var(--gray-200); stroke-width: 10 }
        .llm-score-ring .score-ring-fill { fill: none; stroke: url(#llmGradient); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 377; stroke-dashoffset: 377; transition: stroke-dashoffset 1.2s ease }
        .llm-score-ring .score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center }
        .llm-score-ring .score-number { font-size: 2.5rem; font-weight: 800; background: var(--gradient-sunset); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1 }
        .llm-score-ring .score-label { font-size: 0.7rem; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem }

        .llm-history-chart { height: 140px; display: flex; align-items: end; gap: 0.5rem; padding: 0.75rem 0; }
        .llm-history-bar { flex: 1; background: var(--gradient-sunset); border-radius: 4px 4px 0 0; opacity: 0.7; transition: opacity 0.2s; min-height: 8px; position: relative; }
        .llm-history-bar:hover { opacity: 1; }
        .llm-history-bar .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--gray-900); color: white; font-size: 0.65rem; padding: 0.25rem 0.5rem; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; margin-bottom: 4px; }
        .llm-history-bar:hover .tooltip { opacity: 1; }

        .llm-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
        .llm-action-card { background: var(--gray-50); border-radius: 12px; padding: 1.25rem; border: var(--card-border); cursor: pointer; transition: all 0.2s; text-align: center; }
        .llm-action-card:hover { background: var(--white); border-color: var(--flag-red); box-shadow: var(--card-shadow-hover); }
        .llm-action-card .action-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--gradient-sunset); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; color: white; }
        .llm-action-card .action-icon svg { width: 20px; height: 20px; stroke-width: 2; fill: none; }
        .llm-action-card .action-title { font-size: 0.85rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.25rem; }
        .llm-action-card .action-desc { font-size: 0.75rem; color: var(--gray-500); line-height: 1.4; }

        .llm-result-box { background: var(--gray-900); color: #e2e8f0; border-radius: 10px; padding: 1rem; font-family: 'SF Mono', Monaco, monospace; font-size: 0.8rem; line-height: 1.6; max-height: 320px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
        .llm-result-box .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.7rem; cursor: pointer; }
        .llm-result-box .copy-btn:hover { background: rgba(255,255,255,0.2); }
        .llm-result-wrap { position: relative; }

        .schema-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
        .schema-badge.found { background: rgba(16,185,129,0.08); color: #059669; }
        .schema-badge.missing { background: rgba(214,40,40,0.06); color: var(--flag-red); }

        .issue-severity { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
        .issue-severity.critical { background: rgba(214,40,40,0.08); color: var(--flag-red); }
        .issue-severity.warning { background: rgba(247,127,0,0.08); color: var(--tangerine); }
        .issue-severity.info { background: var(--gray-100); color: var(--gray-500); }
    </style>
    <link rel="icon" type="image/svg+xml" href="assets/logo.svg">
</head>
<body>
    <div class="app">
        <aside class="sidebar">
            <a href="index.html" class="sidebar-logo">Ranking Africa
      <div class="logo-icon"><img src="assets/logo.svg" alt=""></div></a>

            <div class="nav-section">
                <div class="nav-label">Main</div>
                <button class="nav-item active" data-section="overview" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg></span>
                    Overview
                </button>
                <button class="nav-item" data-section="seo-suite" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><path d="M11 8v6"/><path d="M8 11h6"/></svg></span>
                    SEO Suite
                </button>
                <button class="nav-item" data-section="smm-spy" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span>
                    SMM Spy
                </button>
                <button class="nav-item" data-section="reports" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>
                    Reports
                </button>
                <button class="nav-item" data-section="analytics" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><path d="M3 3v18h18"/></svg></span>
                    Analytics
                    <span class="badge-new">NEW</span>
                </button>
            </div>

            <div class="nav-section">
                <div class="nav-label">AI Content</div>
                <button class="nav-item" data-section="content-drafts" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>
                    Content Drafts
                    <span class="badge">12</span>
                </button>
                <button class="nav-item" data-section="ai-writer" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></span>
                    AI Writer
                    <span class="badge-new">NEW</span>
                </button>
            </div>

            <div class="nav-section">
                <div class="nav-label">Tools</div>
                <button class="nav-item" data-section="site-analyzer" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></span>
                    Site Analyzer
                </button>
                <button class="nav-item" data-section="keywords" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span>
                    Keywords
                </button>
                <button class="nav-item" data-section="competitors" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>
                    Competitors
                </button>
                <button class="nav-item" data-section="ad-spinner" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></span>
                    Ad Spinner
                </button>
                <button class="nav-item" data-section="ai-visibility" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/><path d="M12 16v-4"/><path d="M12 8h.01"/><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
                    AI Visibility
                    <span class="badge-new">New</span>
                </button>
                <button class="nav-item" style="opacity:0.5;cursor:not-allowed;" title="Coming Q3 2026">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></span>
                    Social Manager
                    <span class="badge" style="background:var(--sunflower);color:var(--deep-blue);font-size:0.55rem;">SOON</span>
                </button>
            </div>

            <div class="nav-section" style="margin-top: auto;">
                <div class="nav-label">Account</div>
                <button class="nav-item" data-section="billing" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg></span>
                    Billing
                </button>
                <button class="nav-item" data-section="team" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>
                    Team
                </button>
                <button class="nav-item" data-section="settings" onclick="switchTab(this)">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>
                    Settings
                </button>
                <a href="index.html" class="nav-item" style="color: rgba(234,226,183,0.4);">
                    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg></span>
                    Logout
                </a>
            </div>
        </aside>

        <main class="main">
            <div class="topbar">
                <div class="search-box">
                    <span class="search-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></span>
                    <input type="text" placeholder="Search keywords, competitors, ads...">
                </div>
                <div class="topbar-actions">
                    <button class="icon-btn">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                        <span class="notification-dot"></span>
                    </button>
                    <button class="icon-btn">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                    </button>
                    <div class="user-pill">
                        <div class="avatar">JD</div>
                        <div>
                            <div class="user-name">John Doe</div>
                            <span class="plan-badge">Pro Plan</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- EMAIL VERIFICATION BANNER -->
            <div id="verify-banner" style="display:none;background:#fffbeb;border:1px solid #fcd34d;border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
                <div style="display:flex;align-items:center;gap:0.75rem;flex:1;">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    <span style="font-size:0.9rem;font-weight:600;color:#92400e;">Please verify your email to unlock all features.</span>
                </div>
                <button id="resend-verify-btn" class="btn btn-primary" style="padding:0.5rem 1rem;font-size:0.8rem;">Resend Email</button>
            </div>

            <!-- OVERVIEW SECTION -->
            <div id="section-overview" class="section-panel active">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">SEO Score</span>
                            <div class="stat-icon red"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg></div>
                        </div>
                        <div class="stat-value"><span id="stat-seo-score">87</span><span style="font-size:0.9rem; color:var(--gray-400); font-weight:500">/100</span></div>
                        <div class="stat-change up" id="stat-seo-change">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> <span>5.2% from last audit</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">Keywords Tracked</span>
                            <div class="stat-icon blue"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></div>
                        </div>
                        <div class="stat-value" id="stat-keywords">142</div>
                        <div class="stat-change up" id="stat-keywords-change">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> <span>12 new this week</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">Organic Traffic</span>
                            <div class="stat-icon orange"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
                        </div>
                        <div class="stat-value" id="stat-traffic">8.4K</div>
                        <div class="stat-change up" id="stat-traffic-change">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> <span>18% vs last month</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">Content Drafts</span>
                            <div class="stat-icon purple"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
                        </div>
                        <div class="stat-value" id="stat-drafts">12</div>
                        <div class="stat-change up" id="stat-drafts-change">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> <span>4 new today</span>
                        </div>
                    </div>
                </div>

                <div class="dashboard-grid">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Website SEO Health</h3>
                            <button class="card-action">
                                Run Audit <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                            </button>
                        </div>
                        <div class="seo-score-container">
                            <div class="score-ring">
                                <svg width="130" height="130" viewBox="0 0 130 130">
                                    <defs>
                                        <linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                            <stop offset="0%" style="stop-color:#d62828"/>
                                            <stop offset="100%" style="stop-color:#f77f00"/>
                                        </linearGradient>
                                    </defs>
                                    <circle class="score-ring-bg" cx="65" cy="65" r="55"/>
                                    <circle class="score-ring-fill" cx="65" cy="65" r="55"/>
                                </svg>
                                <div class="score-text">
                                    <div class="score-number" id="seo-score-number">87</div>
                                    <div class="score-label" id="seo-score-label">Good</div>
                                </div>
                            </div>
                            <div class="score-breakdown">
                                <div class="breakdown-item">
                                    <span class="breakdown-label">Performance</span>
                                    <div class="breakdown-bar"><div class="breakdown-fill" id="breakdown-performance-bar" style="width: 92%; background: var(--deep-blue);"></div></div>
                                    <span class="breakdown-value" id="breakdown-performance-value">92</span>
                                </div>
                                <div class="breakdown-item">
                                    <span class="breakdown-label">SEO</span>
                                    <div class="breakdown-bar"><div class="breakdown-fill" id="breakdown-seo-bar" style="width: 85%; background: var(--flag-red);"></div></div>
                                    <span class="breakdown-value" id="breakdown-seo-value">85</span>
                                </div>
                                <div class="breakdown-item">
                                    <span class="breakdown-label">Mobile</span>
                                    <div class="breakdown-bar"><div class="breakdown-fill" id="breakdown-mobile-bar" style="width: 78%; background: var(--tangerine);"></div></div>
                                    <span class="breakdown-value" id="breakdown-mobile-value">78</span>
                                </div>
                                <div class="breakdown-item">
                                    <span class="breakdown-label">Security</span>
                                    <div class="breakdown-bar"><div class="breakdown-fill" id="breakdown-security-bar" style="width: 95%; background: var(--sunflower);"></div></div>
                                    <span class="breakdown-value" id="breakdown-security-value">95</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Traffic Overview</h3>
                            <select class="select-dropdown">
                                <option>Last 7 Days</option>
                                <option>Last 30 Days</option>
                            </select>
                        </div>
                        <div class="chart-container" id="dash-traffic-mini-chart">
                            <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:0.5rem;"><div class="chart-bar" style="height:20%;"></div><div style="font-size:0.7rem;color:var(--gray-400);">—</div></div>
                            <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:0.5rem;"><div class="chart-bar" style="height:20%;"></div><div style="font-size:0.7rem;color:var(--gray-400);">—</div></div>
                            <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:0.5rem;"><div class="chart-bar" style="height:20%;"></div><div style="font-size:0.7rem;color:var(--gray-400);">—</div></div>
                            <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:0.5rem;"><div class="chart-bar" style="height:20%;"></div><div style="font-size:0.7rem;color:var(--gray-400);">—</div></div>
                            <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:0.5rem;"><div class="chart-bar" style="height:20%;"></div><div style="font-size:0.7rem;color:var(--gray-400);">—</div></div>
                            <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:0.5rem;"><div class="chart-bar" style="height:20%;"></div><div style="font-size:0.7rem;color:var(--gray-400);">—</div></div>
                            <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:0.5rem;"><div class="chart-bar" style="height:20%;"></div><div style="font-size:0.7rem;color:var(--gray-400);">—</div></div>
                        </div>
                        <div id="dash-traffic-mini-labels" style="display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.65rem; color: var(--gray-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;">
                            <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Keyword Rankings</h3>
                            <button class="card-action">
                                View All <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                            </button>
                        </div>
                        <div class="table-wrap"><table class="data-table">
                            <thead>
                                <tr><th>Keyword</th><th>Position</th><th>Change</th><th>Volume</th></tr>
                            </thead>
                            <tbody id="dash-keywords-tbody">
                                <tr><td colspan="4" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading keywords...</td></tr>
                            </tbody>
                        </table></div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Competitor Watch</h3>
                            <button class="card-action">+ Add</button>
                        </div>
                        <div class="competitor-list" id="dash-competitors-list">
                            <div class="competitor-item" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading competitors...</div>
                        </div>
                    </div>

                    <div class="card full-width">
                        <div class="card-header">
                            <h3 class="card-title">Ad Intelligence</h3>
                            <div class="tabs">
                                <button class="tab active">Facebook</button>
                                <button class="tab">Instagram</button>
                                <button class="tab">X / Twitter</button>
                                <button class="tab">LinkedIn</button>
                            </div>
                        </div>
                        <div class="ad-grid" id="dash-ads-grid">
                            <div class="ad-card" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading ads...</div>
                        </div>
                    </div>
                </div>

                <!-- AI CONTENT DRAFTS SECTION -->
                <div class="dashboard-grid" style="margin-top: 1.25rem;">
                    <div class="card full-width">
                        <div class="card-header">
                            <h3 class="card-title">AI Content Drafts</h3>
                            <div style="display: flex; gap: 0.75rem; align-items: center;">
                                <select class="select-dropdown">
                                    <option>All Drafts</option>
                                    <option>Articles</option>
                                    <option>Social Posts</option>
                                    <option>Published</option>
                                </select>
                                <button class="card-action" onclick="switchTab(document.querySelector('[data-section=\'ai-writer\']'))">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Generate New
                                </button>
                            </div>
                        </div>
                        <div style="display: flex; gap: 1.5rem; margin-bottom: 1.5rem;">
                            <div style="flex: 1;">
                                <div style="font-size: 0.75rem; color: var(--gray-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;">Articles Quota</div>
                                <div class="quota-bar"><div class="quota-fill" id="quota-articles-bar" style="width: 0%;"></div></div>
                                <div class="quota-text" id="quota-articles-text">Loading...</div>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-size: 0.75rem; color: var(--gray-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;">Social Posts Quota</div>
                                <div class="quota-bar"><div class="quota-fill" id="quota-social-bar" style="width: 0%;"></div></div>
                                <div class="quota-text" id="quota-social-text">Loading...</div>
                            </div>
                        </div>
                        <div class="drafts-grid" id="dash-drafts-grid">
                            <div class="draft-card" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading drafts...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SEO SUITE SECTION -->
            <div id="section-seo-suite" class="section-panel">
                <div class="stats-grid">
                    <div class="stat-card"><div class="stat-header"><span class="stat-title">Site Health</span><div class="stat-icon red"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></div></div><div class="stat-value">87<span style="font-size:0.9rem;color:var(--gray-400);font-weight:500">/100</span></div><div class="stat-change up"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> 5.2% from last audit</div></div>
                    <div class="stat-card"><div class="stat-header"><span class="stat-title">Pages Crawled</span><div class="stat-icon blue"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div></div><div class="stat-value">142</div><div class="stat-change up"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> 12 new this week</div></div>
                    <div class="stat-card"><div class="stat-header"><span class="stat-title">Issues Found</span><div class="stat-icon orange"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div></div><div class="stat-value">23</div><div class="stat-change down"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg> 3 fixed today</div></div>
                    <div class="stat-card"><div class="stat-header"><span class="stat-title">Backlinks</span><div class="stat-icon green"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></div></div><div class="stat-value">1.2K</div><div class="stat-change up"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> 45 new this month</div></div>
                </div>
                <div class="dashboard-grid">
                    <div class="card full-width">
                        <div class="card-header"><h3 class="card-title">SEO Audit Results</h3><button class="card-action" onclick="runAudit()">Run New Audit</button></div>
                        <div class="table-wrap"><table class="data-table">
                            <thead><tr><th>Category</th><th>Issue</th><th>Severity</th><th>Status</th><th>Action</th></tr></thead>
                            <tbody id="seo-audit-tbody">
                                <tr><td colspan="5" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading audit results…</td></tr>
                            </tbody>
                        </table></div>
                    </div>
                </div>
            </div>

            <!-- SMM SPY SECTION -->
            <div id="section-smm-spy" class="section-panel">
                <div class="stats-grid">
                    <div class="stat-card"><div class="stat-header"><span class="stat-title">Ads Monitored</span><div class="stat-icon blue"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div></div><div class="stat-value" id="smm-stat-ads">—</div><div class="stat-change up" id="smm-stat-ads-sub">&nbsp;</div></div>
                    <div class="stat-card"><div class="stat-header"><span class="stat-title">Competitors</span><div class="stat-icon red"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div></div><div class="stat-value" id="smm-stat-competitors">—</div><div class="stat-change same" id="smm-stat-competitors-sub">&nbsp;</div></div>
                    <div class="stat-card"><div class="stat-header"><span class="stat-title">Platforms</span><div class="stat-icon orange"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div></div><div class="stat-value" id="smm-stat-platforms">—</div><div class="stat-change up" id="smm-stat-platforms-sub">&nbsp;</div></div>
                    <div class="stat-card"><div class="stat-header"><span class="stat-title">AI Spins</span><div class="stat-icon purple"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div></div><div class="stat-value" id="smm-stat-spins">—</div><div class="stat-change up" id="smm-stat-spins-sub">&nbsp;</div></div>
                </div>
                <div class="dashboard-grid">
                    <div class="card full-width">
                        <div class="card-header"><h3 class="card-title">Saved Ads Library</h3><div class="tabs"><button class="tab active" onclick="filterAds(this,'all')">All</button><button class="tab" onclick="filterAds(this,'facebook')">Facebook</button><button class="tab" onclick="filterAds(this,'instagram')">Instagram</button><button class="tab" onclick="filterAds(this,'x')">X</button><button class="tab" onclick="filterAds(this,'linkedin')">LinkedIn</button></div></div>
                        <div class="ad-grid" id="smm-ads-grid">
                            <div class="ad-card"><div class="ad-preview" style="background:linear-gradient(135deg,#003049,#d62828);">Ad Preview</div><div class="ad-info"><div class="ad-platform">Facebook &bull; Competitor A</div><div class="ad-text">"Double your leads in 30 days with our proven funnel strategy."</div><div class="ad-actions"><button class="btn-sm btn-copy">Copy</button><button class="btn-sm btn-spin">AI Spin</button></div></div></div>
                            <div class="ad-card"><div class="ad-preview" style="background:linear-gradient(135deg,#f77f00,#fcbf49);">Ad Preview</div><div class="ad-info"><div class="ad-platform">Instagram &bull; Rival Digital</div><div class="ad-text">"Your competitors are ranking higher. Here's why."</div><div class="ad-actions"><button class="btn-sm btn-copy">Copy</button><button class="btn-sm btn-spin">AI Spin</button></div></div></div>
                            <div class="ad-card"><div class="ad-preview" style="background:linear-gradient(135deg,#003049,#0077b5);">Ad Preview</div><div class="ad-info"><div class="ad-platform">LinkedIn &bull; SEO Masters KE</div><div class="ad-text">"B2B lead generation through organic LinkedIn SEO."</div><div class="ad-actions"><button class="btn-sm btn-copy">Copy</button><button class="btn-sm btn-spin">AI Spin</button></div></div></div>
                            <div class="ad-card"><div class="ad-preview" style="background:linear-gradient(135deg,#d62828,#f77f00);">Ad Preview</div><div class="ad-info"><div class="ad-platform">X &bull; Competitor A</div><div class="ad-text">"Stop losing customers to competitors ranking higher."</div><div class="ad-actions"><button class="btn-sm btn-copy">Copy</button><button class="btn-sm btn-spin">AI Spin</button></div></div></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- REPORTS SECTION -->
            <div id="section-reports" class="section-panel">
                <div class="dashboard-grid">
                    <div class="card full-width">
                        <div class="card-header"><h3 class="card-title">Generated Reports</h3><button class="card-action" onclick="generateReport()">+ New Report</button></div>
                        <div class="table-wrap"><table class="data-table">
                            <thead><tr><th>Report Name</th><th>Type</th><th>Date</th><th>Status</th><th>Actions</th></tr></thead>
                            <tbody id="reports-tbody">
                                <tr><td colspan="5" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading reports...</td></tr>
                            </tbody>
                        </table></div>
                    </div>
                </div>
            </div>

            <!-- ANALYTICS SECTION -->
            <div id="section-analytics" class="section-panel">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-header"><span class="stat-title">Visitors</span><div class="stat-icon blue"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div></div>
                        <div class="stat-value" id="analytics-visitors">—</div>
                        <div class="stat-change up" id="analytics-visitors-change"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> <span>vs last period</span></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header"><span class="stat-title">Page Views</span><div class="stat-icon orange"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div></div>
                        <div class="stat-value" id="analytics-pageviews">—</div>
                        <div class="stat-change up" id="analytics-pageviews-change"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> <span>vs last period</span></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header"><span class="stat-title">Bounce Rate</span><div class="stat-icon red"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div></div>
                        <div class="stat-value" id="analytics-bounce">—</div>
                        <div class="stat-change same" id="analytics-bounce-label"><span>Average</span></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header"><span class="stat-title">Conversion Rate</span><div class="stat-icon green"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div></div>
                        <div class="stat-value" id="analytics-conv-rate">—</div>
                        <div class="stat-change up" id="analytics-conv-label"><span id="analytics-conv-count">0 conversions</span></div>
                    </div>
                </div>
                <div class="dashboard-grid">
                    <div class="card full-width">
                        <div class="card-header">
                            <h3 class="card-title">Traffic Overview</h3>
                            <div style="display:flex;gap:0.75rem;align-items:center;">
                                <select class="select-dropdown" id="analytics-period" onchange="loadAnalytics()">
                                    <option value="7d">Last 7 Days</option>
                                    <option value="30d" selected>Last 30 Days</option>
                                    <option value="90d">Last 90 Days</option>
                                </select>
                            </div>
                        </div>
                        <div style="display:flex;gap:1.5rem;margin-bottom:1.5rem;">
                            <div style="flex:1;">
                                <div class="chart-container" id="analytics-traffic-chart" style="height:220px;">
                                    <div style="text-align:center;color:var(--gray-400);padding:2rem;">Loading traffic data...</div>
                                </div>
                                <div style="display:flex;justify-content:space-between;margin-top:0.5rem;font-size:0.65rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;" id="analytics-chart-labels"></div>
                            </div>
                        </div>
                        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;">
                            <div style="background:var(--gray-50);border-radius:10px;padding:1rem;text-align:center;">
                                <div style="font-size:1.5rem;font-weight:800;color:var(--deep-blue);" id="analytics-sessions">—</div>
                                <div style="font-size:0.75rem;color:var(--gray-500);font-weight:600;">Sessions</div>
                            </div>
                            <div style="background:var(--gray-50);border-radius:10px;padding:1rem;text-align:center;">
                                <div style="font-size:1.5rem;font-weight:800;color:var(--flag-red);" id="analytics-avg-session">—</div>
                                <div style="font-size:0.75rem;color:var(--gray-500);font-weight:600;">Avg. Session</div>
                            </div>
                            <div style="background:var(--gray-50);border-radius:10px;padding:1rem;text-align:center;">
                                <div style="font-size:1.5rem;font-weight:800;color:var(--tangerine);" id="analytics-revenue">—</div>
                                <div style="font-size:0.75rem;color:var(--gray-500);font-weight:600;">Conv. Value</div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header"><h3 class="card-title">Top Pages</h3></div>
                        <div class="table-wrap"><table class="data-table">
                            <thead><tr><th>Page</th><th>Views</th><th>Unique</th><th>Avg Time</th></tr></thead>
                            <tbody id="analytics-pages-tbody">
                                <tr><td colspan="4" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading pages...</td></tr>
                            </tbody>
                        </table></div>
                    </div>

                    <div class="card">
                        <div class="card-header"><h3 class="card-title">Traffic Sources</h3></div>
                        <div id="analytics-sources-list" style="display:flex;flex-direction:column;gap:0.625rem;">
                            <div style="text-align:center;color:var(--gray-400);padding:2rem;">Loading sources...</div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header"><h3 class="card-title">Conversion Goals</h3><button class="card-action" onclick="showGoalForm()">+ Add Goal</button></div>
                        <div id="analytics-goals-list" style="display:flex;flex-direction:column;gap:0.625rem;">
                            <div style="text-align:center;color:var(--gray-400);padding:2rem;">Loading goals...</div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header"><h3 class="card-title">Recent Conversions</h3></div>
                        <div id="analytics-recent-list" style="display:flex;flex-direction:column;gap:0.625rem;">
                            <div style="text-align:center;color:var(--gray-400);padding:2rem;">Loading conversions...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- CONTENT DRAFTS SECTION -->
            <div id="section-content-drafts" class="section-panel">
                <div class="dashboard-grid">
                    <div class="card full-width">
                        <div class="card-header"><h3 class="card-title">All Content Drafts</h3><div style="display:flex;gap:0.75rem;align-items:center;"><select class="select-dropdown"><option>All Drafts</option><option>Articles</option><option>Social Posts</option><option>Published</option></select><button class="card-action" onclick="switchTab(document.querySelector('[data-section=\'ai-writer\']'))"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Generate New</button></div></div>
                        <div style="display:flex;gap:1.5rem;margin-bottom:1.5rem;">
                            <div style="flex:1;"><div style="font-size:0.75rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.5rem;">Articles Quota</div><div class="quota-bar"><div class="quota-fill" id="quota-articles-bar-2" style="width:0%;"></div></div><div class="quota-text" id="quota-articles-text-2">Loading...</div></div>
                            <div style="flex:1;"><div style="font-size:0.75rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.5rem;">Social Posts Quota</div><div class="quota-bar"><div class="quota-fill" id="quota-social-bar-2" style="width:0%;"></div></div><div class="quota-text" id="quota-social-text-2">Loading...</div></div>
                        </div>
                        <div class="drafts-grid" id="content-drafts-grid">
                            <div class="draft-card" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading drafts...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- AI WRITER SECTION -->
            <div id="section-ai-writer" class="section-panel">
                <div class="dashboard-grid">
                    <div class="card" style="grid-column:1/-1;">
                        <div class="card-header"><h3 class="card-title">AI Content Writer</h3><button class="card-action">Generate</button></div>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">
                            <div>
                                <div class="form-group"><label class="form-label">Content Type</label><select class="select-input"><option>SEO Blog Article</option><option>Facebook Post</option><option>Instagram Caption</option><option>X/Twitter Thread</option><option>LinkedIn Article</option></select></div>
                                <div class="form-group"><label class="form-label">Topic / Keyword</label><input type="text" class="form-input" placeholder="e.g. SEO tools for Kenyan startups"></div>
                                <div class="form-group"><label class="form-label">Tone of Voice</label><select class="select-input"><option>Professional</option><option>Casual</option><option>Persuasive</option><option>Technical</option><option>Friendly</option></select></div>
                                <div class="form-group"><label class="form-label">Target Word Count</label><select class="select-input"><option>500 words</option><option selected>800 words</option><option>1,200 words</option><option>1,500 words</option></select></div>
                            </div>
                            <div>
                                <div class="form-group"><label class="form-label">Target Audience</label><input type="text" class="form-input" placeholder="e.g. Small business owners in Nairobi"></div>
                                <div class="form-group"><label class="form-label">Key Points to Cover</label><textarea class="textarea-input" placeholder="Enter 3-5 key points you want the article to cover..."></textarea></div>
                                <div class="form-group"><label class="form-label">Include CTA</label><label class="toggle-switch" style="position:relative;display:inline-block;width:44px;height:24px;"><input type="checkbox" checked><span style="position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--flag-red);border-radius:24px;transition:0.3s;"><span style="position:absolute;content:'';height:18px;width:18px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.3s;transform:translateX(20px);"></span></span></label></div>
                            </div>
                        </div>
                        <div style="margin-top:1rem;padding-top:1rem;border-top:var(--card-border);">
                            <button class="btn btn-primary" style="width:100%;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> Generate Content</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SITE ANALYZER SECTION -->
            <div id="section-site-analyzer" class="section-panel">
                <div class="dashboard-grid">
                    <div class="card" style="grid-column:1/-1;">
                        <div class="card-header"><h3 class="card-title">Website Analyzer</h3><button class="card-action" onclick="runAudit()">Run Analysis</button></div>
                        <div style="display:flex;gap:1rem;margin-bottom:1.5rem;">
                            <input type="text" class="form-input" placeholder="Enter website URL (e.g. https://yourcompany.co.ke)" style="flex:1;">
                            <button class="btn btn-primary">Analyze</button>
                        </div>
                        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;">
                            <div style="background:var(--gray-50);border-radius:10px;padding:1rem;text-align:center;"><div id="site-score-performance" style="font-size:2rem;font-weight:800;color:var(--deep-blue);">—</div><div style="font-size:0.75rem;color:var(--gray-500);font-weight:600;">Performance</div></div>
                            <div style="background:var(--gray-50);border-radius:10px;padding:1rem;text-align:center;"><div id="site-score-seo" style="font-size:2rem;font-weight:800;color:var(--flag-red);">—</div><div style="font-size:0.75rem;color:var(--gray-500);font-weight:600;">SEO</div></div>
                            <div style="background:var(--gray-50);border-radius:10px;padding:1rem;text-align:center;"><div id="site-score-mobile" style="font-size:2rem;font-weight:800;color:var(--tangerine);">—</div><div style="font-size:0.75rem;color:var(--gray-500);font-weight:600;">Mobile</div></div>
                            <div style="background:var(--gray-50);border-radius:10px;padding:1rem;text-align:center;"><div id="site-score-security" style="font-size:2rem;font-weight:800;color:#059669;">—</div><div style="font-size:0.75rem;color:var(--gray-500);font-weight:600;">Security</div></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- KEYWORDS SECTION -->
            <div id="section-keywords" class="section-panel">
                <div class="dashboard-grid">
                    <div class="card full-width">
                        <div class="card-header"><h3 class="card-title">Keyword Rankings</h3><div style="display:flex;gap:0.75rem;align-items:center;"><input type="text" class="form-input" id="keyword-input" placeholder="Add new keyword..." style="width:200px;" onkeydown="if(event.key==='Enter')addKeyword()"><button class="card-action" onclick="addKeyword()">+ Add</button></div></div>
                        <div class="table-wrap"><table class="data-table">
                            <thead><tr><th>Keyword</th><th>Position</th><th>Change</th><th>Volume</th><th>Difficulty</th><th>Actions</th></tr></thead>
                            <tbody id="keywords-tbody">
                                <tr><td colspan="6" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading keywords...</td></tr>
                            </tbody>
                        </table></div>
                    </div>
                </div>
            </div>

            <!-- COMPETITORS SECTION -->
            <div id="section-competitors" class="section-panel">
                <div class="dashboard-grid">
                    <div class="card full-width">
                        <div class="card-header"><h3 class="card-title">Competitor Monitor</h3><div style="display:flex;gap:0.75rem;align-items:center;"><input type="text" class="form-input" id="competitor-input" placeholder="Add competitor domain..." style="width:250px;" onkeydown="if(event.key==='Enter')addCompetitor()"><button class="card-action" onclick="addCompetitor()">+ Add</button></div></div>
                        <div class="competitor-list" id="competitors-list">
                            <div class="competitor-item" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading competitors...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- AD SPINNER SECTION -->
            <div id="section-ad-spinner" class="section-panel">
                <div class="dashboard-grid">
                    <div class="card" style="grid-column:1/-1;">
                        <div class="card-header"><h3 class="card-title">AI Ad Spinner</h3><button class="card-action">Spin New Ad</button></div>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">
                            <div>
                                <div class="form-group"><label class="form-label">Paste Competitor Ad Copy</label><textarea class="textarea-input" style="min-height:120px;" placeholder="Paste the ad copy you want to spin..."></textarea></div>
                                <div class="form-group"><label class="form-label">Platform</label><select class="select-input"><option>Facebook</option><option>Instagram</option><option>X / Twitter</option><option>LinkedIn</option></select></div>
                                <div class="form-group"><label class="form-label">Creativity Level</label><select class="select-input"><option>Conservative</option><option selected>Balanced</option><option>Aggressive</option></select></div>
                            </div>
                            <div>
                                <div class="form-group"><label class="form-label">Your Brand Voice</label><select class="select-input"><option>Professional</option><option>Casual</option><option>Bold</option><option>Empathetic</option></select></div>
                                <div class="form-group"><label class="form-label">Target Audience</label><input type="text" class="form-input" placeholder="e.g. Nairobi business owners"></div>
                                <div class="form-group"><label class="form-label">Include CTA</label><label class="toggle-switch" style="position:relative;display:inline-block;width:44px;height:24px;"><input type="checkbox" checked><span style="position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--flag-red);border-radius:24px;transition:0.3s;"><span style="position:absolute;content:'';height:18px;width:18px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.3s;transform:translateX(20px);"></span></span></label></div>
                                <div style="background:var(--gray-50);border-radius:8px;padding:1rem;margin-top:0.5rem;"><div style="font-size:0.75rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.5rem;">Spins Remaining</div><div class="quota-bar"><div class="quota-fill" style="width:42%;"></div></div><div class="quota-text">42 of 100 spins used this month (Pro Plan)</div></div>
                            </div>
                        </div>
                        <div style="margin-top:1rem;padding-top:1rem;border-top:var(--card-border);">
                            <button class="btn btn-primary" style="width:100%;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> Generate 3 Variants</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- AI VISIBILITY SECTION -->
            <div id="section-ai-visibility" class="section-panel">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">LLM Readiness</span>
                            <div class="stat-icon purple"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/><path d="M12 16v-4"/><path d="M12 8h.01"/><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
                        </div>
                        <div class="stat-value" id="llm-stat-score">—<span style="font-size:0.9rem;color:var(--gray-400);font-weight:500">/100</span></div>
                        <div class="stat-change up" id="llm-stat-label"><span>Run your first audit</span></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">Schema Types</span>
                            <div class="stat-icon blue"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
                        </div>
                        <div class="stat-value" id="llm-stat-schemas">—</div>
                        <div class="stat-change up" id="llm-stat-schemas-label"><span>Detected on last scan</span></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">Word Count</span>
                            <div class="stat-icon orange"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div>
                        </div>
                        <div class="stat-value" id="llm-stat-words">—</div>
                        <div class="stat-change up" id="llm-stat-words-label"><span>On homepage</span></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">Issues Found</span>
                            <div class="stat-icon red"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
                        </div>
                        <div class="stat-value" id="llm-stat-issues">—</div>
                        <div class="stat-change same" id="llm-stat-issues-label"><span>Last scan</span></div>
                    </div>
                </div>

                <div class="dashboard-grid">
                    <!-- Score Ring + Breakdown -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">LLM Readiness Score</h3>
                            <button class="card-action" onclick="runLlmAudit()" id="llm-run-btn">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> Run Audit
                            </button>
                        </div>
                        <div style="display:flex;align-items:center;gap:2rem;">
                            <div class="llm-score-ring">
                                <svg width="140" height="140" viewBox="0 0 140 140">
                                    <defs>
                                        <linearGradient id="llmGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                            <stop offset="0%" style="stop-color:#d62828"/>
                                            <stop offset="100%" style="stop-color:#f77f00"/>
                                        </linearGradient>
                                    </defs>
                                    <circle class="score-ring-bg" cx="70" cy="70" r="60"/>
                                    <circle class="score-ring-fill" id="llm-score-ring-fill" cx="70" cy="70" r="60"/>
                                </svg>
                                <div class="score-text">
                                    <div class="score-number" id="llm-score-number">—</div>
                                    <div class="score-label" id="llm-score-label">Pending</div>
                                </div>
                            </div>
                            <div style="flex:1;">
                                <div class="breakdown-item">
                                    <span class="breakdown-label">Structure</span>
                                    <div class="breakdown-bar"><div class="breakdown-fill" id="llm-bar-structure" style="width:0%;background:var(--deep-blue);"></div></div>
                                    <span class="breakdown-value" id="llm-val-structure">—</span>
                                </div>
                                <div class="breakdown-item">
                                    <span class="breakdown-label">Entities</span>
                                    <div class="breakdown-bar"><div class="breakdown-fill" id="llm-bar-entities" style="width:0%;background:var(--flag-red);"></div></div>
                                    <span class="breakdown-value" id="llm-val-entities">—</span>
                                </div>
                                <div class="breakdown-item">
                                    <span class="breakdown-label">Content</span>
                                    <div class="breakdown-bar"><div class="breakdown-fill" id="llm-bar-content" style="width:0%;background:var(--tangerine);"></div></div>
                                    <span class="breakdown-value" id="llm-val-content">—</span>
                                </div>
                                <div class="breakdown-item">
                                    <span class="breakdown-label">Authority</span>
                                    <div class="breakdown-bar"><div class="breakdown-fill" id="llm-bar-authority" style="width:0%;background:var(--sunflower);"></div></div>
                                    <span class="breakdown-value" id="llm-val-authority">—</span>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top:1rem;padding-top:1rem;border-top:var(--card-border);">
                            <div style="font-size:0.75rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.5rem;">Audit History</div>
                            <div class="llm-history-chart" id="llm-history-chart">
                                <div style="text-align:center;color:var(--gray-400);font-size:0.8rem;width:100%;">No audits yet</div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Quick Actions</h3>
                        </div>
                        <div class="llm-quick-actions">
                            <div class="llm-action-card" onclick="generateFAQ()">
                                <div class="action-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
                                <div class="action-title">Generate FAQ</div>
                                <div class="action-desc">Create AI FAQs from your website content</div>
                            </div>
                            <div class="llm-action-card" onclick="generateSchema()">
                                <div class="action-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
                                <div class="action-title">Schema Markup</div>
                                <div class="action-desc">Generate JSON-LD structured data</div>
                            </div>
                            <div class="llm-action-card" onclick="optimizeForLLM()">
                                <div class="action-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
                                <div class="action-title">Optimize Content</div>
                                <div class="action-desc">Rewrite content for AI citations</div>
                            </div>
                        </div>
                        <div style="margin-top:1rem;padding-top:1rem;border-top:var(--card-border);">
                            <div style="display:flex;gap:1.5rem;">
                                <div style="flex:1;">
                                    <div style="font-size:0.75rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.5rem;">LLM Audits Quota</div>
                                    <div class="quota-bar"><div class="quota-fill" id="quota-llm-bar" style="width:0%;"></div></div>
                                    <div class="quota-text" id="quota-llm-text">Loading...</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Issues -->
                    <div class="card full-width">
                        <div class="card-header">
                            <h3 class="card-title">Issues & Recommendations</h3>
                            <button class="card-action" onclick="runLlmAudit()">Refresh</button>
                        </div>
                        <div class="table-wrap">
                            <table class="data-table">
                                <thead><tr><th>Severity</th><th>Category</th><th>Issue</th><th>Recommendation</th></tr></thead>
                                <tbody id="llm-issues-tbody">
                                    <tr><td colspan="4" style="text-align:center;color:var(--gray-400);padding:2rem;">Run an audit to see issues</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Schema Inventory -->
                    <div class="card full-width">
                        <div class="card-header">
                            <h3 class="card-title">Schema Inventory</h3>
                        </div>
                        <div id="llm-schema-inventory" style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;">
                            <div style="text-align:center;color:var(--gray-400);padding:2rem;grid-column:1/-1;">Run an audit to detect schema markup</div>
                        </div>
                    </div>

                    <!-- Result Area (hidden by default) -->
                    <div class="card full-width" id="llm-result-card" style="display:none;">
                        <div class="card-header">
                            <h3 class="card-title" id="llm-result-title">Result</h3>
                            <button class="card-action" onclick="copyLlmResult()">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy
                            </button>
                        </div>
                        <div class="llm-result-wrap">
                            <div class="llm-result-box" id="llm-result-content">Result will appear here...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- BILLING SECTION -->
            <div id="section-billing" class="section-panel">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">Current Plan</span>
                            <div class="stat-icon blue"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg></div>
                        </div>
                        <div class="stat-value" id="billing-plan-name">Pro</div>
                        <div class="stat-change up" id="billing-plan-price">KES 2,999/mo</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">Plan Expires</span>
                            <div class="stat-icon orange"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
                        </div>
                        <div class="stat-value" id="billing-expires">May 15</div>
                        <div class="stat-change up" id="billing-days">22 days remaining</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">Auto-Renewal</span>
                            <div class="stat-icon green"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg></div>
                        </div>
                        <div class="stat-value" id="billing-method">M-Pesa</div>
                        <div style="display:flex;align-items:center;gap:0.5rem;margin-top:0.25rem;">
                            <label class="toggle-switch" style="position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;">
                                <input type="checkbox" id="billing-auto-toggle" checked style="opacity:0;width:0;height:0;">
                                <span id="billing-auto-knob" style="position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--flag-red);border-radius:22px;transition:0.3s;">
                                    <span style="position:absolute;content:'';height:16px;width:16px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.3s;transform:translateX(18px);"></span>
                                </span>
                            </label>
                            <span id="billing-auto-label" style="font-size:0.8rem;font-weight:700;color:var(--gray-600);">ON</span>
                        </div>
                        <div id="billing-auto-status" style="font-size:0.75rem;color:var(--gray-400);margin-top:0.25rem;display:none;"></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">Total Spent</span>
                            <div class="stat-icon red"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
                        </div>
                        <div class="stat-value" id="billing-total">KES 0</div>
                        <div class="stat-change up">Lifetime</div>
                    </div>
                </div>

                <!-- PAYMENT FORMS -->
                <div class="dashboard-grid" style="margin-bottom:1.25rem;">
                    <div style="grid-column:1/-1;text-align:center;margin-bottom:0.5rem;">
                        <div style="display:inline-flex;background:var(--gray-100);border-radius:9999px;padding:0.25rem;gap:0.25rem;">
                            <button type="button" id="dash-billing-monthly" class="dash-billing-toggle active" style="padding:0.5rem 1.25rem;border-radius:9999px;border:none;font-weight:600;font-size:0.875rem;cursor:pointer;transition:all 0.2s;background:white;color:var(--gray-900);box-shadow:0 1px 3px rgba(0,0,0,0.1);">Monthly</button>
                            <button type="button" id="dash-billing-annual" class="dash-billing-toggle" style="padding:0.5rem 1.25rem;border-radius:9999px;border:none;font-weight:600;font-size:0.875rem;cursor:pointer;transition:all 0.2s;background:transparent;color:var(--gray-500);">Annual <span style="color:var(--flag-red);font-size:0.75rem;">Save 15%</span></button>
                        </div>
                    </div>
                    <div class="card" id="mpesa-payment-card">
                        <div class="card-header"><h3 class="card-title">Pay with M-Pesa</h3><span class="badge-new">Kenya Only</span></div>
                        <div id="mpesa-form">
                            <div class="form-group">
                                <label class="form-label">Phone Number</label>
                                <input type="tel" class="form-input" id="mpesa-phone" placeholder="2547XX XXX XXX" value="254">
                                <div class="form-hint">Enter in format 2547XXXXXXXX</div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Amount (KES)</label>
                                <input type="number" class="form-input" id="mpesa-amount" value="2999" min="1">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Plan</label>
                                <select class="select-input" id="mpesa-plan">
                                    <option value="">Loading plans…</option>
                                </select>
                            </div>
                            <button class="btn btn-primary" id="mpesa-pay-btn" style="width:100%;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg> Pay with M-Pesa
                            </button>
                            <div id="mpesa-status" style="margin-top:0.75rem;font-size:0.85rem;font-weight:600;display:none;"></div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header"><h3 class="card-title">Pay with Card or PayPal</h3></div>
                        <div id="paypal-form">
                            <div class="form-group">
                                <label class="form-label">Plan</label>
                                <select class="select-input" id="paypal-plan">
                                    <option value="">Loading plans…</option>
                                </select>
                            </div>
                            <div id="paypal-button-container" style="min-height:45px;"></div>
                            <div style="text-align:center;margin-top:0.5rem;font-size:0.75rem;color:var(--gray-400);">Powered by PayPal. No account required for card payments.</div>
                            <div id="paypal-status" style="margin-top:0.75rem;font-size:0.85rem;font-weight:600;display:none;"></div>
                        </div>
                    </div>
                </div>

                <div class="dashboard-grid">
                    <div class="card full-width">
                        <div class="card-header">
                            <h3 class="card-title">Billing History</h3>
                            <button class="card-action" id="download-receipts">Download All</button>
                        </div>
                        <div class="table-wrap"><table class="data-table">
                            <thead>
                                <tr><th>Date</th><th>Description</th><th>Amount</th><th>Method</th><th>Status</th><th>Receipt</th></tr>
                            </thead>
                            <tbody id="billing-history-body">
                                <tr><td colspan="6" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading transactions...</td></tr>
                            </tbody>
                        </table></div>
                        <div id="billing-pagination" style="display:flex;justify-content:center;gap:0.5rem;margin-top:1rem;"></div>
                    </div>
                </div>
            </div>
            <div id="section-team" class="section-panel">
                <div class="dashboard-grid">
                    <div class="card" style="grid-column:1/-1;">
                        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
                            <h3 class="card-title">Team Members</h3>
                            <span class="badge-new" id="team-seat-badge">1 / 1 seats used</span>
                        </div>
                        <div id="team-readonly-notice" style="display:none;padding:1rem;background:var(--sunflower-50);border-radius:8px;margin-bottom:1rem;color:var(--deep-blue);font-weight:600;">
                            You are a team member. Only the workspace owner can manage the team.
                        </div>
                        <div id="team-invite-form" style="display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:0.75rem;margin-bottom:1.5rem;align-items:end;">
                            <div class="form-group" style="margin:0;">
                                <label class="form-label" style="font-size:0.75rem;">Email</label>
                                <input type="email" class="form-input" id="team-invite-email" placeholder="colleague@company.com">
                            </div>
                            <div class="form-group" style="margin:0;">
                                <label class="form-label" style="font-size:0.75rem;">First Name</label>
                                <input type="text" class="form-input" id="team-invite-first" placeholder="John">
                            </div>
                            <div class="form-group" style="margin:0;">
                                <label class="form-label" style="font-size:0.75rem;">Role</label>
                                <select class="select-input" id="team-invite-role" style="height:42px;">
                                    <option value="editor">Editor</option>
                                    <option value="admin">Admin</option>
                                    <option value="viewer">Viewer</option>
                                </select>
                            </div>
                            <button class="btn btn-primary" id="team-invite-btn" style="height:42px;">Invite</button>
                        </div>
                        <div id="team-status" style="margin-bottom:1rem;font-size:0.85rem;font-weight:600;display:none;text-align:center;"></div>
                        <div class="table-wrap"><table class="data-table" id="team-table">
                            <thead>
                                <tr><th>Name</th><th>Email</th><th>Role</th><th>Joined</th><th style="text-align:right;">Actions</th></tr>
                            </thead>
                            <tbody id="team-table-body">
                                <tr><td colspan="5" style="text-align:center;color:var(--gray-400);padding:2rem;">Loading team...</td></tr>
                            </tbody>
                        </table></div>
                    </div>
                </div>
            </div>
            <div id="section-settings" class="section-panel">
                <div class="dashboard-grid">
                    <div class="card">
                        <div class="card-header"><h3 class="card-title">Profile</h3></div>
                        <div class="form-group"><label class="form-label">First Name</label><input type="text" class="form-input" id="profile-first-name" value="John Doe"></div>
                        <div class="form-group"><label class="form-label">Last Name</label><input type="text" class="form-input" id="profile-last-name" value="Doe"></div>
                        <div class="form-group"><label class="form-label">Email</label><input type="email" class="form-input" id="profile-email" value="john@company.co.ke" disabled style="background:var(--gray-100);color:var(--gray-500);"></div>
                        <div class="form-group"><label class="form-label">Company</label><input type="text" class="form-input" id="profile-company" value="Company Ltd"></div>
                        <div class="form-group"><label class="form-label">Phone</label><input type="text" class="form-input" id="profile-phone" value="+254 712 345 678"></div>
                        <button class="btn btn-primary" style="width:100%;" id="profile-save-btn">Save Profile</button>
                        <div id="profile-status" style="margin-top:0.75rem;font-size:0.85rem;font-weight:600;display:none;text-align:center;"></div>
                    </div>
                    <div class="card">
                        <div class="card-header"><h3 class="card-title">Preferences</h3></div>
                        <div class="form-group"><label class="form-label">Default Website</label><input type="text" class="form-input" id="pref-website" value="https://company.co.ke"></div>
                        <div class="form-group"><label class="form-label">Timezone</label><select class="select-input" id="pref-timezone"><option value="Africa/Nairobi" selected>Africa/Nairobi</option><option value="Africa/Lagos">Africa/Lagos</option><option value="Africa/Johannesburg">Africa/Johannesburg</option><option value="UTC">UTC</option></select></div>
                        <div class="form-group"><label class="form-label">Language</label><select class="select-input" id="user-language-select"><option value="en" selected>English</option><option value="sw">Kiswahili</option><option value="fr">Français</option><option value="ar">العربية</option><option value="pt">Português</option><option value="de">Deutsch</option><option value="am">አማርኛ</option><option value="hi">हिन्दी</option><option value="zh">中文</option></select></div>
                        <div class="form-group"><label class="form-label">Email Notifications</label><label class="toggle-switch" style="position:relative;display:inline-block;width:44px;height:24px;"><input type="checkbox" id="pref-email-notif" checked><span style="position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--flag-red);border-radius:24px;transition:0.3s;"><span style="position:absolute;content:'';height:18px;width:18px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.3s;transform:translateX(20px);"></span></span></label></div>
                        <button class="btn btn-primary" style="width:100%;" id="pref-save-btn">Save Preferences</button>
                        <div id="pref-status" style="margin-top:0.75rem;font-size:0.85rem;font-weight:600;display:none;text-align:center;"></div>
                    </div>
                    <div class="card" style="grid-column:1/-1;">
                        <div class="card-header"><h3 class="card-title">Connected Accounts</h3></div>
                        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;">
                            <div style="border:var(--card-border);border-radius:10px;padding:1rem;display:flex;align-items:center;gap:1rem;">
                                <div style="width:40px;height:40px;border-radius:8px;background:rgba(0,48,73,0.08);display:flex;align-items:center;justify-content:center;color:var(--deep-blue);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></div>
                                <div style="flex:1;"><div style="font-weight:700;font-size:0.875rem;">Google Analytics</div><div id="ga-connect-status" style="font-size:0.75rem;color:var(--gray-500);">Not connected</div></div>
                                <button class="btn btn-white" id="ga-connect-btn">Configure</button>
                            </div>
                            <div style="border:var(--card-border);border-radius:10px;padding:1rem;display:flex;align-items:center;gap:1rem;">
                                <div style="width:40px;height:40px;border-radius:8px;background:rgba(214,40,40,0.08);display:flex;align-items:center;justify-content:center;color:var(--flag-red);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></div>
                                <div style="flex:1;"><div style="font-weight:700;font-size:0.875rem;">Facebook</div><div style="font-size:0.75rem;color:var(--gray-500);">Not connected</div></div>
                                <button class="btn btn-white">Connect</button>
                            </div>
                            <div style="border:var(--card-border);border-radius:10px;padding:1rem;display:flex;align-items:center;gap:1rem;">
                                <div style="width:40px;height:40px;border-radius:8px;background:rgba(0,119,181,0.08);display:flex;align-items:center;justify-content:center;color:#0077b5;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></div>
                                <div style="flex:1;"><div style="font-weight:700;font-size:0.875rem;">LinkedIn</div><div style="font-size:0.75rem;color:var(--gray-500);">Not connected</div></div>
                                <button class="btn btn-white">Connect</button>
                            </div>
                        </div>
                    </div>

                    <!-- MY WEBSITES & ANALYTICS CONNECTIONS -->
                    <div class="card" id="my-websites-card" style="grid-column:1/-1;">
                        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
                            <h3 class="card-title">My Websites &amp; Analytics Connections</h3>
                            <button class="btn btn-primary" id="show-add-website-btn" style="padding:0.375rem 0.875rem;font-size:0.8rem;">+ Add Website</button>
                        </div>
                        <!-- Add website form -->
                        <div id="add-website-form" style="display:none;background:var(--gray-50);border-radius:10px;padding:1rem;margin-bottom:1rem;border:var(--card-border);">
                            <div style="display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:0.75rem;align-items:end;">
                                <div class="form-group" style="margin:0;">
                                    <label class="form-label" style="font-size:0.75rem;">Website URL *</label>
                                    <input type="url" class="form-input" id="new-website-url" placeholder="https://yoursite.co.ke">
                                </div>
                                <div class="form-group" style="margin:0;">
                                    <label class="form-label" style="font-size:0.75rem;">GA4 Property ID</label>
                                    <input type="text" class="form-input" id="new-ga4-id" placeholder="properties/123456789">
                                </div>
                                <div class="form-group" style="margin:0;">
                                    <label class="form-label" style="font-size:0.75rem;">GSC Site URL</label>
                                    <input type="url" class="form-input" id="new-gsc-url" placeholder="https://yoursite.co.ke">
                                </div>
                                <div style="display:flex;gap:0.5rem;">
                                    <button class="btn btn-primary" id="add-website-submit-btn">Add</button>
                                    <button class="btn btn-white" id="cancel-add-website-btn">Cancel</button>
                                </div>
                            </div>
                            <div id="add-website-status" style="margin-top:0.5rem;font-size:0.8rem;font-weight:600;display:none;"></div>
                        </div>
                        <!-- Website list table -->
                        <div style="overflow-x:auto;">
                            <table style="width:100%;border-collapse:collapse;font-size:0.85rem;">
                                <thead>
                                    <tr style="border-bottom:var(--card-border);text-align:left;">
                                        <th style="padding:0.5rem 0.75rem;font-weight:600;color:var(--gray-500);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;">Website</th>
                                        <th style="padding:0.5rem 0.75rem;font-weight:600;color:var(--gray-500);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;">GA4 Property ID</th>
                                        <th style="padding:0.5rem 0.75rem;font-weight:600;color:var(--gray-500);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;">GSC Site URL</th>
                                        <th style="padding:0.5rem 0.75rem;font-weight:600;color:var(--gray-500);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="websites-tbody">
                                    <tr><td colspan="4" style="text-align:center;padding:2rem;color:var(--gray-400);">Loading websites…</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div id="websites-status" style="margin-top:0.75rem;font-size:0.82rem;font-weight:600;display:none;text-align:center;"></div>
                        <p style="margin-top:0.75rem;font-size:0.78rem;color:var(--gray-400);">
                            <strong>GA4 Property ID</strong>: Google Analytics 4 → Admin → Property Settings (e.g. <code>properties/123456789</code>).
                            &nbsp;|&nbsp;<strong>GSC Site URL</strong>: exact URL registered in Google Search Console.
                        </p>
                    </div>

                    <!-- WHITE-LABEL BRANDING (Agency only) -->
                    <div class="card" id="white-label-card" style="grid-column:1/-1; display:none;">
                        <div class="card-header"><h3 class="card-title">White-label Branding</h3><span class="badge-new">Agency</span></div>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">
                            <div>
                                <div class="form-group"><label class="form-label">Company Name on Reports</label><input type="text" class="form-input" id="wl-company" placeholder="Your Agency Name"></div>
                                <div class="form-group"><label class="form-label">Tagline</label><input type="text" class="form-input" id="wl-tagline" placeholder="SEO & Digital Marketing"></div>
                                <div class="form-group"><label class="form-label">Primary Color</label><input type="color" class="form-input" id="wl-color" value="#d62828" style="height:42px;cursor:pointer;padding:4px;"></div>
                            </div>
                            <div>
                                <div class="form-group"><label class="form-label">Logo URL</label><input type="url" class="form-input" id="wl-logo" placeholder="https://youragency.com/logo.png"></div>
                                <div class="form-group"><label class="form-label">Enable White-label</label><label class="toggle-switch" style="position:relative;display:inline-block;width:44px;height:24px;"><input type="checkbox" id="wl-enabled"><span style="position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--gray-300);border-radius:24px;transition:0.3s;"><span style="position:absolute;content:'';height:18px;width:18px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.3s;transform:translateX(0px);" id="wl-toggle-knob"></span></span></label><div class="form-hint">When enabled, all PDF reports will show your branding instead of Ranking Africa.</div></div>
                                <div style="background:var(--gray-50);border-radius:10px;padding:1rem;text-align:center;margin-top:0.5rem;">
                                    <div style="font-size:0.75rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.5rem;">Preview</div>
                                    <div style="display:flex;align-items:center;justify-content:center;gap:0.75rem;">
                                        <div id="wl-preview-icon" style="width:32px;height:32px;border-radius:6px;background:var(--flag-red);display:flex;align-items:center;justify-content:center;color:white;font-weight:800;font-size:0.7rem;">AG</div>
                                        <div style="text-align:left;"><div id="wl-preview-name" style="font-weight:700;font-size:0.875rem;">Your Agency</div><div id="wl-preview-tagline" style="font-size:0.7rem;color:var(--gray-500);">SEO & Digital Marketing</div></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top:1rem;padding-top:1rem;border-top:var(--card-border);">
                            <button class="btn btn-primary" id="wl-save-btn" style="width:100%;">Save Branding</button>
                            <div id="wl-status" style="margin-top:0.75rem;font-size:0.85rem;font-weight:600;display:none;text-align:center;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- SOCIAL MEDIA MANAGER — COMING SOON TEASER -->
            <div class="dashboard-grid" id="social-teaser" style="margin-top: 1.25rem;">
                <div class="card full-width" style="background: linear-gradient(135deg, rgba(0,48,73,0.03) 0%, rgba(214,40,40,0.03) 100%); border: 2px dashed var(--gray-300);">
                    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
                        <h3 class="card-title" style="display:flex;align-items:center;gap:0.75rem;">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                            Social Media Manager
                            <span style="font-size:0.7rem;background:var(--sunflower);color:var(--deep-blue);padding:0.25rem 0.625rem;border-radius:6px;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;">Coming Q3 2026</span>
                        </h3>
                        <button type="button" class="social-teaser-close" aria-label="Dismiss" title="Dismiss" style="background:transparent;border:none;color:var(--gray-400);font-size:1.5rem;line-height:1;cursor:pointer;padding:0.25rem;margin-left:auto;">&times;</button>
                    </div>
                    <div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:1.5rem;margin-bottom:1rem;">
                        <div style="text-align:center;padding:1rem;">
                            <div style="width:48px;height:48px;border-radius:12px;background:rgba(0,48,73,0.08);color:var(--deep-blue);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
                            <div style="font-size:0.9rem;font-weight:700;color:var(--gray-900);">Content Calendar</div>
                            <div style="font-size:0.8rem;color:var(--gray-500);margin-top:0.25rem;">Drag & drop posts across weeks and months</div>
                        </div>
                        <div style="text-align:center;padding:1rem;">
                            <div style="width:48px;height:48px;border-radius:12px;background:rgba(214,40,40,0.08);color:var(--flag-red);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div>
                            <div style="font-size:0.9rem;font-weight:700;color:var(--gray-900);">Approval Workflow</div>
                            <div style="font-size:0.8rem;color:var(--gray-500);margin-top:0.25rem;">Team lead approves before anything goes live</div>
                        </div>
                        <div style="text-align:center;padding:1rem;">
                            <div style="width:48px;height:48px;border-radius:12px;background:rgba(247,127,0,0.08);color:var(--tangerine);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></div>
                            <div style="font-size:0.9rem;font-weight:700;color:var(--gray-900);">Auto-Post</div>
                            <div style="font-size:0.8rem;color:var(--gray-500);margin-top:0.25rem;">Schedule once, publish everywhere automatically</div>
                        </div>
                        <div style="text-align:center;padding:1rem;">
                            <div style="width:48px;height:48px;border-radius:12px;background:rgba(252,191,73,0.15);color:#b45309;display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></div>
                            <div style="font-size:0.9rem;font-weight:700;color:var(--gray-900);">Cross-Platform</div>
                            <div style="font-size:0.8rem;color:var(--gray-500);margin-top:0.25rem;">Facebook, Instagram, X, and LinkedIn in one place</div>
                        </div>
                    </div>
                    <div style="text-align:center;padding:1rem;background:var(--gray-50);border-radius:8px;margin-top:0.5rem;">
                        <p style="font-size:0.875rem;color:var(--gray-600);font-weight:500;margin-bottom:0.75rem;">Want early access? Join the waitlist and be the first to try it.</p>
                        <button class="btn btn-primary" id="social-waitlist-btn" style="padding:0.5rem 1.25rem;font-size:0.875rem;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Join Waitlist
                        </button>
                    </div>
                </div>
            </div>

            <footer class="dash-footer">
                &copy; 2026 Ranking Africa. All rights reserved.
            </footer>
        </main>
    </div>

    <script>
        function switchTab(el) {
            document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
            el.classList.add('active');
            const section = el.getAttribute('data-section');
            if (section) {
                document.querySelectorAll('.section-panel').forEach(panel => panel.classList.remove('active'));
                const target = document.getElementById('section-' + section);
                if (target) target.classList.add('active');
                window.scrollTo({ top: 0, behavior: 'smooth' })}
            if (section === 'ai-visibility') loadLlmHistory();
        }
    </script>

<script src="assets/i18n.js"></script>
<script src="assets/api.js"></script>
<script>
(function(){
    // User data injected server-side — no async auth check, no flash
    let currentUser = <?= $jsUser ?>;

    function renderUser(){
        if(!currentUser) return;
        const pill = document.querySelector('.user-pill');
        if(pill){
            const nameEl  = pill.querySelector('.user-name');
            const badgeEl = pill.querySelector('.plan-badge');
            const avatarEl = pill.querySelector('.avatar');
            const fullName = (currentUser.first_name || '') + ' ' + (currentUser.last_name || '');
            if(nameEl)   nameEl.innerText  = fullName.trim() || currentUser.email;
            if(badgeEl)  badgeEl.innerText = (currentUser.plan_name || currentUser.plan_slug || 'Pro') + ' Plan';
            if(avatarEl){
                const initials = (currentUser.first_name?.[0] || '') + (currentUser.last_name?.[0] || '');
                avatarEl.innerText = initials.toUpperCase() || currentUser.email?.[0]?.toUpperCase() || 'U';
            }
        }
        // Show/hide email verification banner
        const banner = document.getElementById('verify-banner');
        if(banner) banner.style.display = currentUser.email_verified ? 'none' : 'flex';
    }

    // Wire resend verification
    document.addEventListener('DOMContentLoaded', function(){
        const resendBtn = document.getElementById('resend-verify-btn');
        if(resendBtn){
            resendBtn.addEventListener('click', async function(){
                resendBtn.innerText = 'Sending...';
                resendBtn.disabled = true;
                try {
                    const res = await RA.Auth.fetch('/auth/resend-verification.php', {
                        method: 'POST',
                        body: JSON.stringify({ email: currentUser?.email || '' })
                    });
                    alert(res.message || 'If an account exists, a verification email has been sent.');
                } catch(e){ alert('Failed to send. Please try again later.'); }
                resendBtn.innerText = 'Resend Email';
                resendBtn.disabled = false;
            });
        }
    });

    // Render user pill immediately — data is already available
    renderUser();
    populateSettings(currentUser);

    // Billing section initialization
    initBilling();

    // Dashboard live data wiring
    initDashboardData();

    // Plan-based feature gating
    checkPlanFeatures();
})();

// Billing functions
async function initBilling(){
    const billingSection = document.getElementById('section-billing');
    if(!billingSection) return;

    // Load user billing info
    try {
        const res = await RA.Auth.fetch('/me.php');
        if(res.success && res.user){
            const u = res.user;
            const planName = document.getElementById('billing-plan-name');
            const planPrice = document.getElementById('billing-plan-price');
            const expires = document.getElementById('billing-expires');
            const days = document.getElementById('billing-days');

            if(planName) planName.innerText = u.plan_name || 'Professional';
            if(planPrice) planPrice.innerText = 'KES ' + (u.plan_price || '2,999') + '/mo';
            if(expires && u.plan_expires_at){
                const d = new Date(u.plan_expires_at);
                expires.innerText = d.toLocaleDateString('en-GB', {day:'numeric', month:'short', year:'numeric'});
                const diff = Math.ceil((d - new Date()) / (1000*60*60*24));
                if(days) days.innerText = diff > 0 ? diff + ' days remaining' : 'Expired'}

            // Set auto-renewal toggle
            const autoToggle = document.getElementById('billing-auto-toggle');
            const autoLabel = document.getElementById('billing-auto-label');
            const autoKnob = document.getElementById('billing-auto-knob');
            if(autoToggle && autoLabel && autoKnob){
                const isOn = u.auto_renewal !== 0 && u.auto_renewal !== false;
                autoToggle.checked = isOn;
                autoLabel.innerText = isOn ? 'ON' : 'OFF';
                autoLabel.style.color = isOn ? 'var(--flag-red)' : 'var(--gray-400)';
                autoKnob.style.background = isOn ? 'var(--flag-red)' : 'var(--gray-300)';
                autoKnob.querySelector('span').style.transform = isOn ? 'translateX(18px)' : 'translateX(0)';
            }
        }
    } catch(e){}

    // Wire auto-renewal toggle
    const autoToggle = document.getElementById('billing-auto-toggle');
    if(autoToggle){
        autoToggle.addEventListener('change', async function(){
            const enabled = this.checked;
            const autoLabel = document.getElementById('billing-auto-label');
            const autoKnob = document.getElementById('billing-auto-knob');
            const autoStatus = document.getElementById('billing-auto-status');

            // Optimistic UI
            autoLabel.innerText = enabled ? 'ON' : 'OFF';
            autoLabel.style.color = enabled ? 'var(--flag-red)' : 'var(--gray-400)';
            autoKnob.style.background = enabled ? 'var(--flag-red)' : 'var(--gray-300)';
            autoKnob.querySelector('span').style.transform = enabled ? 'translateX(18px)' : 'translateX(0)';

            try {
                const res = await RA.Auth.fetch('/user/auto-renewal.php', {
                    method: 'PUT',
                    body: JSON.stringify({ enabled })
                });
                if(autoStatus){
                    autoStatus.style.display = 'block';
                    autoStatus.style.color = res.success ? '#059669' : 'var(--flag-red)';
                    autoStatus.innerText = res.message || (res.success ? 'Saved.' : 'Failed to save.');
                    setTimeout(() => { autoStatus.style.display = 'none'; }, 3000);
                }
            } catch(e) {
                if(autoStatus){
                    autoStatus.style.display = 'block';
                    autoStatus.style.color = 'var(--flag-red)';
                    autoStatus.innerText = 'Network error. Please try again.';
                }
            }
        });
    }

    // Load transactions
    loadTransactions();

    // Billing cycle toggle
    window.__dashBillingCycle = 'monthly';
    let dashBillingCycle = window.__dashBillingCycle;
    const dashMonthlyBtn = document.getElementById('dash-billing-monthly');
    const dashAnnualBtn = document.getElementById('dash-billing-annual');

    function updatePaymentAmounts(){
        const mpesaSelect = document.getElementById('mpesa-plan');
        const mpesaAmt = document.getElementById('mpesa-amount');
        const paypalSelect = document.getElementById('paypal-plan');
        if(mpesaSelect && mpesaAmt){
            const opt = mpesaSelect.options[mpesaSelect.selectedIndex];
            const price = dashBillingCycle === 'annual' ? opt.dataset.priceAnnual : opt.dataset.priceMonthly;
            mpesaAmt.value = price || '2999';
        }
        if(paypalSelect){
            const opt = paypalSelect.options[paypalSelect.selectedIndex];
            const price = dashBillingCycle === 'annual' ? opt.dataset.priceAnnual : opt.dataset.priceMonthly;
            // Update PayPal button amount if initialized
            if(window.paypalAmount) window.paypalAmount = price;
        }
    }

    if(dashMonthlyBtn && dashAnnualBtn){
        dashMonthlyBtn.addEventListener('click', function(){
            dashBillingCycle = window.__dashBillingCycle = 'monthly';
            dashMonthlyBtn.style.cssText = 'padding:0.5rem 1.25rem;border-radius:9999px;border:none;font-weight:600;font-size:0.875rem;cursor:pointer;transition:all 0.2s;background:white;color:var(--gray-900);box-shadow:0 1px 3px rgba(0,0,0,0.1);';
            dashAnnualBtn.style.cssText = 'padding:0.5rem 1.25rem;border-radius:9999px;border:none;font-weight:600;font-size:0.875rem;cursor:pointer;transition:all 0.2s;background:transparent;color:var(--gray-500);';
            updatePaymentAmounts();
        });
        dashAnnualBtn.addEventListener('click', function(){
            dashBillingCycle = window.__dashBillingCycle = 'annual';
            dashAnnualBtn.style.cssText = 'padding:0.5rem 1.25rem;border-radius:9999px;border:none;font-weight:600;font-size:0.875rem;cursor:pointer;transition:all 0.2s;background:white;color:var(--gray-900);box-shadow:0 1px 3px rgba(0,0,0,0.1);';
            dashMonthlyBtn.style.cssText = 'padding:0.5rem 1.25rem;border-radius:9999px;border:none;font-weight:600;font-size:0.875rem;cursor:pointer;transition:all 0.2s;background:transparent;color:var(--gray-500);';
            updatePaymentAmounts();
        });
    }

    // Wire M-Pesa form
    const mpesaBtn = document.getElementById('mpesa-pay-btn');
    const mpesaPlan = document.getElementById('mpesa-plan');
    const mpesaAmount = document.getElementById('mpesa-amount');

    if(mpesaPlan && mpesaAmount){
        mpesaPlan.addEventListener('change', function(){
            const opt = this.options[this.selectedIndex];
            const price = dashBillingCycle === 'annual' ? opt.dataset.priceAnnual : opt.dataset.priceMonthly;
            mpesaAmount.value = price || '2999'})}

    if(mpesaBtn){
        mpesaBtn.addEventListener('click', async function(){
            const phone = document.getElementById('mpesa-phone').value.trim();
            const amount = parseFloat(document.getElementById('mpesa-amount').value);
            const planId = parseInt(document.getElementById('mpesa-plan').value);
            const statusEl = document.getElementById('mpesa-status');

            if(!phone || phone.length < 12){
                statusEl.style.display = 'block';
                statusEl.style.color = 'var(--flag-red)';
                statusEl.innerText = 'Enter a valid phone number (2547XXXXXXXX)';
                return}

            mpesaBtn.innerText = 'Sending request...';
            mpesaBtn.disabled = true;
            statusEl.style.display = 'none';

            const res = await RA.Auth.fetch('/payments/mpesa/initiate.php', {
                method: 'POST',
                body: JSON.stringify({ phone, amount, plan_id: planId, billing_cycle: dashBillingCycle })
            });

            mpesaBtn.innerText = 'Pay with M-Pesa';
            mpesaBtn.disabled = false;

            statusEl.style.display = 'block';
            if(res.success){
                statusEl.style.color = 'var(--deep-blue)';
                statusEl.innerText = res.message || 'Payment request sent! Check your phone.';
                // Poll for status
                pollMpesaStatus(res.transaction_ref)} else {
                statusEl.style.color = 'var(--flag-red)';
                statusEl.innerText = res.message || 'Payment failed.'}
        })}

    // Country detection for payment methods
    async function detectCountry(){
        try {
            const res = await fetch('https://ipapi.co/json/');
            if(res.ok){
                const data = await res.json();
                return data.country_code || 'KE';
            }
        } catch(e) {}
        const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
        if(tz.includes('Nairobi') || tz.includes('Mombasa')) return 'KE';
        return 'US';
    }

    detectCountry().then(country => {
        const mpesaCard = document.getElementById('mpesa-payment-card');
        if(mpesaCard && country !== 'KE'){
            mpesaCard.style.display = 'none';
        }
    });

    // Wire PayPal JS SDK
    async function initPayPalButtons(){
        const container = document.getElementById('paypal-button-container');
        if(!container) return;

        // Get PayPal client config
        const configRes = await RA.Auth.fetch('/payments/paypal/client-config.php');
        if(!configRes.success || !configRes.client_id){
            container.innerHTML = '<div style="color:var(--gray-400);font-size:0.85rem;">PayPal not configured.</div>';
            return;
        }

        const clientId = configRes.client_id;
        const env = configRes.env;
        const sdkUrl = `https://www.paypal.com/sdk/js?client-id=${encodeURIComponent(clientId)}&currency=USD&intent=capture`;

        // Load PayPal SDK
        if(!window.paypal){
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = sdkUrl;
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        const paypalPlan = document.getElementById('paypal-plan');

        window.paypal.Buttons({
            style: {
                layout: 'vertical',
                color: 'gold',
                shape: 'rect',
                label: 'pay'
            },
            createOrder: async function(){
                const planId = parseInt(paypalPlan.value);
                const opt = paypalPlan.options[paypalPlan.selectedIndex];
                const planName = opt.text.split('—')[0].trim();
                const amount = parseFloat(dashBillingCycle === 'annual' ? opt.dataset.priceAnnual : opt.dataset.priceMonthly) || 19.99;

                const res = await RA.Auth.fetch('/payments/paypal/create.php', {
                    method: 'POST',
                    body: JSON.stringify({ amount, currency: 'USD', plan_id: planId, plan_name: planName, billing_cycle: dashBillingCycle, flow: 'js-sdk' })
                });

                if(res.success && res.order_id){
                    return res.order_id;
                }
                throw new Error(res.message || 'Failed to create PayPal order.');
            },
            onApprove: async function(data){
                const statusEl = document.getElementById('paypal-status');
                statusEl.style.display = 'block';
                statusEl.style.color = 'var(--deep-blue)';
                statusEl.innerText = 'Completing payment...';
                await capturePayPal(data.orderID);
            },
            onCancel: function(){
                showBillingToast('Payment was cancelled.', 'warning');
            },
            onError: function(err){
                const statusEl = document.getElementById('paypal-status');
                statusEl.style.display = 'block';
                statusEl.style.color = 'var(--flag-red)';
                statusEl.innerText = 'Payment error: ' + (err.message || 'Please try again.');
            }
        }).render('#paypal-button-container');
    }

    // Initialize PayPal buttons when billing tab is shown
    const billingNav = document.querySelector('[data-section="billing"]');
    if(billingNav){
        billingNav.addEventListener('click', function(){
            setTimeout(initPayPalButtons, 100);
        });
    }
    // Also init if page loads on billing section
    if(window.location.hash === '#billing'){
        setTimeout(initPayPalButtons, 300);
    }

    // Check URL params for payment return (legacy redirect support)
    const urlParams = new URLSearchParams(window.location.search);
    if(urlParams.get('payment') === 'success'){
        const orderId = urlParams.get('order_id');
        if(orderId){
            capturePayPal(orderId)}
        window.history.replaceState({}, document.title, window.location.pathname + '#billing')}
    if(urlParams.get('payment') === 'cancelled'){
        showBillingToast('Payment was cancelled.', 'warning');
        window.history.replaceState({}, document.title, window.location.pathname + '#billing')}
}

async function loadTransactions(page=1){
    const tbody = document.getElementById('billing-history-body');
    const pagin = document.getElementById('billing-pagination');
    if(!tbody) return;

    try {
        const res = await RA.Auth.fetch('/payments/transactions.php?page=' + page);
        if(!res.success || !res.transactions){
            tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:var(--gray-400);padding:2rem;">No transactions yet.</td></tr>';
            return}

        // Update total spent
        const totalEl = document.getElementById('billing-total');
        if(totalEl && res.transactions.length > 0){
            const total = res.transactions
                .filter(t => t.status === 'completed')
                .reduce((sum, t) => sum + parseFloat(t.amount), 0);
            totalEl.innerText = (res.transactions[0].currency === 'USD' ? '$' : 'KES ') + total.toLocaleString()}

        tbody.innerHTML = res.transactions.map(t => {
            const date = new Date(t.created_at).toLocaleDateString('en-GB', {day:'numeric', month:'short', year:'numeric'});
            const statusClass = t.status === 'completed' ? 'up' : t.status === 'pending' ? 'same' : 'down';
            const statusIcon = t.status === 'completed' ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>' : '';
            return `<tr>
                <td>${date}</td>
                <td><strong>${t.plan_name || 'Subscription'}</strong></td>
                <td><strong>${t.currency === 'USD' ? '$' : 'KES '}${parseFloat(t.amount).toLocaleString()}</strong></td>
                <td>${t.provider === 'mpesa' ? 'M-Pesa' : 'PayPal'}</td>
                <td><span class="status ${statusClass}">${statusIcon} ${t.status.charAt(0).toUpperCase() + t.status.slice(1)}</span></td>
                <td>${t.receipt ? `<button class="btn-sm btn-copy" onclick="alert('Receipt: ${t.receipt}')">View</button>` : '—'}</td>
            </tr>`}).join('');

        // Pagination
        if(pagin && res.pages > 1){
            let html = '';
            for(let i=1; i<=res.pages; i++){
                html += `<button class="btn-sm ${i===page?'btn-primary':'btn-white'}" onclick="loadTransactions(${i})" style="min-width:32px;">${i}</button>`}
            pagin.innerHTML = html}
    } catch(e){
        tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:var(--flag-red);padding:2rem;">Failed to load transactions.</td></tr>'}
}

async function pollMpesaStatus(txRef){
    const statusEl = document.getElementById('mpesa-status');
    let attempts = 0;
    const maxAttempts = 12; // 2 minutes

    const interval = setInterval(async () => {
        attempts++;
        const res = await RA.Auth.fetch('/payments/mpesa/query.php', {
            method: 'POST',
            body: JSON.stringify({ transaction_ref: txRef })
        });

        if(res.success && res.transaction){
            if(res.transaction.status === 'completed'){
                clearInterval(interval);
                statusEl.style.color = '#059669';
                statusEl.innerText = 'Payment successful! Your subscription is active.';
                loadTransactions();
                return}
            if(res.transaction.status === 'failed'){
                clearInterval(interval);
                statusEl.style.color = 'var(--flag-red)';
                statusEl.innerText = 'Payment failed. Please try again.';
                return}
        }

        if(attempts >= maxAttempts){
            clearInterval(interval);
            statusEl.style.color = 'var(--tangerine)';
            statusEl.innerText = 'Payment status pending. Check your history later.'}
    }, 10000); // Check every 10 seconds
}

async function capturePayPal(orderId){
    showBillingToast('Completing your PayPal payment...', 'info');
    const res = await RA.Auth.fetch('/payments/paypal/capture.php', {
        method: 'POST',
        body: JSON.stringify({ order_id: orderId })
    });

    if(res.success){
        showBillingToast('Payment successful! Subscription activated.', 'success');
        loadTransactions()} else {
        showBillingToast(res.message || 'Payment completion failed.', 'error')}
}

function showBillingToast(msg, type='success'){
    let container = document.getElementById('billing-toast-container');
    if(!container){
        container = document.createElement('div');
        container.id = 'billing-toast-container';
        container.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:0.5rem;';
        document.body.appendChild(container)}
    const toast = document.createElement('div');
    const bg = type==='success' ? 'rgba(16,185,129,0.95)' : type==='error' ? 'rgba(214,40,40,0.95)' : 'rgba(247,127,0,0.95)';
    toast.style.cssText = `background:${bg};color:white;padding:0.875rem 1.25rem;border-radius:10px;font-size:0.875rem;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,0.15);animation:slideIn 0.3s ease;max-width:320px;`;
    toast.innerText = msg;
    container.appendChild(toast);
    setTimeout(() => { toast.style.opacity='0'; toast.style.transition='opacity 0.3s'; setTimeout(()=>toast.remove(),300)}, 5000)}

// ─── DASHBOARD LIVE DATA WIRING ──────────────────────────────
async function initDashboardData(){
    loadOverviewStats();
    loadKeywords();
    loadCompetitors();
    loadAds();
    loadSmmAds();
    loadDrafts();
    loadQuota();
    loadReports();
    loadTrafficMiniChart();
    loadSeoAuditResults();
    loadPlansIntoDropdowns();
    wireAiWriter();
    wireAdSpinner();
    wireSettings();
    initWhiteLabel();
    loadAnalytics();
}

function checkPlanFeatures(){
    // Wait for user data to be available
    const check = () => {
        const user = RA.Auth.user;
        if(!user) { setTimeout(check, 200); return; }
        const planSlug = (user.plan_slug || user.plan_name || '').toLowerCase();
        const isStarter = planSlug === 'starter';

        // AI Visibility is Pro & Agency only
        const aiNav = document.querySelector('[data-section="ai-visibility"]');
        const aiSection = document.getElementById('section-ai-visibility');
        if(isStarter){
            if(aiNav) aiNav.style.display = 'none';
            if(aiSection){
                // Replace content with upgrade prompt
                aiSection.innerHTML = `
                    <div class="dashboard-grid">
                        <div class="card full-width" style="text-align:center;padding:3rem 2rem;">
                            <div style="width:64px;height:64px;border-radius:16px;background:rgba(139,92,246,0.08);color:#7c3aed;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/><path d="M12 16v-4"/><path d="M12 8h.01"/><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                            </div>
                            <h2 style="font-size:1.5rem;font-weight:800;color:var(--gray-900);margin-bottom:0.5rem;">AI Visibility is a Pro Feature</h2>
                            <p style="color:var(--gray-500);max-width:480px;margin:0 auto 1.5rem;line-height:1.6;">Analyze how discoverable your site is to LLMs like ChatGPT, Perplexity, and Gemini. Get scored on Structure, Entities, Content, and Authority.</p>
                            <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;">
                                <div style="background:var(--gray-50);border-radius:10px;padding:1rem 1.25rem;text-align:left;min-width:200px;border:var(--card-border);">
                                    <div style="font-size:0.75rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.25rem;">Professional</div>
                                    <div style="font-size:1.25rem;font-weight:800;color:var(--gray-900);">5</div>
                                    <div style="font-size:0.8rem;color:var(--gray-500);">LLM audits / month</div>
                                </div>
                                <div style="background:var(--gray-50);border-radius:10px;padding:1rem 1.25rem;text-align:left;min-width:200px;border:var(--card-border);">
                                    <div style="font-size:0.75rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.25rem;">Agency</div>
                                    <div style="font-size:1.25rem;font-weight:800;color:var(--gray-900);">20</div>
                                    <div style="font-size:0.8rem;color:var(--gray-500);">LLM audits / month</div>
                                </div>
                            </div>
                            <div style="margin-top:1.5rem;">
                                <a href="index.html#pricing" target="_blank" class="btn btn-primary" style="display:inline-flex;align-items:center;gap:0.5rem;">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
                                    Upgrade to Professional
                                </a>
                            </div>
                        </div>
                    </div>
                `;
            }
        }
    };
    check();
}

async function loadOverviewStats(){
    try {
        const res = await RA.Auth.fetch('/dashboard/overview.php');
        if(!res.success) return;

        // Stats cards
        const seoScore = document.getElementById('stat-seo-score');
        const kwCount = document.getElementById('stat-keywords');
        const traffic = document.getElementById('stat-traffic');
        const drafts = document.getElementById('stat-drafts');
        const seoNum = document.getElementById('seo-score-number');
        const seoLabel = document.getElementById('seo-score-label');

        if(seoScore) seoScore.innerText = res.seo_score || 0;
        if(kwCount) kwCount.innerText = (res.keywords_tracked || 0).toLocaleString();
        if(traffic) traffic.innerText = (res.ads_monitored || 0).toLocaleString();
        if(drafts) drafts.innerText = (res.content_drafts || 0).toLocaleString();
        if(seoNum) seoNum.innerText = res.seo_score || 0;
        if(seoLabel) {
            const s = res.seo_score || 0;
            seoLabel.innerText = s >= 90 ? 'Excellent' : s >= 80 ? 'Good' : s >= 60 ? 'Fair' : 'Needs Work';
        }

        // Score breakdown bars
        const b = res.breakdown || {};
        const bars = [
            {id:'breakdown-performance-bar', val:b.performance||0, color:'var(--deep-blue)'},
            {id:'breakdown-seo-bar', val:b.seo_score||0, color:'var(--flag-red)'},
            {id:'breakdown-mobile-bar', val:b.mobile_score||0, color:'var(--tangerine)'},
            {id:'breakdown-security-bar', val:b.security_score||0, color:'var(--sunflower)'}
        ];
        bars.forEach(item=>{
            const bar = document.getElementById(item.id);
            const valEl = document.getElementById(item.id.replace('-bar','-value'));
            if(bar){ bar.style.width = item.val + '%'; bar.style.background = item.color; }
            if(valEl) valEl.innerText = item.val;
        });

        // Update score ring stroke offset
        const ringFill = document.querySelector('.score-ring-fill');
        if(ringFill){
            const pct = Math.min(100, Math.max(0, res.seo_score || 0));
            const offset = 377 - (377 * pct / 100);
            ringFill.style.strokeDashoffset = offset;
        }

        // Site Analyzer score cards (same breakdown data)
        const perfEl = document.getElementById('site-score-performance');
        const seoEl  = document.getElementById('site-score-seo');
        const mobEl  = document.getElementById('site-score-mobile');
        const secEl  = document.getElementById('site-score-security');
        if(perfEl) perfEl.innerText = b.performance  || '—';
        if(seoEl)  seoEl.innerText  = b.seo_score    || '—';
        if(mobEl)  mobEl.innerText  = b.mobile_score || '—';
        if(secEl)  secEl.innerText  = b.security_score || '—';

        // SMM Spy stat cards — ads count & competitor count come from overview
        const smmAds  = document.getElementById('smm-stat-ads');
        const smmComp = document.getElementById('smm-stat-competitors');
        if(smmAds)  smmAds.innerText  = (res.ads_monitored || 0).toLocaleString();
        if(smmComp) smmComp.innerText = (res.competitors   || 0).toLocaleString();

        // SMM competitor slots sub-label (plan quota)
        const smmCompSub = document.getElementById('smm-stat-competitors-sub');
        if(smmCompSub && window.__raQuota && window.__raQuota.competitor){
            const rem = window.__raQuota.competitor.remaining;
            smmCompSub.innerText = rem + ' slot' + (rem !== 1 ? 's' : '') + ' remaining';
        }
    } catch(e){ console.error('Overview stats failed', e); }
}

async function loadKeywords(){
    const ids = ['dash-keywords-tbody','keywords-tbody'];
    try {
        const res = await RA.Auth.fetch('/dashboard/keywords.php');
        if(!res.success || !res.keywords?.length){
            ids.forEach(id=>{
                const el = document.getElementById(id);
                if(el) el.innerHTML = '<tr><td colspan="6" style="text-align:center;color:var(--gray-400);padding:2rem;">No keywords tracked yet.</td></tr>';
            });
            return;
        }
        const html = res.keywords.map(k=>{
            const changeIcon = k.change_type==='up' ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>' :
                             k.change_type==='down' ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>' : '';
            const changeClass = k.change_type==='up' ? 'up' : k.change_type==='down' ? 'down' : 'same';
            const posText = k.current_pos ? '#' + k.current_pos : 'Not ranked';
            return `<tr><td><strong>${RA.escapeHtml(k.keyword)}</strong></td><td>${RA.escapeHtml(posText)}</td><td><span class="status ${changeClass}">${changeIcon} ${k.change > 0 ? '+' + k.change : k.change < 0 ? k.change : '—'}</span></td><td>${k.search_volume?.toLocaleString() || '-'}</td></tr>`;
        }).join('');

        ids.forEach(id=>{
            const el = document.getElementById(id);
            if(el) el.innerHTML = html;
        });
    } catch(e){
        ids.forEach(id=>{
            const el = document.getElementById(id);
            if(el) el.innerHTML = '<tr><td colspan="6" style="text-align:center;color:var(--flag-red);padding:2rem;">Failed to load keywords.</td></tr>';
        });
    }
}

async function loadCompetitors(){
    const ids = ['dash-competitors-list','competitors-list'];
    try {
        const res = await RA.Auth.fetch('/dashboard/competitors.php');
        if(!res.success || !res.competitors?.length){
            ids.forEach(id=>{
                const el = document.getElementById(id);
                if(el) el.innerHTML = '<div class="competitor-item" style="text-align:center;color:var(--gray-400);padding:2rem;">No competitors added yet.</div>';
            });
            return;
        }
        const html = res.competitors.map(c=>`
            <div class="competitor-item">
                <div class="competitor-info">
                    <div class="competitor-favicon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></div>
                    <div><div class="competitor-name">${RA.escapeHtml(c.name || c.domain)}</div><div class="competitor-url">${RA.escapeHtml(c.domain)}</div></div>
                </div>
                <div class="competitor-metrics">
                    <div class="metric"><small>Keywords</small><span>${c.keywords_count || 0}</span></div>
                    <div class="metric"><small>Backlinks</small><span>${c.backlinks_count || 0}</span></div>
                    <div class="metric"><small>Ads</small><span>${c.ads_count || 0}</span></div>
                </div>
            </div>
        `).join('');
        ids.forEach(id=>{
            const el = document.getElementById(id);
            if(el) el.innerHTML = html;
        });
    } catch(e){
        ids.forEach(id=>{
            const el = document.getElementById(id);
            if(el) el.innerHTML = '<div class="competitor-item" style="text-align:center;color:var(--flag-red);padding:2rem;">Failed to load competitors.</div>';
        });
    }
}

async function loadAds(){
    try {
        const res = await RA.Auth.fetch('/dashboard/ads.php');
        const grid = document.getElementById('dash-ads-grid');
        if(!grid) return;
        if(!res.success || !res.ads?.length){
            grid.innerHTML = '<div class="ad-card" style="text-align:center;color:var(--gray-400);padding:2rem;">No ads monitored yet.</div>';
            return;
        }
        const gradients = [
            'linear-gradient(135deg,#003049,#d62828)',
            'linear-gradient(135deg,#f77f00,#fcbf49)',
            'linear-gradient(135deg,#003049,#0077b5)',
            'linear-gradient(135deg,#d62828,#f77f00)'
        ];
        grid.innerHTML = res.ads.map((a,i)=>`
            <div class="ad-card">
                <div class="ad-preview" style="background:${gradients[i % gradients.length]};">${RA.escapeHtml(a.platform || 'Ad')}</div>
                <div class="ad-info">
                    <div class="ad-platform">${RA.escapeHtml(a.platform || 'Unknown')}</div>
                    <div class="ad-text">${RA.escapeHtml(a.ad_copy || '')}</div>
                    <div class="ad-actions">
                        <button class="btn-sm btn-copy" onclick="navigator.clipboard.writeText(this.closest('.ad-card').querySelector('.ad-text').innerText).then(()=>{this.innerText='Copied!';setTimeout(()=>this.innerText='Copy',1500)})">Copy</button>
                        <button class="btn-sm btn-spin" onclick="spinAd(${JSON.stringify(a.ad_copy || '').replace(/'/g,"\\'")}, ${JSON.stringify(a.platform || 'facebook').replace(/'/g,"\\'")})">AI Spin</button>
                    </div>
                </div>
            </div>
        `).join('');
    } catch(e){ console.error('Ads load failed', e); }
}

async function loadDrafts(){
    const ids = ['dash-drafts-grid','content-drafts-grid'];
    try {
        const res = await RA.Auth.fetch('/dashboard/content.php');
        ids.forEach(id=>{
            const el = document.getElementById(id);
            if(!el) return;
            if(!res.success || !res.drafts?.length){
                el.innerHTML = '<div class="draft-card" style="text-align:center;color:var(--gray-400);padding:2rem;">No drafts yet. Use AI Writer to generate content.</div>';
                return;
            }
            el.innerHTML = res.drafts.map(d=>`
                <div class="draft-card ${d.type === 'article' ? 'article' : 'social'}">
                    <div class="draft-header">
                        <span class="draft-type ${d.type === 'article' ? 'article' : 'social'}">${d.type === 'article' ? 'Article' : 'Social'}</span>
                        <span class="draft-date">${new Date(d.created_at).toLocaleDateString('en-GB',{day:'numeric',month:'short'})}</span>
                    </div>
                    <div class="draft-title">${RA.escapeHtml(d.title)}</div>
                    <div class="draft-excerpt">${RA.escapeHtml(d.body_text ? d.body_text.substring(0,140) + '...' : '')}</div>
                    <div class="draft-meta">
                        <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> ${d.word_count || 0} words</span>
                    </div>
                    <div class="draft-actions">
                        <button class="draft-btn draft-btn-primary" onclick="viewDraft(${d.id})">View</button>
                        <button class="draft-btn draft-btn-secondary" data-copy-text="${RA.escapeHtml(d.body_text||'')}" onclick="navigator.clipboard.writeText(this.getAttribute('data-copy-text')).then(()=>alert('Copied to clipboard!'))">Copy</button>
                    </div>
                </div>
            `).join('');
        });
    } catch(e){
        ids.forEach(id=>{
            const el = document.getElementById(id);
            if(el) el.innerHTML = '<div class="draft-card" style="text-align:center;color:var(--flag-red);padding:2rem;">Failed to load drafts.</div>';
        });
    }
}

async function loadQuota(){
    try {
        const res = await RA.Auth.fetch('/dashboard/quota.php');
        if(!res.success || !res.quota) return;
        const q = res.quota;

        // Articles quota
        const artBar = document.getElementById('quota-articles-bar');
        const artText = document.getElementById('quota-articles-text');
        if(artBar && q.article){
            artBar.style.width = q.article.pct + '%';
            artText.innerText = `${q.article.used} of ${q.article.limit} articles used this month`;
        }
        const artBar2 = document.getElementById('quota-articles-bar-2');
        const artText2 = document.getElementById('quota-articles-text-2');
        if(artBar2 && q.article){
            artBar2.style.width = q.article.pct + '%';
            artText2.innerText = `${q.article.used} of ${q.article.limit} articles used this month`;
        }
        // Social quota
        const socBar = document.getElementById('quota-social-bar');
        const socText = document.getElementById('quota-social-text');
        if(socBar && q.social_post){
            socBar.style.width = q.social_post.pct + '%';
            socText.innerText = `${q.social_post.used} of ${q.social_post.limit} social posts used this month`;
        }
        const socBar2 = document.getElementById('quota-social-bar-2');
        const socText2 = document.getElementById('quota-social-text-2');
        if(socBar2 && q.social_post){
            socBar2.style.width = q.social_post.pct + '%';
            socText2.innerText = `${q.social_post.used} of ${q.social_post.limit} social posts used this month`;
        }

        // LLM audit quota
        const llmBar = document.getElementById('quota-llm-bar');
        const llmText = document.getElementById('quota-llm-text');
        if(llmBar && q.llm_audit){
            llmBar.style.width = q.llm_audit.pct + '%';
            llmText.innerText = `${q.llm_audit.used} of ${q.llm_audit.limit} LLM audits used this month`;
        }

        // SMM Spy — AI Spins card
        const spinsEl  = document.getElementById('smm-stat-spins');
        const spinsSub = document.getElementById('smm-stat-spins-sub');
        if(spinsEl && q.ad_spin){
            spinsEl.innerText = q.ad_spin.used;
            if(spinsSub) spinsSub.innerText = q.ad_spin.remaining + ' remaining this month';
        }

        // Store quota globally for enforcement
        window.__raQuota = q;
    } catch(e){}
}

async function loadReports(){
    try {
        const res = await RA.Auth.fetch('/reports/list.php');
        const tbody = document.getElementById('reports-tbody');
        if(!tbody) return;
        if(!res.success || !res.reports?.length){
            tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--gray-400);padding:2rem;">No reports generated yet.</td></tr>';
            return;
        }
        tbody.innerHTML = res.reports.map(r=>{
            const date = new Date(r.created_at).toLocaleDateString('en-GB',{day:'numeric',month:'short',year:'numeric'});
            const statusClass = r.status==='ready'?'up':r.status==='failed'?'down':'same';
            const statusIcon = r.status==='ready'?'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> ':'';
            return `<tr>
                <td><strong>${RA.escapeHtml(r.title)}</strong></td>
                <td>${RA.escapeHtml(r.type.toUpperCase())}</td>
                <td>${date}</td>
                <td><span class="status ${statusClass}">${statusIcon}${RA.escapeHtml(r.status.charAt(0).toUpperCase()+r.status.slice(1))}</span></td>
                <td><a href="report-template.php?rid=${r.id}" target="_blank" class="btn-sm btn-copy">View</a></td>
            </tr>`;
        }).join('');
    } catch(e){
        const tbody = document.getElementById('reports-tbody');
        if(tbody) tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--flag-red);padding:2rem;">Failed to load reports.</td></tr>';
    }
}

async function generateReport(){
    const btn = document.querySelector('#section-reports .card-action');
    if(btn) { btn.innerText = 'Generating...'; btn.disabled = true; }
    try {
        const res = await RA.Auth.fetch('/reports/generate.php', {
            method: 'POST',
            body: JSON.stringify({ type: 'full', period: 'last_30_days' })
        });
        if(btn) { btn.innerText = '+ New Report'; btn.disabled = false; }
        if(res.success){
            alert('Report generated! Opening...');
            window.open(res.view_url, '_blank');
            loadReports();
        } else {
            alert(res.message || 'Failed to generate report.');
        }
    } catch(e){
        if(btn) { btn.innerText = '+ New Report'; btn.disabled = false; }
        alert('Failed to generate report.');
    }
}

function wireAiWriter(){
    const btn = document.querySelector('#section-ai-writer .btn-primary');
    if(!btn) return;
    btn.addEventListener('click', async function(){
        // Check quota
        if(window.__raQuota?.article?.remaining <= 0){
            alert('Article quota exceeded. Upgrade your plan to generate more content.');
            return;
        }
        const section = document.getElementById('section-ai-writer');
        const type = section.querySelector('.select-input')?.value || 'SEO Blog Article';
        const topic = section.querySelector('input[type="text"]')?.value || '';
        const tone = section.querySelectorAll('.select-input')[1]?.value || 'Professional';
        const wordCount = section.querySelectorAll('.select-input')[2]?.value || '800 words';
        const audience = section.querySelectorAll('input[type="text"]')[1]?.value || '';
        const points = section.querySelector('textarea')?.value || '';

        if(!topic){ alert('Please enter a topic or keyword.'); return; }

        // Backend resolves website if 0 (uses user's first registered site)

        btn.innerText = 'Generating...'; btn.disabled = true;
        try {
            const res = await RA.Auth.fetch('/content/generate.php', {
                method: 'POST',
                body: JSON.stringify({
                    website_id: 0,
                    content_type: type,
                    topic: topic,
                    tone: tone,
                    word_count: wordCount,
                    target_audience: audience,
                    key_points: points
                })
            });
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> Generate Content';
            btn.disabled = false;
            if(res.success){
                alert(res.message || 'Content generated successfully!');
                loadDrafts();
                loadQuota();
                loadOverviewStats();
            } else {
                alert(res.message || 'Generation failed.');
            }
        } catch(e){
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> Generate Content';
            btn.disabled = false;
            alert('Network error during generation.');
        }
    });
}

function wireAdSpinner(){
    const btn = document.querySelector('#section-ad-spinner .btn-primary');
    if(!btn) return;
    btn.addEventListener('click', async function(){
        // Check quota
        if(window.__raQuota?.ad_spin?.remaining <= 0){
            alert('Ad spin quota exceeded. Upgrade your plan to spin more ads.');
            return;
        }
        const section = document.getElementById('section-ad-spinner');
        const original = section.querySelector('textarea')?.value || '';
        const platform = section.querySelector('.select-input')?.value || 'facebook';
        const creativity = section.querySelectorAll('.select-input')[1]?.value || 'balanced';
        const voice = section.querySelectorAll('.select-input')[2]?.value || 'professional';
        const audience = section.querySelectorAll('input[type="text"]')[0]?.value || 'African business owners';
        const cta = section.querySelector('input[type="checkbox"]')?.checked || false;

        if(!original || original.length < 20){ alert('Paste competitor ad copy (min 20 chars).'); return; }

        btn.innerText = 'Spinning...'; btn.disabled = true;
        try {
            const res = await RA.Auth.fetch('/content/spin-ad.php', {
                method: 'POST',
                body: JSON.stringify({ original_copy: original, platform, creativity, brand_voice: voice, target_audience: audience, include_cta: cta })
            });
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> Generate 3 Variants';
            btn.disabled = false;
            if(res.success){
                // Show results in a simple alert/modal or replace the form output
                let msg = 'Original:\n' + res.original + '\n\nSpun:\n' + res.spun;
                if(res.variants?.length){
                    msg += '\n\nVariants:';
                    res.variants.forEach(v=> msg += '\n\n' + v.variant + ': ' + v.text);
                }
                alert(msg);
                loadQuota();
            } else {
                alert(res.message || 'Spin failed.');
            }
        } catch(e){
            btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> Generate 3 Variants';
            btn.disabled = false;
            alert('Network error during spin.');
        }
    });
}

function viewDraft(id){
    alert('Draft ID: ' + id + '\n\nFull editing coming in a future update.');
}

function spinAd(copy, platform){
    const section = document.getElementById('section-ad-spinner');
    if(section){
        const ta = section.querySelector('textarea');
        if(ta) ta.value = copy;
        const sel = section.querySelector('.select-input');
        if(sel) sel.value = platform;
        switchTab(document.querySelector('[data-section="ad-spinner"]'));
    }
}

// ─── WHITE-LABEL BRANDING ────────────────────────────────────
async function initWhiteLabel(){
    const card = document.getElementById('white-label-card');
    if(!card) return;

    try {
        const res = await RA.Auth.fetch('/user/branding.php');
        if(!res.success || !res.can_white_label) return;

        card.style.display = 'block';

        const b = res.branding || {};
        document.getElementById('wl-company').value = b.company_name || '';
        document.getElementById('wl-tagline').value = b.tagline || '';
        document.getElementById('wl-color').value = b.primary_color || '#d62828';
        document.getElementById('wl-logo').value = b.logo_url || '';
        document.getElementById('wl-enabled').checked = !!b.enabled;
        updateWlToggleKnob(!!b.enabled);
        updateWlPreview();
    } catch(e){}

    // Live preview listeners
    ['wl-company','wl-tagline','wl-logo'].forEach(id=>{
        const el = document.getElementById(id);
        if(el) el.addEventListener('input', updateWlPreview);
    });
    const colorEl = document.getElementById('wl-color');
    if(colorEl) colorEl.addEventListener('input', updateWlPreview);

    const toggle = document.getElementById('wl-enabled');
    if(toggle) toggle.addEventListener('change', function(){
        updateWlToggleKnob(this.checked);
    });

    const saveBtn = document.getElementById('wl-save-btn');
    if(saveBtn){
        saveBtn.addEventListener('click', async function(){
            saveBtn.innerText = 'Saving...'; saveBtn.disabled = true;
            const status = document.getElementById('wl-status');
            try {
                const res = await RA.Auth.fetch('/user/branding.php', {
                    method: 'POST',
                    body: JSON.stringify({
                        enabled: document.getElementById('wl-enabled').checked,
                        company_name: document.getElementById('wl-company').value,
                        tagline: document.getElementById('wl-tagline').value,
                        primary_color: document.getElementById('wl-color').value,
                        logo_url: document.getElementById('wl-logo').value
                    })
                });
                status.style.display = 'block';
                if(res.success){
                    status.style.color = '#059669';
                    status.innerText = 'Branding saved successfully!';
                } else {
                    status.style.color = 'var(--flag-red)';
                    status.innerText = res.message || 'Failed to save branding.';
                }
            } catch(e){
                status.style.display = 'block';
                status.style.color = 'var(--flag-red)';
                status.innerText = 'Network error.';
            }
            saveBtn.innerText = 'Save Branding'; saveBtn.disabled = false;
            setTimeout(()=>{ status.style.display='none'; }, 4000);
        });
    }
}

function updateWlToggleKnob(checked){
    const knob = document.getElementById('wl-toggle-knob');
    if(knob) knob.style.transform = checked ? 'translateX(20px)' : 'translateX(0px)';
    const track = knob?.parentElement;
    if(track) track.style.background = checked ? 'var(--flag-red)' : 'var(--gray-300)';
}

function updateWlPreview(){
    const company = document.getElementById('wl-company').value || 'Your Agency';
    const tagline = document.getElementById('wl-tagline').value || 'SEO & Digital Marketing';
    const color = document.getElementById('wl-color').value || '#d62828';
    const logo = document.getElementById('wl-logo').value;

    const nameEl = document.getElementById('wl-preview-name');
    const tagEl = document.getElementById('wl-preview-tagline');
    const iconEl = document.getElementById('wl-preview-icon');

    if(nameEl) nameEl.innerText = company;
    if(tagEl) tagEl.innerText = tagline;
    if(iconEl){
        iconEl.style.background = color;
        if(logo){
            iconEl.innerHTML = `<img src="${RA.escapeHtml(logo)}" style="width:100%;height:100%;object-fit:contain;border-radius:6px;" onerror="this.style.display='none';this.parentElement.innerText='${RA.escapeHtml(company.substring(0,2).toUpperCase())}'">`;
        } else {
            iconEl.innerText = company.substring(0,2).toUpperCase();
        }
    }
}

// ─── TRAFFIC MINI CHART (dashboard overview) ─────────────────
async function loadTrafficMiniChart(){
    const chart  = document.getElementById('dash-traffic-mini-chart');
    const labels = document.getElementById('dash-traffic-mini-labels');
    if(!chart) return;
    try {
        const res = await RA.Auth.fetch('/analytics/traffic.php?period=7d');
        if(!res.success || !res.daily?.length){
            chart.innerHTML = '<div style="flex:1;text-align:center;color:var(--gray-400);font-size:0.75rem;padding:1rem;">No traffic data yet.</div>';
            return;
        }
        const data = res.daily.slice(-7); // ensure max 7 bars
        const maxVal = Math.max(...data.map(d => d.visitors || 0), 1);
        chart.innerHTML = data.map(d => {
            const pct = Math.max(((d.visitors || 0) / maxVal) * 100, 5);
            const label = (d.visitors || 0) >= 1000
                ? ((d.visitors / 1000).toFixed(1) + 'K')
                : String(d.visitors || 0);
            return `<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:0.5rem;"><div class="chart-bar" style="height:${pct}%;"></div><div style="font-size:0.7rem;color:var(--gray-700);font-weight:800;">${label}</div></div>`;
        }).join('');

        if(labels){
            const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
            labels.innerHTML = data.map(d => {
                const dow = new Date(d.date).getDay();
                return `<span>${days[dow]}</span>`;
            }).join('');
        }
    } catch(e){ console.error('Traffic mini chart failed', e); }
}

// ─── SEO AUDIT RESULTS (SEO section table) ───────────────────
async function loadSeoAuditResults(){
    const tbody = document.getElementById('seo-audit-tbody');
    if(!tbody) return;
    try {
        const res = await RA.Auth.fetch('/dashboard/seo-audit.php');
        if(!res.success || !res.issues?.length){
            tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--gray-400);padding:2rem;">' +
                (res.message || 'No audit data yet. Run an audit to see results.') + '</td></tr>';
            return;
        }
        const severityMap = {
            critical : { bg:'rgba(214,40,40,0.08)',  color:'var(--flag-red)',   label:'Critical'  },
            warning  : { bg:'rgba(247,127,0,0.08)',  color:'var(--tangerine)', label:'Warning'    },
            info     : { bg:'var(--gray-100)',        color:'var(--gray-500)',  label:'Info'       }
        };
        const checkSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>';
        tbody.innerHTML = res.issues.map(issue => {
            const sev = severityMap[issue.severity] || severityMap.info;
            const statusHtml = issue.status === 'fixed'
                ? `<span class="status up">${checkSvg} Fixed</span>`
                : issue.status === 'in_progress'
                ? `<span class="status same">In Progress</span>`
                : `<span class="status up">${checkSvg} Fixable</span>`;
            const actionLabel = issue.status === 'fixed' ? 'View' : 'Fix';
            return `<tr>
                <td><strong>${RA.escapeHtml(issue.category || '')}</strong></td>
                <td>${RA.escapeHtml(issue.description || '')}</td>
                <td><span class="status" style="background:${sev.bg};color:${sev.color};">${sev.label}</span></td>
                <td>${statusHtml}</td>
                <td><button class="btn-sm btn-copy">${actionLabel}</button></td>
            </tr>`;
        }).join('');
    } catch(e){
        const tbody = document.getElementById('seo-audit-tbody');
        if(tbody) tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--flag-red);padding:2rem;">Failed to load audit results.</td></tr>';
    }
}

// ─── BILLING PLAN DROPDOWNS ───────────────────────────────────
async function loadPlansIntoDropdowns(){
    try {
        const res = await RA.Auth.fetch('/plans.php');
        if(!res.success || !res.plans?.length) return;

        const mpesaSel  = document.getElementById('mpesa-plan');
        const paypalSel = document.getElementById('paypal-plan');

        // Determine user's current plan for default selection
        const currentPlanId = RA.Auth.user?.plan_id || null;

        const buildOptions = (sel, currency) => {
            if(!sel) return;
            sel.innerHTML = res.plans.map(p => {
                const priceMonthly = currency === 'KES' ? (p.price_kes || 0)        : (p.price_usd || 0);
                const priceAnnual  = currency === 'KES' ? (p.price_kes_annual || 0) : (p.price_usd_annual || 0);
                const symbol       = currency === 'KES' ? 'KES ' : '$';
                const label        = `${p.name} — ${symbol}${Number(priceMonthly).toLocaleString()}/mo`;
                const selected     = (currentPlanId && String(p.id) === String(currentPlanId)) ? ' selected' : '';
                return `<option value="${p.id}" data-price-monthly="${priceMonthly}" data-price-annual="${priceAnnual}"${selected}>${label}</option>`;
            }).join('');
            // Sync mpesa amount field to newly selected plan
            if(currency === 'KES'){
                const amtEl = document.getElementById('mpesa-amount');
                if(amtEl && sel.options[sel.selectedIndex]){
                    amtEl.value = sel.options[sel.selectedIndex].dataset.priceMonthly || '';
                }
            }
        };

        buildOptions(mpesaSel,  'KES');
        buildOptions(paypalSel, 'USD');

        // Re-wire change events so switching plan updates amount
        if(mpesaSel){
            mpesaSel.addEventListener('change', () => {
                const amtEl = document.getElementById('mpesa-amount');
                if(amtEl && mpesaSel.options[mpesaSel.selectedIndex]){
                    const cycle = window.__dashBillingCycle || 'monthly';
                    amtEl.value = cycle === 'annual'
                        ? mpesaSel.options[mpesaSel.selectedIndex].dataset.priceAnnual
                        : mpesaSel.options[mpesaSel.selectedIndex].dataset.priceMonthly;
                }
            });
        }
    } catch(e){ console.error('Plans dropdown load failed', e); }
}

// ─── ADVANCED ANALYTICS ──────────────────────────────────────
async function loadAnalytics(){
    const period = document.getElementById('analytics-period')?.value || '30d';
    loadAnalyticsOverview(period);
    loadAnalyticsTraffic(period);
    loadAnalyticsPages(period);
    loadAnalyticsGoals();
    loadAnalyticsConversions(period);
}

async function loadAnalyticsOverview(period){
    try {
        const res = await RA.Auth.fetch('/analytics/overview.php?period=' + period);
        if(!res.success) return;
        const s = res.stats;

        const visitors = document.getElementById('analytics-visitors');
        const visitorsChange = document.getElementById('analytics-visitors-change');
        const pageviews = document.getElementById('analytics-pageviews');
        const pageviewsChange = document.getElementById('analytics-pageviews-change');
        const bounce = document.getElementById('analytics-bounce');
        const convRate = document.getElementById('analytics-conv-rate');
        const convLabel = document.getElementById('analytics-conv-label');
        const convCount = document.getElementById('analytics-conv-count');
        const sessions = document.getElementById('analytics-sessions');
        const avgSession = document.getElementById('analytics-avg-session');
        const revenue = document.getElementById('analytics-revenue');

        if(visitors) visitors.innerText = (s.visitors || 0).toLocaleString();
        if(pageviews) pageviews.innerText = (s.pageviews || 0).toLocaleString();
        if(bounce) bounce.innerText = (s.bounce_rate || 0) + '%';
        if(convRate) convRate.innerText = (s.conversion_rate || 0) + '%';
        if(convCount) convCount.innerText = (s.conversions || 0) + ' conversions';
        if(sessions) sessions.innerText = (s.sessions || 0).toLocaleString();
        if(avgSession) avgSession.innerText = formatDuration(s.avg_session_sec || 0);
        if(revenue) revenue.innerText = 'KES ' + (s.conversion_value || 0).toLocaleString();

        if(visitorsChange){
            const vChange = s.visitor_change_pct || 0;
            visitorsChange.className = 'stat-change ' + (vChange >= 0 ? 'up' : 'down');
            visitorsChange.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="${vChange >= 0 ? '23 6 13.5 15.5 8.5 10.5 1 18' : '23 18 13.5 8.5 8.5 13.5 1 6'}"/><polyline points="${vChange >= 0 ? '17 6 23 6 23 12' : '17 18 23 18 23 12'}"/></svg> <span>${Math.abs(vChange)}% vs last period</span>`;
        }
        if(pageviewsChange){
            const pChange = s.pageview_change_pct || 0;
            pageviewsChange.className = 'stat-change ' + (pChange >= 0 ? 'up' : 'down');
            pageviewsChange.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="${pChange >= 0 ? '23 6 13.5 15.5 8.5 10.5 1 18' : '23 18 13.5 8.5 8.5 13.5 1 6'}"/><polyline points="${pChange >= 0 ? '17 6 23 6 23 12' : '17 18 23 18 23 12'}"/></svg> <span>${Math.abs(pChange)}% vs last period</span>`;
        }
    } catch(e){ console.error('Analytics overview failed', e); }
}

async function loadAnalyticsTraffic(period){
    try {
        const res = await RA.Auth.fetch('/analytics/traffic.php?period=' + period);
        const chart = document.getElementById('analytics-traffic-chart');
        const labels = document.getElementById('analytics-chart-labels');
        if(!chart) return;
        if(!res.success || !res.daily?.length){
            chart.innerHTML = '<div style="text-align:center;color:var(--gray-400);padding:2rem;">No traffic data yet. Connect Google Analytics to see data.</div>';
            if(labels) labels.innerHTML = '';
            return;
        }
        const data = res.daily;
        const maxVal = Math.max(...data.map(d=>d.visitors || 0), 1);

        chart.innerHTML = data.map(d=>{
            const pct = ((d.visitors || 0) / maxVal) * 100;
            const dateLabel = new Date(d.date).toLocaleDateString('en-GB',{day:'numeric',month:'short'});
            return `<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:0.5rem;"><div class="chart-bar" style="height:${Math.max(pct,5)}%;"></div><div style="font-size:0.7rem;color:var(--gray-700);font-weight:800;">${(d.visitors || 0).toLocaleString()}</div></div>`;
        }).join('');

        if(labels) labels.innerHTML = data.map(d=>`<span>${new Date(d.date).toLocaleDateString('en-GB',{day:'numeric',month:'short'})}</span>`).join('');

        // Sources
        const sourcesList = document.getElementById('analytics-sources-list');
        if(sourcesList && res.sources && Object.keys(res.sources).length > 0){
            const total = Object.values(res.sources).reduce((a,b)=>a+b,0);
            sourcesList.innerHTML = Object.entries(res.sources).map(([src,val])=>{
                const pct = Math.round((val/total)*100);
                return `<div style="display:flex;align-items:center;gap:0.75rem;"><span style="font-size:0.8rem;font-weight:600;color:var(--gray-700);width:80px;">${RA.escapeHtml(src)}</span><div style="flex:1;height:6px;background:var(--gray-200);border-radius:9999px;overflow:hidden;"><div style="height:100%;background:var(--gradient-sunset);border-radius:9999px;width:${pct}%;"></div></div><span style="font-size:0.75rem;font-weight:700;color:var(--gray-900);width:36px;text-align:right;">${pct}%</span></div>`;
            }).join('');
        } else if(sourcesList){
            sourcesList.innerHTML = '<div style="text-align:center;color:var(--gray-400);padding:2rem;">No source data yet.</div>';
        }
    } catch(e){ console.error('Traffic load failed', e); }
}

async function loadAnalyticsPages(period){
    try {
        const res = await RA.Auth.fetch('/analytics/pages.php?period=' + period);
        const tbody = document.getElementById('analytics-pages-tbody');
        if(!tbody) return;
        if(!res.success || !res.pages?.length){
            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--gray-400);padding:2rem;">No page data yet.</td></tr>';
            return;
        }
        tbody.innerHTML = res.pages.map(p=>`
            <tr>
                <td><strong>${RA.escapeHtml(p.page_path)}</strong></td>
                <td>${(p.total_views || 0).toLocaleString()}</td>
                <td>${(p.total_unique || 0).toLocaleString()}</td>
                <td>${formatDuration(p.avg_time || 0)}</td>
            </tr>
        `).join('');
    } catch(e){
        const tbody = document.getElementById('analytics-pages-tbody');
        if(tbody) tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--flag-red);padding:2rem;">Failed to load pages.</td></tr>';
    }
}

async function loadAnalyticsGoals(){
    try {
        const res = await RA.Auth.fetch('/analytics/goals.php');
        const list = document.getElementById('analytics-goals-list');
        if(!list) return;
        if(!res.success || !res.goals?.length){
            list.innerHTML = '<div style="text-align:center;color:var(--gray-400);padding:2rem;">No goals set yet. Add your first conversion goal.</div>';
            return;
        }
        list.innerHTML = res.goals.map(g=>`
            <div style="display:flex;align-items:center;justify-content:space-between;padding:0.875rem;background:var(--gray-50);border-radius:10px;border:1px solid transparent;transition:all 0.2s;">
                <div>
                    <div style="font-weight:700;font-size:0.85rem;color:var(--gray-900);">${RA.escapeHtml(g.name)}</div>
                    <div style="font-size:0.75rem;color:var(--gray-500);margin-top:0.125rem;">${g.goal_type} • ${g.conversions_30d || 0} conversions (30d)</div>
                </div>
                <div style="display:flex;gap:0.5rem;">
                    <button class="btn-sm btn-copy" onclick="deleteGoal(${g.id})">Delete</button>
                </div>
            </div>
        `).join('');
    } catch(e){
        const list = document.getElementById('analytics-goals-list');
        if(list) list.innerHTML = '<div style="text-align:center;color:var(--flag-red);padding:2rem;">Failed to load goals.</div>';
    }
}

async function loadAnalyticsConversions(period){
    try {
        const res = await RA.Auth.fetch('/analytics/conversions.php?period=' + period);
        const list = document.getElementById('analytics-recent-list');
        if(!list) return;
        if(!res.success || !res.recent?.length){
            list.innerHTML = '<div style="text-align:center;color:var(--gray-400);padding:2rem;">No conversions tracked yet.</div>';
            return;
        }
        list.innerHTML = res.recent.slice(0,10).map(c=>{
            const date = new Date(c.created_at).toLocaleDateString('en-GB',{day:'numeric',month:'short',hour:'2-digit',minute:'2-digit'});
            return `<div style="display:flex;align-items:center;justify-content:space-between;padding:0.875rem;background:var(--gray-50);border-radius:10px;">
                <div>
                    <div style="font-weight:700;font-size:0.85rem;color:var(--gray-900);">${RA.escapeHtml(c.goal_name || 'Conversion')}</div>
                    <div style="font-size:0.75rem;color:var(--gray-500);margin-top:0.125rem;">${RA.escapeHtml(c.source || 'Direct')} • ${RA.escapeHtml(c.device_type || 'desktop')} • ${date}</div>
                </div>
                <div style="font-weight:800;font-size:0.9rem;color:var(--deep-blue);">${parseFloat(c.conversion_value || 0) > 0 ? 'KES ' + parseFloat(c.conversion_value).toLocaleString() : ''}</div>
            </div>`;
        }).join('');
    } catch(e){
        const list = document.getElementById('analytics-recent-list');
        if(list) list.innerHTML = '<div style="text-align:center;color:var(--flag-red);padding:2rem;">Failed to load conversions.</div>';
    }
}

function formatDuration(sec){
    if(!sec || sec < 60) return sec + 's';
    const m = Math.floor(sec/60);
    const s = sec % 60;
    return m + 'm ' + s + 's';
}

function showGoalForm(){
    const name = prompt('Goal name (e.g. "Contact Form Submit"):');
    if(!name) return;
    const type = prompt('Goal type: url, event, or duration?','url');
    if(!['url','event','duration'].includes(type)) return;
    const target = prompt('Target value (e.g. /thank-you or button-click):');
    if(!target) return;
    saveGoal(name, type, target);
}

async function saveGoal(name, type, target){
    try {
        const res = await RA.Auth.fetch('/analytics/goals.php', {
            method: 'POST',
            body: JSON.stringify({ name, goal_type: type, target_value: target })
        });
        if(res.success){
            alert('Goal created!');
            loadAnalyticsGoals();
        } else {
            alert(res.message || 'Failed to create goal.');
        }
    } catch(e){ alert('Network error.'); }
}

async function deleteGoal(id){
    if(!confirm('Delete this goal?')) return;
    try {
        const res = await RA.Auth.fetch('/analytics/goals.php?id=' + id, { method: 'DELETE' });
        if(res.success){
            loadAnalyticsGoals();
        } else {
            alert(res.message || 'Failed to delete.');
        }
    } catch(e){ alert('Network error.'); }
}

// ─── KEYWORDS & COMPETITORS CRUD ─────────────────────────────
async function addKeyword(){
    const input = document.getElementById('keyword-input');
    const keyword = input?.value.trim();
    if(!keyword){ alert('Enter a keyword to track.'); return; }
    try {
        const res = await RA.Auth.fetch('/keywords/create.php', {
            method: 'POST',
            body: JSON.stringify({ keyword })
        });
        if(res.success){
            input.value = '';
            loadKeywords();
            loadOverviewStats();
        } else {
            alert(res.message || 'Failed to add keyword.');
        }
    } catch(e){ alert('Network error.'); }
}

async function addCompetitor(){
    const input = document.getElementById('competitor-input');
    const domain = input?.value.trim();
    if(!domain){ alert('Enter a competitor domain.'); return; }
    try {
        const res = await RA.Auth.fetch('/competitors/create.php', {
            method: 'POST',
            body: JSON.stringify({ domain })
        });
        if(res.success){
            input.value = '';
            loadCompetitors();
            loadOverviewStats();
        } else {
            alert(res.message || 'Failed to add competitor.');
        }
    } catch(e){ alert('Network error.'); }
}

// ─── SEO AUDIT ───────────────────────────────────────────────
async function runAudit(){
    const btn = event?.target || document.querySelector('#section-seo-suite .card-action, #section-site-analyzer .card-action');
    if(btn) { btn.innerText = 'Running...'; btn.disabled = true; }
    try {
        const res = await RA.Auth.fetch('/audit/run.php', { method: 'POST', body: JSON.stringify({}) });
        if(btn) { btn.disabled = false; btn.innerText = btn.getAttribute('onclick')?.includes('runAudit') && btn.innerText.includes('Run New') ? 'Run New Audit' : btn.innerText.includes('Analysis') ? 'Run Analysis' : 'Run Audit'; }
        if(res.success){
            alert('Audit complete! Overall Score: ' + res.scores.overall + '/100');
            loadOverviewStats();
        } else {
            alert(res.message || 'Audit failed.');
        }
    } catch(e){
        if(btn) { btn.disabled = false; btn.innerText = 'Run Audit'; }
        alert('Network error during audit.');
    }
}

// ─── AI VISIBILITY / LLM READINESS ───────────────────────────
async function runLlmAudit(){
    const btn = document.getElementById('llm-run-btn');
    if(btn) { btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> Running...'; btn.disabled = true; }
    try {
        const res = await RA.Auth.fetch('/audit/llm-readiness.php', { method: 'POST', body: JSON.stringify({}) });
        if(btn) { btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> Run Audit'; btn.disabled = false; }
        if(res.success){
            updateLlmDashboard(res);
            loadLlmHistory();
            loadQuota();
        } else {
            alert(res.message || 'LLM audit failed.');
        }
    } catch(e){
        if(btn) { btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> Run Audit'; btn.disabled = false; }
        alert('Network error during LLM audit.');
    }
}

function updateLlmDashboard(data){
    const score = data.overall_score ?? 0;
    const cats = data.category_scores || {};
    const issues = data.issues || [];
    const schemas = data.schema_inventory || [];

    // Score ring
    const ringFill = document.getElementById('llm-score-ring-fill');
    const scoreNum = document.getElementById('llm-score-number');
    const scoreLabel = document.getElementById('llm-score-label');
    if(ringFill) ringFill.style.strokeDashoffset = 377 - (377 * score / 100);
    if(scoreNum) scoreNum.innerText = score;
    if(scoreLabel) scoreLabel.innerText = score >= 80 ? 'Excellent' : score >= 60 ? 'Good' : score >= 40 ? 'Fair' : 'Needs Work';

    // Stats
    const statScore = document.getElementById('llm-stat-score');
    const statLabel = document.getElementById('llm-stat-label');
    if(statScore) statScore.innerHTML = score + '<span style="font-size:0.9rem;color:var(--gray-400);font-weight:500">/100</span>';
    if(statLabel) statLabel.innerHTML = '<span>' + (score >= 80 ? 'Well optimized for LLMs' : score >= 60 ? 'Room for improvement' : 'Needs attention') + '</span>';

    const statSchemas = document.getElementById('llm-stat-schemas');
    const statSchemasLabel = document.getElementById('llm-stat-schemas-label');
    if(statSchemas) statSchemas.innerText = schemas.length;
    if(statSchemasLabel) statSchemasLabel.innerHTML = '<span>' + (schemas.length > 0 ? schemas.map(s=>s.type).join(', ') : 'No schema detected') + '</span>';

    const statWords = document.getElementById('llm-stat-words');
    const statWordsLabel = document.getElementById('llm-stat-words-label');
    if(statWords) statWords.innerText = (data.word_count || 0).toLocaleString();
    if(statWordsLabel) statWordsLabel.innerHTML = '<span>On homepage</span>';

    const statIssues = document.getElementById('llm-stat-issues');
    const statIssuesLabel = document.getElementById('llm-stat-issues-label');
    if(statIssues) statIssues.innerText = issues.length;
    if(statIssuesLabel) statIssuesLabel.innerHTML = '<span>' + (issues.length === 0 ? 'No issues found' : issues.length + ' to address') + '</span>';

    // Breakdown bars
    const breakdowns = [
        { key: 'structure', label: 'Structure', color: 'var(--deep-blue)' },
        { key: 'entities', label: 'Entities', color: 'var(--flag-red)' },
        { key: 'content', label: 'Content', color: 'var(--tangerine)' },
        { key: 'authority', label: 'Authority', color: 'var(--sunflower)' }
    ];
    breakdowns.forEach(b => {
        const val = cats[b.key] ?? 0;
        const bar = document.getElementById('llm-bar-' + b.key);
        const valEl = document.getElementById('llm-val-' + b.key);
        if(bar) { bar.style.width = val + '%'; bar.style.background = b.color; }
        if(valEl) valEl.innerText = val;
    });

    // Issues table
    const tbody = document.getElementById('llm-issues-tbody');
    if(tbody){
        if(issues.length === 0){
            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--gray-400);padding:2rem;">No issues found. Great job!</td></tr>';
        } else {
            tbody.innerHTML = issues.slice(0, 10).map(issue => {
                const sevClass = (issue.severity === 'critical') ? 'critical' : (issue.severity === 'warning') ? 'warning' : 'info';
                return `<tr>
                    <td><span class="issue-severity ${sevClass}">${issue.severity || 'info'}</span></td>
                    <td><strong>${RA.escapeHtml(issue.category || 'General')}</strong></td>
                    <td>${RA.escapeHtml(issue.message || issue.title || '')}</td>
                    <td>${RA.escapeHtml(issue.recommendation || 'Review and fix.')}</td>
                </tr>`;
            }).join('');
        }
    }

    // Schema inventory
    const schemaDiv = document.getElementById('llm-schema-inventory');
    if(schemaDiv){
        if(schemas.length === 0){
            schemaDiv.innerHTML = '<div style="text-align:center;color:var(--gray-400);padding:2rem;grid-column:1/-1;">No schema markup detected. Use Quick Actions to generate some.</div>';
        } else {
            schemaDiv.innerHTML = schemas.map(s => `
                <div style="background:var(--gray-50);border-radius:10px;padding:1rem;border:var(--card-border);display:flex;align-items:center;gap:0.75rem;">
                    <div style="width:36px;height:36px;border-radius:8px;background:rgba(16,185,129,0.08);color:#059669;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <div>
                        <div style="font-weight:700;font-size:0.85rem;color:var(--gray-900);">${RA.escapeHtml(s.type || 'Schema')}</div>
                        <div style="font-size:0.75rem;color:var(--gray-500);">${s.format || 'JSON-LD'} &bull; ${s.found ? 'Found' : 'Missing'}</div>
                    </div>
                </div>
            `).join('');
        }
    }
}

async function loadLlmHistory(){
    try {
        const res = await RA.Auth.fetch('/audit/llm-history.php');
        if(res.success && res.history?.length > 0){
            const latest = res.history[0];
            updateLlmDashboard(latest);
            // Render history chart
            const chart = document.getElementById('llm-history-chart');
            if(chart){
                const history = res.history.slice(0, 14).reverse();
                const maxScore = Math.max(...history.map(h => h.overall_score || 0), 100);
                chart.innerHTML = history.map(h => {
                    const hScore = h.overall_score || 0;
                    const pct = (hScore / maxScore) * 100;
                    const date = new Date(h.created_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' });
                    return `<div class="llm-history-bar" style="height:${Math.max(pct, 8)}%;"><div class="tooltip">${date}: ${hScore}/100</div></div>`;
                }).join('');
            }
        }
    } catch(e){ console.error('LLM history load failed', e); }
}

async function generateFAQ(){
    const btn = event?.target;
    if(btn) { btn.style.opacity = '0.6'; btn.style.pointerEvents = 'none'; }
    try {
        const res = await RA.Auth.fetch('/content/generate-faq.php', { method: 'POST', body: JSON.stringify({}) });
        if(btn) { btn.style.opacity = ''; btn.style.pointerEvents = ''; }
        if(res.success){
            showLlmResult('Generated FAQs', JSON.stringify(res.faqs, null, 2));
            loadQuota();
        } else {
            alert(res.message || 'FAQ generation failed.');
        }
    } catch(e){
        if(btn) { btn.style.opacity = ''; btn.style.pointerEvents = ''; }
        alert('Network error during FAQ generation.');
    }
}

async function generateSchema(){
    const btn = event?.target;
    if(btn) { btn.style.opacity = '0.6'; btn.style.pointerEvents = 'none'; }
    try {
        const res = await RA.Auth.fetch('/content/generate-schema.php', { method: 'POST', body: JSON.stringify({ schema_type: 'all' }) });
        if(btn) { btn.style.opacity = ''; btn.style.pointerEvents = ''; }
        if(res.success && res.schemas?.length > 0){
            let output = '';
            res.schemas.forEach(s => {
                output += `/* ${s.type} */\n${s.script_tag}\n\n`;
            });
            showLlmResult('Generated Schema Markup', output);
            loadQuota();
        } else {
            alert(res.message || 'Schema generation failed.');
        }
    } catch(e){
        if(btn) { btn.style.opacity = ''; btn.style.pointerEvents = ''; }
        alert('Network error during schema generation.');
    }
}

async function optimizeForLLM(){
    const btn = event?.target;
    if(btn) { btn.style.opacity = '0.6'; btn.style.pointerEvents = 'none'; }
    try {
        const res = await RA.Auth.fetch('/content/generate.php', { method: 'POST', body: JSON.stringify({ mode: 'llm-optimize' }) });
        if(btn) { btn.style.opacity = ''; btn.style.pointerEvents = ''; }
        if(res.success){
            showLlmResult('LLM-Optimized Content', res.content || res.body_text || 'Content optimized successfully.');
            loadQuota();
        } else {
            alert(res.message || 'Optimization failed.');
        }
    } catch(e){
        if(btn) { btn.style.opacity = ''; btn.style.pointerEvents = ''; }
        alert('Network error during optimization.');
    }
}

function showLlmResult(title, content){
    const card = document.getElementById('llm-result-card');
    const titleEl = document.getElementById('llm-result-title');
    const contentEl = document.getElementById('llm-result-content');
    if(card) card.style.display = 'block';
    if(titleEl) titleEl.innerText = title;
    if(contentEl) contentEl.innerText = content;
    if(card) card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function copyLlmResult(){
    const content = document.getElementById('llm-result-content')?.innerText;
    if(content){
        navigator.clipboard.writeText(content).then(() => {
            const btn = document.querySelector('#llm-result-card .card-action');
            if(btn) { btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Copied!'; setTimeout(() => btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy', 2000); }
        });
    }
}

// ─── SMM SPY ADS FILTER ──────────────────────────────────────
let __allAds = [];
async function loadSmmAds(platform='all'){
    const grid = document.getElementById('smm-ads-grid');
    if(!grid) return;
    try {
        const res = await RA.Auth.fetch('/dashboard/ads.php?platform=' + platform);
        if(!res.success || !res.ads?.length){
            grid.innerHTML = '<div class="ad-card" style="text-align:center;color:var(--gray-400);padding:2rem;">No ads monitored yet.</div>';
            // Zero out platform count
            const platEl = document.getElementById('smm-stat-platforms');
            if(platEl) platEl.innerText = '0';
            const platSub = document.getElementById('smm-stat-platforms-sub');
            if(platSub) platSub.innerText = 'No platforms connected';
            return;
        }
        __allAds = res.ads;
        renderSmmAds(res.ads);

        // Derive distinct platform count from the full ad list
        const platforms = [...new Set(res.ads.map(a => (a.platform || '').toLowerCase()).filter(Boolean))];
        const platEl  = document.getElementById('smm-stat-platforms');
        const platSub = document.getElementById('smm-stat-platforms-sub');
        if(platEl) platEl.innerText = platforms.length;
        if(platSub) platSub.innerText = platforms.map(p => p.charAt(0).toUpperCase() + p.slice(1)).join(', ');
    } catch(e){ console.error('SMM ads failed', e); }
}

function renderSmmAds(ads){
    const grid = document.getElementById('smm-ads-grid');
    if(!grid) return;
    const gradients = ['linear-gradient(135deg,#003049,#d62828)','linear-gradient(135deg,#f77f00,#fcbf49)','linear-gradient(135deg,#003049,#0077b5)','linear-gradient(135deg,#d62828,#f77f00)'];
    grid.innerHTML = ads.map((a,i)=>`
        <div class="ad-card">
            <div class="ad-preview" style="background:${gradients[i % gradients.length]};">${a.platform || 'Ad'}</div>
            <div class="ad-info">
                <div class="ad-platform">${a.platform || 'Unknown'} ${a.landing_page ? '&bull; ' + new URL(a.landing_page).hostname : ''}</div>
                <div class="ad-text">${a.ad_copy || ''}</div>
                <div class="ad-actions">
                    <button class="btn-sm btn-copy" onclick="navigator.clipboard.writeText('${(a.ad_copy || '').replace(/'/g,"\\'")}').then(()=>{this.innerText='Copied!';setTimeout(()=>this.innerText='Copy',1500)})">Copy</button>
                    <button class="btn-sm btn-spin" onclick="spinAd('${(a.ad_copy || '').replace(/'/g,"\\'")}', '${a.platform || 'facebook'}')">AI Spin</button>
                </div>
            </div>
        </div>
    `).join('');
}

function filterAds(btn, platform){
    document.querySelectorAll('#section-smm-spy .tab').forEach(t=>t.classList.remove('active'));
    btn.classList.add('active');
    if(__allAds.length && platform !== 'all'){
        const filtered = __allAds.filter(a=>a.platform === platform);
        renderSmmAds(filtered.length ? filtered : []);
    } else if(__allAds.length){
        renderSmmAds(__allAds);
    } else {
        loadSmmAds(platform);
    }
}

// ─── SETTINGS: PROFILE & PREFERENCES ─────────────────────────
function wireSettings(){
    // Profile save
    const profileBtn = document.getElementById('profile-save-btn');
    if(profileBtn){
        profileBtn.addEventListener('click', async function(){
            profileBtn.innerText = 'Saving...'; profileBtn.disabled = true;
            const status = document.getElementById('profile-status');
            try {
                const res = await RA.Auth.fetch('/user/profile.php', {
                    method: 'POST',
                    body: JSON.stringify({
                        first_name: document.getElementById('profile-first-name').value,
                        last_name: document.getElementById('profile-last-name').value,
                        company_name: document.getElementById('profile-company').value,
                        phone: document.getElementById('profile-phone').value
                    })
                });
                status.style.display = 'block';
                if(res.success){
                    status.style.color = '#059669';
                    status.innerText = 'Profile saved!';
                    // Update displayed name in user pill
                    const pill = document.querySelector('.user-pill');
                    if(pill){
                        const nameEl = pill.querySelector('.user-name');
                        const avatarEl = pill.querySelector('.avatar');
                        const fullName = document.getElementById('profile-first-name').value + ' ' + document.getElementById('profile-last-name').value;
                        if(nameEl) nameEl.innerText = fullName.trim();
                        if(avatarEl) avatarEl.innerText = (document.getElementById('profile-first-name').value[0] || '') + (document.getElementById('profile-last-name').value[0] || '');
                    }
                } else {
                    status.style.color = 'var(--flag-red)';
                    status.innerText = res.message || 'Failed to save.';
                }
            } catch(e){
                status.style.display = 'block';
                status.style.color = 'var(--flag-red)';
                status.innerText = 'Network error.';
            }
            profileBtn.innerText = 'Save Profile'; profileBtn.disabled = false;
            setTimeout(()=>{ status.style.display='none'; }, 4000);
        });
    }

    // My Websites — load list + wire add form + wire GA "Configure" button
    loadWebsites();

    const showAddBtn = document.getElementById('show-add-website-btn');
    const addForm    = document.getElementById('add-website-form');
    const cancelBtn  = document.getElementById('cancel-add-website-btn');
    const addSubmit  = document.getElementById('add-website-submit-btn');

    if(showAddBtn && addForm){
        showAddBtn.addEventListener('click', ()=>{ addForm.style.display = addForm.style.display === 'none' ? '' : 'none'; });
    }
    if(cancelBtn && addForm){
        cancelBtn.addEventListener('click', ()=>{ addForm.style.display = 'none'; });
    }
    if(addSubmit){
        addSubmit.addEventListener('click', async function(){
            const url  = (document.getElementById('new-website-url')?.value || '').trim();
            const ga4  = (document.getElementById('new-ga4-id')?.value || '').trim();
            const gsc  = (document.getElementById('new-gsc-url')?.value || '').trim();
            const stat = document.getElementById('add-website-status');
            if(!url){ alert('Please enter a website URL.'); return; }
            addSubmit.disabled = true; addSubmit.innerText = 'Adding…';
            try {
                const res = await RA.Auth.fetch('/user/websites.php', {
                    method: 'POST',
                    body: JSON.stringify({ url, ga4_property_id: ga4, gsc_site_url: gsc || null })
                });
                if(stat){ stat.style.display='block'; stat.style.color = res.success ? '#059669' : 'var(--flag-red)'; stat.innerText = res.message || (res.success ? 'Website added!' : 'Failed.'); }
                if(res.success){
                    ['new-website-url','new-ga4-id','new-gsc-url'].forEach(id=>{ const el=document.getElementById(id); if(el) el.value=''; });
                    setTimeout(()=>{ if(addForm) addForm.style.display='none'; if(stat) stat.style.display='none'; }, 1500);
                    loadWebsites();
                }
            } catch(e){
                if(stat){ stat.style.display='block'; stat.style.color='var(--flag-red)'; stat.innerText='Network error.'; }
            }
            addSubmit.disabled = false; addSubmit.innerText = 'Add';
        });
    }

    // GA "Configure" button scrolls to the My Websites card
    const gaBtn = document.getElementById('ga-connect-btn');
    if(gaBtn){
        gaBtn.addEventListener('click', ()=>{
            const card = document.getElementById('my-websites-card');
            if(card) card.scrollIntoView({ behavior:'smooth', block:'start' });
            card?.classList.add('highlight-pulse');
            setTimeout(()=> card?.classList.remove('highlight-pulse'), 1500);
        });
    }

    // Preferences save
    const prefBtn = document.getElementById('pref-save-btn');
    if(prefBtn){
        prefBtn.addEventListener('click', async function(){
            prefBtn.innerText = 'Saving...'; prefBtn.disabled = true;
            const status = document.getElementById('pref-status');
            try {
                const res = await RA.Auth.fetch('/user/preferences.php', {
                    method: 'POST',
                    body: JSON.stringify({
                        default_website: document.getElementById('pref-website').value,
                        timezone: document.getElementById('pref-timezone').value,
                        language: document.getElementById('user-language-select').value,
                        email_notifications: document.getElementById('pref-email-notif').checked
                    })
                });
                status.style.display = 'block';
                if(res.success){
                    status.style.color = '#059669';
                    status.innerText = 'Preferences saved!';
                } else {
                    status.style.color = 'var(--flag-red)';
                    status.innerText = res.message || 'Failed to save.';
                }
            } catch(e){
                status.style.display = 'block';
                status.style.color = 'var(--flag-red)';
                status.innerText = 'Network error.';
            }
            prefBtn.innerText = 'Save Preferences'; prefBtn.disabled = false;
            setTimeout(()=>{ status.style.display='none'; }, 4000);
        });
    }
}

// ─── MY WEBSITES ─────────────────────────────────────────────
function _escHtml(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

async function loadWebsites(){
    const tbody = document.getElementById('websites-tbody');
    if(!tbody) return;
    try {
        const res = await RA.Auth.fetch('/user/websites.php');
        if(!res.success || !res.websites?.length){
            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;padding:2rem;color:var(--gray-400);">No websites added yet. Click "+ Add Website" to get started.</td></tr>';
            // Update GA status indicator
            const gaStatus = document.getElementById('ga-connect-status');
            if(gaStatus) gaStatus.innerText = 'No websites configured';
            return;
        }
        const primary = res.websites.find(w => w.is_primary);
        // Update GA status indicator in Connected Accounts card
        const gaStatus = document.getElementById('ga-connect-status');
        if(gaStatus){
            if(primary?.ga4_property_id) gaStatus.innerText = '✓ Connected – ' + _escHtml(primary.ga4_property_id);
            else gaStatus.innerText = res.websites.length + ' website(s) – GA4 ID not set';
        }
        tbody.innerHTML = res.websites.map(w => `
            <tr style="border-bottom:var(--card-border);">
                <td style="padding:0.75rem;">
                    <div style="display:flex;align-items:center;gap:0.5rem;">
                        ${w.is_primary ? '<span style="font-size:0.65rem;font-weight:700;background:var(--deep-blue);color:white;padding:0.125rem 0.5rem;border-radius:20px;white-space:nowrap;">PRIMARY</span>' : ''}
                        <div>
                            <div style="font-weight:600;color:var(--gray-900);">${_escHtml(w.domain)}</div>
                            <div style="font-size:0.73rem;color:var(--gray-400);">${_escHtml(w.url)}</div>
                        </div>
                    </div>
                </td>
                <td style="padding:0.75rem;">
                    <input type="text" class="form-input website-ga4-input"
                           data-website-id="${w.id}"
                           value="${_escHtml(w.ga4_property_id || '')}"
                           placeholder="properties/123456789"
                           style="font-size:0.8rem;padding:0.375rem 0.625rem;min-width:190px;">
                </td>
                <td style="padding:0.75rem;">
                    <input type="url" class="form-input website-gsc-input"
                           data-website-id="${w.id}"
                           value="${_escHtml(w.gsc_site_url || '')}"
                           placeholder="https://yoursite.co.ke"
                           style="font-size:0.8rem;padding:0.375rem 0.625rem;min-width:190px;">
                </td>
                <td style="padding:0.75rem;">
                    <div style="display:flex;gap:0.4rem;flex-wrap:wrap;">
                        <button class="btn btn-white" style="font-size:0.75rem;padding:0.25rem 0.6rem;"
                                onclick="saveWebsiteRow(${w.id})">Save</button>
                        ${!w.is_primary ? `<button class="btn btn-white" style="font-size:0.75rem;padding:0.25rem 0.6rem;" onclick="setWebsitePrimary(${w.id})">Set Primary</button>` : ''}
                        ${!w.is_primary ? `<button class="btn btn-white" style="font-size:0.75rem;padding:0.25rem 0.6rem;color:var(--flag-red);border-color:var(--flag-red);" onclick="removeWebsite(${w.id})">Remove</button>` : ''}
                    </div>
                </td>
            </tr>
        `).join('');

        // Also wire blur-to-save on GA4 / GSC inputs for convenience
        tbody.querySelectorAll('.website-ga4-input,.website-gsc-input').forEach(inp => {
            inp.addEventListener('blur', function(){ saveWebsiteRow(parseInt(this.dataset.websiteId)); });
        });
    } catch(e){
        tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;padding:2rem;color:var(--flag-red);">Failed to load websites.</td></tr>';
    }
}

window.saveWebsiteRow = async function(websiteId){
    const tbody  = document.getElementById('websites-tbody');
    if(!tbody) return;
    const ga4Row = tbody.querySelector(`.website-ga4-input[data-website-id="${websiteId}"]`);
    const gscRow = tbody.querySelector(`.website-gsc-input[data-website-id="${websiteId}"]`);
    const ga4    = ga4Row ? ga4Row.value.trim() : '';
    const gsc    = gscRow ? gscRow.value.trim() : '';
    const stat   = document.getElementById('websites-status');
    try {
        const res = await RA.Auth.fetch('/user/websites.php', {
            method: 'PUT',
            body: JSON.stringify({ id: websiteId, ga4_property_id: ga4, gsc_site_url: gsc || null })
        });
        if(stat){
            stat.style.display = 'block';
            stat.style.color   = res.success ? '#059669' : 'var(--flag-red)';
            stat.innerText     = res.success ? 'Changes saved.' : (res.message || 'Failed to save.');
            setTimeout(()=>{ stat.style.display='none'; }, 3000);
        }
        if(res.success) loadWebsites(); // refresh to update GA status label
    } catch(e){}
};

window.setWebsitePrimary = async function(websiteId){
    try {
        const res = await RA.Auth.fetch('/user/websites.php', {
            method: 'PUT',
            body: JSON.stringify({ id: websiteId, is_primary: 1 })
        });
        if(res.success) loadWebsites();
        else alert(res.message || 'Failed to set primary.');
    } catch(e){}
};

window.removeWebsite = async function(websiteId){
    if(!confirm('Remove this website from your account?')) return;
    try {
        const res = await RA.Auth.fetch('/user/websites.php?id=' + websiteId, { method: 'DELETE' });
        if(res.success) loadWebsites();
        else alert(res.message || 'Failed to remove website.');
    } catch(e){}
};

// Load settings values from current user
function populateSettings(user){
    if(!user) return;
    const fn = document.getElementById('profile-first-name');
    const ln = document.getElementById('profile-last-name');
    const em = document.getElementById('profile-email');
    const co = document.getElementById('profile-company');
    const ph = document.getElementById('profile-phone');
    const pw = document.getElementById('pref-website');
    const tz = document.getElementById('pref-timezone');
    const lang = document.getElementById('user-language-select');

    if(fn) fn.value = user.first_name || '';
    if(ln) ln.value = user.last_name || '';
    if(em) em.value = user.email || '';
    if(co) co.value = user.company_name || '';
    if(ph) ph.value = user.phone || '';
    if(pw) pw.value = user.website_url || '';
    if(tz) tz.value = user.timezone || 'Africa/Nairobi';
    if(lang) lang.value = user.language || 'en';
}

// ─── FIRST-TIME WALKTHROUGH ──────────────────────────────────
(function(){
    const WALKTHROUGH_KEY = 'ra_walkthrough_done';
    if(localStorage.getItem(WALKTHROUGH_KEY) === '1') return;

    const steps = [
        {
            icon: '<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>',
            title: 'Welcome to Your Dashboard',
            text: 'This is your command center for dominating search and social rankings across Africa. Let\'s take a quick tour of the key features.'
        },
        {
            icon: '<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><path d="M11 8v6"/><path d="M8 11h6"/></svg>',
            title: 'SEO Analyzer',
            text: 'Enter any website URL to get a comprehensive SEO score. We analyze performance, mobile usability, security, and on-page SEO factors.'
        },
        {
            icon: '<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg>',
            title: 'Rank Tracker',
            text: 'Monitor your keyword positions on Google over time. Add keywords, track progress, and discover new ranking opportunities.'
        },
        {
            icon: '<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>',
            title: 'Competitor Monitor',
            text: 'Add competitor domains to watch their strategies. See their keywords, backlinks, and ad campaigns — then outrank them.'
        },
        {
            icon: '<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
            title: 'Ad Spy & AI Spinner',
            text: 'Discover winning competitor ads on Facebook, Instagram, X, and LinkedIn. Use our AI to rewrite them into unique copy for your brand.'
        },
        {
            icon: '<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
            title: 'AI Content Engine',
            text: 'Generate blog articles, social posts, and ad copy tailored for African audiences. Save drafts, edit, and publish directly.'
        },
        {
            icon: '<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"/></svg>',
            title: 'You\'re All Set!',
            text: 'Start by running your first SEO audit or adding competitors. If you need help, visit the Help Center or contact support anytime.'
        }
    ];

    let current = 0;

    const overlay = document.createElement('div');
    overlay.className = 'walkthrough-overlay active';
    overlay.id = 'walkthrough-overlay';

    function renderStep() {
        const s = steps[current];
        const dots = steps.map((_,i) => `<div class="wt-dot ${i===current?'active':''}"></div>`).join('');
        const isLast = current === steps.length - 1;
        overlay.innerHTML = `
            <div class="walkthrough-card">
                <div class="wt-icon">${s.icon}</div>
                <h2>${s.title}</h2>
                <p>${s.text}</p>
                <div class="wt-dots">${dots}</div>
                <div class="wt-actions">
                    <button class="wt-skip" onclick="skipWalkthrough()">Skip Tour</button>
                    <button class="btn btn-primary" onclick="nextWalkthrough()">${isLast ? 'Get Started' : 'Next'}</button>
                </div>
            </div>
        `;
    }

    window.nextWalkthrough = function() {
        current++;
        if(current >= steps.length) {
            localStorage.setItem(WALKTHROUGH_KEY, '1');
            overlay.remove();
            return;
        }
        renderStep();
    };

    window.skipWalkthrough = function() {
        localStorage.setItem(WALKTHROUGH_KEY, '1');
        overlay.remove();
    };

    renderStep();
    document.body.appendChild(overlay);
})();

// ─── LANGUAGE SELECTOR WIRING ────────────────────────────────
(function(){
    const langSelect = document.getElementById('user-language-select');
    if(!langSelect) return;

    // Set initial value from I18N
    if(window.I18N) {
        langSelect.value = I18N.getCurrentLang();
    }

    langSelect.addEventListener('change', function(){
        if(window.I18N) {
            I18N.setLanguage(this.value);
            // Optionally persist to backend
            RA.Auth.fetch('/me.php', {
                method: 'POST',
                body: JSON.stringify({ language: this.value })
            }).catch(() => {});
        }
    });
})();

// ─── TEAM MANAGEMENT ─────────────────────────────────────────
(function(){
    let currentTeam = [];

    async function loadTeam(){
        const section = document.getElementById('section-team');
        if(!section) return;

        const tbody = document.getElementById('team-table-body');
        const badge = document.getElementById('team-seat-badge');
        const inviteForm = document.getElementById('team-invite-form');
        const readonlyNotice = document.getElementById('team-readonly-notice');

        try {
            const res = await RA.Auth.fetch('/team/list.php');
            if(!res.success){
                if(tbody) tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--gray-400);padding:2rem;">Unable to load team.</td></tr>';
                return;
            }

            const isOwner = !res.owner || (RA.Auth.user && RA.Auth.user.id === res.owner.id);
            const isAdmin = (RA.Auth.user && RA.Auth.user.role === 'admin');
            const canManage = isOwner || isAdmin;

            if(badge) badge.innerText = `${res.seats.used} / ${res.seats.max} seats used`;
            if(inviteForm) inviteForm.style.display = canManage ? 'grid' : 'none';
            if(readonlyNotice) readonlyNotice.style.display = canManage ? 'none' : 'flex';

            currentTeam = res.members || [];

            if(tbody){
                if(!currentTeam.length){
                    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--gray-400);padding:2rem;">No team members yet. Invite someone to collaborate.</td></tr>';
                } else {
                    tbody.innerHTML = currentTeam.map(m => {
                        const roleColors = { admin: 'var(--flag-red)', editor: 'var(--tangerine)', viewer: 'var(--gray-500)' };
                        const roleLabel = `<span style="display:inline-block;padding:0.25rem 0.5rem;border-radius:4px;font-size:0.7rem;font-weight:700;text-transform:uppercase;color:white;background:${roleColors[m.role] || 'var(--gray-500)'}">${m.role}</span>`;
                        const joined = m.created_at ? new Date(m.created_at).toLocaleDateString('en-GB', {day:'numeric', month:'short', year:'numeric'}) : '-';
                        const actions = canManage && m.id !== res.owner.id
                            ? `<button class="btn btn-white" style="padding:0.25rem 0.5rem;font-size:0.75rem;" onclick="removeTeamMember(${m.id}, '${escapeHtml(m.email)}')">Remove</button>`
                            : '-';
                        return `<tr>
                            <td>${escapeHtml(m.first_name + ' ' + m.last_name)}</td>
                            <td>${escapeHtml(m.email)}</td>
                            <td>${roleLabel}</td>
                            <td>${joined}</td>
                            <td style="text-align:right;">${actions}</td>
                        </tr>`;
                    }).join('');
                }
            }
        } catch(e) {
            if(tbody) tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--gray-400);padding:2rem;">Failed to load team data.</td></tr>';
        }
    }

    async function inviteTeamMember(){
        const emailIn = document.getElementById('team-invite-email');
        const firstIn = document.getElementById('team-invite-first');
        const roleIn = document.getElementById('team-invite-role');
        const btn = document.getElementById('team-invite-btn');
        const status = document.getElementById('team-status');

        const email = emailIn.value.trim();
        const first = firstIn.value.trim();
        const role = roleIn.value;

        if(!email || !email.includes('@')){
            status.style.display = 'block';
            status.style.color = 'var(--flag-red)';
            status.innerText = 'Please enter a valid email address.';
            return;
        }

        btn.innerText = 'Inviting...';
        btn.disabled = true;
        status.style.display = 'none';

        try {
            const res = await RA.Auth.fetch('/team/invite.php', {
                method: 'POST',
                body: JSON.stringify({ email, first_name: first, last_name: '', role })
            });

            status.style.display = 'block';
            if(res.success){
                status.style.color = '#059669';
                status.innerText = 'Invitation sent!';
                emailIn.value = '';
                firstIn.value = '';
                loadTeam();
            } else {
                status.style.color = 'var(--flag-red)';
                status.innerText = res.message || 'Invitation failed.';
            }
        } catch(e) {
            status.style.display = 'block';
            status.style.color = 'var(--flag-red)';
            status.innerText = 'Network error. Please try again.';
        }

        btn.innerText = 'Invite';
        btn.disabled = false;
    }

    window.removeTeamMember = async function(id, email){
        if(!confirm(`Remove ${email} from your team? They will lose access immediately.`)) return;
        try {
            const res = await RA.Auth.fetch(`/team/remove.php?id=${id}`, { method: 'DELETE' });
            if(res.success){
                loadTeam();
            } else {
                alert(res.message || 'Failed to remove team member.');
            }
        } catch(e) {
            alert('Network error. Please try again.');
        }
    };

    // Wire invite button
    document.addEventListener('DOMContentLoaded', function(){
        const btn = document.getElementById('team-invite-btn');
        if(btn) btn.addEventListener('click', inviteTeamMember);

        // Load team when tab is shown
        const teamNav = document.querySelector('[data-section="team"]');
        if(teamNav){
            teamNav.addEventListener('click', function(){
                setTimeout(loadTeam, 100);
            });
        }
    });
})();

// ─── SOCIAL MANAGER TEASER DISMISS LOGIC ─────────────────────
(function(){
    const TEASER_CLOSED_KEY = 'ra_social_teaser_closed';
    const TEASER_JOINED_KEY = 'ra_social_waitlist_joined';
    const teaser = document.getElementById('social-teaser');
    if(!teaser) return;

    function hideTeaser(){
        teaser.style.display = 'none';
    }

    // Hide permanently if previously closed or joined
    if(localStorage.getItem(TEASER_CLOSED_KEY) || localStorage.getItem(TEASER_JOINED_KEY)){
        hideTeaser();
        return;
    }

    // Close button
    const closeBtn = teaser.querySelector('.social-teaser-close');
    if(closeBtn){
        closeBtn.addEventListener('click', function(){
            localStorage.setItem(TEASER_CLOSED_KEY, '1');
            hideTeaser();
        });
    }

    // Join waitlist button
    const joinBtn = document.getElementById('social-waitlist-btn');
    if(joinBtn){
        joinBtn.addEventListener('click', function(){
            localStorage.setItem(TEASER_JOINED_KEY, '1');
            hideTeaser();
            alert('You have been added to the Social Media Manager waitlist! We will notify you when it launches.');
        });
    }
})();

// ─── ONBOARDING SPOTLIGHT TOUR ─────────────────────────────────
(function(){
    const TOUR_KEY = 'ra_dashboard_tour_seen';
    if(localStorage.getItem(TOUR_KEY)) return;

    const steps = [
        {
            target: '.sidebar-nav',
            title: 'Your Navigation',
            text: 'Everything you need is right here. Switch between SEO tools, competitor intelligence, reports, analytics, and more.',
            placement: 'right'
        },
        {
            target: '#section-overview .stats-grid',
            title: 'Performance Overview',
            text: 'Your SEO score, keyword count, traffic estimates, and content drafts — all at a glance.',
            placement: 'bottom'
        },
        {
            target: '#section-overview .seo-score-container',
            title: 'Website Health Score',
            text: 'See how your site performs across Performance, SEO, Mobile, and Security. Click "Run New Audit" to update it anytime.',
            placement: 'bottom'
        },
        {
            target: '[data-section="keywords"]',
            title: 'Keyword Tracking',
            text: 'Add and monitor the keywords that matter most to your business. We track positions, search volume, and difficulty.',
            placement: 'right'
        },
        {
            target: '[data-section="competitors"]',
            title: 'Competitor Intelligence',
            text: 'Add competitor domains and watch what they rank for, where their backlinks come from, and what ads they run.',
            placement: 'right'
        },
        {
            target: '[data-section="smm-spy"]',
            title: 'Social Media Spy',
            text: 'Browse competitor ads from Facebook, Instagram, X, and LinkedIn. Save ads you want to learn from or spin into your own.',
            placement: 'right'
        },
        {
            target: '[data-section="ai-writer"]',
            title: 'AI Content Writer',
            text: 'Generate articles and social posts powered by your actual SEO audit data. No generic fluff — everything is tailored to your business.',
            placement: 'right'
        },
        {
            target: '[data-section="reports"]',
            title: 'White-label Reports',
            text: 'Generate branded PDF reports for your clients. Agency plan users can fully white-label with their own logo and colors.',
            placement: 'right'
        },
        {
            target: '[data-section="analytics"]',
            title: 'Advanced Analytics',
            text: 'Connect Google Analytics 4 to see real traffic, conversions, top pages, and audience breakdowns inside your dashboard.',
            placement: 'right'
        },
        {
            target: '[data-section="billing"]',
            title: 'Billing & Subscription',
            text: 'Upgrade, downgrade, or renew your plan. Pay with M-Pesa (Kenya) or card via PayPal (global).',
            placement: 'right'
        }
    ];

    let currentStep = 0;
    let overlay, spotlight, tooltip;

    function createElements(){
        overlay = document.createElement('div');
        overlay.className = 'tour-overlay';
        document.body.appendChild(overlay);

        spotlight = document.createElement('div');
        spotlight.className = 'tour-spotlight pulse';
        document.body.appendChild(spotlight);

        tooltip = document.createElement('div');
        tooltip.className = 'tour-tooltip';
        tooltip.innerHTML = `
            <div class="tour-arrow"></div>
            <h4></h4>
            <p></p>
            <div class="tour-actions">
                <span class="tour-step-label"></span>
                <div class="tour-btn-group">
                    <button class="tour-btn-skip" onclick="endTour()">Skip</button>
                    <button class="tour-btn-prev" onclick="prevStep()" style="display:none">Back</button>
                    <button class="tour-btn-next" onclick="nextStep()">Next</button>
                </div>
            </div>
        `;
        document.body.appendChild(tooltip);
    }

    function getTarget(step){
        const el = document.querySelector(step.target);
        if(el) return el;
        // Fallback: try to find by data-section if nav item
        if(step.target.includes('data-section')){
            const section = step.target.match(/data-section="([^"]+)"/)[1];
            return document.querySelector(`[data-section="${section}"]`);
        }
        return null;
    }

    function positionSpotlight(rect){
        const padding = 8;
        spotlight.style.width = (rect.width + padding * 2) + 'px';
        spotlight.style.height = (rect.height + padding * 2) + 'px';
        spotlight.style.left = (rect.left - padding) + 'px';
        spotlight.style.top = (rect.top - padding + window.scrollY) + 'px';
    }

    function positionTooltip(rect, placement){
        const tooltipRect = tooltip.getBoundingClientRect();
        const margin = 16;
        let top, left;

        switch(placement){
            case 'right':
                left = rect.right + margin;
                top = rect.top + window.scrollY;
                break;
            case 'left':
                left = rect.left - tooltipRect.width - margin;
                top = rect.top + window.scrollY;
                break;
            case 'top':
                left = rect.left;
                top = rect.top - tooltipRect.height - margin + window.scrollY;
                break;
            case 'bottom':
            default:
                left = rect.left;
                top = rect.bottom + margin + window.scrollY;
                break;
        }

        // Keep in viewport
        const maxLeft = window.innerWidth - tooltipRect.width - 16;
        const maxTop = window.innerHeight - tooltipRect.height - 16;
        left = Math.max(16, Math.min(left, maxLeft));
        top = Math.max(16, Math.min(top, maxTop + window.scrollY));

        tooltip.style.left = left + 'px';
        tooltip.style.top = top + 'px';
        tooltip.setAttribute('data-placement', placement);
    }

    function showStep(index){
        const step = steps[index];
        const target = getTarget(step);

        if(!target){
            // Skip missing targets
            if(index < steps.length - 1){
                showStep(index + 1);
            } else {
                endTour();
            }
            return;
        }

        // Scroll target into view smoothly
        target.scrollIntoView({ behavior: 'smooth', block: 'center' });

        // Wait for scroll then position
        setTimeout(() => {
            const rect = target.getBoundingClientRect();
            positionSpotlight(rect);
            positionTooltip(rect, step.placement);

            tooltip.querySelector('h4').innerText = step.title;
            tooltip.querySelector('p').innerText = step.text;
            tooltip.querySelector('.tour-step-label').innerText = `Step ${index + 1} of ${steps.length}`;

            const prevBtn = tooltip.querySelector('.tour-btn-prev');
            const nextBtn = tooltip.querySelector('.tour-btn-next');

            prevBtn.style.display = index > 0 ? 'inline-block' : 'none';
            nextBtn.innerText = index === steps.length - 1 ? 'Finish' : 'Next';
        }, 350);
    }

    window.nextStep = function(){
        currentStep++;
        if(currentStep >= steps.length){
            endTour();
        } else {
            showStep(currentStep);
        }
    };

    window.prevStep = function(){
        if(currentStep > 0){
            currentStep--;
            showStep(currentStep);
        }
    };

    window.endTour = function(){
        localStorage.setItem(TOUR_KEY, '1');
        if(overlay) overlay.remove();
        if(spotlight) spotlight.remove();
        if(tooltip) tooltip.remove();
    };

    // Auto-start after dashboard data loads
    setTimeout(() => {
        createElements();
        showStep(0);
    }, 1200);
})();
</script>
</body>
</html>
