// Shared small UI primitives for Blink Experience

const { useState, useEffect, useRef } = React;

// SVG icons
const ArrowRight = ({ size = 14, className = "btn__arrow" }) => (
  <svg className={className} width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M2.5 8h10M9 4.5L12.5 8 9 11.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const ArrowUpRight = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M5 11L11 5M11 5H6M11 5V10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const Plus = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
  </svg>
);
const Check = ({ size = 11 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
    <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const PinDot = () => (<span className="chip__dot"></span>);

// BlinkMark — pure-CSS wordmark (we render the loop separately)
const BlinkLogo = ({ tone = "light" }) => (
  <svg viewBox="0 0 239 72" fill="none" aria-label="Blink Experience">
    <use href="media/logo-blink-experience.svg#root" />
    <image href="media/logo-blink-experience.svg" x="0" y="0" width="239" height="72" />
  </svg>
);

// Logo as plain img — keeps colours intact
const Logo = () => (
  <img src="media/logo-blink-experience.svg" alt="Blink Experience" style={{ height: 22, width: "auto", display: "block" }} />
);

const BELoop = () => (
  <span className="be-loop" aria-hidden="true">
    <span className="be-loop__dot"></span>
    <span className="be-loop__dot"></span>
    <span className="be-loop__dot"></span>
    <span className="be-loop__dot"></span>
    <span className="be-loop__dot"></span>
    <span className="be-loop__dot"></span>
  </span>
);

const Eyebrow = ({ children }) => (
  <div className="sec__eyebrow">
    <span className="sec__eyebrow-line"></span>
    <span className="t-eyebrow">{children}</span>
  </div>
);

const Kicker = ({ children }) => (
  <div className="kicker">
    <span className="dot"></span>
    <span>{children}</span>
  </div>
);

// Reveal-on-scroll wrapper
const Reveal = ({ children, as: Tag = "div", delay = 0, ...rest }) => {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { setSeen(true); io.disconnect(); }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} className={`reveal ${seen ? "is-in" : ""} ${rest.className || ""}`} style={{ transitionDelay: `${delay}ms`, ...(rest.style || {}) }}>
      {children}
    </Tag>
  );
};

// Section container
const Section = ({ tone = "paper", children, id, className = "" }) => (
  <section id={id} className={`sec bg-${tone} ${className}`}>
    <div className="container">{children}</div>
  </section>
);

const SecHead = ({ eyebrow, title, lead, right }) => (
  <div className="sec__head">
    <div className="sec__title">
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 className="t-h2">{title}</h2>
      {lead && <p className="t-lead" style={{ marginTop: 18, color: "var(--muted)", maxWidth: 720 }}>{lead}</p>}
    </div>
    {right}
  </div>
);

// Brief CTA button (opens modal via global)
const BriefBtn = ({ size = "", variant = "accent", label = "Brief us", category }) => (
  <button
    className={`btn btn--${variant} ${size ? `btn--${size}` : ""}`}
    onClick={() => window.openBrief && window.openBrief(category)}
  >
    {label}
    <ArrowRight />
  </button>
);

Object.assign(window, {
  ArrowRight, ArrowUpRight, Plus, Check, PinDot,
  Logo, BELoop, Eyebrow, Kicker, Reveal, Section, SecHead, BriefBtn,
});