// Three certified-agent badge variants.
const Badge = ({ style = "hex", agent = "atlas-7b", score = 87, tier = "Gold" }) => {
  if (style === "seal") return <SealBadge agent={agent} score={score} tier={tier}/>;
  if (style === "tier") return <TierBadge agent={agent} score={score} tier={tier}/>;
  return <HexBadge agent={agent} score={score} tier={tier}/>;
};

function HexBadge({ agent, score, tier }) {
  // hexagon path
  const points = [];
  const cx = 100, cy = 100, r = 88;
  for (let i = 0; i < 6; i++) {
    const a = (60 * i - 90) * Math.PI / 180;
    points.push(`${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`);
  }
  return (
    <div className="badge-card">
      <svg viewBox="0 0 200 200" width="220" height="220">
        <defs>
          <linearGradient id="hbg" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="var(--surface)"/>
            <stop offset="1" stopColor="var(--surface-2)"/>
          </linearGradient>
        </defs>
        <polygon points={points.join(" ")} fill="url(#hbg)" stroke="var(--accent)" strokeWidth="2"/>
        <polygon points={points.join(" ")} fill="none" stroke="var(--accent)" strokeWidth="1" strokeDasharray="2 3" transform="scale(0.86) translate(15.5, 15.5)"/>
        <text x="100" y="58" textAnchor="middle" fontSize="9" fontFamily="var(--mono)" fill="var(--muted)" letterSpacing="2">ISLEGIT.AI</text>
        <text x="100" y="88" textAnchor="middle" fontSize="10" fontFamily="var(--mono)" fill="var(--muted)" letterSpacing="1">CERTIFIED</text>
        <text x="100" y="125" textAnchor="middle" fontSize="38" fontFamily="var(--mono)" fontWeight="700" fill="var(--fg)">{score}</text>
        <text x="100" y="146" textAnchor="middle" fontSize="9" fontFamily="var(--mono)" fill="var(--accent)" letterSpacing="2">/ 100 LEGIT SCORE</text>
        <text x="100" y="170" textAnchor="middle" fontSize="9" fontFamily="var(--mono)" fill="var(--muted)" letterSpacing="2">{agent.toUpperCase()}</text>
      </svg>
      <div className="badge-meta">
        <div className="row"><span>tier</span><span className="mono">{tier}</span></div>
        <div className="row"><span>issued</span><span className="mono">2026-04-22</span></div>
        <div className="row"><span>cert id</span><span className="mono">IL-7F2A-3CD9</span></div>
      </div>
    </div>
  );
}

function SealBadge({ agent, score, tier }) {
  return (
    <div className="badge-card">
      <svg viewBox="0 0 220 220" width="220" height="220">
        <circle cx="110" cy="110" r="100" fill="var(--surface)" stroke="var(--border)" strokeWidth="1"/>
        <circle cx="110" cy="110" r="92"  fill="none" stroke="var(--accent)" strokeWidth="2"/>
        <circle cx="110" cy="110" r="86"  fill="none" stroke="var(--accent)" strokeWidth="1" strokeDasharray="1 3"/>
        {/* circular text */}
        <defs>
          <path id="circTop"   d="M 110,110 m -76,0 a 76,76 0 1,1 152,0"/>
          <path id="circBot"   d="M 110,110 m -76,0 a 76,76 0 1,0 152,0"/>
        </defs>
        <text fontSize="9" fontFamily="var(--mono)" fill="var(--muted)" letterSpacing="4">
          <textPath href="#circTop" startOffset="50%" textAnchor="middle">ISLEGIT.AI · AGENT CAPABILITY CERTIFICATE</textPath>
        </text>
        <text fontSize="9" fontFamily="var(--mono)" fill="var(--muted)" letterSpacing="3">
          <textPath href="#circBot" startOffset="50%" textAnchor="middle">VERIFIED · {agent.toUpperCase()} · {tier.toUpperCase()}</textPath>
        </text>
        <text x="110" y="105" textAnchor="middle" fontSize="34" fontFamily="var(--mono)" fontWeight="700" fill="var(--fg)">{score}</text>
        <text x="110" y="126" textAnchor="middle" fontSize="9" fontFamily="var(--mono)" fill="var(--accent)" letterSpacing="2">LEGIT SCORE</text>
        <line x1="80" y1="138" x2="140" y2="138" stroke="var(--border)"/>
        <text x="110" y="152" textAnchor="middle" fontSize="9" fontFamily="var(--mono)" fill="var(--muted)" letterSpacing="2">{tier.toUpperCase()} TIER</text>
      </svg>
      <div className="badge-meta">
        <div className="row"><span>tier</span><span className="mono">{tier}</span></div>
        <div className="row"><span>issued</span><span className="mono">2026-04-22</span></div>
        <div className="row"><span>cert id</span><span className="mono">IL-7F2A-3CD9</span></div>
      </div>
    </div>
  );
}

function TierBadge({ agent, score, tier }) {
  const pct = score / 100;
  return (
    <div className="badge-card">
      <div className="tier-badge">
        <div className="tier-top">
          <span className="mono small muted">ISLEGIT.AI</span>
          <span className="mono small accent">VERIFIED</span>
        </div>
        <div className="tier-tier mono">{tier.toUpperCase()}</div>
        <div className="tier-score">
          <span className="mono num">{score}</span>
          <span className="mono small muted">/100</span>
        </div>
        <div className="tier-bar">
          <div className="tier-bar-fill" style={{ width: `${pct * 100}%` }}/>
        </div>
        <div className="tier-bottom">
          <span className="mono small muted">{agent}</span>
          <span className="mono small muted">IL-7F2A-3CD9</span>
        </div>
      </div>
      <div className="badge-meta">
        <div className="row"><span>tier</span><span className="mono">{tier}</span></div>
        <div className="row"><span>issued</span><span className="mono">2026-04-22</span></div>
        <div className="row"><span>cert id</span><span className="mono">IL-7F2A-3CD9</span></div>
      </div>
    </div>
  );
}

window.Badge = Badge;