/* Comparisons: 2/3/4 columns + diagrams (2x2, funnel, pyramid) */

/* Two-column compare */
function TwoColumn({ eyebrow, title, left, right, idx, total, layoutLabel }) {
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.title, maxWidth: 1500 }}>{title}</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, marginTop: 80, flex: 1, alignContent: "start" }}>
          {[left, right].map((col, i) => (
            <div key={i} className="mr-card" style={{ background: i === 1 ? "linear-gradient(135deg, var(--coral) 0%, var(--coral-light) 100%)" : "#fff", color: i === 1 ? "#fff" : undefined, border: i === 1 ? "0" : "1px solid var(--border)", boxShadow: i === 1 ? "var(--shadow-coral)" : "var(--shadow-sm)", padding: 56 }}>
              {col.label && (
                <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: i === 1 ? "rgba(255,255,255,0.85)" : "var(--coral)", marginBottom: 24 }}>
                  {col.label}
                </div>
              )}
              <div style={{ fontFamily: "var(--font-heading)", fontSize: TYPE_SCALE.subtitle, fontWeight: 600, lineHeight: 1.2, marginBottom: 28 }}>
                {col.title}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 18 }}>
                {(col.items || []).map((it, j) => (
                  <li key={j} style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.5, display: "grid", gridTemplateColumns: "auto 1fr", gap: 18, alignItems: "baseline", color: i === 1 ? "rgba(255,255,255,0.92)" : undefined }}>
                    <Icon name={i === 1 ? "check" : "minus"} size={28} color={i === 1 ? "#fff" : "var(--muted)"} />
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Two-column"}</LayoutLabel>
    </div>
  );
}

/* Three-card grid (services-style with chips) */
function ThreeCardGrid({ eyebrow, title, items = [], idx, total, layoutLabel }) {
  return (
    <div className="slide bg-light" style={{ position: "relative" }}>
      <Frame>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.title, maxWidth: 1500 }}>{title}</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 36, marginTop: 80, flex: 1 }}>
          {items.map((it, i) => (
            <div key={i} className="mr-card" style={{ padding: 48 }}>
              <div className="chip">
                <Icon name={it.icon || "sparkles"} size={44} color="var(--coral)" strokeWidth={1.75} />
              </div>
              <div style={{ fontFamily: "var(--font-heading)", fontSize: 44, fontWeight: 600, lineHeight: 1.2, marginBottom: 18 }}>
                {it.title}
              </div>
              <p style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.5, color: "var(--muted)", margin: 0 }}>
                {it.body}
              </p>
            </div>
          ))}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Three-card grid"}</LayoutLabel>
    </div>
  );
}

/* Four-quadrant grid */
function FourQuadrant({ eyebrow, title, items = [], idx, total, layoutLabel }) {
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "1fr 1fr", gap: 24, marginTop: 56, flex: 1 }}>
          {items.map((it, i) => (
            <div key={i} className="mr-card" style={{ padding: 40, background: i % 3 === 0 ? "var(--coral-soft)" : "#fff", border: "1px solid var(--border)", boxShadow: "none" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 16 }}>
                <Icon name={it.icon || "sparkles"} size={36} color="var(--coral)" strokeWidth={1.75} />
                <div style={{ fontFamily: "var(--font-heading)", fontSize: 38, fontWeight: 600 }}>{it.title}</div>
              </div>
              <p style={{ fontSize: TYPE_SCALE.small, lineHeight: 1.5, color: "var(--muted)", margin: 0 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Four quadrant"}</LayoutLabel>
    </div>
  );
}

/* 2x2 matrix diagram */
function MatrixTwoByTwo({ eyebrow, title, xLabels = ["Low", "High"], yLabels = ["Low", "High"], xAxis = "Effort", yAxis = "Impact", quadrants = [], idx, total, layoutLabel }) {
  // quadrants: top-left, top-right, bottom-left, bottom-right
  const cellStyle = { padding: 32, display: "flex", flexDirection: "column", justifyContent: "flex-end", border: "1px solid var(--border)" };
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>
        <div style={{ marginTop: 60, display: "grid", gridTemplateColumns: "auto 1fr", gridTemplateRows: "1fr auto", gap: 24, flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", writingMode: "vertical-rl", transform: "rotate(180deg)", fontSize: 26, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>
            {yAxis}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "1fr 1fr", gap: 0, position: "relative", borderRadius: 16, overflow: "hidden" }}>
            {quadrants.slice(0, 4).map((q, i) => {
              const isHi = i === 1; // top-right = sweet spot
              return (
                <div key={i} style={{ ...cellStyle, background: isHi ? "var(--coral-soft)" : "#fff" }}>
                  <div style={{ fontFamily: "var(--font-heading)", fontSize: 32, fontWeight: 600, marginBottom: 8, color: isHi ? "var(--coral)" : "var(--foreground)" }}>{q.title}</div>
                  <div style={{ fontSize: 22, color: "var(--muted)", lineHeight: 1.4 }}>{q.body}</div>
                </div>
              );
            })}
          </div>
          <div />
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", fontSize: 26, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>
            {xAxis}
          </div>
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "2x2 matrix"}</LayoutLabel>
    </div>
  );
}

/* Funnel diagram */
function Funnel({ eyebrow, title, stages = [], idx, total, layoutLabel }) {
  // stages: [{label, body, value}]
  const widths = stages.map((_, i) => 100 - i * (60 / Math.max(1, stages.length - 1)));
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>
        <div style={{ marginTop: 56, display: "flex", flexDirection: "column", alignItems: "center", gap: 14, flex: 1, justifyContent: "center" }}>
          {stages.map((s, i) => {
            const op = 0.16 + (i / Math.max(1, stages.length - 1)) * 0.7;
            return (
              <div key={i} style={{ width: `${widths[i]}%`, display: "flex", alignItems: "center", gap: 32 }}>
                <div style={{ flex: 1, padding: "26px 40px", borderRadius: 14, background: `hsla(8, 85%, 65%, ${op})`, color: i >= stages.length - 2 ? "#fff" : "var(--foreground)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span style={{ fontFamily: "var(--font-heading)", fontSize: 32, fontWeight: 600 }}>{s.label}</span>
                  {s.value && <span style={{ fontSize: 28, fontWeight: 700 }}>{s.value}</span>}
                </div>
                {s.body && <div style={{ width: 280, fontSize: 22, color: "var(--muted)", lineHeight: 1.4 }}>{s.body}</div>}
              </div>
            );
          })}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Funnel"}</LayoutLabel>
    </div>
  );
}

/* Pyramid diagram (top = peak) */
function Pyramid({ eyebrow, title, levels = [], idx, total, layoutLabel }) {
  const n = levels.length;
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>
        <div style={{ marginTop: 56, display: "flex", flexDirection: "column", alignItems: "center", gap: 12, flex: 1, justifyContent: "center" }}>
          {levels.map((s, i) => {
            const w = 30 + (i * 60) / Math.max(1, n - 1);
            const op = 0.85 - i * (0.6 / Math.max(1, n - 1));
            return (
              <div key={i} style={{ width: `${w}%`, padding: "22px 40px", borderRadius: 14, background: `hsla(8, 85%, 65%, ${op})`, color: i < 2 ? "#fff" : "var(--foreground)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32 }}>
                <span style={{ fontFamily: "var(--font-heading)", fontSize: 32, fontWeight: 600 }}>{s.label}</span>
                {s.body && <span style={{ fontSize: 22, opacity: 0.85, textAlign: "right" }}>{s.body}</span>}
              </div>
            );
          })}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Pyramid"}</LayoutLabel>
    </div>
  );
}

Object.assign(window, { TwoColumn, ThreeCardGrid, FourQuadrant, MatrixTwoByTwo, Funnel, Pyramid });