// Chatterkick — Title Slide Kit
// 10 title-slide layouts, all 1280x720 (scales to 1920x1080). Each is also
// a valid SECTION DIVIDER (just swap the copy). Images and year are props
// so the user can vary them up without touching layout.
//
// RULES (title-slide layer — layered on top of report-kit global rules):
//   • Every title slide has ONE headline (a title) + optional subtitle + year
//   • Headline style is locked per variant; ONLY image, year, and copy vary
//   • Black slides use white/lime type; cream slides use black/pink type
//   • Pink is ALLOWED on cream/light bgs only (logo motif, doodle accents)
//   • Keep 40px safe zone from all edges

const TK_LOGO_WHITE = "../assets/logo-horizontal-white.png";
const TK_LOGO_WHITEPINK = "../assets/logo-horizontal-whitepink.png";
const TK_LOGO_BLACKPINK = "../assets/logo-horizontal-blackpink.png";

// Shared frame — gives every variant the same 1280x720 canvas
function TFrame({ bg, children, style }) {
  return (
    <div style={{
      position:'relative', width:1280, height:720, overflow:'hidden',
      background: bg || '#000', fontFamily:'Montserrat, sans-serif',
      ...style,
    }}>{children}</div>
  );
}

// Small corner atoms, shared
function YearPill({ year=2026, dark=true, pos='tr' }) {
  const positions = {
    tr: { top:40, right:40 }, tl: { top:40, left:40 },
    br: { bottom:40, right:40 }, bl: { bottom:40, left:40 },
  };
  return (
    <div style={{
      position:'absolute', ...positions[pos],
      padding:'10px 26px', borderRadius:999,
      border: dark ? '1.5px solid #DEE22A' : '1.5px solid #111',
      color: dark ? '#fff' : '#111',
      fontWeight:600, fontSize:16, letterSpacing:'.02em',
    }}>{year}</div>
  );
}
function YearPillFilled({ year=2026, pos='br' }) {
  const positions = {
    tr: { top:40, right:40 }, tl: { top:40, left:40 },
    br: { bottom:40, right:40 }, bl: { bottom:40, left:40 },
  };
  return (
    <div style={{
      position:'absolute', ...positions[pos],
      padding:'10px 26px', borderRadius:999,
      background:'#DEE22A', color:'#111',
      fontWeight:700, fontSize:16, letterSpacing:'.02em',
    }}>{year}</div>
  );
}
function LogoMark({ src=TK_LOGO_WHITE, pos='tl', w=180 }) {
  const positions = {
    tl: { top:40, left:40 }, tr: { top:40, right:40 },
    bl: { bottom:40, left:40 }, br: { bottom:40, right:40 },
    tc: { top:40, left:'50%', transform:'translateX(-50%)' },
  };
  return <img src={src} alt="Chatterkick" style={{
    position:'absolute', ...positions[pos], width:w, height:'auto',
    objectFit:'contain',
  }}/>;
}

// Bare year (no pill) — used for variant T02
function YearBare({ year=2030, pos='bl', color='#111' }) {
  const positions = {
    tr:{top:40,right:40}, tl:{top:40,left:40},
    br:{bottom:40,right:40}, bl:{bottom:40,left:40},
  };
  return <div style={{
    position:'absolute', ...positions[pos],
    color, fontSize:18, fontWeight:500, letterSpacing:'.02em',
  }}>{year}</div>;
}

// =========================================================
// T01 — Classic B&W Grid
// Black bg, giant condensed TITLE/SLIDE left (uppercase),
// lorem body top-right, B&W photo thumbnail bottom-right.
// =========================================================
function TitleT01({ title1="TITLE", title2="SLIDE", body, image, year=2026 }) {
  return (
    <TFrame bg="#000">
      <LogoMark src={TK_LOGO_WHITE} pos="tl" w={170}/>
      <YearPill year={year} dark={true} pos="tr"/>
      {/* Giant type block */}
      <div style={{
        position:'absolute', left:40, top:170,
        color:'#fff', fontWeight:800, fontSize:200, lineHeight:.92,
        letterSpacing:'-.02em', fontStretch:'condensed',
      }}>
        <div>{title1}</div>
        <div>{title2}</div>
      </div>
      {/* Lorem body */}
      <div style={{
        position:'absolute', right:40, top:170, width:340,
        color:'#fff', fontSize:17, lineHeight:1.5, textAlign:'justify',
      }}>{body || "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis"}</div>
      {/* Photo */}
      <div style={{
        position:'absolute', right:40, bottom:40, width:340, height:240,
        borderRadius:'14px 0 14px 14px', overflow:'hidden',
        filter:'grayscale(1)',
      }}>
        <img src={image || "../assets/photos/pod-brick-hug.jpg"}
             style={{width:'100%', height:'100%', objectFit:'cover'}}/>
      </div>
    </TFrame>
  );
}

// =========================================================
// T02 — Photo Overlay with Wordmark behind
// B&W portrait full-bleed, giant "CHATTERKICK" tiled light-gray
// behind, centered black TITLE/SLIDE block, year bottom-left.
// =========================================================
function TitleT02({ title1="TITLE", title2="SLIDE", image, year=2030 }) {
  return (
    <TFrame bg="#d6d3cf">
      {/* Background wordmark, tiled/cropped feel */}
      <div aria-hidden style={{
        position:'absolute', inset:0,
        display:'flex', flexDirection:'column', justifyContent:'center',
        alignItems:'center', gap:0,
        color:'#c1bfbc', fontWeight:900, fontSize:200, lineHeight:.95,
        letterSpacing:'-.02em', whiteSpace:'nowrap', overflow:'hidden',
        userSelect:'none',
      }}>
        <div style={{transform:'translateX(-8%)'}}>CHATTERK</div>
        <div style={{transform:'translateX(6%)'}}>TERKICK</div>
        <div style={{transform:'translateX(-10%)'}}>CHATTERK</div>
      </div>
      {/* B&W portrait */}
      <div style={{
        position:'absolute', left:'50%', top:0, transform:'translateX(-50%)',
        width:560, height:720, filter:'grayscale(1)',
      }}>
        <img src={image || "../assets/photos/beth-mary-smiling.jpg"}
             style={{width:'100%', height:'100%', objectFit:'cover'}}/>
      </div>
      {/* Centered black title block */}
      <div style={{
        position:'absolute', left:'50%', top:'50%',
        transform:'translate(-50%,-40%)',
        color:'#111', fontWeight:900, fontSize:72, lineHeight:.95,
        letterSpacing:'-.01em', textAlign:'center',
      }}>
        <div>{title1.toUpperCase()}</div>
        <div>{title2.toUpperCase()}</div>
      </div>
      <YearBare year={year} pos="bl" color="#111"/>
    </TFrame>
  );
}

// =========================================================
// T03 — Photo Bleed + Outline Script
// Full-bleed color photo, huge white "Title/Slide" in Serif/TAN
// at left, yellow star doodle near baseline, 2026 pill BR.
// =========================================================
function TitleT03({ title1="Title", title2="Slide", image, year=2026 }) {
  return (
    <TFrame bg="#000">
      <img src={image || "../assets/photos/studio-laptop-rack.jpg"}
           style={{position:'absolute', inset:0, width:'100%', height:'100%',
                   objectFit:'cover'}}/>
      {/* Title */}
      <div style={{
        position:'absolute', left:40, top:140,
        color:'#fff', fontWeight:700,
        fontFamily:'Montserrat, sans-serif',
        fontSize:180, lineHeight:.88, letterSpacing:'-.02em',
        textShadow:'0 2px 8px rgba(0,0,0,.25)',
      }}>
        <div>{title1}</div>
        <div>{title2}</div>
      </div>
      {/* Star doodle */}
      <svg width={80} height={80} viewBox="0 0 80 80"
           style={{position:'absolute', left:500, top:480}}>
        <path d="M40 6 L48 32 L74 40 L48 48 L40 74 L32 48 L6 40 L32 32 Z"
              fill="#DEE22A"/>
      </svg>
      <LogoMark src={TK_LOGO_WHITE} pos="tl" w={160}/>
      <YearPill year={year} dark={true} pos="br"/>
    </TFrame>
  );
}

// =========================================================
// T04 — Photo Band Sandwich
// Black top + middle band with B&W photo top, giant TITLE/SLIDE
// in the black middle band, logo/year footer.
// =========================================================
function TitleT04({ title1="TITLE", title2="SLIDE", image, year=2026 }) {
  return (
    <TFrame bg="#000">
      {/* Photo top band */}
      <div style={{
        position:'absolute', left:0, right:0, top:0, height:220,
        filter:'grayscale(1)', overflow:'hidden',
      }}>
        <img src={image || "../assets/photos/banquette-trio-laptops.jpg"}
             style={{width:'100%', height:'100%', objectFit:'cover',
                     objectPosition:'center 35%'}}/>
      </div>
      {/* Middle black + giant title */}
      <div style={{
        position:'absolute', left:0, right:0, top:220, bottom:80,
        background:'#000', display:'flex', alignItems:'center',
        justifyContent:'center',
      }}>
        <div style={{
          color:'#fff', fontWeight:800, fontSize:150, lineHeight:.92,
          letterSpacing:'-.02em', textAlign:'left',
        }}>
          <div>{title1.toUpperCase()}</div>
          <div style={{paddingLeft:90}}>{title2.toUpperCase()}</div>
        </div>
      </div>
      {/* Footer black strip */}
      <div style={{
        position:'absolute', left:0, right:0, bottom:0, height:80,
        background:'#000', borderTop:'1px solid #1a1a1a',
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'0 40px',
      }}>
        <img src={TK_LOGO_WHITE} alt="Chatterkick"
             style={{height:32, width:'auto'}}/>
        <div style={{color:'#fff', fontSize:16, fontWeight:600,
                     letterSpacing:'.02em'}}>{year}</div>
      </div>
    </TFrame>
  );
}

// =========================================================
// T05 — Lime Accent Split
// Black bg, left column with LIME "Title" + WHITE "Slide" +
// lorem, right column rounded B&W photo.
// =========================================================
function TitleT05({ title1="Title", title2="Slide", body, image, year=2026 }) {
  return (
    <TFrame bg="#000">
      <LogoMark src={TK_LOGO_WHITE} pos="tl" w={160}/>
      <div style={{
        position:'absolute', left:40, top:160, width:620,
      }}>
        <div style={{color:'#DEE22A', fontWeight:800, fontSize:160,
                     lineHeight:.9, letterSpacing:'-.02em'}}>{title1}</div>
        <div style={{color:'#fff', fontWeight:800, fontSize:160,
                     lineHeight:.9, letterSpacing:'-.02em'}}>{title2}</div>
        <div style={{color:'#fff', fontSize:18, lineHeight:1.45, marginTop:32,
                     maxWidth:440}}>
          {body || "Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
        </div>
      </div>
      {/* Right rounded photo */}
      <div style={{
        position:'absolute', right:40, top:110, width:500, height:500,
        borderRadius:'40px 40px 40px 40px', overflow:'hidden',
        filter:'grayscale(.1)',
      }}>
        <img src={image || "../assets/photos/couch-laptops-duo.jpg"}
             style={{width:'100%', height:'100%', objectFit:'cover'}}/>
      </div>
    </TFrame>
  );
}

// =========================================================
// T06 — Cream Minimal (pink logo allowed)
// Cream bg, centered BLACKPINK logo top, giant black "Title/Slide"
// with ghosted 2026 behind, lime pill subtitle under.
// =========================================================
function TitleT06({ title1="Title", title2="Slide", body, year=2026 }) {
  return (
    <TFrame bg="#eeeae4">
      <img src={TK_LOGO_BLACKPINK} alt="Chatterkick" style={{
        position:'absolute', top:60, left:'50%', transform:'translateX(-50%)',
        width:180, height:'auto',
      }}/>
      {/* Ghosted year behind */}
      <div aria-hidden style={{
        position:'absolute', left:'50%', top:'56%',
        transform:'translate(-50%,-50%)',
        color:'#d7d3ce', fontWeight:800, fontSize:360, lineHeight:.9,
        letterSpacing:'-.04em', userSelect:'none',
      }}>{year}</div>
      {/* Title */}
      <div style={{
        position:'absolute', left:'50%', top:'50%',
        transform:'translate(-50%,-48%)',
        color:'#111', fontWeight:800, fontSize:140, lineHeight:.92,
        letterSpacing:'-.02em', textAlign:'center',
      }}>
        <div>{title1}</div>
        <div>{title2}</div>
      </div>
      {/* Lime pill */}
      <div style={{
        position:'absolute', left:'50%', bottom:120,
        transform:'translateX(-50%)',
        background:'#DEE22A', color:'#111',
        padding:'12px 36px', borderRadius:999,
        fontWeight:700, fontSize:16, letterSpacing:'.06em',
        textTransform:'uppercase', whiteSpace:'nowrap',
      }}>{body || "Lorem ipsum dolor sit amet, consectetur adipiscing elit."}</div>
    </TFrame>
  );
}

// =========================================================
// T07 — Halftone Laptop
// Cream bg, giant black "Title/Slide" upper-left, uppercase
// lorem right, halftone laptop illustration BL, blackpink logo TR.
// =========================================================
function TitleT07({ title1="Title", title2="Slide", body, year=2026 }) {
  return (
    <TFrame bg="#eeeae4">
      <img src={TK_LOGO_BLACKPINK} alt="Chatterkick" style={{
        position:'absolute', top:50, right:60, width:180, height:'auto',
      }}/>
      <div style={{
        position:'absolute', left:40, top:40,
        color:'#111', fontWeight:800, fontSize:180, lineHeight:.88,
        letterSpacing:'-.02em',
      }}>
        <div>{title1}</div>
        <div>{title2}</div>
      </div>
      {/* Halftone laptop — rendered as SVG halftone ellipse pattern */}
      <svg viewBox="0 0 420 320" width={340} height={260}
           style={{position:'absolute', left:30, bottom:30}}>
        <defs>
          <pattern id="dots" x="0" y="0" width="8" height="8"
                   patternUnits="userSpaceOnUse">
            <circle cx="4" cy="4" r="1.5" fill="#111"/>
          </pattern>
        </defs>
        {/* Screen */}
        <path d="M70 30 L350 30 L360 220 L60 220 Z" fill="#f4efe1"
              stroke="#111" strokeWidth="4"/>
        <path d="M70 30 L350 30 L360 220 L60 220 Z" fill="url(#dots)"
              opacity=".25"/>
        {/* Base */}
        <path d="M30 230 L390 230 L400 260 L20 260 Z" fill="#111"/>
        <path d="M30 230 L390 230 L400 260 L20 260 Z" fill="url(#dots)"
              opacity=".6"/>
        <path d="M180 230 L240 230 L245 245 L175 245 Z" fill="#333"/>
      </svg>
      {/* Uppercase lorem bottom-right */}
      <div style={{
        position:'absolute', right:40, bottom:60, width:260,
        color:'#111', fontSize:18, fontWeight:600, lineHeight:1.4,
        letterSpacing:'.06em', textTransform:'uppercase',
      }}>{body || "Lorem ipsum dolor sit amet, consectetur adipiscing elit."}</div>
    </TFrame>
  );
}

// =========================================================
// T08 — Photo with Logo-Shape Overlay
// Full-bleed color photo, large white "Title/Slide" left,
// translucent speech-bubble logo shape overlay right, lime YearPill TR.
// =========================================================
function TitleT08({ title1="Title", title2="Slide", body, image, year=2026 }) {
  return (
    <TFrame bg="#000">
      <img src={image || "../assets/photos/beth-mary-smiling.jpg"}
           style={{position:'absolute', inset:0, width:'100%', height:'100%',
                   objectFit:'cover'}}/>
      <LogoMark src={TK_LOGO_WHITE} pos="tl" w={160}/>
      <YearPillFilled year={year} pos="tr"/>
      {/* Title block */}
      <div style={{
        position:'absolute', left:40, bottom:120,
        color:'#fff', fontWeight:800, fontSize:140, lineHeight:.92,
        letterSpacing:'-.02em', textShadow:'0 2px 12px rgba(0,0,0,.25)',
      }}>
        <div>{title1}</div>
        <div>{title2}</div>
      </div>
      {/* Subtitle */}
      <div style={{
        position:'absolute', left:40, bottom:50, right:360,
        color:'#fff', fontSize:18, lineHeight:1.4,
        textShadow:'0 1px 4px rgba(0,0,0,.4)',
      }}>{body || "Lorem ipsum dolor sit amet, consectetur adipiscing elit."}</div>
      {/* Translucent speech bubble overlay right */}
      <svg viewBox="0 0 300 360" width={300} height={360}
           style={{position:'absolute', right:-40, top:120, opacity:.35}}>
        <path d="M40 20 Q0 20 0 60 L0 260 Q0 300 40 300 L180 300 L220 340 L220 300 L260 300 Q300 300 300 260 L300 60 Q300 20 260 20 Z"
              fill="#fff"/>
      </svg>
    </TFrame>
  );
}

// =========================================================
// T09 — Black + Lime Doodles
// Black bg, centered "Title" thin + "Slide" bold with lime
// asterisk + lime checker doodle accents. Year pill TR.
// =========================================================
function TitleT09({ title1="Title", title2="Slide", year=2026 }) {
  return (
    <TFrame bg="#000">
      <LogoMark src={TK_LOGO_WHITE} pos="tl" w={160}/>
      <YearPill year={year} dark={true} pos="tr"/>
      <div style={{
        position:'absolute', left:'50%', top:'50%',
        transform:'translate(-50%,-50%)',
        textAlign:'center',
      }}>
        <div style={{color:'#fff', fontWeight:300, fontSize:140,
                     lineHeight:.95, letterSpacing:'-.02em'}}>{title1}</div>
        <div style={{position:'relative', color:'#fff', fontWeight:800,
                     fontSize:170, lineHeight:.95, letterSpacing:'-.02em',
                     marginTop:-20}}>
          {/* asterisk doodle left */}
          <svg width={90} height={90} viewBox="0 0 90 90"
               style={{position:'absolute', left:-50, top:30}}>
            <g fill="#DEE22A">
              <rect x="40" y="4" width="10" height="82" transform="rotate(0 45 45)"/>
              <rect x="40" y="4" width="10" height="82" transform="rotate(45 45 45)"/>
              <rect x="40" y="4" width="10" height="82" transform="rotate(90 45 45)"/>
              <rect x="40" y="4" width="10" height="82" transform="rotate(135 45 45)"/>
            </g>
          </svg>
          {title2}
          {/* checker doodle right */}
          <svg width={120} height={80} viewBox="0 0 120 80"
               style={{position:'absolute', right:-90, top:30}}>
            {[0,1,2].map(r => [0,1,2].map(c => (
              <rect key={`${r}-${c}`} x={c*30} y={r*25}
                    width="24" height="20"
                    fill={(r+c)%2===0 ? '#DEE22A' : 'transparent'}/>
            )))}
          </svg>
        </div>
      </div>
    </TFrame>
  );
}

// =========================================================
// T10 — Team Photo Overlay
// Full-bleed team photo darkened, centered white "Title/Slide"
// top-center logo.
// =========================================================
function TitleT10({ title1="Title", title2="Slide", image, year=2026 }) {
  return (
    <TFrame bg="#000">
      <img src={image || "../assets/photos/team-group-waving.jpg"}
           style={{position:'absolute', inset:0, width:'100%', height:'100%',
                   objectFit:'cover'}}/>
      <div style={{position:'absolute', inset:0,
                   background:'rgba(0,0,0,.35)'}}/>
      <LogoMark src={TK_LOGO_WHITE} pos="tc" w={170}/>
      <div style={{
        position:'absolute', left:'50%', top:'50%',
        transform:'translate(-50%,-40%)',
        color:'#fff', fontWeight:800, fontSize:160, lineHeight:.92,
        letterSpacing:'-.02em', textAlign:'center',
        textShadow:'0 2px 16px rgba(0,0,0,.45)',
      }}>
        <div>{title1}</div>
        <div>{title2}</div>
      </div>
    </TFrame>
  );
}

// Expose
Object.assign(window, {
  TitleT01, TitleT02, TitleT03, TitleT04, TitleT05,
  TitleT06, TitleT07, TitleT08, TitleT09, TitleT10,
});