import React from "react";
import SolutionsHero from "@/components/sections/SolutionsHero";
import IndustryStack from "@/components/sections/IndustryStack";

export const metadata = {
  title: "Solutions – Doormile",
  description: "Discover how Doormile's connected logistics platform serves diverse industries (FMCG, Pharma, and Enterprise) with tailored solutions.",
};

export default function SolutionsPage() {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        /* Fix "Why Businesses Choose Doormile" section — anchor absolute image left, push content right */
        .elementor-element.elementor-element-ead59d3 {
            position: relative;
            overflow: hidden;
        }
        .elementor-element.elementor-element-f35119c {
            position: absolute !important;
            left: -2% !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 48% !important;
            max-width: 520px !important;
            opacity: 0.18 !important;
            z-index: 0 !important;
            pointer-events: none;
        }
        .elementor-element.elementor-element-56ecbb3 {
            position: relative !important;
            z-index: 1 !important;
            width: 55% !important;
            max-width: 55% !important;
            margin-left: auto !important;
            margin-right: 4% !important;
        }
        .elementor-element.elementor-element-56ecbb3 .e-con-inner {
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        @media (max-width: 1020px) {
            .elementor-element.elementor-element-f35119c { display: none !important; }
            .elementor-element.elementor-element-56ecbb3 {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
            }
        }
      `}} />

      <div 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">
              <SolutionsHero />
              <IndustryStack />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}