/* Small reusable building blocks */

const Chip = ({children, variant, className="", ...rest}) => {
  const cls = `chip ${variant ? `chip-${variant}` : ''} ${className}`;
  return <span className={cls} {...rest}>{children}</span>;
};

const Stars = ({value=5, size=13}) => {
  const full = Math.floor(value);
  const half = value - full >= 0.5;
  return (
    <span style={{display:'inline-flex', gap:2, color:'var(--gold)', alignItems:'center'}}>
      {Array.from({length: 5}).map((_, i) => (
        <I.Star key={i} size={size} filled={i < full || (i === full && half)} />
      ))}
    </span>
  );
};

const Avatar = ({name, hue=30, size=72, ring=false}) => {
  const initials = name.split(' ').filter(Boolean).slice(-2).map(w => w[0]).join('').toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: `oklch(0.82 0.04 ${hue})`,
      color: `oklch(0.32 0.06 ${hue})`,
      display: 'grid', placeItems: 'center',
      fontFamily: 'var(--font-display)',
      fontSize: size * 0.38,
      fontWeight: 400,
      letterSpacing: '-0.02em',
      flexShrink: 0,
      boxShadow: ring ? '0 0 0 4px var(--snow), 0 0 0 5px var(--ink-10)' : 'none',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* subtle gradient wash to feel like a portrait */}
      <div style={{
        position:'absolute', inset:0,
        background: `radial-gradient(circle at 30% 25%, oklch(0.92 0.04 ${hue}) 0%, transparent 50%), radial-gradient(circle at 70% 85%, oklch(0.55 0.08 ${hue+15}) 0%, transparent 60%)`,
        opacity: 0.9,
      }}/>
      <span style={{position:'relative', zIndex:1}}>{initials}</span>
    </div>
  );
};

/* SectionHeader — editorial title block used across sections */
const SectionHeader = ({eyebrow, title, lead, align="left", accent}) => (
  <div className={`section-header ${align === 'center' ? 'text-center' : ''}`} style={{
    display: 'flex', flexDirection: 'column', gap: 18,
    maxWidth: align === 'center' ? 760 : 860,
    margin: align === 'center' ? '0 auto' : 0,
    marginBottom: 64,
  }}>
    {eyebrow && (
      <div style={{display:'flex', alignItems:'center', gap:12, justifyContent: align === 'center' ? 'center' : 'flex-start'}}>
        <span style={{
          width: 28, height: 1, background: 'var(--clay)', display: 'inline-block',
        }}/>
        <span className="eyebrow" style={{color:'var(--clay)'}}>{eyebrow}</span>
      </div>
    )}
    <h2 className="display-lg">{title}</h2>
    {lead && <p className="body-lg" style={{maxWidth: 640, margin: align === 'center' ? '0 auto' : 0}}>{lead}</p>}
  </div>
);

/* Hook: fade-up on scroll */
function useReveal(ref, opts = {}) {
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in-view');
          io.unobserve(e.target);
        }
      });
    }, {threshold: 0.15, rootMargin: '0px 0px -60px 0px', ...opts});
    el.querySelectorAll('.reveal').forEach(n => io.observe(n));
    return () => io.disconnect();
  }, []);
}

Object.assign(window, { Chip, Stars, Avatar, SectionHeader, useReveal });