function Drive(){
  const AM=window[window.AM_NS];
  const {Portal,BrandLock,Eyebrow,Button}=AM;
  const [size,setSize]=React.useState(340);
  React.useEffect(()=>{
    const fit=()=>setSize(Math.max(220,Math.min(400,Math.round(Math.min(window.innerWidth*.7,window.innerHeight*.56)))));
    fit();window.addEventListener('resize',fit);return ()=>window.removeEventListener('resize',fit);
  },[]);
  return (
    <section className="am-chamber am-u-chamber am-drive" id="drive">
      <div className="am-drive-plate" aria-hidden="true" style={{backgroundImage:'url('+AM_IMG.drive+')'}}/>
      <div className="am-inner am-prod">
        <div className="am-prod-copy" data-am-reveal>
          <Eyebrow rule={false}>Portal 01 · Curso</Eyebrow>
          <BrandLock variant="drive" height="clamp(110px,13vw,190px)" assetBase="assets" glow/>
          <p className="am-prod-sub">12 Drives · 12 Confrontos · Uma Direção</p>
          <p className="am-prod-text">Cada drive coloca uma escolha à vista: não como conselho, como confronto.
            Doze movimentos para sair da leitura e entrar no exercício.</p>
          <div className="am-prod-actions">
            <Button variant="gold" href={(window.AM_LINKS&&AM_LINKS.drive)||'#drive'} icon={false}>Entrar no Drive</Button>
          </div>
        </div>
        <div className="am-prod-visual" data-am-reveal data-am-delay="180">
          <Portal label="Entrar no Drive" caption="Toda escolha tem um drive." size={size}
            mark={<BrandLock variant="drive-icon" height={Math.round(size*.3)} assetBase="assets"/>}/>
        </div>
      </div>
    </section>
  );
}
Object.assign(window,{Drive});