// Hero — premium luxury full-bleed hero with cinematic overlays, CTAs and reveal.

const HERO_VIDEO  = "https://res.cloudinary.com/dzney3ngo/video/upload/q_auto/f_auto/v1775378157/nanobanana_veo31lite_20260404_190812_1_rhri1a.mp4";
const HERO_POSTER = "https://res.cloudinary.com/dzney3ngo/video/upload/so_0,f_auto,q_auto:eco,w_1280/v1775378157/nanobanana_veo31lite_20260404_190812_1_rhri1a.jpg";

const Hero = ({ c, isMobile, lang }) => {
  const isHe = lang === "he";
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    const id = requestAnimationFrame(() => setMounted(true));
    return () => cancelAnimationFrame(id);
  }, []);

  const reveal = (delay) => ({
    opacity: mounted ? 1 : 0,
    transform: mounted ? "translateY(0)" : "translateY(24px)",
    transition: `opacity 1s var(--laad-ease-out) ${delay}s, transform 1s var(--laad-ease-out) ${delay}s`,
  });

  return (
    <section
      aria-label={isHe ? "אזור פתיחה" : "Hero"}
      style={{
        position: "relative",
        width: "100%",
        height: isMobile ? "100svh" : "100vh",
        minHeight: isMobile ? 600 : 720,
        maxHeight: isMobile ? 900 : 1080,
        overflow: "hidden",
        background: "#0a0a0a",
      }}
    >
      {/* Full-bleed product video with subtle Ken Burns */}
      <video
        src={HERO_VIDEO}
        poster={HERO_POSTER}
        autoPlay muted loop playsInline preload="metadata"
        aria-hidden="true"
        style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%",
          objectFit: "cover",
          objectPosition: "center",
          filter: "brightness(0.72) saturate(0.95) contrast(1.05)",
          transform: mounted ? "scale(1.02)" : "scale(1.10)",
          transition: "transform 8s var(--laad-ease-out)",
        }}
      />

      {/* Layered overlays — depth + readability + warm gold tint */}
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.10) 30%, rgba(10,10,10,0.20) 65%, rgba(10,10,10,0.75) 100%)",
        pointerEvents: "none",
      }} />
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 80% 60% at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%)",
        pointerEvents: "none",
      }} />
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(circle at 50% 38%, rgba(230,207,149,0.10) 0%, rgba(230,207,149,0) 55%)",
        mixBlendMode: "screen",
        pointerEvents: "none",
      }} />

      {/* Centered content */}
      <div style={{
        position: "relative",
        zIndex: 2,
        height: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        textAlign: "center",
        padding: isMobile ? "0 24px" : "0 56px",
        color: "#fff",
      }}>
        <h1 style={{
          fontFamily: isHe ? "'Frank Ruhl Libre', serif" : "'Playfair Display', 'Cormorant Garamond', serif",
          fontSize: isMobile ? "clamp(44px, 12vw, 72px)" : "clamp(72px, 7.4vw, 128px)",
          fontWeight: isHe ? 600 : 500,
          lineHeight: 1.02,
          letterSpacing: "-0.02em",
          margin: 0,
          textShadow: "0 4px 40px rgba(0,0,0,0.5)",
          maxWidth: 1100,
          ...reveal(0.20),
        }}>
          {c.hero.title}
        </h1>

        {/* Decorative gold divider under headline */}
        <div aria-hidden style={{
          width: 64, height: 1,
          background: "var(--laad-gold-shine)",
          backgroundSize: "200% 100%",
          margin: isMobile ? "28px auto 24px" : "40px auto 32px",
          opacity: mounted ? 1 : 0,
          transform: mounted ? "scaleX(1)" : "scaleX(0)",
          transformOrigin: "center",
          transition: "transform 0.9s var(--laad-ease-out) 0.45s, opacity 0.9s var(--laad-ease-out) 0.45s",
        }} />

        <p style={{
          fontFamily: "'Heebo','Inter',sans-serif",
          fontSize: isMobile ? 15 : 17,
          lineHeight: 1.75,
          fontWeight: 300,
          margin: 0,
          maxWidth: isMobile ? "100%" : 680,
          color: "rgba(255,255,255,0.86)",
          textWrap: "pretty",
          ...reveal(0.32),
        }}>
          {c.hero.lede}
        </p>

        {/* CTAs */}
        <div style={{
          display: "flex",
          flexDirection: isMobile ? "column" : "row",
          gap: isMobile ? 12 : 16,
          marginTop: isMobile ? 36 : 52,
          alignItems: "center",
          ...reveal(0.45),
        }}>
          <a href="#products" className="laad-btn laad-btn--gold"
             style={{ minWidth: isMobile ? 220 : 0 }}>
            <span>{c.hero.cta1 || (isHe ? "לקטלוג המלא" : "View collection")}</span>
            <span aria-hidden style={{
              display: "inline-block",
              transform: isHe ? "scaleX(-1) translateX(0)" : "translateX(0)",
              fontSize: 18, lineHeight: 1,
            }}>›</span>
          </a>
          <a href="#custom" className="laad-btn laad-btn--ghost"
             style={{ minWidth: isMobile ? 220 : 0 }}>
            <span>{c.hero.cta2 || (isHe ? "תהליך ההזמנה" : "Our process")}</span>
          </a>
        </div>
      </div>

      {/* Scroll indicator */}
      <a href="#products" aria-label={isHe ? "גלול לקולקציה" : "Scroll to collection"}
         style={{
           position: "absolute",
           bottom: isMobile ? 22 : 32,
           left: "50%",
           transform: "translateX(-50%)",
           zIndex: 3,
           display: isMobile ? "none" : "inline-flex",
           flexDirection: "column", alignItems: "center", gap: 10,
           color: "rgba(255,255,255,0.7)",
           opacity: mounted ? 1 : 0,
           transition: "opacity 1s var(--laad-ease-out) 0.85s",
         }}>
        <span style={{
          fontFamily: "'Inter',sans-serif",
          fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase",
        }}>{isHe ? "גלול" : "Scroll"}</span>
        <span aria-hidden style={{
          position: "relative",
          width: 20, height: 32,
          border: "1px solid rgba(255,255,255,0.5)",
          borderRadius: 999,
        }}>
          <span style={{
            position: "absolute",
            top: 6, left: "50%",
            transform: "translateX(-50%)",
            width: 2, height: 6,
            borderRadius: 2,
            background: "var(--laad-gold-soft)",
            animation: "laadScrollDown 1.8s var(--laad-ease) infinite",
          }} />
        </span>
      </a>
    </section>
  );
};

window.Laad_Hero = Hero;
window.Laad_Marquee = () => null;
window.Laad_Story = window.Laad_Story || (() => null);