// Act 1 (resolve) — HERO. Name, role tags, one-line value prop. The formation anchor in the
// right plate is where the network's "box" forms and the one node detaches.

function Hero() {
  const { Button } = window.WollenbergUIKit;
  const m = WB.meta;
  return (
    <section className="wb-act wb-act--tall" id="top" data-section="hero" data-screen-label="Hero">
      <div className="wb-shell wb-hero">
        <div className="wb-hero__main wb-reveal">
          <div className="wb-eyebrow">
            <span className="wb-anchor" />
            <span>{m.tagline}</span>
          </div>

          <h1 className="wb-display wb-display--xl" style={{ marginTop: 24 }}>
            Max<br />Wollenberg
          </h1>

          <div className="wb-hero__roles">
            {m.roles.map((r) => <span className="wb-hero__role" key={r}>{r}</span>)}
          </div>

          <p className="wb-lede wb-hero__lede">{m.valueProp}</p>
          <p className="wb-hero__subline">{m.subline}</p>

          <div className="wb-hero__cta">
            <Button variant="primary" href="#contact">Start a project →</Button>
            <Button variant="secondary" href="#systems">See the four systems</Button>
          </div>
        </div>

        <div className="wb-hero__plate" aria-hidden="true">
          {/* the network builds its formation around this point and detaches one node from here */}
          <span className="wb-hero__formation-anchor" data-node="formation" />
        </div>
      </div>

      <div className="wb-shell" style={{ marginTop: 64 }}>
        <span className="wb-hero__scroll"><i />Scroll to follow the node</span>
      </div>
    </section>
  );
}

window.Hero = Hero;