const DS = "_ds/kgotla-design-system-4cd0b1ed-a3a2-4311-9531-bf0c47bca08b/";
const BRAND = "assets/brand/";
const ICONS = "assets/icons/";
const KG = {
  serif: 'var(--font-display)', body: 'var(--font-body)',
  ink: '#0F172B', blue: '#0051FF', white: '#FFFFFF', slate: '#62748E',
  gradient: 'linear-gradient(90deg, #0051FF 1%, #009780 98%)'
};
const { LogoWhite, ButtonPrimaryDark, ButtonPrimaryLight, ButtonSecondaryLight, ButtonSecondaryDark, ButtonTertiaryLight, Icon, Footer } = window.KgotlaDesignSystem_4cd0b1;
const { Reveal, REDUCED, sp } = window;

/* Content column: the 1312px grid of the Figma page, centred at any viewport width.
   The gutter is fluid (20px at 320 → 64px from 1392 up). */
const COL = { width: "100%", maxWidth: 1440, marginLeft: "auto", marginRight: "auto", paddingLeft: "var(--kg-pad)", paddingRight: "var(--kg-pad)", boxSizing: "border-box" };

/* Nav lives in site-nav.jsx (window.NAV_LINKS) — one list for the whole site. */
const L = window.KGLINKS;

const INTRO_PARAS = [
"For over 25 years, the Kgotla®Company has acted as leadership partners to more than 85 companies looking to effect turnaround management, create large-scale organisational change, operational efficiencies, or navigate complex corporate challenges.",
"Our success is based on advancing your success, which we do by facilitating decision-making through dialogue with your whole company. This results in change that is collectively supported, it mitigates resistance risk and promotes sustainable value throughout your organisation.",
"Using our proprietary tools - plus a tree, a fire and art - we facilitate large-scale transformation, employee engagement and belonging, plus internal collaboration and culture-change.",
"Drawing inspiration from the traditional communal assembly model \u2018leKgotla\u2019 employed in Botswana, we cultivate an environment where every voice is heard."];

const LOGOS = [
  { src: "assets/img/logo-1.png", alt: "Shell", h: 72 },
  { src: "assets/img/logo-2.png", alt: "Rio Tinto", h: 34 },
  { src: "assets/img/logo-3.png", alt: "KLM Royal Dutch Airlines", h: 58 },
  { src: "assets/img/logo-4.png", alt: "Rabobank", h: 44 },
  { src: "assets/img/logo-5.png", alt: "EY", h: 50 },
];

function Eyebrow({ children, lineHeight = "24px", style }) {
  return <span style={{ fontFamily: KG.body, fontWeight: 700, fontSize: "var(--t18)", lineHeight, color: KG.blue, ...style }}>{children}</span>;
}

function HeroIntro({ delay, children }) {
  const [shown, setShown] = React.useState(REDUCED);
  React.useEffect(() => { const t = setTimeout(() => setShown(true), 80); return () => clearTimeout(t); }, []);
  return (
    <div style={{ opacity: shown ? 1 : 0, transform: shown ? "none" : "translateY(16px)", transition: REDUCED ? "none" : `opacity 700ms cubic-bezier(.4,0,.2,1) ${delay}ms, transform 700ms cubic-bezier(.4,0,.2,1) ${delay}ms` }}>{children}</div>
  );
}

function HeroSection() {
  return (
    <section style={{ background: "#E8F1FF", display: "flex", flexDirection: "column", gap: sp(72), alignItems: "center", paddingBottom: sp(104) }}>
      <div style={{ position: "relative", alignSelf: "stretch", minHeight: "var(--kg-hero-min)", boxSizing: "border-box", padding: "16px 0", display: "flex", flexDirection: "column" }}>
        <div style={{ position: "absolute", inset: 0, overflow: "hidden", borderRadius: "0 0 clamp(28px,5.4vw,70px) clamp(28px,5.4vw,70px)", background: KG.gradient }}>
          <div className="kg-splash" style={{ position: "absolute", left: "max(709px, calc(100% - 731px))", top: 21, width: 722, height: 576, overflow: "hidden" }}>
            <window.SplashShape style={{ position: "absolute", left: 15, top: 17 }} />
          </div>
        </div>
        <div style={{ position: "relative", ...COL, flex: 1, display: "flex", flexDirection: "column", gap: sp(88) }}>
          <window.SiteHeader tone="dark" cta="Get started" />
          <div style={{ width: "100%", maxWidth: 643, paddingBottom: sp(40), display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
            <HeroIntro delay={0}>
              <h1 style={{ margin: 0, fontFamily: KG.serif, fontWeight: 400, fontSize: "var(--t84)", lineHeight: 1.05, letterSpacing: "-1px", color: KG.white, textWrap: "pretty" }}>Leadership through dialogue</h1>
            </HeroIntro>
            <HeroIntro delay={120}>
              <p style={{ fontFamily: KG.body, fontWeight: 400, fontSize: "var(--t24)", lineHeight: 1.4, letterSpacing: "-0.5px", color: KG.white, textWrap: "pretty" }}>We guide leaders and organizations to reconnect with purpose, people and potential through structured conversations that ignite change.</p>
            </HeroIntro>
            <HeroIntro delay={240}>
              <ButtonPrimaryDark as="a" href={L.contact} style={{ width: 213, height: 48 }}>Start a conversation</ButtonPrimaryDark>
            </HeroIntro>
          </div>
          <window.ScrollCue tone="light" />
        </div>
      </div>
      <Reveal style={{ alignSelf: "stretch", display: "flex", flexDirection: "column", gap: sp(28), alignItems: "center" }}>
        <Eyebrow style={{ textAlign: "center" }}>TRUSTED BY INDUSTRY LEADERS</Eyebrow>
        <div style={{ alignSelf: "stretch", overflow: "hidden" }}>
          <div className="kg-marquee" style={{ display: "flex", width: "max-content", gap: "var(--kg-marquee-gap)", alignItems: "center", paddingLeft: "var(--kg-marquee-gap)" }}>
            {[0, 1, 2, 3].map((set) =>
            LOGOS.map((l) =>
            <img key={set + l.src} src={l.src} alt={set === 0 ? l.alt : ""} style={{ height: `calc(${l.h}px * var(--kg-logo-scale))`, width: "auto", display: "block", flexShrink: 0 }} />
            )
            )}
          </div>
        </div>
      </Reveal>
      <div className="kg-2up" style={{ ...COL, display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "center", gap: sp(64) }}>
        <Reveal style={{ flex: "1 1 380px", minWidth: 0, maxWidth: 540, display: "flex", flexDirection: "column", gap: sp(42), alignItems: "flex-start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: sp(48) }}>
            <h2 style={{ margin: 0, fontFamily: KG.serif, fontWeight: 400, fontSize: "var(--t40)", lineHeight: 1.2, color: KG.ink, textWrap: "pretty" }}>How do you get everyone in your organisation backing your leadership plan?</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: sp(28) }}>
              {INTRO_PARAS.map((t, i) =>
              <p key={i} style={{ fontFamily: KG.body, fontSize: 16, lineHeight: "28px", color: KG.ink, textWrap: "pretty" }}>{t}</p>
              )}
            </div>
          </div>
          <ButtonSecondaryLight as="a" href={L.services} style={{ width: 161, height: 48 }}>Tell me more</ButtonSecondaryLight>
        </Reveal>
        <Reveal delay={120} className="kg-fluidh-tall" style={{ flex: "1 1 420px", minWidth: 0, maxWidth: 641, height: 675, borderRadius: 20, background: "linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)), url(assets/img/intervention-og-15.jpg) 17.201% 102.211% / 158.880% 100.725% no-repeat" }} />
      </div>
    </section>);
}

Object.assign(window, { DS, BRAND, ICONS, KG, COL, Eyebrow, HeroSection, LogoWhite, ButtonPrimaryDark, ButtonPrimaryLight, ButtonSecondaryLight, ButtonSecondaryDark, ButtonTertiaryLight, KgIcon: Icon, KgFooter: Footer });