// ============================================================
// Shared bits used across sections
// ============================================================

const Eyebrow = ({ children, color = 'var(--gold-400)' }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <div style={{ width: 20, height: 1, background: color }} />
    <div style={{
      fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase',
      color, fontFamily: 'RH Phonic', fontWeight: 500,
    }}>{children}</div>
  </div>
);

const SectionHeader = ({ eye, title, sub, align = 'split' }) => (
  <div className="section-header" style={{
    maxWidth: 1200, margin: '0 auto 64px', display: 'flex',
    alignItems: 'flex-end', justifyContent: 'space-between', gap: 64,
    flexDirection: align === 'center' ? 'column' : 'row',
    textAlign: align === 'center' ? 'center' : 'left',
  }}>
    <div>
      <div style={{ marginBottom: 22 }}><Eyebrow>{eye}</Eyebrow></div>
      <h2 data-reveal style={{
        fontFamily: 'RH Phonic', fontWeight: 700,
        fontSize: 'clamp(40px,5vw,72px)', lineHeight: .98,
        letterSpacing: '-.025em', textTransform: 'uppercase',
        margin: 0, maxWidth: 820,
      }}>{title}</h2>
    </div>
    {sub && (
      <div data-reveal style={{
        fontFamily: 'Martina Plantijn', fontStyle: 'italic',
        fontSize: 19, color: 'var(--fg-muted)', maxWidth: 380,
        lineHeight: 1.5, paddingBottom: 8,
      }}>{sub}</div>
    )}
  </div>
);

const Btn = ({ variant = 'gold', size = 'md', children, onClick, type, style }) => {
  const isGold = variant === 'gold';
  const padding = size === 'lg' ? '18px 28px' : size === 'sm' ? '10px 16px' : '14px 22px';
  const fontSize = size === 'lg' ? 13 : size === 'sm' ? 11 : 12;
  return (
    <button type={type || 'button'} onClick={onClick} style={{
      background: isGold ? 'var(--gold-400)' : 'transparent',
      color: isGold ? '#000' : 'var(--fg)',
      border: isGold ? 'none' : '1px solid var(--border-strong)',
      borderRadius: 4, padding, fontFamily: 'RH Phonic', fontSize,
      letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 500,
      cursor: 'pointer', whiteSpace: 'nowrap',
      boxShadow: isGold ? '0 0 0 1px rgba(196,172,120,.45), 0 8px 32px rgba(196,172,120,.18)' : 'none',
      transition: 'transform 120ms var(--ease-out), background 120ms var(--ease-out)',
      ...style,
    }}
    onMouseDown={e => e.currentTarget.style.transform = 'scale(.98)'}
    onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
    >{children}</button>
  );
};

Object.assign(window, { Eyebrow, SectionHeader, Btn });