// ============ Stagify - Primitives ============

const Icon = ({ name, size = 18, stroke = 1.6 }) => {
  const s = size;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "arrow-right": return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case "check": return <svg {...common}><path d="M5 12l5 5L20 7"/></svg>;
    case "bolt": return <svg {...common}><path d="M13 2L4 14h7l-2 8 9-12h-7l2-8z"/></svg>;
    case "lock": return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>;
    case "euro": return <svg {...common}><path d="M18 7a7 7 0 100 10"/><path d="M4 11h10M4 15h10"/></svg>;
    case "device": return <svg {...common}><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M7 20h10M10 16v4M14 16v4"/></svg>;
    case "palette": return <svg {...common}><circle cx="12" cy="12" r="9"/><circle cx="8" cy="10" r="1"/><circle cx="12" cy="7" r="1"/><circle cx="16" cy="10" r="1"/><path d="M12 21a2 2 0 000-4 2 2 0 010-4h2a5 5 0 005-5"/></svg>;
    case "star": return <svg {...common} fill="currentColor" stroke="none"><path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18 22l-6-3.5L6 22l1.5-7.2L2 10l7.1-1.1L12 2z"/></svg>;
    case "upload": return <svg {...common}><path d="M12 16V4M7 9l5-5 5 5M4 20h16"/></svg>;
    case "swatches": return <svg {...common}><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>;
    case "download": return <svg {...common}><path d="M12 4v12M7 11l5 5 5-5M4 20h16"/></svg>;
    case "chevron": return <svg {...common}><path d="M9 18l6-6-6-6"/></svg>;
    case "x": return <svg {...common}><path d="M6 6l12 12M18 6l-6 6-6 6"/></svg>;
    default: return null;
  }
};

// Stagify logomark
const Logo = ({ brand = "stagify", brandName, size = 22 }) => {
  const name = brandName || (brand === "stagify" ? "Stagify" : brand === "restager" ? "Restager" : "Apstatyk.lt");
  return (
    <div className="nav__logo">
      <svg width={size + 6} height={size + 6} viewBox="0 0 32 32" aria-hidden>
        <rect width="32" height="32" rx="8" fill="var(--c-ink)"/>
        <path d="M6 22 L6 13 L16 6 L26 13 L26 22 Z" stroke="var(--c-highlight)" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>
        <path d="M11 22 L11 17 L21 17 L21 22" stroke="var(--c-highlight)" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>
      </svg>
      <span>{name}</span>
    </div>
  );
};

// Announce rail (marquee)
const Announce = ({ items }) => (
  <div className="announce" role="complementary">
    <div className="announce__track">
      {[...items, ...items].map((t, i) => (
        <span key={i}><span className="announce__dot"></span>{t}</span>
      ))}
    </div>
  </div>
);

// Nav
const Nav = ({ brand = "restager", brandName, links }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const C = window.COPY || {};
  const appHref = C.appHref || "app.html";
  const altHref = C.altLocaleHref || "index.html";
  const altLabel = C.altLocaleLabel || "EN";
  const primaryCta = (C.hero && C.hero.ctaPrimary) || "Open Restager";
  const signInLabel = C.lang === "lt" ? "Prisijungti" : "Sign in";
  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="container nav__inner">
        <a href="#" aria-label={brand}><Logo brand={brand} brandName={brandName}/></a>
        <div className="nav__links">
          {Object.entries(links).map(([k, v]) => <a key={k} href={`#${k}`}>{v}</a>)}
        </div>
        <div className="nav__cta">
          <a href={altHref} className="nav__locale" title={`Switch to ${altLabel}`}>{altLabel}</a>
          <a href={appHref} className="btn btn--sm nav__signin">{signInLabel}</a>
          <a href={appHref} className="btn btn--primary btn--sm">{primaryCta} <Icon name="arrow-right" size={14}/></a>
        </div>
      </div>
    </nav>
  );
};

// Compare widget (draggable slider)
const Compare = ({ before, after, labelBefore = "Before", labelAfter = "After" }) => {
  const ref = React.useRef(null);
  const [pos, setPos] = React.useState(50);
  const dragging = React.useRef(false);

  const update = (clientX) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = Math.max(0, Math.min(rect.width, clientX - rect.left));
    setPos((x / rect.width) * 100);
  };

  React.useEffect(() => {
    const onMove = (e) => { if (!dragging.current) return; const x = e.touches ? e.touches[0].clientX : e.clientX; update(x); };
    const onUp = () => { dragging.current = false; };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
    window.addEventListener("touchmove", onMove, { passive: true });
    window.addEventListener("touchend", onUp);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("touchend", onUp);
    };
  }, []);

  return (
    <div
      ref={ref}
      className="compare"
      style={{ "--pos": pos + "%" }}
      onMouseDown={(e) => { dragging.current = true; update(e.clientX); }}
      onTouchStart={(e) => { dragging.current = true; update(e.touches[0].clientX); }}
    >
      <img className="compare__img" src={before} alt="before"/>
      <img className="compare__img compare__img--after" src={after} alt="after"/>
      <span className="compare__label compare__label--before">{labelBefore}</span>
      <span className="compare__label compare__label--after">{labelAfter}</span>
      <div className="compare__handle">
        <div className="compare__knob">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M8 8l-4 4 4 4M16 8l4 4-4 4"/></svg>
        </div>
      </div>
    </div>
  );
};

// Faq Item
const FaqItem = ({ q, a, open, onToggle }) => (
  <div className={`faq__item ${open ? "is-open" : ""}`}>
    <button className="faq__q" onClick={onToggle} aria-expanded={open}>
      <span>{q}</span>
      <span className="faq__plus"></span>
    </button>
    <div className="faq__a"><div className="faq__a__inner"><p>{a}</p></div></div>
  </div>
);

Object.assign(window, { Icon, Logo, Announce, Nav, Compare, FaqItem });