// Production Hero — links go to real pages, no React-injected refs.
function Hero({
  variant = "dark",
  eyebrow = null,
  headlineLines = ["Infrastructure", "technology", "for a better", "future"],
  body = "For over a decade, we have partnered with some of the most successful technology entrepreneurs solving our most pressing societal challenges.",
  primaryLabel = "Meet our companies →",
  primaryHref = "portfolio.html",
}) {
  const dark = variant === "dark";
  const bg = dark ? "#213A2C" : "#F1F5F5";
  const fg = dark ? "#FFFFFF" : "#213A2C";
  const accent = dark ? "#CDF6B0" : "#7B937D";
  return (
    <section style={{
      position: "relative",
      background: bg, color: fg,
      padding: "120px 48px 128px",
      overflow: "hidden",
      isolation: "isolate",
    }}>
      {dark && (
        <React.Fragment>
          <div aria-hidden="true" style={{
            position: "absolute", inset: 0, zIndex: -2,
            backgroundImage: "url('images/hero-warehouse-solar.jpg')",
            backgroundSize: "cover",
            backgroundPosition: "center right",
          }} />
          <div aria-hidden="true" style={{
            position: "absolute", inset: 0, zIndex: -1,
            background: "linear-gradient(90deg, #213A2C 0%, #213A2C 55%, rgba(33,58,44,0.95) 75%, rgba(33,58,44,0.80) 100%)",
          }} />
        </React.Fragment>
      )}
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "end", position: "relative" }}>
        <div>
          {eyebrow && (
            <div style={{
              fontSize: 12, fontWeight: 400, color: accent,
              letterSpacing: "0.28em", textTransform: "lowercase", marginBottom: 32,
            }}>
              {eyebrow}
            </div>
          )}
          <h1 style={{
            margin: 0, fontWeight: 700,
            fontSize: "clamp(56px, 6.5vw, 96px)",
            lineHeight: 0.98, letterSpacing: "-0.04em",
            textTransform: "uppercase",
          }}>
            {headlineLines.map((l, i) => <React.Fragment key={i}>{l}{i < headlineLines.length - 1 && <br/>}</React.Fragment>)}
          </h1>
        </div>
        <div style={{ paddingBottom: 16 }}>
          <p style={{
            margin: 0, fontSize: 19, lineHeight: 1.5,
            letterSpacing: "-0.01em", color: dark ? "rgba(255,255,255,0.82)" : "#4A5C50",
            maxWidth: 460,
          }}>
            {body}
          </p>
          <div style={{ marginTop: 32 }}>
            <a href={primaryHref} style={{
              display: "inline-block",
              background: dark ? "#CDF6B0" : "#213A2C",
              color: dark ? "#213A2C" : "#FFFFFF",
              border: 0, padding: "14px 22px",
              font: "500 14px 'Plus Jakarta Sans', sans-serif",
              cursor: "pointer", borderRadius: 2,
              textDecoration: "none",
            }}>{primaryLabel}</a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;