/* === Hero — faux-3D extruded name with mouse-tilt parallax === */

const Marquee = ({ children, reverse = false, speed = 60 }) => {
  return (
    <div style={{
      overflow: "hidden",
      whiteSpace: "nowrap",
      maskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)"
    }}>
      <div style={{
        display: "inline-flex",
        animation: `marquee ${speed}s linear infinite ${reverse ? "reverse" : ""}`,
        gap: 64
      }}>
        {[...Array(4)].map((_, i) =>
        <span key={i} style={{ display: "inline-flex", gap: 64 }}>{children}</span>
        )}
      </div>
    </div>);

};

/* Extruded text — stacks N copies of the same text on z-axis */
const ExtrudedText = ({ text, layers = 14, accent, variant = "extrude" }) => {
  const wrapRef = React.useRef(null);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });

  React.useEffect(() => {
    const onMove = (e) => {
      const w = window.innerWidth;
      const h = window.innerHeight;
      const tx = (e.clientY / h - 0.5) * 14; // pitch
      const ty = (e.clientX / w - 0.5) * -22; // yaw
      setTilt({ x: tx, y: ty });
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  // chromatic aberration variant
  if (variant === "chroma") {
    return (
      <div ref={wrapRef} style={{
        perspective: 1400,
        width: "100%",
        display: "flex", justifyContent: "center"
      }}>
        <div style={{
          position: "relative",
          fontFamily: "var(--font-display)",
          fontWeight: 400,
          fontSize: "clamp(80px, 18vw, 320px)",
          letterSpacing: "-0.04em",
          lineHeight: 0.86,
          fontStyle: "italic",
          transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
          transition: "transform 280ms var(--ease-out-quart)",
          transformStyle: "preserve-3d"
        }}>
          <span style={{ position: "relative", display: "inline-block" }} aria-label={text}>
            <span aria-hidden="true" style={{
              position: "absolute", inset: 0,
              color: "#FF0040", mixBlendMode: "multiply",
              transform: `translate(${tilt.y * 0.4}px, 0)`
            }}>{text}</span>
            <span aria-hidden="true" style={{
              position: "absolute", inset: 0,
              color: "#00E0FF", mixBlendMode: "multiply",
              transform: `translate(${-tilt.y * 0.4}px, 0)`
            }}>{text}</span>
            <span aria-hidden="true" style={{ position: "relative", color: "var(--fg)" }}>{text}</span>
          </span>
        </div>
      </div>);

  }

  // split variant — letters drift apart
  if (variant === "split") {
    const chars = text.split("");
    return (
      <div ref={wrapRef} style={{
        perspective: 1400,
        width: "100%",
        display: "flex", justifyContent: "center"
      }}>
        <div aria-label={text} style={{
          fontFamily: "var(--font-display)",
          fontWeight: 400,
          fontSize: "clamp(80px, 18vw, 320px)",
          letterSpacing: "-0.04em",
          lineHeight: 0.86,
          fontStyle: "italic",
          color: "var(--fg)",
          transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
          transition: "transform 280ms var(--ease-out-quart)",
          transformStyle: "preserve-3d",
          display: "flex"
        }}>
          {chars.map((c, i) =>
          <span key={i} aria-hidden="true" style={{
            display: "inline-block",
            transform: `translateZ(${i % 3 * 18}px) translateY(${Math.sin(i) * 4}px)`
          }}>
              {c === " " ? "\u00a0" : c}
            </span>
          )}
        </div>
      </div>);

  }

  // default: extruded
  return (
    <div ref={wrapRef} style={{
      perspective: 1600,
      width: "100%",
      display: "flex", justifyContent: "center"
    }}>
      <div aria-label={text} style={{
        position: "relative",
        fontFamily: "var(--font-display)",
        fontWeight: 400,
        fontSize: "clamp(80px, 17vw, 300px)",
        letterSpacing: "-0.045em",
        lineHeight: 0.86,
        fontStyle: "italic",
        transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
        transition: "transform 280ms var(--ease-out-quart)",
        transformStyle: "preserve-3d",
        whiteSpace: "nowrap"
      }}>
        {/* Extrusion layers — visually layered, hidden from AT to avoid 14× repetition */}
        {[...Array(layers)].map((_, i) => {
          const depth = layers - i;
          const t = depth / layers;
          return (
            <div key={i} aria-hidden="true" style={{
              position: "absolute",
              top: 0, left: 0,
              color: "transparent",
              WebkitTextStroke: i === 0 ? `1px var(--fg)` : "none",
              textShadow: i > 0 ?
              `${depth * 0.4}px ${depth * 0.4}px 0 rgba(15,15,14,${0.04 + t * 0.02})` :
              "none",
              transform: `translate3d(${depth * 0.5}px, ${depth * 0.5}px, ${-depth * 1.5}px)`,
              filter: i > layers - 3 ? `blur(${(layers - i) * 0.4}px)` : "none"
            }}>
              {text}
            </div>);

        })}
        {/* Front face — accent fill with thick stroke; hidden from AT (parent has aria-label) */}
        <div aria-hidden="true" style={{
          position: "relative",
          color: "var(--fg)",
          textShadow: `1px 1px 0 var(--bg), 2px 2px 0 var(--accent)`
        }}>
          {text}
        </div>
      </div>
    </div>);

};

const Hero = ({ heroVariant = "extrude" }) => {
  const [scrollY, setScrollY] = React.useState(0);
  const [time, setTime] = React.useState(new Date());

  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    const tid = setInterval(() => setTime(new Date()), 1000);
    return () => {
      window.removeEventListener("scroll", onScroll);
      clearInterval(tid);
    };
  }, []);

  const berlinFormatter = new Intl.DateTimeFormat("de-DE", {
    hour: "2-digit",
    minute: "2-digit",
    timeZone: "Europe/Berlin",
    timeZoneName: "short",
  });
  const parts = berlinFormatter.formatToParts(time);
  const hh = parts.find(p => p.type === "hour")?.value || "00";
  const mm = parts.find(p => p.type === "minute")?.value || "00";
  const tzName = parts.find(p => p.type === "timeZoneName")?.value || "";
  const localTime = `${hh}:${mm}`;

  return (
    <section style={{
      position: "relative",
      minHeight: "100vh",
      paddingTop: 96,
      paddingBottom: 64,
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      overflow: "hidden"
    }}>
      {/* Top meta row */}
      <div className="grid" style={{ marginTop: 24 }}>
        <div className="mono" style={{ gridColumn: "1 / span 3", color: "var(--fg-muted)" }}>(01) — BRANDING

        </div>
        <div className="mono" style={{ gridColumn: "4 / span 3", color: "var(--fg-muted)" }}>
          Aktuell — drei Projekte aktiv
        </div>
        <div className="mono" style={{ gridColumn: "7 / span 3", color: "var(--fg-muted)" }}>OFFEN FÜR NEUE PROJEKTE

        </div>
        <div className="mono" style={{ gridColumn: "10 / span 3", color: "var(--fg-muted)", textAlign: "right" }}>
          {localTime} {tzName}
        </div>
      </div>

      {/* Centered name — the moment */}
      <div style={{
        flex: 1,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        position: "relative",
        margin: "48px 0"
      }}>
        {/* corner ticks */}
        <Tick pos="tl" />
        <Tick pos="tr" />
        <Tick pos="bl" />
        <Tick pos="br" />

        <div style={{
          transform: `translateY(${-scrollY * 0.18}px)`,
          willChange: "transform"
        }}>
          <ExtrudedText text="Omnia" accent="var(--accent)" variant={heroVariant} />
          <div style={{ height: 8 }} />
          <ExtrudedText text="Core®" accent="var(--accent)" variant={heroVariant} />
        </div>

        {/* Float chip top-right of name */}
        <div className="desktop-only" style={{
          position: "absolute",
          top: "12%",
          right: "8%",
          transform: `translateY(${-scrollY * 0.32}px) rotate(6deg)`,
          willChange: "transform"
        }}>
          <Stamp />
        </div>

        {/* Float chip bottom-left */}
        <div className="mono desktop-only" style={{
          position: "absolute",
          bottom: "10%",
          left: "8%",
          maxWidth: 240,
          color: "var(--fg-muted)",
          transform: `translateY(${-scrollY * 0.1}px)`
        }}>
          <span aria-hidden="true">↘ </span>Fachinformatiker.<br />
          Spezialisiert auf Webseiten,<br />
          SaaS-Produkte und<br />
          KI-Automatisierung.
        </div>
      </div>

      {/* Bottom row — discipline + scroll cue */}
      <div className="grid" style={{ alignItems: "end" }}>
        <div style={{ gridColumn: "1 / span 6" }}>
          <div className="mono" style={{ color: "var(--fg-muted)", marginBottom: 12 }}>
            <span aria-hidden="true">↳ </span>Was ich mache
          </div>
          <div style={{
            fontFamily: "var(--font-text)",
            fontSize: "clamp(20px, 1.6vw, 28px)",
            lineHeight: 1.18,
            letterSpacing: "-0.01em",
            maxWidth: "34ch"
          }}>
            Hi, ich bin Sven. Ich baue dir Webseiten, SaaS-Produkte
            und KI-Automatisierungen, die echten Mehrwert liefern —
            statt nur in der Demo gut auszusehen.
          </div>
        </div>

        <div style={{ gridColumn: "10 / span 3", textAlign: "right" }}>
          <div className="mono" style={{ color: "var(--fg-muted)", marginBottom: 12 }}>
            Scroll
          </div>
          <div style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 12,
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            letterSpacing: "0.06em",
            textTransform: "uppercase"
          }}>
            <ScrollGlyph />
            <span>
</span>
          </div>
        </div>
      </div>

      {/* Bottom marquee */}
      <div style={{ marginTop: 56, borderTop: "1px solid var(--rule)", paddingTop: 18, paddingBottom: 4 }}>
        <Marquee speed={80}>
          <span className="mono" aria-hidden="true" style={{ color: "var(--fg)" }}>★</span>
          <span className="mono">Webentwicklung</span>
          <span className="mono" aria-hidden="true" style={{ color: "var(--fg-muted)" }}>—</span>
          <span className="mono">SaaS-Produkte</span>
          <span className="mono" aria-hidden="true" style={{ color: "var(--fg-muted)" }}>—</span>
          <span className="mono" style={{ color: "var(--accent)" }}>KI-Automatisierung</span>
          <span className="mono" aria-hidden="true" style={{ color: "var(--fg-muted)" }}>—</span>
          <span className="mono">Netzwerk & IT</span>
          <span className="mono" aria-hidden="true" style={{ color: "var(--fg-muted)" }}>—</span>
          <span className="mono">Next.js · TypeScript · Postgres · Claude</span>
          <span className="mono" aria-hidden="true" style={{ color: "var(--fg-muted)" }}>—</span>
        </Marquee>
      </div>
    </section>);
};

const Tick = ({ pos }) => {
  const styles = {
    tl: { top: 24, left: "var(--pad)", borderTop: "1px solid var(--accent)", borderLeft: "1px solid var(--accent)" },
    tr: { top: 24, right: "var(--pad)", borderTop: "1px solid var(--accent)", borderRight: "1px solid var(--accent)" },
    bl: { bottom: 24, left: "var(--pad)", borderBottom: "1px solid var(--accent)", borderLeft: "1px solid var(--accent)" },
    br: { bottom: 24, right: "var(--pad)", borderBottom: "1px solid var(--accent)", borderRight: "1px solid var(--accent)" }
  };
  return (
    <div style={{
      position: "absolute",
      width: 20, height: 20,
      ...styles[pos]
    }} />);

};

const Stamp = () => {
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    v.playsInline = true;
    const tryPlay = () => {
      v.currentTime = 0;
      const p = v.play();
      if (p && p.catch) p.catch(() => {});
    };
    tryPlay();
  }, []);

  const replay = () => {
    const v = videoRef.current;
    if (!v) return;
    v.currentTime = 0;
    const p = v.play();
    if (p && p.catch) p.catch(() => {});
  };

  return (
    <div
      onMouseEnter={replay}
      data-cursor="Hi"
      aria-hidden="true"
      style={{
        width: 220, height: 220,
        borderRadius: "50%",
        position: "relative",
        overflow: "hidden",
        border: "1px solid var(--accent)",
        background: "var(--bg)",
        boxShadow: "0 24px 48px -16px rgba(15,15,14,0.25)"
      }}>
      <video
        ref={videoRef}
        src="Scene.mp4"
        muted
        playsInline
        preload="auto"
        style={{
          width: "100%", height: "100%",
          objectFit: "cover",
          display: "block"
        }} />
      
      {/* Orbiting label ring — decorative */}
      <svg viewBox="0 0 220 220" focusable="false" aria-hidden="true" style={{
        position: "absolute", inset: 0,
        pointerEvents: "none",
        animation: "spin 22s linear infinite",
        mixBlendMode: "difference"
      }}>
        <defs>
          <path id="circ" d="M 110, 110 m -98, 0 a 98,98 0 1,1 196,0 a 98,98 0 1,1 -196,0" />
        </defs>
        <text fill="#F2F0EB" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="3">
          <textPath href="#circ">
            ★ OFFEN FÜR PROJEKTE · MÜNCHEN · OFFEN FÜR PROJEKTE ·
          </textPath>
        </text>
      </svg>
    </div>);

};

const ScrollGlyph = () =>
<div style={{
  width: 18, height: 28,
  border: "1px solid var(--fg)",
  borderRadius: 9,
  position: "relative"
}}>
    <span style={{
    position: "absolute",
    top: 6, left: "50%",
    width: 2, height: 6,
    background: "var(--accent)",
    transform: "translateX(-50%)",
    animation: "scrollDot 1.6s ease-in-out infinite"
  }} />
  </div>;


window.Hero = Hero;
window.Marquee = Marquee;