// shared.jsx — Shared utilities for ALVEX Landing Page

function updateAccentVars(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  const s = document.documentElement.style;
  s.setProperty('--accent', hex);
  s.setProperty('--accent-a08', `rgba(${r},${g},${b},0.08)`);
  s.setProperty('--accent-a10', `rgba(${r},${g},${b},0.10)`);
  s.setProperty('--accent-a12', `rgba(${r},${g},${b},0.12)`);
  s.setProperty('--accent-a15', `rgba(${r},${g},${b},0.15)`);
  s.setProperty('--accent-a20', `rgba(${r},${g},${b},0.20)`);
  s.setProperty('--accent-a25', `rgba(${r},${g},${b},0.25)`);
  s.setProperty('--accent-a30', `rgba(${r},${g},${b},0.30)`);
  s.setProperty('--gradient-end', hex === '#7C5CFF' ? '#2F7DFF' : '#7C5CFF');
}

function RevealOnScroll({ children, delay = 0, style = {}, className = '' }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setTimeout(() => el.classList.add('visible'), delay);
        observer.disconnect();
      }
    }, { threshold: 0.1, rootMargin: '0px 0px -32px 0px' });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);
  return <div ref={ref} className={`reveal ${className}`} style={style}>{children}</div>;
}

function SectionHeader({ eyebrow, title, titleDim, sub, align = 'center' }) {
  const wrapStyle = {
    textAlign: align,
    marginBottom: 56,
    maxWidth: align === 'center' ? 740 : 'none',
    marginLeft: align === 'center' ? 'auto' : 0,
    marginRight: align === 'center' ? 'auto' : 0,
  };
  return (
    <div style={wrapStyle}>
      {eyebrow && (
        <RevealOnScroll>
          <div className="eyebrow" style={{ marginBottom: 16 }}>{eyebrow}</div>
        </RevealOnScroll>
      )}
      <RevealOnScroll delay={80}>
        <h2 className="heading-display" style={{
          fontSize: 'clamp(28px, 4.5vw, 52px)',
          color: '#0A0A0F',
          textWrap: 'balance',
        }}>
          {title}{titleDim && <span style={{ color: 'rgba(10,10,15,0.28)' }}>{titleDim}</span>}
        </h2>
      </RevealOnScroll>
      {sub && (
        <RevealOnScroll delay={140}>
          <p style={{
            fontSize: 'clamp(15px, 1.6vw, 18px)',
            color: 'rgba(10,10,15,0.45)',
            lineHeight: 1.65, marginTop: 20, textWrap: 'pretty',
          }}>{sub}</p>
        </RevealOnScroll>
      )}
    </div>
  );
}

function Pill({ children, accent = false }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 16px', borderRadius: 999,
      background: accent ? 'rgba(124,92,255,0.12)' : 'var(--accent-a10)',
      border: `1px solid ${accent ? 'rgba(124,92,255,0.25)' : 'var(--accent-a20)'}`,
      color: accent ? '#7C5CFF' : 'var(--accent)',
      fontSize: 13, fontWeight: 600,
    }}>
      {children}
    </span>
  );
}

Object.assign(window, { updateAccentVars, RevealOnScroll, SectionHeader, Pill });