/* global React, CcTopbar, CcKpi, CcLineChart, CcDonut, CcFeed, CcBars, CcPillars, CcTicker, CcSparkline, CcStat, CcWorldMap, CC_DATA, fmtNum, useCountUp */
// Variant C — Hero Spotlight: one large rotating hero panel + KPI rail + module grid.

const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

function VariantC({ rotateMs = 7000 }) {
  const d = CC_DATA;
  const initialFeed = React.useMemo(() => d.makeFeed(8, 4), []);

  // Hero rotates between 4 spotlights
  const spotlights = [
    {
      tint: 'all',
      label: 'Combined · Monthly recurring revenue',
      bigLabel: 'MRR',
      product: 'Portfolio · all products',
      value: 12847, prefix: '$', delta: '+18.4%', deltaDir: 'pos', deltaSub: 'vs last month',
      sparkSeries: d.series.rev_30d, sparkColor: 'var(--color-accent)',
      bgMark: 'MRR',
      stats: [
        { label: 'ARR projection', value: '$154,164', sub: '×12' },
        { label: 'Paid subs', value: '3,470', sub: '+248 this month' },
        { label: 'ARPU · paid', value: '$3.70', sub: '+$0.12' },
        { label: 'Churn · monthly', value: '2.1%', sub: '−0.4 pp' },
      ],
    },
    {
      tint: 'rl',
      label: 'Rod Locker · Today',
      bigLabel: 'INSTALLS',
      product: 'Rod Locker · Android / iOS',
      value: 312, prefix: '', delta: '+5.7%', deltaDir: 'pos', deltaSub: 'vs yesterday',
      sparkSeries: d.series.rl_installs_30d, sparkColor: 'var(--rl-accent)',
      bgMark: 'RL',
      stats: [
        { label: 'Lifetime installs', value: '8,420', sub: 'since launch' },
        { label: 'Play Store rating', value: '4.7★', sub: '312 reviews' },
        { label: 'Crash-free', value: '99.62%', sub: 'all sessions' },
        { label: 'Catches logged', value: '24,817', sub: 'lifetime' },
      ],
    },
    {
      tint: 'ba',
      label: 'BlynkAudit · Today',
      bigLabel: 'AUDITS',
      product: 'BlynkAudit · agentic readiness',
      value: 89, prefix: '', delta: '+22', deltaDir: 'pos', deltaSub: 'vs yesterday',
      sparkSeries: d.series.ba_audits_30d, sparkColor: 'var(--ba-accent)',
      bgMark: 'BA',
      stats: [
        { label: 'Lifetime audits', value: '2,341', sub: 'since launch' },
        { label: 'Avg pillar score', value: '62.4 /100', sub: '+1.8 vs last' },
        { label: 'Active agencies', value: '38', sub: 'paying tier' },
        { label: 'Credits used', value: '18.4k', sub: '37% of cap' },
      ],
    },
    {
      tint: 'all',
      label: 'Portfolio · Active users',
      bigLabel: 'MAU',
      product: 'Across all products · 30d',
      value: 18290, prefix: '', delta: '+13.2%', deltaDir: 'pos', deltaSub: 'vs last month',
      sparkSeries: d.series.mau_30d, sparkColor: 'var(--color-accent)',
      bgMark: 'MAU',
      stats: [
        { label: 'DAU', value: '3,421', sub: 'today' },
        { label: 'DAU / MAU', value: '18.7%', sub: 'stickiness' },
        { label: 'New users · 30d', value: '4,210', sub: '+8.4% mom' },
        { label: 'Returning · 30d', value: '14,080', sub: '77% of MAU' },
      ],
    },
  ];

  const [spotIdx, setSpotIdx] = useStateC(0);
  const [progress, setProgress] = useStateC(0);
  const startRef = useRefC(performance.now());

  useEffectC(() => {
    startRef.current = performance.now();
    let raf;
    const tick = (now) => {
      const elapsed = now - startRef.current;
      const p = Math.min(1, elapsed / rotateMs);
      setProgress(p);
      if (p >= 1) {
        setSpotIdx(i => (i + 1) % spotlights.length);
        startRef.current = now;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [rotateMs, spotIdx]);

  const spot = spotlights[spotIdx];

  // animated value for hero
  const animatedValue = useCountUp(spot.value, 1400, 0, [spotIdx]);

  return (
    <div className="cc-artboard">
      <CcTopbar section="Spotlight" extras={
        <span className="cc-label-sm">hero / focus</span>
      } />

      <div style={{
        flex: 1, minHeight: 0,
        display: 'grid',
        gridTemplateColumns: '1.7fr 1fr',
        gridTemplateRows: '1.3fr 1fr',
        gap: 14,
        padding: 18,
      }}>
        {/* HERO (top-left, spans 1 col, 1 row) */}
        <div key={spotIdx} className="cc-hero cc-view" data-tint={spot.tint}>
          <span className="cc-hero-bgmark">{spot.bgMark}</span>

          <div className="cc-row" style={{ justifyContent: 'space-between' }}>
            <div className="cc-col" style={{ gap: 6 }}>
              <span className="cc-label">{spot.label}</span>
              <span style={{ fontSize: 13, color: 'var(--color-muted)' }}>{spot.product}</span>
            </div>
            <div className="cc-row" style={{ gap: 8 }}>
              {spotlights.map((s, i) => (
                <span key={i} style={{
                  width: i === spotIdx ? 26 : 6,
                  height: 6,
                  borderRadius: 999,
                  background: i === spotIdx ? 'var(--color-accent)' : 'var(--color-line)',
                  transition: 'width 300ms ease, background 300ms ease',
                }}></span>
              ))}
            </div>
          </div>

          <div className="cc-row" style={{ gap: 28, alignItems: 'baseline', flexWrap: 'wrap' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '2px', color: 'var(--color-subtle)', textTransform: 'uppercase' }}>
              {spot.bigLabel}
            </div>
            <div className="cc-hero-mega">
              {spot.prefix && <span className="cc-kpi-prefix">{spot.prefix}</span>}
              {fmtNum(animatedValue)}
            </div>
            <div className="cc-col" style={{ gap: 2, alignSelf: 'center' }}>
              <span className={'cc-kpi-delta ' + spot.deltaDir} style={{ fontSize: 18 }}>
                {spot.deltaDir === 'pos' ? '▲' : spot.deltaDir === 'neg' ? '▼' : '·'} {spot.delta}
              </span>
              <span style={{ fontSize: 11, color: 'var(--color-subtle)', fontFamily: 'var(--font-mono)', letterSpacing: '0.4px' }}>
                {spot.deltaSub}
              </span>
            </div>
          </div>

          <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
            <CcLineChart
              series={[{ ...spot.sparkSeries, color: spot.sparkColor }]}
              w={760} h={180}
              showAxis={false}
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, borderTop: '1px solid var(--color-line-soft)', paddingTop: 16 }}>
            {spot.stats.map((s, i) => (
              <CcStat key={i} {...s} />
            ))}
          </div>

          <div style={{ position: 'absolute', bottom: 0, left: 0, height: 3, width: (progress * 100) + '%', background: 'var(--color-accent)', transition: 'width 100ms linear' }}></div>
        </div>

        {/* KPI rail (right column top) */}
        <div className="cc-col" style={{ gap: 12, minHeight: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span className="cc-label">Key metrics</span>
            <span className="cc-label-sm">live</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, flex: 1, minHeight: 0 }}>
            {d.heroKpis.map(k => (
              <div key={k.id} style={{
                background: 'var(--color-panel)',
                border: '1px solid var(--color-line)',
                borderRadius: 6,
                padding: '10px 12px',
                display: 'flex', flexDirection: 'column', gap: 4,
                position: 'relative', overflow: 'hidden',
                borderLeft: k.tint === 'rl' ? '2px solid var(--rl-accent)' :
                            k.tint === 'ba' ? '2px solid var(--ba-accent)' : '1px solid var(--color-line)',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '1.4px', textTransform: 'uppercase', color: 'var(--color-subtle)' }}>
                    {k.label}
                  </span>
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 600, letterSpacing: '-0.6px', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
                  {k.prefix && <span style={{ fontSize: 13, color: 'var(--color-muted)' }}>{k.prefix}</span>}
                  {fmtNum(k.value)}
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontFamily: 'var(--font-mono)', fontSize: 10 }}>
                  <span className={'cc-kpi-delta ' + k.deltaDir}>
                    {k.deltaDir === 'pos' ? '▲' : '▼'} {k.delta}
                  </span>
                  <span style={{ color: 'var(--color-faint)' }}>
                    <CcSparkline values={k.spark} w={50} h={14} color={
                      k.tint === 'rl' ? 'var(--rl-accent)' :
                      k.tint === 'ba' ? 'var(--ba-accent)' :
                      'var(--color-accent)'
                    } fill={false} />
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* World map (bottom-left, spans both rows of bottom area) */}
        <div className="cc-card-flush" style={{ minHeight: 0 }}>
          <div className="cc-card-head">
            <div className="cc-card-head-title">
              <span className="cc-card-title">Global · 30d</span>
              <span className="cc-chip accent">heatmap</span>
            </div>
            <span className="cc-card-sub">41 countries · 14.8k users</span>
          </div>
          <div className="cc-card-body" style={{ minHeight: 0, display: 'flex' }}>
            <CcWorldMap
              heatByCountry={d.countryHeat}
              centroids={d.countryCentroids}
              pings={['AU', 'US', 'GB']}
            />
          </div>
        </div>

        {/* Right column bottom — feed + donut split */}
        <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 12, minHeight: 0 }}>
          <div className="cc-card-flush" style={{ minHeight: 0 }}>
            <div className="cc-card-head" style={{ padding: '10px 14px 6px' }}>
              <div className="cc-card-head-title">
                <span className="cc-card-title" style={{ fontSize: 12 }}>Live</span>
                <span className="cc-live-dot">stream</span>
              </div>
              <span className="cc-card-sub">all products</span>
            </div>
            <div className="cc-card-body" style={{ padding: '0 12px 6px', overflow: 'hidden' }}>
              <CcFeed initial={initialFeed} maxRows={5} intervalMs={2400} />
            </div>
          </div>
          <div className="cc-card" style={{ minHeight: 0, padding: 14, gap: 6 }}>
            <span className="cc-label" style={{ fontSize: 9 }}>Subscription mix</span>
            <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center' }}>
              <CcDonut segments={d.subscriptionMix.segments} size={104} stroke={13} />
            </div>
          </div>
        </div>
      </div>

      <CcTicker items={d.tickerItems} />
    </div>
  );
}
window.VariantC = VariantC;