/* Shared atoms for the Ottoman Projekts website UI kit. */

function Arrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* Documentary / sculpture image placeholder — stands in for the live
   <image-slot>. Caption echoes the brand's mono image tags. */
function ImagePlaceholder({ label, src }) {
  if (src) {
    return (
      <div className="img-ph has-img">
        <img src={src} alt={label} loading="lazy" />
      </div>
    );
  }
  return (
    <div className="img-ph"><span>{label}</span></div>
  );
}

/* Two-part section header: Roman·LABEL + serif H2 (with <em>) + deck. */
function SectionHead({ label, children, deck }) {
  return (
    <div className="sec-head">
      <div className="sec-label-row" data-reveal>
        <span className="section-label">{label}</span>
        <h2>{children}</h2>
      </div>
      {deck && <p className="sec-deck" data-reveal style={{ '--reveal-delay': '140ms' }}>{deck}</p>}
    </div>
  );
}

/* Count-up number used in the About counters. */
function Counter({ to, label, delay = 0 }) {
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const dur = 1100, t0 = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - t0) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setN(Math.round(eased * to));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.disconnect();
        }
      });
    }, { threshold: 0.5 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return (
    <div className="counter" data-reveal ref={ref} style={{ '--reveal-delay': delay + 'ms' }}>
      <div className="num"><span>{n}</span><span className="plus">+</span></div>
      <div className="label">{label}</div>
    </div>
  );
}

Object.assign(window, { Arrow, ImagePlaceholder, SectionHead, Counter });