function MazzuHero() {
  const M = window.Motion || {};
  const motion = M.motion;

  const ClockIcon = (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <polyline points="12 7 12 12 15.5 13.8"/>
    </svg>
  );
  const GlobeIcon = (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <path d="M3 12h18"/>
      <path d="M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18z"/>
    </svg>
  );

  const fadeIn = (delay) => ({
    initial: { filter: "blur(10px)", opacity: 0, y: 20 },
    animate: { filter: "blur(0px)", opacity: 1, y: 0 },
    transition: { duration: 0.8, delay, ease: "easeOut" }
  });

  const Wrap = motion ? motion.div : "div";

  return (
    <section style={{
      position: "relative", minHeight: "100vh", overflow: "hidden",
      background: "#000"
    }}>
      {/* Background video — cycling loops with crossfade */}
      <HeroVideoLoop />


      {/* Soft side+bottom darken so text+chrome stays readable, no full vignette */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 1,
        background: "linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.45) 100%)"
      }}/>
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, height: 240,
        background: "linear-gradient(to top, #000 0%, transparent 100%)",
        zIndex: 2
      }}/>

      {/* Content layer */}
      <div style={{
        position: "relative", zIndex: 10,
        display: "flex", flexDirection: "column",
        minHeight: "100vh",
        maxWidth: 1400,
        margin: "0 auto",
        padding: "clamp(132px, 14vw, 168px) clamp(20px, 5vw, 64px) 32px"
      }}>
        {/* Top: badge */}
        <Wrap {...(motion ? fadeIn(0.4) : {})}
              className="liquid-glass"
              style={{
                display: "inline-flex", alignSelf: "flex-start",
                alignItems: "center", gap: 10,
                padding: 4, borderRadius: 9999,
                marginBottom: 32
              }}>
          <span style={{
            background: "white", color: "black",
            padding: "5px 12px", borderRadius: 9999,
            fontSize: 11, fontWeight: 700, letterSpacing: "0.2px"
          }}>NEU</span>
          <span style={{
            fontSize: 13, color: "hsla(0,0%,100%,0.92)", paddingRight: 14
          }}>Herbst·Winter 26 ist da — Termine offen</span>
        </Wrap>

        {/* Headline — BlurText, left-aligned now */}
        <div style={{ maxWidth: 820 }}>
          <window.BlurText
            text="Stil beginnt mit einem Gespräch."
            className="font-heading"
            style={{
              fontStyle: "italic",
              color: "white",
              fontSize: "clamp(52px, 8.2vw, 116px)",
              lineHeight: 0.88,
              letterSpacing: "-3.5px",
              textAlign: "left",
              justifyContent: "flex-start",
              fontWeight: 400,
              margin: 0,
              maxWidth: 820
            }}
            startDelay={0.2}
          />
        </div>

        {/* Subhead */}
        <Wrap {...(motion ? fadeIn(0.8) : {})}
              className="font-body"
              style={{
                marginTop: 24,
                maxWidth: 540,
                fontSize: 15,
                fontWeight: 300,
                lineHeight: 1.5,
                color: "white",
                textWrap: "pretty"
              }}>
          Seit 2009 nehmen wir uns Zeit für eine Sache: dich gut anzuziehen. Über 25 kuratierte Labels, eine Bar im Store — und Beratung auf Termin, auch außerhalb der Öffnungszeiten.
        </Wrap>

        {/* CTAs */}
        <Wrap {...(motion ? fadeIn(1.1) : {})} style={{
          display: "flex", alignItems: "center", gap: 24, marginTop: 28, flexWrap: "wrap"
        }}>
          <a href="#kontakt" className="liquid-glass-strong" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "11px 22px", borderRadius: 9999,
            color: "white", fontWeight: 500, fontSize: 14,
            textDecoration: "none"
          }}>
            Termin vereinbaren
            <window.ArrowUpRight size={18}/>
          </a>
          <a href="#story" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            color: "white", fontWeight: 400, fontSize: 14,
            textDecoration: "none"
          }}>
            Matthias kennenlernen
            <window.PlayIcon size={14}/>
          </a>
        </Wrap>

        {/* Stats row */}
        <Wrap {...(motion ? fadeIn(1.3) : {})} style={{
          display: "flex", gap: 16, marginTop: 36, flexWrap: "wrap"
        }}>
          <div className="liquid-glass" style={{
            padding: 20, width: 220, borderRadius: 20,
            display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 14
          }}>
            <span style={{ color: "white" }}>{ClockIcon}</span>
            <div>
              <div className="font-heading" style={{
                fontStyle: "italic", fontSize: 36, lineHeight: 1, letterSpacing: "-1px",
                color: "white"
              }}>1:1</div>
              <div className="font-body" style={{
                fontSize: 12, color: "white", fontWeight: 300, marginTop: 8
              }}>Persönliche Stilberatung</div>
            </div>
          </div>

          <div className="liquid-glass" style={{
            padding: 20, width: 220, borderRadius: 20,
            display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 14
          }}>
            <span style={{ color: "white" }}>{GlobeIcon}</span>
            <div>
              <div className="font-heading" style={{
                fontStyle: "italic", fontSize: 36, lineHeight: 1, letterSpacing: "-1px",
                color: "white"
              }}>25+ Labels</div>
              <div className="font-body" style={{
                fontSize: 12, color: "white", fontWeight: 300, marginTop: 8
              }}>Kuratiert · International</div>
            </div>
          </div>
        </Wrap>

        {/* Spacer */}
        <div style={{ flex: 1, minHeight: 40 }}/>

        {/* Partners row */}
        <Wrap {...(motion ? fadeIn(1.4) : {})} style={{
          display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 14,
          paddingBottom: 12,
          maxWidth: 720
        }}>
          <div className="liquid-glass" style={{
            padding: "6px 16px", borderRadius: 9999,
            fontSize: 11, color: "white", fontWeight: 500, letterSpacing: "0.3px"
          }}>
            Kuratierte Designer-Labels — eine Auswahl
          </div>
          <div className="font-heading" style={{
            display: "flex", alignItems: "center", flexWrap: "wrap",
            gap: "12px 36px",
            fontStyle: "italic", color: "white",
            fontSize: "clamp(18px, 2.4vw, 28px)",
            letterSpacing: "-0.5px",
            opacity: 0.95
          }}>
            <span>Stone Island</span>
            <span>Isabel Marant</span>
            <span>MM6</span>
            <span>A.P.C.</span>
            <span>Veilance</span>
          </div>
        </Wrap>
      </div>

      <style>{`
        @media (max-width: 800px) {
          /* hero responsive tweaks (none currently needed) */
        }
      `}</style>
    </section>
  );
}

// Inline icon components
function ArrowUpRight({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="7" y1="17" x2="17" y2="7"/>
      <polyline points="7 7 17 7 17 17"/>
    </svg>
  );
}
function PlayIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" stroke="none">
      <polygon points="6 4 20 12 6 20 6 4"/>
    </svg>
  );
}

// Hero background: three videos crossfading, each plays through then hands off.
function HeroVideoLoop() {
  const { useState, useEffect, useRef } = React;
  const sources = [
    "images/hero-loop-1.mp4",
    "images/hero-loop-2.mp4",
    "images/hero-loop-3.mp4"
  ];
  const [active, setActive] = useState(0);
  const refs = useRef([]);

  // When a video ends, fade to the next one (and start playing it from the top).
  const handleEnded = (i) => {
    const next = (i + 1) % sources.length;
    const nextEl = refs.current[next];
    if (nextEl) {
      try { nextEl.currentTime = 0; nextEl.play().catch(() => {}); } catch (e) {}
    }
    setActive(next);
  };

  // Kick off first video on mount, defensively (autoplay attribute already does this).
  useEffect(() => {
    const el = refs.current[0];
    if (el) { el.play().catch(() => {}); }
  }, []);

  const baseStyle = {
    position: "absolute",
    left: "50%", top: 0,
    transform: "translateX(-50%)",
    width: "120%", height: "120%",
    objectFit: "cover",
    objectPosition: "top center",
    transition: "opacity 1.2s ease-in-out",
    willChange: "opacity"
  };

  return (
    <div style={{ position: "absolute", inset: 0, zIndex: 0, overflow: "hidden", background: "#000" }}>
      {sources.map((src, i) => (
        <video
          key={src}
          ref={(el) => { refs.current[i] = el; }}
          autoPlay={i === 0}
          muted
          playsInline
          preload="auto"
          onEnded={() => handleEnded(i)}
          style={{ ...baseStyle, opacity: active === i ? 1 : 0, zIndex: active === i ? 1 : 0 }}
          src={src}
        />
      ))}
    </div>
  );
}

window.MazzuHero = MazzuHero;
window.HeroVideoLoop = HeroVideoLoop;
window.ArrowUpRight = ArrowUpRight;
window.PlayIcon = PlayIcon;