// SCREEN: Brand Profile
// Nav ID: brand
// Purpose: Configure and inspect the digital marketing brand profile — feeds GEO monitoring,
//          community keyword tracking, Vision B AI visibility context, and creative briefs.
//
// API (read-only):
//   GET /v1/context/summary     → { brand_name, brand_category, brand_value_props[], schema_version, error }
//   GET /v1/context/performance → { ai_visibility_score, ... }
//   GET /v1/context/intent-gaps → { gaps: [{ gap_type, query }] }
//
// Write path: "Contact support / update via config API" — no POST from this screen.

// ─── MOCK DATA ───────────────────────────────────────────────────────────────
const BRAND_MOCK = {
  brand_name:        'Northwind Labs',
  brand_category:    'Marketing Analytics SaaS',
  brand_value_props: [
    'Agentic journey intelligence',
    'Multi-touch attribution',
    'Real-time anomaly detection',
    'Privacy-first identity graph',
    'AI-powered budget decisions',
  ],
  ai_visibility_score: 72,

  audience: {
    primary:   'Growth-stage SaaS marketers, DTC CMOs',
    age:       '28–45',
    interests: ['marketing attribution', 'AI tools', 'ad spend optimization', 'customer journey'],
    regions: [
      { name: 'United States',  flag: '🇺🇸' },
      { name: 'Germany',        flag: '🇩🇪' },
      { name: 'United Kingdom', flag: '🇬🇧' },
      { name: 'Canada',         flag: '🇨🇦' },
      { name: 'Australia',      flag: '🇦🇺' },
    ],
  },

  community_keywords: [
    'astrareach',
    'journey analytics',
    'marketing attribution',
    'agentic marketing',
    'customer data platform',
  ],

  geo_queries: [
    'best marketing attribution tool',
    'customer journey analytics software',
    'AI marketing OS',
    'replace segment with',
  ],

  competitors: [
    { name: 'Segment',   category: 'CDP',                  overlap: 72, color: '#22D3EE' },
    { name: 'Amplitude', category: 'Product Analytics',    overlap: 68, color: '#8B5CF6' },
    { name: 'Mixpanel',  category: 'Behavioral Analytics', overlap: 55, color: '#F59E0B' },
  ],

  ai_citations_mo:      847,
  intent_coverage_pct:  64,
  gap_queries:          23,
};

// ─── SUB-COMPONENTS ──────────────────────────────────────────────────────────

// Circular gauge showing AI visibility score 0–100
const ScoreRing = ({ score }) => {
  const r = 38, cx = 50, cy = 50;
  const circ = 2 * Math.PI * r;
  const filled = (score / 100) * circ;
  const color = score >= 70 ? 'var(--emerald)' : score >= 40 ? 'var(--amber)' : 'var(--rose)';
  return (
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--bg-3)" strokeWidth="8" />
      <circle cx={cx} cy={cy} r={r} fill="none"
        stroke={color} strokeWidth="8"
        strokeDasharray={`${filled} ${circ - filled}`}
        strokeLinecap="round"
        transform={`rotate(-90 ${cx} ${cy})`}
      />
      <text x={cx} y={cy - 4}  textAnchor="middle" fill="var(--text-1)" fontSize="20" fontWeight="700"
        fontFamily="JetBrains Mono, monospace">{score}</text>
      <text x={cx} y={cy + 15} textAnchor="middle" fill="var(--text-3)" fontSize="9"
        fontFamily="JetBrains Mono, monospace">/100</text>
    </svg>
  );
};

// Horizontal bar chart comparing AI citation rates vs competitors
const CitationBarChart = ({ competitors }) => {
  const brands = [
    { name: 'AstraReach', pct: 38, color: 'var(--accent)' },
    ...competitors.map(c => ({
      name: c.name,
      pct: Math.round(c.overlap * 0.4),
      color: c.color,
    })),
  ];
  const maxPct = Math.max(...brands.map(b => b.pct));
  const rowH = 26;
  const svgH = brands.length * rowH + 8;
  return (
    <svg width="100%" height={svgH} viewBox={`0 0 280 ${svgH}`} preserveAspectRatio="none">
      {brands.map((b, i) => {
        const y = 4 + i * rowH;
        const barW = (b.pct / maxPct) * 160;
        return (
          <g key={b.name}>
            <text x="0" y={y + 13} fontSize="10" fill="var(--text-2)"
              fontFamily="JetBrains Mono, monospace">{b.name}</text>
            <rect x="86" y={y + 3} width={barW} height={12} rx="3"
              fill={b.color} fillOpacity="0.8" />
            <text x={92 + barW} y={y + 13} fontSize="9" fill="var(--text-3)"
              fontFamily="JetBrains Mono, monospace">{b.pct}%</text>
          </g>
        );
      })}
    </svg>
  );
};

// ─── MAIN SCREEN ─────────────────────────────────────────────────────────────
const BrandScreen = () => {
  const [brand,      setBrand]      = React.useState(BRAND_MOCK);
  const [aiScore,    setAiScore]    = React.useState(BRAND_MOCK.ai_visibility_score);
  const [geoQueries, setGeoQueries] = React.useState(BRAND_MOCK.geo_queries);
  const [keywords,   setKeywords]   = React.useState(BRAND_MOCK.community_keywords);
  const [kwInput,    setKwInput]    = React.useState('');
  const [toast,      setToast]      = React.useState('');
  const kwSaveRef = React.useRef(null);

  // Show a brief toast message
  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(''), 3000);
  };

  const addKeyword = () => {
    const val = kwInput.trim();
    if (!val || keywords.includes(val)) return;
    setKwInput('');
    const updated = [...keywords, val];
    setKeywords(updated);
    clearTimeout(kwSaveRef.current); kwSaveRef.current = setTimeout(() => arFetch('/v1/brand/keywords', { method: 'PUT', body: JSON.stringify({ keywords: updated }) }).catch(() => {}), 400);
    showToast('Saved — syncing to brand config');
  };

  // ── API wiring ────────────────────────────────────────────────────────────
  React.useEffect(() => {
    // Brand identity from context/summary
    arFetch('/v1/context/summary')
      .then(data => {
        if (!data || data.error) return;
        setBrand(prev => ({
          ...prev,
          brand_name:        data.brand_name        || prev.brand_name,
          brand_category:    data.brand_category    || prev.brand_category,
          brand_value_props: Array.isArray(data.brand_value_props) && data.brand_value_props.length
            ? data.brand_value_props
            : prev.brand_value_props,
        }));
      })
      .catch(() => {}); // silently keep MOCK on error

    // AI visibility score
    arFetch('/v1/context/performance')
      .then(data => {
        if (data && typeof data.ai_visibility_score === 'number') {
          setAiScore(data.ai_visibility_score);
        }
      })
      .catch(() => {});

    // GEO monitored queries — missing citation gaps
    arFetch('/v1/context/intent-gaps')
      .then(data => {
        if (data && Array.isArray(data.gaps)) {
          const missing = data.gaps
            .filter(g => g.gap_type === 'missing_citation' && g.query)
            .map(g => g.query);
          if (missing.length) setGeoQueries(missing);
        }
      })
      .catch(() => {});
  }, []);

  const isConfigured = Boolean(brand.brand_name);

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>

      {/* ── 1. BRAND IDENTITY CARD ──────────────────────────────────────────── */}
      <div className="card" style={{padding: 0, overflow: 'hidden'}}>
        {/* Gradient header strip */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '14px 20px',
          background: 'linear-gradient(90deg, rgba(139,92,246,0.10), transparent)',
          borderBottom: '1px solid var(--border)',
        }}>
          {/* Brand name + status */}
          <div style={{display: 'flex', alignItems: 'center', gap: 12}}>
            <div style={{
              width: 40, height: 40, borderRadius: 12,
              background: 'linear-gradient(135deg, var(--accent), #3b1f7a)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontWeight: 800, fontSize: 18, flexShrink: 0,
            }}>
              {brand.brand_name ? brand.brand_name[0].toUpperCase() : 'B'}
            </div>
            <div>
              <div style={{fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text-1)'}}>
                {brand.brand_name || 'Unconfigured'}
              </div>
              <div style={{display: 'flex', alignItems: 'center', gap: 6, marginTop: 3}}>
                <span className="badge violet" style={{fontSize: 10}}>{brand.brand_category}</span>
                {isConfigured
                  ? (
                    <span className="badge green" style={{fontSize: 10}}>
                      <span className="dot" style={{width: 5, height: 5, marginRight: 3}} />
                      Broadcasting to AI assistants
                    </span>
                  ) : (
                    <span className="badge amber" style={{fontSize: 10}}>Not configured</span>
                  )
                }
              </div>
            </div>
          </div>

          {/* AI Visibility Score ring */}
          <div style={{display: 'flex', alignItems: 'center', gap: 12}}>
            <div style={{textAlign: 'right'}}>
              <div style={{
                fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase',
                letterSpacing: '0.08em', fontFamily: 'var(--mono)', marginBottom: 2,
              }}>AI Visibility Score</div>
              <div style={{fontSize: 10, color: 'var(--text-4)', fontFamily: 'var(--mono)'}}>
                GEO / LLM citation rate
              </div>
            </div>
            <ScoreRing score={aiScore} />
          </div>
        </div>

        {/* Value props */}
        <div style={{padding: '14px 20px'}}>
          <div style={{
            fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase',
            letterSpacing: '0.08em', fontFamily: 'var(--mono)', marginBottom: 10,
          }}>Value Propositions</div>
          <div style={{display: 'flex', flexWrap: 'wrap', gap: 8}}>
            {brand.brand_value_props.map((prop, i) => (
              <span key={i} style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '5px 14px',
                background: 'rgba(139,92,246,0.08)',
                border: '1px solid rgba(139,92,246,0.25)',
                borderRadius: 20, fontSize: 12, color: '#c4b5fd',
              }}>
                <span style={{
                  width: 5, height: 5, borderRadius: '50%',
                  background: 'var(--accent)', flexShrink: 0,
                }} />
                {prop}
              </span>
            ))}
          </div>

          {/* Read-only note */}
          <div style={{
            marginTop: 12, padding: '8px 12px',
            background: 'var(--bg-3)', borderRadius: 8,
            fontSize: 11, color: 'var(--text-4)',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <Icon name="info" size={11} />
            Read-only — contact support or update via the brand config API to make changes.
          </div>
        </div>
      </div>

      {/* ── 2. TARGET AUDIENCE PANEL ───────────────────────────────────────── */}
      <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14}}>

        {/* Left: Demographics */}
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Target Audience</div>
              <div className="card-sub">Demographics &amp; interests</div>
            </div>
            <span className="badge plain" style={{fontSize: 10, color: 'var(--text-4)'}}>MOCK</span>
          </div>

          <div style={{display: 'flex', flexDirection: 'column', gap: 14, marginTop: 6}}>
            <div>
              <div style={{
                fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase',
                letterSpacing: '0.07em', fontFamily: 'var(--mono)', marginBottom: 5,
              }}>Primary Audience</div>
              <div style={{fontSize: 13, color: 'var(--text-1)', fontWeight: 500}}>
                {BRAND_MOCK.audience.primary}
              </div>
            </div>

            <div>
              <div style={{
                fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase',
                letterSpacing: '0.07em', fontFamily: 'var(--mono)', marginBottom: 5,
              }}>Age Range</div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '4px 12px', background: 'var(--bg-3)',
                border: '1px solid var(--border)', borderRadius: 12,
                fontSize: 13, color: 'var(--text-1)', fontWeight: 600,
                fontFamily: 'var(--mono)',
              }}>
                {BRAND_MOCK.audience.age}
              </div>
            </div>

            <div>
              <div style={{
                fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase',
                letterSpacing: '0.07em', fontFamily: 'var(--mono)', marginBottom: 7,
              }}>Interests</div>
              <div style={{display: 'flex', flexWrap: 'wrap', gap: 6}}>
                {BRAND_MOCK.audience.interests.map((interest, i) => (
                  <span key={i} style={{
                    padding: '3px 10px',
                    background: 'rgba(34,211,238,0.08)',
                    border: '1px solid rgba(34,211,238,0.20)',
                    borderRadius: 12, fontSize: 11, color: '#67e8f9',
                    fontFamily: 'var(--mono)',
                  }}>
                    {interest}
                  </span>
                ))}
              </div>
            </div>

            <div style={{fontSize: 10, color: 'var(--text-4)', fontFamily: 'var(--mono)', marginTop: 2}}>
              Configure via brand config API to update
            </div>
          </div>
        </div>

        {/* Right: Regions */}
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Target Regions</div>
              <div className="card-sub">Geographic focus markets</div>
            </div>
          </div>

          <div style={{display: 'flex', flexDirection: 'column', gap: 7, marginTop: 6}}>
            {BRAND_MOCK.audience.regions.map((region, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '8px 12px',
                background: 'var(--bg-3)',
                border: '1px solid var(--border)',
                borderRadius: 8,
              }}>
                <span style={{fontSize: 20, lineHeight: 1}}>{region.flag}</span>
                <span style={{fontSize: 13, color: 'var(--text-1)', fontWeight: 500, flex: 1}}>
                  {region.name}
                </span>
                {/* Relative activity bar */}
                <div style={{width: 64, height: 4, background: 'var(--bg-1)', borderRadius: 2, overflow: 'hidden'}}>
                  <div style={{
                    width: (92 - i * 14) + '%', height: '100%',
                    background: 'var(--accent)', borderRadius: 2,
                  }} />
                </div>
              </div>
            ))}
            <div style={{marginTop: 4, fontSize: 10, color: 'var(--text-4)', fontFamily: 'var(--mono)'}}>
              Configure via brand config API to update
            </div>
          </div>
        </div>
      </div>

      {/* ── 3. KEYWORDS & INTENT PANEL ─────────────────────────────────────── */}
      <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14}}>

        {/* Left: Tracked Keywords */}
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Tracked Keywords</div>
              <div className="card-sub">Community &amp; brand monitoring</div>
            </div>
            <span className="badge cyan" style={{fontSize: 10}}>{keywords.length} active</span>
          </div>

          {/* Keyword pills */}
          <div style={{display: 'flex', flexWrap: 'wrap', gap: 7, marginTop: 10}}>
            {keywords.map((kw, i) => (
              <span key={i} style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                padding: '4px 10px 4px 12px',
                background: 'var(--bg-3)',
                border: '1px solid var(--border)',
                borderRadius: 14, fontSize: 12, color: 'var(--text-2)',
                fontFamily: 'var(--mono)',
              }}>
                {kw}
                <button
                  type="button"
                  aria-label={`Remove keyword ${kw}`}
                  style={{background:'none',border:'none',cursor:'pointer',color:'rgba(196,181,253,0.6)',
                    fontSize:13,lineHeight:1,padding:'0 0 0 2px'}}
                  onClick={() => { const updated = keywords.filter((_, j) => j !== i); setKeywords(updated); clearTimeout(kwSaveRef.current); kwSaveRef.current = setTimeout(() => arFetch('/v1/brand/keywords', { method: 'PUT', body: JSON.stringify({ keywords: updated }) }).catch(() => {}), 400); showToast('Saved — syncing to brand config'); }}
                  onMouseOver={e => e.currentTarget.style.color='var(--accent)'}
                  onMouseOut={e => e.currentTarget.style.color='rgba(196,181,253,0.6)'}
                >×</button>
              </span>
            ))}
          </div>

          {/* Add keyword input (visual only — wired to toast) */}
          <div style={{display: 'flex', gap: 8, marginTop: 12}}>
            <div style={{
              flex: 1, display: 'flex', alignItems: 'center', gap: 8,
              padding: '7px 12px', background: 'var(--bg-1)',
              border: '1px solid var(--border)', borderRadius: 8,
            }}>
              <Icon name="plus" size={11} style={{color: 'var(--text-4)'}} />
              <input
                placeholder="Add keyword…"
                value={kwInput}
                onChange={e => setKwInput(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter') addKeyword(); }}
                style={{
                  flex: 1, background: 'transparent', border: 'none',
                  color: 'var(--text-1)', fontSize: 12, outline: 'none',
                  fontFamily: 'var(--mono)',
                }}
              />
            </div>
            <button
              className="btn"
              style={{fontSize: 12, padding: '6px 12px'}}
              onClick={() => addKeyword()}
            >
              Add
            </button>
          </div>

          {/* Toast */}
          {toast && (
            <div style={{
              marginTop: 8, padding: '7px 12px',
              background: 'rgba(245,158,11,0.10)', border: '1px solid rgba(245,158,11,0.30)',
              borderRadius: 8, fontSize: 11, color: 'var(--amber)',
            }}>
              {toast}
            </div>
          )}
        </div>

        {/* Right: GEO Monitored Queries */}
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">GEO Monitored Queries</div>
              <div className="card-sub">AI search intent gaps</div>
            </div>
            <span className="badge rose" style={{fontSize: 10}}>{geoQueries.length} gaps</span>
          </div>

          <div style={{display: 'flex', flexDirection: 'column', gap: 7, marginTop: 10}}>
            {geoQueries.map((query, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '8px 12px', background: 'var(--bg-3)',
                border: '1px solid var(--border)', borderRadius: 8,
              }}>
                <div style={{
                  width: 20, height: 20, borderRadius: 5,
                  background: 'rgba(244,63,94,0.12)',
                  border: '1px solid rgba(244,63,94,0.25)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 9, color: 'var(--rose)',
                  fontFamily: 'var(--mono)', fontWeight: 700, flexShrink: 0,
                }}>{i + 1}</div>
                <span style={{fontSize: 12, color: 'var(--text-1)', flex: 1, lineHeight: 1.4}}>
                  {query}
                </span>
                <span className="badge rose" style={{fontSize: 9, padding: '2px 6px', flexShrink: 0}}>gap</span>
              </div>
            ))}
          </div>

          <div style={{marginTop: 10, fontSize: 10, color: 'var(--text-4)', fontFamily: 'var(--mono)'}}>
            Source: /v1/context/intent-gaps · gap_type: missing_citation
          </div>
        </div>
      </div>

      {/* ── 4. COMPETITOR INTELLIGENCE PANEL ──────────────────────────────── */}
      <div className="card">
        <div className="card-header">
          <div>
            <div className="card-title">Competitor Intelligence</div>
            <div className="card-sub">Audience overlap &amp; AI citation benchmarks</div>
          </div>
          <span className="badge plain" style={{fontSize: 10, color: 'var(--text-4)'}}>MOCK data</span>
        </div>

        <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1.4fr', gap: 14, marginTop: 10}}>
          {/* Three competitor cards */}
          {BRAND_MOCK.competitors.map((comp, i) => (
            <div key={i} style={{
              padding: '14px 16px',
              background: 'var(--bg-3)',
              border: `1px solid ${comp.color}28`,
              borderRadius: 10,
            }}>
              {/* Header */}
              <div style={{display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12}}>
                <div style={{
                  width: 30, height: 30, borderRadius: 8,
                  background: comp.color + '18',
                  border: `1px solid ${comp.color}35`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: comp.color, fontWeight: 700, fontSize: 13, flexShrink: 0,
                }}>{comp.name[0]}</div>
                <div>
                  <div style={{fontSize: 13, fontWeight: 600, color: 'var(--text-1)'}}>{comp.name}</div>
                  <div style={{fontSize: 10, color: 'var(--text-4)', fontFamily: 'var(--mono)'}}>{comp.category}</div>
                </div>
              </div>

              {/* Overlap bar */}
              <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: 5}}>
                Audience Overlap
              </div>
              <div style={{display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12}}>
                <div style={{flex: 1, height: 5, background: 'var(--bg-1)', borderRadius: 3, overflow: 'hidden'}}>
                  <div style={{width: comp.overlap + '%', height: '100%', background: comp.color, borderRadius: 3}} />
                </div>
                <span style={{
                  fontSize: 13, color: comp.color, fontWeight: 700,
                  fontFamily: 'var(--mono)', minWidth: 34, textAlign: 'right',
                }}>{comp.overlap}%</span>
              </div>

              <button
                className="btn ghost"
                style={{fontSize: 10, padding: '3px 8px', color: 'var(--text-3)', width: '100%', justifyContent: 'center'}}
                onClick={() => { if (window.AR_NAVIGATE) window.AR_NAVIGATE('context'); }}
              >
                View gaps →
              </button>
            </div>
          ))}

          {/* AI citation rate bar chart card */}
          <div style={{
            padding: '14px 16px', background: 'var(--bg-3)',
            border: '1px solid var(--border)', borderRadius: 10,
          }}>
            <div style={{fontSize: 11, fontWeight: 600, color: 'var(--text-2)', marginBottom: 12}}>
              AI Search Citation Rate
            </div>
            <CitationBarChart competitors={BRAND_MOCK.competitors} />
            <div style={{marginTop: 10, fontSize: 9, color: 'var(--text-4)', fontFamily: 'var(--mono)'}}>
              Estimated % of AI responses citing each brand
            </div>
          </div>
        </div>
      </div>

      {/* ── 5. AI VISIBILITY STATUS STRIP ─────────────────────────────────── */}
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12}}>
        {[
          {
            label: 'AI Citations / mo',
            value: brand.ai_citations_mo.toLocaleString(),
            color: 'var(--emerald)',
            icon:  'sparkle',
            trend: '+14%',
            dir:   'up',
          },
          {
            label: 'Intent Coverage',
            value: brand.intent_coverage_pct + '%',
            color: 'var(--cyan)',
            icon:  'chart',
            trend: '+3pp',
            dir:   'up',
          },
          {
            label: 'Gap Queries',
            value: String(brand.gap_queries),
            color: 'var(--rose)',
            icon:  'alert',
            trend: '-2',
            dir:   'down',
          },
        ].map((m, i) => (
          <div key={i} style={{
            padding: '14px 18px',
            background: 'var(--bg-2)',
            border: '1px solid var(--border)',
            borderRadius: 10,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            {/* Icon block */}
            <div style={{
              width: 38, height: 38, borderRadius: 10, flexShrink: 0,
              background: m.color + '15',
              border: `1px solid ${m.color}30`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: m.color,
            }}>
              <Icon name={m.icon} size={16} />
            </div>

            {/* Label + value */}
            <div style={{flex: 1}}>
              <div style={{
                fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase',
                letterSpacing: '0.07em', fontFamily: 'var(--mono)', marginBottom: 3,
              }}>{m.label}</div>
              <div style={{
                fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em',
                color: 'var(--text-1)', lineHeight: 1,
              }}>{m.value}</div>
            </div>

            {/* Trend + navigation */}
            <div style={{textAlign: 'right'}}>
              <div style={{
                fontSize: 12, fontWeight: 600, fontFamily: 'var(--mono)',
                color: m.dir === 'up' ? 'var(--emerald)' : 'var(--rose)',
              }}>
                {m.dir === 'up' ? '↑' : '↓'} {m.trend}
              </div>
              <button
                className="btn ghost"
                style={{fontSize: 10, padding: '2px 6px', marginTop: 4, color: 'var(--text-4)'}}
                onClick={() => { if (window.AR_NAVIGATE) window.AR_NAVIGATE('context'); }}
              >
                View →
              </button>
            </div>
          </div>
        ))}
      </div>

    </div>
  );
};

window.BrandScreen = BrandScreen;