// CaseStudyWatermill.jsx — case study for Watermill.
// 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: 'watermill',
  title: 'Watermill',
  subtitle: 'commission for a private Southampton beach house — a content library built around a lively summer atmosphere.',
  client: 'Private residence in Watermill, New York',
  studio: 'Volvox Labs',
  year: 2020,
  role: 'Content Design',

  // Lead — opening paragraph after the at-a-glance strip.
  lead: 'A commission by Volvox Labs for a private beach house in Southampton, NY — motion design and interactive visual work themed around a lively summer beach atmosphere. The content library split into three categories: soft organisms, sand, and objects. I led the content design in the sand theme, heavily driven by particle simulation.',

  blocks: [
    {
      no: '01',
      key: 'sand',
      eyebrow: '01 — Sand',
      title: 'Sand.',
      body: [],
      stillsGroups: [
        { cols: 1, stills: ['site/assets/02_PROJECT/2020/Watermill/VDO/Sand_006.mp4'] },
        { cols: 2, stills: [
          'site/assets/02_PROJECT/2020/Watermill/VDO/Sand_001.mp4',
          'site/assets/02_PROJECT/2020/Watermill/VDO/Sand_002.mp4',
        ]},
        { cols: 1, stills: ['site/assets/02_PROJECT/2020/Watermill/VDO/Sand_005.mp4'] },
        { cols: 2, stills: [
          'site/assets/02_PROJECT/2020/Watermill/VDO/Sand_004.mp4',
          'site/assets/02_PROJECT/2020/Watermill/VDO/Sand_007.mp4',
        ]},
        { cols: 1, stills: ['site/assets/02_PROJECT/2020/Watermill/VDO/Sand_003.mp4'] },
      ],
    },
    {
      no: '02',
      key: 'soft-organisms-and-object',
      eyebrow: '02 — Soft Organisms and Beach Object',
      title: 'Soft Organisms and Beach Objects.',
      body: [],
      stillsGroups: [
        { cols: 1, stills: ['site/assets/02_PROJECT/2020/Watermill/VDO/Flamingos_01.mp4'] },
        { cols: 1, stills: ['site/assets/02_PROJECT/2020/Watermill/VDO/Organic_02.mp4'] },
        { cols: 2, stills: [
          'site/assets/02_PROJECT/2020/Watermill/VDO/Organic_01.mp4',
          'site/assets/02_PROJECT/2020/Watermill/VDO/200512_OrganicShapes_01_A.mp4',
        ]},
        { cols: 1, stills: ['site/assets/02_PROJECT/2020/Watermill/VDO/Objects_013%20(Copy)_1080p.mp4'] },
        { cols: 1, stills: ['site/assets/02_PROJECT/2020/Watermill/VDO/Wave_01.mp4'] },
      ],
    },
  ],

  credits: [
    { role: 'Client',                              who: 'Private' },
    { divider: true },
    { role: 'Agency',                              who: 'META' },
    { role: 'Art Direction / Houdini FX',          who: 'Kamil Nawratil' },
    { role: 'Houdini Artist',                      who: 'Mark McCallum' },
    { role: 'Houdini Artist',                      who: 'Pasakorn Nontananandh' },
    { role: 'TouchDesigner FX',                    who: 'Javier Cruz · Ben Forest' },
    { role: 'Backend Developer + TouchDesigner FX', who: 'Ben Forest' },
  ],
};

// =====================================================================
// 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 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 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 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,
              }}>
                {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/2020/Watermill/VDO/Header_1080p.mp4" />
            <CornerMeta tl="WATERMILL / HERO" br={`COMMISSION · ${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(4, 1fr)', gap: 24,
          paddingTop: 32, borderTop: '1px solid var(--ak-line)',
        }}>
          {[
            ['client', CS.client],
            ['studio', CS.studio],
            ['year',   CS.year],
            ['role',   CS.role],
          ].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} />
            {b.stillsGroups ? (
              b.stillsGroups.map((g, gi) => (
                <StillsGrid key={gi} stills={g.stills} alt={b.title} cols={g.cols} />
              ))
            ) : (
              <StillsGrid stills={b.stills} alt={b.title} cols={b.stillsCols} />
            )}
          </section>
        </React.Fragment>
      ))}

      {/* CREDITS */}
      <CreditsBlock />

    </div>
  );
}

window.CaseStudyWatermill = CaseStudyA;

})();