/* global React, Tile, SectionBand, PillNav, TopBar, TitleBar, FilterField, Icon, LookerNote,
   LineChart, BarChart, Donut, IndonesiaMap, KpiTile */
// ME-29 Brickwall for Industry — app (Looker-faithful mockup, ME-30 visual system)

(function () {
  var R = React;

  // ---------- formatters ----------
  var fmtInt = function (n) { return Math.round(n).toLocaleString("id-ID"); };
  var fmtPct = function (v, d) { return (v).toFixed(d == null ? 1 : d).replace(".", ",") + "%"; };
  var fmtScore = function (v) { return v.toFixed(2).replace(".", ","); };

  // ---------- accent palettes (tweak: brand identity) ----------
  var ACCENTS = {
    "Looker Blue": { band: "#1f3a68", primary: "#2eb5e6", num: "#2e5fb8", line: "#1b8a4c", mapHue: 255, monoHue: 250 },
    "Indigo":      { band: "#312e81", primary: "#6366f1", num: "#4338ca", line: "#0d9488", mapHue: 285, monoHue: 285 },
    "Teal":        { band: "#0f5e57", primary: "#14b8a6", num: "#0d9488", line: "#b45309", mapHue: 190, monoHue: 190 },
    "Graphite":    { band: "#334155", primary: "#64748b", num: "#475569", line: "#0e7490", mapHue: 250, monoHue: 250 }
  };

  // bucket warna tunggal (bukan gradient) — dikalibrasi untuk skor RATA-RATA (rentang 1,00–3,00).
  // 1,00–1,67 Lemah (merah), 1,67–2,33 Sedang (kuning), 2,33–3,00 Tinggi (hijau).
  function bucketStyle(v) {
    if (v < 1.67) return { background: "#f3cfca", color: "#9a2b20", fontWeight: 600 };  // Lemah
    if (v < 2.33) return { background: "#fbe6bd", color: "#8a5a00", fontWeight: 600 };  // Sedang
    return { background: "#cfe7d1", color: "#1b6b3a", fontWeight: 600 };                // Tinggi
  }
  // conditional fill untuk kolom % (makin tinggi makin hijau, dalam rentang kolom)
  function pctStyle(v, min, max) {
    var t = max > min ? (v - min) / (max - min) : 0.5;
    return { background: "oklch(" + (0.97 - t * 0.12) + " " + (0.03 + t * 0.07) + " 150)", fontWeight: 500 };
  }

  // ---------- KPI scorecard (5 kartu nasional) ----------
  function ScoreCards(props) {
    var n = props.national;
    var cards = [
      { label: "Total RC", color: "blue",  value: fmtInt(n.rc),            meta: "Registered Customers" },
      { label: "Total Brickwall", color: "green", value: fmtInt(n.brick),  meta: "pelanggan ter-brickwall" },
      { label: "% Brickwall / RC", color: "teal", value: fmtPct(n.brickRc), meta: null },
      { label: "Cust YTD", color: "purple", value: fmtInt(n.cust),     meta: "pelanggan aktif/bertransaksi" },
      { label: "% Cust / Brickwall", color: "orange", value: fmtPct(n.custBrick), meta: null }
    ];
    return R.createElement("div", { className: "kpi-group-cards", style: { gridTemplateColumns: "repeat(5, minmax(0,1fr))", display: "grid", gap: 8, margin: "2px 0 4px" } },
      cards.map(function (c, i) {
        return R.createElement("div", { key: i, className: "kpi color-" + c.color, style: { cursor: "default" } },
          R.createElement("div", { className: "kpi-label" }, c.label),
          R.createElement("div", { className: "kpi-value" }, c.value),
          c.meta ? R.createElement("div", { className: "kpi-meta" }, c.meta) : null
        );
      })
    );
  }

  // ---------- Region table ----------
  function RegionTable(props) {
    var rows = props.regions, n = props.national;
    var brMin = Math.min.apply(null, rows.map(function (r) { return r.brickRc; }));
    var brMax = Math.max.apply(null, rows.map(function (r) { return r.brickRc; }));
    var cbMin = Math.min.apply(null, rows.map(function (r) { return r.custBrick; }));
    var cbMax = Math.max.apply(null, rows.map(function (r) { return r.custBrick; }));
    var head = ["Region", "RC", "Brickwall", "Brick/RC%", "Cust YTD", "Cust/Brick%"];
    function dataRow(r, isTotal) {
      return R.createElement("tr", { key: r.name, className: isTotal ? "row-total" : "" },
        R.createElement("td", { className: "bold" }, r.name),
        R.createElement("td", { className: "num" }, fmtInt(r.rc)),
        R.createElement("td", { className: "num" }, fmtInt(r.brick)),
        R.createElement("td", { className: "num" }, fmtPct(r.brickRc)),
        R.createElement("td", { className: "num" }, fmtInt(r.cust)),
        R.createElement("td", { className: "num" }, fmtPct(r.custBrick))
      );
    }
    return R.createElement("div", { className: "tbl-scroll", style: { maxHeight: 360 } },
      R.createElement("table", { className: "lk-table" },
        R.createElement("thead", null, R.createElement("tr", null, head.map(function (h, i) {
          return R.createElement("th", { key: i, className: i === 0 ? "" : "num", style: i === 0 ? null : { textAlign: "right" } }, h);
        }))),
        R.createElement("tbody", null, rows.map(function (r) { return dataRow(r, false); }).concat([dataRow(n, true)]))
      )
    );
  }

  // ---------- Parameter matrix: 3 tabel grup (Region baris × 4 parameter kolom) ----------
  function MatrixGroupTable(props) {
    var params = props.params, matrix = props.matrix, mn = props.matrixNational;
    function row(r, isTot) {
      return R.createElement("tr", { key: r.name, className: isTot ? "row-total" : "" },
        R.createElement("td", { className: "bold", style: { padding: "6px 6px" } }, r.name.replace("REGION ", "")),
        params.map(function (p) {
          var v = r.scores[p.id];
          return R.createElement("td", { key: p.id, className: "num", style: Object.assign({ textAlign: "center", padding: "6px 5px" }, bucketStyle(v)) }, fmtScore(v));
        })
      );
    }
    var nasRow = { name: "Nasional", scores: mn.scores };
    return R.createElement("div", { className: "tbl-scroll" },
      R.createElement("table", { className: "lk-table", style: { tableLayout: "fixed" } },
        R.createElement("thead", null, R.createElement("tr", null,
          [R.createElement("th", { key: "r", style: { padding: "6px 6px", width: "16%" } }, "Region")].concat(
            params.map(function (p) { return R.createElement("th", { key: p.id, className: "num", title: p.name, style: { textAlign: "center", padding: "6px 4px", fontSize: 10.5, lineHeight: 1.15, whiteSpace: "normal", wordBreak: "break-word" } }, p.short); })
          )
        )),
        R.createElement("tbody", null,
          matrix.map(function (r) { return row(r, false); }).concat([row(nasRow, true)])
        )
      )
    );
  }

  // Legend skor — kotak kecil terpisah di kiri (di Looker: tile Markdown/HTML).
  function MatrixLegendTile() {
    var items = [["Lemah", "1,00–1,67", 1.3], ["Sedang", "1,67–2,33", 2.0], ["Tinggi", "2,33–3,00", 2.6]];
    return R.createElement("div", { style: { padding: "10px 13px" } },
      R.createElement("div", { style: { fontSize: 12, fontWeight: 700, color: "var(--text-1)", marginBottom: 9 } }, "Keterangan Skor"),
      R.createElement("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", alignItems: "center" } },
        items.map(function (it, i) {
          return R.createElement("span", { key: i, style: { display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12, color: "var(--text-1)" } },
            R.createElement("span", { style: Object.assign({ width: 24, height: 14, borderRadius: 3, border: "1px solid rgba(0,0,0,0.08)" }, bucketStyle(it[2])) }),
            R.createElement("strong", null, it[0]),
            R.createElement("span", { style: { color: "var(--text-3)" } }, it[1])
          );
        })
      )
    );
  }

  // ---------- SAM table ----------
  function SamTable(props) {
    var rows = props.sam;
    var head = ["SAM", "RC", "Brickwall", "Brick/RC%", "Cust YTD", "Cust/Brick%"];
    return R.createElement("div", { className: "tbl-scroll", style: { maxHeight: 320 } },
      R.createElement("table", { className: "lk-table" },
        R.createElement("thead", null, R.createElement("tr", null, head.map(function (h, i) {
          return R.createElement("th", { key: i, style: i === 0 ? null : { textAlign: "right" } }, h);
        }))),
        R.createElement("tbody", null, rows.map(function (r) {
          return R.createElement("tr", { key: r.name },
            R.createElement("td", { className: "bold" }, r.name),
            R.createElement("td", { className: "num" }, fmtInt(r.rc)),
            R.createElement("td", { className: "num" }, fmtInt(r.brick)),
            R.createElement("td", { className: "num" }, fmtPct(r.brickRc)),
            R.createElement("td", { className: "num" }, fmtInt(r.cust)),
            R.createElement("td", { className: "num" }, fmtPct(r.custBrick))
          );
        }))
      )
    );
  }

  // ---------- periode helpers (Latest = Juni 2026) ----------
  var MONTHS = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
  var LATEST_YEAR = "2026";
  var LATEST_MONTH = "Juni";
  function resolveYear(v) { return v === "Latest Year" ? LATEST_YEAR : v; }
  function resolveMonth(v) { return v === "Latest Month" ? LATEST_MONTH : v; }
  function periodLabel(f) { return resolveMonth(f.bulan) + " " + resolveYear(f.tahun); }

  // ---------- Filter row (custom for ME-29) ----------
  function Me29Filters(props) {
    var f = props.filters, on = props.onChange;
    return R.createElement("div", { className: "filterrow", "data-tour": "filters" },
      R.createElement(FilterField, { label: "Tahun", value: f.tahun, highlight: "#dae8fb", options: ["Latest Year", "2024", "2025", "2026", "2027", "2028"], onChange: function (v) { on({ tahun: v }); } }),
      R.createElement(FilterField, { label: "Bulan", value: f.bulan, highlight: "#dae8fb", options: ["Latest Month"].concat(MONTHS), onChange: function (v) { on({ bulan: v }); } }),
      R.createElement(FilterField, { label: "Region", value: f.region, options: ["Semua Region", "REGION I", "REGION II", "REGION III", "REGION IV", "REGION V", "REGION VI", "REGION VII"], onChange: function (v) { on({ region: v }); } })
    );
  }

  // ---------- Lightweight guided tour ----------
  var TOUR = [
    { id: "filters", title: "Filter Global — Periode · Region", desc: "Filter mengontrol seluruh dashboard: Tahun, Bulan, dan Region. Pada dashboard live, judul tiap tile ikut dinamis mengikuti periode terpilih.", looker: "Dashboard filters native. Tahun/Bulan→field tanggal; Region→dimensi wilayah, di-pass ke semua tile." },
    { id: "scorecards", title: "Scorecard Nasional", desc: "Lima angka inti: Total RC, Total Brickwall, % Brickwall/RC (cakupan penilaian), Cust YTD, dan % Cust/Brickwall (konversi tembok-bata jadi pelanggan aktif).", looker: "Single Value viz × 5. % = calculated field (Brickwall÷RC, Cust÷Brickwall)." },
    { id: "region-table", title: "RC vs Brickwall per Region", desc: "Tabel REGION I–VII + NASIONAL. Kolom % diberi conditional formatting (makin hijau makin tinggi).", looker: "Table viz, sort via header. Kolom Brick/RC% & Cust/Brick% = table calculation + conditional formatting." },
    { id: "region-map", title: "Sebaran Brickwall per Wilayah", desc: "Choropleth: makin gelap = jumlah Brickwall makin banyak. CATATAN: pemetaan Region→pulau masih ILUSTRASI sampai ada mapping provinsi resmi per Region.", looker: "Geo chart (Filled Map). Dimension = wilayah; measure = jumlah Brickwall." },
    { id: "matrix", title: "Matriks Parameter (rata-rata skor)", desc: "12 parameter dipecah jadi 3 tabel (4 parameter tiap tabel), baris = Region. Warna bucket tunggal (skala rata-rata): 1,00–1,67 Lemah, 1,67–2,33 Sedang, 2,33–3,00 Tinggi. Memakai rata-rata, bukan total, agar adil antar-region.", looker: "3 Table tile (masing-masing difilter ke 4 parameter) + conditional formatting rule-based. Legend = tile Markdown/HTML terpisah. Measure = AVG(Parameter Value), pivot Region; join RC↔PARAMETER BRICKWALL via Customer ID." },
    { id: "trend", title: "Tren Bulanan", desc: "Batang = Total RC per bulan; garis = % Brickwall vs RC. Januari–Desember 2026. CATATAN: seri bulanan ilustrasi — sumber belum punya dimensi tanggal scoring.", looker: "Column + Line combo, dual Y-axis. Dimension = bulan." },
    { id: "sam-table", title: "Level SAM", desc: "Struktur tabel sama seperti Region, dipecah per SAM (SAM SR 1–7). Angka ilustrasi sampai definisi SAM final.", looker: "Table viz. Dimension = SAM; measures sama dengan tabel Region." }
  ];

  function GuidedTour29(props) {
    var active = props.active, onClose = props.onClose;
    var st = R.useState(0), idx = st[0], setIdx = st[1];
    var rs = R.useState(null), rect = rs[0], setRect = rs[1];
    var cur = TOUR[idx];
    R.useEffect(function () {
      if (active) {
        var i = props.startId ? TOUR.findIndex(function (s) { return s.id === props.startId; }) : 0;
        setIdx(i < 0 ? 0 : i);
      }
    }, [active, props.startId]);
    R.useEffect(function () {
      if (!active || !cur) { setRect(null); return; }
      var el = document.querySelector('[data-tour="' + cur.id + '"]');
      if (!el) { setRect(null); return; }
      var top = el.getBoundingClientRect().top + window.pageYOffset;
      window.scrollTo({ top: Math.max(0, top - window.innerHeight * 0.25), behavior: "smooth" });
      var upd = function () { var r = el.getBoundingClientRect(); setRect({ top: r.top, left: r.left, width: r.width, height: r.height }); };
      var t = setTimeout(upd, 360);
      window.addEventListener("resize", upd); window.addEventListener("scroll", upd, { passive: true });
      return function () { clearTimeout(t); window.removeEventListener("resize", upd); window.removeEventListener("scroll", upd); };
    }, [active, idx]);
    if (!active || !cur) return null;
    var PAD = 8, TW = 350;
    var hl = rect ? { top: rect.top - PAD, left: rect.left - PAD, width: rect.width + PAD * 2, height: rect.height + PAD * 2 } : null;
    var cardTop = hl ? (window.innerHeight - (hl.top + hl.height) >= 230 ? hl.top + hl.height + 12 : Math.max(8, hl.top - 232)) : "50%";
    var cardLeft = hl ? Math.max(8, Math.min(hl.left, window.innerWidth - TW - 8)) : "50%";
    return R.createElement(R.Fragment, null,
      R.createElement("div", { onClick: onClose, style: { position: "fixed", inset: 0, zIndex: 9989 } }),
      hl
        ? R.createElement("div", { style: { position: "fixed", top: hl.top, left: hl.left, width: hl.width, height: hl.height, border: "2px solid #2eb5e6", borderRadius: 5, boxShadow: "0 0 0 9999px rgba(8,16,36,0.70)", zIndex: 9990, pointerEvents: "none", transition: "all .3s ease" } })
        : R.createElement("div", { style: { position: "fixed", inset: 0, background: "rgba(8,16,36,0.70)", zIndex: 9990, pointerEvents: "none" } }),
      R.createElement("div", { style: { position: "fixed", top: cardTop, left: cardLeft, transform: hl ? "none" : "translate(-50%,-50%)", width: TW, background: "#0c1a36", color: "#fff", borderRadius: 8, padding: "14px 16px 12px", zIndex: 9991, boxShadow: "0 8px 36px rgba(0,0,0,0.6), 0 0 0 1px #1e3566", fontFamily: "var(--font-sans)" } },
        R.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 9 } },
          R.createElement("span", { style: { fontSize: 10.5, fontWeight: 700, letterSpacing: 0.9, color: "#5dbbeb", textTransform: "uppercase" } }, "Panduan ME-29 · " + (idx + 1) + " / " + TOUR.length),
          R.createElement("button", { onClick: onClose, style: { background: "none", border: "none", color: "#5a7090", cursor: "pointer", fontSize: 15 } }, "✕")
        ),
        R.createElement("div", { style: { fontSize: 13.5, fontWeight: 700, lineHeight: 1.35, marginBottom: 7 } }, cur.title),
        R.createElement("div", { style: { fontSize: 12, lineHeight: 1.62, color: "#b0c4de", marginBottom: 9 } }, cur.desc),
        cur.looker && R.createElement("div", { style: { fontSize: 11, lineHeight: 1.5, color: "#6a9fbf", borderTop: "1px solid #162850", paddingTop: 8, marginBottom: 11 } },
          R.createElement("strong", { style: { color: "#2eb5e6" } }, "Looker viz: "), cur.looker),
        R.createElement("div", { style: { display: "flex", gap: 6, alignItems: "center" } },
          R.createElement("button", { onClick: function () { setIdx(Math.max(0, idx - 1)); }, disabled: idx === 0, style: { background: "transparent", border: "1px solid #1b2f55", color: idx === 0 ? "#2d4060" : "#8aaac8", borderRadius: 4, padding: "5px 11px", fontSize: 11.5, cursor: idx === 0 ? "default" : "pointer" } }, "← Sebelumnya"),
          R.createElement("div", { style: { flex: 1 } }),
          idx < TOUR.length - 1
            ? R.createElement("button", { onClick: function () { setIdx(idx + 1); }, style: { background: "#1565b8", border: "none", color: "#fff", borderRadius: 4, padding: "5px 15px", fontSize: 11.5, cursor: "pointer", fontWeight: 600 } }, "Selanjutnya →")
            : R.createElement("button", { onClick: onClose, style: { background: "#1b7a45", border: "none", color: "#fff", borderRadius: 4, padding: "5px 15px", fontSize: 11.5, cursor: "pointer", fontWeight: 600 } }, "Selesai ✓")
        )
      )
    );
  }

  // ---------- Brand top bar (override engine TopBar) ----------
  function Me29TopBar() {
    return R.createElement("div", { className: "topbar" },
      R.createElement("button", { className: "icon-btn", title: "Menu" }, R.createElement(Icon, { name: "menu", size: 16 })),
      R.createElement("div", { className: "topbar-logo" },
        R.createElement("span", { className: "badge" }, "B"),
        R.createElement("span", null, "Brickwall for Industry")
      ),
      R.createElement("div", { className: "topbar-search" }, R.createElement(Icon, { name: "search", size: 13 }), R.createElement("span", null, "Cari pelanggan, region, parameter…")),
      R.createElement("div", { className: "topbar-right" },
        R.createElement("button", { className: "icon-btn", title: "Help" }, R.createElement(Icon, { name: "help" })),
        R.createElement("div", { className: "avatar" }, "ME")
      )
    );
  }

  // ---------- App ----------
  function ME29App(props) {
    props = props || {};
    var data = window.ME29_DATA;
    var accentName = props.accent || "Looker Blue";
    var ac = ACCENTS[accentName] || ACCENTS["Looker Blue"];
    var specMode = props.specMode == null ? true : !!props.specMode;
    var fs = R.useState({ tahun: "Latest Year", bulan: "Latest Month", region: "Semua Region", sam: "Semua SAM" });
    var filters = fs[0], setFilters = fs[1];
    var ts = R.useState(false), tour = ts[0], setTour = ts[1];
    var tss = R.useState(null), tourStart = tss[0], setTourStart = tss[1];
    R.useEffect(function () {
      var h = function (e) { setTourStart(e.detail && e.detail.startId ? e.detail.startId : null); setTour(true); };
      window.addEventListener("me30-open-tour", h);
      return function () { window.removeEventListener("me30-open-tour", h); };
    }, []);
    if (!data) return R.createElement("div", { style: { padding: 40, color: "#6b7280" } }, "Memuat data ME-29…");

    var rootStyle = { "--band-navy": ac.band, "--c-blue": ac.primary, "--num-blue": ac.num };
    var note = function (txt) { return specMode ? R.createElement(LookerNote, null, txt) : null; };
    var period = periodLabel(filters);
    var mapRegions = data.regions.map(function (r) {
      return { id: r.id, name: r.name, value: r.brick, valueFmt: fmtInt(r.brick) + " brickwall",
        table: [
          { k: "RC", v: fmtInt(r.rc) },
          { k: "Brickwall", v: fmtInt(r.brick) },
          { k: "% Brick/RC", v: fmtPct(r.brickRc) },
          { k: "Cust YTD", v: fmtInt(r.cust) },
          { k: "% Cust/Brick", v: fmtPct(r.custBrick) }
        ] };
    });

    return R.createElement("div", { style: rootStyle },
      R.createElement(Me29TopBar, null),
      R.createElement(TitleBar, { title: "Brickwall for Industry · ME-29", meta: period, onTour: function () { setTourStart(null); setTour(true); } }),
      R.createElement(Me29Filters, { filters: filters, onChange: function (p) { setFilters(Object.assign({}, filters, p)); } }),

      R.createElement("div", { className: "page-title-band" },
        R.createElement("div", { className: "page-title-main" }, "Brickwall for Industry"),
        R.createElement("div", { className: "page-title-sub" }, period)
      ),

      R.createElement("div", { className: "content" },
        // Scorecards
        R.createElement(SectionBand, { tourId: "scorecards" }, "Ringkasan Nasional"),
        R.createElement("div", { "data-tour": "scorecards" }, R.createElement(ScoreCards, { national: data.national })),

        // Region table + map
        R.createElement(SectionBand, null, "RC vs Brickwall per Region"),
        R.createElement("div", { className: "grid" },
          R.createElement(Tile, { title: "Tabel Region — RC · Brickwall · Konversi", span: 7, tourId: "region-table", flush: true },
            R.createElement(RegionTable, { regions: data.regions, national: data.national })
          ),
          R.createElement(Tile, { title: "Sebaran Brickwall per Wilayah" + (specMode ? " (ilustrasi)" : ""), span: 5, tourId: "region-map", flush: true },
            R.createElement("div", { style: { padding: 8 } },
              R.createElement(IndonesiaMap, { regions: mapRegions, height: 300, hueBase: ac.mapHue })
            )
          )
        ),

        // Matrix — 3 tabel grup (4 parameter masing-masing) + legend tile terpisah
        R.createElement(SectionBand, null, "Matriks Parameter Brickwall — Rata-rata Skor per Region"),
        R.createElement("div", { className: "grid" },
          R.createElement(Tile, { title: "Grup 1 · Parameter 1–4", span: 4, tourId: "matrix", flush: true },
            R.createElement(MatrixGroupTable, { params: data.params.slice(0, 4), matrix: data.matrix, matrixNational: data.matrixNational })
          ),
          R.createElement(Tile, { title: "Grup 2 · Parameter 5–8", span: 4, flush: true },
            R.createElement(MatrixGroupTable, { params: data.params.slice(4, 8), matrix: data.matrix, matrixNational: data.matrixNational })
          ),
          R.createElement(Tile, { title: "Grup 3 · Parameter 9–12", span: 4, flush: true },
            R.createElement(MatrixGroupTable, { params: data.params.slice(8, 12), matrix: data.matrix, matrixNational: data.matrixNational })
          )
        ),
        R.createElement("div", { className: "grid" },
          R.createElement(Tile, { span: 4, flush: true },
            R.createElement(MatrixLegendTile, null)
          )
        ),

        // Trend
        R.createElement(SectionBand, null, "Tren Bulanan"),
        R.createElement("div", { className: "grid" },
          R.createElement(Tile, { title: "Total RC & % Brickwall per Bulan", span: 12, tourId: "trend" },
            R.createElement(BarChart, {
              series: data.monthly.rc, labels: data.monthly.labels, height: 250, color: ac.primary,
              format: function (v) { return fmtInt(v); },
              secondary: { data: data.monthly.brickPct, axis: true, color: ac.line, label: "% Brickwall", format: function (v) { return v.toFixed(1).replace(".", ",") + "%"; } }
            }),
            R.createElement("div", { className: "legend" },
              R.createElement("span", { className: "item" }, R.createElement("span", { className: "sw", style: { background: ac.primary } }), "Total RC"),
              R.createElement("span", { className: "item" }, R.createElement("span", { className: "sw", style: { background: ac.line } }), "% Brickwall vs RC")
            )
          )
        ),

        // SAM
        R.createElement(SectionBand, null, "Level SAM"),
        R.createElement("div", { className: "grid" },
          R.createElement(Tile, { title: "RC vs Brickwall per SAM" + (specMode ? " (ilustrasi)" : ""), span: 12, tourId: "sam-table", flush: true },
            R.createElement(SamTable, { sam: data.sam })
          )
        ),

        R.createElement("div", { className: "page-foot" },
          R.createElement("span", null, "WO ME-29 · Mockup tampilan untuk Looker / LookML · angka ilustrasi"),
          R.createElement("span", null, "Sumber: Dashboard Report Brickwall Customer")
        )
      ),

      R.createElement(GuidedTour29, { active: tour, startId: tourStart, onClose: function () { setTour(false); } })
    );
  }

  Object.assign(window, { ME29App: ME29App });
})();