const { KG, COL, BRAND, ICONS, UlcDiagram, ButtonSecondaryDark, ButtonTertiaryLight, KgFooter, Reveal, sp, SwipeRail } = window;

const ULC_BODY = [
  "Kgotla uses the Universal Life Cycle (ULC), a dialogue-based methodology for exploring complex challenges together. Instead of jumping to quick solutions, groups move through phases that deepen understanding and reveal new insights.",
  "Through circles, storytelling, and guided dialogue, participants connect different perspectives and develop shared direction. The result is clarity, stronger relationships, and decisions people are ready to support and implement.",
];

function UlcSection({ style }) {
  return (
    <section className="kg-2up" style={{ ...COL, display: "flex", flexWrap: "wrap", gap: sp(40), rowGap: sp(48), alignItems: "center", ...style }}>
      <Reveal style={{ flex: "1 1 360px", minWidth: 0, maxWidth: 542, display: "flex", flexDirection: "column", gap: sp(32) }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <span style={{ fontFamily: KG.body, fontWeight: 700, fontSize: "var(--t18)", lineHeight: 1.75, color: KG.blue }}>HOW WE WORK</span>
          <h2 style={{ margin: 0, fontFamily: KG.serif, fontWeight: 400, fontSize: "var(--t56)", lineHeight: 1.14, letterSpacing: "-0.01em", color: KG.ink, textWrap: "pretty" }}>Game changing tools for turbulent times</h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: sp(28) }}>
          {ULC_BODY.map((t, i) => <p key={i} style={{ fontFamily: KG.body, fontSize: 16, lineHeight: "28px", color: KG.ink, textWrap: "pretty" }}>{t}</p>)}
        </div>
      </Reveal>
      <Reveal delay={120} style={{ flex: "1 1 420px", minWidth: 0, maxWidth: 764 }}><UlcDiagram /></Reveal>
    </section>
  );
}

function QuoteBand({ style }) {
  return (
    <section className="kg-quote" style={{ height: 515, boxSizing: "border-box", display: "flex", alignItems: "center", justifyContent: "center", padding: "0 var(--kg-pad)", background: "linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(assets/img/kgotla-intervention.jpg) 98.297% 74.625% / 100.212% 104.854% no-repeat", ...style }}>
      <Reveal style={{ width: 879, maxWidth: "100%", display: "flex", gap: "clamp(20px,3vw,32px)", alignItems: "flex-start" }}>
        <div style={{ width: 1, height: "clamp(120px,26vw,181px)", background: KG.white, flexShrink: 0 }} />
        <p style={{ fontFamily: KG.serif, fontWeight: 400, fontSize: "var(--t40)", lineHeight: 1.2, color: KG.white, textWrap: "pretty" }}>“Give us twenty days within a three month period, and we’ll help you make a fundamental shift in your organisation or community.”</p>
      </Reveal>
    </section>
  );
}

const BOOKS = [
  { image: "assets/img/book-lekgotla.jpg", title: "Le Kgotla (Brown book cover)" },
  { image: "assets/img/book-riotinto.png", title: "RioTinto Case Study Book" },
  { image: "assets/img/book-yachting-sm.jpg", title: "The Yachting Matters" },
];

function BooksSection({ style }) {
  return (
    <section style={{ ...COL, display: "flex", flexDirection: "column", gap: sp(76), ...style }}>
      <Reveal as="h2" style={{ margin: 0, fontFamily: KG.serif, fontWeight: 400, fontSize: "var(--t56)", lineHeight: 1.14, letterSpacing: "-0.01em", textAlign: "center", color: "#000000" }}>Books and Publications</Reveal>
      <SwipeRail className="kg-3up" style={{ display: "flex", gap: sp(37), rowGap: sp(48), alignItems: "flex-start" }}>
        {BOOKS.map((b, i) => {
          const href = window.KGBOOKHREF[b.title] || window.KGLINKS.books;
          return (
          <Reveal key={b.title} delay={i * 90} className="kg-card" style={{ flex: "1 1 0", minWidth: 0, display: "flex", flexDirection: "column", gap: 18 }}>
            <a href={href} tabIndex={-1} aria-hidden="true" style={{ height: "clamp(340px,58vw,413px)", alignSelf: "stretch", overflow: "hidden", display: "block" }}>
              <div className="kg-zoom" style={{ width: "100%", height: "100%", background: `url(${b.image}) center / cover no-repeat` }} />
            </a>
            <a className="kg-cardtitle kg-inklink" href={href} style={{ fontFamily: KG.body, fontSize: "var(--t24)", lineHeight: 1.4, letterSpacing: "-0.5px", color: "#000000" }}>{b.title}</a>
            <ButtonTertiaryLight as="a" href={href} iconSrc={`${ICONS}arrow-right.svg`}>Learn more</ButtonTertiaryLight>
          </Reveal>
          );
        })}
      </SwipeRail>
    </section>
  );
}

function NewsletterSection({ style }) {
  const [sent, setSent] = React.useState(false);
  return (
    <section style={{ ...COL, ...style }}>
      <Reveal style={{ minHeight: "clamp(268px,32vw,332px)", boxSizing: "border-box", borderRadius: 20, background: KG.gradient, padding: `${sp(44)} clamp(20px,4vw,48px)` }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: sp(32), alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "center" }}>
            <h2 style={{ margin: 0, fontFamily: KG.serif, fontWeight: 400, fontSize: "var(--t40)", lineHeight: 1.2, textAlign: "center", color: KG.white }}>Stay inspired</h2>
            <p style={{ maxWidth: 575.521, fontFamily: KG.body, fontSize: "var(--t20)", lineHeight: 1.4, letterSpacing: "-0.449px", textAlign: "center", color: KG.white }}>Subscribe to stories, tips, and insights from leaders who've walked the path you're on.</p>
          </div>
          {sent ? (
            <p role="status" style={{ minHeight: 48, display: "flex", alignItems: "center", fontFamily: KG.body, fontWeight: 500, fontSize: "var(--t20)", lineHeight: 1.4, textAlign: "center", color: KG.white }}>Thank you — please check your inbox to confirm.</p>
          ) : (
          <form className="kg-newsform" style={{ width: "100%", maxWidth: 430, display: "flex", flexWrap: "wrap", gap: 12, justifyContent: "center" }} onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
            <input type="email" name="email" required aria-label="Your email address" placeholder="Your email address" style={{ flex: "1 1 220px", minWidth: 0, height: 48, boxSizing: "border-box", borderRadius: 999, border: "none", background: KG.white, padding: "16px 24px", fontFamily: KG.body, fontSize: 16, letterSpacing: "-0.313px", color: KG.ink }} />
            <ButtonSecondaryDark type="submit" style={{ width: 116, height: 48 }}>Join us</ButtonSecondaryDark>
          </form>
          )}
        </div>
        <p style={{ fontFamily: KG.body, fontSize: 14, lineHeight: "20px", textAlign: "center", color: KG.white, textWrap: "pretty" }}>Hundreds of global leaders already with us • Unsubscribe anytime</p>
      </div>
      </Reveal>
    </section>
  );
}

function SiteFooter({ style }) {
  return <KgFooter logoBasePath={BRAND} iconBasePath={ICONS} style={style} />;
}

Object.assign(window, { UlcSection, QuoteBand, BooksSection, NewsletterSection, SiteFooter });