// BrandWork — Deeran Films in-house client work (brand films / spots / content),
// shown directly below the 2 Pillars section. Tile + lightbox mirror CaseStudies.
function BrandWork() {
  const work = [
    { headline: 'The Power Of Epic — disaster-response service business, culture & brand film', metric: 'EPIC', meta: 'BRAND FILM', name: 'The Power Of Epic',
      provider: 'youtube', videoId: 'o3e70rsNoSU', thumb: './assets/df-epic-devices.webp' },
    { headline: 'Georgia Power — 50th anniversary brand spot for a statewide service operation', metric: '50TH', meta: 'BRAND SPOT', name: 'Georgia Power',
      provider: 'youtube', videoId: 'CedMxY-7SbQ', thumb: './assets/df-crew-on-set.webp' },
    { headline: 'Dalton Education & Exploring Inc. — inbound content for two service businesses', metric: 'Dalton Education', meta: 'CONTENT', name: 'Dalton Education',
      provider: 'youtube', videoId: 'BcK6NoiOMJY' },
  ];

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

  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="our-work" style={{
      position: 'relative',
      background: `
        radial-gradient(ellipse 60% 60% at 0% 40%, rgba(7,132,190,0.14) 0%, transparent 70%),
        linear-gradient(180deg, #0A0C0E 0%, #0F1215 100%)
      `,
      padding: '104px 44px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div data-mf="cases-head" style={{ marginBottom: 48, maxWidth: 720 }}>
          <div style={{
            display: 'inline-block', padding: '6px 14px',
            fontFamily: 'Archivo', fontWeight: 300, fontSize: 12, letterSpacing: '0.34em',
            color: '#0784BE', background: 'rgba(7,132,190,0.10)',
            border: '1px solid rgba(7,132,190,0.35)', borderRadius: 999, textTransform: 'uppercase',
          }}>Our Work</div>
          <h2 style={{
            fontFamily: 'Archivo', fontWeight: 800,
            fontSize: 'clamp(34px, 4.4vw, 60px)',
            lineHeight: 1.02, letterSpacing: '-0.025em',
            margin: '20px 0 16px', color: '#fff',
          }}>
            Content that Scales <span style={{ color: '#0784BE' }}>Service Businesses</span>.
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.6)', maxWidth: 560, margin: 0 }}>
            In-house brand films, spots, and content produced by Deeran Films for real service operations.
          </p>
        </div>

        <div data-mf="cases-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 20,
        }}>
          {work.map((c, i) => {
            const thumb = c.thumb || `https://img.youtube.com/vi/${c.videoId}/maxresdefault.jpg`;
            const onClick = () => setActive({ videoId: c.videoId, title: c.headline });
            return (
              <div key={i} onClick={onClick} style={{
                aspectRatio: '16/10',
                background: '#0A0C0E',
                border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 12, overflow: 'hidden',
                position: 'relative', cursor: 'pointer',
                transition: 'all 260ms cubic-bezier(0.2, 0.6, 0.2, 1)',
              }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = 'rgba(7,132,190,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)';
              }}
              >
                <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.thumb && !e.currentTarget.dataset.fallback) {
                      e.currentTarget.dataset.fallback = '1';
                      e.currentTarget.src = `https://img.youtube.com/vi/${c.videoId}/hqdefault.jpg`;
                    }
                  }}
                />

                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, rgba(10,12,14,0.35) 0%, rgba(10,12,14,0.15) 40%, rgba(10,12,14,0.92) 100%)',
                }}/>

                <div style={{
                  position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
                  width: 64, height: 64, borderRadius: '50%',
                  background: 'rgba(7,132,190,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)',
                }}>
                  <div style={{
                    width: 0, height: 0,
                    borderLeft: '20px solid #fff',
                    borderTop: '13px solid transparent',
                    borderBottom: '13px solid transparent',
                    marginLeft: 5,
                  }}/>
                </div>

                <div style={{
                  position: 'absolute', top: 16, left: 16, right: 16,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8,
                }}>
                  <div style={{
                    minWidth: 0, whiteSpace: 'normal', wordBreak: 'break-word',
                    padding: '6px 12px', borderRadius: 8,
                    background: '#E0A33A', color: '#0A0C0E',
                    fontFamily: 'Archivo', fontWeight: 900,
                    fontSize: String(c.metric).length > 8 ? 13 : 16,
                    lineHeight: 1.15, letterSpacing: '-0.01em',
                    boxShadow: '0 6px 18px rgba(0,0,0,0.45)',
                  }}>{c.metric}</div>

                  <div style={{
                    flex: '0 0 auto', whiteSpace: 'nowrap',
                    fontFamily: 'Archivo', 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>
                </div>

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

      {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: 12, overflow: 'hidden',
            boxShadow: '0 40px 120px rgba(0,0,0,0.8), 0 0 80px rgba(7,132,190,0.2)',
            border: '1px solid rgba(255,255,255,0.12)', background: '#000',
          }}>
            <iframe
              src={`https://www.youtube.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.BrandWork = BrandWork;