import type { Metadata } from "next";
import { Link2, LayoutGrid, Zap, Cloud, SlidersHorizontal, Eye, Factory, Package, ShoppingCart, Truck, Database, BarChart3 } from "lucide-react";
import { PageHero, SplitIntro, DashStrip, SolvesTable, Benefits, Faq } from "@/components/sections";
import { SectionHeader } from "@/components/ui";
import ExpertCta from "@/components/ExpertCta";
import { PlantDashboard } from "@/components/mockups";
import {
  MFG_MODULES,
  MFG_SOLVES,
  MFG_CAPABILITIES,
  SUB_INDUSTRIES,
  MFG_BENEFITS,
  MFG_FEATURES_TABLE,
  MFG_FAQ,
} from "@/lib/content";

export const metadata: Metadata = {
  title: "Manufacturing ERP Software",
  description:
    "MxERP manufacturing ERP: production planning, inventory, purchase, sales, CRM, finance, HR and assets on one integrated platform.",
  alternates: { canonical: "/manufacturing-erp" },
};

export default function ManufacturingErp() {
  return (
    <>
      <PageHero
        eyebrow="MANUFACTURING ERP SOFTWARE"
        pill="amber"
        title="Integrated Manufacturing ERP for"
        accent="smarter business management"
        accentColor="amber"
        compact
        para="MxERP is a comprehensive Manufacturing ERP Software that helps manufacturing businesses manage their core operations through a single integrated platform. Integrated workflows, real-time business information and modular functionality help you improve operational control, streamline processes and make informed decisions."
        primary={{ label: "Talk to an ERP Expert", href: "/request-demo" }}
        secondary={{ label: "Explore modules", href: "/modules" }}
        mock={<PlantDashboard />}
      />

      <SplitIntro
        label="ONE INTEGRATED ERP"
        title="Manage your manufacturing operations with one integrated ERP"
        paras={[
          "Manufacturing businesses manage procurement, production, inventory, sales, finance and workforce every day. When these run through separate systems or manual processes, businesses face delays, data duplication and limited visibility.",
          "MxERP brings these operations together, helping teams access relevant information and coordinate activities across departments.",
        ]}
        cardLabel="KEY CAPABILITIES"
        columns={[MFG_CAPABILITIES.col1, MFG_CAPABILITIES.col2]}
      />

      <DashStrip
        label="Management dashboard"
        title="One dashboard. Complete business visibility."
        para="Instead of checking separate spreadsheets and systems, management can access relevant business information through a centralized ERP dashboard."
      />

      <SolvesTable
        eyebrow="Challenges solved"
        tone="amber"
        title="How MxERP solves manufacturing challenges"
        intro="MxERP connects core manufacturing operations through an integrated ERP platform, bringing operational information together and improving visibility across departments."
        rows={MFG_SOLVES}
      />

      <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"
                tone="amber"
                eyebrow="Manufacturing ERP modules"
                title="Modules for every area of your plant and business"
                noMargin
              />
            </div>
            <p className="max-w-[500px] shrink-0 leading-relaxed text-muted max-md:max-w-none">
              Use the modules according to your operational requirements and processes — start with production, inventory or finance, and expand across your plant as you grow.
            </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 text-center">
          <span className="inline-flex items-center rounded-full border border-[#fde68a] bg-[#fffbeb] px-4 py-2 font-mono text-[11px] font-semibold tracking-[0.14em] text-accent-dark">
            CONNECT YOUR MANUFACTURING WORKFLOW
          </span>
          <h2 className="mx-auto mt-2.5 max-w-3xl font-display text-[clamp(28px,3.4vw,40px)] font-bold">
            From sales order to production and dispatch
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-muted">
            MxERP connects each stage of the manufacturing business process so teams
            can coordinate activities and access information across departments.
          </p>
          <div className="mt-11 rounded-2xl border border-line bg-white p-8 shadow-soft max-sm:p-6">
            <ol className="grid grid-cols-2 gap-x-3 gap-y-6 sm:grid-cols-4 lg:grid-cols-8">
              {[
                "Sales & orders",
                "Purchase & procurement",
                "Inventory",
                "Production planning",
                "Shop floor",
                "Finished goods",
                "Sales & distribution",
                "Finance",
              ].map((s, i, arr) => {
                const last = i === arr.length - 1;
                return (
                  <li key={s} className="relative flex flex-col items-center gap-2.5 text-center">
                    <span
                      className={`relative z-[1] grid size-9 shrink-0 place-items-center rounded-full text-[11px] font-bold ${last ? "bg-navy text-white" : "bg-accent text-ink"}`}
                      aria-hidden="true"
                    >
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    {i < arr.length - 1 && (
                      <span className="absolute top-[18px] hidden h-[2px] bg-accent/50 sm:block" style={{ left: "calc(50% + 26px)", right: "calc(-50% + 26px)" }} aria-hidden="true" />
                    )}
                    <span className="block text-[12.5px] font-semibold leading-snug text-ink">{s}</span>
                  </li>
                );
              })}
            </ol>
          </div>
        </div>
      </section>

      <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]">
              <span className="inline-flex items-center rounded-full border border-[#fde68a] bg-[#fffbeb] px-4 py-2 font-mono text-[11px] font-semibold tracking-[0.14em] text-accent-dark">
                MANUFACTURING NEEDS
              </span>
              <h2 className="mt-2.5 font-display text-[clamp(28px,3.4vw,40px)] font-bold">
                Manufacturing ERP for different manufacturing needs
              </h2>
            </div>
            <p className="max-w-[480px] shrink-0 leading-relaxed text-muted max-md:max-w-none">
              Integrated business processes across production, procurement, inventory, sales and finance.
            </p>
          </div>
          <div className="grid gap-5 md:grid-cols-3">
            {SUB_INDUSTRIES.map((s) => (
              <div key={s.title} className="overflow-hidden rounded-2xl border border-line bg-white shadow-soft">
                <div className="grid place-items-center border-b border-[#fde68a] bg-[#fffbeb] px-6 py-10" aria-hidden="true">
                  <s.icon size={40} strokeWidth={1.5} className="text-[#b45309]" />
                </div>
                <div className="p-7">
                  <h3 className="font-display text-lg font-bold text-ink">{s.title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-muted">{s.text}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Benefits
        split
        tone="amber"
        eyebrow="Why choose MxERP for manufacturing"
        title="One platform for multiple business functions"
        intro="Integrated business processes across production, procurement, inventory, sales and finance."
        items={MFG_BENEFITS}
        icons={[Link2, LayoutGrid, Zap, Cloud, SlidersHorizontal, Eye]}
      />

      <section className="bg-navy py-24 text-white max-md:py-[72px]">
        <div className="mx-container grid gap-12 lg:grid-cols-[380px_minmax(0,1fr)] lg:gap-16">
          <div>
            <p className="font-mono text-[11px] font-medium tracking-[0.14em] text-accent">
              BENEFITS
            </p>
            <h2 className="mt-4 font-display text-[clamp(28px,3.4vw,40px)] font-bold text-white">
              Benefits of manufacturing ERP software
            </h2>
            <p className="mt-4 leading-relaxed text-footsub">
              Improve control and coordination across your business operations.
            </p>
          </div>
          <div className="grid gap-x-10 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
            {[
              { icon: Factory, t: "Improve production planning", d: "Organize production activities and improve visibility into production processes." },
              { icon: Package, t: "Control inventory", d: "Better visibility into stock, materials and warehouse operations." },
              { icon: ShoppingCart, t: "Streamline procurement", d: "Connect purchasing with vendor and inventory requirements." },
              { icon: Truck, t: "Connect sales & operations", d: "Bring sales closer to production, inventory and operations." },
              { icon: Database, t: "Centralize business information", d: "Keep important information within an integrated ERP environment." },
              { icon: BarChart3, t: "Support better decisions", d: "Use centralized information and reporting to make informed decisions." },
            ].map((b) => (
              <div key={b.t}>
                <span className="mb-3 grid size-10 place-items-center rounded-xl border border-white/10 bg-white/[0.06] text-[#fcd34d]" aria-hidden="true">
                  <b.icon size={20} />
                </span>
                <h3 className="font-display text-[17px] font-bold text-white">{b.t}</h3>
                <p className="mt-2 text-sm leading-relaxed text-footsub">{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <SolvesTable
        eyebrow="Features at a glance"
        title="MxERP manufacturing ERP features"
        intro="Every module and its key function, in one place."
        action={{ label: "Browse all modules", href: "/modules" }}
        head={["Module", "Key function"]}
        headStyle="navy"
        strong="right"
        tone="amber"
        rows={MFG_FEATURES_TABLE}
      />

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

      <div className="mx-container pb-24 max-sm:pb-16">
        <section className="grid items-center gap-8 rounded-3xl bg-accent p-12 max-sm:p-8 lg:grid-cols-[1fr_auto]">
          <div>
            <h2 className="font-display text-[clamp(28px,3.4vw,40px)] font-bold leading-tight text-white">
              Streamline your manufacturing business with MxERP
            </h2>
            <p className="mt-4 max-w-[560px] text-[15px] leading-relaxed text-white/85">
              Bring production, procurement, inventory, sales, finance, HR and customer operations together — and manage manufacturing operations from a centralized 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-navy px-6 text-[15px] font-semibold text-white hover:bg-navy2 max-sm:w-full">
              Request a Free Demo
            </a>
            <ExpertCta
              label="Talk to an ERP Expert"
              className="inline-flex min-h-[48px] items-center justify-center rounded-lg border border-white/50 px-6 text-[15px] font-semibold text-white hover:bg-white/10 max-sm:w-full"
            />
          </div>
        </section>
      </div>
    </>
  );
}