const { NavBar, Button } = window.ZiggyPortfolioDesignSystem_957ce8;

// The hero video's sound plays only the first time Home is shown.
let heroSoundPlayed = false;

function Home({ onNavigate }) {
  const [videoEnded, setVideoEnded] = React.useState(false);
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    const withSound = !heroSoundPlayed;
    heroSoundPlayed = true;
    const events = ['pointerdown', 'keydown', 'touchstart'];
    const unmute = () => { if (!v.ended) v.muted = false; events.forEach(e => window.removeEventListener(e, unmute)); };
    v.muted = !withSound;
    v.play().catch(() => {
      // Browsers block autoplay with sound until the visitor interacts: play muted, unmute on first click/tap/key
      v.muted = true;
      v.play().catch(() => {});
      if (withSound) events.forEach(e => window.addEventListener(e, unmute));
    });
    return () => events.forEach(e => window.removeEventListener(e, unmute));
  }, []);
  return React.createElement('div', { style: { position: 'relative', height: '100vh', minHeight: 640, overflow: 'hidden', background: '#efece6' } },
    React.createElement('style', null, `@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.08)}}`),
    React.createElement('div', { style: { position: 'absolute', inset: 0, overflow: 'hidden' } },
      React.createElement('video', {
        src: '../../assets/hero.mp4',
        ref: videoRef, playsInline: true,
        onEnded: () => setVideoEnded(true),
        style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: videoEnded ? 0 : 1, transition: 'opacity .6s ease' }
      }),
      React.createElement('img', {
        src: '../../assets/hero-end-frame.jpg', alt: '',
        style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: videoEnded ? 1 : 0, transition: 'opacity .6s ease' }
      }),
      React.createElement('div', { style: { position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(10,12,10,.85) 0%, rgba(10,12,10,.35) 30%, rgba(10,12,10,0) 55%)' } })
    ),
    React.createElement(NavBar, { dark: false, onNavigate, star: '../../assets/star-black.png' }),
    React.createElement('div', { style: { position: 'absolute', left: 'var(--page-margin)', right: 'var(--page-margin)', bottom: 'var(--page-margin)', zIndex: 2, maxWidth: 640 } },
      React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-1)', lineHeight: 'var(--lh-tight)', margin: '0 0 var(--space-5) 0', color: '#fbfaf7' } }, 'Made with', React.createElement('br'), 'measured intent.'),
      React.createElement(Button, { variant: 'primary', onClick: () => onNavigate && onNavigate('PROJECTS') }, 'Discover')
    )
  );
}
window.Home = Home;