function Page() {
  const capabilities = [
    { tag: "AUDIENCE RE-ENGAGEMENT", title: "Bring customers back", body: "Identify lapsing customers by behavior and reach them before churn: across email, display, and social.", detail: "Churn-risk scoring on 30/60/90-day windows." },
    { tag: "LOYALTY ACTIVATION", title: "Convert one-time to repeat", body: "Targeted sequences that move first-time buyers into their second, third, and recurring purchases.", detail: "Repeat-purchase lift typically 18–32% on active cohorts." },
    { tag: "LIFECYCLE SEGMENTS", title: "Segment by journey stage", body: "New, active, at-risk, lapsed, and advocate segments update continuously, not static list exports.", detail: "Sync to your email, SMS, and paid channels in real time." },
    { tag: "WIN-BACK CAMPAIGNS", title: "Re-acquire lapsed buyers", body: "Bidding and creative logic optimized for people who already know your brand: cheaper than net-new.", detail: "Win-back CPA typically 40–60% lower than cold acquisition." },
  ];
  const stages = [
    { title: "First purchase", body: "Confirm the relationship. Set expectations for what happens next." },
    { title: "Repeat", body: "Convert the second purchase. This is where churn risk drops off a cliff." },
    { title: "Loyalty", body: "Reward the behavior. Give customers a reason to stay on platform." },
    { title: "Advocate", body: "The best acquisition channel. Enable sharing, referrals, and reviews." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Solutions"
        eyebrow="Solutions · Retention"
        title="Keep them."
        italic="Don't re-acquire them."
        lead="Acquiring a customer costs five times what it takes to keep one. Our retention stack segments by lifecycle stage, scores churn risk, and re-engages before the relationship ends."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the lifecycle", href:"#lifecycle"}}
        signals={[["3.2×","Typical LTV multiplier"],["40–60%","Cheaper than cold"],["Real-time","Lifecycle segments"],["Cross-channel","Email · SMS · paid"]]}
        aside={<RetentionLoop/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="The retention gap" title="Acquisition dollars" italic="are renting customers." lead="If you're spending all your performance budget on net-new and none on the cohort that already bought, you're running a treadmill." />
          <ProblemResolution
            problem={{
              eyebrow: "WHAT GETS MISSED",
              title: "The cost of not retaining.",
              points: [
                "Budget skewed 90/10 toward cold vs. existing",
                "No visibility into churn risk until the customer is already gone",
                "Win-back treated as an afterthought, not a channel",
                "Loyalty signals trapped inside the commerce platform",
              ]
            }}
            resolution={{
              eyebrow: "A RETENTION ENGINE",
              title: "Lifecycle as a first-class channel.",
              points: [
                "Churn-risk scoring on every active customer",
                "Win-back sequences across email, SMS, and paid",
                "LTV-weighted bidding on paid retargeting",
                "Loyalty cohorts you can act on, not just look at",
              ]
            }}
          />
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="What's in the stack" title="Four retention" italic="capabilities."/>
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>

      <section className="section" id="lifecycle">
        <div className="container">
          <SectionHeader eyebrow="Customer lifecycle" title="From first purchase" italic="to advocate." />
          <NumberedSteps steps={stages}/>
        </div>
      </section>

      <FinalCTASection
        title="Want customers"
        italic="that stick around?"
        body="Share your customer cohort data and current lifecycle setup. We'll show you where your churn cliff is, which cohorts are worth re-engaging, and what it would cost."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See retargeting", href:"platform-retargeting"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);