/* global React */
const { useState } = React;

// ── Brand wordmark ────────────────────────────────────────────────────────
function BrandWordmark({ size = "lg", className = "", href = "#" }) {
  const sizes = { sm: "text-base", md: "text-xl", lg: "text-2xl" };
  return (
    <a href={href} className={`flex-shrink-0 tracking-widest font-light brand-font group ${sizes[size]} ${className}`}>
      <span className="font-bold text-stone-900 group-hover:text-stone-600 transition-colors">GAMACA</span>
      <span className="text-stone-400">.AI</span>
    </a>
  );
}

// ── Eyebrow text (UPPERCASE, wide tracking) ───────────────────────────────
function Eyebrow({ children, className = "", tone = "muted" }) {
  const tones = {
    muted: "text-stone-500",
    invertMuted: "text-stone-400",
    strong: "text-stone-900",
  };
  return (
    <span className={`text-xs font-bold tracking-widest uppercase ${tones[tone]} ${className}`}>
      {children}
    </span>
  );
}

// ── Eyebrow with leading hairline rule (used in references) ──────────────
function RuleEyebrow({ children, tone = "dark" }) {
  const ruleColor = tone === "dark" ? "bg-stone-500" : "bg-stone-400";
  const textColor = tone === "dark" ? "text-stone-400" : "text-stone-500";
  return (
    <div className="flex items-center mb-4">
      <span className={`h-px w-8 ${ruleColor} mr-2`}></span>
      <span className={`text-xs font-bold uppercase tracking-widest ${textColor}`}>{children}</span>
    </div>
  );
}

// ── Numbered marker (the "01" / "02" pill avatar) ─────────────────────────
function NumMarker({ n, variant = "outline" }) {
  if (variant === "filled-dark") {
    return (
      <div className="flex-shrink-0 h-8 w-8 bg-stone-900 text-white flex items-center justify-center text-sm rounded-full">
        {n}
      </div>
    );
  }
  if (variant === "outline-dark") {
    return (
      <div className="flex-shrink-0 h-8 w-8 border border-stone-900 text-stone-900 flex items-center justify-center text-sm rounded-full">
        {n}
      </div>
    );
  }
  // default: small inline outline (used in approach 01/02/03)
  return (
    <dt className="absolute left-0 top-1 h-8 w-8 bg-white border border-stone-200 text-stone-600 rounded-full flex items-center justify-center text-xs font-bold">
      {n}
    </dt>
  );
}

// ── Buttons ───────────────────────────────────────────────────────────────
function Btn({ children, href = "#", variant = "primary", size = "lg", className = "" }) {
  const base = "inline-flex items-center justify-center font-medium transition-all rounded-sm";
  const sizes = {
    sm: "px-6 py-2 text-sm",
    lg: "px-8 py-4 text-base md:text-lg",
  };
  const variants = {
    primary:
      "border border-transparent text-white bg-stone-900 hover:bg-stone-800 shadow-sm",
    secondary:
      "border border-stone-200 text-stone-700 bg-transparent hover:bg-stone-50",
    nav:
      "bg-stone-900 text-white hover:bg-stone-700 shadow-sm border border-transparent",
    contactDark:
      "border border-transparent text-white bg-stone-900 hover:bg-stone-800 shadow-lg hover:shadow-xl",
    contactLight:
      "border border-stone-200 text-stone-900 bg-white hover:bg-stone-50",
  };
  return (
    <a href={href} className={`${base} ${sizes[size]} ${variants[variant]} ${className}`}>
      {children}
    </a>
  );
}

// ── Section header ───────────────────────────────────────────────────────
function SectionHeader({ eyebrow, title, lead, align = "center", invert = false }) {
  const alignCls = align === "center" ? "text-center mx-auto max-w-3xl" : "";
  const titleCls = invert ? "text-white" : "text-stone-900";
  const leadCls = invert ? "text-stone-400" : "text-stone-500";
  return (
    <div className={`mb-16 ${alignCls}`}>
      {eyebrow && <Eyebrow tone={invert ? "invertMuted" : "muted"}>{eyebrow}</Eyebrow>}
      <h2 className={`text-3xl font-bold tracking-tight ${titleCls} mt-2`}>{title}</h2>
      {lead && <p className={`mt-4 text-lg ${leadCls}`}>{lead}</p>}
    </div>
  );
}

// ── Bullet "►" marker for feature lists ───────────────────────────────────
function PointerBullet({ tone = "dark" }) {
  return <span className={`mr-2 ${tone === "dark" ? "text-stone-900" : "text-white"}`}>►</span>;
}

window.GamacaPrimitives = {
  BrandWordmark, Eyebrow, RuleEyebrow, NumMarker, Btn, SectionHeader, PointerBullet,
};