// Reusable atomic components
const { useEffect, useRef, useState, useCallback, useMemo } = React;

function Reveal({ children, stagger, className = "", as: As = "div", style }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <As
      ref={ref}
      className={`${stagger ? "reveal-stagger" : "reveal"} ${className}`}
      style={style}
    >
      {children}
    </As>
  );
}

function Mono({ children, style, className = "" }) {
  return (
    <span className={`mono ${className}`} style={{ color: "var(--ink-muted)", ...style }}>
      {children}
    </span>
  );
}

function Pill({ children, dotColor = "var(--accent)" }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        padding: "6px 12px",
        border: "1px solid var(--line-strong)",
        borderRadius: 999,
        fontSize: 12,
        fontFamily: "var(--font-mono)",
        textTransform: "uppercase",
        letterSpacing: "0.12em",
        color: "var(--ink-soft)",
        background: "rgba(255,255,255,0.35)",
      }}
    >
      <span style={{ width: 7, height: 7, borderRadius: 999, background: dotColor }} />
      {children}
    </span>
  );
}

// Browser-chrome window for screenshots in the hero
function BrowserWindow({ src, alt, url = "mediaplanningcanvas.com/app", style, children }) {
  return (
    <div
      style={{
        background: "var(--cream-3)",
        borderRadius: 16,
        border: "1px solid var(--line)",
        boxShadow: "0 40px 80px -30px rgba(14,34,54,0.35), 0 8px 24px -8px rgba(14,34,54,0.12)",
        overflow: "hidden",
        ...style,
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          padding: "12px 16px",
          borderBottom: "1px solid var(--line)",
          background: "var(--cream-3)",
        }}
      >
        <div style={{ display: "flex", gap: 6 }}>
          <span style={{ width: 11, height: 11, borderRadius: 999, background: "#E96E5C" }} />
          <span style={{ width: 11, height: 11, borderRadius: 999, background: "#E5C04B" }} />
          <span style={{ width: 11, height: 11, borderRadius: 999, background: "#82B66A" }} />
        </div>
        <div
          style={{
            flex: 1,
            background: "rgba(14,34,54,0.06)",
            borderRadius: 999,
            padding: "5px 14px",
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            color: "var(--ink-muted)",
            letterSpacing: "0.04em",
          }}
        >
          🔒 {url}
        </div>
      </div>
      {children ? children : <img src={src} alt={alt} style={{ width: "100%", display: "block" }} />}
    </div>
  );
}

// Floating screenshot card
function FloatingShot({ src, alt, style, caption, captionColor = "var(--accent)" }) {
  return (
    <div style={{ position: "relative", ...style }}>
      <div
        style={{
          background: "white",
          borderRadius: 12,
          border: "1px solid var(--line)",
          overflow: "hidden",
          boxShadow:
            "0 30px 60px -30px rgba(14,34,54,0.35), 0 6px 18px -6px rgba(14,34,54,0.15)",
        }}
      >
        <img src={src} alt={alt} style={{ width: "100%", display: "block" }} />
      </div>
      {caption && (
        <div
          style={{
            position: "absolute",
            top: -10,
            left: 14,
            background: captionColor,
            color: "white",
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: "0.16em",
            textTransform: "uppercase",
            padding: "5px 10px",
            borderRadius: 4,
            boxShadow: "0 4px 12px rgba(14,34,54,0.18)",
          }}
        >
          {caption}
        </div>
      )}
    </div>
  );
}

// Section wrapper with optional inverted styling
function Section({ id, dark, children, style, padTop = 120, padBottom = 120 }) {
  return (
    <section
      id={id}
      style={{
        position: "relative",
        background: dark ? "var(--ink)" : "transparent",
        color: dark ? "var(--cream)" : "var(--ink)",
        padding: `${padTop}px 0 ${padBottom}px`,
        ...style,
      }}
    >
      <div className="container">{children}</div>
    </section>
  );
}

Object.assign(window, { Reveal, Mono, Pill, BrowserWindow, FloatingShot, Section });