// Shared primitives: Badge, Button, SectionHeader, KPI, Chip, etc.

const Badge = ({ icon: IconCmp, children, tone="default" }) => {
  const tones = {
    default: "border-border bg-background text-muted-foreground",
    primary: "border-primary/25 bg-primary/5 text-primary",
    emerald: "border-emerald-500/25 bg-emerald-500/5 text-emerald-700 dark:text-emerald-400",
  };
  return (
    <span className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-wider ${tones[tone]}`}>
      {IconCmp ? <IconCmp size={12} /> : null}
      <span>{children}</span>
    </span>
  );
};

const Button = ({ children, variant="primary", icon: IconCmp, href="#", size="md", className="", iconRight=true }) => {
  const base = "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background";
  const sizes = { sm:"h-8 px-3 text-[13px]", md:"h-10 px-4 text-sm", lg:"h-12 px-6 text-[15px]" };
  const variants = {
    primary: "bg-primary text-primary-foreground hover:brightness-110 shadow-[0_1px_0_0_rgba(255,255,255,0.25)_inset,0_8px_20px_-8px_rgba(234,88,12,0.5)]",
    outline: "border border-border bg-background hover:bg-muted text-foreground",
    ghost: "text-foreground hover:bg-muted",
  };
  return (
    <a href={href} className={`${base} ${sizes[size]} ${variants[variant]} ${className}`}>
      {IconCmp && !iconRight ? <IconCmp size={16} /> : null}
      <span>{children}</span>
      {IconCmp && iconRight ? <IconCmp size={16} /> : null}
    </a>
  );
};

const SectionHeader = ({ badge, badgeIcon, title, lead, align="center", accent }) => (
  <div className={`${align==="center"?"text-center mx-auto":""} max-w-3xl`}>
    {badge && <div className="mb-5"><Badge icon={badgeIcon}>{badge}</Badge></div>}
    <h2 className="font-display text-4xl md:text-5xl font-semibold tracking-tight text-balance leading-[1.05]">
      {title}
    </h2>
    {lead && <p className="mt-5 text-base md:text-lg text-muted-foreground text-pretty leading-relaxed">{lead}</p>}
  </div>
);

// KPI tile used in mocks
const KPI = ({ label, value, delta, tone="neutral" }) => {
  const tones = {
    neutral: "text-foreground",
    rose: "text-rose-600 dark:text-rose-400",
    emerald: "text-emerald-600 dark:text-emerald-500",
  };
  return (
    <div className="rounded-lg border border-border bg-background/60 p-3">
      <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{label}</div>
      <div className={`mt-1 text-2xl font-semibold tabular font-display tracking-tight ${tones[tone]}`}>{value}</div>
      {delta && <div className={`text-[11px] tabular mt-0.5 ${tone==="neutral"?"text-muted-foreground":tones[tone]}`}>{delta}</div>}
    </div>
  );
};

// Small status chip used in lists
const Chip = ({ tone="neutral", children, size="sm" }) => {
  const tones = {
    neutral: "bg-muted text-foreground",
    rose: "bg-rose-100 text-rose-700 dark:bg-rose-950/50 dark:text-rose-300",
    amber: "bg-amber-100 text-amber-700 dark:bg-amber-950/50 dark:text-amber-300",
    emerald: "bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300",
    sky: "bg-sky-100 text-sky-700 dark:bg-sky-950/50 dark:text-sky-300",
    primary: "bg-primary/10 text-primary",
  };
  const sizes = { xs:"text-[10px] px-1.5 py-0.5", sm:"text-[11px] px-2 py-0.5" };
  return <span className={`inline-flex items-center rounded-md font-medium tabular ${tones[tone]} ${sizes[size]}`}>{children}</span>;
};

const Dot = ({ tone="neutral" }) => {
  const tones = {
    rose:"bg-rose-500", amber:"bg-amber-500", emerald:"bg-emerald-500", sky:"bg-sky-500", primary:"bg-primary"
  };
  return <span className={`inline-block h-1.5 w-1.5 rounded-full ${tones[tone]||"bg-muted-foreground"}`} />;
};

// Card wrapper used for mocks
const MockCard = ({ title, meta, children, className="" }) => (
  <div className={`rounded-2xl border border-border bg-card p-4 md:p-5 ring-accent mock-card ${className}`}>
    {(title || meta) && (
      <div className="flex items-baseline justify-between gap-4 mb-4">
        <div className="text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">{title}</div>
        {meta && <div className="text-[11px] tabular text-muted-foreground">{meta}</div>}
      </div>
    )}
    {children}
  </div>
);

// Soft tile with icon+number+label used in effect counter
const EffectRow = ({ icon: IconCmp, label, value }) => (
  <div className="flex items-center gap-3 py-2.5">
    <div className="grid h-8 w-8 place-items-center rounded-md bg-primary/10 text-primary">
      <IconCmp size={16} />
    </div>
    <div className="text-sm text-foreground">{label}</div>
    <div className="ml-auto text-base font-semibold tabular font-display">{value}</div>
  </div>
);

Object.assign(window, { Badge, Button, SectionHeader, KPI, Chip, Dot, MockCard, EffectRow });