/* global React, Reveal, CTABlock, FrameworkExplorer */

const INSIGHT_TOPICS = [
  {
    key: 'ai-digital-governance',
    title: 'AI & Digital Governance',
    image: '/assets/insights/ai-digital-governance.jpg',
    imagePosition: 'center',
    summary: 'How organisations can move from experimentation to governed AI capability with explicit purpose, ownership, human oversight, controls, operational integration and value measures.',
    focus: ['AI transformation & innovation adoption', 'Regulation', 'Risk & compliance'],
  },
  {
    key: 'transformation-decision-quality',
    title: 'Transformation & Decision Quality',
    image: '/assets/insights/transformation-decision-quality.jpg',
    imagePosition: 'center 58%',
    summary: 'How direction, priorities, decision rights and readiness influence whether transformation effort remains connected to intended outcomes.',
    focus: ['Organisational change readiness', 'Decision quality', 'Value realisation'],
  },
  {
    key: 'architecture-analysis-operating-models',
    title: 'Architecture, Analysis & Operating Models',
    image: '/assets/insights/architecture-analysis-operating-models.jpg',
    imagePosition: 'center 34%',
    summary: 'How capabilities, operating models, processes, requirements, information and technology can be connected into coherent, implementation-ready direction.',
    focus: ['Human interaction & workforce', 'Process & workflow design', 'Business–technology alignment'],
  },
  {
    key: 'governance-accountability-assurance',
    title: 'Governance, Accountability & Assurance',
    image: '/assets/insights/governance-accountability-assurance.jpg',
    imagePosition: 'center 48%',
    summary: 'How accountability, regulation, controls, procurement and assurance become visible early enough to shape design, delivery and realised outcomes.',
    focus: ['Regulation', 'Risk & compliance', 'Transformation assurance'],
  },
];

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

      <section className="page-header">
        <div className="container">
          <span className="label page-locator">Insights · Frameworks · Perspectives</span>
          <div className="page-header-grid page-header-grid--insights">
            <h1 className="display-1">
              Thinking for complex<br />
              <em>transformation.</em>
            </h1>
            <div className="insights-hero-notes" aria-label="What the insights explore">
              <div className="insights-hero-note">
                <span className="insights-hero-note-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24">
                    <circle cx="6" cy="7" r="2.25" />
                    <circle cx="18" cy="7" r="2.25" />
                    <circle cx="12" cy="17" r="2.25" />
                    <path d="m7.8 8.35 3 6.3M16.2 8.35l-3 6.3M8.25 7h7.5" />
                  </svg>
                </span>
                <p><strong>Transformation conditions</strong>Decision quality, governance, architecture, operating models, AI adoption and assurance.</p>
              </div>
              <div className="insights-hero-note">
                <span className="insights-hero-note-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24">
                    <path d="M4 17.5 9.25 12l3.25 3.25L20 7.5" />
                    <path d="M14.5 7.5H20V13" />
                  </svg>
                </span>
                <p><strong>Practical judgement</strong>We examine how these conditions shape transformation outcomes in practice.</p>
              </div>
              <div className="insights-hero-note">
                <span className="insights-hero-note-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24">
                    <path d="M3.5 12h4l2.4-5 4.2 10 2.4-5h4" />
                    <circle cx="12" cy="12" r="9" />
                  </svg>
                </span>
                <p><strong>Better-informed decisions</strong>Helping leaders see the real problem, test assumptions and decide with greater clarity.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Reveal as="section" id="perspectives" className="section insights-topics route-section-target" aria-labelledby="insights-topics-title">
        <div className="container">
          <div className="insights-section-head">
            <h2 id="insights-topics-title" className="display-2" tabIndex="-1" data-route-heading>Our current <em>insights.</em></h2>
            <p>
              Our thinking follows the points where transformation most often loses clarity — where decisions, responsibilities, operating realities and delivery no longer connect. These four areas define the current editorial scope.
            </p>
          </div>

          <div className="insights-topic-grid">
            {INSIGHT_TOPICS.map((topic) => (
              <article
                id={topic.key}
                className="insights-topic-card route-section-target"
                key={topic.key}
                style={{ '--insight-topic-image': `url("${topic.image}")`, '--insight-topic-position': topic.imagePosition }}
              >
                <div className="insights-topic-visual">
                  <span className="insights-topic-rule" aria-hidden="true"></span>
                  <h3 className="insights-topic-title" tabIndex="-1" data-route-heading>{topic.title}</h3>
                </div>
                <div className="insights-topic-content">
                  <p className="insights-topic-summary">{topic.summary}</p>
                  <ul className="insights-topic-focus" aria-label={`Focus areas for ${topic.title}`}>
                    {topic.focus.map((item) => <li key={item}>{item}</li>)}
                  </ul>
                </div>
              </article>
            ))}
          </div>
        </div>
      </Reveal>

      <FrameworkExplorer go={go} />

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

window.InsightsPage = InsightsPage;