// CaseStudyMSLounge.jsx — case study for Microsoft Lounge Blackwelder V2.
// Wrapped in an IIFE so internal constants (CS, helper components) don't
// collide with other case studies.

;(function () {

const { useState: useStateCS, useEffect: useEffectCS, useRef: useRefCS } = React;

// ============ SOURCE CONTENT ============
const CS = {
  slug: 'microsoft-lounge-blackwelder',
  title: 'Microsoft Lounge\nBlackwelder',
  subtitle: 'Forced perspective LED content design for private lounge.',
  client: 'Microsoft',
  studio: 'Volvox Labs',
  year: '2021 + 2023',
  role: 'Motion Design · Art Direction',
  location: 'Culver City, CA',

  // Lead — opening paragraph after the at-a-glance strip.
  lead: "Microsoft commissioned Volvox Labs to upgrade the LED wall system at their Blackwelder lounge in Culver City, Los Angeles. The install introduced higher pixel density in the main lounge area and added a second wall at the front entrance — interactive motion-design pieces and a Cortana-driven interface that lets guests communicate with the assistant on arrival. Alongside the hardware upgrade, the team authored a new round of mind-bending forced-perspective content for the corner LED wall.",

  blocks: [
    {
      no: '01',
      key: 'environments',
      eyebrow: '01 — The Environments',
      title: 'The Environments.',
      body: [
        'A new set of content rooted in the theme of nature — built to spark curiosity and exploration, and to make visitors aware of the variety of natural environments surrounding the city.',
        'Three distinct sub-themes sit under that main theme: Terrarium, Tidal, and Under Water. I led content for the Terrarium environment; the other two were authored by the rest of the content-design team.',
      ],
      // No hero media at this block — it sets up the next three.
    },
    {
      no: '02',
      key: 'terrarium',
      eyebrow: '02 — Terrarium',
      title: 'Terrarium.',
      body: [
        'A miniature cross-section of forest floor — moss, driftwood, and stone scaled for the corner LED wall, lit and graded to read as a living diorama held inside the room.',
      ],
      video: 'site/assets/02_PROJECT/2021/Blackwelder/01_Terrarium/01.mp4',
      cornerTl: 'BLOCK 02 / TERRARIUM',
      stills: [
        'site/assets/02_PROJECT/2021/Blackwelder/01_Terrarium/Blackwelder_Content_04_1.webp',
        'site/assets/02_PROJECT/2021/Blackwelder/01_Terrarium/Blackwelder_Content_07.webp',
      ],
      trailerVideo: 'site/assets/02_PROJECT/2021/Blackwelder/01_Terrarium/2652926471.mp4',
    },
    {
      no: '03',
      key: 'tidal',
      eyebrow: '03 — Tidal',
      title: 'Tidal.',
      body: [
        'Crashing surf framed by the architecture of the lounge — water and foam authored at LED-pitch resolution, animated to read as a continuous wall of motion across the corner.',
      ],
      video: 'site/assets/02_PROJECT/2021/Blackwelder/02_Tidal/2652852522.mp4',
      cornerTl: 'BLOCK 03 / TIDAL',
      stills: [
        'site/assets/02_PROJECT/2021/Blackwelder/02_Tidal/2652853827%2B(00168).webp',
        'site/assets/02_PROJECT/2021/Blackwelder/02_Tidal/Blackwelder_Content_02.webp',
      ],
      trailerVideo: 'site/assets/02_PROJECT/2021/Blackwelder/02_Tidal/2652926373.mp4',
    },
    {
      no: '04',
      key: 'under-water',
      eyebrow: '04 — Underwater',
      title: 'Underwater.',
      body: [
        'A submerged scene authored as the third sub-theme — quiet light shafts and drifting particulate, completing the trio of environments visitors cycle through across the lounge.',
      ],
      video: 'site/assets/02_PROJECT/2021/Blackwelder/03_Underwater/2653098589.mp4',
      cornerTl: 'BLOCK 04 / UNDERWATER',
      stills: [
        'site/assets/02_PROJECT/2021/Blackwelder/03_Underwater/Blackwelder_Content_08-1024x576.jpg',
        'site/assets/02_PROJECT/2021/Blackwelder/03_Underwater/Blackwelder_Content_11.jpg',
      ],
      trailerVideo: 'site/assets/02_PROJECT/2021/Blackwelder/03_Underwater/2652925230.mp4',
    },
    {
      no: '05',
      key: 'extended-lounge',
      eyebrow: '05 — Additional scope',
      title: 'The Extended Digital Living Backyard.',
      body: [
        'This is an additional scope of commission — a small new set built around a single theme.',
        'A fully animated Unreal Engine environment — part backyard garden, part architectural courtyard — designed to extend the enclosed living space outward. Five scenarios mirror the world beyond the wall: early morning, daytime, late evening, night, and rain. Each carries its own subtle environmental FX and dynamic lighting, the screen breathing in time with the day outside.',
      ],
      stillsCols: 1,
      stills: [
        'site/assets/02_PROJECT/2021/Blackwelder/04_Extended%20Lounge/01.mp4',
        'site/assets/02_PROJECT/2021/Blackwelder/04_Extended%20Lounge/02.mp4',
        'site/assets/02_PROJECT/2021/Blackwelder/04_Extended%20Lounge/03.mp4',
        'site/assets/02_PROJECT/2021/Blackwelder/04_Extended%20Lounge/04.mp4',
        'site/assets/02_PROJECT/2021/Blackwelder/04_Extended%20Lounge/05.mp4',
        'site/assets/02_PROJECT/2021/Blackwelder/04_Extended%20Lounge/Env_01.jpg',
      ],
    },
  ],

  credits: [
    { role: 'Client',                            who: 'Microsoft' },
    { divider: true },
    { role: 'Studio',                            who: 'Volvox Labs' },
    { role: 'Art Direction (2021)',              who: 'Kamil Nawratil' },
    { role: 'Art Direction (2023)',              who: 'Pasakorn Nontananandh' },
    { role: 'Houdini Artist (2021)',             who: 'Kamil Nawratil · Pasakorn Nontananadh · Mark McCallum' },
    { role: 'Unreal Engine Developer (2021)',    who: 'Mark McCallum' },
    { role: 'Unreal Engine Developer (2023)',    who: 'Chatrin Samanchuen' },
    { role: 'Software Developer',                who: 'Javier Cruz · Ben Forest · Matt Ross' },
    { role: 'Kinetic Engineering + Fabrication', who: 'Zyia Zhang' },
  ],
};

// =====================================================================
// Shared atoms — scoped to this IIFE.
// =====================================================================

function MonoLabel({ children, dim, size = 11, style }) {
  return (
    <div style={{
      fontFamily: "'JetBrains Mono', SFMono-Regular, Menlo, monospace",
      fontSize: size, letterSpacing: '0.16em',
      color: dim ? 'var(--ak-fg-2)' : 'var(--ak-fg)',
      textTransform: 'uppercase',
      ...style,
    }}>{children}</div>
  );
}

const proseP = {
  fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
  fontSize: 17, lineHeight: 1.55, letterSpacing: '-0.005em',
  fontWeight: 400, color: 'var(--ak-fg-2)',
  margin: '20px 0 0',
};

function ProseSection({ eyebrow, title, children, dark }) {
  return (
    <section style={{
      padding: '120px 32px',
      background: dark ? 'var(--ak-bg-3)' : 'var(--ak-bg)',
      color: dark ? 'var(--ak-fg-on3)' : 'var(--ak-fg)',
      borderTop: '1px solid var(--ak-line)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
        <Reveal>
          <MonoLabel dim>{eyebrow}</MonoLabel>
          <h2 style={{
            fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
            fontSize: 'clamp(36px, 4vw, 56px)', lineHeight: 1.05,
            letterSpacing: '-0.02em', fontWeight: 400,
            margin: '20px 0 0',
            color: dark ? 'var(--ak-fg-on3)' : 'var(--ak-fg)',
            textWrap: 'balance',
          }}>
            {title}
          </h2>
        </Reveal>
        <Reveal y={28} delay={120} style={{ marginTop: 14 }}>
          <div style={{ color: dark ? 'var(--ak-fg-2-on3)' : 'var(--ak-fg-2)' }}>
            {children}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CornerMeta({ tl, br }) {
  return (
    <>
      {tl && (
        <div style={{
          position: 'absolute', top: 16, right: 16,
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
          letterSpacing: '0.14em', color: 'rgba(255,255,255,0.7)',
          textTransform: 'uppercase',
        }}>{tl}</div>
      )}
      {br && (
        <div style={{
          position: 'absolute', bottom: 16, right: 16,
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
          letterSpacing: '0.14em', color: 'rgba(255,255,255,0.7)',
          textTransform: 'uppercase',
        }}>{br}</div>
      )}
    </>
  );
}

function BlockMedia({ block }) {
  const hasMedia = block.image || block.video || block.vimeo;
  if (!hasMedia) return null;
  return (
    <Reveal y={20}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        borderRadius: 16, overflow: 'hidden',
        background: '#0a0b0d',
        border: '1px solid var(--ak-line)',
        position: 'relative',
      }}>
        {block.vimeo ? (
          <iframe
            src={block.vimeo}
            title={block.title}
            frameBorder="0"
            referrerPolicy="strict-origin-when-cross-origin"
            allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
            allowFullScreen
            style={{ aspectRatio: '16/9', width: '100%', height: 'auto', border: 0, display: 'block' }}
          />
        ) : block.video ? (
          <video src={block.video} autoPlay loop muted playsInline
            style={{ width: '100%', height: 'auto', display: 'block' }} />
        ) : (
          <img src={block.image} alt={block.title}
            style={{ width: '100%', height: 'auto', display: 'block' }} />
        )}
        <CornerMeta tl={block.cornerTl} br={block.cornerBr} />
      </div>
    </Reveal>
  );
}

function StillsGrid({ stills, alt, cols = 2 }) {
  if (!stills || stills.length === 0) return null;
  const naturalAspect = cols === 1;
  return (
    <div style={{
      maxWidth: 1280, margin: '16px auto 0',
      display: 'grid',
      gridTemplateColumns: `repeat(${cols}, 1fr)`,
      gap: 16,
    }}>
      {stills.map((src, i) => {
        const isVideo = /\.mp4($|\?)/i.test(src);
        return (
          <Reveal key={src} y={20} delay={i * 80}>
            <div style={{
              position: 'relative', overflow: 'hidden',
              ...(naturalAspect ? {} : { aspectRatio: '16/9' }),
              borderRadius: 12,
              background: '#0a0b0d',
              border: '1px solid var(--ak-line)',
            }}>
              {isVideo ? (
                <video src={src} autoPlay loop muted playsInline
                  style={naturalAspect
                    ? { width: '100%', height: 'auto', display: 'block' }
                    : { width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              ) : (
                <img src={src} alt={`${alt} still ${i + 1}`}
                  style={naturalAspect
                    ? { width: '100%', height: 'auto', display: 'block' }
                    : { width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              )}
            </div>
          </Reveal>
        );
      })}
    </div>
  );
}

function CreditsBlock() {
  return (
    <section style={{
      padding: '72px 32px',
      background: 'var(--ak-bg)',
      borderTop: '1px solid var(--ak-line)',
    }}>
      <div style={{ maxWidth: 768, margin: '0 auto' }}>
        <Reveal>
          <MonoLabel dim style={{ marginBottom: 28 }}>Credits</MonoLabel>
        </Reveal>
        <Reveal y={20} delay={120}>
          <table style={{
            width: '100%', borderCollapse: 'collapse',
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.04em',
          }}>
            <tbody>
              {CS.credits.map((row, i) => {
                if (row.divider) {
                  return (<tr key={i}><td colSpan="2" style={{ height: 14 }} /></tr>);
                }
                return (
                  <tr key={i} style={{ borderTop: '1px solid var(--ak-line)' }}>
                    <td style={{ padding: '10px 10px 10px 0', color: 'var(--ak-fg-2)', textTransform: 'uppercase', whiteSpace: 'nowrap', verticalAlign: 'top', width: 220 }}>{row.role}</td>
                    <td style={{ padding: '10px 0', color: 'var(--ak-fg)' }}>{row.who}</td>
                  </tr>
                );
              })}
              <tr style={{ borderTop: '1px solid var(--ak-line)' }}><td colSpan="2" style={{ height: 0 }} /></tr>
            </tbody>
          </table>
        </Reveal>
      </div>
    </section>
  );
}

// =====================================================================
// CASE STUDY — editorial long-form
// =====================================================================
function CaseStudyA({ onNavigate }) {
  return (
    <div style={{ background: 'var(--ak-bg)', color: 'var(--ak-fg)' }}>

      {/* HERO */}
      <section style={{ padding: '40px 32px 24px', borderBottom: '1px solid var(--ak-line)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <Reveal y={20}>
            <button onClick={() => onNavigate && onNavigate('work', { restore: true })}
              style={{
                background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
                fontFamily: "'JetBrains Mono', monospace", fontSize: 12,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--ak-fg-2)',
                display: 'inline-flex', alignItems: 'center', gap: 8,
                marginBottom: 24,
                transition: 'color 200ms cubic-bezier(0.2,0.6,0.2,1)',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--ak-fg)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--ak-fg-2)'; }}>
              <span style={{ display: 'inline-block', transition: 'transform 240ms cubic-bezier(0.2,0.6,0.2,1)' }}>←</span>
              back to work
            </button>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end', marginTop: 0 }}>
            <Reveal y={32}>
              <h1 style={{
                fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
                fontSize: 'clamp(48px, 6vw, 88px)',
                lineHeight: 0.92,
                letterSpacing: '-0.04em',
                fontWeight: 400,
                margin: 0,
                whiteSpace: 'pre-line',
              }}>
                {CS.title}<span style={{ color: 'var(--ak-blue, #0052ff)' }}>.</span>
              </h1>
            </Reveal>
            <Reveal y={32} delay={120}>
              <p style={{
                fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
                fontSize: 16, lineHeight: 1.4, letterSpacing: '-0.005em',
                color: 'var(--ak-fg)', margin: 0, maxWidth: 460,
              }}>
                {CS.subtitle}
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* HERO MEDIA */}
      <section style={{ padding: '0 32px', background: 'var(--ak-bg)' }}>
        <Reveal y={20}>
          <div style={{
            maxWidth: 1280, margin: '20px auto 0',
            borderRadius: 16, overflow: 'hidden',
            background: '#0a0b0d',
            border: '1px solid var(--ak-line)',
            position: 'relative',
          }}>
            <HeroVideo src="site/assets/02_PROJECT/2021/Blackwelder/VDO/Microsoft%20Blackwelder_%20Moving%20Image%20Commission_1080p.mp4" />
            <CornerMeta tl="MICROSOFT / BLACKWELDER" br={`${CS.location.toUpperCase()} · ${CS.year}`} />
          </div>
        </Reveal>
      </section>

      {/* AT A GLANCE STRIP */}
      <section style={{ padding: '64px 32px 32px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto',
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24,
          paddingTop: 32, borderTop: '1px solid var(--ak-line)',
        }}>
          {[
            ['client',   CS.client],
            ['studio',   CS.studio],
            ['year',     CS.year],
            ['role',     CS.role],
            ['location', CS.location],
          ].map(([k, v], i) => (
            <Reveal key={k} delay={i * 50}>
              <MonoLabel dim style={{ marginBottom: 10 }}>{k}</MonoLabel>
              <div style={{ fontSize: 15, lineHeight: 1.4, letterSpacing: '-0.005em' }}>{v}</div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* LEAD */}
      <section style={{ padding: '48px 32px 96px' }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <Reveal>
            <p style={{
              fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
              fontSize: 28, lineHeight: 1.32, letterSpacing: '-0.015em',
              fontWeight: 400, color: 'var(--ak-fg)', margin: 0,
              textWrap: 'balance',
            }}>
              {CS.lead}
            </p>
          </Reveal>
        </div>
      </section>

      {/* INDIVIDUAL BLOCKS */}
      {CS.blocks.map((b) => (
        <React.Fragment key={b.key}>
          <ProseSection eyebrow={b.eyebrow} title={b.title}>
            {b.body.map((p, i) => (
              <p key={i} style={proseP}>{p}</p>
            ))}
          </ProseSection>
          <section style={{ padding: '0 32px 120px', background: 'var(--ak-bg)' }}>
            <BlockMedia block={b} />
            <StillsGrid stills={b.stills} alt={b.title} cols={b.stillsCols} />
            {b.trailerVideo && (
              <Reveal y={20}>
                <div style={{
                  maxWidth: 1280, margin: '16px auto 0',
                  borderRadius: 16, overflow: 'hidden',
                  background: '#0a0b0d',
                  border: '1px solid var(--ak-line)',
                }}>
                  <video src={b.trailerVideo} autoPlay loop muted playsInline
                    style={{ width: '100%', height: 'auto', display: 'block' }} />
                </div>
              </Reveal>
            )}
          </section>
        </React.Fragment>
      ))}

      {/* CREDITS */}
      <CreditsBlock />

    </div>
  );
}

window.CaseStudyMSLounge = CaseStudyA;

})();