"use client";

import React from "react";
import StrategySection from "../strategy/StrategySection";

/**
 * Workflow 3 — the "Happier Riders. Higher Fulfillment." 3D scroll-storytelling
 * experience (StrategySection).
 *
 * The old bottom "STRATEGY" explanation card (heading + description + pagination
 * + chevron graphic) has been removed: the workflow narrative is already covered
 * by the previous sections, so that card only repeated it and lengthened the
 * page. StrategySection now renders standalone (non-connected) with its own
 * rounded card. The wrapper only cancels the global `section` padding so the
 * tall pinned section doesn't gain empty bands.
 */
export default function Workflow3() {
  return (
    <section
      className="dm-wf3"
      aria-label="Workflow 3 — Happier Riders. Higher Fulfillment."
    >
      <StrategySection />

      <style
        dangerouslySetInnerHTML={{
          __html: `
            .dm-wf3 { position: relative; margin: 0 auto; }
            /* Cancel the global "section { padding: 6rem 0 }": both this wrapper
               and the nested .dm-st are sections, so that padding would stack into
               large empty bands around the pinned 3D experience. */
            .dm-wf3, .dm-wf3 .dm-st { padding-top: 0; padding-bottom: 0; }
          `,
        }}
      />
    </section>
  );
}
