/* Title / cover slides + section dividers — multiple variants */

/* ============ COVERS ============ */

/* Cover A: Hero with stars + orbs (matches website hero) */
function CoverHero({ eyebrow = "BUILD LOG · CONFERENCE TALK", title, titleAccent, subtitle, presenter = "Annet Kloprogge", date = "Date · Venue", layoutLabel }) {
  return (
    <div className="slide bg-navy" style={{ position: "relative" }}>
      <div className="stars" />
      <div className="orb" style={{ width: 420, height: 420, top: -80, left: "10%", animation: "mr-float 6s ease-in-out infinite" }} />
      <div className="orb" style={{ width: 520, height: 520, bottom: -160, right: -100, background: "rgba(237,112,89,0.12)", animation: "mr-float 8s ease-in-out infinite reverse" }} />
      <div className="orb" style={{ width: 280, height: 280, top: "30%", right: "22%", background: "rgba(245,142,118,0.10)", animation: "mr-float 5s ease-in-out infinite" }} />

      <Frame style={{ position: "relative", justifyContent: "center" }}>
        <div className="pill pill-dark" style={{ alignSelf: "flex-start", marginBottom: 48, fontSize: 22 }}>
          <span className="pill-dot" />
          {eyebrow}
        </div>
        <h1 className="slide-title" style={{ fontSize: TYPE_SCALE.display, color: "#fff", maxWidth: 1500 }}>
          {title} {titleAccent && <span className="gradient-text">{titleAccent}</span>}
        </h1>
        {subtitle && (
          <p className="muted" style={{ fontSize: TYPE_SCALE.lead, marginTop: 36, maxWidth: 1100, lineHeight: 1.4 }}>
            {subtitle}
          </p>
        )}
        <div style={{ display: "flex", gap: 32, marginTop: 64, alignItems: "center" }}>
          <img src="assets/logo-rocket.png" alt="" style={{ height: 64, opacity: 0.9 }} />
          <div>
            <div style={{ fontSize: 28, fontWeight: 600, color: "#fff" }}>{presenter}</div>
            <div style={{ fontSize: 22, color: "rgba(255,255,255,0.6)", marginTop: 4 }}>{date}</div>
          </div>
        </div>
      </Frame>
      <LayoutLabel>{layoutLabel || "01 Cover · Hero"}</LayoutLabel>
    </div>
  );
}

/* Cover B: Light, editorial — left text, right rocket panel */
function CoverEditorial({ eyebrow = "WORKSHOP", title, titleAccent, subtitle, presenter = "Annet Kloprogge", date = "Date · Venue", layoutLabel }) {
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", width: "100%", height: "100%" }}>
        <div style={{ padding: "120px 80px 100px 100px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h1 className="slide-title" style={{ fontSize: TYPE_SCALE.display, marginTop: 12, maxWidth: 980 }}>
            {title} {titleAccent && <span className="gradient-text">{titleAccent}</span>}
          </h1>
          {subtitle && (
            <p className="muted" style={{ fontSize: TYPE_SCALE.lead, marginTop: 36, maxWidth: 800, lineHeight: 1.4 }}>
              {subtitle}
            </p>
          )}
          <div style={{ marginTop: 56, fontSize: 26 }}>
            <span style={{ fontWeight: 600 }}>{presenter}</span>
            <span style={{ color: "var(--muted)", marginLeft: 18 }}>· {date}</span>
          </div>
        </div>
        <div style={{ position: "relative", background: "linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-soft) 100%)", overflow: "hidden" }}>
          <div className="stars" style={{ opacity: 0.6 }} />
          <img
            src="assets/logo-rocket.png"
            alt=""
            style={{
              position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%) rotate(8deg)",
              width: "70%", filter: "drop-shadow(0 30px 60px rgba(0,0,0,0.35))",
            }}
          />
        </div>
      </div>
      <LayoutLabel>{layoutLabel || "02 Cover · Editorial"}</LayoutLabel>
    </div>
  );
}

/* Cover C: Coral-flooded brand statement */
function CoverFlood({ statement, attribution, layoutLabel }) {
  return (
    <div className="slide bg-coral" style={{ position: "relative" }}>
      <Frame style={{ justifyContent: "center", alignItems: "flex-start" }}>
        <Icon name="rocket" size={96} color="rgba(255,255,255,0.92)" strokeWidth={1.5} style={{ marginBottom: 56 }} />
        <h1 className="slide-title" style={{ fontSize: TYPE_SCALE.display, color: "#fff", lineHeight: 1.0, maxWidth: 1500 }}>
          {statement}
        </h1>
        {attribution && (
          <div style={{ fontSize: TYPE_SCALE.subtitle, color: "rgba(255,255,255,0.85)", marginTop: 56, fontFamily: "var(--font-heading)" }}>
            — {attribution}
          </div>
        )}
      </Frame>
      <LayoutLabel>{layoutLabel || "03 Cover · Flood"}</LayoutLabel>
    </div>
  );
}

/* ============ SECTION DIVIDERS ============ */

/* Divider A: Big number + title (01 / Discovery) */
function DividerNumber({ num = "01", title, subtitle, idx, total, layoutLabel }) {
  return (
    <div className="slide bg-light" style={{ position: "relative" }}>
      <Frame style={{ justifyContent: "center" }}>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 80, alignItems: "center" }}>
          <div style={{
            fontFamily: "var(--font-heading)",
            fontSize: 380, lineHeight: 0.85,
            color: "var(--coral)",
            fontWeight: 600,
          }}>
            {num}
          </div>
          <div>
            <Eyebrow>Section</Eyebrow>
            <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.title, marginTop: 8 }}>
              {title}
            </h2>
            {subtitle && (
              <p className="muted" style={{ fontSize: TYPE_SCALE.lead, marginTop: 32, maxWidth: 900, lineHeight: 1.4 }}>
                {subtitle}
              </p>
            )}
          </div>
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Divider · Number"}</LayoutLabel>
    </div>
  );
}

/* Divider B: Coral flood with title only */
function DividerCoral({ num = "02", title, subtitle, idx, total, layoutLabel }) {
  return (
    <div className="slide bg-coral" style={{ position: "relative" }}>
      <Frame style={{ justifyContent: "center" }}>
        <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: "0.2em", color: "rgba(255,255,255,0.85)", marginBottom: 36 }}>
          PART {num}
        </div>
        <h2 className="slide-title" style={{ fontSize: 180, color: "#fff", maxWidth: 1500, lineHeight: 1.0 }}>
          {title}
        </h2>
        {subtitle && (
          <p style={{ fontSize: TYPE_SCALE.subtitle, color: "rgba(255,255,255,0.88)", marginTop: 40, maxWidth: 1100, lineHeight: 1.4 }}>
            {subtitle}
          </p>
        )}
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} dark />}
      <LayoutLabel>{layoutLabel || "Divider · Coral"}</LayoutLabel>
    </div>
  );
}

/* Divider C: Hero stars (matches site hero) — section break */
function DividerHero({ num = "03", title, subtitle, idx, total, layoutLabel }) {
  return (
    <div className="slide bg-navy" style={{ position: "relative" }}>
      <div className="stars" />
      <div className="orb" style={{ width: 380, height: 380, top: "10%", right: "8%", animation: "mr-float 7s ease-in-out infinite" }} />
      <div className="orb" style={{ width: 260, height: 260, bottom: "10%", left: "12%", background: "rgba(245,142,118,0.12)", animation: "mr-float 5s ease-in-out infinite reverse" }} />
      <Frame style={{ position: "relative", justifyContent: "center" }}>
        <div className="pill pill-dark" style={{ alignSelf: "flex-start", marginBottom: 40 }}>
          PART {num}
        </div>
        <h2 className="slide-title" style={{ fontSize: 168, color: "#fff", maxWidth: 1500, lineHeight: 1.0 }}>
          {title}
        </h2>
        {subtitle && (
          <p style={{ fontSize: TYPE_SCALE.subtitle, color: "rgba(255,255,255,0.75)", marginTop: 40, maxWidth: 1100, lineHeight: 1.4 }}>
            {subtitle}
          </p>
        )}
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} dark />}
      <LayoutLabel>{layoutLabel || "Divider · Hero"}</LayoutLabel>
    </div>
  );
}

Object.assign(window, { CoverHero, CoverEditorial, CoverFlood, DividerNumber, DividerCoral, DividerHero });