/** CRAiD slide — Closing / CTA */
function ClosingSlide() {
  return (
    <div style={cl.slide} data-screen-label="14 Closing">
      <div style={cl.bgVert} />
      <div style={cl.bgRadial} />
      <div style={cl.chrome}>
        <img src="../../assets/logo-craid-wordmark.png" alt="CRAiD" style={{ height: 24 }} />
        <span style={cl.pg}>14 / 14</span>
      </div>
      <div style={cl.body}>
        <span style={cl.eye}>Let's build</span>
        <h2 style={cl.h2}>Talk to <span style={{ color: 'var(--primary)' }}>Doro.</span><br />Ship with CRAiD.</h2>
        <div style={cl.row}>
          <div>
            <div style={cl.label}>Write</div>
            <div style={cl.val}>hello@craid.de</div>
          </div>
          <div>
            <div style={cl.label}>Visit</div>
            <div style={cl.val}>craid.de/office</div>
          </div>
          <div>
            <div style={cl.label}>Studio</div>
            <div style={cl.val}>Berlin · Munich</div>
          </div>
        </div>
      </div>
    </div>
  );
}

const cl = {
  slide: { position: 'relative', width: 1280, height: 720, overflow: 'hidden', background: 'var(--bg)', fontFamily: 'var(--font-sans)', color: 'var(--fg)' },
  bgVert: { position: 'absolute', inset: 0, background: 'var(--grad-hero-vertical)' },
  bgRadial: { position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 20% 80%, rgba(236,22,245,0.22) 0%, transparent 60%)' },
  chrome: { position: 'absolute', top: 40, left: 64, right: 64, display: 'flex', justifyContent: 'space-between', zIndex: 2 },
  pg: { fontSize: 12, fontWeight: 500, color: 'var(--fg-muted)', letterSpacing: '0.1em' },
  body: { position: 'absolute', inset: 0, padding: '0 96px', display: 'flex', flexDirection: 'column', justifyContent: 'center', zIndex: 2 },
  eye: { fontSize: 12, fontWeight: 400, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--primary)', marginBottom: 28 },
  h2: { fontSize: 112, fontWeight: 300, lineHeight: 0.95, letterSpacing: '-0.025em', margin: '0 0 80px' },
  row: { display: 'grid', gridTemplateColumns: 'repeat(3, auto)', gap: 80, paddingTop: 32, borderTop: '1px solid var(--border)', maxWidth: 900 },
  label: { fontSize: 11, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg-muted)', marginBottom: 8 },
  val: { fontSize: 20, fontWeight: 500, color: 'var(--fg)' },
};

window.ClosingSlide = ClosingSlide;