/* ═══════════════════════════════════════════════════════════════════
   SeoData.jsx — sample data + shared small components for SEO Tracker. v1.0.0
   Ported verbatim from the Claude Design v2 package
   (_CLAUDE-DESIGN/_2026-06-12-v2-SaaS-Redesign/seo-data.jsx).
   ILLUSTRATIVE SAMPLE DATA ONLY — real data arrives with the /seo/rank/*
   API increment (DataForSEO / BYOK per the SEO add-on spec). Domains are
   generic placeholders (.example / agencysite.com), never customer names.
   Load order: SECOND (after SeoCharts.jsx).
   Registers: window.WPSB.SeoData = { SEO_KEYWORDS, SEO_COMPETITORS,
   SEO_SUGGESTIONS, SEO_STATS, SerpFeatures, PositionBadge, ClaudeChip }.
   ═══════════════════════════════════════════════════════════════════ */
(function () {
const WIcon = window.WIcon;

const SEO_KEYWORDS = [
  { kw: 'managed wordpress hosting', pos: 4, prev: 7, best: 3, vol: 8100, diff: 72, url: '/hosting/managed', checked: '2h ago',
    serp: ['snippet', 'ai'], trend: [12, 11, 9, 8, 7, 5, 4], ai: 'cited', aiPos: 2 },
  { kw: 'wordpress site migration', pos: 2, prev: 2, best: 1, vol: 3600, diff: 55, url: '/migrations', checked: '2h ago',
    serp: ['snippet'], trend: [4, 3, 3, 2, 2, 2, 2], ai: 'cited', aiPos: 1 },
  { kw: 'core web vitals fix', pos: 9, prev: 14, best: 9, vol: 2400, diff: 48, url: '/performance', checked: '2h ago',
    serp: ['ai', 'local'], trend: [22, 19, 16, 14, 12, 11, 9], ai: 'absent', aiPos: null },
  { kw: 'bulk image optimization', pos: 6, prev: 5, best: 4, vol: 1900, diff: 41, url: '/imagetools', checked: '2h ago',
    serp: ['snippet', 'ai'], trend: [3, 4, 4, 5, 5, 6, 6], ai: 'cited', aiPos: 3 },
  { kw: 'accessibility scanner plugin', pos: 11, prev: 8, best: 7, vol: 1300, diff: 38, url: '/scanner', checked: '2h ago',
    serp: [], trend: [6, 7, 7, 8, 9, 10, 11], ai: 'absent', aiPos: null },
  { kw: 'agency seo reporting tool', pos: 16, prev: 23, best: 16, vol: 880, diff: 63, url: '/reports', checked: '2h ago',
    serp: ['local'], trend: [31, 28, 26, 24, 21, 19, 16], ai: 'mentioned', aiPos: 5 },
];

const SEO_COMPETITORS = [
  { domain: 'hostpro.example', overlap: 68, delta: -3, color: 'var(--viz-2)' },
  { domain: 'siteforge.example', overlap: 54, delta: 5, color: 'var(--viz-3)' },
  { domain: 'rankly.example', overlap: 41, delta: 2, color: 'var(--viz-5)' },
];

const SEO_SUGGESTIONS = [
  { title: 'Add an FAQ block to /hosting/managed', why: 'Ranking #4 with a snippet — an FAQ could capture the People-Also-Ask box.', impact: 'high' },
  { title: 'Refresh /scanner meta description', why: 'Slipped 3 positions this week; CTR-optimized copy may recover it.', impact: 'med' },
  { title: 'Build internal links to /performance', why: 'Climbing fast (#14 → #9). More internal links could push it into the top 5.', impact: 'high' },
];

function avg(arr) { return Math.round(arr.reduce((a, b) => a + b, 0) / arr.length); }
const SEO_STATS = (() => {
  const positions = SEO_KEYWORDS.map(k => k.pos);
  return {
    tracked: SEO_KEYWORDS.length,
    avgPos: avg(positions),
    avgPosTrend: [9.2, 8.8, 8.5, 8.1, 7.9, 8.0, 8.0],
    top10: SEO_KEYWORDS.filter(k => k.pos <= 10).length,
    traffic: '4.2k',
    trafficTrend: [3.1, 3.4, 3.6, 3.5, 3.8, 4.0, 4.2],
  };
})();

/* SERP feature chips (snippet / ai / local) — neutral, icon+label */
const SERP_META = {
  snippet: { icon: 'file-text', label: 'Snippet' },
  ai:      { icon: 'sparkles', label: 'AI' },
  local:   { icon: 'globe', label: 'Local' },
};
function SerpFeatures({ features }) {
  if (!features || !features.length) return React.createElement('span', { style: { color: 'var(--dim)' } }, '—');
  return React.createElement('div', { style: { display: 'flex', gap: 5, flexWrap: 'wrap' } },
    features.map(f => {
      const m = SERP_META[f];
      return React.createElement('span', { key: f, title: m.label, style: { display: 'inline-flex', alignItems: 'center', gap: 4,
        padding: '2px 7px', borderRadius: 6, background: 'var(--surface-3)', border: '1px solid var(--border)',
        fontFamily: 'var(--font-mono)', fontSize: '.58rem', letterSpacing: '.05em', color: 'var(--text-2)', whiteSpace: 'nowrap' } },
        React.createElement(WIcon, { name: m.icon, size: 11 }), m.label);
    }));
}

/* position badge — traffic light: 1–10 green, 11–20 golden, 21+ red (AA text) */
function PositionBadge({ pos, size = '1rem' }) {
  let c = 'var(--v-poor)';
  if (pos <= 10) c = 'var(--v-good)';
  else if (pos <= 20) c = 'var(--v-mid)';
  return React.createElement('span', { style: { fontFamily: 'var(--font-brand)', fontWeight: 'var(--fw-bold)', fontSize: size,
    color: c, fontVariantNumeric: 'tabular-nums' } }, '#' + pos);
}

/* "Claude" AI chip — beam accent */
function ClaudeChip() {
  return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 9px', borderRadius: 999,
    background: 'var(--beam-dim)', color: 'var(--beam)', border: '1px solid color-mix(in oklch, var(--beam) 30%, transparent)',
    fontFamily: 'var(--font-mono)', fontWeight: 'var(--fw-tag)', fontSize: '.6rem', letterSpacing: '.06em' } },
    React.createElement(WIcon, { name: 'sparkles', size: 12 }), 'Claude');
}

window.WPSB = window.WPSB || {};
window.WPSB.SeoData = { SEO_KEYWORDS, SEO_COMPETITORS, SEO_SUGGESTIONS, SEO_STATS, SerpFeatures, PositionBadge, ClaudeChip };
console.log('[WPSB] SeoData v1.0.0 loaded (sample data — /seo/rank/* API pending)');
})();