import React, { useRef, useState } from "react";
import html2pdf from "html2pdf.js";

const primaryOf = (arr = []) => {
  if (!Array.isArray(arr) || arr.length === 0) return null;
  return arr.find((item) => item?.meta?.rank === 0) || arr[0];
};

const safe = (val, fallback = "—") =>
  val === undefined || val === null || val === "" ? fallback : val;

const fmtName = (n) => {
  if (!n) return "—";
  return n.data || [n.first, n.middle, n.last].filter(Boolean).join(" ");
};

const fmtAddress = (a) => {
  if (!a) return "—";
  return a.data || a.complete || "—";
};

const fmtMoney = (n) =>
  typeof n === "number"
    ? n.toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })
    : "—";

const relationshipLabel = (type, subType) => {
  const typeMap = { R: "Relative", A: "Associate" };
  const subMap = {
    M: "Spouse",
    C: "Child",
    P: "Parent",
    S: "Sibling",
    I: "Relative",
    O: "Associate",
    A: "Associate",
    R: "Relative",
  };
  const base = typeMap[type] || "Contact";
  const sub = subMap[subType];
  return sub ? `${base} (${sub})` : base;
};

const Section = ({ title, count, children }) => (
  <div className="mb-4">
    <h6 className="fw-bold border-bottom pb-1 mb-2">
      {title}
      {typeof count === "number" && (
        <span className="text-muted fw-normal"> &nbsp;( Found {count} {count === 1 ? "entry" : "entries"} )</span>
      )}
    </h6>
    {children}
  </div>
);

const EmptyRow = ({ colSpan = 1, label = "Found None" }) => (
  <tr>
    <td colSpan={colSpan} className="text-muted text-center py-2">
      {label}
    </td>
  </tr>
);

const SummaryRow = ({ label, count }) => (
  <div style={{width: "20%", padding: "0px 5px", margin: "0px 0px 10px 0px"}}>
    <div style={{background: "#fff", padding: "15px", height: "100%", justifyContent: "center", display: "flex", alignItems: "center", flexDirection: "column", gap: "10px", borderRadius: "20px", textAlign: "center",}}>
      <h4 style={{color: "#0c3155", fontSize: "14px", fontWeight: 500, margin: 0,}}>{count > 0 ? `Found ${count}` : "Found None"}</h4>
      <p style={{color: "#818181", lineHeight: "100%", fontSize: "14px", fontWeight: 500, margin: "0px",}}>{label}</p>                    
    </div>
  </div>
);

const findEnvelope = (reportResponse) => {
  const candidates = [
    reportResponse?.data?.data,
    reportResponse?.data,
    reportResponse,
  ];

  return candidates.find((c) => c && Array.isArray(c.result)) || {};
};

export default function IdiReportDisplay({ reportResponse }) {
  const envelope = findEnvelope(reportResponse);
  const results = envelope.result || [];
  const result = results[0];
  const reportId = envelope.id;
  const reportRef = useRef(null);
const [downloading, setDownloading] = useState(false);


  const disclaimer = 'Interactive Data, LLC (“IDI”) is not a “consumer reporting agency” and its services do not constitute “consumer reports,” as these terms are defined by the Fair Credit Reporting Act, 15 U.S.C. § 1681 et seq. (“FCRA”) or similar state statutes. Accordingly, IDI services may not be used in whole or in part as a factor in establishing an individual`’`s eligibility for credit, insurance, employment, or for any other eligibility purpose permitted by the FCRA' +

    'idiCORE may only be accessed and used in accordance with your Subscriber Agreement, the Gramm-Leach-Bliley Act (“GLBA”), the Driver’s Privacy Protection Act (“DPPA”), and other applicable laws. By accessing and using idiCORE, Subscriber reaffirms its understanding and agreement to the foregoing. Subscriber shall be liable for its use of this system. Any misuse, or violation of Subscriber agreements and/or applicable law, will result in investigation and termination of access.'

  if (!result) {
    return <p className="text-muted">No report data available.</p>;
  }

  const names = result.name || [];
  const dobs = result.dob || [];
  const addresses = result.address || [];
  const phones = result.phone || [];
  const emails = result.email || [];
  const bankruptcies = result.bankruptcy || [];
  const employments = result.employment || [];
  const properties = result.property || [];
  const relationships = result.relationship || [];
  const vehicles = result.motorVehicle || [];
  const criminals = result.criminal || [];
  const judgments = result.judgment || [];
  const liens = result.lien || [];
  const aircraft = result.aircraft || [];
  const businesses = result.business || [];
  const professional = result.professional || [];

  const primaryName = primaryOf(names);
  const primaryDob = primaryOf(dobs);
  const primaryAddress = primaryOf(addresses);
  const primaryPhone = primaryOf(phones);
  const aliases = names.filter((n) => n !== primaryName);

  const summaryItems = [
    ["Bankruptcies", bankruptcies.length],
    ["Employments", employments.length],
    ["Properties", properties.length],
    ["Addresses", addresses.length],
    ["Phones", phones.length],
    ["Emails", emails.length],
    ["Relationships", relationships.length],
    ["Motor Vehicles", vehicles.length],
    ["Criminal/Infractions", criminals.length],
    ["Judgments", judgments.length],
    ["Liens", liens.length],
    ["Aircraft", aircraft.length],
    ["Businesses", businesses.length],
    ["Professional Licenses", professional.length],
  ];

  const handleDownloadPdf = () => {
  if (!reportRef.current) return;
  setDownloading(true);

  const opt = {
    margin: 0,
    filename: `IDI_Report_${safe(reportId, "report")}.pdf`,
    image: { type: "jpeg", quality: 0.98 },
    html2canvas: { scale: 2, useCORS: true },
    jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
    pagebreak: { mode: ["css", "legacy"] },
  };

  html2pdf()
    .set(opt)
    .from(reportRef.current)
    .save()
    .finally(() => setDownloading(false));
};


  return (
    <>
    <style>{`
      @page {
        size: A4;
        margin: 0;
        padding: 0;
      }
      .container{
        padding: 10px !important;
        max-width: initial;
      }
      h3{
        color: #0c3155;
        font-size: 18px;
        font-weight: 600;
        text-transform: uppercase;
        margin: 10px 0px 10px 0px;
      }
      table.ui-table tbody tr:nth-child(even){background: #dfefff;}
      *{
      box-sizing: border-box;
      }

      @media print {
        html, body {
          margin: 0;
          padding: 0;
        }
      }
    `}</style>
    <button
      onClick={handleDownloadPdf}
      disabled={downloading}
      style={{background: "#0c3155", zIndex: "5", display: "inline-flex", alignItems: "center", gap: "5px", position: "absolute", right: "25px", top: "20px", outline: "none", border: "none", borderRadius: "30px", padding: "5px 10px", color: "#fff", fontSize: "13px" }}
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
        <path d="M4.603 14.087a.8.8 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.7 7.7 0 0 1 1.482-.645 20 20 0 0 0 1.062-2.227 7.3 7.3 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.188-.012.396-.047.614-.084.51-.27 1.134-.52 1.794a11 11 0 0 0 .98 1.686 5.8 5.8 0 0 1 1.334.05c.364.066.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.86.86 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.7 5.7 0 0 1-.911-.95 11.7 11.7 0 0 0-1.997.406 11.3 11.3 0 0 1-1.02 1.51c-.292.35-.609.656-.927.787a.8.8 0 0 1-.58.029m1.379-1.901q-.25.115-.459.238c-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361q.016.032.026.044l.035-.012c.137-.056.355-.235.635-.572a8 8 0 0 0 .45-.606m1.64-1.33a13 13 0 0 1 1.01-.193 12 12 0 0 1-.51-.858 21 21 0 0 1-.5 1.05zm2.446.45q.226.245.435.41c.24.19.407.253.498.256a.1.1 0 0 0 .07-.015.3.3 0 0 0 .094-.125.44.44 0 0 0 .059-.2.1.1 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a4 4 0 0 0-.612-.053zM8.078 7.8a7 7 0 0 0 .2-.828q.046-.282.038-.465a.6.6 0 0 0-.032-.198.5.5 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822q.036.167.09.346z"/>
      </svg>
      <span>{downloading ? "Generating PDF..." : "Export as PDF"}</span>
    </button>
    <div className="idi-report" ref={reportRef} style={{background: "#e3eefb"}}>
      <table width="100%" border="0" cellPadding="0" cellSpacing="0" align="center" className="deviceWidth">
        <tbody>
          <tr>
            <td width="100%" bgcolor="#eff6ff" className="center" style={{padding:"20px 20px 30px"}}>
              <table border="0" cellPadding="0" cellSpacing="0" align="center" width="100%">
                <tbody>
                  <tr>
                    <td colSpan={2} className="left" style={{fontSize:"12px", position: "relative", color:"#687074",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"20px",verticalAlign:"middle",margin:0}}>
                      <h4 style={{ letterSpacing: "1px", color: "#0c3155", textAlign: "center", fontSize: "26px", fontWeight: "800", margin: "0px 0px 5px 0px" }}>Mayer Consulting Solutions, Inc.</h4>
                      <p style={{margin:"0px 0px 15px 0px", textAlign: "center"}}>
                        Comprehensive Background Report on
                      </p>
                      <h5 style={{fontSize: "20px", margin: "0px 0px 5px 0px", textAlign: "center"}}>
                        {fmtName(primaryName)}
                      </h5>
                      <p style={{margin:"0px 0px 15px 0px", textAlign: "center"}}>
                        Report id: {safe(reportId)}
                      </p>


                      <div
                        style={{
                          backgroundColor: "#fffbeb",
                          borderLeft: "4px solid #facc15",
                          textAlign: "left",
                          padding: "15px",
                          borderRadius: "10px",
                          margin: "0px 0px 15px 0px"
                        }}
                      >
                        <div className="d-flex align-items-start gap-2">
                          <svg
                            width="20"
                            height="20"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="#eab308"
                            strokeWidth="2"
                            style={{ flexShrink: 0, marginTop: "2px" }}
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
                            />
                          </svg>

                          <div className="text-start" style={{ textAlign: "left" }}>
                            <p className="mb-1 fw-semibold" style={{ color: "#92400e", fontSize: "0.9rem", textAlign: "left" }}>
                              Compliance Notice
                            </p>
                            <p className="mb-0" style={{ color: "#b45309", fontSize: "0.8rem", textAlign: "left" }}>
                              {disclaimer}
                            </p>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div style={{margin: "0px -5px", display: "flex", flexWrap: "wrap"}}>
                        <div style={{width: "25%", padding: "0px 5px", margin: "0px 0px 15px 0px"}}>
                          <div style={{background: "#fff", padding: "15px", height: "100%", justifyContent: "center", display: "flex", alignItems: "center", flexDirection: "column", gap: "10px", borderRadius: "20px", textAlign: "center",}}>
                            <span style={{background: "#0c3155", color: "#fff", width: "55px", height: "55px", display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "50%"}}>
                              <svg style={{width: "28px", height: "28px", color: "#fff",}} xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                                <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
                              </svg>
                            </span>
                            {aliases.length > 0 && (
                              <h4 style={{color: "#0c3155", fontSize: "14px", fontWeight: 500, margin: 0,}}>{aliases.map(fmtName).join("; ")}</h4>
                            )}
                            <p style={{color: "#818181", lineHeight: "100%", fontSize: "14px", fontWeight: 500, margin: "0px",}}>Name</p>
                          </div>
                        </div>
                        <div style={{width: "25%", padding: "0px 5px", margin: "0px 0px 15px 0px"}}>
                          <div style={{background: "#fff", padding: "15px", height: "100%", justifyContent: "center", display: "flex", alignItems: "center", flexDirection: "column", gap: "10px", borderRadius: "20px", textAlign: "center",}}>
                            <span style={{background: "#0c3155", color: "#fff", width: "55px", height: "55px", display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "50%"}}>
                              <svg style={{width: "28px", height: "28px", color: "#fff",}} viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.9021 5.58958C5.01456 5.58958 4.2923 4.83723 4.2923 3.91271V1.67688C4.2923 0.752358 5.01456 0 5.9021 0C6.78963 0 7.5119 0.752358 7.5119 1.67688V3.91271C7.5119 4.83723 6.78963 5.58958 5.9021 5.58958ZM5.9021 1.11792C5.60589 1.11792 5.3655 1.36833 5.3655 1.67688V3.91271C5.3655 4.22125 5.60589 4.47167 5.9021 4.47167C6.1983 4.47167 6.4387 4.22125 6.4387 3.91271V1.67688C6.4387 1.36833 6.1983 1.11792 5.9021 1.11792Z" fill="currentColor"></path><path d="M18.7805 5.58958C17.8929 5.58958 17.1707 4.83723 17.1707 3.91271V1.67688C17.1707 0.752358 17.8929 0 18.7805 0C19.668 0 20.3903 0.752358 20.3903 1.67688V3.91271C20.3903 4.83723 19.668 5.58958 18.7805 5.58958ZM18.7805 1.11792C18.4843 1.11792 18.2439 1.36833 18.2439 1.67688V3.91271C18.2439 4.22125 18.4843 4.47167 18.7805 4.47167C19.0767 4.47167 19.3171 4.22125 19.3171 3.91271V1.67688C19.3171 1.36833 19.0767 1.11792 18.7805 1.11792Z" fill="currentColor"></path><path d="M24.1465 8.94334H0.536107C0.239909 8.94334 -0.000488281 8.69293 -0.000488281 8.38438V6.14855C-0.000488281 3.99097 1.68443 2.23584 3.75571 2.23584H4.82891C5.12511 2.23584 5.36551 2.48625 5.36551 2.7948V3.91271C5.36551 4.22126 5.60591 4.47167 5.90211 4.47167C6.19831 4.47167 6.43871 4.22126 6.43871 3.91271V2.7948C6.43871 2.48625 6.67911 2.23584 6.97531 2.23584H17.7073C18.0035 2.23584 18.2439 2.48625 18.2439 2.7948V3.91271C18.2439 4.22126 18.4843 4.47167 18.7805 4.47167C19.0767 4.47167 19.3171 4.22126 19.3171 3.91271V2.7948C19.3171 2.48625 19.5575 2.23584 19.8537 2.23584H20.9269C22.9982 2.23584 24.6831 3.99097 24.6831 6.14855V8.38438C24.6831 8.69293 24.4427 8.94334 24.1465 8.94334ZM1.07271 7.82542H23.6099V6.14855C23.6099 4.60806 22.4058 3.35376 20.9269 3.35376H20.3903V3.91271C20.3903 4.83723 19.668 5.58959 18.7805 5.58959C17.893 5.58959 17.1707 4.83723 17.1707 3.91271V3.35376H7.51191V3.91271C7.51191 4.83723 6.78964 5.58959 5.90211 5.58959C5.01457 5.58959 4.29231 4.83723 4.29231 3.91271V3.35376H3.75571C2.27684 3.35376 1.07271 4.60806 1.07271 6.14855V7.82542Z" fill="currentColor"></path><path d="M20.9269 25.7121H3.75571C1.68443 25.7121 -0.000488281 23.957 -0.000488281 21.7994V8.3844C-0.000488281 8.07585 0.239909 7.82544 0.536107 7.82544H24.1465C24.4427 7.82544 24.6831 8.07585 24.6831 8.3844V21.7994C24.6831 23.957 22.9982 25.7121 20.9269 25.7121ZM1.07271 8.94336V21.7994C1.07271 23.3399 2.27684 24.5942 3.75571 24.5942H20.9269C22.4058 24.5942 23.6099 23.3399 23.6099 21.7994V8.94336H1.07271Z" fill="currentColor"></path><path d="M16.634 23.4762H8.04846C7.16092 23.4762 6.43866 22.7239 6.43866 21.7994V19.5635C6.43866 19.255 6.67906 19.0046 6.97526 19.0046C7.27146 19.0046 7.51186 19.255 7.51186 19.5635V21.7994C7.51186 22.1079 7.75226 22.3583 8.04846 22.3583H16.634C16.9302 22.3583 17.1706 22.1079 17.1706 21.7994V19.5635C17.1706 19.255 17.411 19.0046 17.7072 19.0046C18.0034 19.0046 18.2438 19.255 18.2438 19.5635V21.7994C18.2438 22.7239 17.5216 23.4762 16.634 23.4762Z" fill="currentColor"></path><path d="M12.3413 20.1225C11.4655 20.1225 10.6853 19.682 10.1949 19.0046C10.0768 19.1689 9.93946 19.3221 9.78599 19.4573C9.185 19.9906 8.39083 20.2186 7.60203 20.0856C6.32707 19.8676 5.36548 18.6323 5.36548 17.2081C5.36548 15.7313 6.51595 14.5329 7.93043 14.5329H16.7521C18.1666 14.5329 19.3171 15.7313 19.3171 17.2047V17.2081C19.3171 18.6312 18.3555 19.8676 17.0816 20.0845C16.2949 20.2175 15.4975 19.9894 14.8965 19.4562C14.7431 19.3209 14.6057 19.1689 14.4877 19.0046C13.9972 19.682 13.217 20.1225 12.3413 20.1225ZM7.93043 15.6508C7.10836 15.6508 6.43868 16.3484 6.43868 17.2047C6.43868 18.0901 7.01284 18.8525 7.77481 18.9811C8.2599 19.0649 8.72567 18.9308 9.09163 18.6055C9.45115 18.2857 9.65828 17.8196 9.65828 17.3277C9.65828 17.0191 9.89868 16.7687 10.1949 16.7687C10.4911 16.7687 10.7315 17.0191 10.7315 17.3277C10.7315 18.2522 11.4537 19.0046 12.3413 19.0046C13.2288 19.0046 13.9511 18.2522 13.9511 17.3277C13.9511 17.0191 14.1915 16.7687 14.4877 16.7687C14.7839 16.7687 15.0243 17.0191 15.0243 17.3277C15.0243 17.8196 15.2314 18.2857 15.592 18.6055C15.9579 18.9297 16.4226 19.0616 16.9088 18.9811C17.6697 18.8525 18.2439 18.0901 18.2439 17.2081V17.2047C18.2439 16.3473 17.5742 15.6508 16.7521 15.6508H7.93043Z" fill="currentColor"></path><path d="M12.3412 15.6508C12.045 15.6508 11.8046 15.4004 11.8046 15.0918V12.2971C11.8046 11.9885 12.045 11.7381 12.3412 11.7381C12.6374 11.7381 12.8778 11.9885 12.8778 12.2971V15.0918C12.8778 15.4004 12.6374 15.6508 12.3412 15.6508Z" fill="currentColor"></path><path d="M12.3413 12.856C11.7499 12.856 11.2681 12.3541 11.2681 11.7381C11.2681 11.339 11.6115 10.7365 11.9002 10.3027C12.1009 9.99976 12.5827 9.99976 12.7824 10.3027C13.071 10.7365 13.4145 11.339 13.4145 11.7381C13.4145 12.3541 12.9326 12.856 12.3413 12.856Z" fill="currentColor"></path></svg>
                            </span>
                            <h4 style={{color: "#0c3155", fontSize: "14px", fontWeight: 500, margin: 0,}}>{safe(primaryDob?.date?.data)} {primaryDob?.age ? ` (${primaryDob.age} yrs)` : ""}</h4>
                            <p style={{color: "#818181", lineHeight: "100%", fontSize: "14px", fontWeight: 500, margin: "0px",}}>Date of Birth / Age</p>
                          </div>
                        </div>
                        <div style={{width: "25%", padding: "0px 5px", margin: "0px 0px 15px 0px"}}>
                          <div style={{background: "#fff", padding: "15px", height: "100%", justifyContent: "center", display: "flex", alignItems: "center", flexDirection: "column", gap: "10px", borderRadius: "20px", textAlign: "center",}}>
                            <span style={{background: "#0c3155", color: "#fff", width: "55px", height: "55px", display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "50%"}}>
                              <svg style={{width: "28px", height: "28px", color: "#fff",}} xmlns="http://www.w3.org/2000/svg"  fill="currentColor" viewBox="0 0 16 16">
                                <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/>
                              </svg>
                            </span>
                            <h4 style={{color: "#0c3155", fontSize: "14px", fontWeight: 500, margin: 0,}}>{primaryPhone ? `${primaryPhone.number}${primaryPhone.type ? ` (${primaryPhone.type})` : ""}` : "—"}</h4>
                            <p style={{color: "#818181", lineHeight: "100%", fontSize: "14px", fontWeight: 500, margin: "0px",}}>Primary Phone</p>
                          </div>
                        </div>
                        <div style={{width: "25%", padding: "0px 5px", margin: "0px 0px 15px 0px"}}>
                          <div style={{background: "#fff", padding: "15px", height: "100%", justifyContent: "center", display: "flex", alignItems: "center", flexDirection: "column", gap: "10px", borderRadius: "20px", textAlign: "center",}}>
                            <span style={{background: "#0c3155", color: "#fff", width: "55px", height: "55px", display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "50%"}}>
                              <svg style={{width: "28px", height: "28px", color: "#fff",}} xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10"/>
                                <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
                              </svg>
                            </span>
                            <h4 style={{color: "#0c3155", fontSize: "14px", fontWeight: 500, margin: 0,}}>{fmtAddress(primaryAddress)}</h4>
                            <p style={{color: "#818181", lineHeight: "100%", fontSize: "14px", fontWeight: 500, margin: "0px",}}>Current Address</p>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style={{padding: "0px 0px 10px 0px"}}>
                      <h3>Profile Summary</h3>
                      <div style={{margin: "0px -5px", display: "flex", flexWrap: "wrap"}}>
                        {summaryItems.map(([label, count]) => (
                          <SummaryRow key={label} label={label} count={count} />
                        ))}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>City Summary {addresses.length}</h3>
                      <table border="0" className="ui-table" cellPadding="0" cellSpacing="0" align="center" style={{width:"100%",maxWidth:"100%", background: "#fff", margin:"0px 0px 15px 0px",border:" none", borderRadius: "10px", overflow: "hidden", borderSpacing:0,borderCollapse:"collapse"}}>
                        <thead style={{background:"#0c3155"}}>
                          <tr>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>
                              City
                            </th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>
                              Date Range
                            </th>
                          </tr>
                        </thead>

                        <tbody>
                          {addresses.length === 0 ? (
                            <EmptyRow colSpan={2} />
                          ) : (
                            addresses.map((a, i) => (
                              <tr key={i}>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>
                                  {a.city ? `${a.city}${a.state ? `, ${a.state}` : ""}` : "—"}
                                </td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(a.dateRange)}</td>
                              </tr>
                            ))
                          )}
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>County Summary {addresses.length}</h3>
                      <table border="0" className="ui-table" cellPadding="0" cellSpacing="0" align="center" style={{width:"100%",maxWidth:"100%", background: "#fff", margin:"0px 0px 15px 0px",border:" none", borderRadius: "10px", overflow: "hidden", borderSpacing:0,borderCollapse:"collapse"}}>
                        <thead style={{background:"#0c3155"}}>
                          <tr>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>
                              County
                            </th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>
                              Date Range
                            </th>
                          </tr>
                        </thead>

                        <tbody>
                          {addresses.length === 0 ? (
                            <EmptyRow colSpan={2} />
                          ) : (
                            addresses.map((a, i) => (
                              <tr key={i}>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>
                                  {a.county ? `${a.county}${a.state ? `, ${a.state}` : ""}` : "—"}
                                </td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(a.dateRange)}</td>
                              </tr>
                            ))
                          )}
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>Addresses {addresses.length}</h3>
                      <table border="0" className="ui-table" cellPadding="0" cellSpacing="0" align="center" style={{width:"100%",maxWidth:"100%", background: "#fff", margin:"0px 0px 15px 0px",border:" none", borderRadius: "10px", overflow: "hidden", borderSpacing:0,borderCollapse:"collapse"}}>
                        <thead style={{background:"#0c3155"}}>
                          <tr>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>
                              Address
                            </th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>
                              County
                            </th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>
                              Date Range
                            </th>
                          </tr>
                        </thead>

                        <tbody>
                          {addresses.length === 0 ? (
                            <EmptyRow colSpan={3} />
                          ) : (
                            addresses.map((a, i) => (
                              <tr key={i}>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{fmtAddress(a)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(a.county)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(a.dateRange)}</td>
                              </tr>
                            ))
                          )}
                        </tbody>
                      </table>
                    </td>
                  </tr>

                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>Known Email Addresses {emails.length}</h3>
                      <table border="0" className="ui-table" cellPadding="0" cellSpacing="0" align="center" style={{width:"100%",maxWidth:"100%", background: "#fff", margin:"0px 0px 15px 0px",border:" none", borderRadius: "10px", overflow: "hidden", borderSpacing:0,borderCollapse:"collapse"}}>
                        <thead style={{background:"#0c3155"}}>
                          <tr>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Email Address</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Last Seen</th>
                          </tr>
                        </thead>

                        <tbody>
                          {emails.length===0 ? (
                            <EmptyRow colSpan={2}/>
                          ) : (
                            emails.map((e,i)=>(
                              <tr key={i}>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(e.data)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(e.meta?.lastSeen)}</td>
                              </tr>
                            ))
                          )}
                        </tbody>
                      </table>
                    </td>
                  </tr>

                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>Known Phone Numbers {phones.length}</h3>
                      <table border="0" className="ui-table" cellPadding="0" cellSpacing="0" align="center" style={{width:"100%",maxWidth:"100%", background: "#fff", margin:"0px 0px 15px 0px",border:" none", borderRadius: "10px", overflow: "hidden", borderSpacing:0,borderCollapse:"collapse"}}>
                        <thead style={{background:"#0c3155"}}>
                          <tr>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Number</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Type</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Provider</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Last Seen</th>
                          </tr>
                        </thead>

                        <tbody>
                          {phones.length === 0 ? (
                            <EmptyRow colSpan={4} />
                          ) : (
                            phones.map((p,i)=>(
                              <tr key={i}>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(p.number)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(p.type)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(p.providerName)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(p.meta?.lastSeen)}</td>
                              </tr>
                            ))
                          )}
                        </tbody>
                      </table>
                    </td>
                  </tr>

                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>Bankruptcy Records {bankruptcies.length}</h3>
                      <table border="0" className="ui-table" cellPadding="0" cellSpacing="0" align="center" style={{width:"100%",maxWidth:"100%", background: "#fff", margin:"0px 0px 15px 0px",border:" none", borderRadius: "10px", overflow: "hidden", borderSpacing:0,borderCollapse:"collapse"}}>
                        <thead style={{background:"#0c3155"}}>
                          <tr>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Chapter</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Filing Date</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Case Number</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Status</th>
                          </tr>
                        </thead>

                        <tbody>
                          {bankruptcies.length===0 ? (
                            <EmptyRow colSpan={4}/>
                          ) : (
                            bankruptcies.map((b,i)=>(
                              <tr key={i}>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(b.chapter)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(b.filingDate?.data)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(b.fullCaseNumber)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(b.caseStatus)}</td>
                              </tr>
                            ))
                          )}
                        </tbody>
                      </table>
                    </td>
                  </tr>

                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>Known Employments {employments.length}</h3>
                      <table border="0" className="ui-table" cellPadding="0" cellSpacing="0" align="center" style={{width:"100%",maxWidth:"100%", background: "#fff", margin:"0px 0px 15px 0px",border:" none", borderRadius: "10px", overflow: "hidden", borderSpacing:0,borderCollapse:"collapse"}}>
                        <thead style={{background:"#0c3155"}}>
                          <tr>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Employer</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Address</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Last Seen</th>
                          </tr>
                        </thead>

                        <tbody>
                          {employments.length===0 ? (
                            <EmptyRow colSpan={3}/>
                          ) : (
                            employments.map((e,i)=>(
                              <tr key={i}>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(e.employerName)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{fmtAddress(e.address)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{safe(e.date?.data)}</td>
                              </tr>
                            ))
                          )}
                        </tbody>
                      </table>
                    </td>
                  </tr>

                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>Known Properties {properties.length}</h3>
                      <table border="0" className="ui-table" cellPadding="0" cellSpacing="0" align="center" style={{width:"100%",maxWidth:"100%", background: "#fff", margin:"0px 0px 15px 0px",border:" none", borderRadius: "10px", overflow: "hidden", borderSpacing:0,borderCollapse:"collapse"}}>
                        <thead style={{background:"#0c3155"}}>
                          <tr>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Address</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Assessed Value</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Market Value</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Owners</th>
                          </tr>
                        </thead>
                        <tbody>
                          {properties.length===0 ? (
                            <EmptyRow colSpan={4}/>
                          ) : (
                            properties.map((p,i)=>(
                              <tr key={i}>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{fmtAddress(p.address)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{fmtMoney(p.assessment?.assessedValue)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{fmtMoney(p.assessment?.marketValue)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>
                                  {(p.owner||[]).map(o=>o.name).filter(Boolean).join(", ") || "—"}
                                </td>
                              </tr>
                            ))
                          )}
                        </tbody>
                      </table>
                    </td>
                  </tr>

                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>Known Associates {relationships.length}</h3>
                      <table border="0" className="ui-table" cellPadding="0" cellSpacing="0" align="center" style={{width:"100%",maxWidth:"100%", background: "#fff", margin:"0px 0px 15px 0px",border:" none", borderRadius: "10px", overflow: "hidden", borderSpacing:0,borderCollapse:"collapse"}}>
                        <thead style={{background:"#0c3155"}}>
                          <tr>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Name</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Relationship Type / Sub Type</th>
                            <th style={{fontSize:"13px",color:"#fff",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",verticalAlign:"middle",padding:"8px 10px",border:" none"}}>Phone Number</th>
                          </tr>
                        </thead>
                        <tbody>
                          {relationships.length === 0 ? (
                            <tr><td>Found None</td></tr>
                          ) : (
                            relationships.map((r, i) => (
                              <tr key={i}>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{fmtName(r.name)}</td>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>
                                  {relationshipLabel(r.type, r.subType)}
                                  {r.dob?.age ? ` • Age: ${r.dob.age}` : ""}
                                </td>
                                {r.phone?.[0]?.number && (
                                  <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{r.phone[0].number}</td>
                                )}
                              </tr>
                            ))
                          )}
                        </tbody>
                      </table>
                    </td>
                  </tr>

                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>Known Vehicles {vehicles.length}</h3>
                      <div style={{margin: "0px -7px", display: "flex", flexWrap: "wrap"}}>
                        {vehicles.length === 0 ? (
                          <div className="text-muted">Found None</div>
                        ) : (
                          vehicles.map((v, i) => {
                            const d = v.detail?.[0] || {};
                            return (
                              <div key={i} style={{width: "25%", padding: "0px 7px", margin: "0px 0px 14px 0px"}}>
                                <div style={{background: "#fff", padding: "25px 15px", height: "100%", justifyContent: "center", display: "flex", alignItems: "center", flexDirection: "column", gap: "10px", borderRadius: "20px", textAlign: "center",}}>
                                  <h4 style={{color: "#0c3155", fontSize: "14px", fontWeight: 500, margin: 0,}}>
                                    {[d.modelYear, d.make, d.model, d.trim].filter(Boolean).join(" ")}
                                  </h4>
                                  <p style={{color: "#818181", lineHeight: "100%", fontSize: "13px", fontWeight: 500, margin: "0px",}}>VIN: {safe(d.vin)}</p>
                                  <p style={{color: "#818181", lineHeight: "100%", fontSize: "13px", fontWeight: 500, margin: "0px",}}>Body Style: {safe(d.bodyStyle)}</p>
                                </div>
                              </div>
                            );
                          })
                        )}
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <td colSpan={2} style={{padding: "0px 0px 10px 0px"}}>
                      <h3>Possible Criminal/Infractions {criminals.length}</h3>
                      {criminals.length === 0 ? (
                        <p style={{fontSize:"13px", background: "#fff", borderRadius: "10px", color:"#687074",fontWeight:"bold",textAlign:"left",fontFamily:"Arial,Helvetica,sans-serif",lineHeight:"22px",padding:"8px 10px",border:"1px solid #ddd"}}>Found None</p>
                      ) : (
                        <table border="0" className="ui-table" cellPadding="0" cellSpacing="0" align="center" style={{width:"100%",maxWidth:"100%", background: "#fff", margin:"0px 0px 15px 0px",border:" none", borderRadius: "10px", overflow: "hidden", borderSpacing:0,borderCollapse:"collapse"}}>
                          <tbody>
                            {criminals.map((c, i) => (
                              <tr key={i}>
                                <td style={{fontSize:"13px",color:"#687074",padding:"8px 10px",border:" none"}}>{JSON.stringify(c)}</td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      )}
                    </td>
                  </tr>

                  <tr>
                    <td colSpan={2}>
                      <div style={{margin: "0px -10px", display: "flex", flexWrap: "wrap"}}>
                        {[
                          ["Judgments", judgments],
                          ["Liens", liens],
                          ["Aircraft", aircraft],
                          ["Known Businesses", businesses],
                          ["Professional Licenses", professional],
                        ].map(([label, arr]) => (
                          <div key={label} style={{width: "20%", padding: "0px 10px", margin: "0px 0px 10px 0px"}}>
                            <div style={{background: "#fff", padding: "25px 15px", height: "100%", justifyContent: "center", display: "flex", alignItems: "center", flexDirection: "column", gap: "10px", borderRadius: "20px", textAlign: "center",}}>
                              <h4 style={{color: "#0c3155", fontSize: "14px", fontWeight: 500, margin: 0,}}>{label}</h4>
                              <p style={{color: "#818181", lineHeight: "100%", fontSize: "14px", fontWeight: 500, margin: "0px",}}>
                                {arr.length === 0 ? "Found None" : `Found ${arr.length}`}
                              </p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </td>
                  </tr>

                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    </>
  );
}