/* Quotes, big numbers, comparisons */

/* ============ QUOTES ============ */

/* Quote A: Pull quote, coral accent border */
function QuotePull({ eyebrow = "INSPIRATIE", quote, author, role, idx, total, layoutLabel }) {
  const len = (quote || "").length;
  const fontSize = len > 200 ? 44 : len > 120 ? 56 : len > 60 ? 72 : 96;
  return (
    <div className="slide bg-light" style={{ position: "relative" }}>
      <Frame style={{ justifyContent: "center" }}>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <Icon name="quote" size={72} color="var(--coral)" strokeWidth={1.5} style={{ marginBottom: 28 }} />
        <blockquote style={{
          fontFamily: "var(--font-heading)",
          fontSize: fontSize, lineHeight: 1.22,
          margin: 0, maxWidth: 1600,
          fontWeight: 400, letterSpacing: "-0.01em",
        }}>
          "{quote}"
        </blockquote>
        <footer style={{ marginTop: 40, fontSize: TYPE_SCALE.body }}>
          <strong style={{ fontWeight: 700 }}>{author}</strong>
          {role && <span style={{ color: "var(--muted)" }}> · {role}</span>}
        </footer>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Quote · Pull"}</LayoutLabel>
    </div>
  );
}

/* Quote B: Dark, dramatic */
function QuoteDark({ quote, author, role, idx, total, layoutLabel }) {
  return (
    <div className="slide bg-navy" style={{ position: "relative" }}>
      <div className="stars" style={{ opacity: 0.5 }} />
      <Frame style={{ justifyContent: "center", alignItems: "flex-start", position: "relative" }}>
        <div style={{ fontFamily: "var(--font-heading)", fontSize: 320, color: "var(--coral)", lineHeight: 0.7, marginBottom: -20, opacity: 0.85 }}>"</div>
        <blockquote style={{
          fontFamily: "var(--font-heading)",
          fontSize: 88, lineHeight: 1.2,
          margin: 0, maxWidth: 1600, color: "#fff",
          fontWeight: 400,
        }}>
          {quote}
        </blockquote>
        <footer style={{ marginTop: 56, fontSize: TYPE_SCALE.body, color: "rgba(255,255,255,0.85)" }}>
          <strong style={{ fontWeight: 700, color: "#fff" }}>— {author}</strong>
          {role && <span style={{ color: "rgba(255,255,255,0.6)" }}> · {role}</span>}
        </footer>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} dark />}
      <LayoutLabel>{layoutLabel || "Quote · Dark"}</LayoutLabel>
    </div>
  );
}

/* Quote C: Testimonial card with portrait slot */
function QuoteTestimonial({ quote, author, role, company, idx, total, layoutLabel }) {
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        <Eyebrow>What people say</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 80, marginTop: 24, alignItems: "center", flex: 1 }}>
          <div className="img-ph" style={{ width: 380, height: 480 }}>
            <Icon name="user-round" size={80} color="rgba(255,255,255,0.85)" />
          </div>
          <div>
            <Icon name="quote" size={64} color="var(--coral)" strokeWidth={1.75} />
            <blockquote style={{
              fontFamily: "var(--font-heading)",
              fontSize: 64, lineHeight: 1.25,
              margin: "32px 0 48px", maxWidth: 1100,
              fontWeight: 400,
            }}>
              "{quote}"
            </blockquote>
            <div style={{ fontSize: TYPE_SCALE.body }}>
              <div style={{ fontWeight: 700 }}>{author}</div>
              <div style={{ color: "var(--muted)" }}>{role}{company ? ` · ${company}` : ""}</div>
            </div>
          </div>
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Quote · Testimonial"}</LayoutLabel>
    </div>
  );
}

/* ============ BIG STATEMENTS ============ */

/* Big single statement — coral key word */
function BigStatement({ pre, accent, post, foot, idx, total, layoutLabel }) {
  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame style={{ justifyContent: "center" }}>
        <h2 className="slide-title" style={{ fontSize: 110, lineHeight: 1.08, maxWidth: 1500, letterSpacing: "-0.015em" }}>
          {pre} {accent && <span className="gradient-text">{accent}</span>} {post}
        </h2>
        {foot && (
          <p style={{ fontSize: 28, color: "var(--muted)", marginTop: 48, maxWidth: 1100, lineHeight: 1.4 }}>
            {foot}
          </p>
        )}
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Big statement"}</LayoutLabel>
    </div>
  );
}

Object.assign(window, { QuotePull, QuoteDark, QuoteTestimonial, BigStatement });