/* DLG UI kit · primitive components.
   All atoms — buttons, fields, badges, cards, seal, layout helpers.
   Exposed on window so other Babel scripts can use them. */

// ── Icons (Lucide outlines, inlined to avoid a CDN dependency at runtime) ──
const Icon = ({ d, size = 18, stroke = 1.75, fill = "none", style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round" style={style}>
    <path d={d}/>
  </svg>
);

const Icons = {
  shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
  award:  "M12 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8.5 14.5L7 22l5-3 5 3-1.5-7.5",
  file:   "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M8 13h8 M8 17h6",
  check:  "M20 6L9 17l-5-5",
  checkc: "M9 12l2 2 4-4 M12 22A10 10 0 1 0 12 2a10 10 0 0 0 0 20z",
  arrowR: "M5 12h14 M12 5l7 7-7 7",
  arrowL: "M19 12H5 M12 19l-7-7 7-7",
  download: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3",
  phone:  "M22 16.92V21a1 1 0 0 1-1.1 1A19.9 19.9 0 0 1 2 4.1 1 1 0 0 1 3 3h4.09a1 1 0 0 1 1 .75l1.2 4.8a1 1 0 0 1-.27 1L8 11a16 16 0 0 0 6 6l1.45-1a1 1 0 0 1 1-.27l4.8 1.2a1 1 0 0 1 .75 1z",
  mail:   "M3 7l9 6 9-6 M3 5h18v14H3z",
  pin:    "M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
  user:   "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
  menu:   "M3 6h18 M3 12h18 M3 18h18",
  search: "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z M21 21l-4.3-4.3",
  cal:    "M3 4h18v18H3z M16 2v4 M8 2v4 M3 10h18",
  info:   "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M12 8v4 M12 16h.01",
  chev:   "M9 18l6-6-6-6",
  ext:    "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6 M15 3h6v6 M10 14L21 3",
  dot:    "M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z",
};

// ── Button ─────────────────────────────────────────────────────────────────
const Button = ({ variant = "primary", size = "md", icon, iconRight, children, ...rest }) => {
  const cls = `dlg-btn dlg-btn--${variant} dlg-btn--${size}`;
  return (
    <button className={cls} {...rest}>
      {icon && <Icon d={Icons[icon]} size={size === "lg" ? 18 : 16}/>}
      <span>{children}</span>
      {iconRight && <Icon d={Icons[iconRight]} size={size === "lg" ? 18 : 16}/>}
    </button>
  );
};

// ── Eyebrow / SectionLabel ────────────────────────────────────────────────
const Eyebrow = ({ tone = "navy", children }) => (
  <div className={`dlg-eyebrow dlg-eyebrow--${tone}`}>{children}</div>
);

// ── Notice (left-bar callout) ─────────────────────────────────────────────
const Notice = ({ tone = "info", title, children, meta }) => (
  <div className={`dlg-notice dlg-notice--${tone}`}>
    <div className="dlg-notice__bar"/>
    <div className="dlg-notice__body">
      {title && <h4>{title}</h4>}
      {children && <p>{children}</p>}
      {meta && <div className="dlg-notice__meta">{meta}</div>}
    </div>
  </div>
);

// ── Status badge / tier pill ──────────────────────────────────────────────
const Badge = ({ tone = "neutral", children }) => (
  <span className={`dlg-badge dlg-badge--${tone}`}>{children}</span>
);

const TierPill = ({ tier }) => (
  <span className={`dlg-tier dlg-tier--${tier.toLowerCase()}`}>{tier}</span>
);

// ── Field group ───────────────────────────────────────────────────────────
const Field = ({ label, hint, error, required, children }) => (
  <div className={`dlg-field${error ? " is-error" : ""}`}>
    <label>{label}{required && <span className="dlg-req"> *</span>}</label>
    {children}
    {(error || hint) && <div className="dlg-field__hint">{error || hint}</div>}
  </div>
);

// ── Card surface ──────────────────────────────────────────────────────────
const Card = ({ accent, padded = true, children, style }) => (
  <div className={`dlg-card${accent ? " dlg-card--accent" : ""}${padded ? " is-padded" : ""}`} style={style}>
    {children}
  </div>
);

// ── Decorative seal in copy ───────────────────────────────────────────────
const Seal = ({ size = 64, src = "../../assets/dlg-seal.svg", alt = "DLG" }) => (
  <img src={src} alt={alt} width={size} height={size} className="dlg-seal-img"/>
);

// ── Inline crest "official" stamp (used in headers, footers) ──────────────
const OfficialStamp = ({ children = "Akkreditierte Zertifizierungsstelle" }) => (
  <span className="dlg-stamp">
    <Icon d={Icons.shield} size={12} stroke={2}/>
    <span>{children}</span>
  </span>
);

// ── Statistic (used on hero + dashboard) ──────────────────────────────────
const Stat = ({ value, label, hint }) => (
  <div className="dlg-stat">
    <div className="dlg-stat__v">{value}</div>
    <div className="dlg-stat__l">{label}</div>
    {hint && <div className="dlg-stat__h">{hint}</div>}
  </div>
);

// ── Inline base stylesheet for components ─────────────────────────────────
const ComponentStyles = () => (
  <style>{`
    /* Buttons */
    .dlg-btn { font-family: var(--font-sans); font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: var(--r-3); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.2px; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
    .dlg-btn:active { transform: translateY(1px); }
    .dlg-btn--sm { padding: 7px 12px; font-size: 13px; }
    .dlg-btn--md { padding: 10px 18px; font-size: 14px; }
    .dlg-btn--lg { padding: 13px 22px; font-size: 15px; }
    .dlg-btn--primary { background: var(--dlg-navy-700); color: #fff; }
    .dlg-btn--primary:hover { background: var(--dlg-navy-800); }
    .dlg-btn--secondary { background: #fff; color: var(--dlg-navy-700); border-color: var(--dlg-navy-700); }
    .dlg-btn--secondary:hover { background: var(--dlg-navy-100); }
    .dlg-btn--ghost { background: transparent; color: var(--dlg-navy-700); }
    .dlg-btn--ghost:hover { background: var(--dlg-navy-100); }
    .dlg-btn--gold { background: var(--dlg-gold-500); color: var(--dlg-navy-900); border-color: var(--dlg-gold-600); }
    .dlg-btn--gold:hover { background: var(--dlg-gold-400); }
    .dlg-btn--danger { background: var(--dlg-red-600); color: #fff; }
    .dlg-btn:disabled { opacity: 0.45; cursor: not-allowed; }

    /* Eyebrow */
    .dlg-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.2px; }
    .dlg-eyebrow--navy { color: var(--dlg-navy-700); }
    .dlg-eyebrow--gold { color: var(--dlg-gold-700); }
    .dlg-eyebrow--white { color: var(--dlg-gold-400); }

    /* Notice */
    .dlg-notice { display: grid; grid-template-columns: 4px 1fr; gap: 14px; background: var(--dlg-navy-050); border-radius: 0 var(--r-3) var(--r-3) 0; }
    .dlg-notice__bar { background: var(--dlg-navy-700); }
    .dlg-notice__body { padding: 14px 18px 14px 0; }
    .dlg-notice__body h4 { margin: 0 0 4px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--dlg-navy-900); }
    .dlg-notice__body p { margin: 0; font-size: 14px; color: var(--fg-2); }
    .dlg-notice__meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 4px; }
    .dlg-notice--warn { background: #fcf2dd; }   .dlg-notice--warn .dlg-notice__bar { background: #b07309; }
    .dlg-notice--err  { background: #fbe6e7; }   .dlg-notice--err  .dlg-notice__bar { background: var(--dlg-red-600); }
    .dlg-notice--ok   { background: #e3f1e8; }   .dlg-notice--ok   .dlg-notice__bar { background: #2e7d4a; }

    /* Badges */
    .dlg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }
    .dlg-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
    .dlg-badge--ok      { background: #e3f1e8; color: #1e5a37; }
    .dlg-badge--warn    { background: #fcf2dd; color: #7a4d05; }
    .dlg-badge--err     { background: #fbe6e7; color: #8a1a1f; }
    .dlg-badge--info    { background: #e3ecf7; color: #163866; }
    .dlg-badge--neutral { background: var(--dlg-ink-100); color: var(--fg-2); }

    /* Tier pill */
    .dlg-tier { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
    .dlg-tier::before { content: ""; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15); }
    .dlg-tier--silber { background: #ecedef; color: #3a3f48; }
    .dlg-tier--silber::before { background: linear-gradient(135deg, #d4d8df, #aeb5c0); }
    .dlg-tier--gold { background: var(--dlg-gold-100); color: var(--dlg-gold-700); }
    .dlg-tier--gold::before { background: linear-gradient(135deg, #f1dca0, #b0892b); }
    .dlg-tier--platin { background: var(--dlg-navy-100); color: var(--dlg-navy-800); }
    .dlg-tier--platin::before { background: linear-gradient(135deg, #e3ecf7, #5b8cc9); }

    /* Field */
    .dlg-field { display: grid; gap: 6px; }
    .dlg-field label { font-size: 12px; font-weight: 600; color: var(--dlg-navy-800); }
    .dlg-req { color: var(--dlg-red-600); }
    .dlg-field input, .dlg-field select, .dlg-field textarea {
      font-family: var(--font-sans); font-size: 14px; padding: 10px 12px;
      border: 1px solid var(--border-strong); background: #fff; border-radius: var(--r-2); color: var(--fg);
    }
    .dlg-field input:focus, .dlg-field select:focus, .dlg-field textarea:focus {
      outline: 2px solid var(--dlg-navy-500); outline-offset: 1px; border-color: var(--dlg-navy-500);
    }
    .dlg-field.is-error input, .dlg-field.is-error select, .dlg-field.is-error textarea {
      border-color: var(--dlg-red-600); background: #fff7f7;
    }
    .dlg-field__hint { font-size: 11.5px; color: var(--fg-3); }
    .dlg-field.is-error .dlg-field__hint { color: var(--dlg-red-600); }

    /* Card */
    .dlg-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-1); }
    .dlg-card.is-padded { padding: 20px 22px; }
    .dlg-card--accent { position: relative; overflow: hidden; background: var(--dlg-paper-2); }
    .dlg-card--accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--dlg-gold-400), var(--dlg-gold-600)); }

    /* Seal img */
    .dlg-seal-img { display: block; }

    /* Official stamp ribbon */
    .dlg-stamp { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--dlg-navy-700); color: var(--dlg-gold-400); border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

    /* Stat */
    .dlg-stat { display: grid; gap: 2px; }
    .dlg-stat__v { font-family: var(--font-serif); font-weight: 700; font-size: 36px; line-height: 1; color: var(--dlg-navy-800); letter-spacing: -0.015em; }
    .dlg-stat__l { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dlg-navy-700); margin-top: 6px; }
    .dlg-stat__h { font-size: 12px; color: var(--fg-3); }
  `}</style>
);

Object.assign(window, { Icon, Icons, Button, Eyebrow, Notice, Badge, TierPill, Field, Card, Seal, OfficialStamp, Stat, ComponentStyles });
