/* global React, Reveal, CTABlock */

const SERVICE_OFFERS = [
  {
    title: 'Business Analysis <em>Advisory</em>',
    body: 'Review, challenge, or augment your current analytical capability. Useful for programmes where the analysis has stalled, requirements are unclear, or confidence in the current approach is low.',
    tags: ['Programme review', 'BA capability', 'Embedded advisory'],
    imageStandard: '/assets/services/home-business-analysis-standard.webp',
    imagePurple: '/assets/services/home-business-analysis.webp',
    imagePosition: 'center 42%',
  },
  {
    title: 'Process &amp; Requirements <em>Review</em>',
    body: 'An independent, structured assessment of existing requirements, process design, or ITSM service definitions — with clear findings, prioritised recommendations, and a defensible read of the work.',
    tags: ['Independent review', 'Requirements quality', 'ITSM'],
    imageStandard: '/assets/services/home-requirements-review-standard.webp',
    imagePurple: '/assets/services/home-requirements-review.webp',
    imagePosition: 'center 50%',
  },
  {
    title: 'Transformation <em>Discovery</em>',
    body: 'Structured discovery work at the front-end of a transformation: understanding the real problem, mapping the landscape, and creating the clarity needed to design well — before tooling and vendor decisions get locked in.',
    tags: ['Pre-business case', 'Problem framing', 'Scope shaping'],
    imageStandard: '/assets/services/home-transformation-discovery-standard.webp',
    imagePurple: '/assets/services/home-transformation-discovery.webp',
    imagePosition: 'center 52%',
  },
  {
    title: 'Documentation &amp; <em>Governance Uplift</em>',
    body: 'Improving the quality, rigour, and usefulness of documentation, standards, and governance practices — so they become assets rather than bureaucratic overhead.',
    tags: ['Standards', 'Assurance', 'Operating manuals'],
    imageStandard: '/assets/services/home-governance-uplift-standard.webp',
    imagePurple: '/assets/services/home-governance-uplift.webp',
    imagePosition: 'center 50%',
  },
  {
    title: 'Workshop <em>Design &amp; Facilitation</em>',
    body: 'Design and delivery of structured workshops for alignment, discovery, retrospective, or decision-making — with honest facilitation that surfaces what\'s actually in the room.',
    tags: ['Alignment', 'Discovery', 'Retrospectives'],
    imageStandard: '/assets/services/home-workshop-facilitation-standard.webp',
    imagePurple: '/assets/services/home-workshop-facilitation.webp',
    imagePosition: 'center 45%',
  },
  {
    title: 'Complexity-to-Clarity <em>Consulting</em>',
    body: 'Bespoke engagements for organisations or leaders navigating situations that are genuinely complex: where the problem isn\'t clear, the path isn\'t obvious, and the stakes are real.',
    tags: ['Bespoke', 'Executive-facing', 'High-stakes'],
    imageStandard: '/assets/services/home-complexity-consulting-standard.webp',
    imagePurple: '/assets/services/home-complexity-consulting.webp',
    imagePosition: 'center 48%',
  },
];

function HomePage({ go, hero }) {
  const h = hero || {
    eyebrow: "Ideligo · Strategic Systems & Transformation",
    line1: "Clarity", line2: "is a", line3: "discipline.", em: "",
  };
  return (
    <div className="page-enter" data-screen-label="Home">

      {/* ═══ HERO ═══ */}
      <section className="hero">
        <div className="container hero-inner">

          <div className="hero-eyebrow-col">
            <span className="label page-locator">{h.eyebrow}</span>
          </div>

          <div className="hero-grid hero-grid--split">
            <div className="hero-left">
              <h1 className="display-1 hero-h1">
                {h.line1} {h.line2}<br />
                {h.line3}{h.em && <em>{h.em}</em>}
              </h1>
              <div className="hero-statement">
                <p>
                  IDELIGO creates strategic clarity for complex digital transformation through specialist advisory and transformation services. We help organisations make better decisions by strengthening governance and accountability, and by connecting business intent, technology and delivery to measurable outcomes and realised value.
                </p>
              </div>
            </div>

            <div className="hero-side" aria-label="Editorial proposition">
              <div className="hero-side-block">
                <span className="label section-eyebrow">Point of view</span>
                <p className="hero-side-prose">
                  Most organisations do not suffer from a shortage of data or tools. They suffer from a shortage of <strong>clarity</strong> — about what the real problem is, what matters most, and how the moving parts actually <em>fit together</em>.
                </p>
                <a
                  className="link-arrow hero-side-cta hero-side-link"
                  href="/insights"
                  onClick={(event) => { event.preventDefault(); go('insights'); }}
                >
                  Read insights <span className="arrow" aria-hidden="true">→</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ═══ INDUSTRIES AND COMMON CLIENT CHALLENGES ═══ */}
      <Reveal
        as="section"
        id="where-complexity-shows-up"
        className="section home-context-band route-section-target"
        aria-labelledby="home-context-title"
      >
        <div className="container">
          <div className="home-section-head home-context-head">
            <div className="home-section-head-copy">
              <h2 id="home-context-title" className="display-3" tabIndex="-1" data-route-heading>
                Where complexity <em>shows up.</em>
              </h2>
              <p className="lede">
                Clarity is essential when navigating change across complex systems, operational realities and strategic direction. We help turn insight into aligned decisions, effective design, disciplined delivery, meaningful adoption and sustainable advantage.
              </p>
            </div>
            <button className="btn btn-ghost btn-gold home-section-action home-context-action" onClick={() => go('contact')}>
              Begin Conversation <span className="arrow" aria-hidden="true">→</span>
            </button>
          </div>
          <div className="pillars-grid home-context-pillars">
            <div className="pillar">
              <h3 className="pillar-title">Systems <em>thinking</em></h3>
              <p className="pillar-body">
                Organisations are not machines. They are living systems — interconnected, adaptive, and often opaque to the people inside them. We surface those hidden dynamics and work with them, not against them.
              </p>
            </div>
            <div className="pillar">
              <h3 className="pillar-title">Structured approach</h3>
              <p className="pillar-body">
                A tangled requirements landscape. A governance gap. A transformation with more stakeholders than alignment. We bring a structured approach and honest analysis to situations that resist simple answers.
              </p>
            </div>
            <div className="pillar">
              <h3 className="pillar-title">Human <em>dynamics</em></h3>
              <p className="pillar-body">
                The technical is rarely the hardest part. We work in the gap between what an organisation says it wants and what it actually does — where competing priorities, unspoken assumptions and dysfunctional patterns live.
              </p>
            </div>
          </div>
          <div className="home-context-grid">
            <div className="home-context-panel">
              <h3 className="display-3">Industries we work in</h3>
              <p>Cross-sector experience brings useful pattern recognition without assuming that every organisation works the same way.</p>
              <ul className="industry-list">
                {[
                  'Enterprise',
                  'Government & Public Sector',
                  'Banking',
                  'Financial Services',
                  'Education',
                  'Legal',
                  'Fintech',
                  'Technology',
                  'Not-for-profit',
                  'Consumer & Retail',
                ].map((industry) => <li key={industry}>{industry}</li>)}
              </ul>
            </div>
            <div className="home-context-panel home-challenges-panel">
              <h3 className="display-3">Typical challenges</h3>
              <ul className="client-challenge-list">
                <li>Direction, priorities and intended outcomes are unclear or contested.</li>
                <li>Business intent, technology decisions and delivery have drifted apart.</li>
                <li>AI and digital capability is progressing without clear ownership, decision rights, controls or value measures.</li>
                <li>Governance, risk, cyber, data and regulatory obligations are not embedded early enough.</li>
                <li>Requirements, procurement and vendor commitments lack traceability to outcomes.</li>
                <li>Operational readiness, adoption and realised value remain uncertain.</li>
              </ul>
            </div>
          </div>
        </div>
      </Reveal>

      {/* ═══ SERVICE OFFERS ═══ */}
      <Reveal
        as="section"
        id="some-services"
        className="section service-offers-section route-section-target"
        aria-labelledby="service-offers-title"
      >
        <div className="container">
          <div className="home-section-head">
            <h2 id="service-offers-title" className="display-3 service-offers-title" tabIndex="-1" data-route-heading>Our <em>services.</em></h2>
            <button className="btn btn-ghost btn-gold home-section-action" onClick={() => go('/services#service-pillars-overview')}>
              Explore our services <span className="arrow" aria-hidden="true">→</span>
            </button>
          </div>
          <div className="services-grid">
            {SERVICE_OFFERS.map((service) => (
              <article className="service-card" key={service.title} tabIndex="0">
                <div
                  className="service-card-visual"
                  style={{
                    '--service-image-standard': `url(${service.imageStandard})`,
                    '--service-image-purple': `url(${service.imagePurple})`,
                    backgroundPosition: service.imagePosition,
                  }}
                >
                  <h3 className="service-title" dangerouslySetInnerHTML={{ __html: service.title }} />
                </div>
                <div className="service-card-content">
                  <p className="service-body">{service.body}</p>
                  <div className="service-tags" aria-label={`${service.title.replace(/<[^>]+>/g, '')} engagement types`}>
                    {service.tags.map((tag) => <span className="service-tag" key={tag}>{tag}</span>)}
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </Reveal>

      {/* ═══ INSIGHTS PREVIEW ═══ */}
      <Reveal
        as="section"
        id="latest-insights"
        className="section home-insights route-section-target"
        aria-labelledby="home-insights-title"
      >
        <div className="container">
          <div className="home-section-head">
            <h2 id="home-insights-title" className="display-3" tabIndex="-1" data-route-heading>Working notes from the <em>difficult rooms.</em></h2>
            <button className="btn btn-ghost btn-gold home-section-action" onClick={() => go('insights')}>
              Explore our latest insights <span className="arrow" aria-hidden="true">→</span>
            </button>
          </div>
          <div className="insights-grid">
            <button className="insight-card" onClick={() => go('insights')}>
              <span className="insight-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                  <rect x="4.5" y="3.5" width="15" height="17" rx="1.5" />
                  <path d="M8 8h8M8 12h5M8 16l2 2 4-4" />
                </svg>
              </span>
              <span className="insight-cat">Governance &amp; Requirements</span>
              <div className="insight-title">Why requirements fail before anyone writes them</div>
              <p className="insight-teaser">
                The upstream conditions that make good requirements impossible — and what to do about them before the project even begins.
              </p>
              <div className="insight-foot">
                <span>Mar 2025 · 9 min</span>
                <span className="read">Read →</span>
              </div>
            </button>

            <button className="insight-card" onClick={() => go('insights')}>
              <span className="insight-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                  <circle cx="12" cy="5" r="2" />
                  <circle cx="5" cy="17" r="2" />
                  <circle cx="19" cy="17" r="2" />
                  <path d="m10.9 6.7-4.8 8.6m7-8.6 4.8 8.6M7 17h10" />
                </svg>
              </span>
              <span className="insight-cat">Complexity &amp; Systems</span>
              <div className="insight-title">Complicated, or complex? Why the distinction matters</div>
              <p className="insight-teaser">
                Most organisations apply complicated-problem thinking to complex situations. Here is what changes when you do not.
              </p>
              <div className="insight-foot">
                <span>Feb 2025 · 7 min</span>
                <span className="read">Read →</span>
              </div>
            </button>

            <button className="insight-card" onClick={() => go('insights')}>
              <span className="insight-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                  <circle cx="9" cy="8" r="3" />
                  <circle cx="17" cy="9" r="2.25" />
                  <path d="M3.5 19c.6-3.4 2.5-5.1 5.5-5.1s4.9 1.7 5.5 5.1m.2-4.5c2.9-.4 4.8 1.1 5.3 4.5" />
                </svg>
              </span>
              <span className="insight-cat">Human Dynamics</span>
              <div className="insight-title">The stakeholder who is not in the room</div>
              <p className="insight-teaser">
                On the invisible stakeholders — political, structural, psychological — that determine whether a programme actually lands.
              </p>
              <div className="insight-foot">
                <span>Jan 2025 · 6 min</span>
                <span className="read">Read →</span>
              </div>
            </button>
          </div>
        </div>
      </Reveal>

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

window.HomePage = HomePage;