// Shared primitives: Reveal, Arrow, Section, useInView

const { useEffect, useRef, useState, useMemo, useCallback } = React;

function useInView(options = {}) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          obs.disconnect();
        }
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px", ...options }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

function Reveal({ children, delay = 0, as: Tag = "div", className = "", style, ...rest }) {
  const [ref, inView] = useInView();
  return (
    <Tag
      ref={ref}
      className={`reveal ${inView ? "in" : ""} ${className}`}
      style={{ "--reveal-delay": `${delay}ms`, ...style }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

function ArrowUR({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M3 11L11 3M11 3H4M11 3V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function ArrowR({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M2.5 7H11.5M11.5 7L7 2.5M11.5 7L7 11.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function Plus({ open }) {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" style={{ transition: "transform 0.4s cubic-bezier(0.2,0.8,0.2,1)", transform: open ? "rotate(45deg)" : "rotate(0)" }}>
      <path d="M11 4V18M4 11H18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}

function SectionLabel({ index, label }) {
  return (
    <div className="row gap-3" style={{ alignItems: "center" }}>
      <span className="idx">{index}</span>
      <span style={{ width: 28, height: 1, background: "var(--line-strong)" }}></span>
      <span className="eyebrow" style={{ color: "var(--ink)" }}>{label}</span>
    </div>
  );
}

// YDG monogram
function Logo({ size = 28, mono = false }) {
  return (
    <div className="row gap-3" style={{ alignItems: "center" }}>
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
        <rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill={mono ? "var(--paper)" : "var(--ink)"} stroke={mono ? "var(--paper)" : "var(--ink)"}/>
        <path d="M9 9L13 16M17 9L13 16M13 16V23" stroke={mono ? "var(--ink)" : "var(--paper)"} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
        <circle cx="22" cy="22" r="2" fill="var(--accent)"/>
      </svg>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span style={{ fontSize: 15, fontWeight: 600, letterSpacing: "-0.02em" }}>Young Dev Group</span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)", marginTop: 3 }}>Marketing · Systems · Growth</span>
      </div>
    </div>
  );
}

Object.assign(window, { useInView, Reveal, ArrowUR, ArrowR, Plus, SectionLabel, Logo });