/* Navbar, Hero, Stats, MacBook, Services */

function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const items = [
    ["Leistungen", "#leistungen"],
    ["Projekte", "#projekte"],
    ["Intraware", "#intraware"],
    ["Preise", "#preise"],
    ["Webseiten-Analyse", "analyse.html"],
    ["Kontakt", "#kontakt"],
  ];
  return (
    <>
      <div className="fixed top-4 left-0 right-0 z-50 px-4">
        <nav
          className={`mx-auto max-w-[1200px] rounded-2xl flex items-center justify-between px-3 sm:px-4 py-2.5 transition-colors duration-300 ${scrolled ? "bg-black/70" : "bg-black/40"}`}
          style={{ border: "1px solid var(--border-subtle)", backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)" }}
        >
          <a href="#top" className="flex items-center gap-2.5 pl-1.5">
            <img src="logo-transparent.png" alt="Scality Solutions" className="h-7 w-auto"  />
          </a>
          <div className="hidden md:flex items-center gap-1">
            {items.map(([label, href]) => (
              <a key={href} href={href} className="px-3.5 py-2 text-[13.5px] text-white/75 hover:text-white transition-colors rounded-full">
                {label}
              </a>
            ))}
          </div>
          <div className="hidden md:block">
            <PrimaryButton href="#kontakt" size="sm" magnet={false}>Erstgespräch buchen</PrimaryButton>
          </div>
          <button onClick={() => setOpen(true)} className="md:hidden p-2 text-white" aria-label="Menü öffnen">
            <Menu size={22} />
          </button>
        </nav>
      </div>

      {/* Mobile overlay */}
      {open && (
        <div className="fixed inset-0 z-[60] bg-black/95 backdrop-blur-xl md:hidden flex flex-col">
          <div className="flex items-center justify-between p-5">
            <img src="logo-transparent.png" alt="Scality" className="h-7"  />
            <button onClick={() => setOpen(false)} className="p-2" aria-label="Menü schließen"><X size={22} /></button>
          </div>
          <div className="flex-1 flex flex-col justify-center px-8 gap-2">
            {items.map(([label, href]) => (
              <a key={href} href={href} onClick={() => setOpen(false)} className="text-3xl font-bold tracking-tight py-3 border-b border-white/[0.06]">
                {label}
              </a>
            ))}
            <div className="mt-8">
              <PrimaryButton href="#kontakt" size="lg" magnet={false} onClick={() => setOpen(false)}>Erstgespräch buchen</PrimaryButton>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function GoogleG({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.6-6 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.7 1.1 7.8 3l5.7-5.7C34 6.5 29.3 4.5 24 4.5 12.7 4.5 3.5 13.7 3.5 25S12.7 45.5 24 45.5 44.5 36.3 44.5 25c0-1.5-.2-3-.5-4.5z"/>
      <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.6 16 19 13 24 13c3 0 5.7 1.1 7.8 3l5.7-5.7C34 6.5 29.3 4.5 24 4.5 16.3 4.5 9.7 8.6 6.3 14.7z"/>
      <path fill="#4CAF50" d="M24 45.5c5.2 0 9.9-2 13.4-5.2l-6.2-5.2c-2 1.4-4.5 2.4-7.2 2.4-5.3 0-9.7-3.4-11.3-8l-6.5 5C9.7 41.4 16.3 45.5 24 45.5z"/>
      <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.2 4.3-4.1 5.6l6.2 5.2c-.4.3 6.6-4.8 6.6-13.8 0-1.5-.2-3-.5-4.5z"/>
    </svg>
  );
}

function HeroFloatingCard({ icon: Icon, value, label, className, animClass, accent }) {
  const accentColor = accent || "var(--accent-blue)";
  return (
    <div className={`absolute rounded-2xl px-4 py-3 flex items-center gap-3 ${animClass} ${className}`}
      style={{
        background: "linear-gradient(160deg, rgba(20,22,30,0.96), rgba(14,16,22,0.96))",
        border: "1px solid rgba(255,255,255,0.18)",
        boxShadow: `0 20px 50px -10px rgba(0,0,0,0.85), 0 0 30px -10px ${accentColor}`,
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
      }}>
      <div className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0" style={{
        background: `linear-gradient(135deg, ${accentColor}33, ${accentColor}11)`,
        color: accentColor,
        boxShadow: `inset 0 0 20px ${accentColor}22, 0 4px 14px -4px ${accentColor}66`,
        border: `1px solid ${accentColor}44`,
      }}>
        <Icon size={20} />
      </div>
      <div className="leading-tight">
        <div className="font-extrabold text-[15.5px] tracking-tight text-white">{value}</div>
        <div className="text-[12px] text-white/65 font-medium">{label}</div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section id="top" className="relative pt-28 sm:pt-24 pb-16 sm:pb-24 overflow-hidden">
      <div className="hero-glow" />

      {/* Decorative grid pattern in background */}
      <div className="absolute inset-0 opacity-[0.06] pointer-events-none" style={{
        backgroundImage: "linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
        backgroundSize: "64px 64px",
        maskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
        WebkitMaskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
      }} />

      <div className="relative max-w-[1280px] mx-auto px-5">
        <div className="grid lg:grid-cols-[1.05fr_1fr] gap-10 lg:gap-12 items-center min-h-[78vh]">

          {/* LEFT: Headline + CTA */}
          <div className="relative z-10 text-center lg:text-left">
            <h1 className="h-display text-[48px] sm:text-[68px] lg:text-[84px] hero-anim-1">
              Digitalisierung,<br/>die <span className="hero-accent-text">einfach passt.</span>
            </h1>
            <p className="mt-6 text-[17px] sm:text-[19px] leading-relaxed text-white/70 max-w-xl mx-auto lg:mx-0 hero-anim-2" style={{ fontWeight: 500 }}>
              Webseiten und Software für Handwerk, Immobilien & Elektrotechnik — mit Funnels, die Anfragen und Bewerber bringen.
            </p>
            <div className="mt-7 flex flex-wrap items-center justify-center lg:justify-start gap-3 hero-anim-3">
              <PrimaryButton href="#kontakt" size="lg">Kostenloses Erstgespräch <ArrowRight size={16} /></PrimaryButton>
              <GhostButton href="#projekte" size="lg">Projekte ansehen</GhostButton>
            </div>

            {/* Trust badges */}
            <div className="mt-7 flex flex-wrap items-center justify-center lg:justify-start gap-3 hero-anim-4">
              <div className="glass rounded-full pl-3 pr-4 py-2 flex items-center gap-2.5">
                <GoogleG size={16} />
                <div className="flex items-center gap-0.5">
                  {[0,1,2,3,4].map(i => (
                    <Star key={i} size={13} style={{ color: "#f5b400", fill: "#f5b400" }} strokeWidth={1} />
                  ))}
                </div>
                <span className="text-[12.5px] text-white/80 font-medium">5.0 / 5.0 auf Google</span>
              </div>
              <div className="glass rounded-full pl-3 pr-4 py-2 flex items-center gap-2.5">
                <ShieldCheck size={16} style={{ color: "var(--accent-blue)" }} />
                <span className="text-[12.5px] text-white/80 font-medium">Zertifizierter Digitalisierungsberater</span>
              </div>
            </div>
          </div>

          {/* RIGHT: Photo with gradient + floating cards */}
          <div className="relative">
            {/* 3D rotating wireframe object behind */}
            <div className="absolute inset-0 -z-10 flex items-center justify-center pointer-events-none" aria-hidden="true">
              <div className="hero-3d-stage">
                <div className="hero-3d-cube">
                  <span className="cube-face cube-front" />
                  <span className="cube-face cube-back" />
                  <span className="cube-face cube-right" />
                  <span className="cube-face cube-left" />
                  <span className="cube-face cube-top" />
                  <span className="cube-face cube-bottom" />
                </div>
              </div>
              {/* Orbiting particle dots */}
              <div className="hero-orbit hero-orbit-1">
                <span />
              </div>
              <div className="hero-orbit hero-orbit-2">
                <span />
              </div>
            </div>
            <div className="relative mx-auto" style={{ maxWidth: 620 }}>
              <div className="relative flex items-end justify-center" style={{ minHeight: "min(72vh, 640px)" }}>

                {/* Layered glow stack */}
                <div className="absolute inset-0 -z-10 flex items-center justify-center pointer-events-none">
                  {/* Big aurora gradient blob */}
                  <div className="absolute w-[110%] h-[90%] rounded-full" style={{
                    background: "radial-gradient(closest-side, rgba(21,185,250,0.55), rgba(21,185,250,0) 65%)",
                    filter: "blur(50px)",
                    transform: "translate(-5%, 0)",
                  }} />
                  {/* Secondary purple/cyan glow */}
                  <div className="absolute w-[80%] h-[60%] rounded-full" style={{
                    background: "radial-gradient(closest-side, rgba(124,58,237,0.30), rgba(124,58,237,0) 70%)",
                    filter: "blur(60px)",
                    transform: "translate(20%, -10%)",
                  }} />
                </div>

                {/* Conic gradient ring behind */}
                <div className="absolute inset-0 -z-10 flex items-center justify-center pointer-events-none">
                  <div className="rounded-full opacity-30" style={{
                    width: "85%", height: "85%",
                    background: "conic-gradient(from 200deg at 50% 50%, rgba(21,185,250,0.5), rgba(124,58,237,0.4), rgba(21,185,250,0), rgba(21,185,250,0.4))",
                    filter: "blur(40px)",
                  }} />
                </div>

                <div className="relative" style={{
                  borderRadius: "40px",
                  overflow: "hidden",
                  height: "min(72vh, 640px)",
                  WebkitMaskImage: "-webkit-radial-gradient(white, black)",
                }}>
                  <img
                    src="team-photo.png"
                    alt="Fabi und Laurin"
                    className="relative w-auto object-contain drop-shadow-[0_40px_80px_rgba(0,0,0,0.7)]"
                    style={{
                      maxHeight: "min(72vh, 640px)",
                      height: "min(72vh, 640px)",
                      borderRadius: "40px",
                      display: "block",
                    }}
                  />
                </div>

                {/* Floating cards */}
                <HeroFloatingCard
                  icon={TrendingUp}
                  value="+47% Anfragen"
                  label="im Schnitt nach Launch"
                  className="top-6 left-0 sm:-left-8"
                  animClass="float-a"
                  accent="#15B9FA"
                />
                <HeroFloatingCard
                  icon={UserPlus}
                  value="3× Bewerber"
                  label="durch Recruiting-Funnels"
                  className="top-16 right-0 sm:-right-6"
                  animClass="float-b"
                  accent="#B59CFF"
                />
                <HeroFloatingCard
                  icon={Calendar}
                  value="2–4 Wochen"
                  label="Setup-Phase"
                  className="bottom-32 left-0 sm:-left-10"
                  animClass="float-c"
                  accent="#15B9FA"
                />
                <HeroFloatingCard
                  icon={Zap}
                  value="< 24h"
                  label="Reaktionszeit"
                  className="bottom-20 right-0 sm:-right-8"
                  animClass="float-d"
                  accent="#FFB94A"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsStrip() {
  const ref = useReveal();
  const items = [
    { value: 25, suffix: "+", label: "abgeschlossene Projekte" },
    { value: 25, suffix: "+", label: "glückliche Kunden" },
    { value: 5, suffix: "", label: "Jahre Erfahrung" },
    { value: 24, prefix: "<", suffix: "h", label: "Reaktionszeit" },
  ];
  return (
    <section ref={ref} className="reveal relative py-10 sm:py-14 border-y" style={{ borderColor: "var(--border-subtle)", background: "linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0))" }}>
      <div className="max-w-[1200px] mx-auto px-5 grid grid-cols-2 md:grid-cols-4 gap-y-8 gap-x-4">
        {items.map((it, i) => (
          <div key={i} className="text-center md:text-left md:px-4">
            <div className="h-tight text-[44px] sm:text-[56px]" style={{ color: "white" }}>
              <CountUp to={it.value} prefix={it.prefix || ""} suffix={it.suffix || ""} />
            </div>
            <div className="mt-1.5 text-[13.5px] text-white/55 font-medium tracking-wide">{it.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function MacBookScroll() {
  const wrapRef = useRef(null);
  const laptopRef = useRef(null);
  const phoneRef = useRef(null);
  const imgScrollRef = useRef(null);
  const glowRef = useRef(null);
  const tagRef = useRef(null);
  const captionRef = useRef(null);

  useEffect(() => {
    const vh = document.documentElement.clientHeight;
    const ease = t => 1 - Math.pow(1 - t, 3);

    const update = () => {
      const el = wrapRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const p = Math.min(1, Math.max(0, (-rect.top) / (rect.height - vh)));

      const enterT  = ease(Math.min(1, p / 0.20));
      const browseT = Math.max(0, Math.min(1, (p - 0.20) / 0.75));
      const pEnterT = ease(Math.min(1, Math.max(0, (p - 0.05) / 0.20)));

      if (laptopRef.current) {
        const y  = (1 - enterT) * 220;
        const ry = (-8 + 8 * enterT) * 0.5;
        const sc = 0.85 + 0.15 * enterT;
        laptopRef.current.style.transform = `translateY(${y}px) rotateX(6deg) rotateY(${ry}deg) scale(${sc})`;
      }
      if (phoneRef.current) {
        phoneRef.current.style.transform = `translateX(${(1 - pEnterT) * 320}px) rotate(${12 - 12 * pEnterT + 6}deg)`;
        phoneRef.current.style.opacity = pEnterT;
      }
      if (imgScrollRef.current) {
        imgScrollRef.current.style.transform = `translateY(${-browseT * 800}px)`;
      }
      if (glowRef.current) {
        const i = 0.18 * (0.4 + 0.6 * browseT);
        glowRef.current.style.background = `radial-gradient(50% 45% at 50% 55%, rgba(21,185,250,${i}) 0%, rgba(21,185,250,0) 70%)`;
      }
      if (tagRef.current)     tagRef.current.style.opacity     = enterT;
      if (captionRef.current) captionRef.current.style.opacity = browseT > 0.1 ? 1 : 0;
    };

    update();
    window.addEventListener("scroll", update, { passive: true });
    return () => window.removeEventListener("scroll", update);
  }, []);

  return (
    <section className="relative" style={{ background: "var(--bg-base)" }}>
      <div className="max-w-[1200px] mx-auto px-5 pt-24 pb-2 text-center relative z-10">
        <div className="text-[12.5px] uppercase tracking-[0.18em] text-white/40 font-semibold">Live-Showcase</div>
        <h2 className="mt-3 h-tight text-[36px] sm:text-[54px] lg:text-[64px] max-w-3xl mx-auto">
          Webseiten, die <span className="hero-accent-text">nicht aussehen</span><br/>wie alle anderen.
        </h2>
        <p className="mt-5 text-white/60 text-[16px] max-w-xl mx-auto">Scrollen Sie weiter — wir blättern eines unserer Projekte für Sie durch.</p>
      </div>
      <div ref={wrapRef} style={{ height: "300vh" }}>
        <div className="sticky top-0 h-screen flex items-center justify-center overflow-hidden">

          {/* Background grid + glow */}
          <div className="absolute inset-0 pointer-events-none" style={{
            backgroundImage: "linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)",
            backgroundSize: "48px 48px",
            maskImage: "radial-gradient(ellipse at center, black 30%, transparent 75%)",
            WebkitMaskImage: "radial-gradient(ellipse at center, black 30%, transparent 75%)",
            opacity: 0.5,
          }} />
          <div ref={glowRef} className="absolute inset-0 pointer-events-none" style={{
            background: "radial-gradient(50% 45% at 50% 55%, rgba(21,185,250,0.072) 0%, rgba(21,185,250,0) 70%)",
          }} />

          {/* DEVICE STAGE */}
          <div className="relative w-full max-w-[1200px] mx-auto px-4 flex items-center justify-center" style={{ perspective: "1800px" }}>

            {/* LAPTOP */}
            <div
              ref={laptopRef}
              className="relative"
              style={{
                width: "min(86vw, 920px)",
                transform: "translateY(220px) rotateX(6deg) rotateY(-4deg) scale(0.85)",
                transformStyle: "preserve-3d",
                willChange: "transform",
              }}
            >
              {/* Lid (back of screen) — gives the silver halo around the bezel */}
              <div className="relative mx-auto rounded-t-[14px] mb-edge"
                style={{
                  width: "100%",
                  aspectRatio: "16 / 10.4",
                  padding: "7px 7px 8px 7px",
                  boxShadow: "0 60px 100px -30px rgba(0,0,0,0.85)",
                }}
              >
                {/* Top reflective highlight along the rounded edge */}
                <div className="absolute inset-x-0 top-0 h-[3px] rounded-t-[14px]" style={{
                  background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%)",
                  filter: "blur(0.5px)",
                }} />

                {/* Screen bezel (black surround around display) */}
                <div className="w-full h-full mb-screen-bezel rounded-[6px] overflow-hidden relative" style={{
                  boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 1px rgba(0,0,0,0.6)",
                }}>
                  {/* FaceTime camera */}
                  <div className="absolute top-[3px] left-1/2 -translate-x-1/2 flex items-center gap-1 z-30">
                    <span className="w-[4px] h-[4px] rounded-full" style={{
                      background: "radial-gradient(circle at 35% 35%, #2a2c33, #050507)",
                      boxShadow: "inset 0 0 1px rgba(255,255,255,0.15)",
                    }} />
                  </div>

                  {/* Display itself — inset to leave a thin black bezel ring */}
                  <div className="absolute rounded-[3px] overflow-hidden bg-[#0a0a14]" style={{
                    top: 9, bottom: 3, left: 3, right: 3,
                    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.03)",
                  }}>

                    {/* Browser chrome */}
                    <div className="absolute inset-x-0 top-0 h-8 flex items-center gap-1.5 px-3.5 z-10" style={{
                      background: "linear-gradient(180deg, #2a2c33, #1d1f24)",
                      borderBottom: "1px solid rgba(0,0,0,0.5)",
                    }}>
                      <span className="w-3 h-3 rounded-full" style={{ background: "#ff5f57", boxShadow: "inset 0 0 0 0.5px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25)" }} />
                      <span className="w-3 h-3 rounded-full" style={{ background: "#febc2e", boxShadow: "inset 0 0 0 0.5px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25)" }} />
                      <span className="w-3 h-3 rounded-full" style={{ background: "#28c840", boxShadow: "inset 0 0 0 0.5px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25)" }} />
                      <div className="mx-auto px-3 py-0.5 rounded-md text-[10.5px] text-white/65 font-medium tracking-wide flex items-center gap-1.5" style={{
                        background: "rgba(0,0,0,0.35)",
                        border: "1px solid rgba(255,255,255,0.05)",
                        minWidth: "55%",
                        justifyContent: "center",
                      }}>
                        <Lock size={9} style={{ color: "rgba(255,255,255,0.5)" }} />
                        develop-1.scality.solutions
                      </div>
                    </div>

                    {/* Scrolling website screenshot */}
                    <div className="absolute inset-x-0 top-8 bottom-0 overflow-hidden">
                      <div ref={imgScrollRef} style={{ transform: "translateY(0px)", willChange: "transform" }}>
                        <img
                          src="develop-1.scality.solutions_.png"
                          alt="Scality Solutions"
                          className="w-full block"
                          style={{ minHeight: 1200 }}
                        />
                      </div>
                    </div>

                    {/* Glare overlay */}
                    <div className="absolute inset-0 pointer-events-none" style={{
                      background: "linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.06) 100%)",
                    }} />
                    {/* Vignette */}
                    <div className="absolute inset-0 pointer-events-none" style={{ boxShadow: "inset 0 0 80px rgba(0,0,0,0.4)" }} />
                  </div>

                  {/* Apple wordmark below screen on bezel */}
                  <div className="absolute bottom-1 left-1/2 -translate-x-1/2 text-[7.5px] font-semibold tracking-tight" style={{ color: "rgba(255,255,255,0.18)", letterSpacing: "0.04em" }}>
                    MacBook&nbsp;Pro
                  </div>
                </div>
              </div>

              {/* Hinge — thin dark strip between lid and base */}
              <div className="mx-auto mb-hinge relative" style={{
                width: "98%", height: "5px", marginLeft: "1%",
                borderRadius: "0 0 2px 2px",
              }} />

              {/* Base — slight trapezoid look via larger width and chamfered bottom */}
              <div className="mx-auto mb-base relative" style={{
                width: "108%", marginLeft: "-4%",
                height: "20px",
                borderRadius: "0 0 14px 14px",
                boxShadow: "0 40px 70px -20px rgba(0,0,0,0.85)",
              }}>
                {/* Side bevel highlights */}
                <div className="absolute left-0 top-0 bottom-0 w-[1px]" style={{ background: "linear-gradient(180deg, rgba(255,255,255,0.6), rgba(0,0,0,0.4))" }} />
                <div className="absolute right-0 top-0 bottom-0 w-[1px]" style={{ background: "linear-gradient(180deg, rgba(255,255,255,0.6), rgba(0,0,0,0.4))" }} />
              </div>

              {/* Drop shadow under whole laptop */}
              <div className="mx-auto mt-2" style={{
                width: "75%", height: "30px",
                background: "radial-gradient(ellipse at center, rgba(0,0,0,0.65), rgba(0,0,0,0) 70%)",
                filter: "blur(14px)",
              }} />
            </div>

            {/* PHONE — overlapping bottom-right of laptop */}
            <div
              ref={phoneRef}
              className="absolute"
              style={{
                right: "min(8vw, 90px)",
                bottom: "8vh",
                opacity: 0,
                transform: "translateX(320px) rotate(18deg)",
                transformOrigin: "center bottom",
                willChange: "transform",
                width: "min(28vw, 200px)",
              }}
            >
              <div className="relative mx-auto" style={{
                aspectRatio: "9 / 19",
                background: "#0d0d12",
                borderRadius: "30px",
                padding: "4px",
                border: "1px solid rgba(255,255,255,0.10)",
                boxShadow: "0 30px 60px -10px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.06)",
              }}>
                {/* Notch */}
                <div className="absolute top-1.5 left-1/2 -translate-x-1/2 w-[34%] h-3.5 rounded-full bg-black z-20" style={{ border: "1px solid rgba(255,255,255,0.06)" }} />
                {/* Screen */}
                <div className="w-full h-full rounded-[26px] overflow-hidden bg-[#0a0a14] relative">
                  {/* Status bar */}
                  <div className="absolute inset-x-0 top-0 h-6 z-10 flex items-center justify-between px-4 text-[9px] text-white/80 font-semibold">
                    <span>9:41</span>
                    <span>● ●●</span>
                  </div>
                  {/* Static phone screenshot — swap src once image is ready */}
                  <img
                    src="phone-mockup.png"
                    alt="Mobile Ansicht"
                    className="w-full h-full object-cover object-top"
                    style={{ paddingTop: 22, pointerEvents: "none" }}
                  />
                  {/* Glare */}
                  <div className="absolute inset-0 pointer-events-none" style={{ background: "linear-gradient(120deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.05) 100%)" }} />
                </div>
              </div>
            </div>

            {/* Floating "responsive" tag */}
            <div ref={tagRef} className="absolute" style={{ left: "min(6vw, 80px)", top: "12vh", opacity: 0 }}>
              <div className="glass rounded-full px-3.5 py-2 flex items-center gap-2">
                <span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--accent-blue)", boxShadow: "0 0 8px var(--accent-blue)" }} />
                <span className="text-[11.5px] text-white/85 font-semibold tracking-wide">Vollständig responsive</span>
              </div>
            </div>

            {/* Caption */}
            <div ref={captionRef} className="absolute left-0 right-0 bottom-6 text-center" style={{ opacity: 0, transition: "opacity 500ms" }}>
              <div className="inline-flex items-center gap-2 glass rounded-full px-4 py-2">
                <span className="text-[11.5px] uppercase tracking-[0.15em] text-white/45 font-bold">Projekt</span>
                <span className="w-1 h-1 rounded-full bg-white/30" />
                <span className="text-[13.5px] text-white/85 font-semibold">Elektro Wildschütz GmbH</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ icon: Icon, title, body }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const px = (e.clientX - r.left) / r.width - 0.5;
      const py = (e.clientY - r.top) / r.height - 0.5;
      el.style.transform = `perspective(1000px) rotateY(${px * 6}deg) rotateX(${-py * 6}deg)`;
    };
    const reset = () => { el.style.transform = ""; };
    el.addEventListener("mousemove", onMove);
    el.addEventListener("mouseleave", reset);
    return () => { el.removeEventListener("mousemove", onMove); el.removeEventListener("mouseleave", reset); };
  }, []);
  return (
    <div ref={ref} className="glass rounded-3xl p-7 transition-transform duration-200 will-change-transform group" style={{ transformStyle: "preserve-3d" }}>
      <div className="w-12 h-12 rounded-2xl flex items-center justify-center mb-5" style={{ background: "rgba(21,185,250,0.12)", color: "var(--accent-blue)", border: "1px solid rgba(21,185,250,0.25)" }}>
        <Icon size={22} />
      </div>
      <h3 className="text-[22px] font-bold tracking-tight">{title}</h3>
      <p className="mt-3 text-white/65 leading-relaxed text-[14.5px]">{body}</p>
      <a href="#kontakt" className="inline-flex items-center gap-1.5 mt-6 text-[14px] font-semibold" style={{ color: "var(--accent-blue)" }}>
        Mehr erfahren <ArrowRight size={14} />
      </a>
    </div>
  );
}

function Services() {
  const ref = useReveal();
  return (
    <section id="leistungen" ref={ref} className="reveal relative py-24 sm:py-32">
      <div className="max-w-[1200px] mx-auto px-5">
        <div className="max-w-2xl">
          <div className="ri text-[12.5px] uppercase tracking-[0.18em] text-white/40 font-semibold">Leistungen</div>
          <h2 className="ri d1 mt-3 h-tight text-[40px] sm:text-[54px]">Was wir für Sie <span className="hero-accent-text">bauen.</span></h2>
          <p className="ri d2 mt-4 text-white/65 text-[17px] leading-relaxed max-w-xl">
            Von der ersten Webseite bis zur eigenen Software — alles aus einer Hand, mit klarem Fokus auf Anfragen, Bewerber und interne Effizienz.
          </p>
        </div>
        <div className="ri d3 mt-12 grid md:grid-cols-3 gap-5">
          <ServiceCard icon={Code2} title="Web-Entwicklung" body="Schnelle, sichere Webseiten mit Funnel-Logik. Performance, SEO-Basics und sauberes Design — keine Templates von der Stange." />
          <ServiceCard icon={Layers} title="Individuelle Software" body="Maßgeschneiderte Tools für interne Prozesse. Auftragsverwaltung, Mitarbeiter-Koordination, Dashboards — passgenau für Ihr Team." />
          <ServiceCard icon={Workflow} title="Funnel-Systeme" body="Mehrstufige Lead-Funnels für Anfragen und Bewerber. Klare Schritte, hohe Abschlussquote, automatisiert ausgewertet." />
        </div>
      </div>
    </section>
  );
}

function VideoAbout() {
  const ref = useReveal();
  const videoRef = useRef(null);
  const [playing, setPlaying] = useState(true);

  // Keep React state in sync with native events (e.g. system pauses)
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const onPlay = () => setPlaying(true);
    const onPause = () => setPlaying(false);
    v.addEventListener("play", onPlay);
    v.addEventListener("pause", onPause);
    return () => {
      v.removeEventListener("play", onPlay);
      v.removeEventListener("pause", onPause);
    };
  }, []);

  const togglePlay = () => {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) { try { v.play(); } catch(e) {} }
    else { v.pause(); }
  };

  const scrollToFunnel = () => {
    const el = document.getElementById("kontakt");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <section ref={ref} className="reveal relative py-24 sm:py-32">
      {/* Soft ambient glow behind */}
      <div aria-hidden="true" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[900px] h-[600px] rounded-full pointer-events-none" style={{
        background: "radial-gradient(closest-side, rgba(21,185,250,0.10), rgba(21,185,250,0) 70%)",
        filter: "blur(60px)",
      }} />

      <div className="relative max-w-[1200px] mx-auto px-5">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center">
          {/* LEFT: Video */}
          <div className="w-full">
            <div
              className="relative rounded-3xl overflow-hidden border border-white/10 transition-shadow duration-500 hover:shadow-[0_0_80px_rgba(21,185,250,0.25)]"
              style={{ aspectRatio: "16 / 9", background: "#05060a" }}
            >
              <video
                ref={videoRef}
                poster="video-poster.jpg"
                autoPlay
                loop
                muted
                playsInline
                preload="metadata"
                className="w-full h-full object-cover"
              >
                <source src="site-video.mp4" type="video/mp4" />
              </video>

              {/* Bottom-right control — pause/play */}
              <div className="absolute bottom-3 right-3 flex items-center gap-2 z-10">
                <button
                  type="button"
                  onClick={togglePlay}
                  aria-label={playing ? "Video pausieren" : "Video abspielen"}
                  className="flex items-center justify-center rounded-full transition-transform duration-200 hover:scale-105 cursor-pointer"
                  style={{
                    width: 44, height: 44,
                    background: "var(--accent-blue)",
                    boxShadow: "0 6px 18px rgba(21,185,250,0.45), 0 0 0 1px rgba(255,255,255,0.18) inset",
                  }}
                >
                  {playing ? (
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">
                      <rect x="6" y="5" width="4" height="14" rx="1" />
                      <rect x="14" y="5" width="4" height="14" rx="1" />
                    </svg>
                  ) : (
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff" style={{ transform: "translateX(1px)" }} aria-hidden="true">
                      <path d="M8 5.5v13a1 1 0 0 0 1.55.83l10-6.5a1 1 0 0 0 0-1.66l-10-6.5A1 1 0 0 0 8 5.5z" />
                    </svg>
                  )}
                </button>
              </div>
            </div>
          </div>

          {/* RIGHT: Text + CTA */}
          <div className="w-full text-center lg:text-left">
            <h2 className="ri h-tight text-[34px] sm:text-[44px] lg:text-[48px]">
              Wir digitalisieren dein Unternehmen und stärken deine Sichtbarkeit.
            </h2>
            <p className="ri d1 mt-5 text-[16px] sm:text-[17px] text-white/60 max-w-xl mx-auto lg:mx-0" style={{ textWrap: "pretty" }}>
              Mit klarer Strategie bringen wir dein Unternehmen ins digitale Zeitalter.
            </p>
            <div className="ri d2 mt-8 flex justify-center lg:justify-start">
              <PrimaryButton onClick={scrollToFunnel}>Jetzt Erstgespräch buchen</PrimaryButton>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Navbar, Hero, StatsStrip, VideoAbout, MacBookScroll, Services });
