/* eslint-disable */
// Foundations overview, pillar overview page, parallel to BuildScreen.
// Centralises the triangle + 1-2-3 process so the three Foundations subpages
// (AI Setup, AI Governance, AI Literacy) don't each repeat it.

function FoundationsScreen({ go, t }) {
  return (
    <div data-screen-label="03 Foundations">
      {/* HERO */}
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="container">
          <Crumbs items={["Services", "Foundations"]} />
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr .7fr", gap: 64, alignItems: "end", marginTop: 22 }}>
            <div>
              <Tag tone="enable" dot>Foundations</Tag>
              <h1 className="h-display" style={{ marginTop: 16 }}>
                The groundwork that makes AI <em>actually stick.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>
                Before AI pays off, three things have to be true: the right everyday assistants
                are set up, clear rules govern how they're used, and your team has the skills
                to use them well. Tools, rules, skills, we put all three in place.
              </p>
            </div>
            <div className="fdn-steps">
              {[
                { n: 1, side: "The tools", label: "AI Setup", to: "ai-setup" },
                { n: 2, side: "The rules", label: "AI Governance", to: "governance" },
                { n: 3, side: "The skills", label: "AI Literacy", to: "literacy" },
              ].map((s) => (
                <button key={s.n} className="fdn-step" onClick={() => go(s.to)}>
                  <span className="fdn-step-n">{s.n}</span>
                  <span className="fdn-step-body">
                    <span className="fdn-step-side">{s.side}</span>
                    <span className="fdn-step-label">{s.label}</span>
                  </span>
                  <Icon name="arrow-right" size={16} className="fdn-step-arr" />
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* TRIANGLE + 1-2-3 PROCESS, overview mode (all three sides lit, all clickable) */}
      <EnablementWhere go={go} />

      {/* OFF-RAMP */}
      <section className="section section--white" style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <OffRamp
            label="Not sure where to start?"
            title={<span>Most teams begin with an <strong>AI Blueprint</strong>, it tells you which foundations to lay first, and in what order.</span>}
            cta="Book a Blueprint"
            onCta={() => go("blueprint")} />
        </div>
      </section>
    </div>);

}

window.FoundationsScreen = FoundationsScreen;