// ─── CASE STUDY PAGE ───────────────────────────────────────────────────────
// Three hero variants, togglable via Tweaks panel.
// Shared structure: Hero → Diensten (chips) → Player → Foto-galerij

const CASE = (window.SPRAAKMAKER_CASES || [])[0]; // fallback

// Load cases from static data file
async function loadCases() {
  return window.SPRAAKMAKER_CASES || [];
}

// Read URL query param
function getQueryParam(key) {
  const p = new URLSearchParams(window.location.search);
  return p.get(key);
}

// ── Shared building blocks ──────────────────────────────────────────────
function ServicesChips({ services, dark = false }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      {services.map((slug, i) => (
        <span key={i} style={{
          padding: '8px 16px',
          background: dark ? 'rgba(255,255,255,0.08)' : 'var(--accent-light)',
          color: dark ? '#fff' : 'var(--accent)',
          border: dark ? '1px solid rgba(255,255,255,0.14)' : '1px solid transparent',
          borderRadius: 100,
          fontSize: 14, fontWeight: 500,
          letterSpacing: '-0.005em',
        }}>{getServiceLabel(slug)}</span>
      ))}
    </div>
  );
}

function SpotifyPlayer({ showId, compact = false }) {
  if (!showId) {
    return (
      <div style={{
        padding: 40, background: 'var(--accent-light)',
        borderRadius: 16, color: 'var(--muted)', textAlign: 'center',
        fontSize: 14,
      }}>Geen Spotify-link beschikbaar</div>
    );
  }
  // Use /video variant — richer embed (video + audio) per user preference
  const height = compact ? 232 : 351;
  return (
    <iframe
      data-testid="embed-iframe"
      src={`https://open.spotify.com/embed/show/${showId}/video?utm_source=generator&theme=0`}
      width="100%" height={height}
      frameBorder="0" allowFullScreen=""
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
      loading="lazy"
      style={{ borderRadius: 12, display: 'block' }}
    />
  );
}

function DescriptionBlock({ text, accent = false }) {
  const paras = text.split('\n\n');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      {paras.map((p, i) => (
        <p key={i} style={{
          fontSize: 18, lineHeight: 1.65,
          color: accent && i === 0 ? 'var(--fg)' : 'var(--muted)',
          fontWeight: accent && i === 0 ? 500 : 400,
          textWrap: 'pretty',
          fontFamily: accent && i === 0 ? 'Plus Jakarta Sans' : 'Inter',
          letterSpacing: accent && i === 0 ? '-0.015em' : 'normal',
        }}>{p}</p>
      ))}
    </div>
  );
}

function PhotoGallery({ photos, variant = 'mosaic' }) {
  const isMobile = useIsMobile();
  if (!photos || photos.length === 0) return null;

  if (variant === 'strip') {
    // horizontal strip
    return (
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : `repeat(${Math.min(photos.length, 3)}, 1fr)`,
        gap: isMobile ? 12 : 16,
      }}>
        {photos.slice(0, isMobile ? 3 : 3).map((src, i) => (
          <div key={i} style={{
            aspectRatio: '4/3', borderRadius: 12, overflow: 'hidden',
            background: 'var(--blush-soft)',
          }}>
            <img src={src} alt="" style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            }} loading="lazy" />
          </div>
        ))}
      </div>
    );
  }

  // mosaic: 1 big + small grid
  const [big, ...rest] = photos;
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr',
      gap: isMobile ? 12 : 16,
    }}>
      <div style={{
        aspectRatio: '4/3', borderRadius: 16, overflow: 'hidden',
        background: 'var(--blush-soft)',
      }}>
        <img src={big} alt="" style={{
          width: '100%', height: '100%', objectFit: 'cover', display: 'block',
        }} loading="lazy" />
      </div>
      <div style={{
        display: 'grid',
        gridTemplateRows: `repeat(${Math.min(rest.length, 3)}, 1fr)`,
        gap: isMobile ? 12 : 16,
      }}>
        {rest.slice(0, 3).map((src, i) => (
          <div key={i} style={{
            aspectRatio: isMobile ? '4/3' : 'auto',
            borderRadius: 16, overflow: 'hidden',
            background: 'var(--blush-soft)',
            minHeight: isMobile ? 0 : 120,
          }}>
            <img src={src} alt="" style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            }} loading="lazy" />
          </div>
        ))}
      </div>
    </div>
  );
}

// ── VARIANT A: Split hero (classic editorial) ───────────────────────────
function HeroSplit({ c }) {
  const isMobile = useIsMobile(900);
  return (
    <section style={{
      padding: isMobile ? '120px 24px 48px' : '160px 48px 80px',
      background: 'var(--bg)',
    }}>
      <div style={{
        maxWidth: 1400, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.1fr 0.9fr',
        gap: isMobile ? 40 : 80,
        alignItems: 'center',
      }}>
        <div>
          <a href="/cases/archive.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontSize: 13, fontWeight: 500, color: 'var(--muted)',
            textDecoration: 'none', marginBottom: 32,
            letterSpacing: '-0.005em',
          }}>
            <span>←</span> Alle podcasts
          </a>
          <p style={{
            fontSize: 12, fontWeight: 700, letterSpacing: '2px',
            textTransform: 'uppercase', color: 'var(--accent)',
            marginBottom: 20,
          }}>{c.client}</p>
          <h1 style={{
            fontFamily: 'Plus Jakarta Sans',
            fontSize: isMobile ? 'clamp(44px, 10vw, 64px)' : 'clamp(56px, 6.5vw, 104px)',
            fontWeight: 500, lineHeight: 0.98, letterSpacing: '-0.035em',
            marginBottom: 32, textWrap: 'balance',
          }}>{c.title}</h1>
          <p className="serif" style={{
            fontSize: isMobile ? 20 : 26, lineHeight: 1.4,
            color: 'var(--muted)', maxWidth: 520, textWrap: 'pretty',
            marginBottom: 40,
          }}>{c.summary}</p>
          {c.externalUrl && (
            <a href={c.externalUrl} target="_blank" rel="noopener" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '14px 24px', background: 'var(--fg)', color: '#fff',
              fontSize: 14, fontWeight: 500, borderRadius: 100,
              textDecoration: 'none', letterSpacing: '-0.005em',
            }}>
              Bezoek {c.client} <span style={{ fontSize: 16 }}>↗</span>
            </a>
          )}
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute', inset: isMobile ? '-20px' : '-40px',
            background: 'var(--blush)', borderRadius: '50%',
            filter: 'blur(60px)', opacity: 0.6, zIndex: 0,
          }} />
          <img src={c.cover} alt={c.title} style={{
            width: '100%', aspectRatio: '1/1', objectFit: 'cover',
            borderRadius: 24, position: 'relative',
            boxShadow: '0 40px 80px -20px rgba(16, 6, 159, 0.25)',
          }} />
        </div>
      </div>
    </section>
  );
}

// ── VARIANT B: Massive typography hero ──────────────────────────────────
function HeroTypo({ c }) {
  const isMobile = useIsMobile(900);
  return (
    <section style={{
      padding: isMobile ? '120px 24px 60px' : '140px 48px 80px',
      background: 'var(--bg)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1600, margin: '0 auto' }}>
        <a href="/cases/archive.html" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 13, fontWeight: 500, color: 'var(--muted)',
          textDecoration: 'none', marginBottom: isMobile ? 32 : 48,
          letterSpacing: '-0.005em',
        }}>
          <span>←</span> Alle podcasts
        </a>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'auto 1fr',
          gap: isMobile ? 32 : 48,
          alignItems: 'flex-end',
          marginBottom: isMobile ? 32 : 48,
        }}>
          <div style={{
            width: isMobile ? 140 : 200, flexShrink: 0,
          }}>
            <img src={c.cover} alt={c.title} style={{
              width: '100%', aspectRatio: '1/1', objectFit: 'cover',
              borderRadius: 16,
              boxShadow: '0 20px 40px -10px rgba(16, 6, 159, 0.2)',
            }} />
          </div>
          <div>
            <p style={{
              fontSize: 12, fontWeight: 700, letterSpacing: '2px',
              textTransform: 'uppercase', color: 'var(--accent)',
              marginBottom: 12,
            }}>Case · {c.client}</p>
            <h1 style={{
              fontFamily: 'Plus Jakarta Sans',
              fontSize: isMobile ? 'clamp(40px, 9vw, 56px)' : 'clamp(64px, 7vw, 128px)',
              fontWeight: 500, lineHeight: 0.9, letterSpacing: '-0.04em',
              textWrap: 'balance', color: 'var(--fg)',
            }}>{c.title}</h1>
          </div>
        </div>

        <p className="serif" style={{
          fontSize: isMobile ? 22 : 32, lineHeight: 1.35,
          color: 'var(--muted)', maxWidth: 860, textWrap: 'pretty',
          paddingTop: isMobile ? 0 : 24,
          borderTop: isMobile ? 'none' : '1px solid var(--border)',
        }}>{c.summary}</p>
      </div>
    </section>
  );
}

// ── VARIANT C: Magazine hero (image-led, blush band) ─────────────────────
function HeroMagazine({ c }) {
  const isMobile = useIsMobile(900);
  const firstPhoto = c.photos?.[0];
  return (
    <section style={{
      paddingTop: isMobile ? 88 : 100,
      background: 'var(--blush-soft)',
      position: 'relative',
    }}>
      {/* Top bar with breadcrumb */}
      <div style={{
        maxWidth: 1600, margin: '0 auto',
        padding: isMobile ? '24px 24px 0' : '32px 48px 0',
      }}>
        <a href="/cases/archive.html" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 13, fontWeight: 500, color: 'var(--muted)',
          textDecoration: 'none',
          letterSpacing: '-0.005em',
        }}>
          <span>←</span> Alle podcasts
        </a>
      </div>

      <div style={{
        maxWidth: 1600, margin: '0 auto',
        padding: isMobile ? '32px 24px 48px' : '48px 48px 0',
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 32 : 64,
          alignItems: 'center',
          minHeight: isMobile ? 'auto' : 520,
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              padding: '8px 16px 8px 8px', background: '#fff',
              borderRadius: 100, marginBottom: 32,
            }}>
              <img src={c.cover} alt="" style={{
                width: 36, height: 36, borderRadius: 8, objectFit: 'cover',
              }} />
              <span style={{
                fontSize: 13, fontWeight: 600, color: 'var(--fg)',
                letterSpacing: '-0.005em',
              }}>{c.client}</span>
            </div>
            <h1 style={{
              fontFamily: 'Plus Jakarta Sans',
              fontSize: isMobile ? 'clamp(40px, 9vw, 60px)' : 'clamp(56px, 5.5vw, 88px)',
              fontWeight: 500, lineHeight: 1, letterSpacing: '-0.035em',
              marginBottom: 28, textWrap: 'balance', color: 'var(--fg)',
            }}>{c.title}</h1>
            <p style={{
              fontSize: isMobile ? 18 : 20, lineHeight: 1.55,
              color: 'var(--fg)', maxWidth: 520, textWrap: 'pretty',
              opacity: 0.8,
            }}>{c.summary}</p>
          </div>
          {firstPhoto && (
            <div style={{
              aspectRatio: isMobile ? '4/3' : '5/6',
              borderRadius: 24, overflow: 'hidden',
              boxShadow: '0 40px 80px -20px rgba(0,0,0,0.25)',
            }}>
              <img src={firstPhoto} alt="" style={{
                width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              }} />
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ── Body sections (shared across variants) ─────────────────────────────
function ServicesSection({ c, dark = true }) {
  const isMobile = useIsMobile();
  return (
    <section style={{
      padding: isMobile ? '56px 24px' : '80px 48px',
      background: dark ? 'var(--accent)' : 'var(--bg-alt)',
      borderTop: dark ? 'none' : '1px solid var(--border)',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '280px 1fr',
          gap: isMobile ? 24 : 80,
          alignItems: 'flex-start',
        }}>
          <div>
            <p style={{
              fontSize: 12, fontWeight: 700, letterSpacing: '2px',
              textTransform: 'uppercase',
              color: dark ? 'rgba(255,255,255,0.7)' : 'var(--accent)',
              marginBottom: 8,
            }}>Wat we deden</p>
            <h3 style={{
              fontFamily: 'Plus Jakarta Sans',
              fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em',
              color: dark ? '#fff' : 'var(--fg)',
            }}>Diensten</h3>
          </div>
          <ServicesChips services={c.services} dark={dark} />
        </div>
      </div>
    </section>
  );
}

function StorySection({ c }) {
  const isMobile = useIsMobile();
  return (
    <section style={{
      padding: isMobile ? '64px 24px' : '100px 48px',
      background: 'var(--bg-alt)',
    }}>
      <div style={{
        maxWidth: 820, margin: '0 auto',
      }}>
        <p style={{
          fontSize: 12, fontWeight: 700, letterSpacing: '2px',
          textTransform: 'uppercase', color: 'var(--accent)',
          marginBottom: 24,
        }}>Over deze podcast</p>
        <DescriptionBlock text={c.description} accent />
      </div>
    </section>
  );
}

function PlayerSection({ c }) {
  const isMobile = useIsMobile();
  return (
    <section style={{
      padding: isMobile ? '64px 24px' : '100px 48px',
      background: 'var(--bg)',
      color: 'var(--fg)',
    }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'flex-end', marginBottom: isMobile ? 24 : 40,
          flexWrap: 'wrap', gap: 16,
        }}>
          <div>
            <p style={{
              fontSize: 12, fontWeight: 700, letterSpacing: '2px',
              textTransform: 'uppercase', color: 'var(--accent)',
              marginBottom: 12,
            }}>Luister nu</p>
            <h3 style={{
              fontFamily: 'Plus Jakarta Sans',
              fontSize: isMobile ? 28 : 40, fontWeight: 500,
              letterSpacing: '-0.025em', textWrap: 'balance',
            }}>{c.title}</h3>
          </div>
          {c.externalUrl && (
            <a href={`https://open.spotify.com/show/${c.spotifyShowId}`} target="_blank" rel="noopener" style={{
              fontSize: 14, fontWeight: 500, color: 'var(--accent)',
              textDecoration: 'underline', textUnderlineOffset: 4,
            }}>Open in Spotify ↗</a>
          )}
        </div>
        <SpotifyPlayer showId={c.spotifyShowId} />
      </div>
    </section>
  );
}

function GallerySection({ c, variant = 'mosaic' }) {
  const isMobile = useIsMobile();
  if (!c.photos || c.photos.length === 0) return null;
  return (
    <section style={{
      padding: isMobile ? '64px 24px' : '100px 48px',
      background: 'var(--bg)',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ marginBottom: isMobile ? 32 : 48, maxWidth: 600 }}>
          <p style={{
            fontSize: 12, fontWeight: 700, letterSpacing: '2px',
            textTransform: 'uppercase', color: 'var(--accent)',
            marginBottom: 12,
          }}>In de studio</p>
          <h3 style={{
            fontFamily: 'Plus Jakarta Sans',
            fontSize: isMobile ? 28 : 40, fontWeight: 500,
            letterSpacing: '-0.025em', textWrap: 'balance',
          }}>Achter de schermen</h3>
        </div>
        <PhotoGallery photos={c.photos} variant={variant} />
      </div>
    </section>
  );
}

// ── Related cases teaser ─────────────────────────────────────────────────
function RelatedCases({ currentId, allCases }) {
  const isMobile = useIsMobile();
  const others = (allCases || []).filter(c => c.id !== currentId).slice(0, 4);
  return (
    <section style={{
      padding: isMobile ? '80px 24px' : '120px 48px',
      background: 'var(--bg-alt)',
      borderTop: '1px solid var(--border)',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'flex-end', marginBottom: isMobile ? 32 : 56,
          flexWrap: 'wrap', gap: 24,
        }}>
          <h3 style={{
            fontFamily: 'Plus Jakarta Sans',
            fontSize: isMobile ? 32 : 48, fontWeight: 500,
            letterSpacing: '-0.025em', textWrap: 'balance', maxWidth: 600,
          }}>Meer podcasts die we maakten</h3>
          <a href="/cases/archive.html" style={{
            fontSize: 14, fontWeight: 500, color: 'var(--accent)',
            textDecoration: 'none',
          }}>Alle podcasts →</a>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          gap: isMobile ? 16 : 24,
        }}>
          {others.map(o => (
            <a key={o.id} href={`case.html?id=${o.id}`} style={{
              textDecoration: 'none', color: 'inherit', display: 'block',
            }}>
              <div style={{
                aspectRatio: '1/1', borderRadius: 12, overflow: 'hidden',
                marginBottom: 14, background: 'var(--blush-soft)',
              }}>
                <img src={o.cover} alt="" style={{
                  width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                }} />
              </div>
              <p style={{
                fontSize: 10, fontWeight: 700, letterSpacing: '1.5px',
                textTransform: 'uppercase', color: 'var(--accent)',
                marginBottom: 4,
              }}>{o.client}</p>
              <h4 style={{
                fontFamily: 'Plus Jakarta Sans',
                fontSize: 16, fontWeight: 500, letterSpacing: '-0.02em',
                lineHeight: 1.2,
              }}>{o.title}</h4>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── TWEAKS PANEL ─────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "B",
  "caseId": "7people-the-7people-podcast"
}/*EDITMODE-END*/;

function TweaksPanel({ editActive, state, setState, allCases }) {
  if (!editActive) return null;
  const variants = [
    { k: 'A', label: 'Split hero', desc: 'Tegel + titel naast elkaar' },
    { k: 'B', label: 'Typo hero', desc: 'Massive titel, kleine tegel' },
    { k: 'C', label: 'Magazine', desc: 'Foto-led, zachte achtergrond' },
  ];
  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 9999,
      background: '#fff', borderRadius: 16,
      boxShadow: '0 20px 60px -10px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05)',
      padding: 20, width: 300,
      fontFamily: 'Inter',
    }}>
      <div style={{
        fontFamily: 'Plus Jakarta Sans', fontSize: 14, fontWeight: 700,
        letterSpacing: '-0.01em', marginBottom: 4,
      }}>Tweaks</div>
      <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 16 }}>
        Vergelijk hero-varianten & case
      </div>

      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 8 }}>Hero-variant</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 18 }}>
        {variants.map(v => (
          <button key={v.k} onClick={() => setState({ ...state, variant: v.k })} style={{
            padding: '10px 12px', textAlign: 'left',
            background: state.variant === v.k ? 'var(--accent-light)' : 'var(--bg)',
            border: `1px solid ${state.variant === v.k ? 'var(--accent)' : 'var(--border)'}`,
            borderRadius: 8, cursor: 'pointer', fontFamily: 'inherit',
          }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: state.variant === v.k ? 'var(--accent)' : 'var(--fg)' }}>
              {v.k} · {v.label}
            </div>
            <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>{v.desc}</div>
          </button>
        ))}
      </div>

      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 8 }}>Case</div>
      <select value={state.caseId}
        onChange={e => setState({ ...state, caseId: e.target.value })}
        style={{
          width: '100%', padding: '10px 12px',
          border: '1px solid var(--border)', borderRadius: 8,
          background: 'var(--bg)', fontFamily: 'inherit', fontSize: 13,
          color: 'var(--fg)',
        }}>
        {(allCases || []).map(c => (
          <option key={c.id} value={c.id}>{c.client} — {c.title}</option>
        ))}
      </select>
    </div>
  );
}

// ── PAGE ──────────────────────────────────────────────────────────────────
function CaseStudyPage() {
  const [scrolled, setScrolled] = React.useState(false);
  const [state, setState] = React.useState(TWEAK_DEFAULTS);
  const [editActive, setEditActive] = React.useState(false);
  const [allCases, setAllCases] = React.useState(null);

  React.useEffect(() => {
    loadCases().then(list => {
      setAllCases(list);
      const urlId = getQueryParam('id');
      if (urlId && list.find(c => c.id === urlId)) {
        setState(prev => ({ ...prev, caseId: urlId }));
      } else if (!list.find(c => c.id === TWEAK_DEFAULTS.caseId) && list.length > 0) {
        setState(prev => ({ ...prev, caseId: list[0].id }));
      }
    });
  }, []);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Tweaks wiring
  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setEditActive(true);
      if (e.data?.type === '__deactivate_edit_mode') setEditActive(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  React.useEffect(() => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: state }, '*');
  }, [state]);

  if (!allCases) {
    return <div style={{ padding: 80, textAlign: 'center', color: 'var(--muted)' }}>Laden…</div>;
  }
  if (allCases.length === 0) {
    return <div style={{ padding: 80, textAlign: 'center', color: 'var(--muted)' }}>Nog geen cases gepubliceerd.</div>;
  }

  const c = allCases.find(c => c.id === state.caseId) || allCases[0];

  let Hero;
  if (state.variant === 'B') Hero = HeroTypo;
  else if (state.variant === 'C') Hero = HeroMagazine;
  else Hero = HeroSplit;

  return (
    <>
      <SiteNav scrolled={scrolled} />
      <Hero c={c} />
      <StorySection c={c} />
      <ServicesSection c={c} />
      <PlayerSection c={c} />
      <GallerySection c={c} variant={state.variant === 'C' ? 'mosaic' : 'mosaic'} />
      <RelatedCases currentId={c.id} allCases={allCases} />
      <SiteFooter />
      <TweaksPanel editActive={editActive} state={state} setState={setState} allCases={allCases} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CaseStudyPage />);
