// PRLX site — hero takeover with background reel and oversized wordmark headline
function Hero({ onPlay, onSeeWork, categories, headline }) {
  const { Button, StatusDot, Badge } = window.PRLXDesignSystem_b1b8b9;
  const { Icon, useViewport } = window;
  const cats = categories || window.PRLX_CATS;
  const { isMobile } = useViewport();

  return (
    <section
      data-screen-label="Hero"
      style={{ position: "relative", minHeight: "calc(100vh - 0px)", display: "flex", alignItems: "flex-end", overflow: "hidden" }}
    >
      {/* background reel */}
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: "#0a0d12" }}>
        <video
          autoPlay muted loop playsInline preload="auto"
          poster="../../assets/video/prlx-video-production-hobart-darwin-showreel-poster.jpg"
          style={{
            position: "absolute", top: "50%", left: "50%",
            width: "100%", height: "100%", minWidth: "100%", minHeight: "100%",
            objectFit: "cover", transform: "translate(-50%, -50%)", pointerEvents: "none",
          }}
        >
          <source src="../../assets/video/homepage-hero.mp4"  type="video/mp4" />
          <source src="../../assets/video/homepage-hero.webm" type="video/webm" />
        </video>
        {/* legibility scrims over the footage */}
        <div style={{ position: "absolute", inset: 0, background: "rgba(8,9,12,0.32)" }} />
        <div style={{ position: "absolute", inset: 0, background: "var(--scrim-bottom)" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 42%)" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0) 60%)" }} />
      </div>

      {/* top-corner live tag */}
      <div style={{ position: "absolute", top: isMobile ? 78 : 96, left: isMobile ? 20 : 32, display: "flex", alignItems: "center", gap: 16 }}>
        <StatusDot status="live" label="Showreel 2025" />
      </div>

      {/* content */}
      <div style={{ position: "relative", padding: isMobile ? "0 20px 72px" : "0 32px 96px", width: "100%", boxSizing: "border-box" }}>
        <div style={{ display: "flex", gap: 12, marginBottom: 22, flexWrap: "wrap" }}>
          {cats.map((c) => (
            <Badge key={c} variant="outline">{c}</Badge>
          ))}
        </div>
        <h1
          style={{
            fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase",
            letterSpacing: "-0.02em", lineHeight: 0.92, margin: 0,
            fontSize: "clamp(48px, 8.5vw, 132px)", color: "#fff", maxWidth: "16ch",
          }}
        >
          {headline || "We make things worth watching."}
        </h1>
        <div style={{ display: "flex", alignItems: "center", gap: isMobile ? 12 : 20, marginTop: isMobile ? 26 : 34, flexWrap: "wrap" }}>
          <Button variant="primary" size={isMobile ? "md" : "lg"} iconLeft={<Icon name="Play" size={18} />} onClick={onPlay}>
            Watch the reel
          </Button>
          <Button variant="secondary" size={isMobile ? "md" : "lg"} iconRight={<Icon name="ArrowDown" size={16} />} onClick={onSeeWork}>
            Selected work
          </Button>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--prlx-graphite-400)", letterSpacing: "0.08em" }}>
            ● EST. 2019 · DARWIN / HOBART
          </span>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });