// How It Works: the connected member journey followed by the complete
// member and operator capability set.

function HowItWorksPage({ go }) {
  return (
    <main>
      {/* Short, direct intro before the cinematic takes over. */}
      <section className="section" style={{ paddingBottom: 32 }}>
        <div className="page">
          <div className="page-intro-label">How Synchronize works</div>
          <h1 className="display-1" style={{ maxWidth: 900 }}>
            Your community <em>lives where your members do.</em>
          </h1>
          <p style={{ fontSize: 18, color: 'var(--site-ink-soft)', marginTop: 24, maxWidth: 640 }}>
            Phones. Laptops. Inboxes. One conversation flows through all of them. Then one connected platform helps your team operate the community behind it.
          </p>
        </div>
      </section>

      {/* Cinematic full-viewport scroll scenes */}
      <section>
        <HIWCinematic/>
      </section>

      <section className="hiw-feature-intro">
        <div className="page hiw-feature-intro-inner">
          <div className="page-intro-label">Inside Synchronize</div>
          <div>
            <h2 className="display-2">Everything you need to run a connected community.</h2>
            <p>
              The shared conversation is only the beginning. Scroll to explore the tools for finding community knowledge, understanding engagement, welcoming members, managing day-to-day operations, and more.
            </p>
          </div>
        </div>
      </section>

      <PlatformCapabilities go={go}/>
    </main>
  );
}

Object.assign(window, { HowItWorksPage });