// heroes.jsx - RecLab hero (option 01 · full-bleed + scrim)
// Headline: "Where recruiters turn AI into real impact"
// Exports window.RecLabHeroes

const SUB = (<>Every recruiting team knows they should be using AI more.<br />We're here to help you figure out how.</>);

// ---- shared bits ----
function Wordmark({ light, accent = "var(--terra)", size = 21 }) {
  return (
    <span style={{ fontFamily: "var(--sans)", fontWeight: 700, fontSize: size, letterSpacing: "-0.02em",
      color: light ? "#fff" : "var(--ink)", display: "inline-flex", alignItems: "baseline", gap: 1 }}>
      The<span style={{ color: accent }}>RecLab</span>
      <span style={{ width: 5, height: 5, borderRadius: "50%", background: accent, marginLeft: 1, alignSelf: "flex-end", marginBottom: 4 }} />
    </span>
  );
}
function NavLinks({ light, items = ["Workshops", "Training", "Consulting", "Community"] }) {
  return (
    <nav style={{ display: "flex", gap: 30 }}>
      {items.map((t) => (
        <span key={t} style={{ fontFamily: "var(--sans)", fontSize: 15, fontWeight: 500,
          color: light ? "rgba(255,255,255,0.82)" : "var(--ink-soft)" }}>{t}</span>
      ))}
    </nav>
  );
}

// ---- 01 · Full-bleed + scrim ----
function FullBleed({ img }) {
  return (
    <div className="hero">
      <div className="hero-media">
        <img className="bg" src={img} alt="" style={{ objectPosition: "center 18%" }} />
      </div>
      <div className="hero-scrim" style={{ position: "absolute", inset: 0, background:
        "linear-gradient(105deg, rgba(20,18,14,0.86) 0%, rgba(20,18,14,0.55) 42%, rgba(20,18,14,0.08) 75%)" }} />
      <div className="hero-content" style={{ position: "absolute", inset: 0, padding: "44px 64px", display: "flex", flexDirection: "column" }}>
        <header className="h-enter h-nav" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <Wordmark light accent="var(--terra-soft)" />
          <div style={{ display: "flex", alignItems: "center", gap: 30 }}>
            <NavLinks light />
            <a href="#contact" className="magnetic" style={{ fontFamily: "var(--sans)", fontSize: 14.5, fontWeight: 600, color: "#fff", whiteSpace: "nowrap",
              textDecoration: "none", background: "var(--terra)", padding: "10px 20px", borderRadius: 100 }}><span className="magnetic-label">Get in contact</span></a>
          </div>
        </header>
        <div className="hero-textblock" style={{ marginTop: "auto", maxWidth: "min(94vw, 1040px)" }}>
          <h1 className="hero-headline" style={{ fontFamily: "var(--sans)", fontWeight: 700, fontSize: "clamp(2.1rem, 5.4vw, 76px)", lineHeight: 1.02,
            letterSpacing: "-0.03em", color: "#fff", margin: "0", textWrap: "nowrap" }}>
            <span className="hl-line"><span className="hl-inner" style={{ animationDelay: ".15s" }}>Helping recruiters turn</span></span>
            <span className="hl-line"><span className="hl-inner" style={{ animationDelay: ".27s" }}>AI into <span style={{ color: "var(--terra-soft)" }}>real impact</span></span></span>
          </h1>
          <p className="h-enter h-sub" style={{ fontFamily: "var(--sans)", fontSize: 20, lineHeight: 1.5, color: "rgba(255,255,255,0.82)",
            maxWidth: 560, margin: "22px 0 0", fontWeight: 400 }}>{SUB}</p>
        </div>
      </div>
    </div>
  );
}

window.RecLabHeroes = { FullBleed };