/* global React */
const { useState, useEffect, useRef, useCallback } = React;

/* ──────────────────────────────────────────
   Shared UI primitives
   ────────────────────────────────────────── */

function useLiveClock() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  // San Diego is UTC-7 (PDT in May). Use Intl with America/Los_Angeles.
  const fmt = new Intl.DateTimeFormat("en-US", {
    timeZone: "America/Los_Angeles",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
  });
  return fmt.format(now);
}

function CursorCrosshair() {
  const ref = useRef(null);
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onMove = (e) => {
      if (!ref.current) return;
      ref.current.style.left = e.clientX + "px";
      ref.current.style.top = e.clientY + "px";
      setShow(true);
    };
    const onLeave = () => setShow(false);
    window.addEventListener("mousemove", onMove);
    document.documentElement.addEventListener("mouseleave", onLeave);
    return () => {
      window.removeEventListener("mousemove", onMove);
      document.documentElement.removeEventListener("mouseleave", onLeave);
    };
  }, []);
  // Don't show on touch devices
  const isTouch =
    typeof window !== "undefined" &&
    window.matchMedia &&
    window.matchMedia("(hover: none)").matches;
  if (isTouch) return null;
  return (
    <div ref={ref} className={`cursor-crosshair ${show ? "show" : ""}`}>
      <div className="ring"></div>
      <div className="label">scan</div>
    </div>
  );
}

function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setTimeout(() => entry.target.classList.add("in"), delay);
            obs.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [delay]);
  return (
    <As ref={ref} className={`reveal ${className}`} {...rest}>
      {children}
    </As>
  );
}

function SectionHead({ num, title, aside, dark }) {
  return (
    <div className={`section-head`}>
      <div className="section-num">§ {num}</div>
      <h2 className="section-title">{title}</h2>
      {aside && <div className="section-aside">{aside}</div>}
    </div>
  );
}

function Nav() {
  const clock = useLiveClock();
  return (
    <nav className="nav">
      <a href="#top" className="nav-brand">
        <span className="logo-mark" aria-hidden="true"></span>
        <span className="name">Cayres&nbsp;Labs</span>
      </a>
      <div className="nav-center" title="Currently accepting two projects this quarter">
        <span className="dot" aria-hidden="true"></span>
        <span>2 slots open · Q3 2026</span>
      </div>
      <div className="nav-right">
        <span className="clock">SD · {clock}</span>
        <a href="#contact" className="nav-cta">
          Start <span className="arrow">→</span>
        </a>
      </div>
    </nav>
  );
}

// Expose primitives globally so other JSX scripts can use them
Object.assign(window, {
  useLiveClock,
  CursorCrosshair,
  Reveal,
  SectionHead,
  Nav,
});