/** CRAiD slide — Title (big hero) */
function TitleSlide({ eyebrow = 'Agentic Era', title = 'Human-first\nagentic era.', presenter = 'Doro & CRAiD', date = 'April 2026' }) {
  const [l1, l2] = title.split('\n');
  return (
    <div style={ts.slide} data-screen-label="01 Title">
      <div style={ts.bgVert} />
      <div style={ts.bgCloud} />
      <div style={ts.bgRadial} />
      <div style={ts.chrome}>
        <img src="../../assets/logo-craid-wordmark.png" alt="CRAiD" style={{ height: 28 }} />
        <span style={ts.meta}>{date}</span>
      </div>
      <div style={ts.body}>
        <div style={ts.pill}>
          <span style={ts.dot} />
          <span style={ts.pillText}>{eyebrow}</span>
        </div>
        <h1 style={ts.h1}>
          {l1}<br />
          {l2 && <span style={{ color: 'var(--primary)' }}>{l2}</span>}
        </h1>
        <div style={ts.presenter}>{presenter}</div>
      </div>
    </div>
  );
}

const ts = {
  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)' },
  bgCloud: { position: 'absolute', inset: 0, backgroundImage: 'url(../../assets/cloud-bg.png)', backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.22 },
  bgRadial: { position: 'absolute', inset: 0, background: 'var(--grad-hero-radial)' },
  chrome: { position: 'absolute', top: 40, left: 64, right: 64, display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 2 },
  meta: { fontSize: 12, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500 },
  body: { position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', padding: '0 80px', zIndex: 2 },
  pill: { display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 20px', borderRadius: 9999, background: 'rgba(255,255,255,0.7)', border: '1px solid var(--border)', backdropFilter: 'blur(8px)', marginBottom: 32 },
  dot: { width: 8, height: 8, borderRadius: '50%', background: 'var(--primary)' },
  pillText: { fontSize: 12, fontWeight: 400, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-muted)' },
  h1: { fontSize: 120, fontWeight: 300, lineHeight: 0.95, letterSpacing: '-0.025em', margin: '0 0 48px' },
  presenter: { fontSize: 15, fontWeight: 500, color: 'var(--fg-muted)', letterSpacing: '0.02em' },
};

window.TitleSlide = TitleSlide;