// scenes.jsx — Weller Creative Group logo animation
// Clean, premium reveal: each region fades up with a soft glow, staggered.
//
// Story arc (5.5s total):
//   0.0 – 0.4s   Black hold; vignette breathes in
//   0.4 – 1.6s   W mark fades in with soft glow + slight scale settle
//   1.4 – 2.0s   Divider line draws outward from center
//   1.8 – 2.9s   WELLER fades up with glow
//   2.5 – 3.4s   CREATIVE GROUP fades up
//   3.4 – 5.5s   Hold + slow camera settle + breathing glow

const TOTAL = 4.5;
const LOGO_SRC = 'assets/Logos/wcg_logo.png';

// Regions sampled from the actual PNG's alpha density profile
const REGIONS = {
  wmark:    { top: 0.10,  bottom: 0.59 },
  divider:  { top: 0.595, bottom: 0.625 },
  weller:   { top: 0.65,  bottom: 0.78 },
  creative: { top: 0.78,  bottom: 0.86 },
};

// Logo display size within 1920×1080 stage
const LOGO_SIZE = 760;
const LOGO_TOP = (1080 - LOGO_SIZE) / 2;
const LOGO_LEFT = (1920 - LOGO_SIZE) / 2;

// ── Backdrop ───────────────────────────────────────────────────────────────
function Backdrop() {
  return null;
}

// ── A single PNG-clipped slice ─────────────────────────────────────────────
function LogoSlice({ region, style, imgFilter }) {
  return (
    <div style={{
      position: 'absolute',
      left: LOGO_LEFT,
      top: LOGO_TOP + region.top * LOGO_SIZE,
      width: LOGO_SIZE,
      height: (region.bottom - region.top) * LOGO_SIZE,
      overflow: 'hidden',
      ...style,
    }}>
      <img
        src={LOGO_SRC}
        draggable="false"
        style={{
          position: 'absolute',
          left: 0,
          top: -region.top * LOGO_SIZE,
          width: LOGO_SIZE,
          height: LOGO_SIZE,
          // Boost the faint white-on-transparent so it reads against black
          filter: imgFilter || 'brightness(3) contrast(1.4)',
          userSelect: 'none',
          pointerEvents: 'none',
        }}
      />
    </div>
  );
}

// Split-and-slide reveal: two halves of the slice slide in from outside and
// meet at the centerline. Quick and snappy.
//   axis = 'x' → left half slides from left, right half slides from right
//   axis = 'y' → top half slides from above, bottom half slides from below
function SplitSlide({ region, start, end, axis = 'x', distance = 60, glow = true }) {
  const t = useTime();
  const p = animate({ from: 0, to: 1, start, end, ease: Easing.easeOutQuart })(t);
  const fade = animate({ from: 0, to: 1, start, end: start + (end - start) * 0.6, ease: Easing.easeOutQuad })(t);
  // Glow held breathing on the settled frame
  const glowAmt = animate({ from: 0, to: 1, start, end: end + 0.2, ease: Easing.easeOutCubic })(t);
  const breathe = 0.5 + 0.5 * Math.sin(Math.max(0, t - end) * 1.0);
  const heldGlow = animate({ from: 0, to: 1, start: end, end: end + 0.6 })(t) * breathe;
  if (fade <= 0) return null;

  const offset = (1 - p) * distance;
  const dropShadow = glow
    ? `drop-shadow(0 0 ${8 + glowAmt * 6}px rgba(255,255,255,${0.18 + glowAmt * 0.18 + heldGlow * 0.06}))`
    : 'none';

  // Container at the slice's frame, holding two clipped halves.
  const sliceW = LOGO_SIZE;
  const sliceH = (region.bottom - region.top) * LOGO_SIZE;
  const left = LOGO_LEFT;
  const top = LOGO_TOP + region.top * LOGO_SIZE;

  // Each half is a wrapper with overflow:hidden masking to its half of the slice,
  // containing the FULL slice positioned so only its half shows. Then the wrapper
  // is translated to slide in.
  const halves = axis === 'x'
    ? [
        { // left half
          clip: { left: 0,           top: 0, width: sliceW / 2, height: sliceH },
          imgPos: { left: 0,         top: -region.top * LOGO_SIZE },
          translate: `translateX(${-offset}px)`,
        },
        { // right half
          clip: { left: sliceW / 2,  top: 0, width: sliceW / 2, height: sliceH },
          imgPos: { left: -sliceW / 2, top: -region.top * LOGO_SIZE },
          translate: `translateX(${offset}px)`,
        },
      ]
    : [
        { // top half
          clip: { left: 0, top: 0, width: sliceW, height: sliceH / 2 },
          imgPos: { left: 0, top: -region.top * LOGO_SIZE },
          translate: `translateY(${-offset}px)`,
        },
        { // bottom half
          clip: { left: 0, top: sliceH / 2, width: sliceW, height: sliceH / 2 },
          imgPos: { left: 0, top: -region.top * LOGO_SIZE - sliceH / 2 },
          translate: `translateY(${offset}px)`,
        },
      ];

  return (
    <div style={{
      position: 'absolute', left, top, width: sliceW, height: sliceH,
      filter: dropShadow,
      opacity: fade,
    }}>
      {halves.map((h, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: h.clip.left, top: h.clip.top,
          width: h.clip.width, height: h.clip.height,
          overflow: 'hidden',
          transform: h.translate,
        }}>
          <img
            src={LOGO_SRC}
            draggable="false"
            style={{
              position: 'absolute',
              left: h.imgPos.left, top: h.imgPos.top,
              width: LOGO_SIZE, height: LOGO_SIZE,
              filter: 'brightness(3) contrast(1.4)',
              userSelect: 'none', pointerEvents: 'none',
            }}
          />
        </div>
      ))}
    </div>
  );
}

// Reusable fade-up reveal: opacity + slight Y lift + glow drop-shadow
function FadeReveal({ region, start, end, lift = 14, glow = true }) {
  const t = useTime();
  const fade = animate({ from: 0, to: 1, start, end, ease: Easing.easeOutCubic })(t);
  const yLift = animate({ from: lift, to: 0, start, end, ease: Easing.easeOutCubic })(t);
  // Glow ramps in with the fade, then settles to a quiet baseline
  const glowAmt = animate({ from: 0, to: 1, start, end: end + 0.2, ease: Easing.easeOutCubic })(t);
  // Subtle breathing on the held final state
  const breathe = 0.5 + 0.5 * Math.sin(Math.max(0, t - end) * 1.0);
  const heldGlow = animate({ from: 0, to: 1, start: end, end: end + 0.6 })(t) * breathe;

  if (fade <= 0) return null;

  const dropShadow = glow
    ? `drop-shadow(0 0 ${8 + glowAmt * 6}px rgba(255,255,255,${0.18 + glowAmt * 0.18 + heldGlow * 0.06}))`
    : 'none';

  return (
    <LogoSlice
      region={region}
      style={{
        opacity: fade,
        transform: `translateY(${yLift}px)`,
        filter: dropShadow,
      }}
    />
  );
}

// ── W mark — split & slide horizontally ───────────────────────────────────
function WMark() {
  return <SplitSlide region={REGIONS.wmark} start={0.3} end={0.85} axis="x" distance={140} />;
}

// ── Divider — draws outward from center ───────────────────────────────────
function Divider() {
  const t = useTime();
  const draw = animate({ from: 0, to: 1, start: 0.95, end: 1.35, ease: Easing.easeOutQuart })(t);
  if (draw <= 0) return null;
  const half = draw * 50; // each side, in %
  const m = `linear-gradient(90deg,` +
            ` transparent ${50 - half}%,` +
            ` #000 ${50 - half + 0.5}%,` +
            ` #000 ${50 + half - 0.5}%,` +
            ` transparent ${50 + half}%)`;
  return (
    <LogoSlice region={REGIONS.divider} style={{
      WebkitMaskImage: m,
      maskImage: m,
      filter: 'drop-shadow(0 0 6px rgba(255,255,255,0.35))',
    }} />
  );
}

// ── WELLER — split & slide horizontally ───────────────────────────────────
function Weller() {
  return <SplitSlide region={REGIONS.weller} start={1.2} end={1.75} axis="x" distance={100} />;
}

// ── CREATIVE GROUP — fade up (kept subtle) ────────────────────────────────
function CreativeGroup() {
  return <FadeReveal region={REGIONS.creative} start={1.7} end={2.4} lift={8} />;
}

// ── Camera (subtle ken-burns) ──────────────────────────────────────────────
function Camera({ children }) {
  const t = useTime();
  const scale = interpolate(
    [0, 0.85, 2.4, TOTAL],
    [1.03, 1.0, 1.0, 0.985],
    [Easing.easeOutCubic, Easing.linear, Easing.easeInOutCubic]
  )(t);
  return (
    <div style={{
      position: 'absolute', inset: 0,
      transform: `scale(${scale})`,
      transformOrigin: '50% 50%',
    }}>
      {children}
    </div>
  );
}

// ── Timestamp label for comments ───────────────────────────────────────────
function TimestampLabel() {
  const t = useTime();
  React.useEffect(() => {
    const root = document.getElementById('video-root');
    if (root) root.setAttribute('data-screen-label', `t=${t.toFixed(1)}s`);
  }, [Math.floor(t * 2) / 2]);
  return null;
}

// ── Main scene ─────────────────────────────────────────────────────────────
function Scene() {
  return (
    <>
      <TimestampLabel />
      <Backdrop />
      <Camera>
        <WMark />
        <Divider />
        <Weller />
        <CreativeGroup />
      </Camera>
    </>
  );
}

window.Scene = Scene;
window.SCENE_DURATION = TOTAL;