// Hero — full-bleed photo with dark scrim and left-aligned light text.
// Mirrors components/home/header-05 pattern from the Relume export.

function Hero({ eyebrow, title, body, primaryLabel = "Enquire Now", secondaryLabel, image, imageFocus, onPrimary, onSecondary }) {
  const heroRef = useRef(null);
  const imgRef = useRef(null);
  // Fade the photo in over a dark brand panel so there is no grey scrim-over-
  // empty flash while it downloads. Cached images can finish before React
  // attaches onLoad, so sync from .complete on mount too.
  const [imgLoaded, setImgLoaded] = useState(false);
  useEffect(() => {
    const el = imgRef.current;
    if (el && el.complete && el.naturalWidth > 0) setImgLoaded(true);
  }, []);
  const scrollToNext = () => {
    const next = heroRef.current && heroRef.current.nextElementSibling;
    if (next) next.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <section ref={heroRef} style={{ position: "relative", padding: "0 5%", minHeight: "100vh", display: "flex", alignItems: "center" }}>
      {/* Background image + scrim. Dark ink panel sits behind so the loading
          state reads as an on-brand dark panel, not a grey flash. */}
      <div style={{ position: "absolute", inset: 0, zIndex: 0, background: "var(--kl-ink)" }}>
        <img
          ref={imgRef}
          src={image || "../../assets/images/home-hero-header-section.jpg"}
          alt=""
          fetchpriority="high"
          decoding="async"
          onLoad={() => setImgLoaded(true)}
          className="kl-hero-img"
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: imageFocus || "center", opacity: imgLoaded ? 1 : 0, transition: "opacity 0.6s ease" }}
        />
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(90deg, rgba(28,24,32,0.64) 0%, rgba(28,24,32,0.44) 34%, rgba(28,24,32,0.18) 68%, rgba(28,24,32,0.04) 100%), linear-gradient(0deg, rgba(28,24,32,0.22) 0%, rgba(28,24,32,0.04) 46%, rgba(28,24,32,0.18) 100%)"
        }} />
      </div>

      {/* Content */}
      <div style={{ position: "relative", zIndex: 1, maxWidth: "var(--kl-container)", marginInline: "auto", width: "100%", padding: "112px 0" }}>
        <div style={{ maxWidth: 620, color: "#fff" }}>
          {eyebrow && (
            <p className="kl-eyebrow kl-eyebrow--on-photo kl-rise kl-rise-1">{eyebrow}</p>
          )}
          <h1 className="kl-rise kl-rise-2" style={{ fontSize: "var(--kl-text-h1)", color: "#fff", marginBottom: 24, textShadow: "0 3px 26px rgba(49,41,54,0.26)" }}>
            {title}
          </h1>
          <p className="kl-rise kl-rise-3" style={{ fontSize: "var(--kl-text-medium)", color: "#fff", lineHeight: 1.6, opacity: 0.95, textShadow: "0 2px 18px rgba(49,41,54,0.28)" }}>
            {body}
          </p>
          <div className="kl-rise kl-rise-4" style={{ marginTop: 32, display: "flex", gap: 16, flexWrap: "wrap" }}>
            <Button variant="primary" onClick={onPrimary || scrollToContact}>{primaryLabel}</Button>
            {secondaryLabel && (
              <Button variant="secondary" onClick={onSecondary}>{secondaryLabel}</Button>
            )}
          </div>
        </div>
      </div>

      {/* Scroll-down cue → next section (audience cards on home) */}
      <button type="button" className="kl-hero-scroll" onClick={scrollToNext} aria-label="Scroll to content">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="6 9 12 15 18 9" />
        </svg>
      </button>
    </section>
  );
}

window.Hero = Hero;