/* global React, Reveal, SectionHead, CTABlock */

function AboutPage({ go }) {
  return (
    <div className="page-enter" data-screen-label="About">

      {/* HEADER */}
      <section className="page-header page-header--about">
        <div className="container">
          <span className="label page-locator">About Ideligo</span>
          <div className="page-header-grid page-header-grid--about">
            <h1 className="display-1">
              A practice for<br />the <em>difficult</em><br />middle.
            </h1>
            <div className="about-header-prose">
              <p>
                We bring Principal Business Systems Analysis, Business Solutions Architecture, and Transformation Advisory expertise, with over a decade of experience across complex organisations — from enterprise service management and digital transformation to requirements governance and stakeholder alignment.
              </p>
              <p>
                Our work is defined by one consistent commitment: <strong>helping people and organisations see what's actually happening, not just what's being reported.</strong> From that clearer vantage point, better decisions — and better outcomes — become possible.
              </p>
              <p>
                We are not generalists. We work in environments where the technical, political and human dimensions of a problem are entangled — and where pretending otherwise has stopped being useful.
              </p>
            </div>
            <div className="about-header-pulls">
              <p className="about-pull about-pull--lg">
                "She named the thing nobody else in the room could name — and then helped us decide what to do about it."
              </p>
              <p className="about-pull about-pull--lg">
                "We came in expecting a process review. We left with a different understanding of what the <em>actual</em> problem was."
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* BACKGROUND */}
      <Reveal as="section" className="section">
        <div className="container">
          <div className="about-section-grid">
            <h2 className="label section-eyebrow">Background</h2>
            <div className="prose">
              <p>
                Our experience spans enterprise, public sector and financial services environments, across business analysis, solution design, process architecture and transformation advisory.
              </p>
              <p>
                Areas of professional depth:
              </p>
              <ul style={{listStyle: 'none', padding: 0, marginTop: '8px'}}>
                {[
                  'Business and solution analysis across complex system landscapes',
                  'Enterprise service management and ITSM design',
                  'Requirements quality and governance uplift',
                  'Digital transformation — from discovery through delivery',
                  'Stakeholder management in high-stakes, multi-party programmes',
                  'Process mapping, current-state analysis, and future-state design',
                ].map((it) => (
                  <li key={it} style={{
                    fontFamily: 'var(--serif)',
                    fontSize: '16px',
                    color: 'var(--text-body)',
                    padding: '10px 0',
                    borderBottom: '1px solid var(--border-default)',
                  }}>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="about-pulls">
              <div className="about-pull">
                Working environments where complexity is the norm — politically, technically, and organisationally.
              </div>
            </div>
          </div>
        </div>
      </Reveal>

      {/* APPROACH */}
      <Reveal as="section" className="section">
        <div className="container">
          <div className="about-section-grid about-section-grid--approach">
            <span className="label section-eyebrow">Approach</span>
            <h2 className="approach-head-title">
              We start by understanding, create clarity, and design solutions that <em>last</em>.
            </h2>
            <p className="approach-head-lede">
              Most problems organisations bring to analysts are not the real problem — they are symptoms of something more structural, more systemic, or more human. Our approach combines four habits of mind.
            </p>
          </div>
          <div className="approach-grid">
            <div className="approach-card">
              <span className="approach-num">Structured inquiry</span>
              <h3 className="approach-title">Asking the <em>right</em> questions before reaching for answers.</h3>
              <p className="approach-body">
                Premature solutioning is the most common — and most expensive — analytical failure mode. We slow down at the start so the work can speed up later.
              </p>
            </div>
            <div className="approach-card">
              <span className="approach-num">Systems perspective</span>
              <h3 className="approach-title">Looking at how parts <em>connect</em>, not just how they function.</h3>
              <p className="approach-body">
                A process is an artefact of a system. A requirement is an artefact of a relationship. We map the connections, not just the components.
              </p>
            </div>
            <div className="approach-card">
              <span className="approach-num">Stakeholder acuity</span>
              <h3 className="approach-title">Understanding what people <em>say</em>, what they mean, and what they need.</h3>
              <p className="approach-body">
                These are three different things. We work to distinguish them — carefully, and without making people feel exposed in the process.
              </p>
            </div>
            <div className="approach-card">
              <span className="approach-num">Communication discipline</span>
              <h3 className="approach-title">Making complex things <em>clear</em>, without making them simplistic.</h3>
              <p className="approach-body">
                Clarity is not the same as simplicity. Good analysis preserves the texture of the problem while making it navigable.
              </p>
            </div>
          </div>
        </div>
      </Reveal>

      {/* DISTINCTIVE */}
      <Reveal as="section" className="section" style={{background: 'var(--surface-alternate)'}}>
        <div className="container">
          <div className="about-section-grid">
            <h2 className="label section-eyebrow">What's distinctive</h2>
            <div className="prose">
              <p>
                A lot of analysts can map a process. Fewer can tell you <em>why</em> the process works the way it does — and whether that's a symptom of something more fundamental.
              </p>
              <p>
                A lot of advisors can identify what an organisation should do. Fewer can help navigate the human terrain that determines whether it actually happens.
              </p>
              <p>
                <strong>We work in both dimensions</strong> — the structural and the human — because you can't solve one without the other.
              </p>
            </div>
            <div className="about-pulls">
              <div className="about-pull">
                The work lives at the seam between <em>structure</em> and <em>people</em>.
              </div>
            </div>
          </div>
        </div>
      </Reveal>

      {/* INTELLECTUAL ORIENTATION */}
      <Reveal as="section" className="section">
        <div className="container">
          <div className="about-section-grid">
            <h2 className="label section-eyebrow">Intellectual orientation</h2>
            <div className="prose">
              <p>
                We are drawn to the edges where disciplines intersect: systems thinking and organisational psychology. Governance and meaning. Complexity theory and practical communication.
              </p>
              <p>
                We read widely. We write to clarify our thinking. We are deeply interested in <strong>why intelligent organisations make poor decisions</strong>, and what it takes to change that.
              </p>
              <p>
                This site is part professional portfolio, part intellectual workspace — a place to share frameworks, observations, and thinking we hope is useful to others navigating similar terrain.
              </p>
            </div>
            <div className="about-pulls">
              <div className="about-pull">
                Currently thinking about: requirements as <em>relational</em> artefacts.
              </div>
              <div className="about-pull">
                Currently reading: Cynefin, Argyris, Snowden, Vervaeke.
              </div>
            </div>
          </div>
        </div>
      </Reveal>

      <CTABlock go={go} />
    </div>
  );
}

window.AboutPage = AboutPage;