// primitives.jsx — Logo, icons, small reusable bits
function NMark({ size = 28, color = "currentColor" }) {
  // An "N" whose diagonal doubles as a walking stride — proprietary mark
  return (
    <svg className="n-mark" width={size} height={size} viewBox="0 0 32 32" aria-hidden="true">
      <path d="M6 26 L6 6 L10 6 L22 22 L22 6 L26 6 L26 26 L22 26 L10 10 L10 26 Z"
      fill={color} />
      <circle cx="22" cy="6" r="2.3" fill={color} />
    </svg>);

}

function Arrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" aria-hidden="true" className="arrow">
      <path d="M1 7 L13 7 M8 2 L13 7 L8 12" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function Star() {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12">
      <path d="M6 1 L7.5 4.5 L11 5 L8.5 7.5 L9 11 L6 9 L3 11 L3.5 7.5 L1 5 L4.5 4.5 Z" fill="currentColor" />
    </svg>);

}

function CursorSpot() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    let rafId;
    let x = window.innerWidth / 2,y = window.innerHeight / 2;
    let tx = x,ty = y;
    const onMove = (e) => {tx = e.clientX;ty = e.clientY;};
    const loop = () => {
      x += (tx - x) * 0.12;y += (ty - y) * 0.12;
      if (ref.current) ref.current.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
      rafId = requestAnimationFrame(loop);
    };
    window.addEventListener("mousemove", onMove);
    loop();
    return () => {cancelAnimationFrame(rafId);window.removeEventListener("mousemove", onMove);};
  }, []);
  return <div ref={ref} className="cursor-spot" />;
}

function Nav({ lang, setLang }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const t = COPY[lang];
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const scrollTo = (id) => (e) => {
    e.preventDefault();
    setMenuOpen(false);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
  };
  return (
    <nav className={"nav " + (scrolled ? "scrolled" : "") + (menuOpen ? " menu-open" : "")}>
      <a href="#top" className="nav-logo" onClick={scrollTo("top")} style={{ whiteSpace: "nowrap", flexShrink: 0 }}>
        <img src={window.__resources && window.__resources.navLogo || "assets/logo.avif"} alt="New Motion" width="32" height="32" style={{ display: "block", flexShrink: 0 }} />
        <span style={{ whiteSpace: "nowrap" }}>New Motion</span>
      </a>
      <div className="nav-links" style={{ whiteSpace: "nowrap" }}>
        <a href="#services" onClick={scrollTo("services")}>{t.nav.services}</a>
        <a href="#about" onClick={scrollTo("about")}>{t.nav.about}</a>
        <a href="#journey" onClick={scrollTo("journey")}>{t.nav.journey}</a>
        <a href={window.__blogUrl || "/blog/"}>{t.nav.blog}</a>
        <a href="#location" onClick={scrollTo("location")}>{t.nav.location}</a>
      </div>
      <div className="nav-right">
        <div className="lang-toggle">
          <button className={lang === "de" ? "active" : ""} onClick={() => setLang("de")}>DE</button>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
        <a href="#booking" className="btn nav-cta" onClick={scrollTo("booking")}>
          {t.cta_book} <Arrow />
        </a>
        <button className="nav-burger" aria-label="Menu" aria-expanded={menuOpen}
                onClick={() => setMenuOpen(o => !o)}>
          <span /><span /><span />
        </button>
      </div>

      <div className={"nav-mobile " + (menuOpen ? "open" : "")}>
        <a href="#services" onClick={scrollTo("services")}>{t.nav.services}</a>
        <a href="#about" onClick={scrollTo("about")}>{t.nav.about}</a>
        <a href="#journey" onClick={scrollTo("journey")}>{t.nav.journey}</a>
        <a href={window.__blogUrl || "/blog/"}>{t.nav.blog}</a>
        <a href="#location" onClick={scrollTo("location")}>{t.nav.location}</a>
        <a href="#booking" className="btn nav-mobile-cta" onClick={scrollTo("booking")}>
          {t.cta_book} <Arrow />
        </a>
      </div>
    </nav>);

}

function Hero({ lang, variant }) {
  const t = COPY[lang].hero;
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); };
    tryPlay();
    v.addEventListener("canplay", tryPlay, { once: true });
  }, []);
  return (
    <section className={"hero variant-" + variant} id="top">
      <video ref={videoRef} className="hero-video" autoPlay muted loop playsInline>
        <source src={window.__resources && window.__resources.heroVideo || "assets/hero.mp4"} type="video/mp4" />
      </video>
      <div className="hero-scrim" />
      <div className="container" style={{ width: "100%" }}>
        <div className="mono" style={{ color: "var(--ink-mute)", marginBottom: 28 }}>
          ↳ {t.eyebrow}
        </div>
        <div className="hero-grid">
          <h1 className="hero-title">
            <span className="line">{t.line1}</span>
            <span className="line">
              {t.line2a}
              <em className="italic">{t.line2b}</em>
            </span>
            <span className="line"><span className="kinetic">{t.line3}</span></span>
          </h1>
          {variant === "media" ?
          <div className="hero-media" /> :

          <p className="hero-lede">{t.lede}</p>
          }
        </div>
      </div>
      <div className="hero-ticker">
        <div className="track">
          {[...t.ticker, ...t.ticker].map((w, i) =>
          <span key={i}>— {w}</span>
          )}
        </div>
      </div>
    </section>);

}

function CookieConsent({ lang }) {
  const t = (COPY[lang] && COPY[lang].cookie) || COPY.de.cookie;
  const KEY = "nm-cookie-consent";
  const [show, setShow] = React.useState(false);

  React.useEffect(() => {
    try { if (!localStorage.getItem(KEY)) setShow(true); } catch (e) { setShow(true); }
  }, []);

  const decide = (choice) => {
    try { localStorage.setItem(KEY, JSON.stringify({ choice, ts: Date.now() })); } catch (e) {}
    setShow(false);
  };

  if (!show) return null;
  const dpUrl = (window.__datenschutzUrl || "datenschutz.html") + "?lang=" + lang;

  return (
    <div className="cookie-consent" role="dialog" aria-live="polite" aria-label={t.title}>
      <div className="cookie-card">
        <div className="cookie-text">
          <div className="cookie-title">{t.title}</div>
          <p>{t.body} <a href={dpUrl}>{t.more} &rarr;</a></p>
        </div>
        <div className="cookie-actions">
          <button className="cookie-btn ghost" onClick={() => decide("essential")}>{t.essential}</button>
          <button className="cookie-btn" onClick={() => decide("all")}>{t.accept}</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NMark, Arrow, Star, CursorSpot, Nav, Hero, CookieConsent });