// share.jsx — clean "click-and-watch" experience for the shared/hosted video.
// Branded poster with a play button (the click also unlocks audio), no editor
// chrome, and a replay button when it finishes.

function PosterGate() {
  const { time, playing, setTime, setPlaying, duration } = useTimeline();
  const [started, setStarted] = React.useState(false);

  const atEnd = time >= duration - 0.06;

  const start = () => {
    setTime(0);
    setStarted(true);
    setPlaying(true);
  };
  const replay = () => { setTime(0); setPlaying(true); };

  // Poster (before first play)
  if (!started) {
    return (
      <div onClick={start} style={posterWrap}>
        <Ambient glowX="72%" glowY="32%" />
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 34, zIndex: 2 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14 }}>
            <span style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 92, color: OW.text, letterSpacing: '-0.02em', lineHeight: 1 }}>OneWay</span>
            <span style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 92, color: OW.accent, lineHeight: 1 }}>.</span>
          </div>
          <div style={{ fontFamily: BODY, fontSize: 28, color: OW.muted, fontWeight: 400, textAlign: 'center', maxWidth: 760 }}>
            A 75-second look at how OneWay helps you hire&nbsp;&mdash; without the agency price tag.
          </div>
          <button onClick={start} style={playBtn}>
            <span style={playIcon}>
              <svg width="30" height="30" viewBox="0 0 24 24" fill={OW.ink}><path d="M8 5v14l11-7z" /></svg>
            </span>
            Watch the overview
          </button>
          <div style={{ fontFamily: MONO, fontSize: 14, color: OW.faint, letterSpacing: '0.06em' }}>SOUND ON &middot; 1:13</div>
        </div>
      </div>
    );
  }

  // Replay (after finish)
  if (atEnd && !playing) {
    return (
      <button onClick={replay} style={{ ...replayBtn }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={OW.text} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 109-9 9 9 0 00-6.4 2.7L3 8" /><path d="M3 3v5h5" /></svg>
        Replay
      </button>
    );
  }
  return null;
}

const posterWrap = {
  position: 'absolute', inset: 0, zIndex: 65, cursor: 'pointer',
  background: OW.ink, display: 'flex', alignItems: 'center', justifyContent: 'center',
};
const playBtn = {
  display: 'inline-flex', alignItems: 'center', gap: 16,
  padding: '16px 30px 16px 16px', borderRadius: 99,
  background: OW.accent, color: OW.ink, border: 'none', cursor: 'pointer',
  fontFamily: "'General Sans', system-ui, sans-serif", fontSize: 24, fontWeight: 700,
  boxShadow: '0 24px 70px -20px rgba(53,224,161,0.5)',
};
const playIcon = {
  width: 52, height: 52, borderRadius: 99, background: OW.text,
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', paddingLeft: 4,
};
const replayBtn = {
  position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)', zIndex: 65,
  display: 'inline-flex', alignItems: 'center', gap: 10, padding: '12px 22px', borderRadius: 99,
  background: 'rgba(20,25,35,0.8)', color: OW.text, border: `1px solid ${OW.line}`,
  fontFamily: "'General Sans', system-ui, sans-serif", fontSize: 17, fontWeight: 600, cursor: 'pointer',
  backdropFilter: 'blur(6px)',
};

Object.assign(window, { PosterGate });