import type { Metadata } from "next";
import { PageHero, Benefits, Faq } from "@/components/sections";
import { SectionHeader } from "@/components/ui";
import ExpertCta from "@/components/ExpertCta";
import TabsDashboard from "@/components/TabsDashboard";
import { MFG_MODULES, CONST_MODULES, MODULES_FAQ } from "@/lib/content";

export const metadata: Metadata = {
  title: "ERP Modules for Plants & Projects",
  description:
    "Manufacturing and construction ERP modules: production, inventory, purchase, sales, BOQ, DPR, RA bills, finance, HR and more.",
  alternates: { canonical: "/modules" },
};

const REPORT_CHIPS = [
  "MIS reports",
  "Dashboards",
  "Scheduled exports",
  "Audit trails",
  "Role-based views",
  "Cost & budget reports",
];

const ADOPTION_STEPS = [
  {
    title: "Choose your modules",
    text: "Pick the manufacturing or construction modules that match your operations today.",
  },
  {
    title: "Configure your workflows",
    text: "Align approvals, documents and processes with how your teams already work.",
  },
  {
    title: "Scale across the business",
    text: "Add modules, plants, projects and users as your requirements evolve.",
  },
];

export default function ModulesPage() {
  return (
    <>
      <PageHero
        eyebrow="MODULES"
        title="Everything you need to run your plants and projects"
        compact
        para="Use the modules your business needs today and add more as your requirements grow. Every module shares the same data, so production, projects, purchase, inventory, sales and finance always agree."
        primary={{ label: "Request a Demo", href: "/request-demo" }}
        secondary={{ label: "Talk to an Expert", href: "/request-demo" }}
        mock={<TabsDashboard />}
      />

      <section className="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"
                tone="amber"
                eyebrow="Manufacturing"
                title="Production, stock, sales and service"
                noMargin
              />
            </div>
            <p className="max-w-[500px] shrink-0 leading-relaxed text-muted max-md:max-w-none">
              Run the plant end to end — planning, inventory, purchase, sales, CRM, finance, HR, assets and post-sales service on one shared data core.
            </p>
          </div>
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {MFG_MODULES.map((m) => (
              <div key={m.title} className="rounded-2xl border border-line bg-white p-7 shadow-soft">
                <span
                  className="mb-4 grid size-11 place-items-center rounded-xl bg-[#fef3c7] text-[#b45309]"
                  aria-hidden="true"
                >
                  <m.icon size={22} />
                </span>
                <h3 className="font-display text-lg font-bold text-ink">{m.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted">{m.text}</p>
                <div className="mt-4 flex flex-wrap gap-1.5" aria-label={`${m.title} capabilities`}>
                  {m.caps.map((c) => (
                    <span
                      key={c}
                      className="rounded-md border border-[#fde68a] bg-[#fffbeb] px-2.5 py-1 text-[11.5px] font-medium text-accent-dark"
                    >
                      {c}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <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="Construction"
                title="Estimation to execution, billing and finance"
                noMargin
              />
            </div>
            <p className="max-w-[500px] shrink-0 leading-relaxed text-muted max-md:max-w-none">
              Take every project from tender to completion — estimation, engineering, execution, documents, procurement and RA billing connected with finance.
            </p>
          </div>
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {CONST_MODULES.map((m) => (
              <div key={m.title} className="rounded-2xl border border-line bg-white p-7 shadow-soft">
                {m.icon && (
                  <span
                    className="mb-4 grid size-11 place-items-center rounded-xl bg-brand-tint text-brand"
                    aria-hidden="true"
                  >
                    <m.icon size={22} />
                  </span>
                )}
                <h3 className="font-display text-lg font-bold text-ink">{m.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted">{m.text}</p>
                {m.caps && (
                  <div className="mt-4 flex flex-wrap gap-1.5" aria-label={`${m.title} capabilities`}>
                    {m.caps.map((c) => (
                      <span
                        key={c}
                        className="rounded-md border border-brand/25 bg-brand-tint px-2.5 py-1 text-[11.5px] font-medium text-brand"
                      >
                        {c}
                      </span>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-navy py-24 text-white max-md:py-[72px]">
        <div className="mx-container grid items-center gap-8 lg:grid-cols-[420px_minmax(0,1fr)] lg:gap-12">
          <div>
            <p className="font-mono text-[11px] font-medium tracking-[0.14em] text-accent">
              REPORTING &amp; BUSINESS INSIGHTS
            </p>
            <h2 className="mt-4 font-display text-[clamp(28px,3.4vw,40px)] font-bold text-white">
              One version of the business
            </h2>
            <p className="mt-3 text-[15px] leading-relaxed text-faint">
              Reports and dashboards draw on every module, so management sees one version of the business — from shop floor and site to finance.
            </p>
          </div>
          <div className="flex flex-wrap gap-2.5">
            {REPORT_CHIPS.map((chip) => (
              <span
                key={chip}
                className="rounded-full bg-brand-light/15 px-4 py-2 text-[13px] font-medium text-[#dbeafe]"
              >
                {chip}
              </span>
            ))}
          </div>
        </div>
      </section>

      <Benefits
        split
        eyebrow="Adoption"
        title="Start with what you need. Expand as you grow."
        intro="MxERP is modular by design — begin with the modules that matter today and add more as your teams, plants and projects grow."
        items={ADOPTION_STEPS}
      />

      <Faq title="Frequently asked questions" items={MODULES_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">
              One connected platform
            </div>
            <h2 className="mt-4 max-w-[620px] font-display text-[clamp(28px,3.4vw,40px)] font-bold leading-tight text-white">
              Not sure which modules you need?
            </h2>
            <p className="mt-4 max-w-[560px] text-[15px] leading-relaxed text-white/80">
              A product specialist will map MxERP modules to your processes and show you exactly how they connect — no obligation.
            </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 an 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>
    </>
  );
}