/* CRM · Account — fifth batch of company dossier panels, ported 1:1 from the
 * map modal's renderDossier* functions (index.html). Mirrors the contract,
 * helpers, and styling of CrmAccountPanels.jsx: each panel fetches its own RPC
 * keyed by org_id and renders ONLY when real data is on file (returns null
 * otherwise) — no fabricated rows, no placeholders. Registered on
 * window.CrmPanels[key]; reuses the shared kit on window.CrmPanelKit.
 *
 * FL condo / FL state actions / FL business-tax-and-permit rollup, plus the
 * org's NYC real-estate holdings (ACRIS deeds). The BTR rollup and ACRIS
 * holdings RPCs take extra args (p_limit, numeric p_org_id) so they use custom
 * loaders rather than the kit's rpcLoad. */

(function () {
  const { useState, useEffect } = React;
  const K = window.CrmPanelKit;
  const { usePanelData, rpcLoad, fnGet, money, num, fmtDate, fmtMonth, SrcBadge, Flag, Panel, RegRow, Field, AddrBlock, Note, fmtAddr } = K;
  window.CrmPanels = window.CrmPanels || {};

  // Small subsection label (mirrors the map's _ds_subsec): bold uppercase header
  // above its rows. Optional muted badge after the title.
  const SubSec = ({ children, badge }) => (
    <div style={{ fontSize: "var(--fs-sm)", color: "var(--fg-3)", fontWeight: 600, textTransform: "uppercase", letterSpacing: ".05em", margin: "10px 14px 6px", display: "flex", alignItems: "baseline", gap: 6 }}>
      <span>{children}</span>
      {badge && <span className="pill" style={{ padding: "1px 5px", background: "#f1f5f9", color: "#475569", borderColor: "transparent", textTransform: "none", letterSpacing: 0, fontWeight: 500 }}>{badge}</span>}
    </div>
  );

  // ───────────────────────── PANELS ─────────────────────────

  // 1. FL condo association — renderDossierFlCondo. RPC org_fl_condo → { condo:{
  // condo_name, primary_status, project_number, file_number, county,
  // street_city_state_zip, units, recorded_date, managing_entity_name,
  // managing_entity_city, managing_entity_state } }.
  window.CrmPanels.flcondo = function FlCondo({ orgId }) {
    const d = usePanelData(rpcLoad("org_fl_condo"), orgId);
    const c = d && d.condo;
    if (!c) return null;
    const active = c.primary_status === "A" || c.primary_status === "Active";
    const color = active ? "#059669" : "#b45309";
    const mgLoc = [c.managing_entity_city, c.managing_entity_state].filter(Boolean).join(", ");
    return (
      <Panel title="FL condo association" badge={<SrcBadge bg="#ddd6fe" color="#5b21b6">Sunbiz</SrcBadge>}>
        <div style={{ padding: "6px 16px 14px" }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 6 }}>
            <span style={{ font: "600 13px/1.2 var(--font)" }}>{c.condo_name}</span>
            <Flag bg={color + "18"} color={color}>{c.primary_status || "Unknown"}</Flag>
          </div>
          <Field l="Project #" v={c.project_number} mono />
          <Field l="File #" v={c.file_number} />
          <Field l="County" v={c.county} />
          <Field l="Address" v={c.street_city_state_zip} />
          <Field l="Units" v={c.units != null ? num(c.units) : null} />
          <Field l="Recorded" v={c.recorded_date ? fmtDate(c.recorded_date) : null} />
          <Field l="Managing entity" v={c.managing_entity_name} />
          <Field l="Managing location" v={mgLoc} />
        </div>
      </Panel>
    );
  };

  // 2. FL state actions — renderDossierFlStateActions. RPC org_fl_state_actions →
  // { dor:[{warrant_amount, warrant_number, taxpayer_name, dba, county, address,
  // city, zip, snapshot_date}], warn:[{employees_affected, state_notification_date,
  // company_name, industry, layoff_date_start, layoff_date_end, layoff_site_address,
  // layoff_site_city, layoff_site_zip}] }.
  window.CrmPanels.flstate = function FlStateActions({ orgId }) {
    const d = usePanelData(rpcLoad("org_fl_state_actions"), orgId);
    const dor = (d && d.dor) || [];
    const warn = (d && d.warn) || [];
    if (!dor.length && !warn.length) return null;
    const totalOwed = dor.reduce((s, r) => s + Number(r.warrant_amount || 0), 0);
    const count = [dor.length ? dor.length + " tax warrants" : null, warn.length ? warn.length + " WARN" : null].filter(Boolean).join(" · ");
    return (
      <Panel title="FL state actions" badge={<SrcBadge bg="#fee2e2" color="#991b1b">DOR Tax Warrants · WARN</SrcBadge>} count={count}>
        {dor.length > 0 && <SubSec badge="FL Dept of Revenue">{"FL DOR tax warrants (" + dor.length + ")"}</SubSec>}
        {dor.length > 0 && (
          <div className="reg-panel">
            {dor.map((r, i) => (
              <RegRow key={"d" + i} badge="⚠" badgeBg="#991b1b"
                title={<span style={{ fontFamily: "var(--font-mono)", color: "#991b1b", fontWeight: 700 }}>{money(r.warrant_amount)}</span>}
                fact={[r.taxpayer_name ? "Taxpayer: " + r.taxpayer_name : null, r.dba ? "DBA: " + r.dba : null, r.county, [r.address, r.city, r.zip].filter(Boolean).join(", ") || null, r.snapshot_date ? "snapshot " + fmtDate(r.snapshot_date) : null].filter(Boolean).join(" · ")}
                right={r.warrant_number ? "Warrant " + r.warrant_number : null} />
            ))}
          </div>
        )}
        {dor.length > 0 && (
          <div style={{ padding: "0 14px 4px", textAlign: "right" }}>
            <span style={{ fontSize: "var(--fs-sm)", color: "var(--fg-3)" }}>Total: </span>
            <b style={{ color: "#991b1b" }}>{money(totalOwed)}</b>
          </div>
        )}
        {warn.length > 0 && <SubSec badge="mass layoff filings">{"FL WARN notices (" + warn.length + ")"}</SubSec>}
        {warn.length > 0 && (
          <div className="reg-panel">
            {warn.map((w, i) => (
              <RegRow key={"w" + i} badge="WARN" badgeBg="#991b1b"
                title={<span style={{ fontFamily: "var(--font-mono)", fontWeight: 700 }}>{num(w.employees_affected) + " jobs"}</span>}
                fact={[w.company_name, w.industry, "Layoff " + (w.layoff_date_start ? fmtDate(w.layoff_date_start) : "") + (w.layoff_date_end ? " → " + fmtDate(w.layoff_date_end) : ""), [w.layoff_site_address, w.layoff_site_city, w.layoff_site_zip].filter(Boolean).join(", ") || null].filter(Boolean).join(" · ")}
                right={w.state_notification_date ? "Filed " + fmtDate(w.state_notification_date) : null} />
            ))}
          </div>
        )}
        <div style={{ padding: "0 14px 12px" }}><Note>FL Dept of Revenue delinquent-taxpayer warrants (&gt; $100K) + WARN mass-layoff notices.</Note></div>
      </Panel>
    );
  };

  // 3. FL business licenses & locations — renderDossierFlBtrRollup. RPC
  // org_business_tax_rollup({ p_org_id (numeric), p_limit: 50 }) → many arrays of
  // BTR licenses + permits across Broward / Lee / Miami-Dade / City of Miami /
  // Fort Pierce / various permit jurisdictions. Aggregates contact emails/phones.
  window.CrmPanels.flbtr = function FlBtrRollup({ orgId }) {
    const d = usePanelData((c, id) => c.rpc("org_business_tax_rollup", { p_org_id: Number(id), p_limit: 50 }).then(({ data, error }) => (error ? null : data)), orgId);
    if (!d) return null;
    const bro = d.bro_btr || [], lee = d.lee_btr || [], mdc = d.mdc_biz || [], com = d.com_btr || [], ftp = d.ftp_btr || [];
    const mdcP = d.mdc_perm || [], comP = d.com_perm || [], ftlP = d.ftl_perm || [], leonP = d.leon_perm || [], pensaP = d.pensa_perm || [], capecP = d.capec_perm || [], charR = d.charlotte || [];
    const total = bro.length + lee.length + mdc.length + com.length + ftp.length + mdcP.length + comP.length + ftlP.length + leonP.length + pensaP.length + capecP.length + charR.length;
    if (!total) return null;

    // Aggregate emails + phones for the header.
    const allEmails = new Set();
    const allPhones = new Set();
    bro.forEach((b) => {
      if (b.business_email) allEmails.add(b.business_email);
      if (b.owner_email) allEmails.add(b.owner_email);
      [b.business_phone, b.business_phone_alt, b.mobile_phone, b.owner_phone].forEach((p) => p && allPhones.add(p));
    });
    lee.forEach((b) => { if (b.business_email) allEmails.add(b.business_email); if (b.business_phone) allPhones.add(b.business_phone); });
    ftp.forEach((b) => {
      if (b.officer_email) allEmails.add(b.officer_email);
      [b.officer_phone, b.business_phone].forEach((p) => p && p !== "NOT ENTERED" && allPhones.add(p));
    });
    leonP.forEach((p) => { if (p.contractor_email) allEmails.add(p.contractor_email); if (p.contractor_phone) allPhones.add(p.contractor_phone); });
    const emails = Array.from(allEmails);
    const phones = Array.from(allPhones);

    // A single license/permit "location" card: header (label + status + year) and
    // a stack of label/value field rows (extras is an array of [label, value]).
    const Loc = ({ label, status, year, addr, parcelRef, extras }) => (
      <div className="reg-row" style={{ flexDirection: "column", alignItems: "stretch" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 4 }}>
          <span style={{ font: "600 12px/1.2 var(--font)" }}>{label || "Business"}</span>
          {status ? <Flag bg="#0e7c6618" color="#0e7c66">{status}</Flag> : null}
          {year ? <span style={{ color: "var(--fg-3)", fontSize: 10, marginLeft: "auto" }}>{year}</span> : null}
        </div>
        <Field l="Address" v={addr} />
        <Field l="Parcel" v={parcelRef} mono />
        {(extras || []).map(([l, v], i) => <Field key={i} l={l} v={v} />)}
      </div>
    );

    const link = (kind, val) => val ? <a href={(kind === "mailto" ? "mailto:" : "tel:") + val} style={{ color: "var(--accent)" }}>{val}</a> : null;

    return (
      <Panel title="FL business licenses & locations" badge={<SrcBadge bg="#a7f3d0" color="#065f46">Broward · Lee · Miami-Dade · CoM · Fort Pierce</SrcBadge>} count={total + " FL business licenses + permits"}>
        {(emails.length > 0 || phones.length > 0) && (
          <div style={{ background: "#ecfdf5", border: "1px solid #a7f3d0", borderRadius: 8, padding: "10px 12px", margin: "10px 16px 0", font: "500 11px var(--font)" }}>
            <div style={{ fontWeight: 700, color: "#065f46", marginBottom: 4 }}>{"Aggregated contact info from " + total + " FL business license" + (total > 1 ? "s" : "")}</div>
            {emails.length > 0 && (
              <div><strong>Emails:</strong> {emails.slice(0, 6).map((e, i) => <span key={i}>{i > 0 ? " · " : " "}{link("mailto", e)}</span>)}{emails.length > 6 && <span style={{ color: "var(--fg-3)" }}>{" +" + (emails.length - 6) + " more"}</span>}</div>
            )}
            {phones.length > 0 && (
              <div><strong>Phones:</strong> {phones.slice(0, 6).map((p, i) => <span key={i}>{i > 0 ? " · " : " "}{link("tel", p)}</span>)}{phones.length > 6 && <span style={{ color: "var(--fg-3)" }}>{" +" + (phones.length - 6) + " more"}</span>}</div>
            )}
          </div>
        )}

        {bro.length > 0 && <SubSec badge="Broward BTR · email/phone/owner">{"Broward licenses (" + bro.length + ")"}</SubSec>}
        {bro.length > 0 && (
          <div className="reg-panel">
            {bro.map((b, i) => (
              <Loc key={"bro" + i} label={b.business_name || b.dba_name} status={b.account_status} year={b.year} addr={b.business_address} parcelRef={b.parcel_ref}
                extras={[
                  ["Owner", b.owner_name],
                  ["Class", b.class_name ? (b.class_name + (b.occupation_desc ? " · " + b.occupation_desc : "")) : null],
                  ["Email", link("mailto", b.business_email)],
                  ["Phone", link("tel", b.business_phone)],
                  ["Balance", b.account_balance != null && Number(b.account_balance) > 0 ? <span style={{ color: "#b91c1c", fontWeight: 700 }}>{money(b.account_balance)}</span> : null],
                ]} />
            ))}
          </div>
        )}

        {lee.length > 0 && <SubSec badge="Lee BTR · email/phone">{"Lee Co licenses (" + lee.length + ")"}</SubSec>}
        {lee.length > 0 && (
          <div className="reg-panel">
            {lee.map((b, i) => (
              <Loc key={"lee" + i} label={b.business_name || b.common_name} status={b.account_status} year={null} addr={b.business_address || b.physical_address} parcelRef={b.parcel_ref}
                extras={[
                  ["Owner", b.owner_name],
                  ["Category", b.category_name],
                  ["Email", link("mailto", b.business_email)],
                  ["Phone", link("tel", b.business_phone)],
                ]} />
            ))}
          </div>
        )}

        {mdc.length > 0 && <SubSec badge="MDC Local Business Tax">{"Miami-Dade licenses (" + mdc.length + ")"}</SubSec>}
        {mdc.length > 0 && (
          <div className="reg-panel">
            {mdc.map((b, i) => (
              <Loc key={"mdc" + i} label={b.bus_name} status={b.acc_status} year={b.year} addr={(b.bus_addr || "") + (b.bus_addr2 ? " " + b.bus_addr2 : "")} parcelRef={b.parcel_ref}
                extras={[
                  ["Owner", b.owner_name],
                  ["NAICS", b.naics_code],
                  ["Class", b.class_desc],
                  ["Mail addr", b.mail_addr ? (b.mail_addr + (b.mail_city ? ", " + b.mail_city : "")) : null],
                  ["Units", b.no_of_units || null],
                ]} />
            ))}
          </div>
        )}

        {com.length > 0 && <SubSec badge="CoM BTR">{"City of Miami licenses (" + com.length + ")"}</SubSec>}
        {com.length > 0 && (
          <div className="reg-panel">
            {com.map((b, i) => (
              <Loc key={"com" + i} label={b.business_name} status={b.btr_status} year={null} addr={(b.business_address || "") + (b.unit ? " #" + b.unit : "")} parcelRef={b.parcel_ref}
                extras={[
                  ["Activity", b.activity_description],
                  ["Zoning", b.zoning_codes],
                  ["Sq ft", b.square_footage || null],
                  ["Issued", b.application_issued ? fmtDate(b.application_issued) : null],
                ]} />
            ))}
          </div>
        )}

        {ftp.length > 0 && <SubSec badge="Fort Pierce BTR · officer contact">{"Fort Pierce licenses (" + ftp.length + ")"}</SubSec>}
        {ftp.length > 0 && (
          <div className="reg-panel">
            {ftp.map((b, i) => (
              <Loc key={"ftp" + i} label={b.business_name} status={b.status} year={null} addr={b.business_address} parcelRef={b.parcel_ref}
                extras={[
                  ["Owner", b.owner_name],
                  ["Officer", b.officer_name ? (b.officer_name + (b.officer_title ? " · " + b.officer_title : "")) : null],
                  ["Officer email", link("mailto", b.officer_email)],
                  ["Officer phone", b.officer_phone && b.officer_phone !== "NOT ENTERED" ? link("tel", b.officer_phone) : null],
                  ["Classification", b.license_classification],
                ]} />
            ))}
          </div>
        )}

        {mdcP.length > 0 && <SubSec badge="MDC Permits · org is contractor/business">{"Miami-Dade permits (" + mdcP.length + ")"}</SubSec>}
        {mdcP.length > 0 && (
          <div className="reg-panel">
            {mdcP.map((p, i) => (
              <Loc key={"mdcp" + i} label={p.desc1 || p.type || "Permit"} status={p.type} year={p.issudate ? fmtDate(p.issudate) : null} addr={p.address} parcelRef={p.parcel_ref}
                extras={[
                  ["Permit #", p.procnum ? <span style={{ fontFamily: "var(--font-mono)" }}>{p.procnum}</span> : null],
                  ["Folio", p.folio],
                  ["Est value", p.estvalue != null && Number(p.estvalue) > 0 ? money(p.estvalue) : null],
                ]} />
            ))}
          </div>
        )}

        {comP.length > 0 && <SubSec badge="CoM Permits">{"City of Miami permits (" + comP.length + ")"}</SubSec>}
        {comP.length > 0 && (
          <div className="reg-panel">
            {comP.map((p, i) => (
              <Loc key={"comp" + i} label={p.scope_of_work || p.master_permit_type || "Permit"} status={p.master_permit_type} year={p.permit_issued_date ? fmtDate(p.permit_issued_date) : null} addr={p.full_address} parcelRef={p.parcel_ref}
                extras={[
                  ["Permit #", p.permit_number ? <span style={{ fontFamily: "var(--font-mono)" }}>{p.permit_number}</span> : null],
                  ["Folio", p.folio],
                ]} />
            ))}
          </div>
        )}

        {ftlP.length > 0 && <SubSec badge="FtL Permits">{"Ft Lauderdale permits (" + ftlP.length + ")"}</SubSec>}
        {ftlP.length > 0 && (
          <div className="reg-panel">
            {ftlP.map((p, i) => (
              <Loc key={"ftlp" + i} label={p.permit_desc || p.permit_type || "Permit"} status={p.permit_status} year={p.submit_date ? fmtDate(p.submit_date) : null} addr={p.full_addr} parcelRef={p.parcel_ref}
                extras={[
                  ["Permit #", p.permit_id ? <span style={{ fontFamily: "var(--font-mono)" }}>{p.permit_id}</span> : null],
                  ["Type", p.permit_type],
                  ["Est cost", p.est_cost != null && Number(p.est_cost) > 0 ? money(p.est_cost) : null],
                ]} />
            ))}
          </div>
        )}

        {leonP.length > 0 && <SubSec badge="Leon Permits · contractor email/phone">{"Leon County permits (" + leonP.length + ")"}</SubSec>}
        {leonP.length > 0 && (
          <div className="reg-panel">
            {leonP.map((p, i) => (
              <Loc key={"leonp" + i} label={p.description || p.permit_type || "Permit"} status={p.status} year={p.issue_date ? fmtDate(p.issue_date) : null} addr={p.site_address} parcelRef={p.parcel_ref}
                extras={[
                  ["Permit #", p.permit_number ? <span style={{ fontFamily: "var(--font-mono)" }}>{p.permit_number}</span> : null],
                  ["Type", p.permit_type],
                  ["Contractor email", link("mailto", p.contractor_email)],
                  ["Contractor phone", link("tel", p.contractor_phone)],
                  ["Value", p.permit_value != null && Number(p.permit_value) > 0 ? money(p.permit_value) : null],
                ]} />
            ))}
          </div>
        )}

        {pensaP.length > 0 && <SubSec badge="Pensacola Permits · business + contact name">{"Pensacola permits (" + pensaP.length + ")"}</SubSec>}
        {pensaP.length > 0 && (
          <div className="reg-panel">
            {pensaP.map((p, i) => {
              const contact = [p.contact_first_name, p.contact_last_name].filter(Boolean).join(" ");
              return (
                <Loc key={"pensap" + i} label={p.description || p.work_type || "Permit"} status={p.work_type} year={p.date_issued ? fmtDate(p.date_issued) : null} addr={p.site_address} parcelRef={p.parcel_ref}
                  extras={[
                    ["Project #", p.project_number ? <span style={{ fontFamily: "var(--font-mono)" }}>{p.project_number}</span> : null],
                    ["Business", p.business_name],
                    ["Contact", contact || null],
                    ["Value", p.value_of_project != null && Number(p.value_of_project) > 0 ? money(p.value_of_project) : null],
                  ]} />
              );
            })}
          </div>
        )}

        {capecP.length > 0 && <SubSec badge="Cape Coral Permits">{"Cape Coral permits (" + capecP.length + ")"}</SubSec>}
        {capecP.length > 0 && (
          <div className="reg-panel">
            {capecP.map((p, i) => (
              <Loc key={"capecp" + i} label={p.description || p.permit_type || "Permit"} status={p.status} year={p.issue_date ? fmtDate(p.issue_date) : null} addr={p.site_address} parcelRef={p.parcel_ref}
                extras={[
                  ["Permit #", p.permit_number ? <span style={{ fontFamily: "var(--font-mono)" }}>{p.permit_number}</span> : null],
                  ["Type", p.permit_type],
                  ["Owner", p.owner_name],
                  ["Value", p.permit_value != null && Number(p.permit_value) > 0 ? money(p.permit_value) : null],
                ]} />
            ))}
          </div>
        )}

        {charR.length > 0 && <SubSec badge="Charlotte permits / code / licenses">{"Charlotte County records (" + charR.length + ")"}</SubSec>}
        {charR.length > 0 && (
          <div className="reg-panel">
            {charR.map((c, i) => (
              <Loc key={"char" + i} label={c.description || c.record_type || "Record"} status={c.record_status} year={c.date_opened ? fmtDate(c.date_opened) : null} addr={c.street_full} parcelRef={c.parcel_ref}
                extras={[
                  ["Record #", c.record_id ? <span style={{ fontFamily: "var(--font-mono)" }}>{c.record_id}</span> : null],
                  ["Type", c.record_type],
                  ["Business", c.business_name],
                  ["License #", c.license_nbr],
                ]} />
            ))}
          </div>
        )}

        <div style={{ padding: "0 14px 12px" }}><Note>FL business-tax licenses + building permits across Broward, Lee, Miami-Dade, City of Miami, Fort Pierce, and other reporting jurisdictions.</Note></div>
      </Panel>
    );
  };

  // 4. Real estate holdings — renderDossierACRISHoldings. RPC org_acris_holdings
  // ({ p_org_id, p_limit: 30 }) → { count, holdings:[{bbl, property_address,
  // last_deed_date, last_deed_amt, activity_class, mortgage_active, has_lien}] }.
  // The org's portfolio of NYC properties via ACRIS deed records.
  window.CrmPanels.acrisholdings = function AcrisHoldings({ orgId }) {
    const d = usePanelData((c, id) => c.rpc("org_acris_holdings", { p_org_id: id, p_limit: 30 }).then(({ data, error }) => (error ? null : data)), orgId);
    if (!d || !d.count) return null;
    const holdings = d.holdings || [];
    if (!holdings.length) return null;
    // ACRIS-holdings money helper: compact $M/$K, null below $1K (mirrors the map fn).
    const amt = (v) => (v == null || v === 0 ? null : Number(v) >= 1e6 ? "$" + (Number(v) / 1e6).toFixed(2) + "M" : Number(v) >= 1e3 ? "$" + (Number(v) / 1e3).toFixed(0) + "K" : null);
    return (
      <Panel title="Real estate holdings" badge={<SrcBadge bg="#dcfce7" color="#166534">ACRIS</SrcBadge>} count={d.count}>
        <div style={{ padding: "10px 16px 0", fontSize: "12.5px", fontWeight: 600, color: "var(--fg-1)" }}>
          {"Owns " + d.count + " propert" + (d.count === 1 ? "y" : "ies") + " via deed records"}
        </div>
        <div className="reg-panel">
          {holdings.slice(0, 10).map((h, i) => {
            const flags = [];
            if (h.mortgage_active) flags.push(<Flag key="m" bg="#fee2e2" color="#991b1b">Mortgaged</Flag>);
            if (h.has_lien) flags.push(<Flag key="l" bg="#fef9c3" color="#713f12">Lien</Flag>);
            const meta = [h.last_deed_date ? fmtMonth(h.last_deed_date) : null, amt(h.last_deed_amt), h.activity_class].filter(Boolean).join(" · ");
            return (
              <RegRow key={i} badge="ACRIS" badgeBg="#166534"
                title={h.property_address || (h.bbl ? "BBL " + h.bbl : "—")}
                fact={<>{meta}{flags.length > 0 && <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginTop: 4 }}>{flags}</div>}</>} />
            );
          })}
        </div>
        {d.count > 10 && <div style={{ padding: "0 16px 8px", fontSize: "var(--fs-sm)", color: "var(--fg-3)" }}>{"+" + (d.count - 10) + " more properties"}</div>}
        <div style={{ padding: "0 14px 12px" }}><Note>NYC properties owned by this company, from ACRIS deed records.</Note></div>
      </Panel>
    );
  };
})();