/** 2x2 Matrix — classic consulting positioning */
function MatrixSlide() {
  const items = [
    { x: 0.78, y: 0.78, label: 'CRAiD', pink: true, size: 18 },
    { x: 0.72, y: 0.32, label: 'Klassische Agenturen', size: 14 },
    { x: 0.28, y: 0.72, label: 'AI-native Tools', size: 14 },
    { x: 0.22, y: 0.22, label: 'Freelancer', size: 14 },
    { x: 0.55, y: 0.48, label: 'Inhouse', size: 14 },
  ];
  return (
    <SlideBase label="07 Matrix">
      <SlideChrome page="07" total="14" section="Positionierung" />
      <div style={mx.body}>
        <div style={mx.left}>
          <span style={mx.eye}>04 — Markt</span>
          <h2 style={mx.h2}>Wo sitzen wir im Wettbewerb?</h2>
          <p style={mx.lead}>
            Zwei Achsen, die für unsere Kund:innen zählen:
            <strong style={{ color: 'var(--fg)' }}> Agentische Tiefe</strong> auf der Y-Achse,
            <strong style={{ color: 'var(--fg)' }}> Design-Qualität</strong> auf der X-Achse.
          </p>
          <div style={mx.legend}>
            <div style={mx.lgRow}><span style={{ ...mx.lgDot, background: 'var(--primary)' }} /><span>CRAiD</span></div>
            <div style={mx.lgRow}><span style={{ ...mx.lgDot, background: 'var(--fg-muted)' }} /><span>Wettbewerb</span></div>
          </div>
        </div>

        <div style={mx.chart}>
          {/* axes */}
          <div style={{ ...mx.axis, ...mx.axisY }} />
          <div style={{ ...mx.axis, ...mx.axisX }} />
          <div style={mx.quadLabelTL}>Premium</div>
          <div style={mx.quadLabelTR}>Leader</div>
          <div style={mx.quadLabelBL}>Commodity</div>
          <div style={mx.quadLabelBR}>Specialist</div>
          <span style={mx.labY}>Agentische Tiefe →</span>
          <span style={mx.labX}>Design-Qualität →</span>

          {items.map((it) => (
            <div key={it.label} style={{
              position: 'absolute',
              left: `calc(${it.x * 100}% - ${it.size}px)`,
              bottom: `calc(${it.y * 100}% - ${it.size}px)`,
            }}>
              <div style={{
                width: it.size * 2, height: it.size * 2, borderRadius: '50%',
                background: it.pink ? 'var(--primary)' : 'var(--fg-muted)',
                opacity: it.pink ? 1 : 0.35,
                boxShadow: it.pink ? '0 0 0 10px rgba(236,22,245,0.12)' : 'none',
              }} />
              <div style={{
                position: 'absolute', left: it.size * 2 + 10, top: it.size - 8,
                fontSize: 12.5, fontWeight: it.pink ? 600 : 400,
                color: it.pink ? 'var(--fg)' : 'var(--fg-muted)',
                whiteSpace: 'nowrap',
              }}>{it.label}</div>
            </div>
          ))}
        </div>
      </div>
    </SlideBase>
  );
}

const mx = {
  body: { position: 'absolute', inset: 0, padding: '104px 64px 64px', display: 'grid', gridTemplateColumns: '340px 1fr', gap: 48 },
  left: { paddingTop: 20 },
  eye: { display: 'block', fontSize: 12, fontWeight: 400, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--primary)', marginBottom: 14 },
  h2: { fontSize: 40, fontWeight: 700, lineHeight: 1.1, margin: '0 0 20px', letterSpacing: '-0.01em' },
  lead: { fontSize: 14, fontWeight: 300, lineHeight: 1.625, color: 'var(--fg-muted)', margin: 0 },
  legend: { marginTop: 28, display: 'flex', flexDirection: 'column', gap: 10 },
  lgRow: { display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--fg-muted)' },
  lgDot: { width: 10, height: 10, borderRadius: '50%' },

  chart: { position: 'relative', border: '1px solid var(--border)', borderRadius: 16, background: '#fff', margin: '20px 0' },
  axis: { position: 'absolute', background: 'var(--border)' },
  axisY: { left: '50%', top: 32, bottom: 32, width: 1 },
  axisX: { left: 32, right: 32, top: '50%', height: 1 },
  quadLabelTL: { position: 'absolute', top: 16, left: 24, fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg-subtle)' },
  quadLabelTR: { position: 'absolute', top: 16, right: 24, fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--primary)', fontWeight: 600 },
  quadLabelBL: { position: 'absolute', bottom: 32, left: 24, fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg-subtle)' },
  quadLabelBR: { position: 'absolute', bottom: 32, right: 24, fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg-subtle)' },
  labY: { position: 'absolute', left: 6, top: '50%', transform: 'translateY(-50%) rotate(-90deg)', transformOrigin: 'left center', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-muted)' },
  labX: { position: 'absolute', bottom: 10, left: '50%', transform: 'translateX(-50%)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-muted)' },
};

window.MatrixSlide = MatrixSlide;