// mkt-parts.jsx — Marketing tab section components
const { HelpIcon, HelpTitle } = window.OV2_UI;

// ---------- Channel chip ----------
const CH_META = {
  google:  { name: 'Google',  color: '#4285F4', bg: 'rgba(66,133,244,0.10)',  txt: '#1A56DB' },
  meta:    { name: 'Meta',    color: '#1877F2', bg: 'rgba(24,119,242,0.10)',  txt: '#1E40AF' },
  tiktok:  { name: 'TikTok',  color: '#111111', bg: 'rgba(17,17,17,0.06)',    txt: '#111111' },
  organic: { name: 'Organic', color: '#16A34A', bg: 'rgba(22,163,74,0.10)',   txt: '#15803D' },
};
function ChChip({ ch }) {
  const m = CH_META[ch] || { name: ch, color: '#888', bg: 'rgba(0,0,0,0.05)', txt: '#333' };
  return <span className="mk-chchip" style={{ background: m.bg, color: m.txt }}><span className="mk-chchip-dot" style={{ background: m.color }}></span>{m.name}</span>;
}

function MiniSpark({ data, color = 'var(--text)' }) {
  if (!data || !data.length) return null;
  const min = Math.min(...data), max = Math.max(...data);
  const w = 64, h = 18;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / Math.max(0.0001, max - min)) * (h - 2) - 1;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');
  return <svg width={w} height={h} className="mk-spark"><polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" /></svg>;
}

function Sign({ s, children }) {
  return <span className={`mk-sign ${s}`}>{children}</span>;
}

/* ============== SECTION 1 — Snapshot (10 cards) ============== */
function MktSnapshot({ state, lang, onOpen }) {
  const t = window.MKT_T[lang]; const help = window.MKT_HELP[lang];
  const data = window.MKT.snapshot[state] || window.MKT.snapshot.default;
  const order = ['spend', 'impr', 'clicks', 'cpc', 'freq', 'attrRev', 'conv', 'cr', 'cac', 'roas'];
  const drillable = new Set(['spend', 'impr', 'clicks', 'cpc', 'conv', 'cr']);
  return (
    <section data-screen-label="Mkt S1 Snapshot">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec1}</div>
        <div className="rev-section-sub">{t.sec1sub}</div>
      </div>
      <div className="rev-snapshot mk-snapshot">
        {order.map((k) => {
          const d = data[k];
          const featured = k === 'roas';
          const canDrill = drillable.has(k);
          return (
            <div
              key={k}
              className={`rev-snap mk-snap ${featured ? 'featured' : ''} ${d.alert ? 'alert' : ''} ${canDrill ? 'drillable' : ''}`}
              onClick={canDrill && onOpen ? () => onOpen(k) : undefined}
              style={canDrill ? { cursor: 'pointer' } : undefined}
            >
              <div className="rev-snap-label">
                <span>{t.snap[k]}</span>
                <HelpIcon help={help[k]} />
              </div>
              <div className={`rev-snap-value ${featured ? 'lg' : ''}`}>{d.value}</div>
              <div className={`rev-snap-delta ${d.sign}`}>{d.delta}{d.attr ? ' · time-decay' : ''}</div>
              {d.sub && <div className="mk-snap-sub">{d.sub}</div>}
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ============== SECTION 2 — Channels ============== */
function MktChannels({ state, lang, onOpen }) {
  const t = window.MKT_T[lang];
  const help = window.MKT_HELP[lang];
  const rows = window.MKT.channels[state] || window.MKT.channels.default;
  const dist = window.MKT.distribution[state] || window.MKT.distribution.default;
  // totals
  const sum = rows.reduce((acc, r) => {
    const n = (s) => Number(String(s).replace(/[^\d.]/g, ''));
    acc.spend += n(r.spend); acc.impr += n(r.impr) * (String(r.impr).includes('K') ? 1000 : (String(r.impr).includes('M') ? 1e6 : 1));
    acc.clicks += n(r.clicks); acc.conv += r.conv; acc.rev += n(r.rev);
    return acc;
  }, { spend: 0, impr: 0, clicks: 0, conv: 0, rev: 0 });
  const totalRoas = (sum.rev / Math.max(1, sum.spend)).toFixed(1) + 'x';
  const totalCpc = '€' + (sum.spend / Math.max(1, sum.clicks)).toFixed(2);
  const totalCac = '€' + Math.round(sum.spend / Math.max(1, sum.conv));
  const totalCr = ((sum.conv / Math.max(1, sum.clicks)) * 100).toFixed(2) + '%';
  const totalCtr = ((sum.clicks / Math.max(1, sum.impr)) * 100).toFixed(2) + '%';

  return (
    <section data-screen-label="Mkt S2 Channels">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec2}</div>
        <div className="rev-section-sub">{t.sec2sub}</div>
      </div>
      <div className="rev-card">
        <div className="rev-card-head"><HelpTitle className="rev-card-title" help={help.chTable}>{t.chTable}</HelpTitle></div>
        <div className="mk-tbl-wrap">
          <table className="mk-tbl">
            <thead>
              <tr>
                <th>{t.chCols.ch}</th><th className="r">{t.chCols.spend}</th><th className="r">{t.chCols.impr}</th>
                <th className="r">{t.chCols.clicks}</th><th className="r">{t.chCols.ctr}</th><th className="r">{t.chCols.cpc}</th>
                <th className="r">{t.chCols.conv}</th><th className="r">{t.chCols.cr}</th><th className="r">{t.chCols.cac}</th>
                <th className="r">{t.chCols.rev}</th><th className="r">{t.chCols.roas}</th><th className="r">{t.chCols.trend}</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.id} className={r.alert ? 'alert' : ''} onClick={() => onOpen && onOpen('channel')} style={{ cursor: 'pointer' }}>
                  <td><ChChip ch={r.id} /></td>
                  <td className="r">{r.spend}</td><td className="r">{r.impr}</td>
                  <td className="r">{r.clicks}</td><td className="r">{r.ctr}</td><td className="r">{r.cpc}</td>
                  <td className="r">{r.conv}</td><td className="r">{r.cr}</td><td className="r">{r.cac}</td>
                  <td className="r">{r.rev}</td><td className="r"><strong>{r.roas}</strong></td>
                  <td className="r"><MiniSpark data={r.spark} color={r.alert ? 'var(--neg)' : CH_META[r.id].color} /></td>
                </tr>
              ))}
              <tr className="total">
                <td>{t.chTotal}</td>
                <td className="r">€{sum.spend.toLocaleString()}</td>
                <td className="r">{(sum.impr / 1e6).toFixed(2)}M</td>
                <td className="r">{sum.clicks.toLocaleString()}</td>
                <td className="r">{totalCtr}</td>
                <td className="r">{totalCpc}</td>
                <td className="r">{sum.conv}</td>
                <td className="r">{totalCr}</td>
                <td className="r">{totalCac}</td>
                <td className="r">€{sum.rev.toLocaleString()}</td>
                <td className="r"><strong>{totalRoas}</strong></td>
                <td className="r"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div className="mk-dist-grid">
        <div className="rev-card">
          <div className="rev-card-head">
            <div>
              <HelpTitle className="rev-card-title" help={help.dist}>{t.distTitle}</HelpTitle>
              <div className="rev-card-sub">{dist.note}</div>
            </div>
          </div>
          <div className="mk-dist">
            {[{ key: 'spend', label: t.dist.spend }, { key: 'rev', label: t.dist.rev }].map((row) => (
              <div key={row.key} className="mk-dist-row">
                <div className="mk-dist-label">{row.label}</div>
                <div className="mk-dist-bar">
                  {dist[row.key].map((seg) => (
                    <div key={seg.id} className="mk-dist-seg" style={{ width: seg.pct + '%', background: CH_META[seg.id].color }} title={`${CH_META[seg.id].name} ${seg.pct}%`}>
                      {seg.pct >= 12 && <span>{CH_META[seg.id].name} {seg.pct}%</span>}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="rev-card">
          <div className="rev-card-head">
            <div>
              <HelpTitle className="rev-card-title" help={help.scatter}>{t.scatterTitle}</HelpTitle>
              <div className="rev-card-sub">{t.scatterHint}</div>
            </div>
          </div>
          <ChannelScatter rows={rows} />
        </div>
      </div>
    </section>
  );
}

function ChannelScatter({ rows }) {
  // X = CAC (lower better, left), Y = ROAS (higher better, top), size = impressions
  const w = 360, h = 220, pad = { l: 36, r: 16, t: 16, b: 30 };
  const cacs = rows.map((r) => Number(r.cac.replace(/[^\d.]/g, '')));
  const roas = rows.map((r) => parseFloat(r.roas));
  const imprs = rows.map((r) => {
    const n = Number(r.impr.replace(/[^\d.]/g, ''));
    return r.impr.includes('M') ? n * 1e6 : n * 1000;
  });
  const cacMax = Math.max(150, Math.max(...cacs) * 1.1);
  const roasMax = Math.max(15, Math.max(...roas) * 1.1);
  const imprMax = Math.max(...imprs);
  const xFor = (c) => pad.l + (c / cacMax) * (w - pad.l - pad.r);
  const yFor = (r) => pad.t + (1 - r / roasMax) * (h - pad.t - pad.b);
  const rFor = (i) => 6 + (i / imprMax) * 22;

  return (
    <div className="mk-scatter">
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h}>
        {/* grid */}
        {[0.25, 0.5, 0.75].map((p, i) => (
          <line key={'h' + i} x1={pad.l} x2={w - pad.r} y1={pad.t + p * (h - pad.t - pad.b)} y2={pad.t + p * (h - pad.t - pad.b)} stroke="var(--border)" strokeWidth="1" strokeDasharray="2 3" />
        ))}
        {/* axes */}
        <line x1={pad.l} x2={pad.l} y1={pad.t} y2={h - pad.b} stroke="var(--border-strong, var(--border))" />
        <line x1={pad.l} x2={w - pad.r} y1={h - pad.b} y2={h - pad.b} stroke="var(--border-strong, var(--border))" />
        {/* y ticks */}
        {[0, 0.5, 1].map((p, i) => {
          const y = pad.t + p * (h - pad.t - pad.b);
          const v = (roasMax * (1 - p)).toFixed(0) + 'x';
          return <text key={'yt' + i} x={pad.l - 6} y={y + 3} fontSize="10" textAnchor="end" fill="var(--text-3)">{v}</text>;
        })}
        {/* x ticks */}
        {[0, 0.5, 1].map((p, i) => {
          const x = pad.l + p * (w - pad.l - pad.r);
          const v = '€' + Math.round(cacMax * p);
          return <text key={'xt' + i} x={x} y={h - pad.b + 14} fontSize="10" textAnchor="middle" fill="var(--text-3)">{v}</text>;
        })}
        {/* axis labels */}
        <text x={pad.l} y={pad.t - 4} fontSize="10" fill="var(--text-3)">ROAS ↑</text>
        <text x={w - pad.r} y={h - 4} fontSize="10" textAnchor="end" fill="var(--text-3)">CAC →</text>
        {/* bubbles */}
        {rows.map((r, i) => {
          const c = Number(r.cac.replace(/[^\d.]/g, ''));
          const ro = parseFloat(r.roas);
          const im = imprs[i];
          const m = CH_META[r.id];
          const cx = xFor(c), cy = yFor(ro), rad = rFor(im);
          return (
            <g key={r.id}>
              <circle cx={cx} cy={cy} r={rad} fill={m.color} fillOpacity="0.18" stroke={m.color} strokeWidth="1.5" />
              <text x={cx} y={cy + 3} fontSize="10" fontWeight="600" textAnchor="middle" fill={m.color}>{m.name}</text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

/* ============== SECTION 3 — Funnel ============== */
function MktFunnel({ state, lang }) {
  const t = window.MKT_T[lang];
  const help = window.MKT_HELP[lang];
  const rows = window.MKT.funnel[state] || window.MKT.funnel.default;
  const byCh = window.MKT.funnelByChannel[state] || window.MKT.funnelByChannel.default;
  const max = rows[0].value;
  const fmt = (v) => v >= 1e6 ? (v / 1e6).toFixed(2) + 'M' : v >= 1e3 ? (v / 1e3).toFixed(1) + 'K' : v.toLocaleString();

  return (
    <section data-screen-label="Mkt S3 Funnel">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec3}</div>
        <div className="rev-section-sub">{t.sec3sub}</div>
      </div>
      <div className="mk-funnel-grid">
        <div className="rev-card">
          <div className="rev-card-head"><HelpTitle className="rev-card-title" help={help.funnel}>{t.funnelTitle}</HelpTitle></div>
          <div className="mk-funnel">
            {rows.map((r, i) => {
              const w = (r.value / max) * 100;
              const label = t.fStages[i];
              return (
                <div key={i} className={`mk-fn-row ${r.anom ? 'anom' : ''}`}>
                  <div className="mk-fn-label">{label}</div>
                  <div className="mk-fn-bar-wrap">
                    <div className="mk-fn-bar" style={{ width: w + '%' }}>
                      <span className="mk-fn-val">{fmt(r.value)}</span>
                    </div>
                  </div>
                  <div className="mk-fn-drop">{r.drop || '—'}</div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="rev-card">
          <div className="rev-card-head"><HelpTitle className="rev-card-title" help={help.funnelByCh}>{t.funnelByCh}</HelpTitle></div>
          <div className="mk-funnel-ch">
            {['google', 'meta', 'tiktok'].map((ch) => {
              const arr = byCh[ch];
              const m0 = arr[0];
              return (
                <div key={ch} className="mk-fn-ch-col">
                  <div className="mk-fn-ch-head"><ChChip ch={ch} /></div>
                  {arr.map((v, i) => (
                    <div key={i} className="mk-fn-ch-row">
                      <div className="mk-fn-ch-bar" style={{ width: ((v / m0) * 100) + '%', background: CH_META[ch].color }}></div>
                      <span className="mk-fn-ch-val">{fmt(v)}</span>
                    </div>
                  ))}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== SECTION 4 — Campaigns ============== */
function MktCampaigns({ state, lang, onOpen }) {
  const t = window.MKT_T[lang];
  const help = window.MKT_HELP[lang];
  const rows = window.MKT.campaigns.default;
  const movers = window.MKT.movers[state] || window.MKT.movers.default;
  const [filter, setFilter] = React.useState('all');
  const [showAll, setShowAll] = React.useState(false);

  const filtered = rows.filter((r) => {
    if (filter === 'active') return r.status === 'active';
    if (filter === 'paused') return r.status === 'paused';
    if (filter === 'google' || filter === 'meta' || filter === 'tiktok') return r.ch === filter;
    return true;
  });
  const visible = showAll ? filtered : filtered.slice(0, 7);

  return (
    <section data-screen-label="Mkt S4 Campaigns">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec4}</div>
        <div className="rev-section-sub">{t.sec4sub}</div>
      </div>

      <div className="rev-card">
        <div className="rev-card-head">
          <HelpTitle className="rev-card-title" help={help.campaigns}>{t.campTitle}</HelpTitle>
          <div className="mk-chip-row">
            {[
              { k: 'all', l: t.chips.all },
              { k: 'google', l: 'Google' },
              { k: 'meta', l: 'Meta' },
              { k: 'tiktok', l: 'TikTok' },
              { k: 'active', l: t.chips.active },
              { k: 'paused', l: t.chips.paused },
            ].map((c) => (
              <button key={c.k} className={`mk-chip ${filter === c.k ? 'on' : ''}`} onClick={() => setFilter(c.k)}>{c.l}</button>
            ))}
          </div>
        </div>
        <div className="mk-tbl-wrap">
          <table className="mk-tbl mk-tbl-camp">
            <thead>
              <tr>
                <th>{t.campCols.name}</th><th>{t.campCols.ch}</th><th>{t.campCols.status}</th>
                <th className="r">{t.campCols.spend}</th><th className="r">{t.campCols.impr}</th>
                <th className="r">{t.campCols.clicks}</th><th className="r">{t.campCols.ctr}</th>
                <th className="r">{t.campCols.conv}</th><th className="r">{t.campCols.cr}</th>
                <th className="r">{t.campCols.cac}</th><th className="r">{t.campCols.roas}</th>
                <th className="r">{t.campCols.delta}</th>
              </tr>
            </thead>
            <tbody>
              {visible.map((r, i) => (
                <tr key={i} className={r.warn ? 'alert' : ''} onClick={() => onOpen && onOpen('campaign')} style={{ cursor: 'pointer' }}>
                  <td>{r.name}</td>
                  <td><ChChip ch={r.ch} /></td>
                  <td><span className={`mk-status ${r.status}`}>{t.status[r.status]}</span></td>
                  <td className="r">€{r.spend}</td>
                  <td className="r">{(r.impr / 1000).toFixed(0)}K</td>
                  <td className="r">{r.clicks.toLocaleString()}</td>
                  <td className="r">{r.ctr}%</td>
                  <td className="r">{r.conv}</td>
                  <td className="r">{r.cr}%</td>
                  <td className="r">{r.cac ? '€' + r.cac : '—'}</td>
                  <td className="r"><strong>{r.roas}x</strong></td>
                  <td className={`r mk-delta ${r.trend}`}>{r.delta}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {filtered.length > 7 && (
          <button className="mk-show-all" onClick={() => setShowAll(!showAll)}>
            {showAll ? '— ' : '+ '}{t.showAll.replace('{n}', filtered.length)}
          </button>
        )}
      </div>

      <div className="mk-camp-grid">
        <div className="rev-card">
          <div className="rev-card-head"><HelpTitle className="rev-card-title" help={help.campaignBubbles}>{t.bubbleTitle}</HelpTitle></div>
          <CampaignBubbles rows={rows.filter((r) => r.status === 'active' && r.spend > 0)} />
        </div>

        <div className="rev-card">
          <div className="rev-card-head"><HelpTitle className="rev-card-title" help={help.movers}>{t.moversTitle}</HelpTitle></div>
          <div className="mk-movers">
            <div className="mk-mov-col">
              <div className="mk-mov-head pos">↑ {t.moversBest}</div>
              {movers.best.map((m, i) => (
                <div key={i} className="mk-mov-row">
                  <ChChip ch={m.ch} />
                  <div className="mk-mov-name">{m.name}</div>
                  <div className="mk-mov-delta pos">{m.delta}</div>
                </div>
              ))}
            </div>
            <div className="mk-mov-col">
              <div className="mk-mov-head neg">↓ {t.moversWorst}</div>
              {movers.worst.map((m, i) => (
                <div key={i} className="mk-mov-row">
                  <ChChip ch={m.ch} />
                  <div className="mk-mov-name">{m.name}</div>
                  <div className="mk-mov-delta neg">{m.delta}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CampaignBubbles({ rows }) {
  const w = 360, h = 240, pad = { l: 40, r: 12, t: 14, b: 30 };
  const spends = rows.map((r) => r.spend);
  const roas = rows.map((r) => r.roas);
  const sMax = Math.max(...spends) * 1.05;
  const rMax = Math.max(...roas) * 1.05;
  const xFor = (s) => pad.l + (s / sMax) * (w - pad.l - pad.r);
  const yFor = (r) => pad.t + (1 - r / rMax) * (h - pad.t - pad.b);
  return (
    <div className="mk-scatter">
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h}>
        {[0.25, 0.5, 0.75].map((p, i) => (
          <line key={i} x1={pad.l} x2={w - pad.r} y1={pad.t + p * (h - pad.t - pad.b)} y2={pad.t + p * (h - pad.t - pad.b)} stroke="var(--border)" strokeDasharray="2 3" />
        ))}
        <line x1={pad.l} x2={pad.l} y1={pad.t} y2={h - pad.b} stroke="var(--border)" />
        <line x1={pad.l} x2={w - pad.r} y1={h - pad.b} y2={h - pad.b} stroke="var(--border)" />
        {[0, 0.5, 1].map((p, i) => {
          const y = pad.t + p * (h - pad.t - pad.b);
          return <text key={i} x={pad.l - 6} y={y + 3} fontSize="10" textAnchor="end" fill="var(--text-3)">{(rMax * (1 - p)).toFixed(0)}x</text>;
        })}
        {[0, 0.5, 1].map((p, i) => {
          const x = pad.l + p * (w - pad.l - pad.r);
          return <text key={i} x={x} y={h - pad.b + 14} fontSize="10" textAnchor="middle" fill="var(--text-3)">€{Math.round(sMax * p)}</text>;
        })}
        <text x={pad.l} y={pad.t - 4} fontSize="10" fill="var(--text-3)">ROAS ↑</text>
        <text x={w - pad.r} y={h - 4} fontSize="10" textAnchor="end" fill="var(--text-3)">Spend →</text>
        {rows.map((r, i) => {
          const m = CH_META[r.ch];
          return (
            <circle key={i} cx={xFor(r.spend)} cy={yFor(r.roas)} r={5 + Math.sqrt(r.conv) * 2} fill={m.color} fillOpacity="0.5" stroke={m.color} strokeWidth="1">
              <title>{r.name}: €{r.spend} / {r.roas}x ROAS / {r.conv} conv</title>
            </circle>
          );
        })}
      </svg>
    </div>
  );
}

/* ============== SECTION 5 — Audiences / Creatives / Keywords ============== */
function MktAudCrea({ state, lang, onOpen }) {
  const t = window.MKT_T[lang];
  const help = window.MKT_HELP[lang];
  const aud = window.MKT.audiences.default;
  const crea = window.MKT.creatives.default;
  const kws = window.MKT.keywords.default;
  const [kwFilter, setKwFilter] = React.useState('all');

  const visKw = kws.filter((k) => kwFilter === 'all' || k.src === kwFilter);

  return (
    <section data-screen-label="Mkt S5 Aud Crea">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec5}</div>
        <div className="rev-section-sub">{t.sec5sub}</div>
      </div>

      <div className="rev-card">
        <div className="rev-card-head"><HelpTitle className="rev-card-title" help={help.audiences}>{t.audTitle}</HelpTitle></div>
        <div className="mk-tbl-wrap">
          <table className="mk-tbl">
            <thead>
              <tr>
                <th>{t.audCols.name}</th><th>{t.audCols.ch}</th>
                <th className="r">{t.audCols.spend}</th><th className="r">{t.audCols.impr}</th>
                <th className="r">{t.audCols.ctr}</th><th className="r">{t.audCols.conv}</th>
                <th className="r">{t.audCols.cr}</th><th className="r">{t.audCols.roas}</th>
              </tr>
            </thead>
            <tbody>
              {aud.map((a, i) => (
                <tr key={i} onClick={() => onOpen && onOpen('audience')} style={{ cursor: 'pointer' }}>
                  <td>{a.name}</td>
                  <td><ChChip ch={a.ch} /></td>
                  <td className="r">{a.spend}</td><td className="r">{a.impr}</td>
                  <td className="r">{a.ctr}</td><td className="r">{a.conv}</td>
                  <td className="r">{a.cr}</td><td className="r"><strong>{a.roas}</strong></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="rev-card">
        <div className="rev-card-head"><HelpTitle className="rev-card-title" help={help.creatives}>{t.creaTitle}</HelpTitle></div>
        <div className="mk-crea-grid">
          {crea.map((c) => (
            <div key={c.id} className="mk-crea-card">
              <div className="mk-crea-thumb" style={{ background: c.color }}>
                <svg viewBox="0 0 80 60" width="100%" height="100%">
                  <rect x="6" y="14" width="68" height="32" rx="3" fill="rgba(255,255,255,0.6)" />
                  <circle cx="40" cy="30" r="8" fill="rgba(0,0,0,0.18)" />
                  <polygon points="37,26 37,34 45,30" fill="rgba(255,255,255,0.95)" />
                </svg>
              </div>
              <div className="mk-crea-body">
                <div className="mk-crea-title">{c.title}</div>
                <div className="mk-crea-meta">
                  <ChChip ch={c.ch} />
                  <span>{t.runFor.replace('{n}', c.days)}</span>
                </div>
                <div className="mk-crea-stats">
                  <span><b>CTR</b> {c.ctr}</span>
                  <span><b>ROAS</b> {c.roas}</span>
                  <span><b>Spend</b> {c.spend}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="rev-card">
        <div className="rev-card-head">
          <HelpTitle className="rev-card-title" help={help.keywords}>{t.kwTitle}</HelpTitle>
          <div className="mk-chip-row">
            {[{ k: 'all', l: t.kwChips.all }, { k: 'paid', l: t.kwChips.paid }, { k: 'organic', l: t.kwChips.organic }].map((c) => (
              <button key={c.k} className={`mk-chip ${kwFilter === c.k ? 'on' : ''}`} onClick={() => setKwFilter(c.k)}>{c.l}</button>
            ))}
          </div>
        </div>
        <div className="mk-tbl-wrap">
          <table className="mk-tbl">
            <thead>
              <tr>
                <th>{t.kwCols.kw}</th><th>{t.kwCols.src}</th>
                <th className="r">{t.kwCols.impr}</th><th className="r">{t.kwCols.clicks}</th>
                <th className="r">{t.kwCols.ctr}</th><th className="r">{t.kwCols.pos}</th>
                <th className="r">{t.kwCols.cost}</th><th className="r">{t.kwCols.conv}</th>
                <th className="r">{t.kwCols.val}</th>
              </tr>
            </thead>
            <tbody>
              {visKw.map((k, i) => (
                <tr key={i}>
                  <td>{k.kw} {k.both && <span className="mk-badge-both">{t.both}</span>}</td>
                  <td><span className={`mk-src ${k.src}`}>{k.src === 'paid' ? t.paid : t.seo}</span></td>
                  <td className="r">{k.impr}</td>
                  <td className="r">{k.clicks}</td>
                  <td className="r">{k.ctr}</td>
                  <td className="r">{k.pos || '—'}</td>
                  <td className="r">{k.cost || '—'}</td>
                  <td className="r">{k.conv}</td>
                  <td className="r"><strong>{k.val}</strong></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ============== SECTION 6 — Attribution + Sankey + Assist + TTC ============== */
function MktAttribution({ state, lang, onOpen }) {
  const t = window.MKT_T[lang];
  const help = window.MKT_HELP[lang];
  const attr = window.MKT.attribution.default;
  const journeys = window.MKT.journeys.default;
  const assists = window.MKT.assists.default;
  const ttc = window.MKT.ttc.default;
  const interp = window.MKT.assists.interpretation[lang];

  const maxJ = Math.max(...journeys.map((j) => j.count));

  return (
    <section data-screen-label="Mkt S6 Attribution">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec6}</div>
        <div className="rev-section-sub">{t.sec6sub}</div>
      </div>

      <div className="rev-card">
        <div className="rev-card-head"><HelpTitle className="rev-card-title" help={help.attrMatrix}>{t.attrTitle}</HelpTitle></div>
        <div className="mk-tbl-wrap">
          <table className="mk-tbl mk-attr-tbl">
            <thead>
              <tr>
                <th>{t.chCols.ch}</th>
                {attr.models.map((m) => <th key={m} className="r">{t.attrModels[m]}</th>)}
              </tr>
            </thead>
            <tbody>
              {attr.rows.map((r) => (
                <tr key={r.ch}>
                  <td>{r.ch === 'organic' ? <span className="mk-chchip" style={{ background: 'rgba(22,163,74,0.10)', color: '#15803D' }}><span className="mk-chchip-dot" style={{ background: '#16A34A' }}></span>{r.label}</span> : <ChChip ch={r.ch} />}</td>
                  {r.vals.map((v, i) => {
                    const max = Math.max(...attr.rows.map((rr) => rr.vals[i]));
                    return (
                      <td key={i} className="r mk-attr-cell">
                        <div className="mk-attr-fill" style={{ width: ((v / max) * 100) + '%' }}></div>
                        <span>{v}</span>
                      </td>
                    );
                  })}
                </tr>
              ))}
              <tr className="total">
                <td>{t.chTotal}</td>
                {attr.totals.map((v, i) => <td key={i} className="r"><strong>{v}</strong></td>)}
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div className="mk-attr-grid">
        <div className="rev-card">
          <div className="rev-card-head"><HelpTitle className="rev-card-title" help={help.journeys}>{t.journeyTitle}</HelpTitle></div>
          <div className="mk-journeys">
            {journeys.map((j, i) => (
              <div key={i} className="mk-journey" onClick={() => onOpen && onOpen('journey')} style={{ cursor: 'pointer' }}>
                <div className="mk-journey-path">
                  {j.path.map((p, idx) => (
                    <React.Fragment key={idx}>
                      <span className="mk-journey-node" style={{ background: (CH_META[p.toLowerCase()] || { color: '#888' }).color }}>{p}</span>
                      {idx < j.path.length - 1 && <span className="mk-journey-arrow">→</span>}
                    </React.Fragment>
                  ))}
                </div>
                <div className="mk-journey-bar-wrap">
                  <div className="mk-journey-bar" style={{ width: ((j.count / maxJ) * 100) + '%' }}></div>
                </div>
                <div className="mk-journey-count">{j.count}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="rev-card">
          <div className="rev-card-head">
            <div>
              <HelpTitle className="rev-card-title" help={help.assists}>{t.assistTitle}</HelpTitle>
              <div className="rev-card-sub">{interp}</div>
            </div>
          </div>
          <div className="mk-assists">
            {assists.map((a) => {
              const total = a.last + a.assist;
              const max = Math.max(...assists.map((x) => x.last + x.assist));
              return (
                <div key={a.ch} className="mk-assist-row">
                  <div className="mk-assist-label">
                    {a.ch === 'organic' ? <span className="mk-chchip" style={{ background: 'rgba(22,163,74,0.10)', color: '#15803D' }}><span className="mk-chchip-dot" style={{ background: '#16A34A' }}></span>{a.label}</span> : <ChChip ch={a.ch} />}
                  </div>
                  <div className="mk-assist-bar" style={{ width: ((total / max) * 100) + '%' }}>
                    <div className="mk-assist-last" style={{ width: ((a.last / total) * 100) + '%', background: a.color }} title={`${t.assistLast}: ${a.last}`}>{a.last}</div>
                    <div className="mk-assist-asst" style={{ width: ((a.assist / total) * 100) + '%', background: a.color, opacity: 0.4 }} title={`${t.assistAssist}: ${a.assist}`}>{a.assist}</div>
                  </div>
                </div>
              );
            })}
            <div className="mk-assist-legend">
              <span><span className="mk-leg-sw" style={{ background: '#4285F4' }}></span>{t.assistLast}</span>
              <span><span className="mk-leg-sw" style={{ background: '#4285F4', opacity: 0.4 }}></span>{t.assistAssist}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="rev-card">
        <div className="rev-card-head">
          <div>
            <HelpTitle className="rev-card-title" help={help.ttc}>{t.ttcTitle}</HelpTitle>
            <div className="rev-card-sub">{ttc.median}</div>
          </div>
        </div>
        <div className="mk-ttc">
          {ttc.map((b, i) => (
            <div key={i} className="mk-ttc-col">
              <div className="mk-ttc-bar-wrap">
                <div className="mk-ttc-bar" style={{ height: (b.pct / 35) * 100 + '%' }}></div>
              </div>
              <div className="mk-ttc-pct">{b.pct}%</div>
              <div className="mk-ttc-bin">{b.bin}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.MktSnapshot = MktSnapshot;
window.MktChannels = MktChannels;
window.MktFunnel = MktFunnel;
window.MktCampaigns = MktCampaigns;
window.MktAudCrea = MktAudCrea;
window.MktAttribution = MktAttribution;