// ============================================================================
// Lucide-style icons (inlined)
// ============================================================================
const Icon = ({ children, className = "", strokeWidth = 1.8, ...rest }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={strokeWidth}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    {...rest}
  >
    {children}
  </svg>
);

const ChevronRight = (props) => (
  <Icon {...props}>
    <path d="m9 18 6-6-6-6" />
  </Icon>
);
const ChevronDown = (props) => (
  <Icon {...props}>
    <path d="m6 9 6 6 6-6" />
  </Icon>
);
const ArrowUpRight = (props) => (
  <Icon {...props}>
    <path d="M7 7h10v10" />
    <path d="M7 17 17 7" />
  </Icon>
);
const Zap = (props) => (
  <Icon {...props}>
    <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
  </Icon>
);
const Play = (props) => (
  <Icon {...props}>
    <polygon points="6 3 20 12 6 21 6 3" fill="currentColor" />
  </Icon>
);
const Pause = (props) => (
  <Icon {...props}>
    <rect x="6" y="4" width="4" height="16" fill="currentColor" />
    <rect x="14" y="4" width="4" height="16" fill="currentColor" />
  </Icon>
);
const X = (props) => (
  <Icon {...props}>
    <path d="M18 6 6 18" />
    <path d="m6 6 12 12" />
  </Icon>
);
const Phone = (props) => (
  <Icon {...props}>
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" />
  </Icon>
);

// ============================================================================
// Motion shim (initial / animate / transition / whileHover / whileTap)
// ============================================================================
const { useState, useEffect, useRef, useMemo } = React;

const EASE_MAP = {
  easeOut: "cubic-bezier(0.16, 1, 0.3, 1)",
  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
};
const resolveEase = (e) =>
  !e
    ? EASE_MAP.easeOut
    : typeof e === "string"
    ? EASE_MAP[e] || EASE_MAP.easeOut
    : Array.isArray(e)
    ? `cubic-bezier(${e.join(",")})`
    : EASE_MAP.easeOut;

const buildTransform = ({ x = 0, y = 0, scale = 1 }) =>
  `translate3d(${x}px, ${y}px, 0) scale(${scale})`;

function createMotion(Tag) {
  return function MotionEl({
    initial,
    animate,
    transition = {},
    whileHover,
    whileTap,
    style,
    onMouseEnter,
    onMouseLeave,
    onMouseDown,
    onMouseUp,
    children,
    ...rest
  }) {
    const [mounted, setMounted] = useState(false);
    const [hovered, setHovered] = useState(false);
    const [tapped, setTapped] = useState(false);

    useEffect(() => {
      setMounted(true);
      const t = setTimeout(() => setMounted(true), 0);
      return () => clearTimeout(t);
    }, []);

    const duration = transition.duration ?? 0.4;
    const delay = transition.delay ?? 0;
    const easing = resolveEase(transition.ease);

    const base = mounted ? animate || {} : initial || {};
    let { x = 0, y = 0, scale = 1, opacity = 1 } = base;

    if (tapped && whileTap?.scale !== undefined) scale = whileTap.scale;
    else if (hovered && whileHover?.scale !== undefined) scale = whileHover.scale;

    const liveDuration = hovered || tapped ? 0.22 : duration;
    const liveDelay = hovered || tapped ? 0 : delay;

    const computedStyle = {
      ...style,
      opacity,
      transform: buildTransform({ x, y, scale }),
      transition: `transform ${liveDuration}s ${easing} ${liveDelay}s, opacity ${liveDuration}s ${easing} ${liveDelay}s, background-color 0.22s ${easing}, color 0.22s ${easing}, border-color 0.22s ${easing}`,
      willChange: "transform, opacity",
    };

    return (
      <Tag
        {...rest}
        style={computedStyle}
        onMouseEnter={(e) => {
          setHovered(true);
          onMouseEnter && onMouseEnter(e);
        }}
        onMouseLeave={(e) => {
          setHovered(false);
          setTapped(false);
          onMouseLeave && onMouseLeave(e);
        }}
        onMouseDown={(e) => {
          setTapped(true);
          onMouseDown && onMouseDown(e);
        }}
        onMouseUp={(e) => {
          setTapped(false);
          onMouseUp && onMouseUp(e);
        }}
      >
        {children}
      </Tag>
    );
  };
}

const motion = {
  div: createMotion("div"),
  section: createMotion("section"),
  h1: createMotion("h1"),
  h2: createMotion("h2"),
  p: createMotion("p"),
  span: createMotion("span"),
  button: createMotion("button"),
  a: createMotion("a"),
  ul: createMotion("ul"),
  li: createMotion("li"),
};

// ============================================================================
// PlayPill — small "Voir le film" pill
// ============================================================================
function PlayPill({ onClick }) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      className="inline-flex items-center gap-2.5 pl-1.5 pr-4 py-1.5 rounded-full bg-white/[0.06] border border-white/15 backdrop-blur-md text-white/85 hover:bg-white/[0.12] hover:text-white whitespace-nowrap group"
    >
      <span
        className="inline-flex items-center justify-center w-9 h-9 rounded-full shrink-0 relative"
        style={{
          background: "linear-gradient(180deg, #3BC4E6 0%, #1AB6E0 60%, #119FC8 100%)",
          boxShadow:
            "inset 0 1px 0 rgba(255,255,255,0.55), 0 4px 14px rgba(26,182,224,0.45)",
        }}
      >
        <span
          className="absolute inset-0 rounded-full gl-play-ring"
          style={{ background: "rgba(26,182,224,0.45)" }}
        />
        <Play className="w-3.5 h-3.5 text-white ml-[2px] relative z-10" strokeWidth={0} />
      </span>
      <span className="text-sm font-medium whitespace-nowrap">Voir le film</span>
      <span className="text-[10px] font-mono uppercase tracking-[0.12em] text-white/45 whitespace-nowrap pl-0.5">Présentation · 01:24</span>
    </motion.button>
  );
}

// ============================================================================
// VideoModal — full-screen lightbox with the hero video
// ============================================================================
function VideoModal({ open, onClose }) {
  const videoRef = useRef(null);
  const [playing, setPlaying] = useState(true);
  const [muted, setMuted] = useState(false);
  const [progress, setProgress] = useState(0);
  const [duration, setDuration] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  const [rendered, setRendered] = useState(open);

  useEffect(() => {
    if (open) {
      setRendered(true);
    } else {
      const t = setTimeout(() => setRendered(false), 280);
      return () => clearTimeout(t);
    }
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === " ") {
        e.preventDefault();
        togglePlay();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    if (open) {
      v.currentTime = 0;
      setPlaying(true);
      v.play().catch(() => {});
    } else {
      v.pause();
      setPlaying(false);
    }
  }, [open]);

  const togglePlay = () => {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) {
      v.play();
      setPlaying(true);
    } else {
      v.pause();
      setPlaying(false);
    }
  };

  const toggleMute = () => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = !v.muted;
    setMuted(v.muted);
  };

  const onTime = () => {
    const v = videoRef.current;
    if (!v || !v.duration) return;
    setProgress((v.currentTime / v.duration) * 100);
    setCurrentTime(v.currentTime);
    setDuration(v.duration);
  };

  const seek = (e) => {
    const v = videoRef.current;
    if (!v || !v.duration) return;
    const rect = e.currentTarget.getBoundingClientRect();
    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
    v.currentTime = ratio * v.duration;
    setProgress(ratio * 100);
  };

  const fmt = (s) => {
    if (!s || !isFinite(s)) return "00:00";
    const m = Math.floor(s / 60);
    const r = Math.floor(s % 60);
    return `${String(m).padStart(2, "0")}:${String(r).padStart(2, "0")}`;
  };

  if (!rendered) return null;

  return (
    <div
      className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8"
      style={{
        background: open ? "rgba(6, 14, 22, 0.78)" : "rgba(6, 14, 22, 0)",
        backdropFilter: "blur(12px)",
        WebkitBackdropFilter: "blur(12px)",
        transition: "background 0.28s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.28s",
      }}
      onClick={onClose}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="relative w-full max-w-[1200px] aspect-video rounded-2xl md:rounded-[28px] overflow-hidden"
        style={{
          background: "#000",
          border: "1px solid rgba(26, 182, 224, 0.25)",
          boxShadow:
            "0 40px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.06)",
          opacity: open ? 1 : 0,
          transform: open ? "scale(1)" : "scale(0.96)",
          transition: "opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1)",
        }}
      >
        <video
          ref={videoRef}
          src="project/assets/hero.mp4"
          autoPlay
          playsInline
          onTimeUpdate={onTime}
          onLoadedMetadata={onTime}
          onEnded={() => setPlaying(false)}
          className="absolute inset-0 w-full h-full object-cover"
        />

        <div
          className="absolute inset-x-0 bottom-0 h-32 pointer-events-none"
          style={{
            background:
              "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%)",
          }}
        />

        <button
          onClick={onClose}
          aria-label="Fermer"
          className="absolute top-3 right-3 md:top-4 md:right-4 w-10 h-10 md:w-11 md:h-11 rounded-full flex items-center justify-center backdrop-blur-md border border-white/15 hover:bg-white/20 transition-colors"
          style={{ background: "rgba(11,27,38,0.55)" }}
        >
          <X className="w-4 h-4 md:w-5 md:h-5 text-white" strokeWidth={2} />
        </button>

        <div className="absolute top-3 left-3 md:top-5 md:left-5 flex items-center gap-2 px-3 py-1.5 rounded-full backdrop-blur-md border border-white/15"
          style={{ background: "rgba(11,27,38,0.55)" }}>
          <span className="inline-block w-1.5 h-1.5 rounded-full gl-live-dot" style={{ background: "var(--brand-400)" }} />
          <span className="text-[10px] uppercase tracking-[0.18em] text-white/85 font-semibold">
            Geneltec · Showreel 2026
          </span>
        </div>

        <div className="absolute inset-x-0 bottom-0 px-4 md:px-6 pb-4 md:pb-5 z-10">
          <div
            onClick={seek}
            className="group/seek h-1.5 w-full rounded-full bg-white/15 cursor-pointer overflow-hidden mb-3"
          >
            <div
              className="h-full transition-[width] duration-150 ease-out"
              style={{
                width: `${progress}%`,
                background: "linear-gradient(90deg, var(--brand-400), var(--brand-500))",
                boxShadow: "0 0 12px rgba(26,182,224,0.65)",
              }}
            />
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={togglePlay}
              className="w-10 h-10 rounded-full flex items-center justify-center transition-colors hover:bg-white/10"
              style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.15)" }}
              aria-label={playing ? "Pause" : "Lecture"}
            >
              {playing
                ? <Pause className="w-4 h-4 text-white" strokeWidth={0} />
                : <Play className="w-4 h-4 text-white ml-[2px]" strokeWidth={0} />}
            </button>

            <button
              onClick={toggleMute}
              className="px-3 h-10 rounded-full flex items-center gap-2 transition-colors hover:bg-white/10 text-white/80"
              style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.15)" }}
            >
              <span className="text-[11px] font-mono uppercase tracking-[0.14em]">
                {muted ? "Muet" : "Son"}
              </span>
            </button>

            <div className="ml-auto flex items-center gap-2 font-mono text-[12px] text-white/70">
              <span className="text-white">{fmt(currentTime)}</span>
              <span className="text-white/40">/</span>
              <span>{fmt(duration)}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-[11px] font-mono uppercase tracking-[0.18em] text-white/45 pointer-events-none">
        Esc pour fermer · Espace = lecture / pause
      </div>
    </div>
  );
}

// ============================================================================
// Navbar
// ============================================================================
const MENU = [
  { label: "Services",   href: "services.html" },
  { label: "Portfolio",  href: "portfolio.html" },
  { label: "Processus",  href: "processus.html" },
  { label: "À propos",   href: "about.html" },
  { label: "FAQ",        href: "faq.html" },
];

function Navbar() {
  const [mobileOpen, setMobileOpen] = useState(false);
  return (
    <nav className="flex items-center justify-between py-5 px-5 md:px-8 lg:px-10 w-full relative z-10">
      {/* Left: Logo */}
      <div className="flex-1 flex items-center gap-3">
        <a href="index.html" className="gl-glass-pill flex items-center px-3.5 py-1.5 rounded-full" style={{ background: "rgba(255,255,255,0.94)" }}>
          <img src="project/assets/logo-new.png" alt="Geneltec" className="h-7 w-auto block" />
        </a>
      </div>

      {/* Center menu */}
      <ul className="hidden md:flex items-center gap-1 p-1 rounded-full border border-white/10 bg-white/[0.04] backdrop-blur-md whitespace-nowrap">
        {MENU.map((item) => (
          <li key={item.label}>
            <a
              href={item.href}
              className="flex items-center gap-1 px-3.5 lg:px-4 py-2 rounded-full text-[13px] lg:text-sm font-medium whitespace-nowrap transition-all hover:bg-white/10"
              style={{ color: "rgba(255,255,255,0.78)" }}
            >
              {item.label}
            </a>
          </li>
        ))}
      </ul>

      {/* Mobile logo */}
      <div className="md:hidden absolute left-1/2 -translate-x-1/2">
        <img src="project/assets/logo-new.png" alt="Geneltec" className="h-7" />
      </div>

      {/* Right: phone + CTA */}
      <div className="flex-1 flex justify-end items-center gap-2 md:gap-3">
        <a href="tel:+212662129067" className="hidden xl:flex items-center gap-2 px-3.5 py-2 rounded-full bg-white/[0.06] border border-white/10 text-white/80 backdrop-blur-md whitespace-nowrap hover:bg-white/10 transition-colors">
          <Phone className="w-3.5 h-3.5" strokeWidth={1.8} />
          <span className="font-mono text-[12px]">+212 662 12 90 67</span>
        </a>
        <motion.a
          href="contact.html"
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          className="gl-cta flex items-center rounded-full pl-2 pr-4 md:pr-5 py-1.5 md:py-2 gap-2 md:gap-3 group whitespace-nowrap"
        >
          <div className="bg-white/25 p-1 md:p-1.5 rounded-full flex items-center justify-center">
            <ArrowUpRight className="w-4 h-4 md:w-4 md:h-4 text-white" strokeWidth={2} />
          </div>
          <span className="text-xs md:text-sm font-semibold tracking-tight whitespace-nowrap">Devis gratuit</span>
        </motion.a>
        {/* Mobile hamburger */}
        <button
          onClick={() => setMobileOpen(!mobileOpen)}
          className="md:hidden w-9 h-9 flex flex-col items-center justify-center gap-1.5"
          aria-label="Menu"
        >
          {[0,1,2].map((i) => (
            <span key={i} className="block w-5 h-px rounded-full" style={{ background: "rgba(255,255,255,0.75)" }} />
          ))}
        </button>
      </div>

      {/* Mobile dropdown */}
      {mobileOpen && (
        <div className="md:hidden absolute top-full left-3 right-3 mt-2 rounded-[1.2rem] py-3 px-4 z-50" style={{ background: "rgba(11,27,38,0.92)", backdropFilter: "blur(16px)", border: "1px solid rgba(255,255,255,0.1)" }}>
          {MENU.map((item) => (
            <a key={item.href} href={item.href} className="block py-3 text-[14px] font-medium border-b border-white/08" style={{ color: "rgba(255,255,255,0.8)", borderColor: "rgba(255,255,255,0.06)" }}>
              {item.label}
            </a>
          ))}
          <a href="contact.html" className="block py-3 text-[14px] font-medium" style={{ color: "var(--brand-400)" }}>
            Devis gratuit →
          </a>
        </div>
      )}
    </nav>
  );
}

// ============================================================================
// BottomLeftCard — "+150 CHANTIERS LIVRÉS"
// ============================================================================
function BottomLeftCard() {
  const target = 150;
  const [val, setVal] = useState(target);
  useEffect(() => {
    if (typeof document !== "undefined" && document.visibilityState === "hidden") {
      setVal(target);
      return;
    }
    setVal(0);
    const dur = 1400;
    const startDelay = 350;
    let raf;
    let startTs = 0;
    const tick = (t) => {
      if (!startTs) startTs = t;
      const p = Math.min(1, (t - startTs) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    const startTimer = setTimeout(() => {
      raf = requestAnimationFrame(tick);
    }, startDelay);
    return () => {
      clearTimeout(startTimer);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <motion.div
      initial={{ x: -20, opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
      className="gl-glass-card absolute bottom-28 right-4 left-auto md:left-6 md:right-auto md:bottom-6 lg:bottom-10 lg:left-10 p-3.5 md:p-4 lg:p-5 rounded-[1.4rem] md:rounded-[1.6rem] lg:rounded-[1.8rem] flex flex-col gap-2.5 min-w-[150px] md:min-w-[160px] lg:min-w-[180px] w-fit"
      style={{ background: "rgba(11,27,38,0.42)", borderColor: "rgba(255,255,255,0.16)" }}
    >
      <div className="flex flex-col">
        <div className="flex items-baseline">
          <span className="text-xl md:text-2xl font-semibold text-white/70 tracking-tight leading-none mr-0.5">+</span>
          <span className="text-3xl md:text-4xl lg:text-[42px] font-semibold text-white tracking-tight leading-none tabular-nums">
            {val}
          </span>
        </div>
        <span className="text-[10px] md:text-[11px] font-medium text-white/55 uppercase tracking-[0.18em] mt-1.5">
          Chantiers livrés
        </span>

        <div className="h-[3px] w-full rounded-full bg-white/10 mt-3 overflow-hidden">
          <div
            className="h-full rounded-full transition-[width] duration-700 ease-out"
            style={{
              width: `${Math.min(100, (val / target) * 100)}%`,
              background: "linear-gradient(90deg, var(--brand-400), var(--brand-500))",
              boxShadow: "0 0 8px rgba(26,182,224,0.55)",
            }}
          />
        </div>
      </div>

      <motion.a
        href="portfolio.html"
        whileHover={{ scale: 1.02 }}
        whileTap={{ scale: 0.98 }}
        className="flex items-center bg-white rounded-full pl-1.5 pr-4 py-1.5 gap-2 hover:bg-white/95 self-start group whitespace-nowrap"
      >
        <div className="p-1 rounded-full flex items-center justify-center" style={{ background: "rgba(26,182,224,0.18)" }}>
          <ArrowUpRight className="w-3.5 h-3.5" style={{ color: "var(--brand-600)" }} strokeWidth={2} />
        </div>
        <span className="text-[13px] font-semibold whitespace-nowrap" style={{ color: "var(--ink-900)" }}>
          Portfolio
        </span>
      </motion.a>
    </motion.div>
  );
}

// ============================================================================
// BottomRightCorner — cutout into the page bg
// ============================================================================
function BottomRightCorner() {
  return (
    <motion.div
      initial={{ y: 20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.8, delay: 0.45, ease: "easeOut" }}
      className="absolute bottom-0 right-0 p-3 pt-5 pl-8 sm:p-4 sm:pt-6 sm:pl-10 md:p-6 md:pt-8 md:pl-14 rounded-tl-[1.5rem] sm:rounded-tl-[2rem] md:rounded-tl-[3.5rem] flex items-center gap-3 sm:gap-4 md:gap-6"
      style={{ background: "#f0f0f0" }}
    >
      {/* Top intersection mask */}
      <div className="absolute -top-[1.5rem] sm:-top-[2rem] md:-top-[3.5rem] right-0 w-[1.5rem] sm:w-[2rem] md:w-[3.5rem] h-[1.5rem] sm:h-[2rem] md:h-[3.5rem] pointer-events-none">
        <svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M56 56V0C56 30.9279 30.9279 56 0 56H56Z" fill="#f0f0f0" />
        </svg>
      </div>
      <div className="absolute bottom-0 -left-[1.5rem] sm:-left-[2rem] md:-left-[3.5rem] w-[1.5rem] sm:w-[2rem] md:w-[3.5rem] h-[1.5rem] sm:h-[2rem] md:h-[3.5rem] pointer-events-none">
        <svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M56 56H0C30.9279 56 56 30.9279 56 0V56Z" fill="#f0f0f0" />
        </svg>
      </div>

      <a href="brochure.html" className="flex items-center gap-3 sm:gap-4 md:gap-5 group cursor-pointer">
        <div
          className="w-11 h-11 md:w-14 md:h-14 rounded-full flex items-center justify-center transition-colors"
          style={{
            background: "rgba(26,182,224,0.10)",
            border: "1px solid rgba(26,182,224,0.22)",
          }}
        >
          <Zap className="w-4 h-4 md:w-6 md:h-6" style={{ color: "var(--brand-600)" }} strokeWidth={2} />
        </div>

        <div className="flex flex-col">
          <span className="text-[15px] md:text-[19px] font-semibold leading-tight whitespace-nowrap" style={{ color: "var(--ink-900)" }}>
            Brochure technique
          </span>
          <div className="flex items-center gap-1 mt-0.5 transition-colors whitespace-nowrap" style={{ color: "var(--neutral-500)" }}>
            <span className="text-[12px] md:text-[14px] font-medium font-mono">PDF · 24 pages</span>
            <ChevronRight className="w-3 h-3 md:w-4 md:h-4 transition-transform group-hover:translate-x-0.5" strokeWidth={2} />
          </div>
        </div>
      </a>
    </motion.div>
  );
}

// ============================================================================
// Ticker
// ============================================================================
function Ticker() {
  const items = [
    "Courants forts",
    "Courants faibles",
    "Énergie solaire",
    "Domotique",
    "Sécurité incendie",
    "Vidéosurveillance",
    "Automatisation industrielle",
    "Maintenance 24/7",
    "Conforme NF C 15-100",
    "Réseaux IT",
  ];
  const Row = () =>
    items.map((it, i) => (
      <span key={i} className="flex items-center gap-3 text-white/55 text-[11px] uppercase tracking-[0.18em] font-medium whitespace-nowrap">
        <span className="font-mono text-[10px]" style={{ color: "var(--brand-400)" }}>—</span>
        {it}
      </span>
    ));
  return (
    <div
      className="absolute left-0 right-0 overflow-hidden pointer-events-none"
      style={{
        bottom: 0,
        height: 30,
        maskImage: "linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)",
        WebkitMaskImage: "linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)",
      }}
    >
      <div className="gl-ticker-track py-2">
        <Row />
        <Row />
      </div>
    </div>
  );
}

// ============================================================================
// Hero
// ============================================================================
function Hero() {
  const sectionRef = useRef(null);
  const [spot, setSpot] = useState({ x: -1000, y: -1000, visible: false });
  const [videoOpen, setVideoOpen] = useState(false);

  const onMove = (e) => {
    const el = sectionRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    setSpot({ x: e.clientX - rect.left, y: e.clientY - rect.top, visible: true });
  };
  const onLeave = () => setSpot((s) => ({ ...s, visible: false }));

  return (
    <div className="w-full h-screen flex items-center justify-center p-3 md:p-5" style={{ background: "#f0f0f0" }}>
      <section
        ref={sectionRef}
        onMouseMove={onMove}
        onMouseLeave={onLeave}
        className="gl-video-veil gl-grid gl-grain relative w-full max-w-[1536px] h-full rounded-[1.5rem] md:rounded-[3rem] overflow-hidden flex flex-col items-center group"
        style={{ background: "var(--ink-900)" }}
      >
        <img
          src="project/assets/hero.png"
          alt="Geneltec — Technologie électrique intelligente"
          className="absolute inset-0 w-full h-full object-cover object-center z-0"
          style={{ opacity: 0.55 }}
        />

        {/* Brand-tinted cursor spotlight */}
        <div
          className="gl-spotlight"
          style={{
            left: spot.x,
            top: spot.y,
            opacity: spot.visible ? 1 : 0,
          }}
        />

        {/* Content layer */}
        <div className="relative z-10 w-full h-full flex flex-col items-center">
          <Navbar />

          <div className="w-full flex-1 flex flex-col items-center justify-start pt-6 md:pt-10 lg:pt-14 pb-36 px-6 text-center max-w-[1200px] mx-auto">
            {/* Spacer where badge used to be — keeps headline vertical position */}
            <div className="h-[36px] mb-6" aria-hidden="true" />
            <motion.h1
              initial={{ opacity: 0, scale: 0.98 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.9, delay: 0.2, ease: "easeOut" }}
              className="w-full font-semibold text-white mb-3"
              style={{
                letterSpacing: "-0.025em",
                lineHeight: 1.0,
                fontSize: "clamp(1.85rem, 5.2vw, 4.5rem)",
              }}
            >
              Électricité <span className="gl-accent">intelligente</span>
              <br />
              pour habitat &amp; industrie.
            </motion.h1>

            <motion.p
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.45, ease: "easeOut" }}
              className="w-full text-sm sm:text-base md:text-[17px] text-white/75 leading-relaxed max-w-[480px] mx-auto font-normal mt-2"
            >
              Geneltec conçoit, installe et maintient des écosystèmes électriques modernes — courants forts &amp; faibles, solaire, domotique, sécurité et automatisation industrielle, partout au Maroc.
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7, delay: 0.65, ease: "easeOut" }}
              className="mt-7 flex items-center gap-3 flex-wrap justify-center"
            >
              <motion.a
                href="contact.html"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                className="gl-cta inline-flex items-center gap-2 rounded-full pl-5 pr-5 py-3 whitespace-nowrap"
              >
                <span className="text-sm font-semibold tracking-tight whitespace-nowrap">Demander un devis</span>
                <ArrowUpRight className="w-4 h-4 text-white" strokeWidth={2} />
              </motion.a>
              <motion.a
                href="portfolio.html"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                className="inline-flex items-center gap-2 rounded-full pl-5 pr-5 py-3 text-white/90 border border-white/20 bg-white/[0.06] backdrop-blur-md hover:bg-white/[0.12] whitespace-nowrap"
              >
                <span className="text-sm font-medium whitespace-nowrap">Nos réalisations</span>
                <ChevronRight className="w-4 h-4" strokeWidth={2} />
              </motion.a>
              <PlayPill onClick={() => setVideoOpen(true)} />
            </motion.div>
          </div>

          <BottomLeftCard />
          <BottomRightCorner />
        </div>
      </section>

      <VideoModal open={videoOpen} onClose={() => setVideoOpen(false)} />
    </div>
  );
}

// ============================================================================
// Exports
// ============================================================================
Object.assign(window, {
  motion,
  Icon,
  ChevronRight,
  ChevronDown,
  ArrowUpRight,
  Zap,
  Phone,
  Play,
  Pause,
  X,
  Navbar,
  BottomLeftCard,
  BottomRightCorner,
  Hero,
  PlayPill,
  VideoModal,
});