// site-brand.jsx — Reusable brand atoms for the service site
// Pulled from the v4 brand work: M PLUS Rounded 1c 900 logo + #2196F3 primary

const PRIM = "#2196F3";
const PRIM_DARK = "#1976D2";
const PRIM_SOFT = "#E3F2FD";
const NAVY = "#1F2A44";
const INK = "#0F172A";
const SUB = "#374151";
const MUTED = "#6B7280";
const FAINT = "#9CA3AF";
const LINE = "#E5E7EB";
const LINE_F = "#F3F4F6";
const PAPER = "#FAFAF7";

const WM = "'M PLUS Rounded 1c', sans-serif";
const HD = "'Noto Sans JP', sans-serif";
const MN = "'JetBrains Mono', ui-monospace, monospace";

function Wordmark({ size = 24, color = PRIM, className, style }) {
  return (
    <span className={className} style={{
      fontFamily: WM, fontWeight: 900, fontSize: size,
      letterSpacing: "-0.02em", color, lineHeight: 1, whiteSpace: "nowrap",
      fontFeatureSettings: '"palt"', display: "inline-block", ...style,
    }}>脚本パックン</span>
  );
}

function PaMark({ size = 24, color = PRIM, className, style }) {
  return (
    <span className={className} style={{
      fontFamily: WM, fontWeight: 900, fontSize: size,
      color, lineHeight: 1, display: "inline-block", ...style,
    }}>パ</span>
  );
}

// Use this for ALL body/heading text on the site so we have consistent type
function Heading({ as: Tag = "h2", size = 40, weight = 800, color = INK, className, children, style }) {
  return (
    <Tag className={className} style={{
      fontFamily: HD, fontWeight: weight, fontSize: size, color,
      lineHeight: 1.3, letterSpacing: "-0.015em",
      fontFeatureSettings: '"palt"', margin: 0, ...style,
    }}>{children}</Tag>
  );
}

// Small label / overline
function Overline({ children, color = PRIM, className }) {
  return (
    <div className={className} style={{
      fontFamily: HD, fontSize: 12, fontWeight: 700,
      letterSpacing: ".18em", color, textTransform: "uppercase",
    }}>{children}</div>
  );
}

function PrimaryButton({ children, href, large, className, style }) {
  return (
    <a href={href} className={className} style={{
      background: PRIM, color: "#fff",
      padding: large ? "16px 28px" : "12px 22px",
      borderRadius: 999, fontWeight: 700, fontFamily: HD,
      fontSize: large ? 16 : 14, display: "inline-flex", alignItems: "center", gap: 8,
      textDecoration: "none", boxShadow: `0 6px 20px -6px ${PRIM}88`,
      transition: "transform .15s, box-shadow .15s",
      whiteSpace: "nowrap",
      ...style,
    }}>{children}</a>
  );
}

function GhostButton({ children, href, className, style }) {
  return (
    <a href={href} className={className} style={{
      background: "transparent", color: SUB,
      padding: "10px 18px", borderRadius: 999, fontWeight: 600, fontFamily: HD,
      fontSize: 14, display: "inline-flex", alignItems: "center", gap: 8,
      textDecoration: "none", border: `1px solid ${LINE}`,
      transition: "border-color .15s, color .15s",
      whiteSpace: "nowrap",
      ...style,
    }}>{children}</a>
  );
}

Object.assign(window, {
  PRIM, PRIM_DARK, PRIM_SOFT, NAVY, INK, SUB, MUTED, FAINT, LINE, LINE_F, PAPER,
  WM, HD, MN,
  Wordmark, PaMark, Heading, Overline, PrimaryButton, GhostButton,
});