// Site atoms — logo, buttons, primitives shared across sections.

// Locked Dot · B mark. Same form as the brand sheet.
function DotLogo({ size = 24 }) {
  return (
    <span style={{
      fontFamily: '"Hanken Grotesk", sans-serif',
      fontWeight: 700, fontSize: size, lineHeight: 0.9,
      letterSpacing: '-0.045em', color: 'var(--ink)',
      display: 'inline-flex', alignItems: 'baseline',
    }}>
      hyperfocus<span style={{
        display: 'inline-block',
        width: size * 0.20, height: size * 0.20, borderRadius: '50%',
        background: 'var(--ember)',
        marginLeft: size * 0.04, transform: `translateY(${size * -0.02}px)`,
      }} />
    </span>
  );
}

function DotLogoOnDark({ size = 24 }) {
  return (
    <span style={{
      fontFamily: '"Hanken Grotesk", sans-serif',
      fontWeight: 700, fontSize: size, lineHeight: 0.9,
      letterSpacing: '-0.045em', color: 'var(--bone)',
      display: 'inline-flex', alignItems: 'baseline',
    }}>
      hyperfocus<span style={{
        display: 'inline-block',
        width: size * 0.20, height: size * 0.20, borderRadius: '50%',
        background: 'var(--ember)',
        marginLeft: size * 0.04, transform: `translateY(${size * -0.02}px)`,
      }} />
    </span>
  );
}

function Btn({ children, variant = 'primary', size = 'md', as = 'button', ...rest }) {
  const sizes = {
    sm: { padding: '8px 14px', fontSize: 13 },
    md: { padding: '12px 20px', fontSize: 14 },
    lg: { padding: '14px 24px', fontSize: 15 },
  };
  const base = {
    border: 'none', borderRadius: 999, fontWeight: 600,
    letterSpacing: '-0.005em', display: 'inline-flex',
    alignItems: 'center', gap: 8, ...sizes[size],
    transition: 'transform .15s, background .15s, color .15s',
  };
  const variants = {
    primary: { background: 'var(--ink)', color: 'var(--bone)' },
    ghost:   { background: 'transparent', color: 'var(--ink)', border: '1px solid var(--line)' },
    ember:   { background: 'var(--ember)', color: '#fff' },
    onDark:  { background: 'var(--bone)', color: 'var(--ink)' },
  };
  const Comp = as;
  return <Comp style={{ ...base, ...variants[variant] }} {...rest}>{children}</Comp>;
}

function SectionLabel({ children, accent }) {
  return (
    <div className="eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ember)', display: 'inline-block' }} />
      {accent && <span className="accent">{accent}</span>}
      <span>{children}</span>
    </div>
  );
}

// Tiny "→" arrow that matches the wordmark's optical weight.
function Arrow({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M2 7h10M8 3l4 4-4 4" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Reusable rule for section dividers
function Rule({ marginY = 0 }) {
  return <div style={{ height: 1, background: 'var(--line)', margin: `${marginY}px 0` }} />;
}

Object.assign(window, { DotLogo, DotLogoOnDark, Btn, SectionLabel, Arrow, Rule });