// primitives.jsx — shared small UI pieces

function Star({ filled = true }) {
  return <span style={{ color: filled ? 'var(--star)' : 'var(--ink-3)' }}>★</span>;
}

function Stars({ n = 5 }) {
  return (
    <span className="stars" aria-label={`${n} von 5 Sterne`}>
      {Array.from({ length: 5 }).map((_, i) => <Star key={i} filled={i < n} />)}
    </span>
  );
}

function Brand({ sub = true }) {
  return (
    <div className="brand">
      <img src="assets/logo.png" alt="LLC Setup — US LLC, EIN, ITIN" className="brand-logo" style={{ height: 38 }} />
    </div>
  );
}

function Arrow() { return <span className="arrow">→</span>; }

function Eyebrow({ children }) {
  return <div className="eyebrow"><span className="dot"></span>{children}</div>;
}

function SectionHead({ eyebrow, title, sub, style }) {
  return (
    <div className="section-head" style={style}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2>{title}</h2>
      {sub && <p>{sub}</p>}
    </div>
  );
}

Object.assign(window, { Star, Stars, Brand, Arrow, Eyebrow, SectionHead });