// ui.jsx — placeholder imagery, scroll-reveal, small helpers
const { useState, useEffect, useRef } = React;

// Subtly-striped placeholder with a monospace caption (stand-in for real photography)
function Placeholder({ label = "görsel", tone = "rose", rounded = "rounded-[20px]", className = "", children }) {
  const tones = {
    rose: { base: "#f0e4e0", stripe: "rgba(168,125,121,0.10)", ink: "#9a726d" },
    sage: { base: "#e6ebdf", stripe: "rgba(111,126,103,0.12)", ink: "#6f7e67" },
    cream: { base: "#f1e9df", stripe: "rgba(120,110,98,0.08)", ink: "#8a7e6e" },
  };
  const t = tones[tone] || tones.rose;
  return (
    <div
      className={`relative overflow-hidden ${rounded} ${className}`}
      style={{
        backgroundColor: t.base,
        backgroundImage: `repeating-linear-gradient(135deg, ${t.stripe} 0 1px, transparent 1px 11px)`,
      }}
    >
      {children}
      <div className="absolute inset-0 flex items-center justify-center">
        <span
          className="px-3 py-1 rounded-full tracking-wide"
          style={{
            fontFamily: "'IBM Plex Mono', ui-monospace, monospace",
            fontSize: "11px",
            color: t.ink,
            backgroundColor: "rgba(250,247,242,0.66)",
            border: `1px solid ${t.stripe}`,
            letterSpacing: "0.04em",
          }}
        >
          {label}
        </span>
      </div>
    </div>
  );
}

// IntersectionObserver-based reveal — subtle fade + rise.
// Visible by DEFAULT; only below-the-fold elements start hidden and animate in on
// scroll. This guarantees content is never stuck invisible if the tab throttles
// CSS transitions / rAF while not actively painting.
function Reveal({ children, delay = 0, y = 18, className = "", as = "div" }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(true);
  const [armed, setArmed] = useState(false); // did we engage the hidden->shown animation?
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const vh = window.innerHeight || document.documentElement.clientHeight;
    const r = el.getBoundingClientRect();
    const below = r.top >= vh * 0.88;
    if (!below) return; // in/above fold -> stay visible, no animation needed
    setArmed(true);
    setShown(false);
    let io = null;
    const reveal = () => { setShown(true); cleanup(); };
    const check = () => {
      const rr = el.getBoundingClientRect();
      if (rr.top < (window.innerHeight || 0) * 0.9) reveal();
    };
    const cleanup = () => {
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
      if (io) io.disconnect();
    };
    if ("IntersectionObserver" in window) {
      io = new IntersectionObserver((entries) => {
        if (entries.some((e) => e.isIntersecting)) reveal();
      }, { rootMargin: "0px 0px -8% 0px" });
      io.observe(el);
    }
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    return cleanup;
  }, []);
  const Tag = as;
  return (
    <Tag
      ref={ref}
      className={className}
      style={
        armed
          ? {
              opacity: shown ? 1 : 0,
              transform: shown ? "translateY(0)" : `translateY(${y}px)`,
              transition: `opacity 0.9s cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 1s cubic-bezier(.2,.7,.2,1) ${delay}ms`,
              willChange: "opacity, transform",
            }
          : undefined
      }
    >
      {children}
    </Tag>
  );
}

// Small overline / eyebrow label with flanking hairlines
function Eyebrow({ children, center = false, color = "var(--accent, #a87d79)", className = "" }) {
  return (
    <div className={`flex items-center gap-3 ${center ? "justify-center" : ""} ${className}`}>
      <span className="h-px w-7" style={{ backgroundColor: color, opacity: 0.5 }} />
      <span
        className="uppercase"
        style={{ fontSize: "12px", letterSpacing: "0.22em", color, fontWeight: 500 }}
      >
        {children}
      </span>
      {center && <span className="h-px w-7" style={{ backgroundColor: color, opacity: 0.5 }} />}
    </div>
  );
}

Object.assign(window, { Placeholder, Reveal, Eyebrow });