function HomeHero(props){
  const laque=props.palette!=='Noir';
  const smearRef=React.useRef(null);
  const vidRef=React.useRef(null);
  React.useEffect(function(){const v=vidRef.current;if(!v)return;if(matchMedia('(prefers-reduced-motion: reduce)').matches){v.pause();return;}const p=v.play();if(p&&p.catch)p.catch(function(){});},[]);
  const [smearOn,setSmearOn]=React.useState(false);
  React.useEffect(function(){
    const cv=smearRef.current;if(!cv||!window.Smear)return;
    const f=window.Smear(cv,{src:'assets/portrait/mateusz-palucki.jpg',pos:[.5,.22],center:[.5,.58],radius:.42,gray:laque?0:0});
    if(!f)return;f.ready.then(function(){setSmearOn(true);}).catch(function(){});
    return function(){f.destroy();};
  },[]);
  const D=window.MP_DATA;const nav=props.nav;
  const w=function(id){return D.works.find(function(x){return x.id===id;});};
  const go=function(n,id){return function(e){e.preventDefault();nav(n,id);};};
  const [st,setSt]=React.useState('');
  React.useLayoutEffect(function(){
    if(matchMedia('(prefers-reduced-motion: reduce)').matches){setSt('is-in');return;}
    setSt('is-pending');const t=setTimeout(function(){setSt('is-in');},60);return function(){clearTimeout(t);};
  },[]);
  const sir=w('sirene'),oss=w('ossis'),rift=w('rift');
  const reel=D.works.filter(function(x){return x.id!=='ossis'&&x.id!=='rift';}).slice(0,3);
  const [ri,setRi]=React.useState(0);const cur=reel[ri];
  return (<>
    <section className={'hx-hero '+st} aria-label="Introduction">
      <video className="hx-hero__img hx-hero__video" ref={vidRef} src="assets/video/hero-lamp.mp4" autoPlay muted loop playsInline preload="auto" aria-hidden="true"></video>
      <div className="hx-hero__grid hx-cols" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
      <p className="hx-hero__lede">{T('hero.lede')[0]}<em>{T('hero.lede')[1]}</em><br />{T('hero.lede')[2].trim()}</p>
      <h1 className="hx-name" aria-label="Mateusz Palucki"><span aria-hidden="true">Mateusz</span><span aria-hidden="true">Palucki</span></h1>
    </section>



    <section className="hx-pad hx-sel" aria-labelledby="hx-sel">
      <div className="hx-sechead"><h2 id="hx-sel" className="hx-mono hx-mono--ink" style={{margin:0}}>{T('home.selected')}</h2><M.TextLink variant="arrow" href="#works" onClick={go('works')}>{T('home.all')}</M.TextLink></div>
      <ul className="k-exh hx-sel__grid">
        {['motl-cognac','mystere','aurea'].map(function(id){const x=w(id);if(!x)return null;return (
          <li key={id}><a className="k-exh__item" href={'#work/'+id} onClick={go('work',id)} aria-label={x.title+(x.year?', '+x.year:'')}>
            <img src={x.cover} alt={x.coverAlt} loading="lazy" />
            <span className="k-exh__info" aria-hidden="true">
              <span className="k-exh__date">{[x.category,x.year].filter(Boolean).join(' · ')}</span>
              <span className="k-exh__t">{x.title}</span>
              {x.materials?<span className="k-exh__sub">{x.materials}</span>:null}
            </span>
          </a></li>);})}
      </ul>
    </section>

    <section className="hx-pad hx-latest" aria-labelledby="hx-latest">
      <h2 id="hx-latest" className="hx-mono">{T('home.latest')}</h2>
      <a className="hx-latest__a" href="#archive" onClick={go('archive')}>
        <span className="hx-latest__t">ALTAR</span>
        <span className="hx-latest__m">Bibliothèque Polonaise de Paris · {T('exh')[0].date}</span>
      </a>
    </section>
  </>);
}
window.HomeHero=HomeHero;