// Client-facing portal: reporting periods landing + folder/document listing + PDF preview

const ClientLanding = ({ onOpenPeriod, onOpenAdmin, search, setSearch, role, onSwitchRole, user }) => {
  const data = window.PORTAL_DATA;
  const periods = data.periods.filter(p => !search || p.label.toLowerCase().includes(search.toLowerCase()));

  // Group by year
  const byYear = {};
  periods.forEach(p => {
    if (!byYear[p.year]) byYear[p.year] = [];
    byYear[p.year].push(p);
  });
  const years = Object.keys(byYear).sort((a,b) => b - a);

  return (
    <div className="app" data-screen-label="Client Portal — Periods">
      <PortalTopbar role={role} onSwitchRole={onSwitchRole} user={user} active="documents" search={search} setSearch={setSearch} onOpenAdmin={onOpenAdmin} />
      <div className="main">
        <div className="container">
          <header className="page-head">
            <div>
              <div className="page-eyebrow">Investor portal · {data.firm.fundLong}</div>
              <h1>
                Reports & <em>statements</em>
              </h1>
              <p className="page-sub">
                A complete record of correspondence, performance reports and capital statements issued to you. Open a reporting period to download or preview documents.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 10 }}>
              <div style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink-3)" }}>Member since</div>
              <div className="serif" style={{ fontSize: 26, lineHeight: 1 }}>{user.memberSince}</div>
              <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
                {user.groups.map(gid => {
                  const g = data.groups.find(x => x.id === gid);
                  return <span key={gid} className="cat-pill">{g?.name}</span>;
                })}
              </div>
            </div>
          </header>

          {/* Featured / current period banner */}
          <FeaturedPeriod onOpen={onOpenPeriod} />

          {years.map(year => (
            <section key={year}>
              <div className="year-sep">
                <h2>{year}</h2>
                <div className="rule" />
                <span className="count">{byYear[year].length} period{byYear[year].length !== 1 ? "s" : ""}</span>
              </div>
              <div className="period-grid">
                {byYear[year].map(p => (
                  <button key={p.id} className="period-card" onClick={() => onOpenPeriod(p.id)}>
                    <div className="pc-top">
                      <span className="pc-meta">{p.type === "annual" ? "Annual" : p.type === "quarter" ? "Quarterly" : "Monthly"}</span>
                      <span className={"pc-status " + p.status}>{p.status}</span>
                    </div>
                    <div className="pc-label">
                      {p.type === "quarter" ? <><em>Q{p.q}</em> {p.year}</> :
                       p.type === "annual" ? <>FY <em>{p.year}</em></> :
                       <>{fmtMonth(p.m)} <em>{p.year}</em></>}
                    </div>
                    <div className="pc-bottom">
                      <span className="pc-count"><strong>{p.docCount}</strong> documents</span>
                      <span className="pc-arrow"><Icon name="arrowRight" size={16} /></span>
                    </div>
                  </button>
                ))}
              </div>
            </section>
          ))}
        </div>
        <PortalFooter />
      </div>
    </div>
  );
};

const FeaturedPeriod = ({ onOpen }) => {
  const data = window.PORTAL_DATA;
  const current = data.periods.find(p => p.id === "2026-q1");
  const newDocs = data.documents.filter(d => d.period === current.id && d.new);

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)", borderRadius: 12, overflow: "hidden", marginBottom: 16 }}>
      <button className="period-card featured" style={{ minHeight: 220 }} onClick={() => onOpen(current.id)}>
        <div className="pc-top">
          <span className="pc-meta" style={{ color: "var(--ink-4)" }}>● Current period</span>
          <span className="pc-status" style={{ color: "var(--gold)", borderColor: "var(--gold)" }}>{newDocs.length} new</span>
        </div>
        <div className="pc-label" style={{ fontSize: 44 }}>
          <em>Q1</em> 2026
        </div>
        <p style={{ margin: 0, color: "rgba(255,255,255,.7)", fontSize: 13.5, maxWidth: "44ch", lineHeight: 1.55 }}>
          Quarterly letter, performance report, capital account statement and supporting materials. Distributed {current.dateRange}.
        </p>
        <div className="pc-bottom">
          <span className="pc-count" style={{ color: "var(--ink-4)" }}>
            <strong style={{ color: "var(--paper)" }}>{current.docCount}</strong> documents · {current.dateRange}
          </span>
          <span className="pc-arrow"><Icon name="arrowRight" size={20} /></span>
        </div>
      </button>
      <div style={{ background: "var(--paper)", padding: 28, display: "flex", flexDirection: "column", gap: 12 }}>
        <div style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink-3)" }}>What's new</div>
        {newDocs.slice(0, 3).map(d => (
          <button key={d.id} onClick={() => onOpen(current.id)} style={{ all: "unset", display: "flex", alignItems: "center", gap: 12, padding: "10px 0", borderTop: "1px solid var(--rule)", cursor: "pointer" }}>
            <FileTag type={d.type} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="doc-name" style={{ fontSize: 13.5 }}>{d.title}</div>
              <div className="doc-meta">{d.date} · {d.size}</div>
            </div>
            <Icon name="arrowRight" size={14} style={{ color: "var(--ink-4)" }} />
          </button>
        ))}
      </div>
    </div>
  );
};

const PortalTopbar = ({ role, onSwitchRole, user, active, search, setSearch, onOpenAdmin, onHome }) => {
  const data = window.PORTAL_DATA;
  return (
    <header className="topbar">
      <a className="brand" onClick={onHome} style={{ cursor: "pointer" }}>
        <div className="brand-mark">C</div>
        <div className="brand-name">
          <span style={{ fontStyle: "italic" }}>CodeDrips</span>
          <small>Financial Services</small>
        </div>
      </a>
      <nav className="topnav">
        <a className={active === "documents" ? "active" : ""} onClick={onHome}>Documents</a>
        <a>Performance</a>
        <a>Capital</a>
        <a>Correspondence</a>
        {role === "admin" && <a className={active === "admin" ? "active" : ""} onClick={onOpenAdmin}>Admin</a>}
      </nav>
      <div className="topbar-spacer" />
      <div className="search-wrap" style={{ width: 260 }}>
        <Icon name="search" size={14} />
        <input className="input" placeholder="Search documents…" value={search || ""} onChange={(e) => setSearch && setSearch(e.target.value)} style={{ height: 36 }} />
      </div>
      <div className="topbar-actions">
        <div className="role-switch" title="Switch role (demo only)">
          <button className={role === "client" ? "active" : ""} onClick={() => onSwitchRole("client")}>Client</button>
          <button className={role === "admin" ? "active" : ""} onClick={() => onSwitchRole("admin")}>Admin</button>
        </div>
        <button className="iconbtn" title="Notifications">
          <Icon name="bell" size={16} />
        </button>
        <button className="user-chip">
          <Avatar initials={user.initials} />
          <div>
            <div className="user-name">{user.name}</div>
          </div>
          <Icon name="chevronDown" size={12} style={{ color: "var(--ink-4)" }} />
        </button>
      </div>
    </header>
  );
};

const PortalFooter = () => (
  <footer className="footer">
    <span>© CodeDrips Financial Services. Authorised by the FCA. Not for retail distribution.</span>
    <span>
      <a>Privacy</a>  ·  <a>Terms</a>  ·  <a>Contact IR</a>
    </span>
  </footer>
);

// ─── Period detail ────────────────────────────────────────────────────────

const PeriodDetail = ({ periodId, onBack, onPreview, onOpenAdmin, role, onSwitchRole, user, onDownload }) => {
  const data = window.PORTAL_DATA;
  const period = data.periods.find(p => p.id === periodId);
  const allDocs = data.documents.filter(d => d.period === periodId);

  const [filter, setFilter] = React.useState("all");
  const [search, setSearch] = React.useState("");
  const [view, setView] = React.useState("list");

  const categories = [...new Set(allDocs.map(d => d.category))];
  const visible = allDocs.filter(d => {
    if (filter !== "all" && d.category !== filter) return false;
    if (search && !d.title.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  if (!period) return null;

  return (
    <div className="app" data-screen-label="Period Detail">
      <PortalTopbar role={role} onSwitchRole={onSwitchRole} user={user} active="documents" onOpenAdmin={onOpenAdmin} onHome={onBack} />
      <div className="main">
        <div className="container">
          <div style={{ paddingTop: 32 }}>
            <div className="crumb">
              <a onClick={onBack}>Documents</a>
              <span className="sep"><Icon name="chevronRight" size={11} /></span>
              <a>{period.year}</a>
              <span className="sep"><Icon name="chevronRight" size={11} /></span>
              <span style={{ color: "var(--ink)" }}>{period.label}</span>
            </div>
          </div>

          <header className="page-head">
            <div>
              <div className="page-eyebrow">{period.dateRange} · {period.type === "quarter" ? "Quarterly distribution" : period.type === "annual" ? "Annual distribution" : "Monthly distribution"}</div>
              <h1>
                {period.type === "quarter" ? <><em>Q{period.q}</em> {period.year}</> :
                 period.type === "annual" ? <>Annual <em>{period.year}</em></> :
                 <>{fmtMonth(period.m)} <em>{period.year}</em></>}
              </h1>
              <p className="page-sub">
                {visible.length} document{visible.length !== 1 ? "s" : ""} available to you across {categories.length} categor{categories.length !== 1 ? "ies" : "y"}. Documents marked <span className="badge badge-restricted" style={{ verticalAlign: "middle" }}>Restricted</span> are visible only to your entity.
              </p>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <button className="btn btn-ghost"><Icon name="download" size={14} /> Download all</button>
              <button className="btn btn-ghost"><Icon name="print" size={14} /> Print index</button>
            </div>
          </header>

          <div className="filter-bar">
            <div className="search-wrap" style={{ flex: 1 }}>
              <Icon name="search" size={14} />
              <input className="input" placeholder={`Search within ${period.label}…`} value={search} onChange={(e) => setSearch(e.target.value)} />
            </div>
            <button className={"filter-chip " + (filter === "all" ? "active" : "")} onClick={() => setFilter("all")}>
              All <span className="count">{allDocs.length}</span>
            </button>
            {categories.map(c => (
              <button key={c} className={"filter-chip " + (filter === c ? "active" : "")} onClick={() => setFilter(c)}>
                {c} <span className="count">{allDocs.filter(d => d.category === c).length}</span>
              </button>
            ))}
            <div style={{ flex: "0 0 auto", display: "flex", gap: 4, marginLeft: "auto" }}>
              <button className="iconbtn" title="List view" style={{ background: view === "list" ? "var(--paper-2)" : undefined, color: view === "list" ? "var(--ink)" : undefined }} onClick={() => setView("list")}>
                <Icon name="list" size={16} />
              </button>
              <button className="iconbtn" title="Grid view" style={{ background: view === "grid" ? "var(--paper-2)" : undefined, color: view === "grid" ? "var(--ink)" : undefined }} onClick={() => setView("grid")}>
                <Icon name="grid" size={16} />
              </button>
            </div>
          </div>

          <div className="card" style={{ marginBottom: 56 }}>
            {view === "list" ? (
              <table className="doc-table">
                <thead>
                  <tr>
                    <th style={{ width: "40%" }}>Document</th>
                    <th>Category</th>
                    <th>Issued</th>
                    <th>Size</th>
                    <th style={{ textAlign: "right", width: 140 }}>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {visible.map(d => (
                    <tr key={d.id} onClick={() => d.type === "PDF" && onPreview(d.id)}>
                      <td>
                        <div className="doc-title">
                          <FileTag type={d.type} />
                          <div>
                            <div className="doc-name-row">
                              <span className="doc-name">{d.title}</span>
                              {d.new && <span className="badge badge-new">New</span>}
                              {d.restricted && <span className="badge badge-restricted"><Icon name="lock" size={9} stroke={2} /> Restricted</span>}
                            </div>
                          </div>
                        </div>
                      </td>
                      <td><span className="cat-pill">{d.category}</span></td>
                      <td className="tnum" style={{ color: "var(--ink-3)" }}>{d.date}</td>
                      <td className="tnum mono" style={{ color: "var(--ink-3)", fontSize: 12 }}>{d.size}</td>
                      <td>
                        <div className="doc-actions">
                          {d.type === "PDF" && (
                            <button className="btn btn-quiet btn-sm" onClick={(e) => { e.stopPropagation(); onPreview(d.id); }}>
                              <Icon name="eye" size={13} /> Preview
                            </button>
                          )}
                          <button className="btn btn-quiet btn-sm" onClick={(e) => { e.stopPropagation(); onDownload(d.title); }}>
                            <Icon name="download" size={13} /> Download
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : (
              <div style={{ padding: 16, display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 12 }}>
                {visible.map(d => (
                  <div key={d.id} className="card" style={{ padding: 16, cursor: "pointer", background: "var(--paper)" }} onClick={() => d.type === "PDF" && onPreview(d.id)}>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
                      <FileTag type={d.type} />
                      {d.new && <span className="badge badge-new">New</span>}
                    </div>
                    <div className="doc-name" style={{ fontSize: 14, lineHeight: 1.35, marginBottom: 8 }}>{d.title}</div>
                    <div className="doc-meta">{d.date} · {d.size}</div>
                  </div>
                ))}
              </div>
            )}
            {visible.length === 0 && (
              <div style={{ padding: 60, textAlign: "center", color: "var(--ink-3)" }}>
                <Icon name="file" size={28} stroke={1} />
                <div style={{ marginTop: 12, fontSize: 14 }}>No documents match these filters.</div>
              </div>
            )}
          </div>
        </div>
        <PortalFooter />
      </div>
    </div>
  );
};

// ─── PDF Preview overlay ───────────────────────────────────────────────────

const PdfPreview = ({ docId, onClose, onDownload }) => {
  const data = window.PORTAL_DATA;
  const doc = data.documents.find(d => d.id === docId);
  const period = data.periods.find(p => p.id === doc?.period);
  const [page, setPage] = React.useState(1);

  React.useEffect(() => {
    const k = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, []);

  if (!doc) return null;

  const totalPages = doc.size.includes("MB") ? 24 : 8;

  return (
    <div className="preview-overlay" data-screen-label="PDF Preview" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="preview-stage">
        <div className="preview-stage-head">
          <div className="left">
            <button className="iconbtn" onClick={onClose} title="Close (Esc)">
              <Icon name="x" size={18} />
            </button>
            <FileTag type={doc.type} />
            <div>
              <div className="doc-name">{doc.title}</div>
              <div style={{ fontSize: 11, color: "rgba(255,255,255,.55)" }}>{period?.label} · {doc.date}</div>
            </div>
          </div>
          <div className="right">
            <span style={{ fontSize: 12, color: "rgba(255,255,255,.6)", marginRight: 8 }} className="tnum">
              Page {page} of {totalPages}
            </span>
            <button className="iconbtn" disabled={page === 1} onClick={() => setPage(Math.max(1, page - 1))}><Icon name="arrowLeft" size={16} /></button>
            <button className="iconbtn" disabled={page === totalPages} onClick={() => setPage(Math.min(totalPages, page + 1))}><Icon name="arrowRight" size={16} /></button>
            <button className="btn btn-ghost btn-sm"><Icon name="print" size={13} /> Print</button>
            <button className="btn btn-primary btn-sm" onClick={() => onDownload(doc.title)}>
              <Icon name="download" size={13} /> Download
            </button>
          </div>
        </div>
        <div className="preview-pages">
          <PdfPage doc={doc} period={period} page={page} totalPages={totalPages} />
          {page < totalPages && <PdfPage doc={doc} period={period} page={page + 1} totalPages={totalPages} continuation />}
        </div>
      </div>

      <aside className="preview-side">
        <div style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 16 }}>Document details</div>
        <div className="serif" style={{ fontSize: 22, lineHeight: 1.2, marginBottom: 24, letterSpacing: "-0.01em" }}>{doc.title}</div>

        <DetailRow label="Reporting period" value={period?.label} />
        <DetailRow label="Issued" value={doc.date} />
        <DetailRow label="Category" value={<span className="cat-pill">{doc.category}</span>} />
        <DetailRow label="File" value={`${doc.type} · ${doc.size}`} />
        <DetailRow label="Visibility" value={
          <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
            {doc.groups.map(gid => {
              const g = data.groups.find(x => x.id === gid);
              return <span key={gid} className="cat-pill" style={{ fontSize: 10.5 }}>{g?.name}</span>;
            })}
          </div>
        } />

        <div style={{ marginTop: 32, paddingTop: 20, borderTop: "1px solid var(--rule)" }}>
          <div style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 12 }}>Related</div>
          {data.documents.filter(d => d.period === doc.period && d.id !== doc.id).slice(0, 4).map(d => (
            <div key={d.id} style={{ display: "flex", gap: 10, alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--rule)", fontSize: 13 }}>
              <FileTag type={d.type} />
              <div className="doc-name" style={{ fontSize: 13, flex: 1 }}>{d.title}</div>
            </div>
          ))}
        </div>
      </aside>
    </div>
  );
};

const DetailRow = ({ label, value }) => (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", padding: "10px 0", borderBottom: "1px solid var(--rule)", gap: 16 }}>
    <span style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: ".06em", textTransform: "uppercase" }}>{label}</span>
    <span style={{ fontSize: 13, color: "var(--ink)", textAlign: "right", maxWidth: "60%" }}>{value}</span>
  </div>
);

// Stylized fake PDF page rendered in HTML
const PdfPage = ({ doc, period, page, totalPages, continuation }) => {
  const data = window.PORTAL_DATA;
  return (
    <div className="pdf-page" style={{ padding: "60px 64px", color: "#1a1814", fontFamily: "var(--font-serif)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", paddingBottom: 16, borderBottom: "1px solid #1a1814" }}>
        <div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 9, letterSpacing: ".18em", textTransform: "uppercase", color: "#6b6452" }}>CodeDrips Financial Services</div>
          <div style={{ fontStyle: "italic", fontSize: 24, marginTop: 4, letterSpacing: "-0.01em" }}>{doc.title}</div>
        </div>
        <div style={{ textAlign: "right", fontFamily: "var(--font-sans)", fontSize: 9, color: "#6b6452", letterSpacing: ".08em" }}>
          {period?.label}<br/>{doc.date}
        </div>
      </div>

      {!continuation && page === 1 ? (
        <>
          <div style={{ marginTop: 40, fontFamily: "var(--font-sans)", fontSize: 9, letterSpacing: ".18em", textTransform: "uppercase", color: "#6b6452" }}>To Limited Partners</div>
          <p style={{ fontSize: 13, lineHeight: 1.7, marginTop: 12, color: "#3a352c" }}>
            Dear Partner,
          </p>
          <p style={{ fontSize: 13, lineHeight: 1.7, color: "#3a352c" }}>
            The first quarter of 2026 closed with the {data.firm.fundLong} returning <strong>+4.8%</strong> net of fees, ahead of the blended benchmark by approximately 180 basis points. Markets continued to digest the rate-path repricing that defined the back half of 2025, with leadership rotating away from the megacap complex toward the cyclical and defensive names where we have built measured exposure over the last eighteen months.
          </p>
          <p style={{ fontSize: 13, lineHeight: 1.7, color: "#3a352c" }}>
            We added two new positions during the quarter and exited one. The portfolio now holds 32 long positions, with the top ten representing 41% of capital. Cash and short-duration treasuries closed the period at 7.2%, broadly consistent with our target range.
          </p>

          <div style={{ marginTop: 32, fontFamily: "var(--font-sans)" }}>
            <div style={{ fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "#6b6452" }}>Performance summary</div>
            <table style={{ width: "100%", borderCollapse: "collapse", marginTop: 12, fontSize: 11, fontVariantNumeric: "tabular-nums" }}>
              <thead>
                <tr style={{ borderBottom: "1px solid #1a1814" }}>
                  <th style={{ textAlign: "left", padding: "6px 0", fontWeight: 500, fontSize: 10, letterSpacing: ".06em", textTransform: "uppercase" }}></th>
                  <th style={{ textAlign: "right", padding: "6px 0", fontWeight: 500, fontSize: 10 }}>Q1 26</th>
                  <th style={{ textAlign: "right", padding: "6px 0", fontWeight: 500, fontSize: 10 }}>YTD</th>
                  <th style={{ textAlign: "right", padding: "6px 0", fontWeight: 500, fontSize: 10 }}>1 YR</th>
                  <th style={{ textAlign: "right", padding: "6px 0", fontWeight: 500, fontSize: 10 }}>3 YR</th>
                  <th style={{ textAlign: "right", padding: "6px 0", fontWeight: 500, fontSize: 10 }}>ITD</th>
                </tr>
              </thead>
              <tbody>
                <tr style={{ borderBottom: "1px solid #e2d9c7" }}>
                  <td style={{ padding: "8px 0" }}>Fund (net)</td>
                  <td style={{ textAlign: "right" }}>+4.8%</td>
                  <td style={{ textAlign: "right" }}>+4.8%</td>
                  <td style={{ textAlign: "right" }}>+18.2%</td>
                  <td style={{ textAlign: "right" }}>+11.4%</td>
                  <td style={{ textAlign: "right" }}>+9.6%</td>
                </tr>
                <tr style={{ borderBottom: "1px solid #e2d9c7", color: "#6b6452" }}>
                  <td style={{ padding: "8px 0" }}>Benchmark</td>
                  <td style={{ textAlign: "right" }}>+3.0%</td>
                  <td style={{ textAlign: "right" }}>+3.0%</td>
                  <td style={{ textAlign: "right" }}>+14.6%</td>
                  <td style={{ textAlign: "right" }}>+9.1%</td>
                  <td style={{ textAlign: "right" }}>+7.4%</td>
                </tr>
              </tbody>
            </table>
          </div>

          <p style={{ fontSize: 13, lineHeight: 1.7, marginTop: 28, color: "#3a352c" }}>
            We continue to see a market that rewards patience and a willingness to underwrite the unfashionable. The remainder of this letter outlines our principal contributors and detractors, several adjustments to position sizing, and a note on the regulatory environment.
          </p>
        </>
      ) : (
        <>
          <div style={{ marginTop: 32, fontStyle: "italic", fontSize: 18 }}>Principal contributors</div>
          <p style={{ fontSize: 13, lineHeight: 1.7, marginTop: 8, color: "#3a352c" }}>
            The largest contributors over the period were our positions in the European industrial and global healthcare sleeves. Both benefited from idiosyncratic re-rating events independent of the broader market move.
          </p>
          {[1,2,3].map(i => (
            <div key={i} style={{ display: "flex", justifyContent: "space-between", borderBottom: "1px solid #e2d9c7", padding: "10px 0", fontFamily: "var(--font-sans)", fontSize: 11 }}>
              <span style={{ color: "#1a1814" }}>Position {i} — Industrial sleeve</span>
              <span style={{ fontVariantNumeric: "tabular-nums", color: "#4a6b3a" }}>+{(2.4 - i * 0.4).toFixed(1)}%</span>
            </div>
          ))}
          <div style={{ marginTop: 24, fontStyle: "italic", fontSize: 18 }}>Principal detractors</div>
          {[1,2].map(i => (
            <div key={i} style={{ display: "flex", justifyContent: "space-between", borderBottom: "1px solid #e2d9c7", padding: "10px 0", fontFamily: "var(--font-sans)", fontSize: 11 }}>
              <span style={{ color: "#1a1814" }}>Detractor {i}</span>
              <span style={{ fontVariantNumeric: "tabular-nums", color: "#8b3a2b" }}>−{(0.8 - i * 0.2).toFixed(1)}%</span>
            </div>
          ))}
        </>
      )}

      <div style={{ position: "absolute", bottom: 32, left: 64, right: 64, display: "flex", justifyContent: "space-between", fontFamily: "var(--font-sans)", fontSize: 9, color: "#9a9281", letterSpacing: ".06em", paddingTop: 12, borderTop: "1px solid #e2d9c7" }}>
        <span>Confidential — for the named recipient only</span>
        <span>{page} / {totalPages}</span>
      </div>
    </div>
  );
};

Object.assign(window, { ClientLanding, PeriodDetail, PdfPreview, PortalTopbar, PortalFooter });