// Shared UI primitives

const COLOR_MAP = {
  coral: { bg: 'bg-coral-50',  ring: 'ring-coral-300/50',  text: 'text-coral-700',  chip: 'bg-coral-100 text-coral-700',  dot: 'bg-coral-500' },
  teal:  { bg: 'bg-teal-50',   ring: 'ring-teal-300/50',   text: 'text-teal-700',   chip: 'bg-teal-100 text-teal-700',    dot: 'bg-teal-500'  },
  sage:  { bg: 'bg-sage-50',   ring: 'ring-sage-300/50',   text: 'text-sage-600',   chip: 'bg-sage-100 text-sage-600',    dot: 'bg-sage-500'  },
  amber: { bg: 'bg-amber-50',  ring: 'ring-amber-300/50',  text: 'text-amber-600',  chip: 'bg-amber-100 text-amber-600',  dot: 'bg-amber-500' },
  lilac: { bg: 'bg-lilac-50',  ring: 'ring-lilac-300/50',  text: 'text-lilac-600',  chip: 'bg-lilac-100 text-lilac-600',  dot: 'bg-lilac-500' },
};
window.COLOR_MAP = COLOR_MAP;

function SectionHeader({ kicker, title, subtitle, num }) {
  return (
    <header className="mb-10">
      <div className="flex items-center gap-3 text-ink-muted">
        {num && <span className="font-mono text-[11px] tracking-[0.18em] uppercase">{num}</span>}
        <span className="h-px flex-1 bg-ink/10 max-w-[40px]"></span>
        <span className="text-[11px] uppercase tracking-[0.18em] font-medium">{kicker}</span>
      </div>
      <h1 className="font-display text-[44px] md:text-[56px] leading-[1.02] tracking-tighter2 text-ink mt-3 max-w-3xl text-balance">{title}</h1>
      {subtitle && <p className="mt-4 text-ink-muted text-lg max-w-2xl leading-relaxed">{subtitle}</p>}
    </header>
  );
}

function Card({ children, className = '', as: As = 'div', ...rest }) {
  return (
    <As className={`bg-paper-card border hairline rounded-2xl shadow-card ${className}`} {...rest}>
      {children}
    </As>
  );
}

function Chip({ children, className = '', tone = 'ink' }) {
  const toneCls = tone === 'ink'
    ? 'bg-ink/5 text-ink-soft border-ink/10'
    : tone === 'paper'
    ? 'bg-paper-warm text-ink-soft border-ink/10'
    : tone;
  return (
    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium border ${toneCls} ${className}`}>
      {children}
    </span>
  );
}

function Stat({ value, label, hint, accent = 'ink' }) {
  const accentCls = {
    ink: 'text-ink',
    coral: 'text-coral-600',
    teal: 'text-teal-600',
    sage: 'text-sage-600',
    amber: 'text-amber-600',
    lilac: 'text-lilac-600',
  }[accent] || 'text-ink';
  return (
    <div>
      <div className={`font-display font-medium text-5xl leading-none tracking-tighter2 ${accentCls}`}>{value}</div>
      <div className="mt-2 text-sm text-ink-soft font-medium">{label}</div>
      {hint && <div className="mt-1 text-xs text-ink-muted">{hint}</div>}
    </div>
  );
}

function RubricRow({ nivel, desc, idx }) {
  const cfg = [
    { lbl: 'Inicial',    bg: 'bg-coral-500',  pill: 'bg-coral-100 text-coral-700' },
    { lbl: 'En proceso', bg: 'bg-amber-500',  pill: 'bg-amber-100 text-amber-600' },
    { lbl: 'Logrado',    bg: 'bg-sage-500',   pill: 'bg-sage-100 text-sage-600' },
  ][idx];
  return (
    <div className="flex items-start gap-3 py-3 border-t hairline first:border-t-0">
      <span className={`mt-1.5 inline-flex items-center justify-center w-3 h-3 rounded-full ${cfg.bg} shrink-0`}>
        <span className="w-3 h-3 rounded-full bg-white/30"></span>
      </span>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <span className={`text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full ${cfg.pill}`}>{cfg.lbl}</span>
          <span className="text-[11px] text-ink-muted font-mono">{['I','P','L'][idx]}</span>
        </div>
        <p className="mt-1.5 text-sm text-ink-soft leading-relaxed">{desc}</p>
      </div>
    </div>
  );
}

window.SectionHeader = SectionHeader;
window.Card = Card;
window.Chip = Chip;
window.Stat = Stat;
window.RubricRow = RubricRow;