/* global React */

function Eyebrow({ children, light, style }) {
  return (
    <p style={{
      fontFamily: 'var(--hg-font-sans)', fontSize: 11.5, fontWeight: 500,
      textTransform: 'uppercase', letterSpacing: '0.22em',
      margin: 0, color: light ? 'var(--hg-cream-300)' : 'var(--hg-fg-muted)',
      ...style,
    }}>{children}</p>
  );
}

function Display({ children, size = 'h1', style }) {
  const sizes = { display: 84, h1: 60, h2: 44, h3: 32 };
  return (
    <h1 style={{
      fontFamily: 'var(--hg-font-display)', fontWeight: 400,
      fontSize: sizes[size], lineHeight: 1.06, letterSpacing: '-0.012em',
      margin: 0, color: 'inherit', textWrap: 'balance',
      ...style,
    }}>{children}</h1>
  );
}

function Lead({ children, light, style }) {
  return (
    <p style={{
      fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
      fontSize: 20, lineHeight: 1.6,
      color: light ? 'var(--hg-cream-100)' : 'var(--hg-fg-soft)',
      margin: 0, maxWidth: '52ch',
      ...style,
    }}>{children}</p>
  );
}

function ThreeBeat({ children, light, style }) {
  return (
    <p style={{
      fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontSize: 16,
      letterSpacing: '0.02em',
      margin: 0,
      color: light ? 'var(--hg-cream-200)' : 'var(--hg-sage-700)',
      ...style,
    }}>{children}</p>
  );
}

function Pill({ children, variant = 'primary', onClick, style, as = 'button', href }) {
  const variants = {
    primary: { background: 'var(--hg-sage-700)', color: 'var(--hg-cream-50)', border: 'none' },
    outline: { background: 'transparent', color: 'var(--hg-fg)', border: '1px solid var(--hg-fg)' },
    onDark:  { background: 'var(--hg-cream-100)', color: 'var(--hg-sage-900)', border: 'none' },
    clay:    { background: 'var(--hg-clay-600)', color: '#fff', border: 'none' },
  };
  const Comp = as;
  return (
    <Comp
      onClick={onClick}
      href={href}
      style={{
        fontFamily: 'var(--hg-font-sans)', fontWeight: 500, fontSize: 12,
        textTransform: 'uppercase', letterSpacing: '0.22em',
        padding: '15px 32px', borderRadius: 999, cursor: 'pointer',
        textDecoration: 'none', display: 'inline-block',
        transition: 'opacity .2s, background .2s, box-shadow .2s',
        ...variants[variant], ...style,
      }}
    >{children}</Comp>
  );
}

function Diamond({ color = 'var(--hg-sage-700)', size = 14 }) {
  return <span aria-hidden="true" style={{ color, fontSize: size, lineHeight: 1 }}>◈</span>;
}

function Divider({ light, style }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 16,
      color: light ? 'var(--hg-cream-300)' : 'var(--hg-line)',
      ...style,
    }}>
      <span style={{ flex: 1, height: 1, background: 'currentColor', opacity: 0.6 }} />
      <Diamond color={light ? 'var(--hg-cream-200)' : 'var(--hg-sage-700)'} />
      <span style={{ flex: 1, height: 1, background: 'currentColor', opacity: 0.6 }} />
    </div>
  );
}

Object.assign(window, { Eyebrow, Display, Lead, ThreeBeat, Pill, Diamond, Divider });