/**
 * Tử Vi Số · Bát Quái logo mark
 *
 * Minimal SVG bagua with center gold dot — used in header + footer.
 * Wrapped in a red gradient square with thin gold border (brand container).
 */
export function BrandLogo({ size = 36 }: { size?: number }) {
  const inner = Math.round(size * 0.56);
  return (
    <span
      className="border-brand-gold/30 from-brand-red-deep to-brand-red flex items-center justify-center rounded-md border bg-gradient-to-br"
      style={{ width: size, height: size }}
      aria-hidden="true"
    >
      <svg
        width={inner}
        height={inner}
        viewBox="0 0 24 24"
        fill="none"
        stroke="#D4AF37"
        strokeWidth={1.5}
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <circle cx="12" cy="12" r="9" />
        <path d="M12 3 L12 21 M3 12 L21 12 M5.6 5.6 L18.4 18.4 M18.4 5.6 L5.6 18.4" />
        <circle cx="12" cy="12" r="3" fill="#D4AF37" stroke="none" />
      </svg>
    </span>
  );
}

/**
 * Word + tagline lockup used next to the logo.
 */
export function BrandWordmark({ showTagline = true }: { showTagline?: boolean }) {
  return (
    <span className="flex flex-col leading-none">
      <span className="font-display text-ink-primary text-lg font-semibold">Tử Vi Số</span>
      {showTagline ? (
        <span className="text-ink-muted hidden text-[10px] tracking-[0.18em] uppercase sm:block">
          Diễn cầm tam thế
        </span>
      ) : null}
    </span>
  );
}