// Small building blocks shared across sections

const SectionLabel = ({ children, tone = 'dark', className = '' }) => (
  <div className={`section-label text-xs tracking-[0.3em] font-bold uppercase ${tone === 'light' ? 'text-wedar-lime' : 'text-wedar-primary'} ${className}`}>
    {children}
  </div>
);

const Pill = ({ children, variant = 'dark' }) => {
  const styles = {
    dark: 'bg-wedar-primary text-wedar-bone',
    light: 'bg-wedar-bone text-wedar-primary',
    lime: 'bg-wedar-lime text-wedar-primary',
    outline: 'border border-wedar-primary/20 text-wedar-primary',
    'outline-light': 'border border-white/20 text-white',
  }[variant];
  return (
    <span className={`inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-bold tracking-[0.2em] uppercase ${styles}`}>
      {children}
    </span>
  );
};

const BtnPrimary = ({ href = '#', children, className = '' }) => (
  <a href={href} className={`group relative inline-flex items-center gap-4 rounded-full bg-wedar-primary pl-7 pr-3 py-3 text-wedar-bone font-bold text-[15px] tracking-wide hover:bg-wedar-deep transition-colors ${className}`}>
    <span>{children}</span>
    <span className="flex h-10 w-10 items-center justify-center rounded-full bg-wedar-lime text-wedar-primary">
      <svg className="btn-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
    </span>
  </a>
);

const BtnGhost = ({ href = '#', children, className = '', tone = 'dark' }) => {
  const t = tone === 'light'
    ? 'border-white/30 text-white hover:bg-white hover:text-wedar-primary'
    : 'border-wedar-primary/25 text-wedar-primary hover:bg-wedar-primary hover:text-wedar-bone';
  return (
    <a href={href} className={`group inline-flex items-center gap-3 rounded-full border px-7 py-3 font-bold text-[15px] tracking-wide transition-colors ${t} ${className}`}>
      <span>{children}</span>
      <svg className="btn-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
    </a>
  );
};

// Hook: reveal on scroll
const useReveal = () => {
  React.useEffect(() => {
    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 -60px 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
};

// Count-up on visible
const CountUp = ({ to, duration = 1400, suffix = '', className = '' }) => {
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    let raf, start;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setN(Math.round(to * eased));
            if (p < 1) raf = requestAnimationFrame(tick);
          };
          raf = requestAnimationFrame(tick);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.5 });
    if (ref.current) io.observe(ref.current);
    return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, [to, duration]);
  return <span ref={ref} className={`ticker-digit ${className}`}>{n.toLocaleString()}{suffix}</span>;
};

Object.assign(window, { SectionLabel, Pill, BtnPrimary, BtnGhost, useReveal, CountUp });