// cust-drawers.jsx — 5 Customer Insights drawers + host

const { useState: cdUseState, useEffect: cdUseEffect } = React;

/* === Shared shell === */
function CustDrawerShell({ open, onClose, children, lang }) {
  cdUseEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  if (!open) return null;
  const t = window.CUST_DRW_T[lang];
  return (
    <div className="custdrw-root">
      <div className="custdrw-overlay" onClick={onClose} />
      <aside className="custdrw-panel" role="dialog">
        <button className="custdrw-close" onClick={onClose} aria-label={t.close}>×</button>
        {children}
      </aside>
    </div>
  );
}

function CustDrwHead({ path, title, sub }) {
  return (
    <div className="custdrw-head">
      <div className="custdrw-path">{path}</div>
      <div className="custdrw-title">{title}</div>
      {sub && <div className="custdrw-sub">{sub}</div>}
    </div>
  );
}

function CustDrwQuickStats({ items }) {
  return (
    <div className="custdrw-quick">
      {items.map((it, i) => (
        <div key={i} className="custdrw-quick-item">
          <div className="custdrw-quick-val">{it.val}</div>
          <div className="custdrw-quick-lbl">{it.lbl}</div>
        </div>
      ))}
    </div>
  );
}

function CustDrwSection({ title, children, accent }) {
  return (
    <section className={`custdrw-section ${accent ? 'accent' : ''}`}>
      <h3 className="custdrw-section-title">{title}</h3>
      <div className="custdrw-section-body">{children}</div>
    </section>
  );
}

function CustDrwFooter({ actions }) {
  return (
    <div className="custdrw-footer">
      {actions.map((a, i) => (
        <button key={i} className={`custdrw-btn ${a.primary ? 'primary' : ''} ${a.subtle ? 'subtle' : ''}`} onClick={a.onClick}>{a.label}</button>
      ))}
    </div>
  );
}

/* === Drawer 1 — Guest profile === */
function GuestProfileDrawer({ open, onClose, name, lang, privacyMode }) {
  if (!open || !name) return null;
  const t = window.CUST_DRW_T[lang];
  const tg = t.guest;
  const profile = window.CUST_GUEST_PROFILES[name] || window.CUST_GUEST_PROFILES['Иванов Александр'];
  const segLbl = window.CUST_T[lang].seg[profile.segment];
  const segColor = window.SEG_COLORS[profile.segment];
  const dispName = privacyMode ? window.maskName(name) : name;
  const maskEmail = (e) => {
    if (!e || e === '—') return e;
    const [u, d] = e.split('@'); return u[0] + '•••@' + d;
  };
  const maskPhone = (p) => p && p !== '—' ? p.replace(/\d(?=\d{4})/g, '•') : p;

  return (
    <CustDrawerShell open={open} onClose={onClose} lang={lang}>
      <CustDrwHead
        path={`${t.breadcrumbs.customers} › ${t.breadcrumbs.guests} › ${dispName}`}
        title={dispName}
        sub={
          <span>
            <span className="cust-seg-badge" style={{ background: segColor }}>{segLbl}</span>
            {' · '}{profile.visits} visits · €{window.fmtCust(profile.ltv)} LTV
          </span>
        }
      />
      <CustDrwQuickStats items={[
        { val: profile.visits, lbl: 'lifetime visits' },
        { val: '€' + window.fmtCust(profile.ltv), lbl: `€${Math.round(profile.ltv / profile.visits)} avg` },
        { val: profile.lastVisitAgo + 'd', lbl: 'since last visit' },
      ]} />

      <div className="custdrw-body">
        <CustDrwSection title={tg.sections.contact}>
          <div className="custdrw-contact">
            <window.CustAvatar name={name} size={52} />
            <div className="custdrw-contact-grid">
              <div><span className="custdrw-lbl">{tg.contactLabels.email}</span><span>{privacyMode ? maskEmail(profile.contact.email) : profile.contact.email}</span></div>
              <div><span className="custdrw-lbl">{tg.contactLabels.phone}</span><span>{privacyMode ? maskPhone(profile.contact.phone) : profile.contact.phone}</span></div>
              <div><span className="custdrw-lbl">{tg.contactLabels.country}</span><span>{profile.contact.country}</span></div>
              <div><span className="custdrw-lbl">{tg.contactLabels.city}</span><span>{profile.contact.city}</span></div>
              <div><span className="custdrw-lbl">{tg.contactLabels.dob}</span><span>{profile.contact.dob}</span></div>
              <div><span className="custdrw-lbl">{tg.contactLabels.firstStay}</span><span>{profile.contact.firstStay}</span></div>
              <div><span className="custdrw-lbl">{tg.contactLabels.lang}</span><span>{profile.contact.lang}</span></div>
            </div>
          </div>
        </CustDrwSection>

        <CustDrwSection title={tg.sections.status}>
          <div className="custdrw-status-grid">
            <div>
              <div className="custdrw-lbl">{tg.statusLabels.current}</div>
              <span className="cust-seg-badge" style={{ background: segColor }}>{segLbl}</span>
            </div>
            <div>
              <div className="custdrw-lbl">{tg.statusLabels.trajectory}</div>
              <div className="custdrw-traj">
                {profile.trajectory.map((s, i) => (
                  <React.Fragment key={i}>
                    <span className="custdrw-traj-step" style={{ borderColor: window.SEG_COLORS[s], color: window.SEG_COLORS[s] }}>{window.CUST_T[lang].seg[s]}</span>
                    {i < profile.trajectory.length - 1 && <span className="custdrw-traj-arr">→</span>}
                  </React.Fragment>
                ))}
              </div>
            </div>
            <div><div className="custdrw-lbl">{tg.statusLabels.daysSince}</div><div className="custdrw-val">{profile.lastVisitAgo}d</div></div>
            <div><div className="custdrw-lbl">{tg.statusLabels.predictNext}</div><div className="custdrw-val">{profile.predictNext}</div></div>
            <div><div className="custdrw-lbl">{tg.statusLabels.risk}</div><span className={`cust-status ${profile.risk === 'High' ? 'high-value' : profile.risk === 'Medium' ? 'mid-value' : 'low-value'}`}>{tg.risk[profile.risk]}</span></div>
          </div>
        </CustDrwSection>

        <CustDrwSection title={tg.sections.history}>
          <div className="custdrw-timeline">
            {profile.history.map((v, i) => (
              <div key={i} className="custdrw-visit">
                <div className="custdrw-visit-dot" />
                <div className="custdrw-visit-card">
                  <div className="custdrw-visit-head">
                    <strong>{tg.visit} #{v.n}</strong>
                    <span className="custdrw-visit-dates">{v.dates}</span>
                  </div>
                  <div className="custdrw-visit-meta">
                    {v.cabin} · {v.nights} нт · €{v.rev} · {v.channel}
                  </div>
                  <div className="custdrw-visit-services">
                    SPA: {v.spa} · F&B: {v.fnb}
                  </div>
                  {v.note && <div className="custdrw-visit-note">{tg.reception}: <em>"{v.note}"</em></div>}
                </div>
              </div>
            ))}
          </div>
        </CustDrwSection>

        <CustDrwSection title={tg.sections.patterns}>
          <div className="custdrw-pattern-grid">
            {Object.entries(profile.patterns).map(([k, v]) => (
              <div key={k} className="custdrw-pattern">
                <div className="custdrw-lbl">{tg.patternsLabels[k]}</div>
                <div className="custdrw-val">{v}</div>
              </div>
            ))}
          </div>
        </CustDrwSection>

        <CustDrwSection title={tg.sections.notes}>
          {profile.tags && profile.tags.length > 0 ? (
            <>
              <div className="custdrw-lbl">{tg.tagsLbl}</div>
              <div className="custdrw-tags">
                {profile.tags.map(tag => <span key={tag} className="custdrw-tag">{tag}</span>)}
              </div>
              <div className="custdrw-lbl" style={{ marginTop: 12 }}>{tg.notesLbl}</div>
              <div className="custdrw-notes">{profile.notes}</div>
              <div className="custdrw-lasttouch">{tg.lastTouch}: {profile.lastTouch}</div>
            </>
          ) : (
            <div className="cust-empty">{tg.noNotes}</div>
          )}
        </CustDrwSection>

        <CustDrwSection title={tg.sections.crossTab}>
          <div className="custdrw-crosslinks">
            <a className="custdrw-crosslink">→ {tg.crossTabItems.bookings} ({profile.bookingsCount || profile.visits})</a>
            <a className="custdrw-crosslink">→ {tg.crossTabItems.acq}</a>
            <a className="custdrw-crosslink">→ {tg.crossTabItems.reviews} ({profile.reviewsCount || 0})</a>
          </div>
        </CustDrwSection>
      </div>

      <CustDrwFooter actions={[
        { label: '✉ ' + tg.footer.email, primary: true },
        { label: '💬 ' + tg.footer.whatsapp },
        { label: '+ ' + tg.footer.addNote, subtle: true },
        { label: tg.footer.cloudbeds, subtle: true },
      ]} />
    </CustDrawerShell>
  );
}

/* === Drawer 2 — Segment detail === */
function SegmentDrawer({ open, onClose, seg, lang, onOpenGuest, privacyMode }) {
  if (!open || !seg) return null;
  const t = window.CUST_DRW_T[lang];
  const ts = t.segment;
  const segData = window.CUST.segments.find(s => s.id === seg);
  if (!segData) return null;
  const segLbl = window.CUST_T[lang].seg[seg];
  const segColor = window.SEG_COLORS[seg];
  const def = window.CUST_SEG_DEFS[seg] || '';
  const profile = window.CUST_SEG_PROFILE[seg] || window.CUST_SEG_PROFILE.champions;
  const demo = window.CUST_SEG_DEMO[seg] || window.CUST_SEG_DEMO.champions;
  const reco = window.CUST_SEG_RECO[seg] || window.CUST_SEG_RECO.champions;
  // Filter top guests as members of segment (simulated)
  const members = window.CUST.topGuests.slice(0, 8);

  return (
    <CustDrawerShell open={open} onClose={onClose} lang={lang}>
      <CustDrwHead
        path={`${t.breadcrumbs.customers} › ${t.breadcrumbs.segments} › ${segLbl}`}
        title={<span><span className="cust-seg-badge" style={{ background: segColor, marginRight: 8 }}>●</span>{segLbl}</span>}
        sub={`${segData.guests} guests · ${segData.revPct}% of revenue`}
      />
      <CustDrwQuickStats items={[
        { val: segData.guests, lbl: `${segData.basePct}% of base` },
        { val: '€' + window.fmtCust(segData.rev), lbl: 'lifetime revenue' },
        { val: '€' + window.fmtCust(segData.ltv), lbl: 'avg LTV' },
      ]} />

      <div className="custdrw-body">
        <CustDrwSection title={ts.definition} accent>
          <p className="custdrw-defn">{def}</p>
        </CustDrwSection>

        <CustDrwSection title={ts.profile}>
          <table className="cust-table">
            <thead><tr><th>{ts.profileCols.metric}</th><th className="num">{ts.profileCols.seg}</th><th className="num">{ts.profileCols.base}</th><th className="num">{ts.profileCols.d}</th></tr></thead>
            <tbody>
              {profile.map(p => {
                const fmt = (v) => p.fmt === 'eur' ? `€${v}` : p.fmt === 'pct' ? `${v}%` : v.toFixed(p.fmt === 'dec1' ? 1 : 0);
                const d = p.seg - p.base;
                const positive = p.invert ? d < 0 : d > 0;
                return (
                  <tr key={p.metric}>
                    <td>{p.metric}</td>
                    <td className="num"><strong>{fmt(p.seg)}</strong></td>
                    <td className="num muted">{fmt(p.base)}</td>
                    <td className={`num ${positive ? 'pos' : 'neg'}`}><strong>{d > 0 ? '+' : ''}{p.fmt === 'eur' ? `€${d}` : p.fmt === 'pct' ? `${d}pp` : d.toFixed(1)}</strong></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </CustDrwSection>

        <CustDrwSection title={ts.guests}>
          <table className="cust-table">
            <thead><tr><th>Guest</th><th className="num">Visits</th><th className="num">LTV</th><th>Last visit</th></tr></thead>
            <tbody>
              {members.map(g => (
                <tr key={g.name} className="clickable" onClick={() => onOpenGuest && onOpenGuest(g.name)}>
                  <td><span className="cust-guest-cell"><window.CustAvatar name={g.name} size={26} /><window.CustGuestName name={g.name} privacyMode={privacyMode} /></span></td>
                  <td className="num">{g.visits}</td>
                  <td className="num"><strong>€{window.fmtCust(g.spent)}</strong></td>
                  <td className="muted">{g.last}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </CustDrwSection>

        <CustDrwSection title={ts.demo}>
          <div className="custdrw-demo">
            {demo.map(d => (
              <div key={d.lbl} className="custdrw-demo-row">
                <div className="custdrw-demo-lbl">{d.lbl}</div>
                <div className="custdrw-demo-val"><strong>{d.seg}%</strong> <span className="muted">vs {d.base}% base</span></div>
                <div className="custdrw-demo-bar"><div className="custdrw-demo-fill" style={{ width: `${d.seg}%`, background: segColor }} /></div>
              </div>
            ))}
          </div>
        </CustDrwSection>

        <CustDrwSection title={ts.reco}>
          <div className="custdrw-reco">
            <div className="custdrw-reco-icon">💡</div>
            <ul>{reco.map((r, i) => <li key={i}>{r}</li>)}</ul>
          </div>
        </CustDrwSection>
      </div>

      <CustDrwFooter actions={[
        { label: '↓ ' + ts.footer.export, primary: true },
        { label: '✉ ' + ts.footer.campaign },
        { label: ts.footer.filter, subtle: true },
      ]} />
    </CustDrawerShell>
  );
}

/* === Drawer 3 — Cohort detail === */
function CohortDrawer({ open, onClose, cohort, lang }) {
  if (!open || !cohort) return null;
  const t = window.CUST_DRW_T[lang];
  const tc = t.cohort;
  const data = window.CUST_COHORT_DETAILS[cohort] || window.CUST_COHORT_DETAILS['Mar 2025'];
  const cols = window.CUST.cohortCols;

  return (
    <CustDrawerShell open={open} onClose={onClose} lang={lang}>
      <CustDrwHead
        path={`${t.breadcrumbs.customers} › ${t.breadcrumbs.cohorts} › ${cohort}`}
        title={`${cohort} cohort`}
        sub={`First stays: ${data.size} guests · 13 months tracked`}
      />
      <CustDrwQuickStats items={[
        { val: data.size, lbl: 'guests in cohort' },
        { val: data.retention12 + '%', lbl: 'returned within 12mo' },
        { val: '€' + data.avgLtv12, lbl: 'avg LTV @12mo' },
      ]} />

      <div className="custdrw-body">
        <CustDrwSection title={tc.curve}>
          <CohortLineChart cols={cols} primary={data.retentionLine} avg={data.avgGray} best={data.bestLine} worst={data.worstLine} primaryColor="#10B981" yMax={100} unit="%" />
          <div className="cust-insight">💡 Above-average cohort, near top performers.</div>
        </CustDrwSection>

        <CustDrwSection title={tc.ltv}>
          <CohortLineChart cols={cols} primary={data.ltvLine} avg={data.ltvAvgGray} primaryColor="#6366F1" yMax={700} unit="€" />
        </CustDrwSection>

        <CustDrwSection title={tc.composition}>
          <div className="custdrw-comp-grid">
            <div>
              <div className="custdrw-lbl">Channels</div>
              {data.composition.channels.map(c => (
                <div key={c.k} className="custdrw-comp-row"><span>{c.k}</span><span><strong>{c.n}</strong></span></div>
              ))}
            </div>
            <div>
              <div className="custdrw-lbl">Countries</div>
              {data.composition.countries.map(c => (
                <div key={c.k} className="custdrw-comp-row"><span>{c.k}</span><span><strong>{c.pct}%</strong></span></div>
              ))}
            </div>
            <div>
              <div className="custdrw-lbl">Guest type</div>
              <div className="custdrw-comp-row"><span>Couples</span><span><strong>{data.composition.guestType.couples}%</strong></span></div>
              <div className="custdrw-comp-row"><span>Families</span><span><strong>{data.composition.guestType.families}%</strong></span></div>
              <div className="custdrw-comp-row"><span>Other</span><span><strong>{data.composition.guestType.other}%</strong></span></div>
            </div>
            <div>
              <div className="custdrw-lbl">Avg first booking</div>
              <div className="custdrw-val" style={{ fontSize: 22, marginTop: 4 }}>€{data.composition.firstBookingAvg}</div>
            </div>
          </div>
        </CustDrwSection>

        <CustDrwSection title={tc.top}>
          <div className="custdrw-toplist">
            {data.topPerformers.map(g => (
              <div key={g.name} className="cust-list-item clickable">
                <window.CustAvatar name={g.name} size={28} />
                <div className="cust-list-main">
                  <window.CustGuestName name={g.name} privacyMode={false} />
                  <div className="cust-list-sub">{g.visits} visits · €{window.fmtCust(g.ltv)}</div>
                </div>
              </div>
            ))}
          </div>
        </CustDrwSection>

        <CustDrwSection title={tc.dropoff}>
          <div className="custdrw-dropoff">
            <div className="custdrw-dropoff-stat">
              <div className="custdrw-lbl">Lost</div>
              <div className="custdrw-val">{data.dropoff.lostPct}%</div>
            </div>
            <div className="custdrw-dropoff-stat">
              <div className="custdrw-lbl">Avg LTV of lost</div>
              <div className="custdrw-val">€{data.dropoff.lostAvgLtv}</div>
            </div>
            <p className="custdrw-dropoff-reason">{data.dropoff.reason}</p>
          </div>
        </CustDrwSection>
      </div>

      <CustDrwFooter actions={[
        { label: '↓ ' + tc.footer.export, primary: true },
        { label: tc.footer.compare, subtle: true },
      ]} />
    </CustDrawerShell>
  );
}

function CohortLineChart({ cols, primary, avg, best, worst, primaryColor, yMax, unit }) {
  const w = 440, h = 200, padL = 36, padR = 16, padT = 16, padB = 26;
  const xStep = (w - padL - padR) / (cols.length - 1);
  const yScale = (v) => padT + ((yMax - v) / yMax) * (h - padT - padB);
  const path = (line) => {
    const pts = line.map((v, i) => v == null ? null : `${padL + i * xStep},${yScale(v)}`).filter(Boolean);
    return pts.length ? 'M' + pts.join(' L') : '';
  };
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="cust-line-chart" style={{ width: '100%', height: 'auto' }}>
      {[0, 0.25, 0.5, 0.75, 1].map(p => (
        <line key={p} x1={padL} x2={w - padR} y1={padT + p * (h - padT - padB)} y2={padT + p * (h - padT - padB)} className="cust-grid-line" />
      ))}
      {cols.map((c, i) => (
        <text key={c} x={padL + i * xStep} y={h - 8} textAnchor="middle" className="cust-axis-text">{c}</text>
      ))}
      {[0, yMax / 2, yMax].map(v => (
        <text key={v} x={padL - 6} y={yScale(v) + 3} textAnchor="end" className="cust-axis-text">{unit === '€' ? `€${v}` : `${v}${unit}`}</text>
      ))}
      {avg && <path d={path(avg)} stroke="#94A3B8" strokeWidth="1.5" fill="none" strokeDasharray="3 3" />}
      {best && <path d={path(best)} stroke="#10B981" strokeWidth="1.5" fill="none" opacity="0.5" />}
      {worst && <path d={path(worst)} stroke="#F59E0B" strokeWidth="1.5" fill="none" opacity="0.5" />}
      <path d={path(primary)} stroke={primaryColor} strokeWidth="2.5" fill="none" />
      {primary.map((v, i) => v != null && <circle key={i} cx={padL + i * xStep} cy={yScale(v)} r="3" fill={primaryColor} />)}
    </svg>
  );
}

/* === Drawer 4 — Source / Cohort === */
function SourceDrawer({ open, onClose, src, lang, onOpenGuest, privacyMode }) {
  if (!open || !src) return null;
  const t = window.CUST_DRW_T[lang];
  const ts = t.source;
  const data = window.CUST_SOURCE_DETAILS[src] || window.CUST_SOURCE_DETAILS['Word of mouth'];
  const allSources = window.CUST.acqSources;

  return (
    <CustDrawerShell open={open} onClose={onClose} lang={lang}>
      <CustDrwHead
        path={`${t.breadcrumbs.customers} › ${t.breadcrumbs.acq} › ${src}`}
        title={src}
        sub={`Last 30 days · ${data.n} new guests`}
      />
      <CustDrwQuickStats items={[
        { val: data.n, lbl: 'new guests' },
        { val: '€' + data.ltv, lbl: `avg LTV (vs €${data.base.ltv} base)` },
        { val: data.repeat + '%', lbl: `repeat rate (vs ${data.base.repeat}% base)` },
      ]} />

      <div className="custdrw-body">
        <CustDrwSection title={ts.detail}>
          {data.sub ? (
            <div className="custdrw-subcat">
              {data.sub.map(s => (
                <div key={s.k} className="custdrw-subcat-row">
                  <span>{s.k}</span>
                  <span><strong>{s.n}</strong></span>
                </div>
              ))}
            </div>
          ) : (
            <div className="cust-empty">{ts.noSub}</div>
          )}
        </CustDrwSection>

        <CustDrwSection title={ts.perf}>
          <table className="cust-table">
            <thead><tr><th>Source</th><th className="num">New</th><th className="num">Avg LTV</th><th className="num">Repeat</th></tr></thead>
            <tbody>
              {[...allSources].sort((a, b) => b.ltv - a.ltv).map(s => (
                <tr key={s.src} className={s.src === src ? 'hot' : ''}>
                  <td>{s.src === src ? <strong>{s.src}</strong> : s.src}</td>
                  <td className="num">{s.n}</td>
                  <td className="num"><strong>€{s.ltv}</strong></td>
                  <td className="num">{s.repeat}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </CustDrwSection>

        <CustDrwSection title={ts.guests}>
          <table className="cust-table">
            <thead><tr><th>Guest</th>{data.guests[0].referredBy ? <th>Referred by</th> : null}<th className="num">LTV</th></tr></thead>
            <tbody>
              {data.guests.map(g => (
                <tr key={g.name} className="clickable" onClick={() => onOpenGuest && onOpenGuest(g.name)}>
                  <td><span className="cust-guest-cell"><window.CustAvatar name={g.name} size={26} /><window.CustGuestName name={g.name} privacyMode={privacyMode} /></span></td>
                  {g.referredBy ? <td className="muted small">↩ {privacyMode ? window.maskName(g.referredBy) : g.referredBy}</td> : null}
                  <td className="num"><strong>€{g.ltv}</strong></td>
                </tr>
              ))}
            </tbody>
          </table>
        </CustDrwSection>

        <CustDrwSection title={ts.reco}>
          <div className="custdrw-reco">
            <div className="custdrw-reco-icon">💡</div>
            <ul>{data.reco.map((r, i) => <li key={i}>{r}</li>)}</ul>
          </div>
        </CustDrwSection>
      </div>

      <CustDrwFooter actions={[
        { label: ts.footer.ref, primary: true },
        { label: '↓ ' + ts.footer.export, subtle: true },
      ]} />
    </CustDrawerShell>
  );
}

/* === Drawer 5 — At-risk filtered === */
function AtRiskDrawer({ open, onClose, filter, lang, onOpenGuest, privacyMode }) {
  if (!open) return null;
  const t = window.CUST_DRW_T[lang];
  const ta = t.atrisk;
  const data = window.CUST_ATRISK_VIEWS.default;

  return (
    <CustDrawerShell open={open} onClose={onClose} lang={lang}>
      <CustDrwHead
        path={`${t.breadcrumbs.customers} › ${t.breadcrumbs.atrisk} › High-value`}
        title={data.title[lang]}
        sub={data.sub[lang]}
      />
      <CustDrwQuickStats items={[
        { val: data.n, lbl: 'at-risk guests' },
        { val: '€' + window.fmtCust(data.totalRev), lbl: 'cumulative revenue' },
        { val: data.avgMonths + 'mo', lbl: 'avg since last visit' },
      ]} />

      <div className="custdrw-body">
        <CustDrwSection title={ta.action} accent>
          <p className="custdrw-defn">{data.motivation[lang]}</p>
        </CustDrwSection>

        <CustDrwSection title={ta.priority}>
          <table className="cust-table">
            <thead><tr><th className="num">{ta.priorityCols.p}</th><th>{ta.priorityCols.g}</th><th className="num">{ta.priorityCols.ltv}</th><th className="num">{ta.priorityCols.v}</th><th className="num">{ta.priorityCols.m}</th><th>{ta.priorityCols.approach}</th><th></th></tr></thead>
            <tbody>
              {data.list.map((g, i) => (
                <tr key={g.name} className="clickable" onClick={() => onOpenGuest && onOpenGuest(g.name)}>
                  <td className="num muted">{i + 1}</td>
                  <td><span className="cust-guest-cell"><window.CustAvatar name={g.name} size={26} /><window.CustGuestName name={g.name} privacyMode={privacyMode} /></span></td>
                  <td className="num"><strong>€{window.fmtCust(g.ltv)}</strong></td>
                  <td className="num">{g.visits}</td>
                  <td className="num">{g.months}</td>
                  <td className="muted small">{g.approach}</td>
                  <td onClick={(e) => e.stopPropagation()}>
                    <button className="cust-btn-mini">{ta.send}</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </CustDrwSection>

        <CustDrwSection title={ta.templates}>
          <div className="custdrw-templates">
            {data.templates.map(tmp => (
              <div key={tmp.id} className="custdrw-template">
                <div className="custdrw-template-icon">✉</div>
                <div className="custdrw-template-body">
                  <div className="custdrw-template-title">{tmp.title}</div>
                  <div className="custdrw-template-desc">{tmp.desc}</div>
                </div>
                <button className="cust-btn-mini">Preview</button>
              </div>
            ))}
          </div>
        </CustDrwSection>

        <CustDrwSection title={ta.tracking}>
          <div className="cust-empty">{ta.noTracking}</div>
        </CustDrwSection>
      </div>

      <CustDrwFooter actions={[
        { label: '✉ ' + ta.footer.bulk, primary: true },
        { label: '↓ ' + ta.footer.export, subtle: true },
      ]} />
    </CustDrawerShell>
  );
}

/* === Host === */
function CustDrawerHost({ open, onClose, lang, privacyMode, onOpenGuest }) {
  const isOpen = !!open;
  const type = open && open.type;
  return (
    <>
      <GuestProfileDrawer open={isOpen && type === 'guest'} onClose={onClose} name={open && open.name} lang={lang} privacyMode={privacyMode} />
      <SegmentDrawer open={isOpen && type === 'segment'} onClose={onClose} seg={open && open.seg} lang={lang} privacyMode={privacyMode} onOpenGuest={onOpenGuest} />
      <CohortDrawer open={isOpen && type === 'cohort'} onClose={onClose} cohort={open && open.cohort} lang={lang} />
      <SourceDrawer open={isOpen && type === 'source'} onClose={onClose} src={open && open.src} lang={lang} privacyMode={privacyMode} onOpenGuest={onOpenGuest} />
      <AtRiskDrawer open={isOpen && type === 'atrisk'} onClose={onClose} filter={open && open.filter} lang={lang} privacyMode={privacyMode} onOpenGuest={onOpenGuest} />
    </>
  );
}

window.CustDrawerHost = CustDrawerHost;
window.GuestProfileDrawer = GuestProfileDrawer;
window.SegmentDrawer = SegmentDrawer;
window.CohortDrawer = CohortDrawer;
window.SourceDrawer = SourceDrawer;
window.AtRiskDrawer = AtRiskDrawer;