/** CRAiD slide — Big quote on dark imagery */
function QuoteSlide() {
  return (
    <SlideBase label="05 Quote · Philosophy" bg="#131F22" style={{ color: '#fff' }}>
      <div style={qs.bgImg} />
      <div style={qs.scrim} />
      <SlideChrome page="05" total="14" section="Philosophy" invert />
      <div style={qs.body}>
        <span style={qs.mark}>“</span>
        <p style={qs.quote}>
          We stopped selling hours when we hired Doro.<br />
          Now we sell <span style={{ color: 'var(--primary)' }}>outcomes</span> — and our clients buy faster.
        </p>
        <div style={qs.attr}>
          <div style={qs.avatar} />
          <div>
            <div style={qs.name}>Daniel Craid</div>
            <div style={qs.role}>Founder, CRAiD</div>
          </div>
        </div>
      </div>
    </SlideBase>
  );
}

const qs = {
  bgImg: { position: 'absolute', inset: 0, backgroundImage: 'url(../../assets/brand-image-019.jpeg)', backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.45, zIndex: 0 },
  scrim: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(19,31,34,0.55) 0%, rgba(19,31,34,0.8) 100%)', zIndex: 1 },
  body: { position: 'absolute', inset: 0, padding: '88px 96px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center', zIndex: 2 },
  mark: { fontSize: 110, lineHeight: 0.6, color: 'var(--primary)', fontFamily: 'var(--font-sans)', fontWeight: 400, marginBottom: 12 },
  quote: { fontSize: 48, fontWeight: 300, lineHeight: 1.15, letterSpacing: '-0.015em', margin: '0 0 48px', maxWidth: 1000, color: '#fff' },
  attr: { display: 'flex', alignItems: 'center', gap: 16 },
  avatar: { width: 48, height: 48, borderRadius: '50%', background: 'url(../../assets/brand-image-021.jpeg) center/cover', border: '2px solid rgba(255,255,255,0.25)' },
  name: { fontSize: 16, fontWeight: 600, color: '#fff' },
  role: { fontSize: 13, color: 'rgba(255,255,255,0.6)', marginTop: 2 },
};

window.QuoteSlide = QuoteSlide;