// templates.jsx — The 6 reusable templates for the deck system.
// Each template is a function component that takes a `slide` data object
// and a `scheme` (color tokens). They render full-bleed 1920×1080 slides.

// helper: render a multi-line title (split on \n, insert <br/>)
function renderTitle(title) {
  if (typeof title !== 'string') return title;
  const lines = title.split('\n');
  return lines.map((l, i) => (
    <React.Fragment key={i}>{l}{i < lines.length - 1 && <br/>}</React.Fragment>
  ));
}

// Common shell — every template wraps its content in this base.
function SlideShell({ scheme, hideBottomGap = false, children }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: scheme.bgGradient || scheme.bg,
      overflow: 'hidden',
    }}>
      {children}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// TEMPLATE A — COVER / DIVIDER
//   • Huge H1 title left-aligned
//   • One line subtitle
//   • Either: full-bleed hero photo on the right half, OR pure color
//   • Optional Pill button
//   • Use for: bucket intros, section dividers
// ═══════════════════════════════════════════════════════════════════════════
function TemplateA({ slide, scheme }) {
  const {
    bucket, kicker, title, subtitle, cta, image, imagePos = 'center',
    layout = 'split',   // 'split' | 'full' | 'color'
  } = slide;
  return (
    <SlideShell scheme={scheme}>
      {/* Photo (split or full bleed) */}
      {image && layout !== 'color' && (
        <div style={{
          position: 'absolute',
          ...(layout === 'split'
            ? { left: '46%', top: 160, right: 80, bottom: 220 }
            : { inset: 0 }),
          borderRadius: layout === 'split' ? Tokens.radius.xxl : 0,
          overflow: 'hidden',
          backgroundImage: `url(${image})`,
          backgroundSize: 'cover',
          backgroundPosition: imagePos,
        }}>
          {layout === 'full' && (
            <div style={{
              position: 'absolute', inset: 0,
              background: `linear-gradient(90deg, ${scheme.bg} 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%)`,
            }}/>
          )}
        </div>
      )}

      {/* Text block */}
      <div style={{
        position: 'absolute',
        left: 80, top: 200,
        width: layout === 'split' ? 760 : 1000,
      }}>
        {kicker && (
          <div style={{
            fontFamily: Tokens.fontMono, fontSize: 13,
            color: scheme.accent, letterSpacing: '0.28em',
            textTransform: 'uppercase',
            marginBottom: 24,
            fontWeight: Tokens.weight.semibold,
          }}>
            {kicker}
          </div>
        )}

        <div style={{
          fontFamily: Tokens.fontDisplay,
          fontSize: title.length > 26 ? 84 : title.length > 14 ? 110 : 134,
          fontWeight: Tokens.weight.black,
          color: scheme.text,
          letterSpacing: '-0.025em',
          textTransform: 'uppercase',
          lineHeight: 0.93,
        }}>
          {renderTitle(title)}
        </div>

        {subtitle && (
          <div style={{
            marginTop: 32,
            fontFamily: Tokens.fontDisplay,
            fontSize: 22, fontWeight: Tokens.weight.regular,
            color: scheme.textDim,
            letterSpacing: '0em',
            lineHeight: 1.45,
            maxWidth: 640,
          }}>
            {subtitle}
          </div>
        )}

        {cta && (
          <div style={{ marginTop: 36 }}>
            <Pill>{cta}</Pill>
          </div>
        )}
      </div>

      {/* Bucket tag in upper-left of content area */}
      {bucket && (
        <div style={{
          position: 'absolute', left: 80, top: 154,
          fontFamily: Tokens.fontMono, fontSize: 12,
          color: scheme.text, letterSpacing: '0.28em',
          textTransform: 'uppercase',
          padding: '6px 12px',
          background: 'rgba(255,255,255,0.08)',
          border: `1px solid ${Tokens.inkLine}`,
          borderRadius: Tokens.radius.sm,
          whiteSpace: 'nowrap',
        }}>
          {bucket}
        </div>
      )}
    </SlideShell>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// TEMPLATE B — HERO STAT
//   • Giant single number, centered, with smaller +/$/% modifier
//   • 1–2 line caption beneath
//   • Source citation
//   • Use for: dramatizing one number
// ═══════════════════════════════════════════════════════════════════════════
function TemplateB({ slide, scheme }) {
  const { kicker, number, prefix, suffix, caption, source } = slide;
  return (
    <SlideShell scheme={scheme}>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        padding: '180px 80px 220px',
      }}>
        {kicker && (
          <div style={{
            fontFamily: Tokens.fontMono, fontSize: 14,
            color: scheme.accent, letterSpacing: '0.32em',
            textTransform: 'uppercase',
            marginBottom: 28,
            fontWeight: Tokens.weight.semibold,
          }}>
            {kicker}
          </div>
        )}

        {/* The number — display 'inline-flex' so prefix/suffix align nicely */}
        <div style={{
          display: 'inline-flex',
          alignItems: 'baseline',
          fontFamily: Tokens.fontDisplay,
          fontWeight: Tokens.weight.black,
          color: scheme.accent,
          letterSpacing: '-0.05em',
          lineHeight: 0.9,
        }}>
          {prefix && (
            <span style={{ fontSize: 100, marginRight: 12, fontWeight: Tokens.weight.bold }}>{prefix}</span>
          )}
          <span style={{ fontSize: 280 }}>{number}</span>
          {suffix && (
            <span style={{ fontSize: 100, marginLeft: 12, fontWeight: Tokens.weight.bold }}>{suffix}</span>
          )}
        </div>

        {caption && (
          <div style={{
            marginTop: 32,
            maxWidth: 900, textAlign: 'center',
            fontFamily: Tokens.fontDisplay,
            fontSize: 32, fontWeight: Tokens.weight.medium,
            color: scheme.text,
            letterSpacing: '-0.015em', lineHeight: 1.25,
          }}>
            {caption}
          </div>
        )}

        {source && (
          <div style={{ marginTop: 24 }}>
            <SourceCite>{source}</SourceCite>
          </div>
        )}
      </div>
    </SlideShell>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// TEMPLATE C — EDITORIAL CONSTELLATION
//   • Center: BIG number with caption
//   • Around it: 6–10 scattered thumbnails at varying heights/sizes/rotations
//   • Paragraph below
//   • Use for: "these N things produced X" story moments
// ═══════════════════════════════════════════════════════════════════════════
function TemplateC({ slide, scheme }) {
  const { kicker, number, prefix, suffix, caption, body, source, thumbs = [] } = slide;

  return (
    <SlideShell scheme={scheme}>
      <div style={{
        position: 'absolute', inset: '140px 80px 220px',
      }}>
        {/* Constellation — thumbnails scattered around the center.
            Positions are normalized 0..1 of the inner box. */}
        {thumbs.map((t, i) => (
          <div key={i} style={{
            position: 'absolute',
            left: `${t.x * 100}%`,
            top: `${t.y * 100}%`,
            transform: `translate(-50%, -50%) rotate(${t.rotate || 0}deg)`,
            width: t.w || 150,
            height: t.h || 100,
          }}>
            <MediaItem
              src={t.src} w={t.w || 150} h={t.h || 100}
              rotate={0} scheme={scheme}
              style={{
                opacity: t.opacity != null ? t.opacity : 0.85,
                filter: t.blur ? `blur(${t.blur}px)` : 'none',
                boxShadow: '0 16px 40px rgba(0,0,0,0.55)',
              }}
            />
          </div>
        ))}

        {/* Center stat block (rendered AFTER thumbs so it's on top) */}
        <div style={{
          position: 'absolute',
          left: '50%', top: '38%',
          transform: 'translate(-50%, -50%)',
          textAlign: 'center',
          pointerEvents: 'none',
          textShadow: `0 12px 60px ${scheme.bg}`,
        }}>
          {kicker && (
            <div style={{
              fontFamily: Tokens.fontMono, fontSize: 13,
              color: scheme.accent, letterSpacing: '0.3em',
              textTransform: 'uppercase',
              marginBottom: 18,
              fontWeight: Tokens.weight.semibold,
            }}>
              {kicker}
            </div>
          )}

          <div style={{
            display: 'inline-flex',
            alignItems: 'baseline',
            fontFamily: Tokens.fontDisplay,
            fontWeight: Tokens.weight.black,
            color: scheme.accent,
            letterSpacing: '-0.05em',
            lineHeight: 0.9,
          }}>
            {prefix && <span style={{ fontSize: 72, marginRight: 10, fontWeight: Tokens.weight.bold }}>{prefix}</span>}
            <span style={{ fontSize: 200 }}>{number}</span>
            {suffix && <span style={{ fontSize: 72, marginLeft: 10, fontWeight: Tokens.weight.bold }}>{suffix}</span>}
          </div>

          {caption && (
            <div style={{
              marginTop: 20,
              fontFamily: Tokens.fontDisplay,
              fontSize: 22, fontWeight: Tokens.weight.semibold,
              color: scheme.text,
              letterSpacing: '0em',
              textTransform: 'uppercase',
            }}>{caption}</div>
          )}
        </div>

        {/* Body paragraph at the bottom */}
        {body && (
          <div style={{
            position: 'absolute',
            left: '50%', bottom: 40,
            transform: 'translateX(-50%)',
            maxWidth: 900, textAlign: 'center',
            fontFamily: Tokens.fontDisplay,
            fontSize: 18, color: scheme.textDim,
            lineHeight: 1.5,
          }}>
            {body}
          </div>
        )}

        {source && (
          <div style={{ position: 'absolute', right: 0, bottom: 0 }}>
            <SourceCite>{source}</SourceCite>
          </div>
        )}
      </div>
    </SlideShell>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// TEMPLATE D — MULTI-CARD GRID
//   • 2xN or 3xN cards
//   • Each card: half image + half color panel with bold uppercase title
//   • Panel colors vary
//   • Use for: "the 6 themes", "the 4 actions"
// ═══════════════════════════════════════════════════════════════════════════
function TemplateD({ slide, scheme, onJump }) {
  const { title, subtitle, cards = [], cols = 3 } = slide;
  return (
    <SlideShell scheme={scheme}>
      {/* Heading */}
      <div style={{
        position: 'absolute', left: 80, right: 80, top: 150,
      }}>
        <div style={{
          fontFamily: Tokens.fontDisplay,
          fontSize: 64, fontWeight: Tokens.weight.black,
          color: scheme.text,
          letterSpacing: '-0.025em',
          textTransform: 'uppercase',
          lineHeight: 0.95,
        }}>{title}</div>
        {subtitle && (
          <div style={{
            marginTop: 16,
            fontFamily: Tokens.fontDisplay,
            fontSize: 18, fontWeight: Tokens.weight.regular,
            color: scheme.textDim, maxWidth: 800,
            lineHeight: 1.5,
          }}>{subtitle}</div>
        )}
      </div>

      {/* Cards grid — hover scale via thumb-card-outer/inner classes,
          plus optional click-to-jump if card has slideIdx */}
      <div style={{
        position: 'absolute',
        left: 80, right: 80, top: 350, bottom: 220,
        display: 'grid',
        gridTemplateColumns: `repeat(${cols}, 1fr)`,
        gap: 18,
      }}>
        {cards.map((c, i) => {
          const p = CARD_PANELS[c.panel || 'purpleMid'];
          const clickable = c.slideIdx != null;
          return (
            <div key={i}
              className="thumb-card-outer"
              onClick={() => { if (clickable && onJump) onJump(c.slideIdx); }}
              style={{
                cursor: clickable ? 'pointer' : 'default',
                position: 'relative',
              }}>
              <div className="thumb-card-inner" style={{
                display: 'flex',
                borderRadius: Tokens.radius.xl,
                overflow: 'hidden',
                height: '100%',
                boxShadow: '0 14px 40px rgba(0,0,0,0.45)',
                position: 'relative',
              }}
                onMouseEnter={(e) => { if (clickable) e.currentTarget.style.boxShadow = `0 24px 70px rgba(0,0,0,0.65), 0 0 0 2px ${scheme.accent}`; }}
                onMouseLeave={(e) => { if (clickable) e.currentTarget.style.boxShadow = '0 14px 40px rgba(0,0,0,0.45)'; }}
              >
                <div style={{
                  flex: 1,
                  backgroundImage: c.image ? `url(${c.image})` : 'none',
                  backgroundSize: 'cover',
                  backgroundPosition: c.imagePos || 'center',
                  backgroundColor: Tokens.bgSurface,
                }}/>
                <div style={{
                  flex: 1.05,
                  background: p.fill,
                  color: p.text,
                  padding: '24px 26px',
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                }}>
                  <div style={{
                    fontFamily: Tokens.fontMono, fontSize: 11,
                    letterSpacing: '0.28em', opacity: 0.75,
                    textTransform: 'uppercase',
                  }}>{c.kicker || `0${i + 1}`}</div>
                  <div style={{
                    fontFamily: Tokens.fontDisplay,
                    fontSize: 28, fontWeight: Tokens.weight.extrabold,
                    letterSpacing: '-0.02em',
                    lineHeight: 1.0,
                    textTransform: 'uppercase',
                  }}>{c.title}</div>
                  {c.note && (
                    <div style={{
                      fontFamily: Tokens.fontDisplay,
                      fontSize: 13, fontWeight: Tokens.weight.regular,
                      opacity: 0.8, lineHeight: 1.4,
                    }}>{c.note}</div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </SlideShell>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// TEMPLATE E — HORIZONTAL CAROUSEL (multi-item)
//   • 5–6 cards in a row
//   • Each card: thumbnail + "0X/0Y" + short title
//   • Arrow indicators
//   • Use for: timelines, lists, "all European players"
// ═══════════════════════════════════════════════════════════════════════════
function TemplateE({ slide, scheme }) {
  const { title, subtitle, items = [] } = slide;
  const COLS = 5;
  const visibleItems = items.slice(0, COLS + 1); // last one peeks
  return (
    <SlideShell scheme={scheme}>
      <div style={{
        position: 'absolute', left: 80, right: 80, top: 150,
      }}>
        <div style={{
          fontFamily: Tokens.fontDisplay,
          fontSize: 64, fontWeight: Tokens.weight.black,
          color: scheme.text,
          letterSpacing: '-0.025em',
          textTransform: 'uppercase',
          lineHeight: 0.95,
        }}>{title}</div>
        {subtitle && (
          <div style={{
            marginTop: 16,
            fontFamily: Tokens.fontDisplay,
            fontSize: 18, fontWeight: Tokens.weight.regular,
            color: scheme.textDim, maxWidth: 800,
            lineHeight: 1.5,
          }}>{subtitle}</div>
        )}
      </div>

      {/* Cards row */}
      <div style={{
        position: 'absolute',
        left: 80, right: 0, top: 410, bottom: 220,
        display: 'grid',
        gridTemplateColumns: `repeat(${COLS}, 240px) 100px`,
        gap: 20,
        overflow: 'hidden',
      }}>
        {visibleItems.map((it, i) => {
          const isPeek = i === COLS;
          return (
            <div key={i} style={{
              borderRadius: Tokens.radius.lg,
              overflow: 'hidden',
              position: 'relative',
              outline: it.hi ? `2px solid ${scheme.accent}` : `1px solid ${Tokens.inkLine}`,
              outlineOffset: it.hi ? 2 : 0,
              opacity: isPeek ? 0.35 : 1,
            }}>
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage: it.image ? `url(${it.image})` : 'none',
                backgroundSize: 'cover',
                backgroundPosition: it.imagePos || 'center',
                backgroundColor: Tokens.bgSurface,
              }}/>
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%)',
              }}/>
              <div style={{
                position: 'absolute', left: 14, top: 14,
                display: 'flex', alignItems: 'center', gap: 8,
                fontFamily: Tokens.fontMono, fontSize: 11,
                color: Tokens.ink, letterSpacing: '0.24em',
                fontWeight: Tokens.weight.semibold,
              }}>
                <span aria-hidden="true" style={{
                  width: 6, height: 6,
                  background: it.hi ? scheme.accent : scheme.accentBold,
                }}/>
                {String(i + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}
              </div>
              <div style={{
                position: 'absolute', left: 16, right: 16, bottom: 16,
                fontFamily: Tokens.fontDisplay,
                fontSize: 18, fontWeight: Tokens.weight.bold,
                color: Tokens.ink,
                letterSpacing: '-0.01em',
                lineHeight: 1.15,
              }}>
                {it.title}
                {it.sub && (
                  <div style={{
                    fontSize: 12, fontWeight: Tokens.weight.regular,
                    color: Tokens.inkSoft, marginTop: 4, letterSpacing: 0,
                    textTransform: 'uppercase',
                  }}>{it.sub}</div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {/* Sliding indicator */}
      <div style={{
        position: 'absolute',
        left: 80, top: 380,
        right: 80,
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <div style={{
          fontFamily: Tokens.fontMono, fontSize: 12,
          color: scheme.textDim, letterSpacing: '0.22em',
          textTransform: 'uppercase',
        }}>
          Scroll →
        </div>
        <div style={{
          flex: 1, height: 1, background: Tokens.inkLine,
        }}/>
        <div style={{
          fontFamily: Tokens.fontMono, fontSize: 12,
          color: scheme.textDim, letterSpacing: '0.22em',
        }}>
          {String(items.length).padStart(2, '0')} items
        </div>
      </div>
    </SlideShell>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// TEMPLATE F — DENSE EDITORIAL (text + figure + image)
//   • 2-col: left text (3-4 short blocks), right image/chart
//   • Source citation
//   • Corner brackets on the figure
//   • Use for: deep-dive on a single action
// ═══════════════════════════════════════════════════════════════════════════
function TemplateF({ slide, scheme }) {
  const { kicker, title, blocks = [], image, imagePos = 'center', figureCaption, source } = slide;
  return (
    <SlideShell scheme={scheme}>
      {/* Heading row */}
      <div style={{
        position: 'absolute', left: 80, top: 150,
        maxWidth: 1300,
      }}>
        {kicker && (
          <div style={{
            fontFamily: Tokens.fontMono, fontSize: 13,
            color: scheme.accent, letterSpacing: '0.28em',
            textTransform: 'uppercase',
            marginBottom: 18,
            fontWeight: Tokens.weight.semibold,
          }}>{kicker}</div>
        )}
        <div style={{
          fontFamily: Tokens.fontDisplay,
          fontSize: title.length > 30 ? 52 : 64,
          fontWeight: Tokens.weight.black,
          color: scheme.text,
          letterSpacing: '-0.025em',
          textTransform: 'uppercase',
          lineHeight: 0.95,
        }}>{title}</div>
      </div>

      {/* 2-col body */}
      <div style={{
        position: 'absolute',
        left: 80, right: 80, top: 360, bottom: 250,
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 60,
      }}>
        {/* Left: text blocks */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 24,
          paddingRight: 8,
        }}>
          {blocks.map((b, i) => (
            <div key={i} style={{
              borderLeft: `2px solid ${scheme.accent}`,
              paddingLeft: 18,
            }}>
              {b.h && (
                <div style={{
                  fontFamily: Tokens.fontMono, fontSize: 11,
                  color: scheme.accent, letterSpacing: '0.22em',
                  textTransform: 'uppercase',
                  fontWeight: Tokens.weight.semibold,
                  marginBottom: 8,
                }}>{String(i + 1).padStart(2, '0')} · {b.h}</div>
              )}
              <div style={{
                fontFamily: Tokens.fontDisplay,
                fontSize: 15, fontWeight: Tokens.weight.regular,
                color: scheme.text,
                lineHeight: 1.55,
              }}>{b.p}</div>
            </div>
          ))}
        </div>

        {/* Right: image, framed with corner brackets, figureCaption pinned
            INSIDE the image so it stops touching the bottom edge of nothing. */}
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute', inset: 24,
            borderRadius: Tokens.radius.lg,
            overflow: 'hidden',
            backgroundImage: image ? `url(${image})` : 'none',
            backgroundSize: 'cover',
            backgroundPosition: imagePos,
            backgroundColor: Tokens.bgSurface,
          }}>
            {figureCaption && (
              <>
                {/* Dark gradient to keep caption legible against the photo */}
                <div style={{
                  position: 'absolute', left: 0, right: 0, bottom: 0,
                  height: 90,
                  background: 'linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%)',
                  pointerEvents: 'none',
                }}/>
                <div style={{
                  position: 'absolute',
                  left: 18, right: 18, bottom: 14,
                  fontFamily: Tokens.fontMono, fontSize: 11,
                  color: Tokens.ink, letterSpacing: '0.2em',
                  textTransform: 'uppercase',
                  fontWeight: Tokens.weight.semibold,
                }}>{figureCaption}</div>
              </>
            )}
          </div>
          <CornerBrackets color={scheme.brackets} size={56} thickness={2.5}/>
        </div>
      </div>

      {/* Source citation — anchored low-right with breathing room from image (≥ 60px) */}
      {source && (
        <div style={{ position: 'absolute', right: 80, bottom: 160, whiteSpace: 'nowrap' }}>
          <SourceCite>{source}</SourceCite>
        </div>
      )}
    </SlideShell>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// HERO HOME — the entry point. Uses the Netflix Effect layout:
//   • Hero card with image + title + STORY 01 + read more pill
//   • Stat card on the right with ring
//   • The bottom story carousel is rendered globally by the app shell
// ═══════════════════════════════════════════════════════════════════════════
function TemplateHero({ slide, scheme }) {
  const { tag, storyNum, title, subtitle, stat, statCaption, image, imagePos = 'center' } = slide;
  return (
    <SlideShell scheme={scheme}>
      {/* Hero card */}
      <div style={{
        position: 'absolute',
        left: 80, right: 80, top: 130,
        height: 600,
        borderRadius: Tokens.radius.xxl,
        overflow: 'hidden',
        boxShadow: '0 30px 90px rgba(0,0,0,0.6)',
      }}>
        {/* BG */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(${image})`,
          backgroundSize: 'cover',
          backgroundPosition: imagePos,
        }}/>
        {/* Gradient overlay for text legibility */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(90deg, rgba(8,8,14,0.92) 0%, rgba(8,8,14,0.55) 35%, rgba(8,8,14,0.15) 65%, rgba(8,8,14,0.85) 100%)',
        }}/>

        {/* Mediaset Infinity logo — top-left of hero card */}
        <img src={__a("infinity-logo")} alt="Mediaset Infinity"
          style={{
            position: 'absolute', top: 28, left: 32,
            height: 36,
            filter: 'brightness(0) invert(1)',
            opacity: 0.95,
          }}/>

        {/* Show tag — moved down so it doesn't collide with the Infinity logo */}
        {tag && (
          <div style={{
            position: 'absolute', top: 80, left: 32,
            padding: '8px 16px',
            background: 'rgba(20,20,28,0.7)',
            border: `1px solid ${Tokens.inkLine}`,
            borderRadius: Tokens.radius.sm,
            fontFamily: Tokens.fontDisplay, fontSize: 13,
            fontWeight: Tokens.weight.semibold,
            color: Tokens.ink, letterSpacing: '0.02em',
            backdropFilter: 'blur(12px)',
          }}>{tag}</div>
        )}

        {/* Left: STORY + title + subtitle + Read more */}
        <div style={{
          position: 'absolute',
          left: 56, top: 140,
          width: 720,
        }}>
          {storyNum != null && (
            <div style={{ marginBottom: 18 }}>
              <StoryLabel num={storyNum} color={scheme.storyLabel}/>
            </div>
          )}
          <div style={{
            fontFamily: Tokens.fontDisplay,
            fontSize: title.length > 26 ? 64 : 84,
            fontWeight: Tokens.weight.black,
            color: Tokens.ink,
            letterSpacing: '-0.02em',
            textTransform: 'uppercase',
            lineHeight: 0.94,
          }}>{renderTitle(title)}</div>
          {subtitle && (
            <div style={{
              marginTop: 22,
              fontFamily: Tokens.fontDisplay,
              fontSize: 18, fontWeight: Tokens.weight.regular,
              color: Tokens.inkDim,
              lineHeight: 1.5,
              maxWidth: 560,
            }}>{subtitle}</div>
          )}
          <div style={{ marginTop: 32 }}>
            <Pill>Read more</Pill>
          </div>
        </div>

        {/* Right: stat card */}
        {stat && (
          <div style={{
            position: 'absolute',
            right: 56, top: '50%',
            transform: 'translateY(-50%)',
            width: 360, height: 380,
            borderRadius: Tokens.radius.xl,
            background: 'rgba(20,20,30,0.55)',
            border: `1px solid ${Tokens.inkLine}`,
            backdropFilter: 'blur(14px)',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            padding: 32,
          }}>
            <svg width="280" height="280" viewBox="0 0 280 280" style={{ position: 'absolute' }}>
              <circle cx="140" cy="140" r="116" fill="none" stroke={scheme.accent} strokeWidth="1.2" opacity="0.85" strokeDasharray="3 4"/>
              <circle cx="140" cy="140" r="128" fill="none" stroke={scheme.accent} strokeWidth="0.8" opacity="0.4"/>
            </svg>
            <div style={{
              fontFamily: Tokens.fontDisplay,
              fontSize: 80,
              fontWeight: Tokens.weight.black,
              color: scheme.accent,
              letterSpacing: '-0.04em',
              lineHeight: 0.9,
              textAlign: 'center',
              zIndex: 1,
              display: 'inline-flex', alignItems: 'baseline',
            }}>
              {stat.prefix && <span style={{ fontSize: 38, marginRight: 6 }}>{stat.prefix}</span>}
              <span>{stat.value}</span>
              {stat.suffix && <span style={{ fontSize: 38, marginLeft: 6 }}>{stat.suffix}</span>}
            </div>
            {stat.label && (
              <div style={{
                marginTop: 8,
                fontFamily: Tokens.fontDisplay,
                fontSize: 22, fontWeight: Tokens.weight.bold,
                color: scheme.accent,
                textTransform: 'uppercase',
                letterSpacing: '-0.005em', zIndex: 1,
              }}>{stat.label}</div>
            )}
            {statCaption && (
              <div style={{
                marginTop: 18, maxWidth: 250, textAlign: 'center',
                fontFamily: Tokens.fontDisplay,
                fontSize: 13, color: Tokens.inkDim,
                lineHeight: 1.45,
                zIndex: 1,
              }}>{statCaption}</div>
            )}
          </div>
        )}
      </div>
    </SlideShell>
  );
}

// expose
Object.assign(window, {
  SlideShell,
  TemplateA, TemplateB, TemplateC, TemplateD, TemplateE, TemplateF,
  TemplateHero,
});