import type { Metadata } from "next";
import { ArrowRight, Check, Truck, Factory, Package, ShoppingCart, Users, Wallet, Clock, Wrench, FileText, Briefcase, DraftingCompass, Boxes, ClipboardCheck, Receipt, Network, Zap, Cloud, TrendingUp, LayoutGrid } from "lucide-react";
import { PageHero, Challenges, StepsFlow, Benefits, CompareTable, ReportingSplit, TrustBar, ValueStrip } from "@/components/sections";
import { SectionHeader, PrimaryCta } from "@/components/ui";
import { HeroDashboard } from "@/components/mockups";
import TabsDashboard from "@/components/TabsDashboard";
import DemoSection from "@/components/DemoSection";
import {
  HOME_CHECKS,
  HOME_COMPARE,
  HOME_REPORTS,
  CLIENT_LOGOS,
  HOME_INDUSTRIES,
  CHALLENGES,
  MFG_FLOW,
  CONST_FLOW,
  WHY_MXERP,
} from "@/lib/content";

export const metadata: Metadata = {
  title: "MxERP — Manufacturing & Construction ERP",
  description:
    "Power your manufacturing & construction business with one integrated ERP — production, projects, procurement, inventory, finance and workforce.",
  alternates: { canonical: "/" },
};

const STRIP = [
  { title: "Industry-focused", text: "Dedicated workflows for plants and projects." },
  { title: "Integrated operations", text: "Every department on one ERP platform." },
  { title: "Real-time information", text: "Dashboards and reports when you need them." },
  { title: "Modular & scalable", text: "Start with what you need, expand as you grow." },
];

function HeroOverlays() {
  return (
    <>
      <div className="absolute -top-6 right-6 flex items-center gap-2.5 rounded-xl bg-white p-3 pr-4 shadow-card max-sm:-top-4 max-sm:right-3 max-sm:p-2 max-sm:pr-3">
        <span className="grid size-8 shrink-0 place-items-center rounded-full bg-[#dcfce7] text-success">
          <Check size={16} />
        </span>
        <span className="text-[11.5px] leading-tight">
          <b className="block text-ink">Material received at site</b>
          <small className="text-muted">GRN posted to project cost</small>
        </span>
      </div>
      <div className="absolute -bottom-6 left-6 flex items-center gap-2.5 rounded-xl bg-white p-3 pr-4 shadow-card max-sm:-bottom-4 max-sm:left-3 max-sm:p-2 max-sm:pr-3">
        <span className="grid size-8 shrink-0 place-items-center rounded-full bg-accent-soft text-accent-dark">
          <Truck size={16} />
        </span>
        <span className="text-[11.5px] leading-tight">
          <b className="block text-ink">Dispatch cleared · WO-2291</b>
          <small className="text-muted">Invoice generated in finance</small>
        </span>
      </div>
    </>
  );
}

function MfgVisual() {
  const stages = ["PLANNED", "MATERIAL", "SHOP FLOOR", "QUALITY", "DISPATCH"];
  return (
    <div className="flex h-full flex-col gap-[18px] bg-[#fffbeb] p-7 max-sm:p-5" aria-hidden="true">
      <span className="self-start rounded-md bg-navy px-2.5 py-1.5 font-mono text-[11px] tracking-[0.12em] text-white">
        FOR MANUFACTURERS
      </span>
      <div className="flex flex-col gap-3 rounded-xl border border-[#fde68a] bg-white p-4">
        <div className="flex items-center justify-between gap-2 text-[13px]">
          <b className="text-ink">Work order WO-2291 · Packaging line 2</b>
          <span className="shrink-0 font-semibold text-accent-dark">In production</span>
        </div>
        <div className="grid grid-cols-5 gap-1">
          {[1, 1, 1, 0, 0].map((on, i) => (
            <span key={i} className={on ? "h-1.5 rounded-full bg-accent" : "h-1.5 rounded-full bg-line"} />
          ))}
        </div>
        <div className="grid grid-cols-5 gap-1 font-mono text-[10px] text-muted">
          {stages.map((s) => (
            <span key={s}>{s}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function ConstVisual() {
  return (
    <div className="flex h-full flex-col gap-[18px] bg-[#eff4ff] p-7 max-sm:p-5" aria-hidden="true">
      <span className="self-start rounded-md bg-navy px-2.5 py-1.5 font-mono text-[11px] tracking-[0.12em] text-white">
        FOR CONSTRUCTION &amp; INFRA
      </span>
      <div className="flex flex-col gap-2.5 rounded-xl border border-[#bfdbfe] bg-white p-4">
        <div className="flex items-center justify-between gap-2 text-[13px]">
          <b className="text-ink">Project · Township Phase II · BOQ progress</b>
          <span className="shrink-0 font-semibold text-brand">RA Bill 07 submitted</span>
        </div>
        {[
          ["Earthwork", "100%"],
          ["RCC structure", "72%"],
        ].map(([label, v]) => (
          <div key={label} className="grid grid-cols-[110px_1fr_36px] items-center gap-2.5 text-xs text-body">
            <span>{label}</span>
            <span className="block h-1.5 overflow-hidden rounded-full bg-line">
              <span className="block h-full rounded-full bg-brand" style={{ width: v }} />
            </span>
            <span className="text-right">{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function IndustryShowcase() {
  return (
    <section className="py-24 max-md:py-[72px]">
      <div className="mx-container">
        <div className="mb-14 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-brand/25 bg-brand-tint px-4 py-2 font-mono text-[11px] font-semibold tracking-[0.14em] text-brand">
              INDUSTRIES WE SERVE
            </span>
            <h2 className="mt-2.5 font-display text-[clamp(28px,3.4vw,40px)] font-bold">
              ERP built around your industry
            </h2>
          </div>
          <p className="max-w-[520px] shrink-0 leading-relaxed text-muted max-md:max-w-none">
            Every industry has different workflows. MxERP brings industry-specific processes, business information and operational controls together in one integrated platform.
          </p>
        </div>
        <div className="grid gap-7 lg:grid-cols-2">
          {HOME_INDUSTRIES.map((card, ci) => {
            const amber = card.tint === "amber";
            return (
              <article key={card.title} className="flex flex-col overflow-hidden rounded-2xl border border-line bg-white shadow-soft">
                {ci === 0 ? <MfgVisual /> : <ConstVisual />}
                <div className="flex flex-1 flex-col gap-[18px] p-8 max-sm:p-6">
                  <div>
                    <p className={amber ? "font-mono text-[11px] font-medium tracking-[0.14em] text-accent-dark" : "font-mono text-[11px] font-medium tracking-[0.14em] text-brand"}>
                      {card.eyebrow}
                    </p>
                    <h3 className="mt-2 font-display text-[26px] font-bold leading-snug">{card.title}</h3>
                    <p className="mt-3 text-[16px] leading-relaxed text-[#475569]">{card.desc}</p>
                  </div>
                  <ul className="grid grid-cols-1 gap-x-5 gap-y-2.5 py-1.5 min-[480px]:grid-cols-2">
                    {card.checks.map((c) => (
                      <li key={c} className="flex items-start gap-2 text-sm text-body">
                        <Check size={15} className={amber ? "mt-0.5 shrink-0 text-accent-dark" : "mt-0.5 shrink-0 text-brand"} aria-hidden="true" />
                        {c}
                      </li>
                    ))}
                  </ul>
                  <a href={card.href} className={amber ? "inline-flex items-center gap-2 text-[15px] font-semibold text-accent-dark" : "inline-flex items-center gap-2 text-[15px] font-semibold text-brand"}>
                    {card.cta} <ArrowRight size={16} />
                  </a>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function DashboardView() {
  return (
    <section className="bg-canvas py-24 max-md:py-[72px]">
      <div className="mx-container grid items-center gap-12 lg:grid-cols-2">
        <div>
          <SectionHeader
            align="left"
            eyebrow="Dashboards & reports"
            title="See your business in one view"
            intro="Get a centralized view of important business activities across manufacturing and construction operations."
          />
          <ul className="mt-6 space-y-3">
            {[
              "Production, projects, inventory, purchase, sales and finance — one login",
              "Role-based views for management, plants and sites",
              "From data to better business visibility",
            ].map((t) => (
              <li key={t} className="flex items-start gap-2.5 text-sm text-body">
                <Check size={16} className="mt-0.5 shrink-0 text-brand" /> {t}
              </li>
            ))}
          </ul>
          <div className="mt-7">
            <PrimaryCta href="/platform">Explore MxERP platform</PrimaryCta>
          </div>
        </div>
        <TabsDashboard />
      </div>
    </section>
  );
}

const MODULE_PANELS = [
  {
    title: "Manufacturing ERP",
    href: "/manufacturing-erp",
    amber: true,
    rows: [
      { icon: Factory, t: "Production management", d: "Plan and manage manufacturing activities, production schedules and shop-floor operations." },
      { icon: Package, t: "Inventory & warehouse", d: "Manage raw materials, finished goods, stock and warehouse operations." },
      { icon: ShoppingCart, t: "Purchase & vendor management", d: "Manage procurement activities, purchase orders and vendor information." },
      { icon: Truck, t: "Sales & distribution", d: "Manage customer orders, sales operations and distribution." },
      { icon: Users, t: "CRM", d: "Manage customer information and sales-related activities." },
      { icon: Wallet, t: "Finance & accounting", d: "Connect financial operations with your business processes." },
      { icon: Clock, t: "HR & payroll", d: "Manage employee, HR and payroll operations." },
      { icon: Wrench, t: "Asset management", d: "Track and manage business assets and related activities." },
    ],
  },
  {
    title: "Construction ERP",
    href: "/construction-erp",
    amber: false,
    rows: [
      { icon: FileText, t: "Estimation & tendering", d: "Manage project estimates, bids and tender-related information." },
      { icon: Briefcase, t: "Project management", d: "Manage project activities, BOQ, WBS, planning and execution." },
      { icon: DraftingCompass, t: "Engineering", d: "Manage engineering information and project requirements." },
      { icon: ShoppingCart, t: "Procurement & purchase", d: "Manage material requirements, vendors and purchasing." },
      { icon: Boxes, t: "Inventory management", d: "Track construction materials, stock and warehouse operations." },
      { icon: ClipboardCheck, t: "DPR & site management", d: "Capture daily project information and monitor site activities." },
      { icon: Receipt, t: "Billing & finance", d: "Manage measurement, RA billing and financial information." },
      { icon: Users, t: "HR & payroll", d: "Manage project workforce and employee-related processes." },
    ],
  },
];

function ModulesPreview() {
  return (
    <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-brand/25 bg-brand-tint px-4 py-2 font-mono text-[11px] font-semibold tracking-[0.14em] text-brand">
              MODULES
            </span>
            <h2 className="mt-2.5 font-display text-[clamp(28px,3.4vw,40px)] font-bold">
              Everything you need to run your business
            </h2>
          </div>
          <div className="max-w-[420px] shrink-0 max-md:max-w-none">
            <p className="leading-relaxed text-muted">
              Start with the modules you need across production, projects and departments — and add more as you grow.
            </p>
            <a href="/modules" className="mt-4 inline-flex min-h-[44px] items-center rounded-lg border border-line bg-white px-5 text-sm font-semibold text-ink hover:border-brand hover:text-brand">
              View all modules
            </a>
          </div>
        </div>
        <div className="grid gap-6 lg:grid-cols-2">
          {MODULE_PANELS.map((panel) => (
            <div key={panel.title} className="rounded-2xl border border-line bg-white p-8 shadow-soft max-sm:p-6">
              <div className="flex items-center justify-between gap-4 border-b border-line pb-5">
                <h3 className="font-display text-xl font-bold text-ink">{panel.title}</h3>
                <a href={panel.href} className={panel.amber ? "inline-flex shrink-0 items-center gap-1.5 text-[13px] font-semibold text-accent-dark" : "inline-flex shrink-0 items-center gap-1.5 text-[13px] font-semibold text-brand"}>
                  Details <ArrowRight size={15} />
                </a>
              </div>
              <ul className="pt-2">
                {panel.rows.map((r) => (
                  <li key={r.t} className="flex gap-3.5 py-3">
                    <span className={panel.amber ? "grid size-10 shrink-0 place-items-center rounded-xl bg-[#fef3c7] text-[#b45309]" : "grid size-10 shrink-0 place-items-center rounded-xl bg-brand-tint text-brand"} aria-hidden="true">
                      <r.icon size={19} />
                    </span>
                    <span>
                      <b className="block text-[14.5px] leading-snug text-ink">{r.t}</b>
                      <small className="mt-0.5 block text-[13px] leading-snug text-muted">{r.d}</small>
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function VisibilityBand() {
  const mfg = ["Production", "Inventory", "Purchase", "Sales", "Finance"];
  const con = ["Projects", "Procurement", "Materials", "Execution", "Billing", "Finance"];
  return (
    <section className="bg-navy py-24 text-white max-md:py-[72px]">
      <div className="mx-container grid items-center gap-12 lg:grid-cols-2">
        <div>
          <span className="inline-flex items-center gap-2.5 rounded-full border border-white/20 px-3.5 py-1.5 font-mono text-[10.5px] font-medium tracking-[0.12em] text-herosub">
            <span className="size-[7px] rounded-full bg-accent" aria-hidden="true" />
            BUSINESS VISIBILITY
          </span>
          <h2 className="mt-4 font-display text-[clamp(28px,3.4vw,40px)] font-bold text-white">
            From data to better business visibility
          </h2>
          <p className="mt-4 max-w-[480px] leading-relaxed text-footsub">
            MxERP brings information from different business functions into one
            connected environment, helping teams monitor operations and management
            access important business information.
          </p>
          <ul className="mt-7 grid gap-3 sm:grid-cols-2">
            {[
              "Centralized information",
              "Better operational visibility",
              "Faster access to reports",
              "Improved departmental coordination",
              "Better process control",
              "Informed decision-making",
            ].map((t) => (
              <li key={t} className="flex items-start gap-2 text-sm text-footsub">
                <Check size={15} className="mt-0.5 shrink-0 text-brand-light" aria-hidden="true" /> {t}
              </li>
            ))}
          </ul>
        </div>
        <div className="flex flex-col gap-4">
          <div className="rounded-2xl border border-white/10 bg-navy2 p-6">
            <p className="font-mono text-[10.5px] font-medium tracking-[0.14em] text-accent">
              MANUFACTURING VISIBILITY
            </p>
            <div className="mt-4 flex flex-wrap items-center gap-2">
              {mfg.map((chip, i) => (
                <span key={chip} className="flex items-center gap-2">
                  <span className="rounded-full bg-[#f59e0b]/15 px-4 py-2 text-[13px] font-semibold text-[#fcd34d]">
                    {chip}
                  </span>
                  {i < mfg.length - 1 && <ArrowRight size={13} className="text-[#fcd34d]/70" aria-hidden="true" />}
                </span>
              ))}
            </div>
          </div>
          <div className="rounded-2xl border border-white/10 bg-navy2 p-6">
            <p className="font-mono text-[10.5px] font-medium tracking-[0.14em] text-brand-light">
              CONSTRUCTION VISIBILITY
            </p>
            <div className="mt-4 flex flex-wrap items-center gap-2">
              {con.map((chip, i) => (
                <span key={chip} className="flex items-center gap-2">
                  <span className="rounded-full bg-brand-light/15 px-4 py-2 text-[13px] font-semibold text-[#dbeafe]">
                    {chip}
                  </span>
                  {i < con.length - 1 && <ArrowRight size={13} className="text-brand-light/70" aria-hidden="true" />}
                </span>
              ))}
            </div>
          </div>
          <div className="flex items-start gap-3.5 rounded-2xl bg-gradient-to-r from-brand to-[#3b82f6] p-6">
            <span className="grid size-10 shrink-0 place-items-center rounded-xl bg-white/15 text-white" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 3v18h18" /><path d="M7 15l4-4 3 3 5-6" /></svg>
            </span>
            <span>
              <b className="block text-[15px] text-white">One management view</b>
              <small className="mt-0.5 block text-[13px] text-white/80">Dashboards and reports across plants, projects and departments.</small>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

export default function Home() {
  return (
    <>
      <PageHero
        id="top"
        eyebrow="ERP FOR MANUFACTURING & CONSTRUCTION"
        pill="blue"
        title="Power your manufacturing & construction business with"
        accent="one integrated ERP"
        compact
        para="Manage production, projects, procurement, inventory, finance and workforce operations with an ERP platform designed for manufacturing and construction businesses."
        primary={{ label: "Request a Demo", href: "/request-demo" }}
        secondary={{ label: "Explore MxERP", href: "/modules" }}
        checks={HOME_CHECKS}
        mock={<HeroDashboard />}
        overlay={<HeroOverlays />}
      />
      <ValueStrip items={STRIP} />
      <IndustryShowcase />
      <Challenges
        eyebrow="Problems we solve"
        title="Built to solve everyday business challenges"
        intro="Disconnected systems, manual processes and limited visibility can slow down business operations. MxERP connects your core processes so teams can work with better information and greater control."
        items={CHALLENGES}
      />
      <DashboardView />
      <StepsFlow
        kicker="Connected business workflow"
        title="Connect every stage of your business"
        intro="Every stage feeds the next automatically, so nothing is re-keyed and nobody waits for a spreadsheet."
        groups={[
          { label: "Manufacturing", sub: "ORDER LIFECYCLE", steps: MFG_FLOW, accent: "amber" },
          { label: "Construction", sub: "PROJECT LIFECYCLE", steps: CONST_FLOW, accent: "blue" },
        ]}
      />
      <ModulesPreview />
      <VisibilityBand />
      <Benefits
        split
        eyebrow="Why MxERP"
        title="Why businesses choose MxERP"
        intro="A unified platform that connects people, processes and data across projects, plants and departments."
        items={WHY_MXERP}
        icons={[Factory, Network, Zap, LayoutGrid, Cloud, TrendingUp]}
      />
      <CompareTable
        eyebrow="Two industry solutions"
        title="One ERP platform. Two industry solutions."
        mfg={HOME_COMPARE.mfg}
        con={HOME_COMPARE.con}
      />
      <ReportingSplit
        eyebrow="Reporting & analytics"
        title="Make decisions with connected business data"
        intro="Get reports and business information across your core operations without depending on multiple disconnected sources."
        chips={HOME_REPORTS.chips}
        panelTitle="Monitor. Analyze. Act."
        steps={HOME_REPORTS.steps}
      />
      <TrustBar label="TRUSTED BY MANUFACTURING & CONSTRUCTION TEAMS" logos={CLIENT_LOGOS} />
      <DemoSection
        title="Ready to bring your business operations together?"
        text="See MxERP running on your own processes. A product specialist will walk you through the modules that matter to you — no obligation."
      />
    </>
  );
}