/* eslint-disable */
// AI Foundations, door one. Content brief v4 section 3 (Final; FAQ block Draft).

const FND_PILLARS = [
  {
    key: "value", name: "Value", side: "Where it pays off", color: "var(--ia-dark-blue)",
    body: window.IA_MVP && window.IA_MVP() ? "Working out where AI genuinely helps your organisation, and which core tool fits how you work, drawing on the library of tools we've evaluated and lived with. For some, that's a focused tool decision and a few clear starting points. For others, it's a full AI Blueprint mapping the opportunities worth pursuing and what to build first." : "Working out where AI genuinely helps your organisation, and which core tool fits how you work, drawing on our AI Toolbox, the library of tools we've evaluated and lived with. For some, that's a focused tool decision and a few clear starting points. For others, it's a full AI Blueprint mapping the opportunities worth pursuing and what to build first.",
    link: (window.IA_MVP && window.IA_MVP()) ? null : { label: "See the AI Toolbox", to: "toolbox" },
  },
  {
    key: "controls", name: "Controls", side: "Saying yes safely", color: "var(--ia-blue)",
    body: "Clear rules on who can use AI, for what, and with which information. From a short statement your board can sign off, to a full policy your team can actually follow.",
  },
  {
    key: "literacy", name: "Literacy", side: "Making it stick", color: "var(--ia-light-blue)",
    body: "Sessions shaped to your team, on the tools they'll really use. Sometimes that's a single hands-on session. Sometimes it's a program that runs across teams.",
  },
];

// The "no fixed order" ring. Colours follow FND_PILLARS so the ring and the rows agree.
const CYC_NODES = [
  { key: "value",    name: "Value",    icon: "ia-core.png",     color: FND_PILLARS[0].color, line: FND_PILLARS[0].side },
  { key: "controls", name: "Controls", icon: "ia-controls.png", color: FND_PILLARS[1].color, line: FND_PILLARS[1].side },
  // Dots only — the cyan reads fine as a filled shape, so the ring matches the
  // pillar rows above exactly.
  { key: "literacy", name: "Literacy", icon: "ia-literacy.png", color: FND_PILLARS[2].color, line: FND_PILLARS[2].side },
];

// "Recognise yourself", each engagement opens with the client's own starting worry.
// Worries are drafted from the tracker situations, not verbatim client quotes.
const FND_STORIES = [
  {
    tone: "#00655F", pending: "CS-006",
    worry: "Our people are already using AI and we have no idea what they're putting into it.",
    did: "Controls first, because the firm holds highly sensitive client data. A Responsible AI Use policy with a named accountability owner, a leadership workshop, then two days of hands-on Copilot training onsite for the whole firm, with their own voice and tax research tools built in.",
    who: "A regional accounting firm · 80 staff",
  },
  {
    tone: "#0119B7", pending: "CS-017",
    worry: "We can't switch this on everywhere at once. It would lose the room.",
    did: "Capability built team by team under an ongoing partnership. The Blueprint set direction, finance put its hand up first, and masterclasses and lunch and learn sessions followed the appetite, with the board kept in the loop throughout.",
    who: "A shopping centre owner and manager · 13 sites",
  },
  {
    tone: "#001A55", pending: "CS-049",
    worry: "We're too small for this, aren't we?",
    did: "A Blueprint workshop to choose the core AI tool and the starting points, then a compact program delivered remotely for the club's two leaders, governance documents included. The same three essentials as the biggest engagements.",
    who: "A small regional club · 2 leaders",
  },
];

const FND_FAQS = [
  {
    q: "What's in an AI Blueprint?",
    a: "An AI Blueprint maps where AI genuinely adds value in your organisation. It identifies the core AI tool that fits how you work, the opportunities worth pursuing across your business, and the ones worth building first. It's developed with your team in a workshop, not written about you from a distance, and it becomes the working plan for everything that follows.",
  },
  {
    q: "What's the difference between a Position on AI and a Responsible Use of AI policy?",
    a: "A Position on AI is a short statement owned by your board or leadership: what AI means for your organisation, what you will and won't use it for, and the commitments you're making. A Responsible Use of AI policy is the practical document your people follow day to day: which tools are approved, what data can and can't go into them, and what to do when something's unclear. Most organisations need both, because a board position without a working policy changes nothing, and a policy without a position has no authority behind it.",
  },
  {
    q: "Can we start with training before strategy?",
    a: "Yes, and some organisations should. When a team has never used AI hands-on, a practical session first makes every later conversation better, because people are imagining real possibilities instead of abstractions. Every Foundations engagement covers value, controls and literacy; the order is something we work out together based on where your organisation is.",
  },
  {
    q: "What does AI literacy training involve?",
    a: "Practical, hands-on sessions using the actual tools your organisation has chosen, on your own real work. We don't lecture about AI in general; we sit with your team and build confidence on the tasks they do every week. Depending on your size, that might be a single session for everyone or a program that runs across teams over several weeks.",
  },
];

// ---------- The triangle: Value, Controls, Literacy ----------
function FoundationsTriangle({ active }) {
  const apex = [300, 100], bl = [115, 385], br = [485, 385];
  const sw = 74;
  const op = (k) => (!active ? 1 : k === active ? 1 : 0.16);
  return (
    <div className="tri-stage">
      <svg viewBox="0 0 600 450" role="img" aria-label="The Foundations triangle: Value, Controls, Literacy" style={{ width: "100%", height: "auto", display: "block" }}>
        <g opacity={op("value")} style={{ transition: "opacity .3s" }}>
          <line x1={apex[0]} y1={apex[1]} x2={bl[0]} y2={bl[1]} stroke="var(--ia-dark-blue)" strokeWidth={sw} strokeLinecap="round" />
          <text x="207" y="242" textAnchor="middle" dominantBaseline="central" transform="rotate(-57 207 242)" fill="#fff" fontFamily="var(--font-display)" fontWeight="700" fontSize="25" letterSpacing="3">VALUE</text>
        </g>
        <g opacity={op("controls")} style={{ transition: "opacity .3s" }}>
          <line x1={apex[0]} y1={apex[1]} x2={br[0]} y2={br[1]} stroke="var(--ia-blue)" strokeWidth={sw} strokeLinecap="round" />
          <text x="393" y="242" textAnchor="middle" dominantBaseline="central" transform="rotate(57 393 242)" fill="#fff" fontFamily="var(--font-display)" fontWeight="700" fontSize="25" letterSpacing="3">CONTROLS</text>
        </g>
        <g opacity={op("literacy")} style={{ transition: "opacity .3s" }}>
          <line x1={bl[0]} y1={bl[1]} x2={br[0]} y2={br[1]} stroke="var(--ia-light-blue)" strokeWidth={sw + 6} strokeLinecap="round" />
          <text x="300" y="385" textAnchor="middle" dominantBaseline="central" fill="var(--ia-dark-blue)" fontFamily="var(--font-display)" fontWeight="700" fontSize="25" letterSpacing="3">LITERACY</text>
        </g>
      </svg>
    </div>
  );
}

function AiFoundationsScreen({ go, t }) {
  return (
    <div data-screen-label="02 AI Foundations">
      {/* HERO */}
      <section className="hero dot-grid acc-hero fdn-hero">
        <div className="container">
          <Crumbs items={[{ label: "Home", to: "home" }, "AI Foundations"]} go={go} />
          <div className="svc-hero">
            <div>
              <h1 className="h-display" style={{ maxWidth: "16ch" }}>AI <em>Foundations</em></h1>
              <p className="lede" style={{ maxWidth: "58ch" }}>
                One engagement that covers the three things every organisation needs to get right with AI:
                where the value is, how to keep it safe, and how to bring your people along.
              </p>
            </div>
            <div className="svc-hero-tri"><FoundationsTriangle /></div>
          </div>
        </div>
      </section>

      {/* THE TRIANGLE */}
      <section className="section section--white">
        <div className="container">
          <div className="section-head" data-reveal>
            <h2 className="h-section" style={{ maxWidth: "22ch" }}>Each one on its own falls short. Together, they work.</h2>
            <p className="lede">
              We've seen where AI adoption goes wrong, and it's rarely the technology. It's brilliant tools
              with no guardrails, or policies that sit in a drawer, or training with nothing to apply it to.
            </p>
          </div>

          <div className="pillar-rows" data-reveal="group">
            {FND_PILLARS.map((p) => (
              <div key={p.key} className="pillar-row" style={{ ["--pr"]: p.color }}>
                <div className="pillar-row-head">
                  <span className="pillar-swatch" style={{ background: p.color }} />
                  <div>
                    <div className="pillar-row-name">{p.name}</div>
                  </div>
                </div>
                <div className="pillar-row-body">
                  <p>{p.body}</p>
                  {p.link && <LinkOut onClick={() => go(p.link.to)}>{p.link.label}</LinkOut>}
                </div>
              </div>
            ))}
          </div>

        </div>
      </section>

      {/* FLEXIBLE SEQUENCE — the three pillars as a row of large icons over a
          rule, each drifting on its own phase so no one of them reads as first. */}
      <section className="section section--paper cyc-sec">
        <div className="container">
          <div className="cyc">
            <svg className="cyc-svg" viewBox="0 0 300 280" role="img" aria-label="Value, Controls and Literacy in any order">
              <circle cx="150" cy="140" r="98" fill="none" stroke="#E3E8F2" strokeWidth="2" strokeDasharray="6 8"></circle>
              <circle cx="150" cy="42" r="17" fill={CYC_NODES[0].color}></circle>
              <circle cx="235" cy="189" r="17" fill={CYC_NODES[1].color}></circle>
              <circle cx="65" cy="189" r="17" fill={CYC_NODES[2].color}></circle>
              <g fontFamily="Poppins" fontSize="12.5" fontWeight="600" fill="var(--ia-dark-blue)">
                <text x="150" y="16" textAnchor="middle">{CYC_NODES[0].name}</text>
                <text x="256" y="228" textAnchor="middle">{CYC_NODES[1].name}</text>
                <text x="46" y="228" textAnchor="middle">{CYC_NODES[2].name}</text>
              </g>
            </svg>
            <div className="cyc-copy">
              <h2 className="h-section" style={{ maxWidth: "20ch" }}>Flexible sequence</h2>
              <p className="lede">
                Every Foundations engagement covers all three, but there's no fixed order. Some organisations
                start with controls because governance comfort comes first. Some start with a hands-on session
                so the team can see what's possible. Some want the Blueprint straight away. Where you start is
                the first thing we work out together.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ENGAGEMENT SHAPES — held back from the MVP until the stories are signed off */}
      {!(window.IA_MVP && window.IA_MVP()) && (
      <section className="section section--white">
        <div className="container">
          <div className="section-head">
            <Eyebrow>You might recognise one of these</Eyebrow>
            <h2 className="h-section">The shape depends on you. Here's what that has looked like:</h2>
          </div>
          <div className="zig">
            {FND_STORIES.map((s, i) => (
              <div className={`zg ${i % 2 ? "zg--rev" : ""}`} key={s.pending} style={{ ["--zt"]: s.tone }}>
                <div className="zg-q"><p>“{s.worry}”</p></div>
                <div className="zg-a">
                  <div className="zg-k">What we did</div>
                  <p>{s.did}</p>
                  <div className="zg-res"><span className="zg-pend">Outcome pending</span><span className="zg-cs">{s.pending}</span></div>
                  <div className="zg-who">
                    <span className="zg-lg"><image-slot id={`zig-logo-${s.pending}`} placeholder="Client logo" shape="rect" fit="contain" /></span>
                    {s.who}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* CLOSER, matching the Accelerators "after the build" pattern */}
      <section className="section section--white">
        <div className="container">
          <div className="atb">
            <p className="atb-statement">
              Foundations often surfaces <strong>ideas worth building</strong>. When that happens, our
              AI Accelerators <em>pick up where the foundations leave off.</em>
            </p>
            <div className="atb-note">
              <p>
                Available as a fixed engagement or as an ongoing partnership, whichever suits how you
                like to work.
              </p>
              <div className="atb-links">
                <LinkOut onClick={() => go("accelerators")}>AI Accelerators</LinkOut>
                <LinkOut onClick={() => go("how-we-work")}>How we work</LinkOut>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section--white fnd-faq" style={{ paddingBottom: 96 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>Common questions</Eyebrow>
            <h2 className="h-section">Foundations, answered plainly.</h2>
          </div>
          <div style={{ marginTop: 20 }}><FaqAccordion items={FND_FAQS} id="foundations" /></div>
          <div style={{ marginTop: 20 }}><LinkOut onClick={() => go("faqs")}>See all FAQs</LinkOut></div>
        </div>
      </section>
    </div>
  );
}

window.AiFoundationsScreen = AiFoundationsScreen;
window.FoundationsTriangle = FoundationsTriangle;
