/* Image-led, stats, logo wall, closing slides */

/* Full-bleed image with overlay headline */
function ImageFull({ eyebrow, title, footnote, dark = true, idx, total, layoutLabel, imgLabel = "Full-bleed image", imgSrc, imgPosition = "center" }) {
  return (
    <div className="slide" style={{ position: "relative", background: "#000" }}>
      {imgSrc ? (
        <img
          src={imgSrc}
          alt={imgLabel}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: imgPosition, display: "block" }}
        />
      ) : (
        <div className="img-ph" style={{ position: "absolute", inset: 0, borderRadius: 0, background: "linear-gradient(135deg, hsl(15 50% 70%), hsl(8 60% 55%))" }}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
            <Icon name="image" size={64} color="rgba(255,255,255,0.7)" />
            <div style={{ marginTop: 12, opacity: 0.85 }}>{imgLabel}</div>
          </div>
        </div>
      )}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.65) 100%)",
      }} />
      <Frame style={{ position: "relative", justifyContent: "flex-end" }}>
        {eyebrow && <Eyebrow dark>{eyebrow}</Eyebrow>}
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.title, color: "#fff", maxWidth: 1500 }}>{title}</h2>
        {footnote && <div style={{ fontSize: TYPE_SCALE.body, color: "rgba(255,255,255,0.85)", marginTop: 24, maxWidth: 1100, lineHeight: 1.4 }}>{footnote}</div>}
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} dark />}
      <LayoutLabel>{layoutLabel || "Image · Full-bleed"}</LayoutLabel>
    </div>
  );
}

/* Split: text left, image right */
function ImageSplit({ eyebrow, title, body, imgLabel = "Image", flip = false, idx, total, layoutLabel, soft = false, imgSrc, imgPosition = "center" }) {
  const text = (
    <div style={{ padding: "120px 80px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 800 }}>{title}</h2>
      {body && <p style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.5, color: "var(--muted)", marginTop: 36, maxWidth: 760 }}>{body}</p>}
    </div>
  );
  const img = imgSrc ? (
    <div style={{ height: "100%", overflow: "hidden" }}>
      <img src={imgSrc} alt={imgLabel} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: imgPosition, display: "block" }} />
    </div>
  ) : (
    <div className={"img-ph " + (soft ? "img-ph-soft" : "")} style={{ borderRadius: 0, height: "100%" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
        <Icon name="image" size={64} color={soft ? "var(--muted)" : "rgba(255,255,255,0.85)"} />
        <div style={{ marginTop: 12 }}>{imgLabel}</div>
      </div>
    </div>
  );
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", width: "100%", height: "100%" }}>
        {flip ? <>{img}{text}</> : <>{text}{img}</>}
      </div>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Image · Split"}</LayoutLabel>
    </div>
  );
}

/* Caption-style: image card + caption block */
function ImageCaption({ eyebrow, title, body, imgLabel = "Screenshot · diagram", idx, total, layoutLabel, imgSrc, imgPosition = "center" }) {
  return (
    <div className="slide bg-light" style={{ position: "relative" }}>
      <Frame>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, marginTop: 56, flex: 1 }}>
          {imgSrc ? (
            <div style={{ height: "100%", borderRadius: "var(--radius-2xl)", overflow: "hidden", boxShadow: "var(--shadow-sm)" }}>
              <img src={imgSrc} alt={imgLabel} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: imgPosition, display: "block" }} />
            </div>
          ) : (
            <div className="img-ph img-ph-soft" style={{ height: "100%" }}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                <Icon name="image" size={64} color="var(--muted)" />
                <div style={{ marginTop: 12 }}>{imgLabel}</div>
              </div>
            </div>
          )}
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <p style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.5, margin: 0 }}>{body}</p>
          </div>
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Image · Caption"}</LayoutLabel>
    </div>
  );
}

/* ============ STATS / BIG NUMBERS ============ */

/* Single big number */
function StatBig({ eyebrow, num, suffix, label, body, dark = false, idx, total, layoutLabel }) {
  return (
    <div className={"slide " + (dark ? "bg-navy" : "bg-white")} style={{ position: "relative" }}>
      {dark && <div className="stars" style={{ opacity: 0.4 }} />}
      <Frame style={{ justifyContent: "center", position: "relative" }}>
        {eyebrow && <Eyebrow dark={dark}>{eyebrow}</Eyebrow>}
        <div style={{ display: "flex", alignItems: "baseline", gap: 24 }}>
          <span className="gradient-text" style={{ fontFamily: "var(--font-heading)", fontSize: TYPE_SCALE.bigNum, lineHeight: 0.9, fontWeight: 700, letterSpacing: "-0.02em" }}>
            {num}
          </span>
          {suffix && <span style={{ fontFamily: "var(--font-heading)", fontSize: 120, color: "var(--coral)", lineHeight: 0.9 }}>{suffix}</span>}
        </div>
        <div style={{ fontSize: TYPE_SCALE.subtitle, marginTop: 36, fontWeight: 600, color: dark ? "#fff" : undefined }}>{label}</div>
        {body && <p style={{ fontSize: TYPE_SCALE.body, color: dark ? "rgba(255,255,255,0.7)" : "var(--muted)", marginTop: 20, maxWidth: 1100, lineHeight: 1.5 }}>{body}</p>}
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} dark={dark} />}
      <LayoutLabel>{layoutLabel || "Stat · Big"}</LayoutLabel>
    </div>
  );
}

/* Three-stat strip */
function StatsThree({ eyebrow, title, lead, stats = [], idx, total, layoutLabel }) {
  return (
    <div className="slide bg-light" style={{ position: "relative" }}>
      <Frame>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        {title && <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>}
        {lead && <p style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.5, color: "var(--muted)", maxWidth: 1300, margin: "24px 0 0" }}>{lead}</p>}
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${stats.length}, 1fr)`, gap: 48, marginTop: title ? (lead ? 56 : 80) : 0, flex: 1, alignContent: "center" }}>
          {stats.map((s, i) => (
            <div key={i}>
              <div className="gradient-text" style={{ fontFamily: "var(--font-heading)", fontSize: 168, lineHeight: 0.9, fontWeight: 700, letterSpacing: "-0.02em" }}>
                {s.num}
              </div>
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)", marginTop: 24 }}>
                {s.label}
              </div>
              {s.body && <p style={{ fontSize: TYPE_SCALE.small, lineHeight: 1.5, color: "var(--muted)", marginTop: 16, maxWidth: 380 }}>{s.body}</p>}
            </div>
          ))}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Stats · Three"}</LayoutLabel>
    </div>
  );
}

/* ============ LOGO WALL / SOCIAL PROOF ============ */

const ALL_CLIENTS = [
  { name: "MURAL", src: "assets/clients/mural.png" },
  { name: "NOLAI", src: "assets/clients/nolai.png" },
  { name: "EY", src: "assets/clients/ey.png" },
  { name: "TNW", src: "assets/clients/tnw.png" },
  { name: "M&C Saatchi", src: "assets/clients/mcsaatchi.png" },
  { name: "Hyper Island", src: "assets/clients/hyperisland.png" },
  { name: "JA Europe", src: "assets/clients/ja-europe.png" },
  { name: "Talent Institute", src: "assets/clients/talent-institute.png" },
  { name: "Dutch EdTech", src: "assets/clients/dutch-edtech.png" },
  { name: "KvK", src: "assets/clients/kvk.png" },
  { name: "TechGrounds", src: "assets/clients/techgrounds.webp" },
  { name: "Vakantieveilingen", src: "assets/clients/vakantieveilingen.png" },
];

function LogoWall({ eyebrow = "TRUSTED BY", title = "Built with leading teams", clients = ALL_CLIENTS, idx, total, layoutLabel }) {
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginTop: 72, flex: 1, alignContent: "center" }}>
          {clients.map((c, i) => (
            <div key={i} style={{
              background: "#fff", border: "1px solid var(--border)",
              borderRadius: 18, height: 140,
              display: "flex", alignItems: "center", justifyContent: "center", padding: 24,
            }}>
              <img src={c.src} alt={c.name} style={{ maxHeight: 60, maxWidth: "75%", objectFit: "contain", filter: "grayscale(1)", opacity: 0.7 }} />
            </div>
          ))}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Logo wall"}</LayoutLabel>
    </div>
  );
}

/* ============ Q&A / CLOSING ============ */

function QandA({ prompt = "Vragen?", subtitle = "Questions, comments, things you want to build.", idx, total, layoutLabel }) {
  return (
    <div className="slide bg-navy" style={{ position: "relative" }}>
      <div className="stars" />
      <div className="orb" style={{ width: 420, height: 420, top: -60, left: "10%", animation: "mr-float 6s ease-in-out infinite" }} />
      <div className="orb" style={{ width: 360, height: 360, bottom: -80, right: -40, background: "rgba(245,142,118,0.12)", animation: "mr-float 7s ease-in-out infinite reverse" }} />
      <Frame style={{ justifyContent: "center", position: "relative" }}>
        <Eyebrow dark>Open floor</Eyebrow>
        <h2 className="slide-title" style={{ fontSize: 280, color: "#fff", lineHeight: 0.95 }}>
          {prompt}
        </h2>
        <p style={{ fontSize: TYPE_SCALE.lead, color: "rgba(255,255,255,0.8)", marginTop: 40, maxWidth: 1100, lineHeight: 1.4 }}>
          {subtitle}
        </p>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} dark />}
      <LayoutLabel>{layoutLabel || "Q&A"}</LayoutLabel>
    </div>
  );
}

function Closing({ message = "Let's build together.", contact = [], idx, total, layoutLabel }) {
  return (
    <div className="slide bg-navy" style={{ position: "relative" }}>
      <div className="stars" />
      <div className="orb" style={{ width: 480, height: 480, top: -120, left: "8%", animation: "mr-float 7s ease-in-out infinite" }} />
      <div className="orb" style={{ width: 380, height: 380, bottom: -100, right: -60, background: "rgba(245,142,118,0.12)", animation: "mr-float 6s ease-in-out infinite reverse" }} />
      <Frame style={{ justifyContent: "center", position: "relative" }}>
        <img src="assets/logo-rocket.png" alt="" style={{ width: 140, height: 140, objectFit: "contain", marginBottom: 40, alignSelf: "flex-start" }} />
        <h2 className="slide-title" style={{ fontSize: 168, lineHeight: 1.0, maxWidth: 1500, color: "#fff" }}>
          <span className="gradient-text">{message}</span>
        </h2>
        <div style={{ display: "flex", gap: 64, marginTop: 88, flexWrap: "wrap" }}>
          {contact.map((c, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 22 }}>
              <div className="chip chip-fill" style={{ width: 72, height: 72, marginBottom: 0, borderRadius: 20 }}>
                <Icon name={c.icon || "mail"} size={34} color="#fff" />
              </div>
              <div>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)" }}>{c.label}</div>
                <div style={{ fontSize: 32, fontWeight: 600, color: "#fff", marginTop: 4 }}>{c.value}</div>
              </div>
            </div>
          ))}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} dark />}
      <LayoutLabel>{layoutLabel || "Closing"}</LayoutLabel>
    </div>
  );
}

/* Thank-you flood — dark closing for emotional weight */
function ThankYou({ message = "Bedankt.", footnote = "missionrelearn.com", idx, total, layoutLabel }) {
  return (
    <div className="slide bg-navy" style={{ position: "relative" }}>
      <div className="stars" />
      <div className="orb" style={{ width: 560, height: 560, top: "-15%", left: "20%", animation: "mr-float 8s ease-in-out infinite" }} />
      <div className="orb" style={{ width: 420, height: 420, bottom: "-15%", right: "10%", background: "rgba(245,142,118,0.14)", animation: "mr-float 6s ease-in-out infinite reverse" }} />
      <Frame style={{ justifyContent: "center", alignItems: "center", textAlign: "center", position: "relative" }}>
        <h2 className="slide-title" style={{ fontSize: 320, lineHeight: 0.95 }}>
          <span className="gradient-text">{message}</span>
        </h2>
        <div style={{ fontSize: TYPE_SCALE.subtitle, color: "rgba(255,255,255,0.78)", marginTop: 48, fontFamily: "var(--font-heading)", letterSpacing: "0.04em" }}>
          {footnote}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} dark />}
      <LayoutLabel>{layoutLabel || "Thank you"}</LayoutLabel>
    </div>
  );
}

Object.assign(window, { ImageFull, ImageSplit, ImageCaption, StatBig, StatsThree, LogoWall, QandA, Closing, ThankYou, ALL_CLIENTS });