import React from "react";
import HowItWorksHero from "../../components/sections/HowItWorksHero";
import Experience3DLoader from "@/modules/how-it-works-3d/Experience3DLoader";

export const metadata = {
  title: "How It Works – Doormile",
  description: "See how Doormile connects first, mid, and last mile into a seamless delivery experience powered by MileTruth™ AI.",
};

export default function HowItWorksPage() {
  return (
    <div id="how-it-works" className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
      <div className="content">
        <div className="content-inner">
          <div data-elementor-type="wp-page" data-elementor-id="59" className="elementor elementor-59">
            <HowItWorksHero />
            {/* The first/mid/last-mile story is now told by the scroll-driven 3D
                experience, which replaces the former Miles3 / WhyChooseDoormile /
                TheDoormileWay content sections on this page. */}
            <Experience3DLoader />
          </div>
        </div>
      </div>
    </div>
  );
}