const { KG, COL, Eyebrow, ICONS, BRAND, Reveal, sp, useNarrow, SwipeRail } = window;
const { Frame5264 } = window.KgotlaDesignSystem_4cd0b1;

function Arrow({ size = 12, tone = "ink" }) {
  return <img src={`assets/tinted/arrow-right-${tone}.svg`} alt="" style={{ width: size, height: size * 0.58, flexShrink: 0, display: "block" }} />;
}

const CASES = [
  {
    title: "Strengthening KLM's leadership through dialogue",
    body: "KLM has been a Kgotla client since 2003. In 2014, they introduced the Kgotla Workplace at Schiphol — bringing scattered departments into one hub built on openness, where leaders decide in dialogue with their people.",
    image: "url(assets/img/case-klm-sm.jpg) center / cover no-repeat, #E2E8F0",
    anchor: "05cbe678c5-div-25-9",
  },
  {
    title: "Rabobank’s large-scale transformation",
    body: "Rabobank Utrecht's 550 employees faced a decade of radical change in pensions and financial responsibility. Kgotla reached every board member, director, manager and employee in 7 days, driving decisions ahead of a restructuring affecting 110 local banks.",
    results: [["550", "employees engaged"], ["7", "days of dialogue across 3 months"], ["110", "local banks affected by the wider transformation"]],
    image: "url(assets/img/case-rabobank-sm.jpg) center 30% / cover no-repeat, #E2E8F0",
  },
  {
    title: "Rio Tinto's employees journey to shared understanding",
    body: "Workers at a Rio Tinto mine in South Africa were unsettled by rumours of closure and safety concerns. A 10-day Kgotla with 4,000 employees surfaced 500 ideas, leading to 35 decisions that improved safety and mining techniques.",
    results: [["4,000", "people involved"], ["500", "ideas generated"], ["35", "decision taken (over 10 days)"]],
    image: "url(assets/img/case-riotinto.jpg) center / cover no-repeat, #E2E8F0",
  },
];

/* Each story pins to the top and the next one slides over it. On phones and
   tablets the panel is sized to fill the screen so the stack reads the same way. */
function CaseStudy({ item, index }) {
  const narrow = useNarrow();
  return (
    <Reveal y={28} style={{ alignSelf: "stretch", background: KG.blue, padding: narrow ? `${sp(26)} 0 ${sp(40)}` : `${sp(48)} 0`, minHeight: narrow ? "100svh" : undefined, boxSizing: "border-box", display: "flex", justifyContent: "center", alignItems: narrow ? "flex-start" : "center", boxShadow: index === 0 ? "none" : "0 -6px 14px rgba(0,0,0,0.22)" }} data-comment-anchor={item.anchor}>
      <div className="kg-2up kg-2up-rev" style={{ ...COL, display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-start", gap: sp(64), rowGap: sp(22) }}>
        <div style={{ flex: "1 1 360px", minWidth: 0, maxWidth: 571, display: "flex", flexDirection: "column", gap: sp(24) }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <h3 style={{ margin: 0, fontFamily: KG.serif, fontWeight: 400, fontSize: "var(--t40)", lineHeight: 1.25, letterSpacing: "-0.5px", color: KG.white, textWrap: "pretty" }}>{item.title}</h3>
            <p style={{ fontFamily: KG.body, fontSize: 16, lineHeight: "28px", color: KG.white, textWrap: "pretty" }}>{item.body}</p>
          </div>
          {item.results && (
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <span style={{ fontFamily: KG.body, fontWeight: 500, fontSize: 14, lineHeight: "20px", letterSpacing: "2.8px", color: KG.white }}>RESULTS</span>
              <div style={{ display: "flex", flexWrap: "wrap", gap: "20px clamp(20px,3.4vw,40px)", alignItems: "flex-start" }}>
                {item.results.map(([v, l]) => (
                  <div key={l} style={{ flex: "1 1 110px", minWidth: 0, maxWidth: 170, display: "flex", flexDirection: "column", gap: 8 }}>
                    <span style={{ fontFamily: KG.body, fontSize: "var(--t30)", lineHeight: 1.2, color: KG.white }}>{v}</span>
                    <span style={{ fontFamily: KG.body, fontSize: 12, lineHeight: "16px", color: KG.white }}>{l}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
        <div className="kg-card kg-casehero" style={{ flex: "1 1 420px", minWidth: 0, maxWidth: 638, height: 378, borderRadius: "clamp(20px,3.4vw,40px)", overflow: "hidden", position: "relative" }}>
          <div className="kg-zoom" style={{ position: "absolute", inset: 0, background: item.image }} />
          <a className="kg-pill" href={window.KGLINKS.soon} style={{ position: "absolute", right: 24, bottom: 25, boxSizing: "border-box", height: 54, borderRadius: 999, background: KG.white, padding: "17px 32px", display: "flex", gap: 12, alignItems: "center", color: "#000000" }}>
            <span style={{ fontFamily: KG.body, fontWeight: 500, fontSize: 14, lineHeight: "20px" }}>Read story</span>
            <Arrow size={16} tone="black" />
          </a>
        </div>
      </div>
    </Reveal>
  );
}

function ImpactSection({ style }) {
  return (
    <section id="impact" style={{ display: "flex", flexDirection: "column", gap: sp(32), alignItems: "center", scrollMarginTop: 24, ...style }}>
      <Reveal style={{ ...COL, display: "flex", flexDirection: "column", gap: sp(35) }}>
        <div style={{ display: "flex", flexDirection: "column" }}>
          <Eyebrow lineHeight="26px" style={{ textAlign: "center" }}>IMPACT STORIES</Eyebrow>
          <h2 style={{ margin: 0, fontFamily: KG.serif, fontWeight: 400, fontSize: "var(--t56)", lineHeight: 1.15, textAlign: "center", color: KG.ink }}>Some of the clients we’ve helped</h2>
        </div>
        <a className="kg-tertiary" href={window.KGLINKS.soon} style={{ display: "flex", gap: 12, justifyContent: "flex-end", alignItems: "center", color: KG.ink }}>
          <span style={{ fontFamily: KG.body, fontWeight: 500, fontSize: 14, lineHeight: "20px" }}>See all case studies</span>
          <Arrow size={16} />
        </a>
      </Reveal>
      <div style={{ alignSelf: "stretch", display: "flex", flexDirection: "column" }}>
        {CASES.map((item, i) => (
          <div key={item.title} style={{ position: "sticky", top: 0, zIndex: i + 1 }}>
            <CaseStudy item={item} index={i} />
          </div>
        ))}
      </div>
    </section>
  );
}

function FacilitatePillar({ icon, iconStyle, discPadding, title, body, delay }) {
  return (
    <Reveal delay={delay} style={{ flex: "0 1 300px", minWidth: 0, display: "flex", flexDirection: "column", gap: sp(58), alignItems: "center" }}>
      <div style={{ width: "clamp(128px,19vw,184px)", height: "clamp(128px,19vw,184px)", borderRadius: "50%", boxSizing: "border-box", background: KG.gradient, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
        <img src={icon} alt="" style={{ display: "block", width: "auto", height: "auto", maxWidth: `${(iconStyle.width / 184 * 100).toFixed(1)}%`, maxHeight: `${(iconStyle.height / 184 * 100).toFixed(1)}%` }} />
      </div>
      <div style={{ alignSelf: "stretch", display: "flex", flexDirection: "column", gap: 16 }}>
        <span style={{ textAlign: "center", fontFamily: KG.body, fontWeight: 500, fontSize: "var(--t24)", lineHeight: 1.33, letterSpacing: "-0.5px", color: KG.blue }}>{title}</span>
        <span style={{ textAlign: "center", fontFamily: KG.body, fontSize: "var(--t18)", lineHeight: 1.62, color: "#000000", textWrap: "pretty" }}>{body}</span>
      </div>
    </Reveal>
  );
}

function FacilitateSection({ style }) {
  return (
    <section style={{ ...COL, display: "flex", flexDirection: "column", gap: sp(60), alignItems: "center", ...style }}>
      <Reveal as="h2" style={{ margin: 0, alignSelf: "stretch", fontFamily: KG.serif, fontWeight: 400, fontSize: "var(--t56)", lineHeight: 1.14, letterSpacing: "-0.01em", textAlign: "center", color: KG.ink }}>What we facilitate</Reveal>
      <SwipeRail wide className="kg-3up kg-swipe-one" style={{ width: "100%", maxWidth: 1110, display: "flex", gap: "clamp(40px,6.2vw,81px)", alignItems: "flex-start", justifyContent: "center" }}>
        <Reveal style={{ flex: "0 1 348px", minWidth: 0 }}><Frame5264 width="100%" mark={`${BRAND}ulc-mark-white.svg`} /></Reveal>
        <FacilitatePillar
          delay={90}
          icon="assets/tinted/facilitate-icon-2-white.svg" iconStyle={{ width: 114, height: 118 }} discPadding="29px 35px"
          title="Employee Engagement and Belonging"
          body="Your team experiences meaningful interaction through art, storytelling, and collaboration—strengthening relationships, sparking shared purpose, and cultivating a sense of belonging across every layer of your organisation."
        />
        <FacilitatePillar
          delay={180}
          icon="assets/tinted/facilitate-icon-3-white.svg" iconStyle={{ width: 123, height: 80 }} discPadding="51px 32px 53px 29px"
          title="Internal Collaboration and Culture"
          body="Motivating teams across locations and cultures can be challenging. With our approach, it becomes not only possible, but energising. By fostering inclusive engagement and shared ownership, you’ll see a rise in participation, enthusiasm, and a renewed sense of unity across your entire organisation."
        />
      </SwipeRail>
    </section>
  );
}

Object.assign(window, { ImpactSection, FacilitateSection, Arrow });