// Hero, filter bar, and card grid for the Case Studies page
function CasesHero({ stats }) {
  // Animated counter for aggregate $ amount
  const [dealsDisplay, setDealsDisplay] = React.useState(0);
  React.useEffect(() => {
    if (!stats.deals) return;
    let raf; const start = performance.now(); const dur = 1400;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      setDealsDisplay(Math.round(stats.deals * e));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [stats.deals]);

  const formatMoney = (n) => {
    if (n >= 1e6) return '$' + (n / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
    if (n >= 1e3) return '$' + Math.round(n / 1000) + 'K';
    return '$' + n;
  };

  return (
    <section data-mf="cases-hero" style={{
      position: 'relative',
      background: `
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232,18,60,0.28) 0%, transparent 60%),
        linear-gradient(180deg, #0A0608 0%, #15070B 100%)
      `,
      padding: '100px 44px 80px',
      overflow: 'hidden',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      {/* Decorative star streaks */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.4 }}>
        {Array.from({ length: 24 }).map((_, i) => {
          const top = (i * 37 % 100);
          const left = (i * 53 % 100);
          const len = 20 + (i * 11 % 60);
          return (
            <div key={i} style={{
              position: 'absolute', top: `${top}%`, left: `${left}%`,
              width: len, height: 1, background: 'linear-gradient(90deg, transparent, rgba(232,18,60,0.8), transparent)',
              transform: 'rotate(-15deg)',
            }}/>
          );
        })}
      </div>

      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <Eyebrow tone="red">Case Studies</Eyebrow>
          <h1 data-mf="cases-hero-headline" style={{
            fontFamily: 'Poppins', fontWeight: 800,
            fontSize: 'clamp(44px, 6.2vw, 96px)',
            lineHeight: 0.98, letterSpacing: '-0.025em',
            margin: '20px auto 20px', color: '#fff', maxWidth: 960,
          }}>
            Real owners. <span style={{ color: '#E8123C' }}>Real results.</span>
          </h1>
          <p style={{
            maxWidth: 640, margin: '0 auto', fontSize: 18, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.72)',
          }}>
            Video & creative agency owners. Deals closed, retainers signed, businesses rebuilt.
          </p>
        </div>
      </div>
    </section>
  );
}
window.CasesHero = CasesHero;

function StatBlock({ label, value, sub, accent }) {
  return (
    <div data-mf="cases-stat" style={{
      background: accent ? '#E8123C' : 'rgba(255,255,255,0.03)',
      border: accent ? '1px solid rgba(255,255,255,0.15)' : '1px solid rgba(255,255,255,0.10)',
      borderRadius: 22, padding: '26px 30px',
      backdropFilter: 'blur(10px)',
    }}>
      <div style={{
        fontSize: 10, letterSpacing: '0.18em', fontWeight: 700,
        color: accent ? 'rgba(255,255,255,0.9)' : '#E8123C',
        marginBottom: 10, textTransform: 'uppercase',
      }}>{label}</div>
      <div style={{
        fontFamily: 'Poppins', fontWeight: 800, fontSize: 52,
        lineHeight: 1, letterSpacing: '-0.03em', color: '#fff',
      }}>{value}</div>
      {sub && (
        <div style={{
          fontSize: 13, color: accent ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.6)',
          marginTop: 8, fontWeight: 500,
        }}>{sub}</div>
      )}
    </div>
  );
}
window.StatBlock = StatBlock;

function CasesFilterBar({ filter, setFilter, search, setSearch, counts, resultCount }) {
  const filters = [
    { id: 'all', label: 'All',            count: counts.all },
    { id: 'big', label: '$100K+ Deals',   count: counts.big },
    { id: 'fast', label: 'Fast Wins',     count: counts.fast },
    { id: 'retainers', label: 'Retainers',count: counts.retainers },
    { id: 'mrr', label: 'Recurring',      count: counts.mrr },
  ];
  return (
    <section data-mf="cases-filterbar" style={{
      position: 'sticky', top: 64, zIndex: 10,
      background: 'rgba(10,6,8,0.88)',
      backdropFilter: 'blur(16px)',
      WebkitBackdropFilter: 'blur(16px)',
      borderTop: '1px solid rgba(255,255,255,0.04)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      padding: '20px 44px',
    }}>
      <div data-mf="cases-filter-inner" style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap',
      }}>
        <div data-mf="cases-filter-chips" style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {filters.map(f => {
            const active = filter === f.id;
            return (
              <button key={f.id} onClick={() => setFilter(f.id)} style={{
                background: active ? '#E8123C' : 'rgba(255,255,255,0.04)',
                color: active ? '#fff' : 'rgba(255,255,255,0.75)',
                border: active ? '1px solid transparent' : '1px solid rgba(255,255,255,0.1)',
                padding: '9px 16px', borderRadius: 999,
                fontFamily: 'Poppins', fontWeight: 600, fontSize: 13,
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8,
                transition: 'all 180ms ease',
              }}>
                {f.label}
                <span style={{
                  fontSize: 11, fontWeight: 700,
                  color: active ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.45)',
                }}>{f.count}</span>
              </button>
            );
          })}
        </div>
        <div data-mf="cases-search-wrap" style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ position: 'relative' }}>
            <input
              type="text"
              placeholder="Search cases..."
              value={search}
              onChange={e => setSearch(e.target.value)}
              style={{
                background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)',
                color: '#fff', borderRadius: 999,
                padding: '10px 16px 10px 40px',
                fontFamily: 'Poppins', fontSize: 13, fontWeight: 500,
                width: 240, outline: 'none',
              }}
            />
            <span style={{
              position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)',
              color: 'rgba(255,255,255,0.45)', fontSize: 14, pointerEvents: 'none',
            }}>⌕</span>
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontWeight: 500, letterSpacing: '0.02em', whiteSpace: 'nowrap' }}>
            {resultCount} {resultCount === 1 ? 'case' : 'cases'}
          </div>
        </div>
      </div>
    </section>
  );
}
window.CasesFilterBar = CasesFilterBar;