import type { Metadata } from "next";
import { PageHero, SplitIntro, ChallengeCards, DashViews, IconCardsWithIcons, DuoCards, SplitSteps, TrioDetail, StepCards, EpcBand, BeforeAfter, IndustryGrid, SolvesTable, Benefits, Faq } from "@/components/sections";
import { SectionHeader } from "@/components/ui";
import ExpertCta from "@/components/ExpertCta";
import { ProjectDashboard } from "@/components/mockups";
import {
  CONST_CHALLENGE_CARDS,
  CONST_PROJECT_TOOLS,
  CONST_DASHBOARD_CARDS,
  CONST_DASHBOARD_CHIPS,
  CONST_FINANCE_CARDS,
  CONST_TENDER_CARDS,
  CONST_BEFORE_AFTER,
  CONST_INDUSTRIES,
  CONST_EPC_CARDS,
  CONST_EPC_LIFECYCLE,
  CONST_SOLVES,
  CONST_CAPABILITIES,
  CONST_MATERIAL,
  CONST_MODULES,
  CONST_FAQ,
} from "@/lib/content";

export const metadata: Metadata = {
  title: "Construction ERP Software",
  description:
    "MxERP construction ERP: estimation, BOQ, WBS, DPR, RA bills, procurement, workforce and finance for complete project management.",
  alternates: { canonical: "/construction-erp" },
};

const IMPROVEMENTS = [
  { title: "Better project visibility", text: "Access relevant project information and monitor activities through centralized systems." },
  { title: "Improved cost control", text: "Connect project, purchase and financial information for better cost visibility." },
  { title: "Faster procurement", text: "Coordinate material requirements and purchasing activities." },
  { title: "Better material management", text: "Improve visibility into inventory and project material movement." },
  { title: "Centralized documentation", text: "Keep important project information and documents in an organized system." },
  { title: "Improved billing management", text: "Manage measurement and RA billing as part of project operations." },
  { title: "Connected finance", text: "Bring project operations and accounting information together." },
  { title: "Better management decisions", text: "Use centralized information and reporting to understand performance." },
];

const PLATFORM_POINTS = [
  { title: "Integrated construction ERP", text: "Connect estimation, engineering, project management, procurement, inventory, HR and finance." },
  { title: "Project-centric management", text: "Organize project information through BOQ, WBS, PBS, DPR, MB and RA billing processes." },
  { title: "Better project visibility", text: "Access relevant project information and monitor activities through centralized systems." },
  { title: "Integrated procurement & inventory", text: "Connect material requirements, purchase activities and inventory operations." },
  { title: "Financial integration", text: "Connect project and operational transactions with finance and accounting." },
  { title: "Cloud-based accessibility", text: "Access business information through a cloud-based ERP environment." },
  { title: "Modular & customizable", text: "Align ERP functionality with your organizational requirements." },
];

export default function ConstructionErp() {
  return (
    <>
      <PageHero
        eyebrow="CONSTRUCTION ERP SOFTWARE"
        title="Integrated Construction ERP Software for complete"
        accent="project management"
        compact
        para="MxERP is a comprehensive Construction ERP Software designed to help construction companies, infrastructure businesses and project-based organizations manage their complete business operations through one integrated platform."
        para2="From estimation, bidding and tendering to engineering, project management, procurement, inventory, finance, HR and payroll — MxERP helps improve project visibility, control costs and manage operations more efficiently."
        primary={{ label: "Request a Free Demo", href: "/request-demo" }}
        secondary={{ label: "Talk to a Construction ERP Expert", href: "/request-demo" }}
        mock={<ProjectDashboard />}
      />

      <SplitIntro
        tone="blue"
        label="ONE INTEGRATED PLATFORM"
        title="Manage your construction business from one integrated platform"
        paras={[
          "Construction projects involve multiple activities, teams, contractors, materials, documents and financial transactions. Managing these processes through disconnected systems can make it difficult to track project progress, costs and resources.",
          "MxERP brings construction and business operations together through an integrated Construction Management ERP Software — from initial estimation and tendering through execution and financial management.",
        ]}
        cardLabel="KEY CAPABILITIES"
        columns={[CONST_CAPABILITIES.col1, CONST_CAPABILITIES.col2]}
      />

      <ChallengeCards
        eyebrow="Construction challenges"
        title="Common challenges faced by construction businesses"
        intro="Without centralized systems, coordinating execution, procurement, materials, workforce, contractors, documents and finances leads to delays, limited visibility and difficulty controlling project costs."
        items={CONST_CHALLENGE_CARDS}
        cta={{
          title: "One integrated ERP solution for every one of these.",
          label: "See how MxERP solves them",
          href: "#solves",
        }}
      />

      <div id="solves" style={{ scrollMarginTop: 84 }}>
        <SolvesTable
          eyebrow="How MxERP solves it"
          title="How MxERP solves construction management challenges"
          intro="MxERP connects construction project management with procurement, inventory, finance, HR and other business operations."
          head={["Construction challenge", "MxERP solution"]}
          rows={CONST_SOLVES}
        />
      </div>

      <DashViews
        eyebrow="Construction ERP dashboard"
        title="Get a complete view of your projects and business"
        intro="Monitor project activities, costs, procurement, inventory and financial information from a centralized platform."
        cards={CONST_DASHBOARD_CARDS}
        chips={CONST_DASHBOARD_CHIPS}
        closing="One dashboard. Complete construction visibility."
        closingPara="Instead of multiple spreadsheets and disconnected systems, one centralized environment for construction operations."
      />

      <IconCardsWithIcons
        eyebrow="Construction project management software"
        title="Manage projects from planning to execution"
        intro="Structure and manage every project activity — from quantities to daily site reports and running bills."
        items={CONST_PROJECT_TOOLS}
      />

      <DuoCards
        cards={[
          {
            eyebrow: "Estimation, bidding & tender management",
            title: "Start projects with better planning",
            text: "Construction projects begin well before work starts on site. Estimation, bidding and tendering play an important role in evaluating project requirements — MxERP helps you manage these initial stages.",
            cols: 2,
            checks: [
              "Project estimation",
              "Tender management",
              "Bid management",
              "Cost-related information",
              "Project requirement planning",
              "Tender documentation",
            ],
          },
          {
            eyebrow: "Engineering management",
            title: "Organize engineering information for construction projects",
            text: "Connect engineering information, material specifications and technical requirements with project execution and procurement.",
            cols: 1,
            checks: [
              "Bill of materials / BBS-related information",
              "Unit conversion factors",
              "Detailed material specifications",
              "Engineering information",
              "Project-related technical data",
            ],
          },
        ]}
      />

      <SplitSteps
        eyebrow="Purchase & inventory management"
        title="Keep construction materials under control"
        intro="Construction projects depend on the timely availability of materials. MxERP connects purchase and inventory processes to improve visibility into material requirements and stock."
        checks={CONST_MATERIAL.checks}
        cardLabel="CONSTRUCTION MATERIAL WORKFLOW"
        steps={CONST_MATERIAL.steps}
      />

      <EpcBand
        eyebrow="EPC ERP software"
        title="Integrated ERP for EPC projects"
        intro="EPC projects involve engineering, procurement and construction. MxERP connects these activities with project management and financial operations."
        cards={CONST_EPC_CARDS}
        railTitle="EPC project management — connect engineering, procurement & construction"
        railLabel="PROJECT LIFECYCLE"
        steps={CONST_EPC_LIFECYCLE}
      />

      <TrioDetail
        eyebrow="Finance, workforce & assets"
        title="Financial control, people and plant — connected to every project"
        intro="Connect finance, workforce and asset operations with every project — accounting, HR, payroll and maintenance in one connected system."
        items={CONST_FINANCE_CARDS}
      />

      <StepCards
        eyebrow="Construction project workflow"
        title="From tender to project completion"
        intro="MxERP connects the major stages of a construction project through an integrated workflow."
        steps={CONST_TENDER_CARDS}
      />

      <BeforeAfter
        eyebrow="Before & after"
        title="Solve construction problems with connected business processes"
        intro="See how disconnected files, manual tracking and separate systems become one connected workflow — with the result on visibility, coordination and control."
        before={CONST_BEFORE_AFTER.before}
        after={CONST_BEFORE_AFTER.after}
      />

      <IndustryGrid
        eyebrow="Who it's for"
        title="ERP for construction and infrastructure operations"
        intro="Designed around construction and infrastructure business processes — project execution alongside procurement, inventory, workforce and financial operations."
        items={CONST_INDUSTRIES}
      />

      <section className="bg-canvas py-24 max-md:py-[72px]">
        <div className="mx-container">
          <div className="mb-11 flex items-end justify-between gap-10 max-md:flex-col max-md:items-start max-md:gap-4">
            <div className="max-w-[640px]">
              <SectionHeader align="left" eyebrow="Why choose MxERP for construction" title="One platform for construction & business management" noMargin />
            </div>
            <p className="max-w-[480px] shrink-0 leading-relaxed text-muted max-md:max-w-none">
              A single platform connecting estimation, engineering, execution, procurement and finance — aligned with your organizational requirements.
            </p>
          </div>
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {PLATFORM_POINTS.map((p) => (
              <div key={p.title} className="rounded-2xl border border-line bg-white p-7 shadow-soft">
                <h3 className="font-display text-lg font-bold text-ink">{p.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted">{p.text}</p>
              </div>
            ))}
            <div className="flex flex-col justify-between gap-6 rounded-2xl bg-brand-tint p-7">
              <h3 className="font-display text-[20px] font-bold leading-snug text-ink">
                See it with your own projects and processes.
              </h3>
              <a href="/request-demo" className="inline-flex min-h-[44px] items-center justify-center rounded-lg bg-brand px-5 text-sm font-semibold text-white hover:bg-brand-dark">
                Request a Free Demo
              </a>
            </div>
          </div>
        </div>
      </section>

      <Benefits
        split
        eyebrow="Benefits of construction ERP software"
        title="Improve control across every project"
        intro="Access project information from planning through execution — with better visibility, cost control, faster procurement, smoother billing and connected finance across every project."
        items={IMPROVEMENTS}
      />

      <SolvesTable
        eyebrow="Construction ERP modules"
        title="Every module your projects run on"
        intro="These modules align with MxERP's construction and infrastructure functionality."
        action={{ label: "Browse all modules", href: "/modules" }}
        head={["Module", "Key functions"]}
        rows={CONST_MODULES.map((m) => ({ challenge: m.title, solution: m.text }))}
      />

      <Faq title="Frequently asked questions" items={CONST_FAQ} />

      <div className="mx-container pb-24 max-sm:pb-16">
        <section className="grid items-center gap-8 rounded-3xl bg-brand p-12 max-sm:p-8 lg:grid-cols-[1fr_auto]">
          <div>
            <div className="font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-white">
              From estimation to execution, billing &amp; finance
            </div>
            <h2 className="mt-4 max-w-[620px] font-display text-[clamp(28px,3.4vw,40px)] font-bold leading-tight text-white">
              Manage construction projects with MxERP
            </h2>
            <p className="mt-4 max-w-[560px] text-[15px] leading-relaxed text-white/80">
              Improve project visibility, organize business processes and manage construction operations through one centralized ERP platform.
            </p>
          </div>
          <div className="flex flex-col gap-3 max-sm:w-full">
            <a href="/request-demo" className="inline-flex min-h-[48px] items-center justify-center rounded-lg bg-white px-6 text-[15px] font-semibold text-navy hover:bg-canvas max-sm:w-full">
              Request a Free Demo
            </a>
            <ExpertCta
              label="Talk to a Construction ERP Expert"
              className="inline-flex min-h-[48px] items-center justify-center rounded-lg border border-white/40 px-6 text-[15px] font-semibold text-white hover:bg-white/10 max-sm:w-full"
            />
          </div>
        </section>
      </div>
    </>
  );
}