// om/hero.jsx — bold wordmark + floating monument object + flanking microcopy
function HeroWord() {
  const [stage, setStage] = React.useState(0);
  const [wink, setWink] = React.useState(false);
  React.useEffect(() => {const t = setTimeout(() => setStage(1), 760);return () => clearTimeout(t);}, []);

  if (stage === 0) {
    return <h1 className="mega hero-word"><span className="wink">DA</span></h1>;
  }
  return (
    <h1 className="mega hero-word">
      <span className={'wink hw' + (wink ? ' is-wink' : '')}
      onMouseEnter={() => setWink(true)}
      onMouseLeave={() => setWink(false)} data-comment-anchor="580e3391a8-span-9-7">
        <span className="hw-line hw-1"><span className="dw-das">Das</span> <span className="dw-aws">Awesome<span className="bang">!</span></span></span>
        <span className="hw-line hw-2 grad"><span className="dw-das">That’s</span> <span className="dw-aws">Awesome!</span></span>
      </span>
    </h1>);

}

function Hero() {
  return (
    <header id="top" className="hero" data-comment-anchor="37d1396002-header-20-5">
      <div className="wrap">
        <div className="hero-flank reveal in">
          <div className="fl-left">A clear signal,<span className="tm">™</span><br />in a noisy web.</div>
          <div className="fl-right">We design brand & digital experiences that scale with ambition. Atrategy-led, principal-directed, held to one standard from first call to launch.</div>
        </div>
        <div className="hero-stage">
          <div className="hero-object">
            <image-slot id="om-hero-object" class="obj-slot" shape="rect" fit="contain"
            src="assets/hero-object.png" placeholder="Drop the beacon render"></image-slot>
          </div>
          <HeroWord />
        </div>
        <p className="hero-sub">We make awesome things, on purpose!</p>
        <div className="hero-cta">
          <a className="btn btn-ink btn-lg" href="#contact">Find your signal <Icon name="arrow-up-right" className="ico" size={16} /></a>
          <a className="btn btn-line btn-lg" href="#work">See our work</a>
        </div>
      </div>
      <a href="#meet" className="hero-scroll"><span>Scroll</span><Icon name="arrow-down" size={15} /></a>
    </header>);

}
Object.assign(window, { Hero, HeroWord });