// Shared UI primitives — cards, tags, section headings.
window.BITSUI = (() => {
  const Section = ({ eyebrow, title, kicker, children, id }) => (
    <section id={id} className="relative max-w-7xl mx-auto px-6 md:px-10 py-14">
      <div className="mb-10">
        {eyebrow && (
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-bits-goldDeep mb-3">
            {eyebrow}
          </div>
        )}
        <h2 className="font-serif text-3xl md:text-5xl text-bits-ink leading-[1.05] tracking-tight">
          {title}
        </h2>
        {kicker && (
          <p className="mt-4 text-bits-steel max-w-3xl text-[15px] md:text-base leading-relaxed">
            {kicker}
          </p>
        )}
      </div>
      <div className="fade-in">{children}</div>
    </section>
  );

  const Card = ({ children, className = "", as: As = "div", ...rest }) => (
    <As
      className={`relative rounded-2xl bg-white/70 border border-bits-line/60 shadow-card p-6 ${className}`}
      {...rest}
    >
      {children}
    </As>
  );

  const Tag = ({ children, tone = "navy" }) => {
    const tones = {
      navy: "bg-bits-deep/8 text-bits-deep border-bits-deep/15",
      gold: "bg-bits-gold/15 text-bits-goldDeep border-bits-gold/40",
      muted: "bg-bits-ink/5 text-bits-steel border-bits-ink/10",
      ok: "bg-emerald-600/10 text-emerald-800 border-emerald-600/20",
    };
    return (
      <span
        className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-[11px] font-medium uppercase tracking-wider ${tones[tone]}`}
      >
        {children}
      </span>
    );
  };

  const Stat = ({ value, label, hint }) => (
    <div className="flex flex-col gap-1">
      <div className="font-serif text-4xl text-bits-deep num leading-none">
        {value}
      </div>
      <div className="text-[13px] text-bits-ink font-medium">{label}</div>
      {hint && <div className="text-[12px] text-bits-steel">{hint}</div>}
    </div>
  );

  const Divider = () => (
    <div className="max-w-7xl mx-auto px-6 md:px-10">
      <div className="h-px bg-gradient-to-r from-transparent via-bits-line to-transparent" />
    </div>
  );

  const Bullet = ({ children }) => {
    const { Dot } = window.BITSIcons;
    return (
      <li className="flex items-start gap-2.5 text-[14px] text-bits-ink/85 leading-relaxed">
        <span className="mt-2 text-bits-gold shrink-0">
          <Dot width="8" height="8" />
        </span>
        <span>{children}</span>
      </li>
    );
  };

  return { Section, Card, Tag, Stat, Divider, Bullet };
})();