// Reusable UI primitives — window frame, section reveal, etc.
const { useEffect, useRef, useState } = React;

function Win({ title, idLabel, children, className = '', titleClass = '', controls = true }) {
  return (
    <div className={`win ${className}`}>
      <div className="win-titlebar flex items-center gap-3 px-4 py-3">
        {controls && (
          <div className="flex items-center gap-1.5">
            <span className="dot lav" />
            <span className="dot pnk" />
            <span className="dot pch" />
          </div>
        )}
        <div className={`flex-1 text-center font-round font-semibold text-[15px] text-lav-600 ${titleClass}`}>
          {title}
        </div>
        <div className="mono-label opacity-70" style={{ minWidth: 60, textAlign: 'right' }}>{idLabel}</div>
      </div>
      <div className="px-6 md:px-8 py-7 md:py-9">
        {children}
      </div>
    </div>
  );
}

function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            el.classList.add('in');
            io.unobserve(el);
          }
        });
      },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function Section({ id, label, title, children, className = '' }) {
  const ref = useReveal();
  return (
    <section id={id} ref={ref} className={`reveal max-w-6xl mx-auto px-5 md:px-8 py-12 md:py-16 ${className}`}>
      {(label || title) && (
        <div className="mb-6 md:mb-8 flex items-end justify-between gap-4 flex-wrap">
          <div>
            {label && <div className="lower-label text-sm mb-2">{label}</div>}
            {title && <h2 className="font-display text-3xl md:text-5xl text-plum leading-tight" style={{fontWeight:500}}>{title}</h2>}
          </div>
        </div>
      )}
      {children}
    </section>
  );
}

function Pill({ children, variant = 'ghost', onClick, href, target, rel }) {
  const cls = `pill ${variant === 'primary' ? 'pill-primary' : 'pill-ghost'}`;
  if (href) return <a href={href} onClick={onClick} target={target} rel={rel} className={cls}>{children}</a>;
  return <button onClick={onClick} className={cls}>{children}</button>;
}

function Sticker({ tone = 'lav', icon, children, rotate = 0 }) {
  const toneCls = { lav: 'lav-bg', pink: 'pink-bg', peach: 'peach-bg', mint: 'mint-bg', cream: 'cream-bg' }[tone] || 'lav-bg';
  return (
    <div className={`sticker ${toneCls}`} style={{ transform: `rotate(${rotate}deg)` }}>
      {icon && <span aria-hidden="true">{icon}</span>}
      <span>{children}</span>
    </div>
  );
}

// Copy-to-clipboard helper
async function copyToClipboard(text, label) {
  try {
    await navigator.clipboard.writeText(text);
    window.__toast(`copied ${label} ✓`);
  } catch (e) {
    window.__toast('copy failed ✗');
  }
}

Object.assign(window, { Win, Section, Pill, Sticker, useReveal, copyToClipboard });