/* eslint-disable */
// ============================================================
// ASTEM — Main app
// ============================================================

const { useState, useMemo, useEffect, useRef, Fragment } = React;
const D = window.ASTEM_DATA;

const PATIENT = { nom: "Dupont Michel", ne: "28/01/1968" };

const WIZARD_STEPS = [
{ id: "patient", num: 1, label: "Infos patient" },
{ id: "schema", num: 2, label: "Schéma dentaire\nprogrammatif" },
{ id: "arbre", num: 3, label: "Arbre de\ndécision" },
{ id: "recap", num: 4, label: "Récapitulatif" },
{ id: "donnees", num: 5, label: "Données d'entrée" }];


// ===================== Header =====================
const COMPLEXITY_CONFIG = {
  inconnue: { label: "Inconnue", color: "#8C84B5", bg: "#F0EDFA", dot: "#8C84B5" },
  simple: { label: "Simple", color: "#00C691", bg: "#DDF8EE", dot: "#00C691" },
  complexe: { label: "Complexe", color: "#D97706", bg: "#FEF3C7", dot: "#D97706" },
  expert: { label: "Expert", color: "#E85029", bg: "#FFE0D6", dot: "#E85029" }
};

function HeaderStepper({ current, onStep, disabledSteps = [] }) {
  return (
    <nav className="header-stepper">
      {WIZARD_STEPS.map((s, i) => {
        const isDisabled = disabledSteps.includes(i) && i !== current;
        return (
          <React.Fragment key={s.id}>
            {i > 0 && <div className={`hs-link ${i <= current ? "done" : ""}`} />}
            <button
              className={`hs-step ${i === current ? "active" : ""} ${i < current ? "done" : ""}`}
              onClick={() => !isDisabled && onStep(i)}
              title={isDisabled ? "Choisissez d'abord un implant dans le schéma dentaire" : s.label.replace("\n", " ")}
              style={{ opacity: isDisabled ? 0.38 : 1, cursor: isDisabled ? "not-allowed" : "pointer" }}>
              
              <div className="hs-dot">
                {i < current ?
                <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="4"><path d="M5 12l5 5 9-9" /></svg> :
                <span>{s.num}</span>
                }
              </div>
              <span className="hs-lbl">{s.label.replace("\n", " ")}</span>
            </button>
          </React.Fragment>);

      })}
    </nav>);

}

function UserMenu({ theme, onToggleTheme, lang, onToggleLang }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    function h(e) {if (ref.current && !ref.current.contains(e.target)) setOpen(false);}
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, []);
  const isDark = theme === "dark";
  return (
    <div className="user-menu" ref={ref}>
      <button className="user-btn" onClick={() => setOpen((v) => !v)}>
        <div className="avatar">J</div>
        <span>JM.Housseau</span>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
        style={{ transition: "transform .18s", transform: open ? "rotate(180deg)" : "none", flexShrink: 0 }}>
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>
      {open &&
      <div className="user-dropdown">
          <div className="ud-item" onClick={() => {onToggleTheme();setOpen(false);}}>
            {isDark ?
          <><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" /></svg> Thème clair</> :
          <><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" /></svg> Thème sombre</>
          }
          </div>
          <div className="ud-item" onClick={() => {onToggleLang();setOpen(false);}}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9" /><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></svg>
            {lang === "fr" ? "English" : "Français"}
          </div>
        </div>
      }
    </div>);

}

const COMPLEXITY_TOOLTIP = `Calculée d'après les actes détectés dans l'arbre de décision :

● Simple — aucun acte spécialisé requis
● Complexe — greffe gingivale/épithéliale, sinus lift crestal, avulsion, ancrage pluri-cortical, implantation immédiate…
● Expert — ROG, greffe composite pré-implantaire, sinus lift pré-implantaire, implant court/étroit, contre-indication bloquante…`;

function Header({ theme, onToggleTheme, lang, onToggleLang, complexity, wizStep, onWizStep, disabledSteps = [] }) {
  const cc = COMPLEXITY_CONFIG[complexity] || COMPLEXITY_CONFIG.inconnue;
  const [showTip, setShowTip] = React.useState(false);
  return (
    <header className="app-header">
      <div className="header-left">
        <div
          style={{
            height: "44px", position: "relative",
            display: "flex", alignItems: "center", gap: 7,
            background: cc.bg, borderRadius: 20, padding: "0 12px 0 8px",
            border: `1.5px solid ${cc.color}44`, flexShrink: 0, cursor: "help"
          }}
          onMouseEnter={() => setShowTip(true)}
          onMouseLeave={() => setShowTip(false)}
        >
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: cc.dot, flexShrink: 0, display: "inline-block" }} />
          <span style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 500 }}>Complexité</span>
          <span style={{ fontSize: 12, color: cc.color, fontWeight: 700 }}>{cc.label}</span>
          {showTip && (
            <div style={{
              position: "absolute", top: "calc(100% + 8px)", left: 0,
              background: "var(--ink)", color: "white",
              borderRadius: 12, padding: "12px 16px",
              fontSize: 12, lineHeight: 1.65, whiteSpace: "pre-line",
              zIndex: 200, width: 310,
              boxShadow: "0 16px 40px -10px rgba(27,15,138,0.4)",
              pointerEvents: "none",
            }}>
              <div style={{ fontWeight: 700, marginBottom: 6, fontSize: 13 }}>Critères de complexité</div>
              {COMPLEXITY_TOOLTIP}
            </div>
          )}
        </div>
      </div>
      <div className="header-center">
        <HeaderStepper current={wizStep || 0} onStep={onWizStep || (() => {})} disabledSteps={disabledSteps} />
      </div>
      <div className="header-right">
        <div className="header-patient" title={`${PATIENT.nom} — ${PATIENT.ne}`}>
          <div className="avatar-circle">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="8" r="4" /><path d="M4 22c0-4 4-7 8-7s8 3 8 7" /></svg>
          </div>
          <div className="info">
            <div className="nom">{PATIENT.nom}</div>
            <div className="ne">Né le {PATIENT.ne}</div>
          </div>
        </div>
        <UserMenu theme={theme} onToggleTheme={onToggleTheme} lang={lang} onToggleLang={onToggleLang} />
      </div>
    </header>);

}

// ===================== Top wizard stepper =====================
function WizardStepper({ current, onStep }) {
  const items = [];
  WIZARD_STEPS.forEach((s, i) => {
    const clickable = !!onStep;
    items.push(
      <div key={s.id}
      className={`step ${i === current ? "active" : ""} ${i < current ? "done" : ""}`}
      onClick={() => clickable && onStep(i)}
      style={{ cursor: clickable ? "pointer" : "default" }}>
        
        <div className="dot"><span>{s.num}</span></div>
        <div className="lbl">{s.label}</div>
      </div>
    );
    if (i < WIZARD_STEPS.length - 1) {
      items.push(<div key={s.id + "-link"} className={`step-link ${i < current ? "done" : ""}`} />);
    }
  });
  return <div className="stepper">{items}</div>;
}

// ===================== Planning panel (left of tooth chart) =====================
const PLANNING_ITEMS = [
{ id: "prog", num: "01", label: "Programme de travail" },
{ id: "prothese", num: "02", label: "Prothèse virtuelle" },
{ id: "guide", num: "03", label: "Guide chirurgical" },
{ id: "matos", num: "04", label: "Matériaux" }];


function PlanningPanel({ activeSection, onSection, planning, openArbre }) {
  const filled = useMemo(() => {
    const out = {};
    Object.values(planning).forEach((p) => {
      if (!p) return;
      if (p.programme) out.prog = true;
      if (p.prothese) out.prothese = true;
      if (p.guide) out.guide = true;
      if (p.materiau) out.matos = true;
    });
    return out;
  }, [planning]);

  return (
    <div className="planning-panel">
      <div className="pp-title">Planification</div>
      {PLANNING_ITEMS.map((it) =>
      <div
        key={it.id}
        className={`pp-item ${activeSection === it.id ? "active" : ""} ${filled[it.id] ? "has-data" : ""}`}
        onClick={() => it.id === "arbre" ? openArbre() : onSection(it.id)}>
        
          <div className="num">{it.num}</div>
          <div className="lbl">{it.label}</div>
          <div className="chev">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 18l6-6-6-6" /></svg>
          </div>
        </div>
      )}
    </div>);

}

// ===================== Tooth options (right of chart) =====================
// Each tooth planning may carry multiple flags simultaneously (an implant can have a crown).
// Single-select fields: programme, guide, materiau, existing
// Multi-select (flags): prothese  -> {couronne, bridge, implant}
const SECTION_OPTIONS = {
  prog: {
    title: "Programme de travail",
    multi: false,
    field: "programme",
    options: [
    { id: "naturelle", label: "Dent naturelle" },
    { id: "absente", label: "Dent absente" },
    { id: "extraction", label: "Extraction dentaire" }],

    secondTitle: "Prothèse virtuelle"
  },
  prothese: {
    title: "Prothèse virtuelle",
    multi: true,
    field: "prothese", // flags
    options: [
    { id: "couronne", label: "Couronne virtuelle" },
    { id: "bridge", label: "Bridge virtuel" },
    { id: "implant", label: "Implant virtuel" }]

  },
  guide: {
    title: "Guide chirurgical",
    multi: false,
    field: "guide",
    options: [
    { id: "dentaire", label: "Appui dentaire" },
    { id: "muqueux", label: "Appui muqueux" },
    { id: "osseux", label: "Appui osseux" }]

  },
  matos: {
    title: "Matériaux",
    multi: false,
    field: "materiau",
    options: [
    { id: "metal", label: "Métal" },
    { id: "resine", label: "Résine" }]

  }
};

function ToothOptions({ section, selected, planning, onSet }) {
  const data = SECTION_OPTIONS[section];
  if (!data) return null;
  const cur = selected ? planning[selected] || {} : null;
  const isExistingFlag = cur?.existing;

  const handleClick = (optId) => {
    if (!selected) return;
    if (data.multi) {
      const flags = cur.prothese || {};
      const next = { ...flags, [optId]: !flags[optId] };
      onSet(selected, { prothese: next });
    } else {
      // toggle off if same; else set
      const same = cur[data.field] === optId;
      onSet(selected, { [data.field]: same ? null : optId });
    }
  };

  const isActive = (optId) => {
    if (!cur) return false;
    if (data.multi) return !!cur.prothese?.[optId];
    return cur[data.field] === optId;
  };

  return (
    <div className="tooth-options">
      <div className="opt-group">
        <div style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 600, marginBottom: 8 }}>
          {selected ? `Dent ${selected}` : "Sélectionnez une dent"}
        </div>
        {data.options.map((o) =>
        <div
          key={o.id}
          className={`opt ${isActive(o.id) ? "active" : ""} ${!selected ? "disabled" : ""}`}
          onClick={() => handleClick(o.id)}>
          {o.label}</div>
        )}
      </div>

      {/* For "prog" section, show prothese options as a secondary group below */}
      {section === "prog" && selected &&
      <div className="opt-group">
          <div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 600, marginBottom: 6 }}>Prothèse virtuelle</div>
          {SECTION_OPTIONS.prothese.options.map((o) => {
          const active = !!cur?.prothese?.[o.id];
          return (
            <div key={o.id} className={`opt ${active ? "active" : ""}`}
            onClick={() => {
              const flags = cur.prothese || {};
              onSet(selected, { prothese: { ...flags, [o.id]: !flags[o.id] } });
            }}>
              {o.label}</div>);

        })}
        </div>
      }

      {/* For matos section, show metal/resine and existing/nouveau */}
      {section === "matos" && selected &&
      <div className="opt-group">
          <div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 600, marginBottom: 6 }}>Source</div>
          <div className={`opt ${!isExistingFlag ? "active" : ""}`}
        onClick={() => onSet(selected, { existing: false })}>Nouveau</div>
          <div className={`opt ${isExistingFlag ? "active" : ""}`}
        onClick={() => onSet(selected, { existing: true })}>Existant</div>
        </div>
      }
    </div>);

}

// ===================== Summary side panel (right) OR horizontal bar (top) =====================
function SummaryPanel({ planning, onOpenArbre, horizontal }) {
  const groups = useMemo(() => {
    const couronnes = [],implants = [],guides = [],bridges = [],extractions = [],absentes = [];
    const pluralGroups = []; // { root, all: sorted tooth numbers }
    const pluralMembers = new Set();
    Object.entries(planning).forEach(([num, p]) => {
      if (!p) return;
      const n = parseInt(num);
      const pr = p.prothese || {};
      if (pr.couronne) couronnes.push(n);
      if (pr.implant) implants.push(n);
      if (pr.bridge) bridges.push(n);
      if (p.guide) guides.push({ num: n, type: p.guide });
      if (p.programme === "extraction") extractions.push(n);
      if (p.programme === "absente") absentes.push(n);
      // Collect plural implant groups (root tooth has implant_type + implant_group)
      if (pr.implant && p.implant_type === "plural" && (p.implant_group || []).length) {
        const all = [n, ...p.implant_group].sort((a, b) => a - b);
        pluralGroups.push({ root: n, all });
        all.forEach((x) => pluralMembers.add(x));
      }
    });
    couronnes.sort((a, b) => a - b);implants.sort((a, b) => a - b);
    guides.sort((a, b) => a.num - b.num);
    bridges.sort((a, b) => a - b);extractions.sort((a, b) => a - b);absentes.sort((a, b) => a - b);
    const implantSingles = implants.filter((n) => !pluralMembers.has(n));
    return { couronnes, implants, implantSingles, pluralGroups, guides, bridges, extractions, absentes };
  }, [planning]);

  const hasAny = groups.couronnes.length + groups.implants.length + groups.guides.length + groups.bridges.length + groups.extractions.length + groups.absentes.length > 0;

  const GUIDE_CLRS = window.GUIDE_COLORS || { dentaire: "#3B82F6", muqueux: "#F472B6", osseux: "#F59E0B" };
  const GUIDE_ABBR = { dentaire: "D", muqueux: "M", osseux: "O" };

  if (horizontal) {
    const iconProps = { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", style: { flexShrink: 0 } };
    return (
      <div className="summary-bar">
        {!hasAny && <span style={{ color: "var(--ink-3)", fontSize: 12 }}>Cliquez sur une dent pour commencer la planification.</span>}
        {groups.implants.length > 0 &&
        <div className="sb-group">
            <svg {...iconProps} stroke="#00C691"><path d="M9 4h6v2l-1 2h-4l-1-2z" /><path d="M9 8h6l-3 12z" fill="#C8F5E2" /><path d="M9.5 12h5M10 15h4M10.3 18h3.4" /></svg>
            <span className="sb-lbl">Implants</span>
            {/* Singular implants */}
            {groups.implantSingles.map((n) => <span key={n} className="tooth-pill green">{n}</span>)}
            {/* Plural implant groups — framed cluster */}
            {groups.pluralGroups.map((g) =>
          <span key={g.root} style={{
            display: "inline-flex", alignItems: "center", gap: 2,
            border: "1.5px solid var(--accent-2)",
            borderRadius: 999, padding: "0 4px 0 2px",
            background: "rgba(31,224,168,0.10)"
          }}>
                <span style={{ fontSize: 9, color: "var(--accent-2)", fontWeight: 700, padding: "0 3px", letterSpacing: "0.03em" }}>Plural</span>
                {g.all.map((n) => <span key={n} className="tooth-pill green" style={{ margin: "2px 1px" }}>{n}</span>)}
              </span>
          )}
          </div>
        }
        {groups.couronnes.length > 0 &&
        <div className="sb-group">
            <svg {...iconProps} stroke="#3D2EB8" fill="#E9E4FB"><path d="M4 9l4-5 4 5 4-5 4 5 4-5v9H4z" /></svg>
            <span className="sb-lbl">Couronnes</span>
            {groups.couronnes.map((n) => <span key={n} className="tooth-pill">{n}</span>)}
          </div>
        }
        {groups.bridges.length > 0 &&
        <div className="sb-group">
            <svg {...iconProps} stroke="#3D2EB8"><path d="M3 8h18M5 8v10M19 8v10M5 18h14" /></svg>
            <span className="sb-lbl">Bridges</span>
            {groups.bridges.map((n) => <span key={n} className="tooth-pill outline">{n}</span>)}
          </div>
        }
        {groups.guides.length > 0 &&
        <div className="sb-group">
            <svg {...iconProps} stroke="#3D2EB8"><rect x="6" y="7" width="12" height="5" rx="1" /><path d="M9 12v8h6v-8" /></svg>
            <span className="sb-lbl">Guides</span>
            {groups.guides.map((g) =>
          <span key={g.num} style={{
            display: "inline-flex", alignItems: "center", gap: 2,
            padding: "1px 7px", borderRadius: 999, fontSize: 11, fontWeight: 700,
            background: `${GUIDE_CLRS[g.type]}22`,
            color: GUIDE_CLRS[g.type],
            border: `1.5px solid ${GUIDE_CLRS[g.type]}66`
          }}>
                {g.num}<span style={{ fontSize: 9, opacity: 0.8 }}>{GUIDE_ABBR[g.type]}</span>
              </span>
          )}
          </div>
        }
        {groups.extractions.length > 0 &&
        <div className="sb-group">
            <svg {...iconProps} stroke="#FF6E4A" fill="#FFE0D6"><circle cx="12" cy="12" r="8" /><path d="M8 12h8" /></svg>
            <span className="sb-lbl">Extractions</span>
            {groups.extractions.map((n) => <span key={n} className="tooth-pill alert">{n}</span>)}
          </div>
        }
        {groups.absentes.length > 0 &&
        <div className="sb-group">
            <svg {...iconProps} stroke="#8C84B5" strokeDasharray="3 2"><path d="M12 4Q8 4 8 12Q8 20 12 20Q16 20 16 12Q16 4 12 4Z" /></svg>
            <span className="sb-lbl">Absentes</span>
            {groups.absentes.map((n) => <span key={n} className="tooth-pill muted">{n}</span>)}
          </div>
        }
      </div>);

  }

  // ── Vertical panel (used in recap) ──
  return (
    <div className="summary-panel">
      <div className="panel-header">
        <div className="label">Vue d'ensemble</div>
      </div>
      {!hasAny &&
      <div style={{ color: "var(--ink-3)", fontSize: 13, padding: "12px 0" }}>
          Cliquez sur une dent pour commencer la planification.
        </div>
      }
      {groups.couronnes.length > 0 &&
      <div className="summary-row">
          <div className="icn"><svg width="22" height="22" viewBox="0 0 24 24" fill="#E9E4FB" stroke="#3D2EB8" strokeWidth="1.6"><path d="M4 9l4-5 4 5 4-5 4 5 4-5v9H4z" /><path d="M4 14h16v6H4z" fill="#C9C2E3" /></svg></div>
          <div className="content"><div className="lbl">Couronne(s) :</div>{groups.couronnes.map((n) => <span key={n} className="tooth-pill">{n}</span>)}</div>
        </div>
      }
      {groups.implants.length > 0 &&
      <div className="summary-row">
          <div className="icn"><svg width="22" height="22" viewBox="0 0 24 24" fill="#DDF8EE" stroke="#00C691" strokeWidth="1.6"><path d="M9 4h6v2l-1 2h-4l-1-2z" /><path d="M9 8h6l-3 12z" /><path d="M9.5 12h5M10 15h4M10.3 18h3.4" /></svg></div>
          <div className="content">
            <div className="lbl">Planification implantaire :</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 4, alignItems: "center" }}>
              {groups.implantSingles.map((n) => <span key={n} className="tooth-pill green">{n}</span>)}
              {groups.pluralGroups.map((g) =>
            <span key={g.root} style={{
              display: "inline-flex", alignItems: "center", gap: 2,
              border: "1.5px solid var(--accent-2)",
              borderRadius: 10, padding: "2px 5px 2px 4px",
              background: "rgba(31,224,168,0.08)"
            }}>
                  <span style={{ fontSize: 9, color: "var(--accent-2)", fontWeight: 700, letterSpacing: "0.03em", paddingRight: 2 }}>Plural</span>
                  {g.all.map((n) => <span key={n} className="tooth-pill green" style={{ margin: "1px" }}>{n}</span>)}
                </span>
            )}
            </div>
          </div>
        </div>
      }
      {groups.guides.length > 0 &&
      <div className="summary-row">
          <div className="icn"><svg width="22" height="22" viewBox="0 0 24 24" fill="#F5F2FC" stroke="#3D2EB8" strokeWidth="1.6"><rect x="6" y="7" width="12" height="5" rx="1" /><path d="M9 12v8h6v-8" /></svg></div>
          <div className="content">
            <div className="lbl">Guide chirurgical :</div>
            {groups.guides.map((g) =>
          <span key={g.num} style={{
            display: "inline-flex", alignItems: "center", gap: 2,
            padding: "1px 7px", borderRadius: 999, fontSize: 11, fontWeight: 700,
            background: `${GUIDE_CLRS[g.type]}22`, color: GUIDE_CLRS[g.type],
            border: `1.5px solid ${GUIDE_CLRS[g.type]}66`
          }}>
                {g.num}<span style={{ fontSize: 9, opacity: 0.8 }}>{GUIDE_ABBR[g.type]}</span>
              </span>
          )}
          </div>
        </div>
      }
      {groups.bridges.length > 0 &&
      <div className="summary-row">
          <div className="icn"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#3D2EB8" strokeWidth="1.6"><path d="M3 8h18M5 8v10M19 8v10M5 18h14" /></svg></div>
          <div className="content"><div className="lbl">Bridge(s) :</div>{groups.bridges.map((n) => <span key={n} className="tooth-pill outline">{n}</span>)}</div>
        </div>
      }
      {groups.extractions.length > 0 &&
      <div className="summary-row">
          <div className="icn"><svg width="22" height="22" viewBox="0 0 24 24" fill="#FFE0D6" stroke="#FF6E4A" strokeWidth="1.6"><circle cx="12" cy="12" r="8" /><path d="M8 12h8" /></svg></div>
          <div className="content"><div className="lbl">Extraction(s) :</div>{groups.extractions.map((n) => <span key={n} className="tooth-pill alert">{n}</span>)}</div>
        </div>
      }
      {groups.absentes.length > 0 &&
      <div className="summary-row">
          <div className="icn"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#8C84B5" strokeWidth="1.6" strokeDasharray="3 2"><path d="M12 4Q8 4 8 12Q8 20 12 20Q16 20 16 12Q16 4 12 4Z" /></svg></div>
          <div className="content"><div className="lbl">Absente(s) :</div>{groups.absentes.map((n) => <span key={n} className="tooth-pill muted">{n}</span>)}</div>
        </div>
      }
    </div>);

}

window.AstemHeader = Header;
window.AstemWizardStepper = WizardStepper;
window.AstemPlanningPanel = PlanningPanel;
window.AstemToothOptions = ToothOptions;
window.AstemSummaryPanel = SummaryPanel;
window.WIZARD_STEPS = WIZARD_STEPS;
window.PLANNING_ITEMS = PLANNING_ITEMS;
window.SECTION_OPTIONS = SECTION_OPTIONS;