/* =========================================================
   Shadowbiz — core.jsx
   Mark (Option C: solid overlap + shadow), Wordmark, icons,
   Button, reveal hooks. Exports to window for other files.
   ========================================================= */
const { useState, useEffect, useRef, useCallback } = React;

/* ---- Option C mark: two rounded panels, overlap shows a darker shadow ---- */
function Mark({ size = 40, variant = "light", animate = false, idle = false }) {
  // variant picks the back/front/overlap tones
  const sets = {
    light: { back: "#1d3a2e", front: "#84cc16", ovr: "#2e5016" },   // on cream
    dark:  { back: "#f5f1e8", front: "#84cc16", ovr: "#65a30d" },   // on ink/teal
    lime:  { back: "#1d3a2e", front: "#f5f1e8", ovr: "#2e4a3e" },   // on lime
    mono:  { back: "#1d3a2e", front: "#1d3a2e", ovr: "#1d3a2e" },
  };
  const c = sets[variant] || sets.light;
  const cid = "ovr" + useRef(Math.random().toString(36).slice(2)).current;
  return (
    <svg width={size} height={size} viewBox="0 0 120 120"
      className={animate ? "mk-anim" : (idle ? "mk-idle" : "")}>
      <defs>
        <clipPath id={cid}><rect x="22" y="24" width="50" height="50" rx="14" /></clipPath>
      </defs>
      {/* back panel — the business */}
      <rect className="amk-back" x="22" y="24" width="50" height="50" rx="14" fill={c.back} />
      {/* front panel — Shadowbiz, alongside */}
      <rect className="amk-front" x="48" y="50" width="50" height="50" rx="14" fill={c.front} />
      {/* the shadow where they meet */}
      <g clipPath={`url(#${cid})`}>
        <rect className="amk-shadow" x="48" y="50" width="50" height="50" rx="14" fill={c.ovr} />
      </g>
    </svg>
  );
}

/* ---- wordmark ---- */
function Wordmark({ size = 21, tone = "light", className = "" }) {
  const shadow = tone === "dark" ? "var(--cream)" : "var(--ink)";
  const biz = tone === "dark" ? "var(--lime)" : "var(--lime-deep)";
  return (
    <span className={"wm " + className} style={{ fontSize: size, fontWeight: 800, letterSpacing: "-.04em" }}>
      <span style={{ color: shadow }}>shadow</span><span style={{ color: biz }}>biz</span>
    </span>
  );
}

function Brand({ tone = "light", markSize = 32, wordSize = 21, animate = false }) {
  return (
    <a href="#top" className="brand" aria-label="Shadowbiz home">
      <Mark size={markSize} variant={tone === "dark" ? "dark" : "light"} animate={animate} idle={!animate} />
      <Wordmark size={wordSize} tone={tone} />
    </a>
  );
}

/* ---- line icons — Lucide-flavoured, 1.75 stroke ---- */
function Icon({ name, size = 22, stroke = 1.75 }) {
  const P = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    ear: <><path d="M6 8.5a6 6 0 0 1 12 0c0 2.5-1.5 3.6-2.5 4.6-.8.8-1 1.5-1 2.4a2.5 2.5 0 0 1-5 0" /><path d="M9 9a3 3 0 0 1 5 2" /></>,
    target: <><circle cx="12" cy="12" r="8" /><circle cx="12" cy="12" r="4" /><circle cx="12" cy="12" r="1" /></>,
    blocks: <><rect x="3" y="3" width="8" height="8" rx="1.5" /><rect x="13" y="3" width="8" height="8" rx="1.5" /><rect x="3" y="13" width="8" height="8" rx="1.5" /><path d="M17 14v6M14 17h6" /></>,
    rocket: <><path d="M12 3c3 1 5 4 5 8l-2.5 2.5h-5L7 11c0-4 2-7 5-8Z" /><circle cx="12" cy="9" r="1.5" /><path d="M9.5 16 8 19M14.5 16 16 19" /></>,
    compass: <><circle cx="12" cy="12" r="9" /><path d="m15.5 8.5-2 5-5 2 2-5 5-2Z" /></>,
    layers: <><path d="m12 3 9 5-9 5-9-5 9-5Z" /><path d="m3 13 9 5 9-5" /></>,
    spark: <><path d="M12 3c.6 4.6 1.8 5.8 6 6.4-4.2.6-5.4 1.8-6 6.4-.6-4.6-1.8-5.8-6-6.4 4.2-.6 5.4-1.8 6-6.4Z" /><path d="M18.5 14.5c.2 1.6.6 2 2.2 2.2-1.6.2-2 .6-2.2 2.2-.2-1.6-.6-2-2.2-2.2 1.6-.2 2-.6 2.2-2.2Z" /></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2.5" /><path d="m3.5 7 8.5 6 8.5-6" /></>,
    phone: <><path d="M5 4h3l1.5 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 1.5V18a2 2 0 0 1-2 2A14 14 0 0 1 4 8a2 2 0 0 1 1-4Z" /></>,
    globe: <><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 2.5 15.5 0 18M12 3c-2.5 2.5-2.5 15.5 0 18" /></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    check: <><path d="M4 12.5 9 17.5 20 6.5" /></>,
    pin: <><path d="M12 21s7-5.5 7-11a7 7 0 0 0-14 0c0 5.5 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3.5 2" /></>,
    school: <><path d="M3 9.5 12 5l9 4.5-9 4.5-9-4.5Z" /><path d="M7 11.5V16c0 1 2.2 2.5 5 2.5s5-1.5 5-2.5v-4.5" /><path d="M21 9.5V15" /></>,
    bag: <><path d="M6 8h12l-1 11a2 2 0 0 1-2 1.8H9A2 2 0 0 1 7 19L6 8Z" /><path d="M9 8a3 3 0 0 1 6 0" /></>,
    quote: <><path d="M7 7h4v4c0 2.5-1.5 4-4 4.5M14 7h4v4c0 2.5-1.5 4-4 4.5" /></>,
  };
  return <svg {...P}>{paths[name] || null}</svg>;
}

/* ---- button ---- */
function Btn({ kind = "primary", children, href, withArrow = false, className = "", onClick, type }) {
  const cls = `btn btn-${kind} ${className}`;
  const inner = <>{children}{withArrow && <span className="ar"><Icon name="arrow" size={16} /></span>}</>;
  if (href) return <a className={cls} href={href} onClick={onClick}>{inner}</a>;
  return <button className={cls} onClick={onClick} type={type || "button"}>{inner}</button>;
}

/* ---- reveal-on-scroll (synchronous scroll handler; rAF-free so it works
   even when the tab is backgrounded / rAF is throttled) ---- */
function useReveal() {
  useEffect(() => {
    let els = Array.from(document.querySelectorAll(".reveal"));
    const check = () => {
      const h = window.innerHeight || 800;
      els = els.filter(e => {
        if (e.getBoundingClientRect().top < h * 0.92) { e.classList.add("in"); return false; }
        return true;
      });
      if (!els.length) detach();
    };
    const detach = () => {
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    };
    check();
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check, { passive: true });
    // safety: never leave content hidden — force instant (bypass any frozen transition)
    const safety = setTimeout(() => {
      els.forEach(e => { e.style.transition = "none"; e.classList.add("in"); });
    }, 1800);
    return () => { detach(); clearTimeout(safety); };
  });
}

/* ---- scroll position (for nav) ---- */
function useScrolled(at = 40) {
  const [s, setS] = useState(false);
  useEffect(() => {
    const on = () => setS(window.scrollY > at);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, [at]);
  return s;
}

Object.assign(window, { Mark, Wordmark, Brand, Icon, Btn, useReveal, useScrolled,
  React, useState, useEffect, useRef, useCallback });