(function() {
const { useState, useEffect, useRef } = React;
const { fmtNum } = window.DashData;

// ─── Platform Config ──────────────────────────────────────────────────────────
const PLATFORMS = {
  instagram:    { label: 'Instagram',      color: '#C13584', bg: '#fdf0f7', abbr: 'IG' },
  tiktok:       { label: 'TikTok',         color: '#010101', bg: '#f0f0f2', abbr: 'TT' },
  facebook:     { label: 'Facebook',       color: '#1877F2', bg: '#eff5fe', abbr: 'FB' },
  youtube:      { label: 'YouTube',        color: '#FF0000', bg: '#fff0f0', abbr: 'YT' },
  pinterest:    { label: 'Pinterest',      color: '#E60023', bg: '#fff0f1', abbr: 'PI' },
  googleAds:    { label: 'Google Ads',     color: '#4285F4', bg: '#eff5ff', abbr: 'GA' },
  microsoftAds: { label: 'Microsoft Ads',  color: '#00A4EF', bg: '#e8f6ff', abbr: 'MS' },
  googleNews:   { label: 'Google News',    color: '#4285F4', bg: '#eff5ff', abbr: 'GN' },
  email:        { label: 'Email',          color: '#0D7377', bg: '#edf8f8', abbr: 'EM' },
  blog:         { label: 'localemagazine.com', color: '#5C4033', bg: '#f7f2ef', abbr: 'LM' },
  displayAds:   { label: 'Display Ads',    color: '#7B5EA7', bg: '#f4f0fa', abbr: 'DA' },
};

const PLATFORM_METRICS = {
  instagram:    [['impressions','Impressions'],['reach','Reach'],['likes','Likes'],['saves','Saves']],
  tiktok:       [['views','Views'],['shares','Shares'],['follows','New Follows']],
  facebook:     [['impressions','Impressions'],['clicks','Clicks'],['reach','Reach']],
  youtube:      [['views','Views'],['watchTime','Watch Time (hrs)']],
  pinterest:    [['impressions','Impressions'],['saves','Saves'],['outboundClicks','Outbound Clicks']],
  googleAds:    [['clicks','Clicks'],['impressions','Impressions'],['ctr','CTR %'],['spend','Spend ($)']],
  microsoftAds: [['clicks','Clicks'],['impressions','Impressions'],['ctr','CTR %'],['spend','Spend ($)']],
  googleNews:   [['appearances','Appearances'],['clicks','Clicks']],
  email:        [['opens','Opens'],['clicks','Clicks'],['ctr','CTR %']],
  blog:         [['pageviews','Pageviews'],['avgTime','Avg. Time (min)']],
  displayAds:   [['impressions','Impressions'],['clicks','Clicks']],
};

// ─── Platform Icon ────────────────────────────────────────────────────────────
function PlatformIcon({ platform, size = 32 }) {
  const p = PLATFORMS[platform];
  if (!p) return null;
  return (
    <div style={{ width: size, height: size, borderRadius: size * 0.28, background: p.bg, border: `1.5px solid ${p.color}22`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <span style={{ fontSize: size * 0.38, fontWeight: 600, color: p.color, fontFamily: "'Afacad', sans-serif", letterSpacing: '-0.02em' }}>{p.abbr}</span>
    </div>
  );
}

// ─── Platform Card ────────────────────────────────────────────────────────────
function PlatformCard({ platform, data, theme }) {
  const p = PLATFORMS[platform];
  const fields = PLATFORM_METRICS[platform] || [];
  const isDark = theme === 'dark';
  return (
    <div style={{ background: isDark ? '#1e1e1e' : '#fff', border: `1px solid ${isDark ? '#2e2e2e' : '#ebebeb'}`, borderRadius: 12, padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <PlatformIcon platform={platform} size={36} />
        <span style={{ fontWeight: 600, fontSize: 13, color: isDark ? '#e0e0e0' : '#1a1a18', fontFamily: "'Afacad', sans-serif" }}>{p.label}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 12px' }}>
        {fields.map(([key, label]) => (
          <div key={key}>
            <div style={{ fontSize: 11, color: isDark ? '#888' : '#999', fontFamily: "'Afacad', sans-serif", marginBottom: 2, letterSpacing: '0.03em' }}>{label.toUpperCase()}</div>
            <div style={{ fontSize: 17, fontWeight: 600, color: isDark ? '#fff' : '#1a1a18', fontFamily: "'Afacad', sans-serif", letterSpacing: '-0.02em' }}>
              {key === 'ctr' || key === 'avgTime' ? (data[key] || 0).toFixed(1) + (key === 'ctr' ? '%' : '') : key === 'spend' ? '$' + fmtNum(data[key] || 0) : fmtNum(data[key] || 0)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Stat Card ────────────────────────────────────────────────────────────────
function StatCard({ label, value, sub, accent, theme }) {
  const isDark = theme === 'dark';
  return (
    <div style={{ background: isDark ? '#1e1e1e' : '#fff', border: `1px solid ${isDark ? '#2e2e2e' : '#ebebeb'}`, borderRadius: 12, padding: '20px 22px', borderTop: `3px solid ${accent}` }}>
      <div style={{ fontSize: 11, fontFamily: "'Afacad', sans-serif", letterSpacing: '0.08em', color: isDark ? '#888' : '#999', marginBottom: 8 }}>{label.toUpperCase()}</div>
      <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.03em', color: isDark ? '#fff' : '#1a1a18', fontFamily: "'Afacad', sans-serif" }}>{value}</div>
      {sub && <div style={{ fontSize: 12, color: isDark ? '#666' : '#aaa', fontFamily: "'Afacad', sans-serif", marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

// ─── Timeline Chart ───────────────────────────────────────────────────────────
function TimelineChart({ data, theme, loading }) {
  const isDark = theme === 'dark';
  const [active, setActive] = React.useState({ impressions: true, views: true, engagement: true, clicks: false });

  const SERIES = [
    { key: 'impressions', label: 'Impressions', color: '#C8975A' },
    { key: 'views',       label: 'Views',       color: '#FF6B6B' },
    { key: 'engagement',  label: 'Engagement',  color: '#A8C5A0' },
    { key: 'clicks',      label: 'Clicks',      color: '#6BAED6' },
    { key: 'saves',       label: 'Saves',       color: '#C9A0DC' },
    { key: 'shares',      label: 'Shares',      color: '#7EC8C8' },
  ];

  const W = 700, H = 180, PAD = { t: 16, r: 16, b: 36, l: 58 };
  const inner = { w: W - PAD.l - PAD.r, h: H - PAD.t - PAD.b };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '40px 0', color: isDark ? '#555' : '#ccc', fontFamily: "'Afacad', sans-serif", fontSize: 13 }}>
        <div style={{ marginBottom: 8 }}>Loading timeline…</div>
        <div style={{ fontSize: 11, opacity: 0.7 }}>Fetching live metrics from each platform</div>
      </div>
    );
  }

  if (!data || data.length === 0) {
    return (
      <div style={{ textAlign: 'center', padding: '40px 0', color: isDark ? '#555' : '#ccc', fontFamily: "'Afacad', sans-serif", fontSize: 13 }}>
        <div style={{ marginBottom: 8 }}>No timeline data available</div>
        <div style={{ fontSize: 11, opacity: 0.7 }}>Timeline builds from live platform data — check that content URLs are filled in Airtable</div>
      </div>
    );
  }

  // Only show series that have at least one non-zero value in the data
  const seriesWithData = SERIES.filter(s => data.some(d => (d[s.key] || 0) > 0));
  const activeSeries = seriesWithData.filter(s => active[s.key]);

  const allVals = activeSeries.flatMap(s => data.map(d => d[s.key] || 0));
  const maxVal = Math.max(...allVals, 1);

  const xPos = (i) => data.length > 1 ? PAD.l + (i / (data.length - 1)) * inner.w : PAD.l + inner.w / 2;
  const yPos = (v) => PAD.t + inner.h - (v / maxVal) * inner.h;

  // Show every Nth label so x-axis isn't crowded
  const labelStep = Math.max(1, Math.ceil(data.length / 10));
  const gridLines = [0, 0.25, 0.5, 0.75, 1].map(t => PAD.t + inner.h - t * inner.h);
  const stroke = isDark ? '#2a2a2a' : '#f0eeec';
  const textC = isDark ? '#555' : '#bbb';

  return (
    <div>
      {/* Series toggles — only show series that have data */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
        {seriesWithData.map(s => (
          <button key={s.key} onClick={() => setActive(a => ({ ...a, [s.key]: !a[s.key] }))}
            style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 12px', borderRadius: 20, border: `1.5px solid ${active[s.key] ? s.color : (isDark ? '#333' : '#e0e0e0')}`, background: active[s.key] ? s.color + '18' : 'transparent', cursor: 'pointer', fontFamily: "'Afacad', sans-serif", fontSize: 12, fontWeight: 500, color: active[s.key] ? s.color : (isDark ? '#555' : '#bbb'), transition: 'all 0.15s' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: active[s.key] ? s.color : (isDark ? '#444' : '#ddd'), display: 'inline-block', flexShrink: 0 }}></span>
            {s.label}
          </button>
        ))}
      </div>

      {activeSeries.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '24px 0', color: isDark ? '#555' : '#ccc', fontFamily: "'Afacad', sans-serif", fontSize: 12 }}>Toggle a metric above to display it</div>
      ) : (
        <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', overflow: 'visible' }}>
          {/* Grid lines */}
          {gridLines.map((y, i) => <line key={i} x1={PAD.l} y1={y} x2={W - PAD.r} y2={y} stroke={stroke} strokeWidth="1" />)}

          {/* Series lines */}
          {activeSeries.map(s => {
            const path = data.map((d, i) => `${i === 0 ? 'M' : 'L'}${xPos(i).toFixed(1)},${yPos(d[s.key] || 0).toFixed(1)}`).join(' ');
            return (
              <g key={s.key}>
                <path d={path} fill="none" stroke={s.color} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
                {data.length <= 30 && data.map((d, i) => (
                  <circle key={i} cx={xPos(i)} cy={yPos(d[s.key] || 0)} r="3" fill={s.color} opacity="0.85" />
                ))}
              </g>
            );
          })}

          {/* X-axis labels */}
          {data.map((d, i) => i % labelStep === 0 && (
            <text key={i} x={xPos(i)} y={H - 4} textAnchor="middle" fontSize="10" fill={textC} fontFamily="'Afacad', sans-serif">{d.date}</text>
          ))}

          {/* Y-axis labels */}
          {[0, 0.5, 1].map((t, i) => (
            <text key={i} x={PAD.l - 6} y={PAD.t + inner.h - t * inner.h + 4} textAnchor="end" fontSize="10" fill={textC} fontFamily="'Afacad', sans-serif">
              {fmtNum(Math.round(maxVal * t))}
            </text>
          ))}
        </svg>
      )}

      {/* Data summary line */}
      <div style={{ fontSize: 11, color: isDark ? '#555' : '#bbb', fontFamily: "'Afacad', sans-serif", marginTop: 8, textAlign: 'right' }}>
        {data.length} data point{data.length !== 1 ? 's' : ''} · cumulative totals
      </div>
    </div>
  );
}

// ─── Deliverables List ────────────────────────────────────────────────────────
function DeliverablesList({ deliverables, theme }) {
  const isDark = theme === 'dark';
  const done = deliverables.filter(d => d.delivered).length;
  const pct = deliverables.length ? Math.round((done / deliverables.length) * 100) : 0;

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
        <div style={{ flex: 1, height: 4, background: isDark ? '#2e2e2e' : '#ebebeb', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{ width: `${pct}%`, height: '100%', background: '#C8975A', borderRadius: 2, transition: 'width 0.6s ease' }} />
        </div>
        <span style={{ fontSize: 13, fontWeight: 600, color: isDark ? '#e0e0e0' : '#1a1a18', fontFamily: "'Afacad', sans-serif", whiteSpace: 'nowrap' }}>{done}/{deliverables.length} delivered</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {deliverables.map(d => (
          <div key={d.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: isDark ? '#1e1e1e' : '#fafaf8', borderRadius: 8, border: `1px solid ${isDark ? '#2a2a2a' : '#ebebeb'}` }}>
            <div style={{ width: 20, height: 20, borderRadius: '50%', background: d.delivered ? '#C8975A' : (isDark ? '#2e2e2e' : '#eee'), display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              {d.delivered && <svg width="10" height="8" viewBox="0 0 10 8"><path d="M1 4l2.5 2.5L9 1" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <span style={{ fontSize: 13, fontWeight: 500, color: isDark ? '#e0e0e0' : '#1a1a18', fontFamily: "'Afacad', sans-serif" }}>{d.type}</span>
              <span style={{ fontSize: 12, color: isDark ? '#666' : '#aaa', fontFamily: "'Afacad', sans-serif", marginLeft: 8 }}>{d.description}</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <PlatformIcon platform={Object.keys(PLATFORMS).find(k => PLATFORMS[k].label === d.platform || k === (d.platform||'').toLowerCase().replace(/\s/g,''))} size={24} />
              {d.date && <span style={{ fontSize: 11, color: isDark ? '#555' : '#bbb', fontFamily: "'Afacad', sans-serif" }}>{d.date}</span>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Added Value ──────────────────────────────────────────────────────────────
function AddedValueSection({ items, theme }) {
  const isDark = theme === 'dark';
  const total = items.reduce((s, i) => s + (i.estimatedValue || 0), 0);
  if (items.length === 0) return <div style={{ textAlign: 'center', padding: '32px 0', color: isDark ? '#555' : '#ccc', fontFamily: "'Afacad', sans-serif", fontSize: 13 }}>No added value items recorded yet</div>;
  return (
    <div>
      <div style={{ marginBottom: 16, padding: '12px 16px', background: isDark ? '#1a1a12' : '#fdf8f0', borderRadius: 8, border: `1px solid #C8975A33`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: 13, color: isDark ? '#c8a06a' : '#8B6534', fontFamily: "'Afacad', sans-serif" }}>Estimated Added Value</span>
        <span style={{ fontSize: 20, fontWeight: 700, color: '#C8975A', fontFamily: "'Afacad', sans-serif", letterSpacing: '-0.02em' }}>${total.toLocaleString()}</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map(item => (
          <div key={item.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '12px 14px', background: isDark ? '#1e1e1e' : '#fff', border: `1px solid ${isDark ? '#2a2a2a' : '#ebebeb'}`, borderRadius: 8 }}>
            <PlatformIcon platform={Object.keys(PLATFORMS).find(k => PLATFORMS[k].label === item.platform || k === (item.platform||'').toLowerCase())} size={28} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 500, color: isDark ? '#e0e0e0' : '#1a1a18', fontFamily: "'Afacad', sans-serif" }}>{item.type}</div>
              <div style={{ fontSize: 12, color: isDark ? '#666' : '#aaa', fontFamily: "'Afacad', sans-serif", marginTop: 2 }}>{item.description}</div>
              <div style={{ fontSize: 11, color: isDark ? '#555' : '#ccc', fontFamily: "'Afacad', sans-serif", marginTop: 4 }}>{item.date}</div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, color: '#C8975A', fontFamily: "'Afacad', sans-serif", whiteSpace: 'nowrap' }}>${(item.estimatedValue || 0).toLocaleString()}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Content Gallery ──────────────────────────────────────────────────────────
// Each card fetches its own thumbnail via /api/thumbnail (server-side OG/oEmbed proxy)
function GalleryCard({ item, theme }) {
  const isDark = theme === 'dark';
  const pKey = Object.keys(PLATFORMS).find(k => PLATFORMS[k].label === item.platform || k === (item.platform||'').toLowerCase());
  const p = PLATFORMS[pKey] || {};
  const [thumb, setThumb] = React.useState(null);  // null = loading, '' = failed
  const [thumbLoaded, setThumbLoaded] = React.useState(false);

  useEffect(() => {
    if (!item.url) { setThumb(''); return; }
    let cancelled = false;
    fetch(`/api/thumbnail?url=${encodeURIComponent(item.url)}`)
      .then(r => r.json())
      .then(d => { if (!cancelled) setThumb(d.thumbnail || ''); })
      .catch(() => { if (!cancelled) setThumb(''); });
    return () => { cancelled = true; };
  }, [item.url]);

  const hasThumbnail = thumb && thumbLoaded;

  return (
    <a
      href={item.url || '#'}
      target={item.url ? '_blank' : undefined}
      rel="noopener noreferrer"
      style={{ textDecoration: 'none', borderRadius: 10, overflow: 'hidden', border: `1px solid ${isDark ? '#2a2a2a' : '#ebebeb'}`, background: isDark ? '#1e1e1e' : '#fff', display: 'block', transition: 'box-shadow 0.15s', cursor: item.url ? 'pointer' : 'default' }}
      onMouseEnter={e => e.currentTarget.style.boxShadow = '0 4px 18px #00000014'}
      onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
    >
      {/* Thumbnail area — 16:9 aspect ratio */}
      <div style={{ position: 'relative', paddingTop: '56.25%', background: isDark ? '#252525' : p.bg || '#f5f5f3', overflow: 'hidden' }}>
        {/* Placeholder always rendered behind */}
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 6 }}>
          <PlatformIcon platform={pKey} size={36} />
          <span style={{ fontSize: 10, fontWeight: 600, color: p.color || '#999', fontFamily: "'Afacad', sans-serif", letterSpacing: '0.05em', opacity: 0.7 }}>{(item.platform||'').toUpperCase()}</span>
        </div>
        {/* Real thumbnail on top once loaded */}
        {thumb && (
          <img
            src={thumb}
            alt={item.caption || ''}
            onLoad={() => setThumbLoaded(true)}
            onError={() => { setThumb(''); setThumbLoaded(false); }}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: thumbLoaded ? 1 : 0, transition: 'opacity 0.3s ease' }}
          />
        )}
        {/* Loading shimmer while fetching */}
        {thumb === null && (
          <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(90deg, transparent 0%, ${isDark ? '#33333344' : '#ffffff44'} 50%, transparent 100%)`, animation: 'shimmer 1.4s infinite', backgroundSize: '200% 100%' }} />
        )}
        {/* Platform badge overlay */}
        <div style={{ position: 'absolute', top: 7, left: 7, background: (p.color || '#666') + 'dd', borderRadius: 6, padding: '2px 7px', backdropFilter: 'blur(4px)' }}>
          <span style={{ fontSize: 10, fontWeight: 700, color: '#fff', fontFamily: "'Afacad', sans-serif", letterSpacing: '0.05em' }}>{p.abbr || (item.platform||'').slice(0,2).toUpperCase()}</span>
        </div>
      </div>
      <div style={{ padding: '10px 12px' }}>
        <div style={{ fontSize: 11, color: isDark ? '#888' : '#555', fontFamily: "'Afacad', sans-serif", lineHeight: 1.4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', minHeight: 30 }}>{item.caption || '—'}</div>
        <div style={{ fontSize: 10, color: isDark ? '#555' : '#bbb', fontFamily: "'Afacad', sans-serif", marginTop: 6 }}>{item.liveDate || item.date || ''}</div>
      </div>
    </a>
  );
}

function ContentGallery({ items, theme }) {
  const isDark = theme === 'dark';
  if (items.length === 0) return <div style={{ textAlign: 'center', padding: '32px 0', color: isDark ? '#555' : '#ccc', fontFamily: "'Afacad', sans-serif", fontSize: 13 }}>No content published yet</div>;
  return (
    <>
      <style>{`@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }`}</style>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 14 }}>
        {items.map(item => <GalleryCard key={item.id} item={item} theme={theme} />)}
      </div>
    </>
  );
}

// ─── Section Block ────────────────────────────────────────────────────────────
function Section({ title, children, theme, action }) {
  const isDark = theme === 'dark';
  return (
    <div style={{ marginBottom: 32 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, paddingBottom: 12, borderBottom: `1px solid ${isDark ? '#2a2a2a' : '#ebebeb'}` }}>
        <h3 style={{ margin: 0, fontFamily: "'Cormorant Garamond', serif", fontSize: 20, fontWeight: 500, color: isDark ? '#e8e8e8' : '#1a1a18', letterSpacing: '-0.01em' }}>{title}</h3>
        {action}
      </div>
      {children}
    </div>
  );
}

// ─── Status Badge ─────────────────────────────────────────────────────────────
function StatusBadge({ status }) {
  const map = {
    Active:    { bg: '#d4edda', color: '#1a6b2e', dot: '#2ecc71', label: '● ACTIVE' },
    Upcoming:  { bg: '#fff3cd', color: '#856404', dot: '#f0ad00', label: '◆ UPCOMING' },
    Completed: { bg: '#f0f0f0', color: '#888',    dot: '#ccc',    label: '✓ COMPLETED' },
  };
  const s = map[status] || { bg: '#eee', color: '#666', dot: '#bbb', label: (status||'').toUpperCase() };
  return (
    <span style={{ padding: '3px 10px', borderRadius: 20, fontSize: 10, fontWeight: 700, background: s.bg, color: s.color, fontFamily: "'Afacad', sans-serif", letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>
      {s.label}
    </span>
  );
}

// ─── Comparison Bar ───────────────────────────────────────────────────────────
function CompareBar({ label, v1, v2, color1, color2 }) {
  const max = Math.max(v1, v2, 1);
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
        <span style={{ fontSize: 11, color: '#999', fontFamily: "'Afacad', sans-serif", letterSpacing: '0.04em' }}>{label.toUpperCase()}</span>
        <span style={{ fontSize: 11, color: '#999', fontFamily: "'Afacad', sans-serif" }}>{fmtNum(v1)} vs {fmtNum(v2)}</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ height: 8, background: '#f0eeec', borderRadius: 4, overflow: 'hidden' }}>
          <div style={{ width: `${(v1/max)*100}%`, height: '100%', background: color1, borderRadius: 4, transition: 'width 0.5s ease' }} />
        </div>
        <div style={{ height: 8, background: '#f0eeec', borderRadius: 4, overflow: 'hidden' }}>
          <div style={{ width: `${(v2/max)*100}%`, height: '100%', background: color2, borderRadius: 4, transition: 'width 0.5s ease' }} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PlatformCard, StatCard, TimelineChart, DeliverablesList, AddedValueSection, ContentGallery, Section, StatusBadge, CompareBar, PlatformIcon, PLATFORMS });
})();