// CaseStudies — video results wall with big money numbers
// Real video IDs pulled from masterfilmmaker.com
function CaseStudies() {
  const cases = [
    { headline: 'How Hassan scaled from $70K/mo to $186K/mo in 90 days', metric: '$70K → $186K', meta: 'IN 90 DAYS', name: 'Hassan', featured: true,
      provider: 'youtube', videoId: 'DGKUNCmG6fE' },
    { headline: 'How Max & Gage added $556K in video deals', metric: '$556K', meta: 'IN DEALS', name: 'Max & Gage',
      provider: 'youtube', videoId: 'eChB4ohDcCY' },
    { headline: 'How Wil closed $69K in 1 day', metric: '$69K', meta: 'IN 1 DAY', name: 'Wil',
      provider: 'youtube', videoId: 'fCyWFbwnuH0' },
    // Vimeo entry from the live site — using thumbnail + link-through since embed URL is unknown
    { headline: 'How Scott added $183K and left his full-time job', metric: '$183K', meta: 'IN DEALS', name: 'Scott',
      provider: 'vimeo-thumb', thumb: 'https://i.vimeocdn.com/video/1874343533-59fa88c6815a7346c5a4da7003350b80b2356b9b5be3ce1837e5351012c81032-d_1280.jpg' },
    { headline: 'How Tori closed a $45K retainer in 2 weeks', metric: '$45K', meta: 'RETAINER', name: 'Tori',
      provider: 'youtube', videoId: 'RRiOABrWeG8' },
    { headline: 'How Matt closed $43K in 2 months', metric: '$43K', meta: 'IN 2 MONTHS', name: 'Matt',
      provider: 'youtube', videoId: 'Oqc1CnFhnDU' },
  ];

  const [active, setActive] = React.useState(null); // {videoId} or null

  // ESC to close modal
  React.useEffect(() => {
    if (!active) return;
    const onKey = (e) => { if (e.key === 'Escape') setActive(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;
    };
  }, [active]);

  return (
    <section data-mf="section" id="case-studies" style={{
      position: 'relative',
      background: `
        radial-gradient(ellipse 60% 60% at 100% 50%, rgba(232,18,60,0.18) 0%, transparent 70%),
        linear-gradient(180deg, #15070B 0%, #0A0608 100%)
      `,
      padding: '120px 44px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div data-mf="cases-head" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, marginBottom: 56, flexWrap: 'wrap' }}>
          <div>
            <SectionMark num="04" tone="red">Proof, not promises</SectionMark>
            <h2 style={{
              fontFamily: 'Poppins', fontWeight: 800,
              fontSize: 'clamp(40px, 4.8vw, 72px)',
              lineHeight: 1.0, letterSpacing: '-0.025em',
              margin: '20px 0 16px', color: '#fff', maxWidth: 820,
            }}>
              Real agencies. Real results. <span style={{ color: '#E8123C' }}>Real money.</span>
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.6)', maxWidth: 520, margin: 0 }}>
              Individual results vary and are not guaranteed. These clients implemented the system and saw exceptional outcomes.
            </p>
          </div>
          <a href="/case-studies" style={{ textDecoration: 'none' }}>
            <Button variant="secondary" size="md">See All Case Studies →</Button>
          </a>
        </div>

        <div data-mf="cases-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 20,
        }}>
          {cases.map((c, i) => {
            const thumb = c.provider === 'youtube'
              ? `https://img.youtube.com/vi/${c.videoId}/maxresdefault.jpg`
              : c.thumb;
            const onClick = () => {
              if (c.provider === 'youtube') setActive({ videoId: c.videoId, title: c.headline });
            };
            return (
              <div key={i} onClick={onClick} style={{
                aspectRatio: '16/10',
                background: '#120609',
                border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 22, overflow: 'hidden',
                position: 'relative', cursor: 'pointer',
                transition: 'all 260ms cubic-bezier(0.22, 1, 0.36, 1)',
              }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = 'rgba(232,18,60,0.5)';
                e.currentTarget.style.transform = 'translateY(-3px)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
                e.currentTarget.style.transform = 'translateY(0)';
              }}
              >
                {/* Real thumbnail image */}
                <img
                  src={thumb}
                  alt={c.headline}
                  width={480} height={360}
                  loading="lazy" decoding="async"
                  style={{
                    position: 'absolute', inset: 0,
                    width: '100%', height: '100%',
                    objectFit: 'cover',
                    display: 'block',
                  }}
                  onError={(e) => {
                    if (c.provider === 'youtube' && !e.currentTarget.dataset.fallback) {
                      e.currentTarget.dataset.fallback = '1';
                      e.currentTarget.src = `https://img.youtube.com/vi/${c.videoId}/hqdefault.jpg`;
                    }
                  }}
                />

                {/* Subtle darkening for legibility */}
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, rgba(10,6,8,0.35) 0%, rgba(10,6,8,0.15) 40%, rgba(10,6,8,0.92) 100%)',
                }}/>

                {/* play button */}
                <div style={{
                  position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
                  width: 64, height: 64, borderRadius: '50%',
                  background: 'rgba(232,18,60,0.95)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 10px 30px rgba(0,0,0,0.55), 0 0 0 6px rgba(255,255,255,0.08)',
                  transition: 'transform 220ms ease',
                }}>
                  <div style={{
                    width: 0, height: 0,
                    borderLeft: '20px solid #fff',
                    borderTop: '13px solid transparent',
                    borderBottom: '13px solid transparent',
                    marginLeft: 5,
                  }}/>
                </div>

                {/* Big metric chip, top-left */}
                <div style={{
                  position: 'absolute', top: 16, left: 16,
                  padding: '6px 12px', borderRadius: 10,
                  background: '#FFEA00', color: '#0A0608',
                  fontFamily: 'Poppins', fontWeight: 900,
                  fontSize: 16,
                  letterSpacing: '-0.01em',
                  boxShadow: '0 6px 18px rgba(0,0,0,0.45)',
                }}>{c.metric}</div>

                {/* Meta tag, top-right */}
                <div style={{
                  position: 'absolute', top: 18, right: 16,
                  fontFamily: 'Poppins', fontWeight: 800,
                  fontSize: 11, letterSpacing: '0.12em',
                  color: '#fff',
                  padding: '5px 10px', borderRadius: 8,
                  background: 'rgba(0,0,0,0.55)',
                  backdropFilter: 'blur(6px)',
                  border: '1px solid rgba(255,255,255,0.14)',
                }}>{c.meta}</div>

                {/* Bottom gradient + title */}
                <div style={{
                  position: 'absolute', bottom: 0, left: 0, right: 0,
                  padding: '50px 20px 20px',
                }}>
                  <div style={{
                    fontFamily: 'Poppins', fontWeight: 700,
                    fontSize: 15, lineHeight: 1.3,
                    color: '#fff', letterSpacing: '-0.005em',
                  }}>{c.headline}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Lightbox player */}
      {active && (
        <div onClick={() => setActive(null)} style={{
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.9)',
          backdropFilter: 'blur(10px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          zIndex: 120, padding: 24,
        }}>
          <button onClick={() => setActive(null)} style={{
            position: 'absolute', top: 22, right: 24,
            width: 42, height: 42, 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,
          }}>×</button>
          <div onClick={e => e.stopPropagation()} style={{
            width: 'min(1100px, 100%)', aspectRatio: '16/9',
            borderRadius: 20, overflow: 'hidden',
            boxShadow: '0 40px 120px rgba(0,0,0,0.8), 0 0 80px rgba(232,18,60,0.2)',
            border: '1px solid rgba(255,255,255,0.12)',
            background: '#000',
          }}>
            <iframe
              src={`https://www.youtube-nocookie.com/embed/${active.videoId}?autoplay=1&rel=0&modestbranding=1&playsinline=1`}
              title={active.title}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
              referrerPolicy="strict-origin-when-cross-origin"
              style={{ width: '100%', height: '100%', border: 0 }}
            />
          </div>
        </div>
      )}
    </section>
  );
}
window.CaseStudies = CaseStudies;