// Ornaments — signature double-rule with Art Déco brackets
function DoubleRule({ width = 320, accent = '#C4A45A', muted = '#1f1a14', style = {} }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, width: '100%', ...style }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, width: width + 80 }}>
        <span style={{ width: 8, height: 8, borderTop: `1px solid ${accent}`, borderLeft: `1px solid ${accent}`, display: 'block' }} />
        <div style={{ flex: 1, height: 1, background: accent }} />
        <span style={{ width: 8, height: 8, borderTop: `1px solid ${accent}`, borderRight: `1px solid ${accent}`, display: 'block' }} />
      </div>
      <div style={{ width: width * 0.6, height: 1, background: accent, opacity: 0.55 }} />
    </div>
  );
}

function ThinRule({ width = 80, color = '#C4A45A', style = {} }) {
  return <div style={{ width, height: 1, background: color, ...style }} />;
}

// Small uppercase eyebrow label with gold dot on both sides
function Eyebrow({ children, align = 'left', color = '#C4A45A', dots = false, style = {} }) {
  const inner = (
    <div style={{
      fontFamily: "'Inter', sans-serif",
      fontSize: 11,
      fontWeight: 500,
      letterSpacing: '0.24em',
      textTransform: 'uppercase',
      color,
      display: 'inline-flex',
      alignItems: 'center',
      gap: 12,
      ...style,
    }}>
      {dots ? <span style={{ width: 24, height: 1, background: color }} /> : null}
      <span>{children}</span>
      {dots ? <span style={{ width: 24, height: 1, background: color }} /> : null}
    </div>
  );
  if (align === 'center') return <div style={{ textAlign: 'center' }}>{inner}</div>;
  return inner;
}

window.DoubleRule = DoubleRule;
window.ThinRule = ThinRule;
window.Eyebrow = Eyebrow;