// Section 4, The synthesis report (centerpiece)
const Report = () => {
  return (
    <section style={{
      background: 'linear-gradient(180deg, #F0F4F1 0%, #E8EDE9 100%)',
      padding: '120px 32px',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 16 }}>
          <SectionLabel>The synthesis report</SectionLabel>
        </div>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <p className="mono" style={{
            fontSize: 12, color: T.ink4, letterSpacing: 0.5,
            textTransform: 'uppercase',
          }}>
            This is what lands after your first challenge closes.
          </p>
        </div>

        <ReportDocument />
      </div>
    </section>
  );
};

const ReportDocument = () => (
  <div style={{
    background: T.paper,
    borderRadius: 18,
    boxShadow: '0 30px 80px rgba(15,43,26,0.12), 0 8px 24px rgba(15,43,26,0.06)',
    overflow: 'hidden',
    border: `1px solid ${T.border}`,
  }}>
    {/* Document chrome */}
    <div style={{
      padding: '14px 22px',
      borderBottom: `1px solid ${T.borderSoft}`,
      background: T.paperOff,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E5E7E5' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E5E7E5' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E5E7E5' }} />
        </div>
        <div className="mono" style={{ fontSize: 11, color: T.ink4, marginLeft: 8, letterSpacing: 0.5 }}>
          SPARK / SYNTHESIS / NW-2026-04
        </div>
      </div>
      <div className="mono" style={{ fontSize: 11, color: T.ink4, letterSpacing: 0.5 }}>
        PDF · MARKDOWN · SHARE
      </div>
    </div>

    {/* Title block */}
    <div style={{ padding: '40px 56px 28px' }}>
      <div className="mono" style={{
        fontSize: 11, color: T.greenDark, letterSpacing: 0.8,
        textTransform: 'uppercase', marginBottom: 14,
      }}>
        Challenge synthesis · Closed 24 April 2026
      </div>
      <h3 className="display" style={{
        fontSize: 32, fontWeight: 700, color: T.ink,
        letterSpacing: -0.8, lineHeight: 1.15,
        marginBottom: 22, maxWidth: 760,
      }}>
        How do we scale our sales motion without proportionally scaling headcount?
      </h3>
      <ReportMeta />
    </div>

    <ReportClusters />
    <ReportTension />
    <ReportOutlier />
    <ReportFooter />
  </div>
);

const ReportMeta = () => {
  const items = [
    { label: 'Closed', value: '24 Apr 2026' },
    { label: 'Participation', value: '142 / 168', sub: '85%' },
    { label: 'Avg response time', value: '3m 12s' },
    { label: 'Confidence', value: 'High', tone: 'green' },
  ];
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      gap: 0, borderTop: `1px solid ${T.borderSoft}`,
      borderBottom: `1px solid ${T.borderSoft}`,
      margin: '0 -56px',
    }}>
      {items.map((it, i) => (
        <div key={it.label} style={{
          padding: '16px 24px',
          borderRight: i < items.length - 1 ? `1px solid ${T.borderSoft}` : 'none',
          paddingLeft: i === 0 ? 56 : 24,
          paddingRight: i === items.length - 1 ? 56 : 24,
        }}>
          <div className="mono" style={{ fontSize: 10.5, color: T.ink4, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 6 }}>
            {it.label}
          </div>
          <div style={{ fontSize: 18, fontWeight: 700, color: it.tone === 'green' ? T.greenDark : T.ink, letterSpacing: -0.3, display: 'flex', alignItems: 'baseline', gap: 8 }}>
            {it.value}
            {it.sub && <span style={{ fontSize: 13, color: T.ink4, fontWeight: 500 }}>{it.sub}</span>}
          </div>
        </div>
      ))}
    </div>
  );
};

// ── Clusters ─────────────────────────────────────
const ReportClusters = () => {
  const clusters = [
    {
      id: '01',
      title: 'Automate the qualification layer before it touches a human SDR',
      count: 14,
      transformational: 7,
      summary: '14 submissions independently converge on moving lead qualification upstream of the SDR conversation. Together they describe a system that scores intent from behavioural data, routes high-fit leads to demo booking directly, and reserves human conversations for accounts above a defined revenue threshold. The cluster names three specific candidate tools your team already uses, and identifies the handoff from MQL to SQL as the highest-leverage point, not the SDR\u2019s call volume.',
      tags: ['Strategic', '90-day implementable'],
    },
    {
      id: '02',
      title: 'Restructure the SDR role from gatekeeper to specialist closer',
      count: 9,
      transformational: 6,
      summary: '9 submissions argue the SDR role itself is the constraint. Rather than scale the function, contributors propose merging it into the AE role for inbound, and reserving outbound SDRs as a separate motion against a narrowly defined ICP. Multiple submissions cite the same competitor, Linear, as a model. The cluster\u2019s collective score is higher than any individual submission because the structural argument only becomes clear when read together.',
      tags: ['Strategic'],
    },
  ];
  return (
    <div style={{ padding: '32px 56px 8px' }}>
      <div className="mono" style={{
        fontSize: 11, color: T.ink4, letterSpacing: 0.8,
        textTransform: 'uppercase', marginBottom: 18,
      }}>
        Clusters, what your team said collectively
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {clusters.map(c => <ClusterCard key={c.id} c={c} />)}
      </div>
    </div>
  );
};

const ClusterCard = ({ c }) => (
  <div style={{
    border: `1px solid ${T.border}`,
    borderRadius: 12,
    padding: '24px 26px',
    background: T.paperOff,
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24, marginBottom: 14 }}>
      <div style={{ flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6 }}>
          <span className="mono" style={{ fontSize: 13, color: T.greenDark, fontWeight: 600, letterSpacing: 0.4 }}>
            CLUSTER {c.id}
          </span>
          <span style={{ fontSize: 12, color: T.ink4 }}>· {c.count} submissions</span>
        </div>
        <h4 style={{
          fontSize: 19, fontWeight: 700, color: T.ink,
          letterSpacing: -0.3, lineHeight: 1.35,
        }}>
          {c.title}
        </h4>
      </div>
      <TransformationalScore value={c.transformational} />
    </div>
    <p style={{ fontSize: 14.5, lineHeight: 1.65, color: T.ink2, marginBottom: 14 }}>
      {c.summary}
    </p>
    <div style={{ display: 'flex', gap: 8 }}>
      {c.tags.map(t => (
        <span key={t} style={{
          fontSize: 11, fontWeight: 600, color: T.greenDark,
          padding: '4px 10px', borderRadius: 999, background: T.greenLight,
        }}>{t}</span>
      ))}
    </div>
  </div>
);

const TransformationalScore = ({ value }) => (
  <div style={{ textAlign: 'right', flexShrink: 0 }}>
    <div className="mono" style={{ fontSize: 10, color: T.ink4, letterSpacing: 0.6, marginBottom: 6, textTransform: 'uppercase' }}>
      Incremental → Transformational
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end' }}>
      <div style={{ display: 'flex', gap: 2 }}>
        {Array.from({ length: 10 }).map((_, i) => (
          <span key={i} style={{
            width: 8, height: 14, borderRadius: 2,
            background: i < value ? (i < 4 ? T.greenLight : i < 7 ? T.green : T.orange) : '#EEF2EE',
          }} />
        ))}
      </div>
      <span style={{ fontSize: 16, fontWeight: 700, color: T.ink, letterSpacing: -0.2 }}>{value}<span style={{ color: T.ink4, fontWeight: 500 }}>/10</span></span>
    </div>
  </div>
);

// ── Tension callout ─────────────────────────────────────
const ReportTension = () => (
  <div style={{ padding: '24px 56px' }}>
    <div style={{
      border: `1px solid ${T.amberBg}`,
      borderLeft: `4px solid ${T.amber}`,
      borderRadius: 10,
      padding: '20px 22px',
      background: '#FFFBEB',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <div style={{
          width: 22, height: 22, borderRadius: 6, background: T.amberBg,
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.amber,
        }}>
          <Icon d={["M12 9v4", "M12 17h.01", "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"]} size={14} sw={2} />
        </div>
        <span className="mono" style={{
          fontSize: 11, fontWeight: 700, color: T.amber,
          letterSpacing: 0.8, textTransform: 'uppercase',
        }}>
          Tension surfaced
        </span>
      </div>
      <p style={{ fontSize: 15.5, lineHeight: 1.6, color: T.ink, fontWeight: 500 }}>
        8 submissions point to a root cause your challenge didn't frame, the handoff between marketing and sales, not the sales process itself. <span style={{ color: T.ink2, fontWeight: 400 }}>Worth resolving before any quota change.</span>
      </p>
    </div>
  </div>
);

// ── Outlier ─────────────────────────────────────
const ReportOutlier = () => (
  <div style={{ padding: '4px 56px 32px' }}>
    <div style={{
      border: `2px dashed ${T.border}`,
      borderRadius: 10,
      padding: '22px 24px',
      background: 'transparent',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="mono" style={{
            fontSize: 11, fontWeight: 700, color: T.ink2,
            letterSpacing: 0.8, textTransform: 'uppercase',
          }}>Outlier, 1 submission, worth reading in full</span>
        </div>
        <span className="mono" style={{ fontSize: 11, color: T.ink4, letterSpacing: 0.5 }}>
          ANON-#091
        </span>
      </div>
      <p style={{ fontSize: 16, lineHeight: 1.55, color: T.ink, fontStyle: 'italic', fontWeight: 500, letterSpacing: -0.1 }}>
        "Move the qualifying conversation upstream of the product itself, gate trial access behind a 4-question intent form, and let the form replace the SDR entirely for accounts under £50k ACV. Nobody is converting on those calls anyway."
      </p>
      <div style={{ marginTop: 14, fontSize: 13, color: T.ink3 }}>
        Doesn't fit any cluster. Proposes a structural change rather than an optimisation. Worth a direct conversation with the submitter.
      </div>
    </div>
  </div>
);

const ReportFooter = () => (
  <div style={{
    padding: '20px 56px',
    borderTop: `1px solid ${T.borderSoft}`,
    background: T.paperOff,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontSize: 13, color: T.ink3,
  }}>
    <span>2 clusters · 1 tension · 1 outlier · 23 supporting submissions in appendix</span>
    <span style={{ display: 'flex', alignItems: 'center', gap: 6, color: T.greenDark, fontWeight: 600 }}>
      Continue to credit assignment
      <Icon d="M5 12h14M12 5l7 7-7 7" size={13} sw={2} />
    </span>
  </div>
);

window.Report = Report;