/* Process / timeline / index / workshop / about / contact slides */

/* Horizontal process / timeline */
function ProcessHorizontal({ eyebrow, title, steps = [], idx, total, layoutLabel }) {
  return (
    <div className="slide bg-white" 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: `repeat(${steps.length}, 1fr)`, gap: 28, marginTop: 80, flex: 1, alignContent: "center" }}>
          {steps.map((s, i) => (
            <div key={i} style={{ position: "relative" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 24 }}>
                <div style={{
                  width: 64, height: 64, borderRadius: "50%",
                  background: "linear-gradient(135deg, var(--coral) 0%, var(--coral-light) 100%)",
                  color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: 28, fontWeight: 700, fontFamily: "var(--font-heading)",
                  flexShrink: 0,
                }}>
                  {i + 1}
                </div>
                {i < steps.length - 1 && (
                  <div style={{ flex: 1, height: 2, borderTop: "2px dashed var(--coral)", opacity: 0.5 }} />
                )}
              </div>
              <div style={{ fontFamily: "var(--font-heading)", fontSize: 36, fontWeight: 600, marginBottom: 14, lineHeight: 1.2 }}>
                {s.title}
              </div>
              <p style={{ fontSize: TYPE_SCALE.small, lineHeight: 1.5, color: "var(--muted)", margin: 0 }}>
                {s.body}
              </p>
            </div>
          ))}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Process · Horizontal"}</LayoutLabel>
    </div>
  );
}

/* Vertical timeline */
function TimelineVertical({ eyebrow, title, items = [], idx, total, layoutLabel }) {
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>
        <div style={{ marginTop: items.length > 4 ? 30 : 56, display: "flex", flexDirection: "column", gap: 0, flex: 1, justifyContent: "center" }}>
          {items.map((it, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "180px auto 1fr", gap: 36, alignItems: "flex-start", padding: items.length > 4 ? "14px 0" : "22px 0", borderTop: i === 0 ? "none" : "1px solid var(--border)" }}>
              <div style={{ fontFamily: "var(--font-heading)", fontSize: 38, fontWeight: 600, color: "var(--coral)" }}>{it.when}</div>
              <div style={{ width: 14, height: 14, borderRadius: "50%", background: "var(--coral)", marginTop: 16 }} />
              <div>
                <div style={{ fontSize: TYPE_SCALE.subtitle, fontWeight: 600, fontFamily: "var(--font-heading)" }}>{it.title}</div>
                {it.body && <p style={{ fontSize: TYPE_SCALE.body, color: "var(--muted)", margin: "8px 0 0", lineHeight: 1.5 }}>{it.body}</p>}
              </div>
            </div>
          ))}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Timeline"}</LayoutLabel>
    </div>
  );
}

/* Workshop / hands-on prompt slide */
function WorkshopPrompt({ eyebrow = "BUILD TIME", duration = "20 MIN", title, prompt, ingredients = [], idx, total, layoutLabel }) {
  return (
    <div className="slide bg-coral" style={{ position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: -120, right: -120, width: 480, height: 480, borderRadius: "50%", background: "rgba(255,255,255,0.10)" }} />
      <div style={{ position: "absolute", bottom: -160, left: -160, width: 520, height: 520, borderRadius: "50%", background: "rgba(255,255,255,0.06)" }} />
      <Frame style={{ position: "relative", color: "#fff" }}>
        <div style={{ display: "flex", gap: 16, marginBottom: 32 }}>
          <div className="pill pill-dark" style={{ background: "rgba(255,255,255,0.15)", color: "#fff", border: "1px solid rgba(255,255,255,0.25)" }}>
            <Icon name="hammer" size={20} color="#fff" />
            {eyebrow}
          </div>
          <div className="pill pill-dark" style={{ background: "rgba(255,255,255,0.15)", color: "#fff", border: "1px solid rgba(255,255,255,0.25)" }}>
            <Icon name="clock" size={20} color="#fff" />
            {duration}
          </div>
        </div>
        <h2 className="slide-title" style={{ fontSize: 128, color: "#fff", lineHeight: 1.0, maxWidth: 1500 }}>
          {title}
        </h2>
        <p style={{ fontSize: TYPE_SCALE.lead, color: "rgba(255,255,255,0.95)", marginTop: 36, maxWidth: 1300, lineHeight: 1.4 }}>
          {prompt}
        </p>
        {ingredients.length > 0 && (
          <div style={{ marginTop: 56 }}>
            <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)", marginBottom: 18 }}>
              Wat je nodig hebt
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 14 }}>
              {ingredients.map((it, i) => (
                <div key={i} style={{
                  padding: "14px 24px", borderRadius: 9999,
                  background: "rgba(255,255,255,0.18)", color: "#fff",
                  fontSize: TYPE_SCALE.small, fontWeight: 600,
                  border: "1px solid rgba(255,255,255,0.25)",
                }}>
                  {it}
                </div>
              ))}
            </div>
          </div>
        )}
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} dark />}
      <LayoutLabel>{layoutLabel || "Workshop · Prompt"}</LayoutLabel>
    </div>
  );
}

/* About / presenter intro */
function AboutPresenter({ name = "Annet Kloprogge", role = "Founder, Mission Relearn", bio, highlights = [], portrait = "assets/portrait-annet.jpg", idx, total, layoutLabel }) {
  return (
    <div className="slide bg-light" style={{ position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", height: "100%" }}>
        <div style={{ position: "relative", overflow: "hidden", background: "var(--navy-deep)" }}>
          <img
            src={portrait}
            alt={name}
            style={{
              width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%",
              display: "block",
            }}
          />
        </div>
        <div style={{ padding: "120px 100px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <Eyebrow>About me</Eyebrow>
          <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.title, marginTop: 8 }}>{name}</h2>
          <div style={{ fontSize: TYPE_SCALE.lead, color: "var(--coral)", marginTop: 16, fontFamily: "var(--font-heading)" }}>{role}</div>
          <p style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.5, color: "var(--muted)", marginTop: 32, maxWidth: 760 }}>{bio}</p>
          {highlights.length > 0 && (
            <div style={{ display: "flex", gap: 48, marginTop: 48, flexWrap: "wrap" }}>
              {highlights.map((h, i) => (
                <div key={i}>
                  <div className="gradient-text" style={{ fontFamily: "var(--font-heading)", fontSize: 80, fontWeight: 700, lineHeight: 0.95 }}>{h.num}</div>
                  <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", marginTop: 8 }}>{h.label}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "About · Presenter"}</LayoutLabel>
    </div>
  );
}

/* Index slide — clickable contents linking by data-screen-label */
function IndexSlide({ entries = [], idx, total, layoutLabel }) {
  // entries: [{section, items: [{label, slide}]}]
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        <Eyebrow>Template index</Eyebrow>
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.title }}>
          All <span className="gradient-text">layouts</span>
        </h2>
        <p className="muted" style={{ fontSize: TYPE_SCALE.body, marginTop: 20, maxWidth: 1200, lineHeight: 1.5 }}>
          Click any layout to jump to it. Use ←/→ to navigate. Press <strong>?</strong> for help.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, marginTop: 64, flex: 1, alignContent: "start" }}>
          {entries.map((sec, i) => (
            <div key={i}>
              <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--coral)", marginBottom: 18 }}>
                {sec.section}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                {sec.items.map((it, j) => (
                  <li key={j}>
                    <a
                      href="#"
                      onClick={(e) => {
                        e.preventDefault();
                        const stage = document.querySelector("deck-stage");
                        if (stage && typeof stage.goTo === "function") stage.goTo(it.slide - 1);
                      }}
                      style={{
                        display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16,
                        fontSize: 26, color: "var(--foreground)",
                        textDecoration: "none", padding: "8px 0",
                        borderBottom: "1px solid var(--border)",
                        fontFamily: "var(--font-body)", fontWeight: 500,
                      }}
                    >
                      <span>{it.label}</span>
                      <span style={{ color: "var(--coral)", fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{String(it.slide).padStart(2, "0")}</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Index"}</LayoutLabel>
    </div>
  );
}

Object.assign(window, { ProcessHorizontal, TimelineVertical, WorkshopPrompt, AboutPresenter, IndexSlide });