// SectionLabel - 01 · The Problem with a 60px trailing gold line.
const SectionLabel = ({ number, children }) => (
  <div style={labelStyles.row}>
    <span style={labelStyles.text}>
      {number ? <>{number} <span style={{ opacity: 0.6 }}>·</span> </> : null}{children}
    </span>
    <span style={labelStyles.line} aria-hidden />
  </div>
);

const labelStyles = {
  row: {
    display: 'inline-flex', alignItems: 'center', gap: 16,
    marginBottom: 32,
  },
  text: {
    fontFamily: 'var(--font-mono)', fontSize: 12,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'var(--fg-accent)',
  },
  line: {
    display: 'inline-block', width: 60, height: 1,
    background: 'var(--fg-accent)', opacity: 0.6,
  },
};

// Headline - Cormorant display H2 with one italicized gold word.
// Pass children with an <em>...</em> for the italic gold moment.
const Headline = ({ as = 'h2', size = 'd2', children, style = {} }) => {
  const Tag = as;
  const sizes = {
    d1: { fontSize: 'clamp(56px, 7.2vw, 104px)', lineHeight: 0.98, letterSpacing: '-0.02em' },
    d2: { fontSize: 'clamp(40px, 4.6vw, 64px)',  lineHeight: 1.02, letterSpacing: '-0.015em' },
    d3: { fontSize: 'clamp(28px, 3vw, 40px)',    lineHeight: 1.1,  letterSpacing: '-0.01em' },
    d4: { fontSize: 'clamp(22px, 2.2vw, 28px)',  lineHeight: 1.2 },
  };
  return (
    <Tag style={{
      fontFamily: 'var(--font-display)',
      fontWeight: 500, color: 'var(--fg-1)', margin: 0,
      textWrap: 'balance',
      ...sizes[size], ...style,
    }}>
      {children}
    </Tag>
  );
};

Object.assign(window, { SectionLabel, Headline });