/* Agenda / TOC + bullet/list/text-led slides */

/* ============ AGENDA ============ */

/* Agenda A: Numbered vertical list */
function AgendaNumbered({ items = [], idx, total, layoutLabel, title, titleAccent }) {
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        <Eyebrow>Agenda · Inhoud</Eyebrow>
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.title }}>
          {title ? <>{title} {titleAccent && <span className="gradient-text">{titleAccent}</span>}</>
            : <>What we'll <span className="gradient-text">build</span> today</>}
        </h2>
        <div style={{ marginTop: items.length > 4 ? 48 : 80, display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: `repeat(${Math.ceil(items.length / 2)}, auto)`, gridAutoFlow: "column", columnGap: 100, rowGap: items.length > 4 ? 24 : 36 }}>
          {items.map((it, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "baseline", borderTop: "1px solid var(--border)", paddingTop: items.length > 4 ? 22 : 28 }}>
              <div style={{ fontFamily: "var(--font-heading)", color: "var(--coral)", fontSize: TYPE_SCALE.subtitle, fontWeight: 600, lineHeight: 1.35 }}>
                {String(i + 1).padStart(2, "0")}
              </div>
              <div>
                <div style={{ fontSize: TYPE_SCALE.subtitle, fontWeight: 600, fontFamily: "var(--font-heading)" }}>
                  {it.title}
                </div>
                {it.note && <div className="muted" style={{ fontSize: TYPE_SCALE.body, marginTop: 8 }}>{it.note}</div>}
              </div>
            </div>
          ))}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Agenda · Numbered"}</LayoutLabel>
    </div>
  );
}

/* Agenda B: Pill chips, horizontal flow */
function AgendaChips({ items = [], current = -1, idx, total, layoutLabel }) {
  return (
    <div className="slide bg-light" style={{ position: "relative" }}>
      <Frame>
        <Eyebrow>Roadmap voor vandaag</Eyebrow>
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.title }}>
          The plan
        </h2>
        <div style={{ marginTop: 96, display: "flex", flexWrap: "wrap", gap: 20, alignItems: "center" }}>
          {items.map((it, i) => (
            <React.Fragment key={i}>
              <div style={{
                padding: "22px 36px",
                borderRadius: 9999,
                fontSize: TYPE_SCALE.body,
                fontWeight: 600,
                background: i === current ? "linear-gradient(135deg, var(--coral) 0%, var(--coral-light) 100%)" : "#fff",
                color: i === current ? "#fff" : "var(--foreground)",
                border: i === current ? "0" : "1px solid var(--border)",
                boxShadow: i === current ? "var(--shadow-coral)" : "none",
                display: "inline-flex", alignItems: "center", gap: 14,
              }}>
                <span style={{ opacity: 0.7, fontVariantNumeric: "tabular-nums" }}>{String(i + 1).padStart(2, "0")}</span>
                {it}
              </div>
              {i < items.length - 1 && <Icon name="arrow-right" size={28} color="var(--muted)" />}
            </React.Fragment>
          ))}
        </div>
        <div style={{ marginTop: 100, fontSize: TYPE_SCALE.body, color: "var(--muted)", maxWidth: 1100, lineHeight: 1.5 }}>
          No slides without doing. Every section pairs an idea with a hands-on prompt.
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Agenda · Chips"}</LayoutLabel>
    </div>
  );
}

/* ============ TEXT-LED ============ */

/* Bullets: 3-5 bullets */
function Bullets({ eyebrow = "BUILD LOG", 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.title, maxWidth: 1500 }}>{title}</h2>
        <ul style={{ listStyle: "none", padding: 0, margin: "72px 0 0", display: "flex", flexDirection: "column", gap: SPACING.itemGap, maxWidth: 1500 }}>
          {items.map((it, i) => (
            <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 28, alignItems: "baseline" }}>
              <span style={{ width: 14, height: 14, borderRadius: "50%", background: "var(--coral)", marginTop: 18, display: "inline-block" }} />
              <span style={{ fontSize: TYPE_SCALE.subtitle, lineHeight: 1.35 }}>
                {typeof it === "string" ? it : (
                  <>
                    <strong style={{ fontFamily: "var(--font-heading)", fontWeight: 600 }}>{it.head}</strong>
                    {it.tail && <span style={{ color: "var(--muted)" }}> — {it.tail}</span>}
                  </>
                )}
              </span>
            </li>
          ))}
        </ul>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Bullets"}</LayoutLabel>
    </div>
  );
}

/* Headline-only — one big sentence */
function Headline({ eyebrow, title, titleAccent, footnote, 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" }}>
        {eyebrow && <Eyebrow dark={dark}>{eyebrow}</Eyebrow>}
        <h2 className="slide-title" style={{ fontSize: 144, color: dark ? "#fff" : undefined, lineHeight: 1.05, maxWidth: 1500 }}>
          {title} {titleAccent && <span className="gradient-text">{titleAccent}</span>}
        </h2>
        {footnote && (
          <div style={{ fontSize: TYPE_SCALE.body, marginTop: 48, color: dark ? "rgba(255,255,255,0.7)" : "var(--muted)" }}>
            {footnote}
          </div>
        )}
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} dark={dark} />}
      <LayoutLabel>{layoutLabel || "Headline"}</LayoutLabel>
    </div>
  );
}

/* Two-up text: lead + body */
function LeadAndBody({ eyebrow, title, lead, body, 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.title, maxWidth: 1300 }}>{title}</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, marginTop: 80 }}>
          <p style={{ fontFamily: "var(--font-heading)", fontSize: TYPE_SCALE.subtitle, lineHeight: 1.3, margin: 0 }}>{lead}</p>
          <p style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.55, color: "var(--muted)", margin: 0 }}>{body}</p>
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Lead + body"}</LayoutLabel>
    </div>
  );
}

Object.assign(window, { AgendaNumbered, AgendaChips, Bullets, Headline, LeadAndBody });