/* global React */
const { useEffect: useEffectC, useRef: useRefC, useState: useStateC } = React;

/* ============================================================
   pacode — reusable components
   ============================================================ */

function PacodeLogo({ height = 36 }) {
  return (
    <img src="assets/pacode-logo.png" alt="pacode" style={{ height: `${height}px`, width: "auto" }} />
  );
}

function BalloonSvg({ color = "#E63946", width = 80, style = {} }) {
  return (
    <svg viewBox="0 0 80 120" width={width} style={style} aria-hidden="true">
      <ellipse cx="40" cy="48" rx="32" ry="40" fill={color} />
      <path d="M40 88 L36 96 L44 96 Z" fill={color} />
      <path d="M40 96 Q34 104 42 112 Q50 116 38 120" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" />
      <ellipse cx="30" cy="34" rx="6" ry="10" fill="rgba(255,255,255,0.32)" />
    </svg>
  );
}

function GridPattern() {
  return (
    <svg className="pc-grid-pattern" viewBox="0 0 200 240" preserveAspectRatio="none" aria-hidden="true">
      {[...Array(10)].map((_, i) =>
        [...Array(12)].map((_, j) => (
          <rect key={`${i}-${j}`} x={i * 20 + 1} y={j * 20 + 1} width="18" height="18" fill="none" stroke="#1E40AF" strokeWidth="0.6" opacity={(i + j) % 3 === 0 ? 0.9 : 0.35} />
        ))
      )}
    </svg>
  );
}

function ConfettiTiles() {
  const palette = ["#E63946", "#E8B739", "#1E40AF", "#0B0F1A", "transparent", "transparent"];
  const cells = [];
  for (let r = 0; r < 4; r++) {
    for (let c = 0; c < 11; c++) {
      const seed = (r * 13 + c * 7) % palette.length;
      cells.push(palette[seed]);
    }
  }
  return (
    <div className="pc-collage__tiles" aria-hidden="true">
      {cells.map((bg, i) => (
        <span key={i} style={{ background: bg, transform: i % 2 ? "skewX(-12deg)" : "skewX(12deg)" }} />
      ))}
    </div>
  );
}

function Eyebrow({ children }) {
  return <p className="pc-eyebrow">{children}</p>;
}

function SectionHeader({ eyebrow, title, lead, tag }) {
  return (
    <header className="pc-section__header pc-reveal">
      <div>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 className="pc-section__title">{title}</h2>
        {lead ? <p className="pc-section__lead">{lead}</p> : null}
      </div>
      {tag ? (
        <span className="pc-tag">
          {tag}
          <span className="tag-icon" aria-hidden="true">→</span>
        </span>
      ) : null}
    </header>
  );
}

function PlaceholderMedia({ label, src, alt }) {
  return (
    <div className={`pc-card__media${src ? " has-image" : ""}`}>
      {src ? <img src={src} alt={alt || ""} className="pc-card__media-img" /> : null}
      <span className="placeholder-label">{label}</span>
    </div>
  );
}

/* simple scroll-reveal — adds .is-in to .pc-reveal elements when entering viewport */
function useScrollReveal() {
  useEffectC(() => {
    const els = document.querySelectorAll(".pc-reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((el) => el.classList.add("is-in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

Object.assign(window, {
  PacodeLogo, BalloonSvg, GridPattern, ConfettiTiles, Eyebrow,
  SectionHeader, PlaceholderMedia, useScrollReveal,
});