// Wall of client wins — Slack screenshots from the community channel
// Pulled from https://www.masterfilmmaker.com/case-studies (#wins / community section)
function SlackWins() {
  const [lightbox, setLightbox] = React.useState(null);
  const [shown, setShown] = React.useState(36);
  const [filter, setFilter] = React.useState('all');   // all | big | retainer | first | closed | screenshots
  const [search, setSearch] = React.useState('');

  // Order matches the source page top-to-bottom
  const images = [
    '6819f2a7e542388e6f0bac8c.jpeg',
    '65a09484929af47dad4fadad.jpeg',
    '6620522a1ddb1031f19c6255.jpeg',
    '67add43abfdd9a5a635b2868.png',
    '661169015776333f2bb3efc3.jpeg',
    '64b5d71afc60ad6f1160e6e6.jpeg',
    '67fabc723baf5dc28d84a98b.png',
    '6620522a31c0f6207037a287.jpeg',
    '67fabc53c7a0151d24d523e9.png',
    '659de2406980296ebb15c741.jpeg',
    '65cba983c8ab65b27da96c77.jpeg',
    '65e2429bdcc9fbe83540d4a5.jpeg',
    '66c90bce7f3f2144c98add2d.jpeg',
    '65a18f52520fd14fc0872c05.jpeg',
    '67add40ea0bb9a10fb36f4a5.jpeg',
    '656938203d381e87960d072a.jpeg',
    '659de22edef572c6549cbd21.jpeg',
    '65d74b3b171bbcffb19f1e8d.jpeg',
    '6620522a6ffc4ee307a1e2d6.jpeg',
    '65e2429f02d1071ac53e26e4.jpeg',
    '655a671036f21f72b45a0c48.jpeg',
    '65d74b58b950dff1625915a2.jpeg',
    '65a7d31828a68b4f6dbc1e8f.jpeg',
    '6611691f395de314785d541d.jpeg',
    '64f91a5e1db23c0c9f457388.jpeg',
    '65a7d33b2aaf1bf04a0fed6a.jpeg',
    '64d27c0b569bdbf0c084035a.jpeg',
    '6501b5cc892e5dc7a3745ab2.jpeg',
    '656135071ffea793dab0e103.jpeg',
    '65a7d32c28a68b6f50bc1e99.jpeg',
    '6611693e5776334c95b3efc6.jpeg',
    '6501b5df74c7ef1c15fe961e.jpeg',
    '649acb46c68129d803857f37.jpeg',
    '648db0d4a1f733b25951dc57.jpeg',
    '6581a24f5567c03acfef70a8.jpeg',
    '64ede693b72e3a7f93b25624.jpeg',
    '648db0afdbd89adfb7490501.jpeg',
    '63f4ca101e60ae8124a1a0fe.jpeg',
    '6501b60bf30a72a3c2e5076b.jpeg',
    '659886ca39de540b4f269a56.jpeg',
    '659886bd39de542235269a51.jpeg',
    '6581a269a0a47e1cdd2adc03.jpeg',
    '648db0a7a1f73301ec51dc51.jpeg',
    '6501b5ec74c7ef815afe9621.jpeg',
    '65a7d3512aaf1b18700fed72.jpeg',
    '6581a26ea0a47e16b02adc04.jpeg',
    '648db11a7696419a2e80c83c.jpeg',
    '65a7d3692aaf1b7b0b0fed77.jpeg',
    '648db0c97696417a0e80c7f5.jpeg',
    '65d74b69b950dfbbee5915a5.jpeg',
    '05e0d598-4393-4a83-b423-052ea9fcf9a2.png',
    '63f4ca2bd6358701995573a6.jpeg',
    '63b9e06e726b36092e4ec026.jpeg',
    '0463395e-8594-484d-ab10-78b8e301e159.jpg',
    'dc7b9d64-6bfd-4dae-88fd-fd7fd94c8da2.jpeg',
    '90eda8f7-e003-439d-8034-10a4ff5a2e93.jpg',
    '32533f34-b9c8-47c5-b754-c45bbc02dad1.jpg',
    'c26414b4-1858-447c-a41c-d556947b1909.jpg',
    '6595db3e539b6ddff5baa098.jpeg',
    '65b81a3eb7ea1843b6764a6c.jpeg',
    '04deaff1-765f-49cf-b42b-7f5dfb0349a4.jpg',
    '659886d939de547895269a5b.jpeg',
    '6501bdc3ac3c2a3a4d573e60.jpeg',
    '6595db4d9b1c98bea6f8377b.jpeg',
    '6581a2bf5567c01aacef70bc.jpeg',
    '6581a302a0a47e3dcf2adc27.jpeg',
    '65b81a2eb7ea18de92764a56.jpeg',
    'ffa0f4a6-537f-4669-9fc5-4001891eec47.jpeg',
    '6595db5ed7c4b3f0bcc5902e.jpeg',
    '6595db6d539b6d2d28baa0a0.jpeg',
    '6595db7e1e7d40b856c7b21c.jpeg',
    '8296bc7a-d0b4-4154-ac1e-87ac362f472b.jpg',
    'cefba8b1-1dfa-45da-9e1a-9549757111cf.jpg',
    '3067ac7f-65c9-484b-b39a-649f09aca091.jpg',
    'b9b956f1-dfb5-41bb-87e5-78e7b44564ef.jpg',
    'ec7495a0-6fef-4165-8eb0-a3823dfaecbc.jpg',
    '5efb824b-f6a6-48d2-b33d-ee3c8bd78e4f.jpg',
    '73353a8f-20ca-4154-b718-5cb62c901755.jpg',
    'd25f4c6d-6527-4d0d-bc42-0a3abf047aac.jpg',
    '277bde72-bfc0-45c6-b20e-d6154f11ccab.jpg',
    'f3fa5778-03c8-40d4-886a-bee80bc444e3.jpg',
    '6a099183-16fc-4eb3-a824-33c51a4ce0a7.jpg',
    '65a095636e72e6c99ecfd877.jpeg',
    '33f68ef5-cb88-4020-8dba-fd00dd2e0fd4.jpg',
    '3b3669e7-e562-4c25-8e8d-d38421b357bb.jpg',
    '6501bd41f30a724538e522f3.jpeg',
    '59e598ec-3c02-4564-9d1f-2a4027867500.jpg',
    '1ace8952-346d-45a4-8804-720bdcef7ff0.jpg',
    '3524e0d8-b116-4275-be28-c4f258bb3ba1.jpg',
    '6501bd7b74c7ef2451feaea5.jpeg',
    '5a2559e8-b7d0-4dcb-b012-0a802b2e3f68.jpg',
    '6eff37b7-44ac-4bae-9f24-088f9cb9e5fa.jpg',
    '7e1853b9-3976-4831-aee5-a2ebfbdbbcc7.jpg',
    'abd0f5d2-fe99-4f41-99b4-d41be24b295b.jpg',
    '777a0bf4-3adf-461b-95dd-787e4a86c015.jpg',
    '6afbbd71-2c52-4471-b8f2-3d0c7cba3e05.jpg',
    '17b124b7-80a4-42bb-af15-2d2e641a17ce.jpg',
    '261717cd-ea15-4f6e-94c6-e89d08437878.jpg',
    'b714d681-f33d-4d08-b6c8-5775a22dbaa3.jpg',
    '7ca1056c-108e-49b8-9518-4db845be3a16.jpg',
    '65962768539b6da303bc84d3.jpeg',
    '6596277f539b6d0639bc84db.jpeg',
    '6596278d539b6d17d8bc84dc.jpeg',
    '659c7a71b7db42c6214c52a7.jpeg',
    '659c7a746d36bc145d7b9a73.jpeg',
    // 2026-05-01 batch — 51 new Slack screenshots from Eric's drive
    'IMG_0002.png',
    'IMG_0103.png',
    'IMG_1177.png',
    'IMG_1340.png',
    'IMG_2434.png',
    'IMG_2475.png',
    'IMG_2539.png',
    'IMG_3073.png',
    'IMG_3153.png',
    'IMG_3154.png',
    'IMG_3329.png',
    'IMG_3495.png',
    'IMG_3727.png',
    'IMG_3728.png',
    'IMG_3729.png',
    'IMG_4407.png',
    'IMG_4408.png',
    'IMG_4409.png',
    'IMG_4432.png',
    'IMG_4740.png',
    'IMG_5127.png',
    'IMG_6108.png',
    'IMG_6110.png',
    'IMG_6546.png',
    'IMG_6547.png',
    'IMG_6604.png',
    'IMG_6605.png',
    'IMG_6606.png',
    'IMG_7250.png',
    'IMG_7434.png',
    'IMG_8007.png',
    'IMG_8008.png',
    'IMG_8062.png',
    'IMG_8204.png',
    'IMG_8822.png',
    'IMG_8881.png',
    'IMG_8882.png',
    'IMG_9071.png',
    'IMG_9168.png',
    'IMG_9170.png',
    'IMG_9293.png',
    'IMG_9429.png',
    'IMG_9430.png',
    'IMG_9494.png',
    'IMG_9496.png',
    'IMG_9675.png',
    'IMG_9761.png',
    'IMG_9762.png',
    'IMG_9766.png',
    'IMG_9825.png',
    'Screenshot_2025-12-26_at_3.09.29_PM.png',
  ];

  // ESC closes lightbox + body scroll lock
  React.useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); };
    window.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [lightbox]);

  // Pull tagged wins + a Card renderer from SlackChatWins. Each win has
  // _cats (categories: big/retainer/first/closed) for filter logic.
  const { wins: chatWins, Card: renderChatCard } = SlackChatWins();

  // Apply search + category filter. PNG screenshots have no text, so they're
  // visible in 'all' / 'screenshots' filters and when search is empty;
  // searching or picking a content-based category narrows to chat cards.
  const items = React.useMemo(() => {
    const q = search.trim().toLowerCase();
    const filteringByContent = q !== '' || (filter !== 'all' && filter !== 'screenshots');
    const showImages = !filteringByContent && filter !== 'screenshots' ? true
                     : filter === 'screenshots' ? true
                     : false;
    const showChats = filter !== 'screenshots';

    const filteredChats = !showChats ? [] : chatWins.filter(w => {
      if (filter !== 'all' && filter !== 'screenshots' && !w._cats.includes(filter)) return false;
      if (q && !(w.text.toLowerCase().includes(q) || w.name.toLowerCase().includes(q))) return false;
      return true;
    });

    if (!showImages) {
      // Filtered view: just the matching chat cards
      return filteredChats.map(w => ({ kind: 'chat', key: `chat-${w._idx}`, win: w }));
    }
    if (filter === 'screenshots') {
      return images.map(file => ({ kind: 'img', key: file, file }));
    }
    // 'all' + no search: latest chat card first, then interleave the rest
    // (chat card every 3rd image) so the newest #wins message is the
    // very first thing visitors see in the masonry.
    const out = [];
    let chatIdx = 0;
    if (filteredChats.length > 0) {
      out.push({ kind: 'chat', key: `chat-${filteredChats[0]._idx}`, win: filteredChats[0] });
      chatIdx = 1;
    }
    for (let i = 0; i < images.length; i++) {
      out.push({ kind: 'img', key: images[i], file: images[i] });
      if (i % 3 === 2 && chatIdx < filteredChats.length) {
        out.push({ kind: 'chat', key: `chat-${filteredChats[chatIdx]._idx}`, win: filteredChats[chatIdx] });
        chatIdx++;
      }
    }
    while (chatIdx < filteredChats.length) {
      out.push({ kind: 'chat', key: `chat-${filteredChats[chatIdx]._idx}`, win: filteredChats[chatIdx] });
      chatIdx++;
    }
    return out;
  }, [images, chatWins, filter, search]);

  // Reset visible count when filter/search changes so users see the start
  // of the new filtered list rather than scrolling through the prior offset.
  React.useEffect(() => { setShown(36); }, [filter, search]);

  const visible = items.slice(0, shown);
  const canLoadMore = shown < items.length;

  // Counts for the filter pills — total per category across all chat wins
  const counts = React.useMemo(() => ({
    all: images.length + chatWins.length,
    big: chatWins.filter(w => w._cats.includes('big')).length,
    retainer: chatWins.filter(w => w._cats.includes('retainer')).length,
    first: chatWins.filter(w => w._cats.includes('first')).length,
    closed: chatWins.filter(w => w._cats.includes('closed')).length,
    screenshots: images.length,
  }), [images, chatWins]);

  return (
    <section data-mf="slack-wins" style={{
      background: '#0A0608',
      padding: '80px 44px 64px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {/* Heading */}
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '6px 14px', borderRadius: 999,
            background: 'rgba(232,18,60,0.12)',
            border: '1px solid rgba(232,18,60,0.32)',
            fontFamily: 'Poppins', fontWeight: 700,
            fontSize: 11, letterSpacing: '0.16em', color: '#FF4D6D',
            textTransform: 'uppercase', marginBottom: 18,
          }}>
            <span className="mf-live-dot" style={{
              width: 7, height: 7, borderRadius: '50%',
              background: '#E8123C',
              boxShadow: '0 0 8px rgba(232,18,60,0.8)',
            }}/>
            #wins channel · Live
          </div>
          <h2 style={{
            fontFamily: 'Poppins', fontWeight: 800,
            fontSize: 'clamp(32px, 5vw, 52px)',
            lineHeight: 1.05, letterSpacing: '-0.025em',
            color: '#fff', margin: '0 0 16px',
          }}>Wins straight from the community</h2>
          <p style={{
            maxWidth: 680, margin: '0 auto',
            fontFamily: 'Poppins', fontSize: 16, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.62)',
          }}>
            Real Slack messages from clients sharing closed deals, signed retainers, and breakthroughs in real time.
          </p>
          <p style={{
            maxWidth: 680, margin: '18px auto 0',
            fontFamily: 'Poppins', 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>

        {/* Search + category filter bar */}
        <SlackWinsFilterBar
          filter={filter} setFilter={setFilter}
          search={search} setSearch={setSearch}
          counts={counts}
          resultCount={items.length}
        />

        {/* CSS-columns masonry — keeps each screenshot intact, no cropping.
            Column count is controlled by .slack-masonry CSS so media queries
            (1100/760/480 breakpoints) can take effect. */}
        <div style={{ columnGap: 14 }} className="slack-masonry">
          {visible.map((item, i) => {
            if (item.kind === 'chat') return <React.Fragment key={item.key}>{renderChatCard(item.win, item.key)}</React.Fragment>;
            const file = item.file;
            return (
              <div
                key={item.key}
                onClick={() => setLightbox(file)}
                style={{
                  breakInside: 'avoid',
                  marginBottom: 14,
                  borderRadius: 12,
                  overflow: 'hidden',
                  border: '1px solid rgba(255,255,255,0.08)',
                  background: '#120609',
                  cursor: 'zoom-in',
                  transition: 'transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease',
                  display: 'block',
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = 'translateY(-2px)';
                  e.currentTarget.style.borderColor = 'rgba(232,18,60,0.5)';
                  e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,0.5)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
                  e.currentTarget.style.boxShadow = 'none';
                }}
              >
                <img
                  src={`./assets/slack/${file}`}
                  alt={`Client win ${i + 1} from #wins Slack channel`}
                  loading="lazy"
                  decoding="async"
                  style={{
                    width: '100%', height: 'auto', display: 'block',
                  }}
                />
              </div>
            );
          })}
        </div>

        {items.length === 0 && (
          <div style={{
            textAlign: 'center', padding: '48px 20px',
            color: 'rgba(255,255,255,0.55)', fontFamily: 'Poppins', fontSize: 14,
          }}>
            No wins match "{search}"{filter !== 'all' ? ` in ${filter}` : ''}.
            <button onClick={() => { setSearch(''); setFilter('all'); }} style={{
              marginLeft: 8, background: 'transparent', border: 'none',
              color: '#FF4D6D', cursor: 'pointer', fontFamily: 'Poppins',
              fontSize: 14, fontWeight: 600, textDecoration: 'underline',
            }}>Clear filters</button>
          </div>
        )}

        {canLoadMore && (
          <div style={{ textAlign: 'center', marginTop: 36 }}>
            <button onClick={() => setShown(s => s + 36)} style={{
              background: 'transparent', border: '1px solid rgba(255,255,255,0.18)',
              color: '#fff', padding: '14px 32px', borderRadius: 999,
              fontFamily: 'Poppins', fontWeight: 600, fontSize: 14,
              cursor: 'pointer',
            }}>
              Load {Math.min(36, items.length - shown)} more wins
            </button>
          </div>
        )}
      </div>

      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)',
          backdropFilter: 'blur(12px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          zIndex: 250, padding: 32,
          overflowY: 'auto',
        }}>
          <button onClick={() => setLightbox(null)} style={{
            position: 'fixed', top: 22, right: 24,
            width: 44, height: 44, borderRadius: '50%',
            background: 'rgba(255,255,255,0.08)',
            border: '1px solid rgba(255,255,255,0.18)',
            color: '#fff', fontSize: 22, cursor: 'pointer', lineHeight: 1,
            zIndex: 251,
          }}>×</button>
          <img
            src={`./assets/slack/${lightbox}`}
            alt="Client win — Slack screenshot"
            onClick={e => e.stopPropagation()}
            style={{
              maxWidth: 'min(900px, 100%)', maxHeight: '92vh',
              height: 'auto', width: 'auto', objectFit: 'contain',
              borderRadius: 12,
              boxShadow: '0 40px 120px rgba(0,0,0,0.8)',
            }}
          />
        </div>
      )}
    </section>
  );
}
window.SlackWins = SlackWins;

// Search + category pills bar for the SlackWins section. Mirrors the look
// of CasesFilterBar so the page reads as one unified filter system.
function SlackWinsFilterBar({ filter, setFilter, search, setSearch, counts, resultCount }) {
  const cats = [
    { id: 'all',         label: 'All',          count: counts.all },
    { id: 'big',         label: 'Big ($20K+)',  count: counts.big },
    { id: 'retainer',    label: 'Retainers',    count: counts.retainer },
    { id: 'closed',      label: 'Closed Deals', count: counts.closed },
    { id: 'first',       label: 'First Wins',   count: counts.first },
    { id: 'screenshots', label: 'Screenshots',  count: counts.screenshots },
  ];
  return (
    <div data-mf="slack-filterbar" style={{
      maxWidth: 1280, margin: '0 auto 32px',
      display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 14,
      padding: '14px 18px',
      background: 'rgba(255,255,255,0.03)',
      border: '1px solid rgba(255,255,255,0.08)',
      borderRadius: 14,
    }}>
      {/* Category pills */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {cats.map(c => {
          const active = filter === c.id;
          return (
            <button
              key={c.id}
              onClick={() => setFilter(c.id)}
              style={{
                padding: '7px 14px', borderRadius: 999,
                border: '1px solid ' + (active ? 'rgba(232,18,60,0.6)' : 'rgba(255,255,255,0.14)'),
                background: active ? 'rgba(232,18,60,0.18)' : 'transparent',
                color: active ? '#fff' : 'rgba(255,255,255,0.78)',
                fontFamily: 'Poppins', fontWeight: 600, fontSize: 12,
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
                transition: 'background 150ms ease, border-color 150ms ease',
              }}
              onMouseEnter={e => { if (!active) e.currentTarget.style.borderColor = 'rgba(255,255,255,0.28)'; }}
              onMouseLeave={e => { if (!active) e.currentTarget.style.borderColor = 'rgba(255,255,255,0.14)'; }}
            >
              {c.label}
              <span style={{
                fontSize: 10, fontWeight: 700,
                color: active ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.45)',
              }}>{c.count}</span>
            </button>
          );
        })}
      </div>

      {/* Search */}
      <div data-mf="slack-search-wrap" style={{
        marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8,
        position: 'relative',
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.45)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ position: 'absolute', left: 12, pointerEvents: 'none' }}>
          <circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
        <input
          type="text"
          value={search}
          onChange={e => setSearch(e.target.value)}
          placeholder="Search wins…"
          style={{
            width: 240, padding: '9px 14px 9px 34px',
            background: 'rgba(0,0,0,0.32)',
            border: '1px solid rgba(255,255,255,0.12)',
            borderRadius: 999,
            color: '#fff', fontFamily: 'Poppins', fontSize: 13,
            outline: 'none',
          }}
          onFocus={e => e.currentTarget.style.borderColor = 'rgba(232,18,60,0.6)'}
          onBlur={e => e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)'}
        />
        {search && (
          <button onClick={() => setSearch('')} style={{
            position: 'absolute', right: 10,
            background: 'rgba(255,255,255,0.08)', border: 'none', borderRadius: '50%',
            width: 18, height: 18, color: '#fff', cursor: 'pointer',
            fontSize: 12, lineHeight: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>×</button>
        )}
      </div>
    </div>
  );
}
window.SlackWinsFilterBar = SlackWinsFilterBar;