// Shared.jsx — section primitives
function Section({ id, children, warm, style }) {
  return (
    <section id={id} style={{
      background: warm ? 'var(--surface-warm)' : 'var(--bg)',
      padding: 'clamp(64px, 12vh, 128px) clamp(20px, 6vw, 80px)',
      position: 'relative',
      ...style,
    }}>{children}</section>
  );
}

function SectionHead({ eyebrow, title, align = 'center' }) {
  return (
    <div className="dk-reveal" style={{ textAlign: align, marginBottom: 'clamp(40px,7vh,72px)' }}>
      <div style={{ color: 'var(--gold)', fontSize: 18, marginBottom: 16 }}>✦</div>
      {eyebrow && <div style={{
        fontFamily: 'var(--font-display)', fontWeight: 600, textTransform: 'uppercase',
        letterSpacing: '0.22em', fontSize: 12, color: 'var(--gold)', marginBottom: 14,
      }}>{eyebrow}</div>}
      <h2 style={{ fontSize: 'clamp(28px,5vw,44px)' }}>{title}</h2>
    </div>
  );
}

function Divider({ width = 200 }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', margin: '0 auto' }}>
      <div style={{
        height: 1, width, maxWidth: '60%',
        background: 'linear-gradient(90deg, transparent, var(--gold), transparent)',
        opacity: 0.6,
      }} />
    </div>
  );
}

Object.assign(window, { Section, SectionHead, Divider });