// Renders the wordmark inline using DOM (not SVG) so it inherits typography
// from the active direction. Matches the rules in assets/wordmark-*.svg.
function Wordmark({ size = 'hero', align = 'left' }) {
  const styles = {
    hero: { fontSize: 'inherit', lineHeight: 'inherit' },
    section: { fontSize: 'var(--display-2)', lineHeight: 'var(--leading-tight)' },
    inline: { fontSize: '36px', lineHeight: 1.1 },
  };
  const s = styles[size] || styles.hero;
  return (
    <span
      style={{
        fontFamily: 'var(--font-display)',
        fontWeight: 340,
        letterSpacing: 'inherit',
        fontFeatureSettings: 'var(--display-feature)',
        textAlign: align,
        display: 'inline',
        color: 'var(--fg)',
        ...s,
      }}
    >
      Stef<span className="tussenvoegsel">van den</span>Oever
    </span>
  );
}

window.Wordmark = Wordmark;