// SLIDE 01 — COVER (2 variants: Editorial Stack + Full-Bleed)
// Rules: TAN Aegean upright, yellow on dark bg, never touching Montserrat.

// ─── OPTION A — Editorial Stack + Photo Collage ─────────────────────────────
function CoverSlideA() {
  // Image cards: bumped spacing so each card has more breathing room but still
  // overlaps slightly (per design feedback on slide 1).
  const photos = [
    { src: "../assets/photos/couch-laptops-duo.jpg",        rot: -4, top:  40, left: 470, z: 1, w: 230, h: 290 },
    { src: "../assets/photos/team-hug-brick.jpg",           rot:  6, top: 120, left: 708, z: 2, w: 220, h: 280 },
    { src: "../assets/photos/team-group-waving.jpg",        rot: -3, top: 360, left: 490, z: 3, w: 230, h: 280 },
    { src: "../assets/photos/team-letters-chatterkick.jpg", rot:  5, top: 400, left: 728, z: 4, w: 220, h: 270 },
  ];
  return (
    <Slide eyebrow={null} logo={null} style={{label:"01 Cover"}}>
      <div style={{position:'absolute', top:46, left:56, fontSize:13, fontWeight:700, color:'#fff', letterSpacing:'.06em', textTransform:'uppercase'}}>Q1 2026</div>

      {/* Client logo — must remain visible; placed with clear space above title */}
      <div style={{position:'absolute', top: 210, left: 56}}>
        <img src="../assets/logo-horizontal-whitepink.png" alt="CLIENT LOGO" style={{height: 40, display:'block'}}/>
      </div>

      {/* Title — all white per feedback. TAN row stays as accent treatment (not italic). */}
      <div style={{position:'absolute', top: 310, left: 56}}>
        <div style={{fontFamily:'var(--font-sans)', fontWeight:600, fontSize: 124, lineHeight:.94, letterSpacing:'-.02em', color:'#fff'}}>Quarter</div>
        <div style={{fontFamily:'var(--font-display)', fontWeight:400, fontSize: 148, lineHeight:.92, marginTop:14, padding:'0 .08em', color:'#fff'}}>Report</div>
      </div>

      <div style={{position:'absolute', top:0, right:0, width:560, height:720}}>
        {photos.map((p, i) => (
          <div key={i} style={{
            position:'absolute', top: p.top, left: p.left - 470, width: p.w, height: p.h,
            transform: `rotate(${p.rot}deg)`, zIndex: p.z,
            borderRadius: 14, overflow: 'hidden',
            boxShadow: '0 20px 40px rgba(0,0,0,.5)',
          }}>
            <img src={p.src} style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
          </div>
        ))}
      </div>
    </Slide>
  );
}


// ─── OPTION B — Full-Bleed Photo Hero ───────────────────────────────────────
function CoverSlideB() {
  return (
    <Slide eyebrow={null} logo={null} style={{label:"01 Cover B"}}>
      <img src="../assets/photos/team-group-waving.jpg" alt="Client hero photo"
        style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', filter:'brightness(.78)'}}/>

      <div style={{position:'absolute', inset:0, background:
        'linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.85) 100%)'}}/>

      <div style={{position:'absolute', top:46, left:56}}>
        <span style={{background: R.yellow, color:'#111', padding:'6px 12px', borderRadius:999, fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', whiteSpace:'nowrap'}}>Q1 2026</span>
      </div>

      <div style={{position:'absolute', top:42, right:56}}>
        <img src="../assets/logo-horizontal-whitepink.png" alt="CLIENT LOGO" style={{height: 34, display:'block'}}/>
      </div>

      <div style={{position:'absolute', bottom:76, left:56, right:56}}>
        <div style={{fontFamily:'var(--font-sans)', fontWeight:600, fontSize: 96, lineHeight:.95, letterSpacing:'-.02em', color:'#fff'}}>Quarter</div>
        <div style={{fontFamily:'var(--font-display)', fontWeight:400, fontSize: 124, lineHeight:.92, marginTop:10, padding:'0 .08em', color: R.yellow}}>Report</div>
      </div>
    </Slide>
  );
}


// Default = Option A. B shown as separate cover variant.
function CoverSlide() { return <CoverSlideA/>; }

Object.assign(window, { CoverSlide, CoverSlideA, CoverSlideB });