// Shared building blocks
const { useEffect, useRef, useState, useMemo } = React;

const Section = ({ id, eyebrow, title, sub, children, className = '', titleClass = '' }) => (
  <section id={id} className={`relative py-24 md:py-32 ${className}`}>
    <div className="max-w-[1240px] mx-auto px-6 md:px-10">
      {(eyebrow || title || sub) && (
        <div className="max-w-3xl mb-14 md:mb-20 reveal">
          {eyebrow && <div className="eyebrow mb-4">{eyebrow}</div>}
          {title && <h2 className={`display text-[40px] md:text-[56px] leading-[1.02] ${titleClass}`}>{title}</h2>}
          {sub && <p className="mt-5 text-[17px] md:text-[19px] text-muted max-w-2xl leading-relaxed">{sub}</p>}
        </div>
      )}
      {children}
    </div>
  </section>
);

const Eyebrow = ({ children, dot = true }) => (
  <div className="inline-flex items-center gap-2 eyebrow">
    {dot && <span className="w-1.5 h-1.5 rounded-full bg-brand-red"></span>}
    <span>{children}</span>
  </div>
);

// Brand swirl mark (the "e" from the logo, abstracted)
const SwirlMark = ({ size = 28, animate = true }) => (
  <span
    className={`inline-block rounded-full brand-gradient ${animate ? 'spin-slow' : ''}`}
    style={{
      width: size, height: size,
      WebkitMask: `radial-gradient(circle at center, transparent ${size*0.28}px, #000 ${size*0.30}px, #000 ${size*0.46}px, transparent ${size*0.48}px)`,
      mask: `radial-gradient(circle at center, transparent ${size*0.28}px, #000 ${size*0.30}px, #000 ${size*0.46}px, transparent ${size*0.48}px)`,
    }}
  />
);

// Use-on-scroll reveal
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

window.Section = Section;
window.Eyebrow = Eyebrow;
window.SwirlMark = SwirlMark;
window.useReveal = useReveal;