// Agent Builder UI kit — shared primitives
const { useState, useEffect, useRef } = React;

// Signature pixel arrow (two layers animate on hover via CSS)
function PixelArrow() {
  const rects = (
    <g fill="#fff">
      <rect x="5.06" y="19.97" width="20.57" height="2.61" transform="rotate(-40.28 5.06 19.97)"/>
      <rect x="7.97" y="7.24" width="2.61" height="2.61" transform="rotate(-40.28 7.97 7.24)"/>
      <rect x="11.65" y="7.54" width="2.61" height="2.61" transform="rotate(-40.28 11.65 7.54)"/>
      <rect x="15.33" y="7.85" width="2.61" height="2.61" transform="rotate(-40.28 15.33 7.85)"/>
      <rect x="18.71" y="11.83" width="2.61" height="2.61" transform="rotate(-40.28 18.71 11.83)"/>
      <rect x="18.40" y="15.52" width="2.61" height="2.61" transform="rotate(-40.28 18.40 15.52)"/>
      <rect x="18.10" y="19.20" width="2.61" height="2.61" transform="rotate(-40.28 18.10 19.20)"/>
    </g>
  );
  return (
    <span className="arrow-icon">
      <svg width="26" height="26" viewBox="0 0 28 28" fill="none">{rects}</svg>
      <svg width="26" height="26" viewBox="0 0 28 28" fill="none">{rects}</svg>
    </span>
  );
}

// Primary CTA — lowercase label is the brand convention
function CTAButton({ children, onClick, href = "#" }) {
  return (
    <a className="thm-btn chatbot-btn" href={href} onClick={(e) => { if (onClick) { e.preventDefault(); onClick(e); } }}>
      <span className="btn-bg"></span>
      <span>{children}</span>
      <PixelArrow />
    </a>
  );
}

function Eyebrow({ children, center }) {
  return <span className={"eyebrow" + (center ? " center" : "")}>{children}</span>;
}

// soft-ring mint check used throughout
function Check({ size = 19 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 21 21" fill="none">
      <circle cx="10.5" cy="10.5" r="10" fill="#296aed" opacity=".12" />
      <path d="M13.5 7.4 9.5 11.4 7.5 9.3" stroke="#296aed" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// IntersectionObserver reveal wrapper
function Reveal({ children, as = "div", className = "", style, delay = 0 }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Reveal immediately anything already within (or near) the viewport on mount —
    // robust even in hidden iframes where IntersectionObserver never fires.
    const vh = window.innerHeight || document.documentElement.clientHeight || 800;
    const r = el.getBoundingClientRect();
    if (r.top < vh * 1.05 && r.bottom > -40) { setSeen(true); return; }
    const io = new IntersectionObserver((ents) => {
      ents.forEach((en) => { if (en.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, { threshold: 0.12 });
    io.observe(el);
    // Safety net: if IO hasn't fired (e.g. hidden iframe), reveal on scroll proximity.
    const onScroll = () => {
      const rr = el.getBoundingClientRect();
      if (rr.top < (window.innerHeight || 800) * 1.05) { setSeen(true); io.disconnect(); window.removeEventListener("scroll", onScroll); }
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    // Final safety net: never leave content permanently hidden (print, export,
    // short viewports, throttled/hidden iframes where CSS transitions pause).
    // Force visibility via inline style so it does not depend on a transition.
    const t = setTimeout(() => {
      setSeen(true);
      const node = ref.current;
      if (node) { node.style.opacity = "1"; node.style.transform = "none"; }
      io.disconnect();
    }, 1500);
    return () => { io.disconnect(); window.removeEventListener("scroll", onScroll); clearTimeout(t); };
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={"reveal " + (seen ? "in " : "") + className} style={{ ...style, transitionDelay: delay + "ms" }}>
      {children}
    </Tag>
  );
}

function SectionHead({ eyebrow, title, lede, center }) {
  return (
    <Reveal className={"sec-head" + (center ? " center" : "")}>
      <Eyebrow center={center}>{eyebrow}</Eyebrow>
      <h2 className="title t-sec" dangerouslySetInnerHTML={{ __html: title }} />
      {lede && <p className="lede" style={center ? { marginLeft: "auto", marginRight: "auto", maxWidth: 620 } : null}>{lede}</p>}
    </Reveal>
  );
}

// Abstract glossy thumbnail used across the blog (feed + article cover)
const ArtGlyph = {
  spark: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3v6m0 6v6m-9-9h6m6 0h6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6"/></svg>,
  chat: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 5h16v11H9l-4 3v-3H4V5z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>,
  shield: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3l7 3v5c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6l7-3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>,
  graph: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 19V5m0 14h16M8 15l3-4 3 2 4-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  flow: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="6" height="5" rx="1.5" stroke="currentColor" strokeWidth="1.6"/><rect x="15" y="15" width="6" height="5" rx="1.5" stroke="currentColor" strokeWidth="1.6"/><path d="M9 6.5h4a2 2 0 012 2V15" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
  globe: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18" stroke="currentColor" strokeWidth="1.6"/></svg>,
  book: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 6.5C10.5 5 8 4.5 4 4.8v12.6c4-.3 6.5.2 8 1.6 1.5-1.4 4-1.9 8-1.6V4.8c-4-.3-6.5.2-8 1.7z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M12 6.5V18.7" stroke="currentColor" strokeWidth="1.6"/></svg>,
  playbook: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M9 6h11M9 12h11M9 18h7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><circle cx="4.5" cy="6" r="1.3" fill="currentColor"/><circle cx="4.5" cy="12" r="1.3" fill="currentColor"/><circle cx="4.5" cy="18" r="1.3" fill="currentColor"/></svg>,
  template: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3.5" y="4.5" width="17" height="15" rx="2" stroke="currentColor" strokeWidth="1.6"/><path d="M3.5 9.5h17M9 9.5v10" stroke="currentColor" strokeWidth="1.6"/></svg>,
};

function ArtThumb({ hue = "h-blue", glyph = "spark", className = "", img = null, alt = "" }) {
  return (
    <div className={"art-thumb " + hue + (img ? " has-photo" : "") + " " + className}>
      {img && <img className="art-photo" src={img} alt={alt} loading="lazy" />}
      <span className="glow g1"></span>
      <span className="glow g2"></span>
      <span className="art-mark">{ArtGlyph[glyph]}</span>
    </div>
  );
}

Object.assign(window, { PixelArrow, CTAButton, Eyebrow, Check, Reveal, SectionHead, ArtGlyph, ArtThumb });
