// S8 — True by construction. Hover any figure, see its proof.
// Faithful to the product's CURRENT evidence system (web/.../studio/shared/
// proof.jsx + research/evidence/RailProofCard): a quiet ring-"i" ProofMarker on
// each substantiated point opens the ProofCard for its claim — the measured
// value, its base + honest significance state, the survey question it derives
// from, and the SQL behind it. (The old bracketed [N] citations are retired.)

const { useState: s3use, useEffect: s3eff } = React;
const { pitchC, pitchMono, SqlBlock, MiniBarChart, Reveal, InfoMarker, ProofCard } = window;

const ANSWER_PARTS = [
  { kind: 'text', value: 'Habitat is modestly better known for homeware than furniture, and the gap is wider — and more actionable — on ' },
  { kind: 'b', value: 'consideration and perception' },
  { kind: 'text', value: '. On category association, ' },
  { kind: 'b', value: '60% link Habitat to homeware vs 53% to furniture' },
  { kind: 'mark', n: 1 },
  { kind: 'text', value: '. But the bigger signal is conversion: ' },
  { kind: 'b', value: 'homeware future consideration sits at 22% against just 9% for furniture' },
  { kind: 'mark', n: 2 },
  { kind: 'text', value: ', so awareness converts to intent more than twice as efficiently in homeware. Recent purchase reinforces it — ' },
  { kind: 'b', value: 'Habitat captures 4.2% of last-homeware purchases vs 3.9% in furniture' },
  { kind: 'mark', n: 3 },
  { kind: 'text', value: ', in a category where IKEA (20%) and Dunelm (14%) dominate.' },
];

// Each cited point resolves to a real claim, rendered by the shared ProofCard.
const BUNDLES = {
  1: {
    claim: {
      subject: 'Habitat · homeware', metric: 'Category association',
      value: '60%', proof: 'link Habitat to homeware — a 7pp lead over furniture',
      n: 2481, period: 'P11–13 Q4 25/26', base: 'All respondents', sig: 'sig',
      question: 'How is Habitat associated across furniture, homeware and adjacent categories?',
      qcode: 'QC07_ASSOC', pkg: 'RP-mosw7fa1', pkgColor: pitchC.sea,
    },
    chart: [
      { label: 'Furniture',  value: 53, color: pitchC.amber },
      { label: 'Homeware',   value: 60, color: pitchC.moss  },
      { label: 'Bedding',    value: 41, color: pitchC.muted2 },
      { label: 'Lighting',   value: 33, color: pitchC.muted2 },
      { label: 'Decorative', value: 38, color: pitchC.muted2 },
    ],
    citedRow: { label: 'Habitat · homeware', value: '60.1%', delta: '+1.2pp', sig: true },
    sql: `SELECT category,
  SUM(weight * (brand_mentioned = 'Habitat')::INT)
    / SUM(weight)            AS pct_assoc,
  COUNT(*)                   AS n
FROM brand_association
WHERE period = 'P11-13 Q4 25/26'
GROUP BY category
ORDER BY pct_assoc DESC`,
  },
  2: {
    claim: {
      subject: 'Habitat · homeware', metric: 'Future consideration',
      value: '22%', proof: 'future consideration — 2.4× the 9% in furniture',
      n: 1820, period: 'P11–13 Q4 25/26', base: 'Aware base', sig: 'sig',
      question: "How does Habitat's future consideration compare between furniture and homeware?",
      qcode: 'QC03_FUT', pkg: 'RP-mosw7fb2', pkgColor: pitchC.moss,
    },
    chart: [
      { label: 'Furniture', value:  9, color: pitchC.amber },
      { label: 'Homeware',  value: 22, color: pitchC.moss  },
    ],
    citedRow: { label: 'Habitat · homeware future consid.', value: '22.3%', delta: '+1.8pp', sig: true },
    sql: `SELECT category,
  SUM(weight * (response_value >= 6)::INT)
    / SUM(weight)            AS t2b_future_consideration
FROM survey
WHERE question_code = 'QC03_FUT'
  AND brand = 'Habitat'
  AND period = 'P11-13 Q4 25/26'
GROUP BY category`,
  },
  3: {
    claim: {
      subject: 'Habitat · homeware', metric: 'Share of last purchase',
      value: '4.2%', proof: 'of last-homeware purchases — ahead of its 3.9% furniture share',
      n: 1103, period: 'P11–13 Q4 25/26', base: 'Recent purchasers', sig: 'sig',
      question: "What is Habitat's share of last-brand-purchased in homeware vs the competitive set?",
      qcode: 'QC09_LAST', pkg: 'RP-mosw7fc3', pkgColor: pitchC.amber,
    },
    chart: [
      { label: 'IKEA',       value: 20.0, color: pitchC.navy  },
      { label: 'Dunelm',     value: 14.1, color: pitchC.purple },
      { label: 'John Lewis', value: 10.6, color: pitchC.amber },
      { label: 'Next',       value:  6.1, color: pitchC.muted2 },
      { label: 'Habitat',    value:  4.2, color: pitchC.orange },
    ],
    citedRow: { label: 'Habitat · homeware share', value: '4.2%', delta: '+0.4pp', sig: true },
    sql: `SELECT brand,
  SUM(weight * (last_brand = brand)::INT)
    / SUM(weight)            AS share_of_last
FROM purchase
WHERE category = 'homeware'
  AND period = 'P11-13 Q4 25/26'
GROUP BY brand
ORDER BY share_of_last DESC`,
  },
};

function Slide3Citations() {
  const [active, setActive] = s3use(1);
  const [autoplay, setAutoplay] = s3use(true);
  s3eff(() => {
    if (!autoplay) return;
    const t = setTimeout(() => setActive((a) => (a % 3) + 1), 3800);
    return () => clearTimeout(t);
  }, [active, autoplay]);
  const onMark = (n) => { setAutoplay(false); setActive(n); };

  return (
    <div style={{
      flex: 1, minHeight: 0,
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 22,
    }}>
      {/* LEFT — the answer, with quiet evidence markers */}
      <div style={{
        background: '#fff', border: `1px solid ${pitchC.hair}`, borderRadius: 14,
        padding: '24px 28px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0,
      }}>
        <div style={{
          fontSize: 16, fontWeight: 600, letterSpacing: 0.16, textTransform: 'uppercase',
          color: pitchC.navy, display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: pitchC.moss, boxShadow: `0 0 0 3px ${pitchC.mossBg}` }} />
          Habitat — Furniture vs Homeware
        </div>

        <div style={{ fontSize: 22, lineHeight: 1.55, color: pitchC.ink, flex: 1 }}>
          {ANSWER_PARTS.map((p, i) => {
            if (p.kind === 'text') return <span key={i}>{p.value}</span>;
            if (p.kind === 'b')    return <strong key={i} style={{ fontWeight: 600, color: pitchC.ink }}>{p.value}</strong>;
            if (p.kind === 'mark') return <InfoMarker key={i} active={active === p.n} onClick={() => onMark(p.n)} />;
            return null;
          })}
        </div>

        <div style={{
          marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${pitchC.hair}`,
          display: 'flex', alignItems: 'center', gap: 10,
          fontFamily: pitchMono, fontSize: 13, color: pitchC.muted, flexWrap: 'wrap',
        }}>
          <InfoMarker active size={17} />
          <span>every figure resolves to a tested claim.</span>
          <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 8, color: pitchC.muted2 }}>
            <span style={{ textDecoration: 'line-through', color: pitchC.ember }}>untied number</span>
            <span>→ dropped ·</span>
            <span style={{ color: pitchC.ink }}>check_answer_boundary()</span>
          </span>
        </div>
      </div>

      {/* RIGHT — the proof card for the active claim */}
      <EvidenceCard b={BUNDLES[active]} n={active} />
    </div>
  );
}

function EvidenceCard({ b, n }) {
  return (
    <Reveal key={n} from="right" duration={360} style={{
      background: '#fff', border: `1px solid ${pitchC.hair}`, borderRadius: 14,
      display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden',
      boxShadow: '0 2px 0 rgba(0,0,0,0.02)',
    }}>
      {/* header */}
      <div style={{
        padding: '12px 22px', borderBottom: `1px solid ${pitchC.hair}`, background: pitchC.bgSoft,
        display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0,
      }}>
        <InfoMarker active size={18} />
        <span style={{ fontFamily: pitchMono, fontSize: 12, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: pitchC.navy }}>Evidence</span>
        <span style={{ marginLeft: 'auto', fontFamily: pitchMono, fontSize: 13, color: pitchC.muted }}>{b.claim.pkg}</span>
      </div>

      <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '18px 22px 16px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* the claim, exactly as ProofCard renders it */}
        <ProofCard claim={b.claim} />

        {/* the cited point in context */}
        <div>
          <div style={{ fontFamily: pitchMono, fontSize: 11, fontWeight: 700, letterSpacing: 1.6, textTransform: 'uppercase', color: pitchC.muted2, marginBottom: 8 }}>Chart · weighted %</div>
          <MiniBarChart key={`c-${n}`} data={b.chart} height={150} animate={true} />
        </div>

        {/* the single cited row — not the whole table */}
        <div>
          <div style={{ fontFamily: pitchMono, fontSize: 11, fontWeight: 700, letterSpacing: 1.6, textTransform: 'uppercase', color: pitchC.muted2, marginBottom: 6 }}>Cited row</div>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr auto auto auto', gap: 12, alignItems: 'center',
            padding: '9px 14px', borderRadius: 9,
            background: pitchC.mossBg, border: `1px solid ${pitchC.moss}33`,
          }}>
            <span style={{ fontSize: 14.5, color: pitchC.ink, fontWeight: 500 }}>{b.citedRow.label}</span>
            <span style={{ fontFamily: pitchMono, fontSize: 14.5, fontWeight: 700, color: pitchC.ink, fontVariantNumeric: 'tabular-nums' }}>{b.citedRow.value}</span>
            <span style={{ fontFamily: pitchMono, fontSize: 13, color: pitchC.moss }}>{b.citedRow.delta}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: pitchMono, fontSize: 11.5, fontWeight: 700, color: pitchC.moss }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: pitchC.moss }} />sig
            </span>
          </div>
        </div>

        {/* the query behind it */}
        <div>
          <div style={{ fontFamily: pitchMono, fontSize: 11, fontWeight: 700, letterSpacing: 1.6, textTransform: 'uppercase', color: pitchC.muted2, marginBottom: 6 }}>Query</div>
          <SqlBlock sql={b.sql} maxHeight={138} />
        </div>
      </div>
    </Reveal>
  );
}

window.Slide3Citations = Slide3Citations;