// Hero.jsx — full-bleed photo, protection gradient, big headline
function Hero() {
  const { T } = useLang();
  const h = T.hero;
  return (
    <section id="top" style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "flex-end",
      background: "var(--ink)", overflow: "hidden" }}>
      <img src={IMG.three} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
        objectFit: "cover", objectPosition: "center 40%" }} />
      {/* protection gradients */}
      <div style={{ position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(20,16,12,.55) 0%, rgba(20,16,12,.05) 30%, rgba(20,16,12,.25) 60%, rgba(20,16,12,.92) 100%)" }} />
      <div className="container" style={{ position: "relative", paddingBottom: 84, paddingTop: 120, width: "100%" }}>
        <Reveal>
          <Eyebrow color="var(--lime)">{h.eyebrow}</Eyebrow>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{ font: "var(--t-display)", color: "var(--paper)", letterSpacing: "-.02em",
            textTransform: "uppercase", margin: "14px 0 0", maxWidth: 900, whiteSpace: "pre-line" }}>
            {h.headline}
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ font: "var(--t-lead)", color: "#E4D9C5", maxWidth: 540, marginTop: 22 }}>
            {h.body}
          </p>
        </Reveal>
        <Reveal delay={240} style={{ display: "flex", gap: 14, marginTop: 30, flexWrap: "wrap" }}>
          <Button as="a" href="#products">{h.ctaPrimary}</Button>
          <Button as="a" href="#contact" variant="outlineLight">{h.ctaSecondary}</Button>
        </Reveal>
      </div>
      <div style={{ position: "absolute", bottom: 26, right: 28, display: "flex", alignItems: "center", gap: 10,
        color: "var(--fg-on-dark-2)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".08em" }}>
        <span>SCROLL</span>
        <svg width="14" height="22" viewBox="0 0 14 22" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="1" y="1" width="12" height="20" rx="6"/><line x1="7" y1="5" x2="7" y2="9"/></svg>
      </div>
    </section>
  );
}
window.Hero = Hero;