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

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}<br />
                {h.line2}<br />
                {h.line3}{h.em && <em>{h.em}</em>}
              </h1>
            </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>
              </div>
              <div className="hero-side-block">
                <span className="label section-eyebrow">Translation</span>
                <p className="hero-side-prose hero-side-prose--display">
                  From the situation as <em>given</em>, to the situation as <em>understood</em>.
                </p>
                <button className="btn btn-primary hero-side-cta" onClick={() => go('contact')}>
                  Begin a conversation <span className="arrow" aria-hidden="true">→</span>
                </button>
              </div>
            </div>
          </div>

          <div className="hero-bottom">
            <span className="label section-eyebrow">Practice</span>

            <div className="hero-meta">
              <div className="hero-meta-row">
                <span className="hero-meta-label">Discipline</span>
                <span className="hero-meta-val">Principal Analyst · Business Solutions Architect · Advisor</span>
              </div>
              <div className="hero-meta-row">
                <span className="hero-meta-label">Working with</span>
                <span className="hero-meta-val">Enterprise · government · financial services</span>
              </div>
              <div className="hero-meta-row">
                <span className="hero-meta-label">Engagements</span>
                <span className="hero-meta-val">Advisory · discovery · interim leadership</span>
              </div>
            </div>

            <div className="hero-right">
              <p>
                Ideligo helps organisations make sense of complex systems, operational realities, and strategic direction, turning insight into aligned decisions, effective design, and sustainable progress.
              </p>
              <div className="hero-btns">
                <button className="btn btn-primary" onClick={() => go('services')}>
                  Explore Services <span className="arrow">→</span>
                </button>
                <button className="btn btn-ghost" onClick={() => go('insights')}>
                  Read insights
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ═══ APPROVED SERVICE PILLARS ═══ */}
      <Reveal as="section" className="section home-services">
        <div className="container">
          <SectionHead
            label="Services"
            title="How IDELIGO <em>helps.</em>"
          />
          <div className="home-service-grid">
            {SERVICE_PILLARS.map((service) => (
              <a
                key={service.id}
                className="home-service-card"
                href={service.href}
                onClick={(event) => { event.preventDefault(); go(service.href); }}
              >
                <h3>{service.title}</h3>
                <p>{service.summary}</p>
                <span className="link-arrow">Explore service <span aria-hidden="true">→</span></span>
              </a>
            ))}
          </div>
        </div>
      </Reveal>

      {/* ═══ PROFESSIONAL FOCUS — tile grid (relocated under Practice) ═══ */}
      <Reveal as="section" className="section focus-area">
        <div className="container">
          <div className="focus-head">
            <span className="label section-eyebrow">Professional focus</span>
            <div className="focus-title-row">
              <h2 className="display-3">Where the <em>work</em> happens.</h2>
              <span className="focus-count">12 areas · 1 practice</span>
            </div>
          </div>

          <div className="focus-tiles">
            {[
              'Enterprise & Business Systems Architecture',
              'Digital Transformation Strategy',
              'Cross-Domain Solution Design',
              'Governance, Risk & Compliance Alignment',
              'Service & Process Architecture',
              'Future-State Solution Design',
              'Stakeholder Facilitation & Translation',
              'Complex Systems Analysis',
              'Strategic Solution Shaping',
              'Enterprise Service Management (ESM)',
              'Business & Technology Alignment',
              'Business Process Optimisation',
            ].map((label) => (
              <div className="focus-tile" key={label}>
                <div className="focus-tile-head">
                  <span className="focus-tile-mark" aria-hidden="true"></span>
                </div>
                <h3 className="focus-tile-title">{label}</h3>
              </div>
            ))}
          </div>
        </div>
      </Reveal>

      {/* ═══ COMPLEXITY → CLARITY DIAGRAM ═══ */}
      <Reveal as="section" className="section-sm">
        <div className="container">
          <div className="complexity-diagram">
            <div className="cd-row">
              <span className="cd-from">Tangled requirements</span>
              <span className="cd-arrow">→</span>
              <span className="cd-to">A landscape that <em>holds together</em></span>
            </div>
            <div className="cd-row">
              <span className="cd-from">Mis-aligned stakeholders</span>
              <span className="cd-arrow">→</span>
              <span className="cd-to">A <em>shared</em> picture of the work</span>
            </div>
            <div className="cd-row">
              <span className="cd-from">A transformation in turbulence</span>
              <span className="cd-arrow">→</span>
              <span className="cd-to">A clear <em>next step</em> worth taking</span>
            </div>
          </div>
        </div>
      </Reveal>

      {/* ═══ PILLARS ═══ */}
      <Reveal as="section" className="section">
        <div className="container">
          <SectionHead
            label="Three lenses"
            title="What we bring to every <em>engagement</em>."
          />
          <div className="pillars-grid">
            <div className="pillar">
              <span className="pillar-num">Systems</span>
              <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">
              <span className="pillar-num">Clarity</span>
              <h3 className="pillar-title">Clarity under <em>complexity</em></h3>
              <p className="pillar-body">
                A tangled requirements landscape. A governance gap. A transformation with more stakeholders than alignment. We bring structured thinking and honest analysis to situations that resist simple answers.
              </p>
            </div>
            <div className="pillar">
              <span className="pillar-num">Human</span>
              <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>
      </Reveal>

      {/* ═══ INSIGHTS PREVIEW ═══ */}
      <Reveal as="section" className="section">
        <div className="container">
          <SectionHead
            label="Latest thinking"
            title="Working notes from the <em>difficult rooms</em>."
            action={<button className="link-arrow" onClick={() => go('insights')}>All insights <span className="arrow">→</span></button>}
          />
          <div className="insights-grid">
            <button className="insight-card" onClick={() => go('insights')}>
              <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-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-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>

      {/* ═══ ABOUT TEASER ═══ */}
      <Reveal as="section" className="section">
        <div className="container">
          <div className="about-grid">
            <div>
              <span className="label section-eyebrow" style={{marginBottom: '24px', display: 'inline-block'}}>About the practice</span>
              <h2 className="display-2" style={{marginBottom: '32px'}}>
                We do not start with solutions.<br />We start with <em>understanding</em>.
              </h2>
              <div className="prose" style={{marginBottom: '32px'}}>
                <p>
                  Most problems organisations bring to analysts are not the real problem — they are symptoms of something more structural, more systemic, or more human. Getting to the real problem requires patience, rigour, and the willingness to ask uncomfortable questions in a way people can actually hear.
                </p>
                <p>
                  Once the real problem is visible, the path forward becomes clearer. <strong>Not always easy — but clearer.</strong>
                </p>
              </div>
              <button className="btn btn-ghost" onClick={() => go('about')}>
                Read the full story <span className="arrow">→</span>
              </button>
            </div>

            <div className="about-card">
              <div className="about-stat">
                <div className="about-stat-label">Discipline</div>
                <div className="about-stat-val">Principal Business Systems Analyst, Business Solutions Architect &amp; Transformation Advisor</div>
              </div>
              <div className="about-stat">
                <div className="about-stat-label">Depth in</div>
                <div className="about-stat-val">Business Analysis · ITSM · Digital Transformation · Requirements Governance</div>
              </div>
              <div className="about-stat">
                <div className="about-stat-label">Orientation</div>
                <div className="about-stat-val"><em>Systems thinking</em>, human dynamics, and the discipline of clear communication.</div>
              </div>
              <div className="about-stat">
                <div className="about-stat-label">Available</div>
                <div className="about-stat-val">Globally · remote &amp; on-site engagements</div>
              </div>
            </div>
          </div>
        </div>
      </Reveal>

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

window.HomePage = HomePage;