// 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" className="mf-cases-hero-bg" style={{
      position: 'relative',
      padding: '100px 44px 80px',
      overflow: 'hidden',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      {/* Animated red glow that drifts and pulses behind the headline */}
      <div className="mf-cases-hero-glow" aria-hidden="true"/>

      {/* Slowly drifting horizontal lines — thin red gradient strips that
          travel across the hero, alternating direction every other line. */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }} aria-hidden="true">
        {Array.from({ length: 14 }).map((_, i) => {
          const top = 6 + (i * 6.7) % 92;        // spread vertically
          const len = 140 + (i * 41) % 240;      // 140px – 380px wide
          const dur = 8 + (i * 1.3) % 7;         // 8s – 15s travel
          const delay = (i * 0.83) % 6;          // staggered starts
          const reverse = i % 2 === 1;
          return (
            <span
              key={i}
              className={'mf-hero-line' + (reverse ? ' mf-hero-line-reverse' : '')}
              style={{
                top: `${top}%`,
                width: len,
                animationDuration: `${dur}s`,
                animationDelay: `${delay}s`,
              }}
            />
          );
        })}
      </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)',
          }}>
            Deals closed, retainers signed, businesses rebuilt.
          </p>
          <p style={{
            maxWidth: 640, margin: '20px auto 0', fontSize: 12, lineHeight: 1.5,
            color: 'rgba(255,255,255,0.45)', fontStyle: 'italic',
          }}>
            *Individual results may vary and are not guaranteed. These clients implemented the system and saw exceptional outcomes.
          </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;