// TsuchiyaVideo.jsx — Tsuchiya brand intro, 48s
// Stage lives here with hardcoded numeric props.
// A polling useEffect waits for window.Stage (set by animations.jsx via sibling x-import).

const W = 1920, H = 1080;
const CLAY  = '#54402F';
const CLAY2 = '#6B4F3A';
const PARCH = '#F2EDE4';
const WARM  = '#EDE6D8';
const MOSS  = '#4A5240';
const INK   = '#2C2C2C';
const BLACK = '#1A1410';

function lerp(a, b, t) { return a + (b - a) * t; }
function eOut(t) { return 1 - (1 - t) * (1 - t); }

function WashiBg({ opacity }) {
  return React.createElement('div', {
    style: {
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage:
        'repeating-linear-gradient(0deg,rgba(107,79,58,0.045) 0px,rgba(107,79,58,0.045) 1px,transparent 1px,transparent 18px),' +
        'repeating-linear-gradient(90deg,rgba(107,79,58,0.025) 0px,rgba(107,79,58,0.025) 1px,transparent 1px,transparent 28px)',
      opacity,
    }
  });
}

function Scene1() {
  const { clamp, useSprite } = window;
  const { localTime: t } = useSprite();
  const sealScale = lerp(0.82, 1.0, eOut(clamp((t - 0.8) / 1.4, 0, 1)));
  const sealOp    = clamp(t / 0.9, 0, 1);
  const bgOp      = clamp((t - 3.5) / 1.2, 0, 1);
  const glowOp    = clamp((t - 1.5) / 2, 0, 0.18);
  return React.createElement('div', { style: { position: 'absolute', inset: 0, background: BLACK } },
    React.createElement('div', { style: { position: 'absolute', inset: 0, background: PARCH, opacity: bgOp } }),
    React.createElement('div', { style: { position: 'absolute', inset: 0, background: `radial-gradient(ellipse 600px 400px at 50% 50%, rgba(84,64,47,${glowOp}), transparent)` } }),
    React.createElement('div', { style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: sealOp, transform: `scale(${sealScale})` } },
      React.createElement('span', { style: { fontFamily: '"Shippori Mincho",serif', fontWeight: 800, fontSize: 320, lineHeight: 1, color: CLAY, letterSpacing: '0.04em', writingMode: 'vertical-rl' } }, '土屋')
    )
  );
}

function Scene2() {
  const { clamp, useSprite } = window;
  const { localTime: t } = useSprite();
  const lines   = ['Skin is not a problem', 'to be solved.'];
  const stampOp = clamp((t - 1) / 1.2, 0, 0.9);
  const stampX  = lerp(40, 0, eOut(clamp((t - 1) / 1.4, 0, 1)));
  const lineW   = lerp(0, 80, eOut(clamp((t - 3.5) / 1.5, 0, 1)));
  return React.createElement('div', { style: { position: 'absolute', inset: 0, background: PARCH, overflow: 'hidden' } },
    React.createElement(WashiBg, { opacity: 0.7 }),
    React.createElement('div', { style: { position: 'absolute', top: 56, right: 72, fontFamily: '"Shippori Mincho",serif', fontWeight: 800, fontSize: 64, lineHeight: 1, color: CLAY, opacity: stampOp, transform: `translateX(${stampX}px)` } }, '土屋'),
    React.createElement('div', { style: { position: 'absolute', top: 60, left: 72, fontFamily: '"DM Sans",sans-serif', fontSize: 18, letterSpacing: '0.32em', textTransform: 'uppercase', color: CLAY2, opacity: clamp(t / 0.8, 0, 1) } }, 'Tsuchiya · House of Earth'),
    React.createElement('div', { style: { position: 'absolute', left: 140, right: 140, top: '50%', transform: 'translateY(-52%)', display: 'flex', flexDirection: 'column', gap: 28 } },
      lines.map((line, i) => {
        const lt = t - i * 1.1;
        return React.createElement('div', { key: i, style: { fontFamily: '"Shippori Mincho",serif', fontWeight: 500, fontSize: 104, lineHeight: 1.32, color: INK, opacity: clamp(lt / 0.9, 0, 1), transform: `translateY(${lerp(30, 0, eOut(clamp(lt / 1.0, 0, 1)))}px)` } }, line);
      })
    ),
    React.createElement('div', { style: { position: 'absolute', bottom: 90, left: 140, width: lineW, height: 2, background: MOSS } })
  );
}

function Scene3() {
  const { clamp, useSprite } = window;
  const { localTime: t } = useSprite();
  const lines = ['It is a living system', 'to be tended.'];
  const lineW = lerp(0, 56, eOut(clamp((t - 2) / 1.2, 0, 1)));
  return React.createElement('div', { style: { position: 'absolute', inset: 0, background: WARM, overflow: 'hidden' } },
    React.createElement(WashiBg, { opacity: 0.6 }),
    React.createElement('div', { style: { position: 'absolute', top: 56, right: 72, fontFamily: '"Shippori Mincho",serif', fontWeight: 800, fontSize: 64, lineHeight: 1, color: CLAY, opacity: clamp(t / 0.8, 0, 0.88) } }, '土屋'),
    React.createElement('div', { style: { position: 'absolute', top: 60, left: 72, fontFamily: '"DM Sans",sans-serif', fontSize: 18, letterSpacing: '0.32em', textTransform: 'uppercase', color: CLAY2, opacity: clamp(t / 0.8, 0, 1) } }, 'Tsuchiya · House of Earth'),
    React.createElement('div', { style: { position: 'absolute', left: 140, right: 140, top: '50%', transform: 'translateY(-50%)', display: 'flex', flexDirection: 'column', gap: 28 } },
      lines.map((line, i) => {
        const lt = t - i * 1.1;
        return React.createElement('div', { key: i, style: { fontFamily: '"Shippori Mincho",serif', fontWeight: 400, fontSize: 96, lineHeight: 1.28, color: CLAY2, opacity: clamp(lt / 0.9, 0, 1), transform: `translateY(${lerp(30, 0, eOut(clamp(lt / 1.0, 0, 1)))}px)` } }, line);
      })
    ),
    React.createElement('div', { style: { position: 'absolute', bottom: 90, left: 140, width: lineW, height: 1, background: 'rgba(107,79,58,0.4)' } })
  );
}

function Scene4() {
  const { clamp, useSprite } = window;
  const { localTime: t } = useSprite();
  const items = [
    { kanji: '麹', label: 'Koji', sub: 'The culture of transformation', color: CLAY },
    { kanji: '時', label: 'Time', sub: 'The active ingredient',          color: CLAY },
    { kanji: '肌', label: 'Skin', sub: 'A living ecosystem',             color: MOSS },
  ];
  return React.createElement('div', { style: { position: 'absolute', inset: 0, background: PARCH, overflow: 'hidden' } },
    React.createElement(WashiBg, { opacity: 0.7 }),
    React.createElement('div', { style: { position: 'absolute', top: 56, right: 72, fontFamily: '"Shippori Mincho",serif', fontWeight: 800, fontSize: 64, lineHeight: 1, color: CLAY, opacity: clamp(t / 0.5, 0, 1) } }, '土屋'),
    React.createElement('div', { style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
      items.map((item, i) => {
        const lt = t - i * 2.8;
        const op = eOut(clamp(lt / 1.2, 0, 1));
        const sc = lerp(0.88, 1.0, eOut(clamp(lt / 1.2, 0, 1)));
        const bOp = clamp((lt - 0.8) / 0.8, 0, 1) * 0.25;
        return React.createElement('div', { key: i, style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: H, opacity: op, transform: `scale(${sc})`, gap: 16, padding: '0 40px', boxSizing: 'border-box', borderRight: i < 2 ? `1px solid rgba(107,79,58,${bOp})` : 'none' } },
          React.createElement('span', { style: { fontFamily: '"Shippori Mincho",serif', fontWeight: 800, fontSize: 280, lineHeight: 1, color: item.color } }, item.kanji),
          React.createElement('span', { style: { fontFamily: '"DM Sans",sans-serif', fontSize: 22, letterSpacing: '0.3em', textTransform: 'uppercase', color: INK, marginTop: 8 } }, item.label),
          React.createElement('span', { style: { fontFamily: '"Shippori Mincho",serif', fontSize: 22, color: CLAY2, letterSpacing: '0.08em', opacity: clamp((lt - 1.0) / 0.8, 0, 1) } }, item.sub)
        );
      })
    )
  );
}

function Scene5() {
  const { clamp, useSprite } = window;
  const { localTime: t } = useSprite();
  const driftScale = lerp(1.0, 1.06, t / 10);
  const kanjiOp   = clamp((t - 0.3) / 1.4, 0, 1);
  const kanjiY    = lerp(20, 0, eOut(clamp((t - 0.3) / 1.4, 0, 1)));
  const labelOp   = clamp((t - 2.2) / 1.2, 0, 1);
  const engOp     = clamp((t - 3.4) / 1.2, 0, 1);
  return React.createElement('div', { style: { position: 'absolute', inset: 0, background: CLAY, overflow: 'hidden' } },
    React.createElement('div', { style: { position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(0deg,rgba(242,237,228,0.04) 0px,rgba(242,237,228,0.04) 1px,transparent 1px,transparent 18px)' } }),
    React.createElement('div', { style: { position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', transform: `scale(${driftScale})` } },
      React.createElement('span', { style: { fontFamily: '"Shippori Mincho",serif', fontWeight: 800, fontSize: 360, lineHeight: 1, color: PARCH, opacity: kanjiOp, transform: `translateY(${kanjiY}px)`, letterSpacing: '0.06em' } }, '発酵'),
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, marginTop: 40, opacity: labelOp } },
        React.createElement('div', { style: { width: 48, height: 1, background: 'rgba(242,237,228,0.4)' } }),
        React.createElement('span', { style: { fontFamily: '"DM Sans",sans-serif', fontSize: 20, letterSpacing: '0.4em', textTransform: 'uppercase', color: 'rgba(242,237,228,0.65)' } }, 'Hakkō — Fermentation')
      ),
      React.createElement('span', { style: { fontFamily: '"Shippori Mincho",serif', fontWeight: 400, fontSize: 38, color: 'rgba(242,237,228,0.5)', letterSpacing: '0.1em', marginTop: 12, opacity: engOp } }, "Nature's own intelligence")
    ),
    React.createElement('span', { style: { position: 'absolute', bottom: 48, right: 72, fontFamily: '"Shippori Mincho",serif', fontWeight: 800, fontSize: 56, color: 'rgba(242,237,228,0.35)', lineHeight: 1 } }, '土屋')
  );
}

function Scene6() {
  const { clamp, useSprite } = window;
  const { localTime: t } = useSprite();
  const sealOp     = eOut(clamp(t / 1.2, 0, 1));
  const sealScale  = lerp(0.9, 1.0, eOut(clamp(t / 1.2, 0, 1)));
  const subOp      = clamp((t - 1.4) / 1.0, 0, 1);
  const subY       = lerp(14, 0, eOut(clamp((t - 1.4) / 1.0, 0, 1)));
  const lineW      = lerp(0, 240, eOut(clamp((t - 2.0) / 1.2, 0, 1)));
  const urlOp      = clamp((t - 3.0) / 1.2, 0, 1);
  const finalBlack = clamp((t - 5.2) / 0.8, 0, 1);
  return React.createElement('div', { style: { position: 'absolute', inset: 0, background: PARCH, overflow: 'hidden' } },
    React.createElement(WashiBg, { opacity: 0.6 }),
    React.createElement('div', { style: { position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 28 } },
      React.createElement('span', { style: { fontFamily: '"Shippori Mincho",serif', fontWeight: 800, fontSize: 280, lineHeight: 1, color: CLAY, opacity: sealOp, transform: `scale(${sealScale})` } }, '土屋'),
      React.createElement('div', { style: { width: lineW, height: 1, background: 'rgba(107,79,58,0.35)' } }),
      React.createElement('span', { style: { fontFamily: '"DM Sans",sans-serif', fontSize: 20, letterSpacing: '0.42em', textTransform: 'uppercase', color: CLAY2, opacity: subOp, transform: `translateY(${subY}px)` } }, 'House of Earth'),
      React.createElement('span', { style: { fontFamily: '"Shippori Mincho",serif', fontSize: 28, letterSpacing: '0.22em', color: MOSS, marginTop: 8, opacity: urlOp } }, 'tsuchiyaskin.com')
    ),
    React.createElement('div', { style: { position: 'absolute', inset: 0, background: BLACK, opacity: finalBlack, pointerEvents: 'none' } })
  );
}

// Root: polls for window.Stage (loaded by sibling x-import in DC template),
// then renders Stage with hardcoded NUMERIC props.
function TsuchiyaVideo() {
  const [ready, setReady] = React.useState(typeof window.Stage === 'function');

  React.useEffect(() => {
    if (typeof window.Stage === 'function') { setReady(true); return; }
    const id = setInterval(() => {
      if (typeof window.Stage === 'function') { clearInterval(id); setReady(true); }
    }, 40);
    return () => clearInterval(id);
  }, []);

  if (!ready) {
    return React.createElement('div', { style: { position: 'absolute', inset: 0, background: BLACK } });
  }

  const { Stage, Sprite } = window;
  return React.createElement(Stage, { width: W, height: H, duration: 48, background: BLACK },
    React.createElement(Sprite, { start: 0,    end: 5.5  }, React.createElement(Scene1, null)),
    React.createElement(Sprite, { start: 4.5,  end: 14.5 }, React.createElement(Scene2, null)),
    React.createElement(Sprite, { start: 13.5, end: 22.5 }, React.createElement(Scene3, null)),
    React.createElement(Sprite, { start: 21.5, end: 33.5 }, React.createElement(Scene4, null)),
    React.createElement(Sprite, { start: 32.5, end: 42.5 }, React.createElement(Scene5, null)),
    React.createElement(Sprite, { start: 41.5, end: 48   }, React.createElement(Scene6, null))
  );
}

module.exports = { TsuchiyaVideo };