/* global React, HW */
const { useState, useEffect } = React;
const { Link, Stock, ClientLogo, SolutionIcon, compoundQuarters, go } = window.HW;

// ── Home ─────────────────────────────────────────────────────
function PageHome() {
  const q = compoundQuarters();
  return (
    <main>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <span className="eyebrow">Enterprise Stewardship · Est. 1987</span>
              <h1 style={{marginTop: 18}}>Aligned outcomes for the modern enterprise.</h1>
              <p className="lede">Harswell partners with the world's most resilient organizations to deliver continuity at scale — across infrastructure, consumer, and continuity verticals.</p>
              <div className="hero-cta">
                <Link to="/contact" className="btn btn-primary">Request a consultation</Link>
                <Link to="/solutions" className="btn btn-secondary">Explore solutions</Link>
              </div>
            </div>
            <Stock tone="cool" ratio="tall" label="Hero · glass-walled office" />
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{maxWidth: 720, marginBottom: 48}}>
            <span className="eyebrow">Our solutions</span>
            <h2 style={{marginTop: 14}}>A unified platform for continuity at every layer of the organism.</h2>
          </div>
          <div className="grid-3">
            <div className="card">
              <div className="icon-box"><SolutionIcon kind="cadence" /></div>
              <h3>Cadence Solutions</h3>
              <p>Operational rhythm tooling for distributed enterprises. Establish, measure, and sustain the cadence of becoming across business units.</p>
              <Link to="/solutions#cadence" className="learn">Learn more →</Link>
            </div>
            <div className="card">
              <div className="icon-box"><SolutionIcon kind="stewardship" /></div>
              <h3>Stewardship Platform</h3>
              <p>End-to-end stewardship infrastructure that aligns leadership behavior with brand outcomes — at scale, across geographies and quarters.</p>
              <Link to="/solutions#stewardship" className="learn">Learn more →</Link>
            </div>
            <div className="card">
              <div className="icon-box"><SolutionIcon kind="reabsorption" /></div>
              <h3>Reabsorption Services</h3>
              <p>Managed services for graceful organizational transition. Reabsorb redundancy without rupture — the resilient way to evolve.</p>
              <Link to="/solutions#reabsorption" className="learn">Learn more →</Link>
            </div>
          </div>
        </div>
      </section>

      <section className="alt">
        <div className="container">
          <div style={{textAlign: 'center', marginBottom: 36}}>
            <span className="eyebrow">Trusted by industry leaders</span>
          </div>
          <div className="logo-wall">
            <div className="logo-cell"><ClientLogo kind="chevron" /></div>
            <div className="logo-cell"><ClientLogo kind="rings" /></div>
            <div className="logo-cell"><ClientLogo kind="bars" /></div>
            <div className="logo-cell"><ClientLogo kind="triangle" /></div>
            <div className="logo-cell"><ClientLogo kind="hex" /></div>
            <div className="logo-cell"><ClientLogo kind="dots" /></div>
            <div className="logo-cell"><ClientLogo kind="arrow" /></div>
            <div className="logo-cell"><ClientLogo kind="square" /></div>
          </div>
        </div>
      </section>

      <section className="dark">
        <div className="container">
          <div style={{textAlign: 'center', marginBottom: 12}}>
            <span className="eyebrow">By the numbers</span>
          </div>
          <div className="stats-strip">
            <div className="stat"><div className="num">14,000<span style={{fontSize: '0.5em'}}>+</span></div><div className="label">Stewards globally</div></div>
            <div className="stat"><div className="num">47</div><div className="label">Countries</div></div>
            <div className="stat"><div className="num">{q}</div><div className="label">Quarters of compound alignment</div></div>
            <div className="stat"><div className="num">98<span style={{fontSize: '0.5em'}}>%</span></div><div className="label">Partnership renewal rate</div></div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="testimonial">
            <span className="eyebrow">Customer outcomes</span>
            <blockquote style={{marginTop: 18}}>Harswell's stewardship model has fundamentally transformed how we think about continuity.</blockquote>
            <div className="attrib">
              <span className="initials">MR</span>
              <span><span className="who">M.R.</span> · VP of People, Fortune 500 Retailer</span>
            </div>
          </div>
        </div>
      </section>

      <section className="cta-strip">
        <div className="container">
          <h2>Begin your alignment.</h2>
          <p>Speak with a Harswell steward about Cadence, Stewardship, or Reabsorption services for your organization.</p>
          <Link to="/contact" className="btn btn-primary">Request a consultation</Link>
        </div>
      </section>
    </main>
  );
}

// ── About ────────────────────────────────────────────────────
function PageAbout() {
  const q = compoundQuarters();
  const leadership = [
    { name: 'Colleen Archer',     title: 'Chief Executive Officer' },
    { name: 'David Hollender',    title: 'President & Chief Operating Officer' },
    { name: 'Margaret Voss',      title: 'Chief Financial Officer' },
    { name: 'Anand Subramanian',  title: 'Chief Stewardship Officer' },
    { name: 'Helena Park',        title: 'Chief People Officer' },
    { name: 'Jonas Reinholm',     title: 'Chief Technology Officer' },
    { name: 'Pauline Maddox',     title: 'General Counsel' },
    { name: 'Theodore Klein',     title: 'Chief Reabsorption Officer' },
  ];
  const initials = (n) => n.split(' ').map(p => p[0]).slice(0,2).join('');

  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <div className="crumbs"><Link to="/">Home</Link><span className="sep">/</span>About</div>
          <h1>An organism, not an organization.</h1>
          <p>Harswell has spent {q} quarters helping the world's most resilient enterprises practice the discipline of becoming.</p>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="grid-2" style={{alignItems: 'center', gap: 56}}>
            <div>
              <span className="eyebrow">Our story</span>
              <h2 style={{marginTop: 14, marginBottom: 22}}>Founded in 1987, in service of continuity.</h2>
              <p style={{color: 'var(--hw-gray)', fontSize: 17}}>Harswell began with two co-founders and a shared conviction: that the modern enterprise required a new kind of partner — one capable of holding the long arc of transformation without flinching from its quieter moments. From a single office, the practice has grown into a global stewardship platform serving partners across infrastructure, consumer, and continuity verticals.</p>
              <p style={{color: 'var(--hw-gray)', fontSize: 17}}>Today, Harswell operates as a public benefit corporation, with {q} consecutive quarters of compound alignment and partnerships in 47 countries. Our work is rarely visible. That is the point.</p>
            </div>
            <Stock tone="warm" ratio="square" label="Founders' office, c. 1987" />
          </div>
        </div>
      </section>

      <section className="alt" id="values">
        <div className="container">
          <div style={{textAlign: 'center', marginBottom: 48}}>
            <span className="eyebrow">Our values</span>
            <h2 style={{marginTop: 12}}>Three disciplines.</h2>
          </div>
          <div className="values">
            <div className="value">
              <h3>Cadence.</h3>
              <p>The rhythm of an organization is its first and last asset. We help partners hear the cadence of their own becoming — and then we help them keep time, quarter after quarter.</p>
            </div>
            <div className="value">
              <h3>Stewardship.</h3>
              <p>Stewardship is not management. It is the patient practice of holding what others entrust to us with neither possession nor distance. Every Harswell engagement is a stewardship engagement.</p>
            </div>
            <div className="value">
              <h3>Becoming.</h3>
              <p>The enterprise that ceases to become, ceases. We build the conditions for sustained becoming — for the partner, for the organism, and for the quieter forms of continuity that lie beneath both.</p>
            </div>
          </div>
        </div>
      </section>

      <section id="leadership">
        <div className="container">
          <div style={{marginBottom: 36}}>
            <span className="eyebrow">Leadership</span>
            <h2 style={{marginTop: 12}}>The Harswell stewardship council.</h2>
          </div>
          <div className="leader-grid">
            {leadership.map((p) => (
              <div className="leader" key={p.name}>
                <div className="avatar">{initials(p.name)}</div>
                <h4>{p.name}</h4>
                <div className="title">{p.title}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="dark tight">
        <div className="container">
          <div style={{textAlign: 'center', maxWidth: 680, margin: '0 auto'}}>
            <h2 style={{fontSize: 28, marginBottom: 18}}>Twenty-six quarters of compound alignment, and counting.</h2>
            <Link to="/contact" className="btn btn-primary">Speak with a steward</Link>
          </div>
        </div>
      </section>
    </main>
  );
}

// ── Solutions ────────────────────────────────────────────────
function PageSolutions() {
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <div className="crumbs"><Link to="/">Home</Link><span className="sep">/</span>Solutions</div>
          <h1>The Harswell platform.</h1>
          <p>A unified stack of services for the resilient enterprise: cadence, stewardship, and reabsorption — engineered to hold across quarters, geographies, and generations of leadership.</p>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="solution-block" id="cadence">
            <div>
              <span className="eyebrow">Cadence Solutions</span>
              <h2>Operational rhythm, instrumented at scale.</h2>
              <p>Cadence Solutions is the foundational layer of the Harswell platform. It provides instrumentation, telemetry, and orchestration for the operational rhythm of the modern enterprise — the heartbeat of meetings, reviews, releases, and recurring decisions that shape how an organism actually moves through time.</p>
              <p>Built on two decades of stewardship research, Cadence integrates with existing planning, HRIS, and continuity systems through a vendor-neutral connector layer. Outcomes typically include measurable improvements in alignment latency, quarter-over-quarter rhythm fidelity, and the resilience of leadership transitions.</p>
              <Link to="/contact" className="btn btn-secondary" style={{marginTop: 14}}>Learn more</Link>
            </div>
            <Stock tone="cool" label="Cadence dashboard · partner view" />
          </div>

          <div className="solution-block flip" id="stewardship">
            <div>
              <span className="eyebrow">Stewardship Platform</span>
              <h2>The discipline of holding, at every layer.</h2>
              <p>The Stewardship Platform extends Cadence with the human and structural dimensions of long-form transformation. Stewardship workflows align leadership behavior with brand outcomes through programmatic check-ins, behavioral baselines, and the proprietary Compound Alignment Index — a quarterly measure that has anchored Harswell's practice since the late 1990s.</p>
              <p>For partners with distributed leadership, the Platform offers Stewardship-as-a-Service: managed engagement with credentialed Harswell stewards embedded across the enterprise calendar.</p>
              <Link to="/contact" className="btn btn-secondary" style={{marginTop: 14}}>Learn more</Link>
            </div>
            <Stock tone="warm" label="Stewardship review · quarterly" />
          </div>

          <div className="solution-block" id="reabsorption">
            <div>
              <span className="eyebrow">Reabsorption Services</span>
              <h2>Graceful transition, without rupture.</h2>
              <p>Reabsorption Services is the managed-services arm of the Harswell platform, addressing the most consequential moments in the lifecycle of an enterprise: redundancy, consolidation, and structural transition. Where conventional providers treat these moments as isolated events, Reabsorption Services treats them as movements within a longer arc of organizational continuity.</p>
              <p>Engagements are credentialed, quietly conducted, and measured against the partner's own continuity baseline — not against industry averages. Reabsorption is, in our experience, never finished; it is only practiced.</p>
              <div style={{display: 'flex', gap: 12, marginTop: 14, flexWrap: 'wrap'}}>
                <Link to="/contact" className="btn btn-secondary">Learn more</Link>
                <a href="archive.html#pto" className="btn btn-secondary" style={{background: 'transparent', border: '1px solid var(--hw-navy)', color: 'var(--hw-navy)'}}>View case study →</a>
              </div>
            </div>
            <Stock tone="deep" label="Reabsorption engagement · field" />
          </div>

          <div className="solution-block flip" id="brand">
            <div>
              <span className="eyebrow">Brand Alignment Infrastructure</span>
              <h2>Brand as continuity, not as expression.</h2>
              <p>Harswell's Brand Alignment Infrastructure provides the standards, tooling, and review surface for partners whose brand is a load-bearing element of their continuity strategy. Includes voice governance, narrative drift monitoring, and the Bearer Protocol for spokesperson alignment.</p>
              <Link to="/contact" className="btn btn-secondary" style={{marginTop: 14}}>Learn more</Link>
            </div>
            <Stock tone="warm" label="Voice governance · review" />
          </div>

          <div className="solution-block" id="continuity">
            <div>
              <span className="eyebrow">Continuity Architecture</span>
              <h2>The architecture beneath the architecture.</h2>
              <p>Continuity Architecture is the integration discipline that binds Cadence, Stewardship, Reabsorption, and Brand Alignment into a single resilient stack. Delivered as a multi-quarter engagement, Continuity Architecture is appropriate for partners preparing for generational transitions — leadership, structural, or otherwise.</p>
              <Link to="/contact" className="btn btn-secondary" style={{marginTop: 14}}>Learn more</Link>
            </div>
            <Stock tone="cool" label="Continuity blueprint" />
          </div>
        </div>
      </section>

      <section className="cta-strip">
        <div className="container">
          <h2>Ready to begin?</h2>
          <p>Every Harswell engagement begins with a single conversation. A steward will be in touch within two business days.</p>
          <Link to="/contact" className="btn btn-primary">Request a consultation</Link>
        </div>
      </section>
    </main>
  );
}

window.HW.PageHome = PageHome;
window.HW.PageAbout = PageAbout;
window.HW.PageSolutions = PageSolutions;