// Stories page — full story grid with intro hero.

function StoriesHero() {
  return (
    <section className="page-hero">
      <div className="container page-hero-body">
        <div className="eyebrow">Field stories</div>
        <h1>
          Real chats.<br/>
          <em>Real outcomes.</em>
        </h1>
        <p className="page-hero-sub">
          Every story below is from an actual Telegram thread. No invented metrics, no
          stock testimonials. Names, quotes and numbers ship with their evidence.
        </p>
      </div>
    </section>
  );
}

function StoriesApp() {
  return (
    <>
      <SiteEffects />
      <SiteNav active="stories" />
      <StoriesHero />
      <Stories />
      <FinalCTA
        heading={<>You write the next story.<br/><em>Octodus writes the receipts.</em></>}
        sub="Add the bot to a thread, mention it like a teammate, and watch what it ships in the first week."
        ctaLabel="Start your story"
      />
      <SiteFooter />
      <SiteTweaks />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<StoriesApp />);