// components/Primitives.jsx — Logo marks, wordmark, basic UI atoms.

function SettledMark({ size = 32, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block', flexShrink: 0 }}>
      <rect x="14" y="17" width="26" height="3" rx="1.5" fill={color} />
      <rect x="10" y="24" width="30" height="3" rx="1.5" fill={color} />
      <rect x="8"  y="31" width="32" height="3" rx="1.5" fill={color} />
    </svg>
  );
}

function Wordmark({ size = 22, color = 'currentColor', accent = '#B8853A' }) {
  return (
    <span style={{
      fontFamily: "'DM Sans', sans-serif",
      fontWeight: 500,
      fontSize: size,
      letterSpacing: '-0.035em',
      color,
      lineHeight: 1,
      display: 'inline-flex',
      alignItems: 'baseline',
      whiteSpace: 'nowrap',
    }}>
      <span>Settled</span>
      <span style={{ color: accent, margin: `0 ${size * 0.18}px` }}>·</span>
      <span style={{ fontWeight: 400 }}>Books</span>
    </span>
  );
}

function Logo({ size = 22, color = 'currentColor', accent = '#B8853A', mark = true }) {
  return (
    <a href="#/" onClick={(e) => { e.preventDefault(); window.SBNav('/'); }}
       style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.55, color }}>
      {mark && <SettledMark size={size * 1.45} color={color} />}
      <Wordmark size={size} color={color} accent={accent} />
    </a>
  );
}

function LogoBlock({ size = 22, color = 'currentColor', accent = '#B8853A' }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.55, color }}>
      <SettledMark size={size * 1.45} color={color} />
      <Wordmark size={size} color={color} accent={accent} />
    </span>
  );
}

function Eyebrow({ children, color }) {
  return <div className="sb-eyebrow" style={color ? { color } : undefined}>{children}</div>;
}

function Section({ tone = 'linen', children, style }) {
  const cls = 'sb-section' + (tone === 'bone' ? ' sb-section--bone'
                            : tone === 'cream' ? ' sb-section--cream'
                            : tone === 'ink' ? ' sb-section--ink' : '');
  return (
    <section className={cls} style={style}>
      <div className="sb-container">{children}</div>
    </section>
  );
}

function Btn({ as = 'button', variant = 'primary', children, href, onClick, ...rest }) {
  const cls = 'sb-btn sb-btn--' + variant;
  if (as === 'a' || href) {
    return <a className={cls} href={href || '#'} onClick={onClick} {...rest}>{children}</a>;
  }
  return <button className={cls} onClick={onClick} {...rest}>{children}</button>;
}

function NavLink({ to, children, current }) {
  const active = current === to;
  return (
    <a href={'#' + to}
       onClick={(e) => { e.preventDefault(); window.SBNav(to); }}
       style={{
         fontFamily: "'DM Sans', sans-serif",
         fontSize: 15,
         color: active ? 'var(--sb-ink)' : 'var(--sb-ink-soft)',
         padding: '6px 0',
         borderBottom: active ? '1px solid var(--sb-amber)' : '1px solid transparent',
         transition: 'color .15s, border-color .15s',
       }}>
      {children}
    </a>
  );
}

window.SettledMark = SettledMark;
window.Wordmark = Wordmark;
window.Logo = Logo;
window.LogoBlock = LogoBlock;
window.Eyebrow = Eyebrow;
window.Section = Section;
window.Btn = Btn;
window.NavLink = NavLink;