/* global React, Reveal, CTABlock */

const CLARITY_MODEL = [
  {
    title: 'Complexity',
    body: 'Understand the context, constraints, dependencies and human realities shaping the work.',
  },
  {
    title: 'Clarity',
    body: 'Make the real situation visible and distinguish what matters from what is merely visible.',
  },
  {
    title: 'Alignment',
    body: 'Connect intent, decisions, governance, architecture and delivery around a shared direction.',
  },
  {
    title: 'Confidence',
    body: 'Support better decisions with evidence, explicit accountability and honest advice.',
  },
  {
    title: 'Outcomes',
    body: 'Keep implementation, adoption and realised value connected to the original purpose.',
  },
];

const WORKING_PRINCIPLES = [
  {
    title: 'See the whole system',
    body: 'We look beyond the reported issue to the relationships between strategy, operating reality, technology, governance and people.',
  },
  {
    title: 'Bring disciplines together',
    body: 'Transformation advisory, architecture, analysis, service design and governance are applied as connected perspectives, not isolated workstreams.',
  },
  {
    title: 'Exercise independent judgement',
    body: 'We test assumptions, work from evidence and give direct advice — including when the right answer is to narrow, pause or reconsider the work.',
  },
  {
    title: 'Design for what happens next',
    body: 'Recommendations must survive contact with delivery. We keep accountability, adoption, assurance and measurable outcomes in view from the start.',
  },
];

const VALUES = [
  {
    title: 'Clarity',
    body: 'Make the situation understandable without making it simplistic.',
  },
  {
    title: 'Accountability',
    body: 'Make ownership, decisions, obligations and outcomes explicit.',
  },
  {
    title: 'Professional integrity',
    body: 'Say what the evidence supports, where uncertainty remains and where we are not the right fit.',
  },
  {
    title: 'Meaningful outcomes',
    body: 'Keep the work connected to practical progress and value for the organisation and the people it serves.',
  },
];

const CAPABILITIES = [
  'Transformation advisory',
  'Business systems analysis',
  'Enterprise architecture & design',
  'Enterprise service management',
  'Process & data governance',
  'Compliance & assurance',
  'Stakeholder alignment',
];

const EXPERIENCE_EVIDENCE = [
  { value: '20+', label: 'Years of cross-industry transformation experience' },
  { value: '>100', label: 'Projects and programmes delivered' },
  { value: '60+', label: 'Teams supported including global and virtual' },
  { value: '>15', label: 'Countries represented across global experience' },
];

function AnimatedEvidenceValue({ value }) {
  const valueRef = React.useRef(null);
  const match = value.match(/^(\D*)(\d+)(.*)$/);
  const prefix = match ? match[1] : '';
  const target = match ? Number(match[2]) : 0;
  const suffix = match ? match[3] : '';
  const [displayValue, setDisplayValue] = React.useState(0);

  React.useEffect(() => {
    const node = valueRef.current;
    if (!node || !match) return undefined;

    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reducedMotion || !('IntersectionObserver' in window)) {
      setDisplayValue(target);
      return undefined;
    }

    let animationFrame = null;
    let hasAnimated = false;
    const observer = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting || hasAnimated) return;

      hasAnimated = true;
      observer.disconnect();
      const startedAt = performance.now();
      const duration = 1000;

      const update = (now) => {
        const progress = Math.min((now - startedAt) / duration, 1);
        const easedProgress = 1 - Math.pow(1 - progress, 3);
        setDisplayValue(Math.round(target * easedProgress));
        if (progress < 1) animationFrame = window.requestAnimationFrame(update);
      };

      animationFrame = window.requestAnimationFrame(update);
    }, { threshold: 0.45 });

    observer.observe(node);
    return () => {
      observer.disconnect();
      if (animationFrame) window.cancelAnimationFrame(animationFrame);
    };
  }, [target, value]);

  return (
    <span ref={valueRef} className="about-evidence-value">
      <span aria-hidden="true">{prefix}{displayValue}{suffix}</span>
      <span className="visually-hidden">{value}</span>
    </span>
  );
}

function AboutPage({ go }) {
  const [hoveredValue, setHoveredValue] = React.useState(null);
  const [focusedValue, setFocusedValue] = React.useState(null);
  const [selectedValue, setSelectedValue] = React.useState(null);
  const activeValue = focusedValue ?? hoveredValue ?? selectedValue;

  return (
    <div className="page-enter" data-screen-label="About">

      <section className="page-header page-header--about about-hero">
        <div className="container">
          <span className="label page-locator">About Ideligo</span>
          <div className="about-hero-grid">
            <h1 className="display-1 about-hero-title">
              Understand,<br />
              create clarity, and build<br />
              solutions that <em>last</em>.
            </h1>
            <div className="about-hero-notes" aria-label="IDELIGO at a glance">
              <div className="about-hero-note">
                <span className="about-hero-note-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24">
                    <path d="M12 21s6-5.15 6-11a6 6 0 1 0-12 0c0 5.85 6 11 6 11Z" />
                    <circle cx="12" cy="10" r="2.25" />
                  </svg>
                </span>
                <p><strong>Based in</strong>Melbourne, working across locations and organisational boundaries.</p>
              </div>
              <div className="about-hero-note">
                <span className="about-hero-note-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="8.5" />
                    <path d="M12 7.25V12l3.25 2" />
                  </svg>
                </span>
                <p><strong>Experience</strong>20+ years across complex transformation and regulated environments.</p>
              </div>
              <div className="about-hero-note">
                <span className="about-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>Perspective</strong>Strategic, architectural, analytical, governance and delivery expertise brought together.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Reveal as="section" id="who-we-are" className="section about-story route-section-target" aria-labelledby="about-story-title">
        <div className="container">
          <div className="about-story-heading">
            <h2 id="about-story-title" className="display-2 about-story-title" tabIndex="-1" data-route-heading>
              Clarity begins with seeing the <em>whole picture.</em>
            </h2>
          </div>

          <div className="about-story-opening">
            <article className="about-story-block">
              <h3>Who we are</h3>
              <p>
                IDELIGO is a Melbourne-based boutique consultancy specialising in strategic business systems and digital transformation advisory.
              </p>
            </article>
            <article className="about-story-block">
              <h3>Our mission</h3>
              <p>
                Our mission is to help organisations build, improve and integrate the systems and ways of working that millions of people rely on every day, while keeping change connected to the goals it is intended to achieve.
              </p>
            </article>
          </div>

          <div id="our-values" className="about-story-values route-section-target" aria-labelledby="about-values-title">
            <div className="about-story-subhead about-story-subhead--action">
              <div>
                <h3 id="about-values-title" tabIndex="-1" data-route-heading>Our values</h3>
                <p>
                  Our values govern our advice. They shape how we define work and build trust with our clients. We help clients move from the situation as given to the situation as understood, creating a clearer vantage point from which better decisions, stronger alignment and more durable outcomes become possible.
                </p>
              </div>
              <button className="btn btn-ghost btn-gold" onClick={() => go('/about#our-values')}>
                Explore our values <span className="arrow" aria-hidden="true">→</span>
              </button>
            </div>
            <div className="about-values-grid">
              {VALUES.map((value, index) => {
                const isExpanded = activeValue === index;
                const detailsId = `about-value-details-${index}`;
                return (
                  <article
                    className={`about-value ${isExpanded ? 'is-expanded' : ''}`}
                    key={value.title}
                    onMouseEnter={() => setHoveredValue(index)}
                    onMouseLeave={() => {
                      setHoveredValue(null);
                      setSelectedValue(null);
                    }}
                  >
                    <button
                      type="button"
                      className="about-value-trigger"
                      aria-expanded={isExpanded}
                      aria-controls={detailsId}
                      onClick={() => setSelectedValue(selectedValue === index ? null : index)}
                      onFocus={() => setFocusedValue(index)}
                      onBlur={() => setFocusedValue(null)}
                    >
                      <span className="about-value-title">{value.title}</span>
                      <span className="about-value-indicator" aria-hidden="true">{isExpanded ? '−' : '+'}</span>
                    </button>
                    <div id={detailsId} className="about-value-details">
                      <div><p>{value.body}</p></div>
                    </div>
                  </article>
                );
              })}
            </div>
          </div>

          <div id="why-ideligo" className="about-story-proof route-section-target" aria-labelledby="about-why-ideligo-title">
            <article className="about-story-block">
              <h3 id="about-why-ideligo-title" tabIndex="-1" data-route-heading>Why IDELIGO?</h3>
              <p>
                With more than two decades of global experience across industries, diverse environments and complex organisations, we bring professional rigour, ethics and advisory precision to work that cannot be understood from a single perspective. We work and deliver with confidence and expertise where the technical, political and human dimensions of a problem are entangled.
              </p>
              <dl className="about-evidence-grid" aria-label="IDELIGO experience evidence">
                {EXPERIENCE_EVIDENCE.map((item) => (
                  <div className="about-evidence-stat" key={item.value}>
                    <dt><AnimatedEvidenceValue value={item.value} /></dt>
                    <dd>{item.label}</dd>
                  </div>
                ))}
              </dl>
            </article>

            <article className="about-story-block about-story-experience">
              <h3>Experience that holds up in <em>complex environments.</em></h3>
              <p>
                Our work has developed across enterprise, government and public sector, banking and financial services, education, legal, fintech, technology, not-for-profit and consumer environments. Cross-sector experience brings useful pattern recognition without assuming every organisation works the same way.
              </p>
              <ul className="about-capability-list" aria-label="Areas of capability">
                {CAPABILITIES.map((capability) => <li key={capability}>{capability}</li>)}
              </ul>
            </article>
          </div>

          <div id="thinking-practice" className="about-story-thinking route-section-target" aria-labelledby="about-thinking-title">
            <div className="about-story-subhead about-story-subhead--action">
              <div>
                <h3 id="about-thinking-title" tabIndex="-1" data-route-heading>
                  Thinking stays connected to <em>practice.</em>
                </h3>
                <p>
                  We continue to test and develop our thinking through practical frameworks and observations on transformation, decision quality, governance, architecture, AI adoption and assurance. Insights is where those ideas are shared, grounded in practice and open to continuous learning and refinement.
                </p>
              </div>
              <button className="btn btn-ghost btn-gold" onClick={() => go('insights')}>
                Explore Insights <span className="arrow" aria-hidden="true">→</span>
              </button>
            </div>
          </div>
        </div>
      </Reveal>

      <Reveal as="section" id="golden-edge" className="section about-golden-edge route-section-target" aria-labelledby="about-edge-title">
        <div className="container">
          <div className="about-edge-head">
            <h2 id="about-edge-title" className="display-2" tabIndex="-1" data-route-heading>
              Clarity is our <em>golden edge.</em>
            </h2>
          </div>

          <figure className="about-clarity-figure" aria-labelledby="about-clarity-caption">
            <figcaption id="about-clarity-caption">
              How clarity turns complexity into meaningful outcomes
            </figcaption>
            <ol className="about-clarity-model">
              {CLARITY_MODEL.map((stage, index) => (
                <li
                  className={`about-clarity-stage ${stage.title === 'Clarity' ? 'is-edge' : ''}`}
                  key={stage.title}
                  tabIndex="0"
                >
                  <span className="about-clarity-node" aria-hidden="true"></span>
                  <h3>{stage.title}</h3>
                  <p>{stage.body}</p>
                  {index < CLARITY_MODEL.length - 1 && (
                    <span className="about-clarity-connector" aria-hidden="true">→</span>
                  )}
                </li>
              ))}
            </ol>
          </figure>
        </div>
      </Reveal>

      <Reveal as="section" id="how-we-work" className="section about-working route-section-target" aria-labelledby="about-working-title">
        <div className="container">
          <div className="about-working-head">
            <div>
              <h2 id="about-working-title" className="display-2" tabIndex="-1" data-route-heading>
                How we <em>work.</em>
              </h2>
              <p>
                Our value lies in bringing together the right perspectives, a clear scope, and fit-for-purpose approaches and tools — all designed to improve outcomes rather than simply add activity or produce more deliverables around a complex problem.
              </p>
            </div>
            <button className="btn btn-ghost btn-gold" onClick={() => go('services')}>
              Explore our services <span className="arrow" aria-hidden="true">→</span>
            </button>
          </div>

          <div className="about-principles-grid">
            {WORKING_PRINCIPLES.map((principle) => (
              <article className="about-principle" key={principle.title} tabIndex="0">
                <span className="about-principle-mark" aria-hidden="true"></span>
                <h3>{principle.title}</h3>
                <p>{principle.body}</p>
              </article>
            ))}
          </div>
        </div>
      </Reveal>

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

window.AboutPage = AboutPage;