// Foundations — AI Adoption sub-page

function MaturitySpectrum() {
  const stages = [
    { num: '01', label: 'Uncoordinated', desc: 'AI in use individually, with no shared approach or policy.' },
    { num: '02', label: 'Aware',          desc: 'Leadership has named the gap. Conversations are starting.' },
    { num: '03', label: 'Policy-forming', desc: 'A governance framework is being drafted. Use is inconsistent across teams.' },
    { num: '04', label: 'Practicing',     desc: 'Shared workflows exist in some areas. Formal training is underway.' },
    { num: '05', label: 'Embedded',       desc: 'AI is a normal part of operations, governed and broadly adopted.' },
  ];

  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setActive(s => (s + 1) % stages.length), 3200);
    return () => clearInterval(id);
  }, [paused]);

  const fillPct = (active / (stages.length - 1)) * 100;

  return (
    <>
      <div
        className="q-maturity-track"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
      >
        <div className="q-maturity-rail">
          <div className="q-maturity-rail-fill" style={{ width: `${fillPct}%` }} />
        </div>
        {stages.map((stage, i) => (
          <div
            className={`q-maturity-stage${i === active ? ' q-maturity-stage--active' : ''}`}
            key={i}
            onClick={() => { setActive(i); setPaused(true); }}
            style={{ cursor: 'pointer' }}
          >
            <div className="q-maturity-node"><span>{stage.num}</span></div>
            <div className="q-maturity-content">
              <div className="q-maturity-label">{stage.label}</div>
              <div className="q-maturity-desc">{stage.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function FoundationsAIPage({ setRoute }) {
  return (
    <div data-screen-label="07a Foundations · AI">
      <section className="q-svc-hero2" style={{ padding: '0 0 100px' }}>
        <SiteNav route="foundations-ai" setRoute={setRoute} theme="dark" />
        <div className="q-wrap q-svc-hero2-inner" style={{ paddingTop: 120 }}>
          <div className="q-eyebrow q-eyebrow--dark"><span className="q-eyebrow-link" onClick={() => setRoute('foundations')}>Foundations</span> · AI Adoption</div>
          <h1>From informal AI use to <em>coordinated practice.</em></h1>
          <p className="lede">
            Most foundation staff are already using AI tools on their own. The question is how to move from individual experimentation to shared, intentional practice: the right tools, in the right workflows, with a governance framework the board can stand behind.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a className="qbtn qbtn--paper">Start a conversation <Arrow /></a>
            <a className="qbtn qbtn--outline-dark" onClick={() => setRoute('foundations')}>Back to Foundations <Arrow /></a>
          </div>
          <dl className="q-svc-hero2-meta">
            <div><dt>Typical profile</dt><dd>Independent and community foundations, $100M+ in assets</dd></div>
            <div><dt>Common entry</dt><dd>Initial Evaluation, 2 to 4 weeks</dd></div>
            <div><dt>Who leads</dt><dd>Partners who work with these tools every day</dd></div>
          </dl>
        </div>
      </section>

      <section className="q-situation">
        <div className="q-wrap">
          <div className="q-situation-grid">
            <div>
              <div className="q-eyebrow">The situation</div>
            </div>
            <div>
              <p><strong>The tools are already in the building.</strong> Development officers use AI for grant summaries. Program staff use it for research synthesis. Some have found workflows that save hours every week. Most haven't. None of it was coordinated, and nobody is sure what the foundation's official position is.</p>
              <p><strong>Boards are starting to ask.</strong> Not the technical detail. The shape of the policy, the risk posture, the question of where the foundation stands. These are governance questions as much as operational ones, and they land on the CEO's desk without much in the way of existing playbook.</p>
              <p><strong>The existing advisors have a gap here.</strong> Your legal counsel, your investment consultants, your longtime strategic partners are thoughtful and trusted. Most of them are not hands-on with these tools and are working from the same incomplete picture you are. This is a new kind of question, and it requires a partner who is actually operating in this space.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="q-ai-maturity">
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow">Where foundations stand</div>
            <h2>The AI adoption <em>spectrum.</em></h2>
          </div>
          <MaturitySpectrum />
          <div className="q-maturity-context">
            <p>Foundations come to this work at every point on this spectrum. Some arrive having never discussed AI as an organization. Others have a governance framework in draft, workflows working in some areas but not others, and a board that's starting to ask harder questions. A few have built real operational practice and are looking to deepen it.</p>
            <p>What determines the trajectory isn't where a foundation starts. It's the quality of the next step: a clear read on where you actually are, a plan that's realistic about what the organization can absorb, and the right support for what follows. That's the work, regardless of which stage is yours.</p>
          </div>
        </div>
      </section>

      <section className="q-entry-states">
        <div className="q-wrap">
          <div className="q-section-head">
            <div className="q-eyebrow">What we work on</div>
            <h2>Four areas where foundations <em>find the most traction.</em></h2>
            <p>Foundations arrive with different priorities. These are the areas where AI work tends to concentrate, often in combination.</p>
          </div>
          <div className="q-entry-list">
            <div className="q-entry-item">
              <div className="q-entry-num">01</div>
              <div className="q-entry-title">
                <span className="label">Staff adoption and workflow redesign</span>
                Getting AI from informal use to coordinated practice.
              </div>
              <div className="q-entry-body">
                <p>We work with the people doing the actual work: program officers, grants managers, communications staff, and operations teams. Together we identify where AI belongs in their specific workflows, redesign those workflows, and train the team on the versions that actually matter for their roles.</p>
                <p>The deliverable is adoption, not a policy document.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">02</div>
              <div className="q-entry-title">
                <span className="label">Board-level governance and positioning</span>
                Building the framework your board is asking for.
              </div>
              <div className="q-entry-body">
                <p>Foundation boards are asking about AI governance without a clear sense of what good governance looks like in this context. The questions are real: grantee relationships, public trust, staff equity, vendor selection. The existing governance frameworks mostly don't address them.</p>
                <p>We help foundation leaders build positions they can actually defend: what the foundation's posture is, how it governs AI use internally, and how it thinks about AI in grantmaking. Written, board-ready, and specific enough to be useful.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">03</div>
              <div className="q-entry-title">
                <span className="label">Grantmaking</span>
                AI where it actually saves time.
              </div>
              <div className="q-entry-body">
                <p>Grant operations (LOI processing, due diligence research, grantee reporting, portfolio tracking) sit at the intersection of relationship and process. AI can accelerate the process side without compromising the relationship side, but only if it's implemented carefully and with the grantee experience in mind.</p>
              </div>
            </div>

            <div className="q-entry-item">
              <div className="q-entry-num">04</div>
              <div className="q-entry-title">
                <span className="label">Custom internal tooling</span>
                Built for your workflows, not a vendor's template.
              </div>
              <div className="q-entry-body">
                <p>Sometimes the right answer is a tool built specifically for how your foundation works: a custom assistant trained on your grant history, a workflow that automates the reporting step your team dreads, a system that connects the data your staff actually needs to use together.</p>
                <p>We design and build these. The same people who identified the need are the ones who build the solution.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="q-offer">
        <div className="q-wrap">
          <div className="q-section-head" style={{ marginBottom: 40 }}>
            <div className="q-eyebrow">Where to start</div>
            <h2>An <em>Initial Evaluation</em> designed for foundations.</h2>
            <p>A contained first engagement: interviews with key staff, an honest read on where AI fits in your operation, and a clear prioritized plan. Most foundation leaders find it produces a document they can actually use with their board.</p>
          </div>
          <div className="q-offer-card">
            <div>
              <div className="what">Initial Evaluation</div>
              <h3>A clear picture of where you are and what to do next.</h3>
              <p>Two to four weeks. A senior strategist and a senior builder, working together. We interview the people doing the actual work, review your existing tools and workflows, and produce a written assessment and prioritized plan.</p>
              <p>If we are the right partner for what comes after, we'll say so. If you are better served with a different approach, we'll say that too. The deliverable is yours either way.</p>
            </div>
            <div>
              <dl className="q-offer-specs">
                <div><dt>Duration</dt><dd>2–4 weeks</dd></div>
                <div><dt>Team</dt><dd>Two senior partners</dd></div>
                <div><dt>Format</dt><dd>Staff interviews + written assessment</dd></div>
                <div><dt>Output</dt><dd>Prioritized plan, board-ready</dd></div>
              </dl>
              <ul className="q-offer-includes">
                <li>Interviews across program, grants, operations, and communications</li>
                <li>Review of existing tools, workflows, and data systems</li>
                <li>Honest read on organizational readiness and risk posture</li>
                <li>Ranked list of the highest-leverage moves</li>
                <li>Written deliverable you can share with your board</li>
              </ul>
              <a className="qbtn qbtn--primary">Start the conversation <Arrow /></a>
            </div>
          </div>
        </div>
      </section>

      <section className="q-faq">
        <div className="q-wrap">
          <div className="q-section-head" style={{ marginBottom: 24 }}>
            <div className="q-eyebrow">What foundation leaders usually ask</div>
            <h2>Common questions.</h2>
          </div>
          <div className="q-faq-list">
            {[
              { q: 'How is this different from the AI advice we\'re hearing from our current advisors?', a: 'Most of the AI advice foundations are receiving right now comes from advisors who are thinking about it rather than building with it. We work with these tools every day, for our clients and for ourselves. That changes the quality of the recommendation.' },
              { q: 'We\'re worried about AI and grantee relationships. How do you approach that?', a: 'Carefully. The trust relationship between a foundation and its grantees is the thing worth protecting, and it should inform every implementation decision. We start there, not with the technology. Where AI doesn\'t fit, we say so.' },
              { q: 'Can you help us develop a board-level AI policy?', a: 'Yes. Board-facing deliverables (governance frameworks, public positioning, risk assessments) are a regular part of the work we do with foundations. We\'re comfortable in board conversations and know how to write for that audience.' },
              { q: 'How do you handle data privacy and sensitive grantee information?', a: 'Directly and from the start. We build with data privacy as a design constraint, not a legal box to check afterward. For foundations with specific compliance requirements or sensitive grantee data, we work within those constraints and flag the tradeoffs honestly.' },
              { q: 'We\'ve had consultants before who left us with a report we couldn\'t act on. How is this different?', a: 'We build and implement. The same people who write the assessment are the people who execute it. The thinking stays connected to the doing throughout, which tends to produce both better plans and better outcomes.' },
            ].map((f, i) => (
              <div className="q-faq-item" key={i}>
                <div className="q">{f.q}</div>
                <div className="a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="q-svc-cta">
        <div className="q-wrap">
          <div className="q-svc-cta-inner">
            <div>
              <div className="q-eyebrow q-eyebrow--dark">Next step</div>
              <h2>Tell us what you are <em>trying to figure out.</em></h2>
            </div>
            <div>
              <p>A first conversation is twenty minutes, specific, and free. We'll listen before we suggest anything. If an initial evaluation is the right next step, we scope it in writing before you commit.</p>
              <div style={{ marginTop: 24, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a className="qbtn qbtn--paper" href="mailto:info@quarterdeck.io">Email info@quarterdeck.io <Arrow /></a>
                <a className="qbtn qbtn--outline-dark" onClick={() => setRoute('foundations')}>Back to Foundations <Arrow /></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { FoundationsAIPage });