import type { Metadata } from "next";
import { Factory, Link2, TrendingUp, Eye, Award, Building2, Boxes, Plug, Headset } from "lucide-react";
import { SectionHeader } from "@/components/ui";
import DemoSection from "@/components/DemoSection";
import Leadership from "@/components/Leadership";
import { ABOUT_PRINCIPLES } from "@/lib/content";

export const metadata: Metadata = {
  title: "About MxERP",
  description:
    "MxERP is an integrated ERP platform for manufacturing and construction — connecting production, projects, procurement, inventory and finance.",
  alternates: { canonical: "/about" },
};

const PRINCIPLE_ICONS = [Factory, Link2, TrendingUp, Eye];

export default function AboutPage() {
  return (
    <>
      <section className="bg-navy py-24 text-white max-md:py-[72px]">
        <div className="mx-container mx-auto max-w-3xl text-center">
          <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" />
            ABOUT MXERP
          </span>
          <h1 className="mt-2.5 font-display text-[clamp(30px,3.6vw,44px)] font-bold leading-[1.08] text-white">
            ERP for the businesses that<br />{" "}
            <span className="text-accent">produce</span> and{" "}
            <span className="text-brand-light">build</span>.
          </h1>
          <p className="mx-auto mt-4 max-w-[560px] text-[17px] leading-relaxed text-herosub">
            MxERP is an integrated ERP platform designed for manufacturing and construction
            businesses — connecting production, projects, procurement, inventory, finance and
            workforce operations in one place.
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-2.5" aria-hidden="true">
            <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/[0.04] px-4 py-1.5 font-mono text-[11px] font-medium tracking-[0.2em] text-herosub">
              <span className="size-[7px] rounded-full bg-accent" aria-hidden="true" />
              BUILD
            </span>
            <span className="hidden h-px w-8 bg-white/15 sm:block" aria-hidden="true" />
            <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/[0.04] px-4 py-1.5 font-mono text-[11px] font-medium tracking-[0.2em] text-herosub">
              <span className="size-[7px] rounded-full bg-brand-light" aria-hidden="true" />
              PRODUCE
            </span>
            <span className="hidden h-px w-8 bg-white/15 sm:block" aria-hidden="true" />
            <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/[0.04] px-4 py-1.5 font-mono text-[11px] font-medium tracking-[0.2em] text-herosub">
              <span className="size-[7px] rounded-full bg-white" aria-hidden="true" />
              GROW
            </span>
          </div>
        </div>
      </section>

      <section className="py-24 max-md:py-[72px]">
        <div className="mx-container grid items-start gap-12 lg:grid-cols-2 lg:gap-16">
          <div>
            <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">
              OUR MISSION
            </span>
            <h2 className="mt-2.5 font-display text-[clamp(28px,3.4vw,40px)] font-bold leading-[1.1] text-ink">
              Give every plant and project one connected view of the business
            </h2>
            <p className="mt-6 text-[15px] leading-relaxed text-body">
              Manufacturing plants and construction projects run on many moving
              parts — orders, materials, vendors, sites, people and money. When
              each lives in a different spreadsheet or system, decisions slow down.
            </p>
            <p className="mt-4 text-[15px] leading-relaxed text-muted">
              We build MxERP so these businesses can bring their operations
              together, see what is happening across departments, and make
              decisions based on connected information.
            </p>
          </div>
          <div className="overflow-hidden rounded-2xl bg-navy">
            <div className="flex items-center justify-between border-b border-white/10 px-7 py-4 max-sm:px-6">
              <p className="font-mono text-[11px] font-medium tracking-[0.18em] text-brand-light">
                MXERP IN NUMBERS
              </p>
              <span className="flex gap-1.5" aria-hidden="true">
                <span className="size-2 rounded-full bg-white/20" />
                <span className="size-2 rounded-full bg-white/20" />
                <span className="size-2 rounded-full bg-accent" />
              </span>
            </div>
            <div className="grid grid-cols-2 gap-px bg-white/10 sm:grid-cols-3">
              {[
                [Award, "30+", "Years of ERP expertise"],
                [Building2, "1000+", "Businesses across India"],
                [Boxes, "16+", "Enterprise products"],
                [Factory, "20+", "Industries served"],
                [Plug, "270+", "App integrations"],
                [Headset, "24/7", "Dedicated support"],
              ].map(([Icon, v, l]) => {
                const I = Icon as typeof Award;
                return (
                  <div key={l as string} className="bg-navy p-6 max-sm:p-5">
                    <span
                      aria-hidden="true"
                      className="grid size-9 place-items-center rounded-lg bg-white/[0.07] text-brand-light"
                    >
                      <I size={18} />
                    </span>
                    <p className="mt-3.5 font-display text-[clamp(26px,2.6vw,34px)] font-bold tracking-tight text-white">
                      {v as string}
                    </p>
                    <p className="mt-1 text-[13px] leading-snug text-herosub">{l as string}</p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      <section className="bg-canvas py-24 max-md:py-[72px]">
        <div className="mx-container">
          <div className="mx-auto mb-11 max-w-2xl text-center">
            <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">
              WHAT WE BELIEVE
            </span>
            <h2 className="mt-2.5 font-display text-[clamp(28px,3.4vw,40px)] font-bold text-ink">
              The principles behind the product
            </h2>
          </div>
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {ABOUT_PRINCIPLES.map((p, i) => {
              const Icon = PRINCIPLE_ICONS[i % PRINCIPLE_ICONS.length];
              return (
                <div key={p.title} className="rounded-2xl border border-line bg-white p-[30px] shadow-soft max-sm:p-6">
                  <span className="grid size-11 place-items-center rounded-xl bg-brand-tint text-brand" aria-hidden="true">
                    <Icon size={22} />
                  </span>
                  <h3 className="mt-4 font-display text-[20px] font-bold text-ink">{p.title}</h3>
                  <p className="mt-2 text-[15px] leading-relaxed text-muted">{p.text}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="py-24 max-md:py-[72px]">
        <div className="mx-container">
          <div className="grid items-start gap-12 lg:grid-cols-[1fr_1.1fr] lg:gap-16">
            <div>
              <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">
                LEADERSHIP
              </span>
              <h2 className="mt-2.5 font-display text-[clamp(28px,3.4vw,40px)] font-bold text-ink">
                The team behind MxERP
              </h2>
            </div>
            <p className="max-w-[520px] text-[15px] leading-relaxed text-muted lg:justify-self-end">
              MxERP is led by operators and technologists with decades across
              manufacturing, construction, EPC and enterprise software — the
              same people who show up on your demo and stand behind every
              go-live.
            </p>
          </div>
          <Leadership />
        </div>
      </section>

      <section className="bg-white py-24 max-md:py-[72px]">
        <div className="mx-container grid gap-5 lg:grid-cols-2">
          <div className="flex flex-col items-start rounded-2xl bg-navy p-10 max-sm:p-7">
            <p className="font-mono text-[11px] font-medium tracking-[0.14em] text-brand-light">
              CAREERS
            </p>
            <h2 className="mt-2.5 font-display text-[clamp(24px,2.6vw,30px)] font-bold leading-snug text-white">
              Help us build the ERP industry runs on
            </h2>
            <p className="mt-3 text-[15px] leading-relaxed text-herosub">
              We&apos;re looking for people who care about manufacturing,
              construction and great software.
            </p>
            <a href="/request-demo" className="mt-7 inline-flex min-h-[48px] items-center rounded-lg bg-white px-6 text-[15px] font-semibold text-navy hover:bg-herosub">
              See open roles
            </a>
          </div>
          <div className="flex flex-col items-start rounded-2xl bg-brand p-10 max-sm:p-7">
            <p className="font-mono text-[11px] font-medium tracking-[0.14em] text-white/70">
              TALK TO US
            </p>
            <h2 className="mt-2.5 font-display text-[clamp(24px,2.6vw,30px)] font-bold leading-snug text-white">
              See MxERP on your own processes
            </h2>
            <p className="mt-3 text-[15px] leading-relaxed text-white/85">
              A product specialist will walk you through the modules that matter to you.
            </p>
            <a href="/request-demo" className="mt-7 inline-flex min-h-[48px] items-center rounded-lg bg-white px-6 text-[15px] font-semibold text-brand hover:bg-brand-tint">
              Request a Demo
            </a>
          </div>
        </div>
      </section>

      <DemoSection
        title="Become our next success story"
        text="See MxERP running on your own processes."
      />
    </>
  );
}