const { Button } = window.JabberwockeeDesignSystem_646027;
function Hero({ onProjects, onContact }) {
  const D = window.JW_DATA;
  return (
    <section id="top" className="jw-hero">
      <div className="jw-hero-grid" aria-hidden />
      <div className="jw-container jw-hero-inner">
        <div className="jw-hero-copy">
<h1 className="jw-reveal" style={{ font: "var(--type-display-lg)", animationDelay: "0ms", maxWidth: "14ch" }}>Stories worth <em>streaming.</em></h1>
          <p className="jw-reveal" style={{ font: "var(--type-body-lg)", color: "var(--text-body)", marginTop: 24, maxWidth: "40ch", animationDelay: "120ms" }}>{D.intro}</p>
          <div className="jw-reveal" style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 40, animationDelay: "160ms" }}>
            <Button size="lg" arrow onClick={onProjects}>View projects</Button>
            <Button size="lg" variant="secondary" onClick={onContact}>Contact</Button>
          </div>
        </div>
        <figure className="jw-hero-still jw-reveal" data-theme="ink" style={{ animationDelay: "240ms" }}>
          <img src={D.hero.src} alt={D.hero.alt} />
          <div className="jw-grain" aria-hidden />
          <div className="jw-scrim" aria-hidden />
          {[{ top: -1, left: -1, borderWidth: "2px 0 0 2px" }, { top: -1, right: -1, borderWidth: "2px 2px 0 0" }, { bottom: -1, left: -1, borderWidth: "0 0 2px 2px" }, { bottom: -1, right: -1, borderWidth: "0 2px 2px 0" }].map((s, i) => <i key={i} aria-hidden style={{ position: "absolute", width: 18, height: 18, borderStyle: "solid", borderColor: "var(--paper-50)", ...s }} />)}
          <figcaption style={{ position: "absolute", left: 20, right: 20, bottom: 18, display: "flex", justifyContent: "flex-start", alignItems: "flex-end", gap: 16 }}>
            <img src="../design_system/assets/milestone-title.png" alt={D.hero.caption} style={{ width: "62%", maxWidth: 300, mixBlendMode: "screen", filter: "contrast(1.05)" }} />
          </figcaption>
        </figure>
      </div>
    </section>
  );
}
window.Hero = Hero;