// Client-facing dashboard tabs.
// Depends on window primitives from components.jsx + recharts global.

const { useState: cuState, useMemo: cuMemo } = React;
const RC = window.Recharts;

const BRAND_RED = '#BE2E2B';
const RICH_BLACK = '#1A1919';
const DARK_GREEN = '#315A49';
const DARK_BLUE = '#29254E';
const DARK_GRAY = '#5B5C5B';
const SOFT_RULE = 'rgba(26,25,25,0.12)';

// ── OVERVIEW ──────────────────────────────────────────────
function OverviewTab({ client, onConnect }) {
  const [range, setRange] = cuState('30D');
  const rangeMap = { '7D': -2, '30D': -4, '90D': -12, 'YTD': -12 };
  const cut = rangeMap[range];
  const sliced = (arr) => arr.slice(cut);

  const chart = client.chartData.slice(cut);

  // Live data for RCG only. These hooks always fire but only return values
  // when client.isSelf AND the matching Supermetrics IDs are configured.
  // Until both conditions are met, each falls back to the mock numbers.
  const liveSessions = useGa4Total(client, 'Sessions');
  const liveAdSpend = useLinkedinAdsTotal(client, 'Cost');
  const liveEmailSent = useActiveCampaignTotal(client, 'Emailssent');
  const liveEmailOpens = useActiveCampaignTotal(client, 'Opens');

  const mockSessions = sliced(client.sessions).reduce((a, b) => a + b, 0);
  const mockAdSpend = sliced(client.adSpend).reduce((a, b) => a + b, 0);

  const sessionsValue = liveSessions.value != null ? liveSessions.value : mockSessions;
  const adSpendValue = liveAdSpend.value != null ? liveAdSpend.value : mockAdSpend;
  const emailOpenRateValue = (liveEmailSent.value && liveEmailOpens.value)
    ? liveEmailOpens.value / liveEmailSent.value
    : client.kpis.emailOpen;
  const emailRateIsLive = !!(liveEmailSent.value && liveEmailOpens.value);

  return (
    <div className="tab-content" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      <TabHeader
        title={<>Overview<br /><span style={{ color: 'var(--brand-red)', fontStyle: 'italic', fontSize: '0.7em', textTransform: 'none' }}>{client.name}</span></>}
        desc="The state of the work. Numbers that matter, plain English on what changed, what to do next."
        right={<RangeToggle value={range} onChange={setRange} />}
      />

      {/* KPI row */}
      <div className="kpi-grid">
        <KpiCell
          label={<span>Sessions {client.isSelf && <LivePill live={liveSessions.value != null} loading={liveSessions.loading} error={liveSessions.error} />}</span>}
          value={fmtNum(sessionsValue, { compact: true })}
          delta={client.sessionDelta}
          sparkData={sliced(client.sessions)}
        />
        <KpiCell label="Leads" value={fmtNum(sliced(client.leads).reduce((a, b) => a + b, 0))}
                 delta={client.leadDelta} sparkData={sliced(client.leads)} />
        <KpiCell
          label={<span>Ad Spend {client.isSelf && <LivePill live={liveAdSpend.value != null} loading={liveAdSpend.loading} error={liveAdSpend.error} />}</span>}
          value={fmtMoney(adSpendValue, { compact: true })}
          delta={client.spendDelta}
          sparkData={sliced(client.adSpend)}
        />
        <KpiCell
          label={<span>Email Open Rate {client.isSelf && <LivePill live={emailRateIsLive} loading={liveEmailSent.loading || liveEmailOpens.loading} error={liveEmailSent.error || liveEmailOpens.error} />}</span>}
          value={fmtPct(emailOpenRateValue)}
          delta={-14.7}
          sparkData={[34, 33, 32, 30, 31, 29, 28, 29, 28, 27, 29, 29]}
        />
        <KpiCell label="Pipeline Value" value={fmtMoney(client.kpis.pipelineValue, { compact: true })}
                 delta={4.8} sparkData={[3200, 3400, 3500, 3380, 3700, 3920, 4100, 4180, 4220, 4320, 4380, 4462]} />
      </div>

      {/* Leads vs Ad Spend */}
      <Card
        title="Leads vs. Ad Spend"
        sub="Last 12 weeks. Dual-axis: leads (left), spend (right)."
        actions={<Pill size="sm" variant="outline">Export</Pill>}
        pad="lg"
      >
        <div style={{ width: '100%', height: 280 }}>
          <RC.ResponsiveContainer>
            <RC.ComposedChart data={chart} margin={{ top: 6, right: 12, left: 0, bottom: 0 }}>
              <RC.CartesianGrid stroke={SOFT_RULE} vertical={false} />
              <RC.XAxis dataKey="week" stroke={SOFT_RULE} tickLine={false} axisLine={false} />
              <RC.YAxis yAxisId="leads" stroke={SOFT_RULE} tickLine={false} axisLine={false}
                tickFormatter={(v) => fmtNum(v)} />
              <RC.YAxis yAxisId="spend" orientation="right" stroke={SOFT_RULE} tickLine={false} axisLine={false}
                tickFormatter={(v) => '$' + (v / 1000).toFixed(0) + 'K'} />
              <RC.Tooltip
                formatter={(v, n) => n === 'spend' ? [fmtMoney(v), 'Ad Spend'] : [fmtNum(v), 'Leads']}
                cursor={{ fill: 'rgba(26,25,25,0.04)' }}
              />
              <RC.Legend
                verticalAlign="top"
                align="left"
                iconType="circle"
                iconSize={6}
                wrapperStyle={{ paddingBottom: 12, fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase' }}
              />
              <RC.Bar yAxisId="spend" dataKey="spend" name="Ad Spend" fill={RICH_BLACK} opacity={0.12} radius={[0, 0, 0, 0]} barSize={20} />
              <RC.Line yAxisId="leads" dataKey="leads" name="Leads" stroke={BRAND_RED} strokeWidth={1.8} dot={{ r: 2.5, fill: BRAND_RED }} />
            </RC.ComposedChart>
          </RC.ResponsiveContainer>
        </div>
      </Card>

      {/* This Month at a Glance */}
      <Card
        title="This month at a glance"
        sub="Editorial summary. Three lines, no fluff."
        actions={<Pill size="sm" variant="outline" onClick={() => onConnect && onConnect()}>Add note</Pill>}
        pad="lg"
      >
        <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
          {client.monthAtAGlance.map((line, i) => (
            <li key={i} style={{
              padding: '14px 0 14px 22px',
              borderBottom: i < client.monthAtAGlance.length - 1 ? '1px solid var(--border)' : 'none',
              position: 'relative',
              fontSize: 14.5,
              color: 'var(--rich-black)',
              lineHeight: 1.55,
            }}>
              <span style={{
                position: 'absolute', left: 0, top: 24, width: 10, height: 1, background: BRAND_RED,
              }} />
              {line}
            </li>
          ))}
        </ul>
      </Card>
    </div>
  );
}
window.OverviewTab = OverviewTab;

// ── PAID MEDIA ────────────────────────────────────────────
function PaidTab({ client }) {
  const totalSpend = client.totalSpend;
  const totalConv = client.totalConv;
  const cpc = 2.84;
  const ctr = 0.034;

  // Live ad spend via Supermetrics LinkedIn Ads (RCG only — clients stay on
  // mock until their own connectors are configured).
  const liveSpend = useLinkedinAdsTotal(client, 'Cost');
  const liveConv = useLinkedinAdsTotal(client, 'Conversions');
  const liveClicks = useLinkedinAdsTotal(client, 'Clicks');
  const liveImpressions = useLinkedinAdsTotal(client, 'Impressions');

  const totalSpendValue = liveSpend.value != null ? liveSpend.value : totalSpend;
  const totalConvValue = liveConv.value != null ? liveConv.value : totalConv;
  const liveCpc = (liveSpend.value && liveClicks.value) ? liveSpend.value / liveClicks.value : null;
  const liveCtr = (liveClicks.value && liveImpressions.value) ? liveClicks.value / liveImpressions.value : null;
  const cpcValue = liveCpc != null ? liveCpc : cpc;
  const ctrValue = liveCtr != null ? liveCtr : ctr;

  return (
    <div className="tab-content" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      <TabHeader title="Paid Media" desc="Spend across Google, Meta, LinkedIn. Top campaigns and conversion economics." />

      <div className="kpi-grid cols-4">
        <KpiCell
          label={<span>Total Spend {client.isSelf && <LivePill live={liveSpend.value != null} loading={liveSpend.loading} error={liveSpend.error} />}</span>}
          value={fmtMoney(totalSpendValue, { compact: true })}
          delta={client.spendDelta}
        />
        <KpiCell
          label={<span>Avg. CPC {client.isSelf && <LivePill live={liveCpc != null} loading={liveSpend.loading || liveClicks.loading} error={liveSpend.error || liveClicks.error} />}</span>}
          value={'$' + cpcValue.toFixed(2)}
          delta={-3.4}
        />
        <KpiCell
          label={<span>CTR {client.isSelf && <LivePill live={liveCtr != null} loading={liveClicks.loading || liveImpressions.loading} error={liveClicks.error || liveImpressions.error} />}</span>}
          value={fmtPct(ctrValue)}
          delta={5.1}
        />
        <KpiCell
          label={<span>Conversions {client.isSelf && <LivePill live={liveConv.value != null} loading={liveConv.loading} error={liveConv.error} />}</span>}
          value={fmtNum(totalConvValue)}
          delta={12.4}
        />
      </div>

      <Card title="Spend by channel" sub="12-week stacked weekly view" pad="lg">
        <div style={{ width: '100%', height: 300 }}>
          <RC.ResponsiveContainer>
            <RC.BarChart data={client.channelData} margin={{ top: 6, right: 12, left: 0, bottom: 0 }}>
              <RC.CartesianGrid stroke={SOFT_RULE} vertical={false} />
              <RC.XAxis dataKey="week" stroke={SOFT_RULE} tickLine={false} axisLine={false} />
              <RC.YAxis stroke={SOFT_RULE} tickLine={false} axisLine={false}
                tickFormatter={(v) => '$' + (v / 1000).toFixed(0) + 'K'} />
              <RC.Tooltip formatter={(v) => fmtMoney(v)} cursor={{ fill: 'rgba(26,25,25,0.04)' }} />
              <RC.Legend verticalAlign="top" align="left" iconType="square" iconSize={8}
                wrapperStyle={{ paddingBottom: 12, fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase' }} />
              <RC.Bar dataKey="google" name="Google Ads" stackId="a" fill={RICH_BLACK} />
              <RC.Bar dataKey="meta" name="Meta Ads" stackId="a" fill={BRAND_RED} />
              <RC.Bar dataKey="linkedin" name="LinkedIn Ads" stackId="a" fill={DARK_GRAY} />
            </RC.BarChart>
          </RC.ResponsiveContainer>
        </div>
      </Card>

      <Card title="Top campaigns" sub="Ranked by spend, last 30 days" pad="lg">
        <table className="tbl">
          <thead>
            <tr>
              <th>Channel</th>
              <th>Campaign</th>
              <th className="num-head">Spend</th>
              <th className="num-head">Conversions</th>
              <th className="num-head">CPA</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {client.campaigns.map((c, i) => (
              <tr key={i}>
                <td className="muted">{c.channel}</td>
                <td className="strong">{c.name}</td>
                <td className="num">{fmtMoney(c.spend)}</td>
                <td className="num">{c.conv}</td>
                <td className="num">{fmtMoney(c.cpa)}</td>
                <td><StatusChip status={c.status} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}
window.PaidTab = PaidTab;

// ── EMAIL ─────────────────────────────────────────────────
function EmailTab({ client }) {
  const f = client.emailFunnel;
  const max = f.sent;
  const funnel = [
    { stage: 'Sent', val: f.sent, red: false },
    { stage: 'Delivered', val: f.delivered, red: false },
    { stage: 'Opened', val: f.opened, red: false },
    { stage: 'Clicked', val: f.clicked, red: true },
    { stage: 'Converted', val: f.converted, red: true },
  ];

  return (
    <div className="tab-content" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      <TabHeader title="Email" desc="Drip and broadcast performance. Open and click are softening; the funnel says why." />

      <div className="kpi-grid cols-4">
        <KpiCell label="Sent" value={fmtNum(f.sent, { compact: true })} delta={8.4} />
        <KpiCell label="Open Rate" value={fmtPct(f.opened / f.delivered)} delta={-4.2} />
        <KpiCell label="Click Rate" value={fmtPct(f.clicked / f.delivered)} delta={-1.8} />
        <KpiCell label="Unsubscribe" value={fmtPct(0.0042, { digits: 2 })} delta={0.4} />
      </div>

      <div className="row-12">
        <Card title="Conversion funnel" sub="Sent → Converted, last 30 days" pad="lg">
          {funnel.map((row, i) => {
            const pct = (row.val / max) * 100;
            const dropFromPrev = i > 0 ? (1 - row.val / funnel[i - 1].val) * 100 : 0;
            return (
              <div className={`funnel-row ${row.red ? 'red' : ''}`} key={row.stage}>
                <div className="h">
                  <span className="stage">{row.stage}</span>
                  <span className="val tnum">{fmtNum(row.val)}</span>
                  <span className="pct">{i > 0 ? `−${dropFromPrev.toFixed(1)}% step` : '100% of send'}</span>
                </div>
                <div className="bar">
                  <div className="fill" style={{ width: pct + '%' }} />
                </div>
              </div>
            );
          })}
        </Card>

        <Card title="Top sequences" pad="lg">
          <div className="kv-list">
            {client.emailSequences.map((s, i) => (
              <div className="row" key={i} style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '12px 0', borderBottom: i < client.emailSequences.length - 1 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                  <span className="name strong">{s.name}</span>
                  <span style={{ color: s.trend === 'up' ? DARK_GREEN : s.trend === 'down' ? BRAND_RED : 'var(--ink-stone)', fontSize: 11 }}>
                    <Icon name={s.trend === 'up' ? 'ArrowUpRight' : s.trend === 'down' ? 'ArrowDownRight' : 'ArrowRight'} size={12} />
                  </span>
                </div>
                <div style={{ display: 'flex', gap: 18, fontSize: 11.5, color: 'var(--ink-stone)' }}>
                  <span>{fmtNum(s.sent)} sent</span>
                  <span>{fmtPct(s.openRate)} open</span>
                  <span>{fmtPct(s.clickRate)} click</span>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}
window.EmailTab = EmailTab;

// ── WEBSITE / SEO ─────────────────────────────────────────
function WebSeoTab({ client }) {
  return (
    <div className="tab-content" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      <TabHeader title="Website & SEO" desc="Organic traffic, top pages, search position. Plus a quick read on Magnolia CMS health." />

      <div className="kpi-grid cols-4">
        <KpiCell label="Sessions" value={fmtNum(client.totalSessions, { compact: true })} delta={client.sessionDelta} />
        <KpiCell label="Top Page" value="/solutions" />
        <KpiCell label="Avg. Position" value="5.8" delta={-12.4} />
        <KpiCell label="Conversions" value={fmtNum(client.totalConv)} delta={12.4} />
      </div>

      <div className="row-2">
        <Card title="Top pages" pad="lg">
          <table className="tbl">
            <thead>
              <tr>
                <th>Path</th>
                <th className="num-head">Sessions</th>
                <th className="num-head">Bounce</th>
              </tr>
            </thead>
            <tbody>
              {client.topPages.map((p, i) => (
                <tr key={i}>
                  <td className="strong">{p.path}</td>
                  <td className="num">{fmtNum(p.sessions)}</td>
                  <td className="num">{fmtPct(p.bounce)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        <Card title="Top queries" pad="lg">
          <table className="tbl">
            <thead>
              <tr>
                <th>Query</th>
                <th className="num-head">Impr.</th>
                <th className="num-head">Clicks</th>
                <th className="num-head">Pos.</th>
              </tr>
            </thead>
            <tbody>
              {client.topQueries.map((q, i) => (
                <tr key={i}>
                  <td className="strong" style={{ maxWidth: 240, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{q.q}</td>
                  <td className="num">{fmtNum(q.imp)}</td>
                  <td className="num">{fmtNum(q.clicks)}</td>
                  <td className="num">{q.pos.toFixed(1)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      </div>

      <Card title="Magnolia CMS health" sub="Publishing cadence, form capture, and structural integrity." pad="lg">
        <div className="row-3">
          <div style={{ padding: '16px 0' }}>
            <div className="kpi-label">Pages Published</div>
            <div className="kpi-value tnum" style={{ marginTop: 6 }}>{client.cmsHealth.published}</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-stone)', marginTop: 6 }}>This month. Up from 5 last month.</div>
          </div>
          <div style={{ padding: '16px 0', borderLeft: '1px solid var(--soft-rule)', paddingLeft: 24 }}>
            <div className="kpi-label">Form Submissions</div>
            <div className="kpi-value tnum" style={{ marginTop: 6 }}>{client.cmsHealth.formSubs}</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-stone)', marginTop: 6 }}>Across 4 lead capture forms.</div>
          </div>
          <div style={{ padding: '16px 0', borderLeft: '1px solid var(--soft-rule)', paddingLeft: 24 }}>
            <div className="kpi-label">Broken Links</div>
            <div className="kpi-value tnum" style={{ marginTop: 6, color: client.cmsHealth.brokenLinks > 0 ? BRAND_RED : 'inherit' }}>
              {client.cmsHealth.brokenLinks}
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-stone)', marginTop: 6 }}>Detected in last crawl. Worth a fix.</div>
          </div>
        </div>
      </Card>
    </div>
  );
}
window.WebSeoTab = WebSeoTab;

// ── CRM ───────────────────────────────────────────────────
function CrmTab({ client }) {
  const PIE_COLORS = [RICH_BLACK, BRAND_RED, DARK_GREEN, DARK_BLUE, DARK_GRAY, '#B4B5B4'];
  const max = client.pipelineStages[0].count;

  return (
    <div className="tab-content" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      <TabHeader title="CRM Pipeline" desc="From inbound lead to closed-won. Where deals sit, who owns them, where they came from." />

      <div className="row-12">
        <Card title="Pipeline funnel" sub="By stage count, last 90 days" pad="lg">
          {client.pipelineStages.map((s, i) => {
            const pct = (s.count / max) * 100;
            return (
              <div className={`funnel-row ${i === client.pipelineStages.length - 1 ? 'red' : ''}`} key={s.stage}>
                <div className="h">
                  <span className="stage">{s.stage}</span>
                  <span className="val tnum">{fmtNum(s.count)}</span>
                  <span className="pct">{fmtMoney(s.value, { compact: true })}</span>
                </div>
                <div className="bar"><div className="fill" style={{ width: pct + '%' }} /></div>
              </div>
            );
          })}
        </Card>

        <Card title="Lead source mix" sub="Last 30 days" pad="lg">
          <div style={{ width: '100%', height: 200 }}>
            <RC.ResponsiveContainer>
              <RC.PieChart>
                <RC.Pie
                  data={client.leadSources} dataKey="value" nameKey="name"
                  innerRadius={48} outerRadius={78} paddingAngle={1}
                >
                  {client.leadSources.map((_, i) => (
                    <RC.Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} stroke="var(--white)" strokeWidth={2} />
                  ))}
                </RC.Pie>
                <RC.Tooltip formatter={(v) => v + '%'} />
              </RC.PieChart>
            </RC.ResponsiveContainer>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 18px', marginTop: 8, fontSize: 11.5 }}>
            {client.leadSources.map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 8, height: 8, background: PIE_COLORS[i % PIE_COLORS.length], borderRadius: 999 }} />
                <span style={{ flex: 1, color: 'var(--rich-black)' }}>{s.name}</span>
                <span className="txt-muted tnum">{s.value}%</span>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card title="Recent deals" pad="lg">
        <table className="tbl">
          <thead>
            <tr>
              <th>Company</th>
              <th>Stage</th>
              <th className="num-head">Value</th>
              <th>Owner</th>
              <th>Source</th>
            </tr>
          </thead>
          <tbody>
            {client.recentDeals.map((d, i) => (
              <tr key={i}>
                <td className="strong">{d.company}</td>
                <td><span className="chip">{d.stage}</span></td>
                <td className="num">{fmtMoney(d.value)}</td>
                <td>{d.owner}</td>
                <td className="muted">{d.source}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}
window.CrmTab = CrmTab;

// ── MONTHLY REPORT ────────────────────────────────────────
function MonthlyReportTab({ client, pushToast }) {
  const allKpis = [
    { label: 'Sessions', value: fmtNum(client.totalSessions, { compact: true }), prev: '142K', delta: client.sessionDelta },
    { label: 'Leads', value: fmtNum(client.totalLeads), prev: '2,140', delta: client.leadDelta },
    { label: 'Ad spend', value: fmtMoney(client.totalSpend, { compact: true }), prev: '$178K', delta: client.spendDelta },
    { label: 'Cost per lead', value: '$71', prev: '$87', delta: -18.4 },
    { label: 'Email open rate', value: '29%', prev: '34%', delta: -14.7 },
    { label: 'Email click rate', value: '6.1%', prev: '7.9%', delta: -22.8 },
    { label: 'Pipeline value', value: fmtMoney(client.kpis.pipelineValue, { compact: true }), prev: '$4.25M', delta: 4.8 },
    { label: 'Won deals', value: '8', prev: '6', delta: 33.3 },
  ];

  return (
    <div className="tab-content">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18, gap: 16 }}>
        <p className="meta">Read-only client export</p>
        <Pill variant="filled" onClick={() => { console.log('PDF download'); pushToast('Report download started.', 'success'); }}>
          <Icon name="ArrowDownToLine" size={12} style={{ marginRight: 6 }} /> Download PDF
        </Pill>
      </div>

      <article className="report-card">
        <div style={{ paddingBottom: 24, borderBottom: '1px solid var(--soft-rule)', marginBottom: 32 }}>
          <p className="kicker">Monthly performance report</p>
          <h2 style={{
            fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 38, lineHeight: 0.95,
            textTransform: 'uppercase', letterSpacing: '-0.025em', margin: '12px 0 6px',
          }}>
            {client.name} <span style={{ color: BRAND_RED, fontStyle: 'italic', textTransform: 'none' }}>May 2026</span>
          </h2>
          <p style={{ fontSize: 12.5, color: 'var(--ink-stone)', margin: 0 }}>
            Prepared by Rottman Creative · Account lead: {client.accountLead}
          </p>
        </div>

        <section className="report-section">
          <h3>Executive Summary</h3>
          <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--rich-black)', maxWidth: '60ch' }}>
            Paid acquisition continued to scale efficiently in May. Cost per lead dropped from $87 to $71 while
            ad spend grew {Math.round(client.spendDelta)}% month over month, putting the program ahead of plan.
            Email engagement is the one soft spot. Open rate slid five points and the click rate is following.
            The pipeline added $214K and {client.industry === 'Manufacturing' ? 'two' : 'three'} deals are
            now sitting in proposal stage longer than 14 days.
          </p>
        </section>

        <section className="report-section">
          <h3>Wins</h3>
          <ul>
            <li><strong>CPL down 18%</strong>. Tightening creative and pausing the cold Meta audience moved CPL from $87 to $71.</li>
            <li><strong>LinkedIn conversions up 64%</strong>. The whitepaper sequence is now the highest-converting paid asset.</li>
            <li><strong>Organic sessions up 22%</strong>. The buyer-guide post is ranking on page one for three target queries.</li>
          </ul>
        </section>

        <section className="report-section">
          <h3>Challenges</h3>
          <ul>
            <li><strong>Email engagement down across the board</strong>. Open rate from 34% to 29%. Likely list fatigue plus iOS Mail Privacy noise.</li>
            <li><strong>Two stalled deals in proposal stage</strong>. Apex Industrial and Meridian Logistics. Both quiet for 14+ days.</li>
          </ul>
        </section>

        <section className="report-section">
          <h3>Recommendations</h3>
          <ul>
            <li>Run a 30-day list cleanse and segment the inactive cohort into a re-engagement sequence.</li>
            <li>Move a third of cold Meta budget into LinkedIn ABM for tier-one accounts.</li>
            <li>Get the proposal-stage deals on the calendar this week. We will draft talking points.</li>
          </ul>
        </section>

        <section className="report-section">
          <h3>Detailed Metrics</h3>
          <table className="tbl" style={{ marginTop: 8 }}>
            <thead>
              <tr>
                <th>Metric</th>
                <th className="num-head">This month</th>
                <th className="num-head">Last month</th>
                <th className="num-head">Change</th>
              </tr>
            </thead>
            <tbody>
              {allKpis.map((k, i) => (
                <tr key={i}>
                  <td className="strong">{k.label}</td>
                  <td className="num tnum">{k.value}</td>
                  <td className="num tnum muted">{k.prev}</td>
                  <td className="num"><Delta value={k.delta} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </article>
    </div>
  );
}
window.MonthlyReportTab = MonthlyReportTab;

Object.assign(window, { OverviewTab, PaidTab, EmailTab, WebSeoTab, CrmTab, MonthlyReportTab });