import type { Metadata } from "next";
import { Check, Cloud, Server } from "lucide-react";
import { PageHero, PlatformStack } from "@/components/sections";
import { SectionHeader } from "@/components/ui";
import DemoSection from "@/components/DemoSection";
import { PLATFORM_TOP, PLATFORM_FOUNDATION } from "@/lib/content";

export const metadata: Metadata = {
  title: "Enterprise-Grade ERP Platform",
  description:
    "One ERP platform for manufacturing and construction: cloud or on-premise, integrations, mobile access and secure-by-design controls.",
  alternates: { canonical: "/platform" },
};

export default function PlatformPage() {
  return (
    <>
      <PageHero
        eyebrow="THE PLATFORM"
        title="Enterprise-grade, without the enterprise complexity"
        compact
        para="One platform under both industry solutions — designed to fit how your teams already work: in the office, on the shop floor and at remote project sites."
        primary={{ label: "Request a Demo", href: "/request-demo" }}
        secondary={{ label: "Explore modules", href: "/modules" }}
        mock={<PlatformStack />}
      />

      <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-[680px]">
              <SectionHeader
                align="left"
                eyebrow="Built for real operations"
                title="Four things every MxERP deployment gets"
                noMargin
              />
            </div>
            <p className="max-w-[480px] shrink-0 leading-relaxed text-muted max-md:max-w-none">
              Every deployment ships with the operational essentials — flexible hosting, easy integrations, mobile access and enterprise-grade security built in.
            </p>
          </div>
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {PLATFORM_TOP.map((p) => (
              <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">
                  <p.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="bg-canvas py-24 max-md:py-[72px]">
        <div className="mx-container grid items-start gap-12 lg:grid-cols-[380px_minmax(0,1fr)] lg:gap-16">
          <div className="lg:sticky lg:top-24">
            <SectionHeader
              align="left"
              eyebrow="Core capabilities"
              title="One environment for every department"
              intro="The same foundation runs both industry solutions, so data, workflows and reports stay consistent across plants, projects and business units."
              noMargin
            />
          </div>
          <div className="grid gap-5 sm:grid-cols-2">
            {PLATFORM_FOUNDATION.map((f) => (
              <div key={f.title} className="flex gap-4 rounded-2xl border border-line bg-white p-6 shadow-soft">
                <span className="grid size-11 shrink-0 place-items-center rounded-xl bg-brand-tint text-brand" aria-hidden="true">
                  <f.icon size={22} />
                </span>
                <span>
                  <b className="block font-display text-[17px] font-bold leading-snug text-ink">{f.title}</b>
                  <small className="mt-1 block text-[13.5px] leading-relaxed text-muted">{f.text}</small>
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white py-24 max-md:py-[72px]">
        <div className="mx-container grid items-center gap-12 lg:grid-cols-[1.1fr_minmax(0,1fr)] lg:gap-16">
          <div className="rounded-2xl border border-line bg-white p-7 shadow-soft max-sm:p-5" aria-hidden="true">
            <div className="flex items-center justify-between gap-4">
              <div className="font-display text-lg font-bold text-ink">Management report · Q2</div>
              <span className="font-mono text-[10px] font-medium tracking-[0.14em] text-faint">SAMPLE</span>
            </div>
            <div className="mt-5 grid grid-cols-3 gap-3">
              {[
                ["Revenue", "₹ 14.2 Cr"],
                ["Gross margin", "23.8%"],
                ["Receivables", "₹ 2.6 Cr"],
              ].map(([label, v]) => (
                <div key={label as string} className="rounded-xl bg-paper px-4 py-3">
                  <p className="text-xs text-muted">{label}</p>
                  <p className="mt-1 font-display text-[20px] font-bold leading-none text-ink">{v}</p>
                </div>
              ))}
            </div>
            <div className="mt-6 flex h-40 items-end gap-2.5 sm:h-44">
              {[
                { m: "JAN", v: "42%" },
                { m: "FEB", v: "54%" },
                { m: "MAR", v: "48%" },
                { m: "APR", v: "66%" },
                { m: "MAY", v: "72%" },
                { m: "JUN", v: "96%" },
              ].map((b, i, arr) => (
                <div key={b.m} className="flex h-full flex-1 flex-col justify-end gap-2">
                  <span
                    className={
                      i === arr.length - 1
                        ? "w-full rounded-md bg-brand"
                        : i >= arr.length - 3
                          ? "w-full rounded-md bg-[#60a5fa]"
                          : "w-full rounded-md bg-[#bfdbfe]"
                    }
                    style={{ height: b.v }}
                  />
                  <span className="text-center font-mono text-[9px] tracking-[0.08em] text-faint">{b.m}</span>
                </div>
              ))}
            </div>
          </div>
          <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">
              REPORTING &amp; ANALYTICS
            </span>
            <h2 className="mt-2.5 font-display text-[clamp(28px,3.4vw,40px)] font-bold">
              Monitor. Analyze. Act.
            </h2>
            <p className="mt-4 text-[15px] leading-relaxed text-muted">
              Operational data from every module becomes reports, then insights,
              then decisions — without depending on multiple disconnected sources.
            </p>
            <ul className="mt-6 space-y-3">
              {[
                "Role-based dashboards for management and teams",
                "Production, project, purchase, sales, HR and financial reports",
                "Drill down from summary to transaction",
              ].map((t) => (
                <li key={t} className="flex items-start gap-2.5 text-[14px] font-medium text-body">
                  <Check size={17} className="mt-0.5 shrink-0 text-brand" aria-hidden="true" />
                  {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      <section className="bg-canvas py-24 max-md:py-[72px]">
        <div className="mx-container">
          <SectionHeader
            eyebrow="Flexible deployment"
            title="Deploy the way your IT team prefers"
          />
          <div className="mx-auto grid max-w-4xl gap-6 md:grid-cols-2">
            <div className="rounded-2xl border border-line bg-white p-8 shadow-soft">
              <span className="grid size-11 place-items-center rounded-xl bg-brand-tint text-brand" aria-hidden="true">
                <Cloud size={22} />
              </span>
              <h3 className="mt-4 font-display text-[20px] font-bold text-ink">Cloud</h3>
              <p className="mt-2 text-[15px] leading-relaxed text-muted">
                Access your ERP environment from anywhere, without managing servers.
              </p>
              <ul className="mt-5 space-y-2.5">
                {[
                  "Hosted and maintained for you",
                  "Access from office, plant or site",
                  "Faster start",
                ].map((t) => (
                  <li key={t} className="flex items-start gap-2 text-[13.5px] font-medium text-body">
                    <Check size={16} className="mt-0.5 shrink-0 text-brand" aria-hidden="true" />
                    {t}
                  </li>
                ))}
              </ul>
            </div>
            <div className="rounded-2xl border border-line bg-white p-8 shadow-soft">
              <span className="grid size-11 place-items-center rounded-xl bg-brand-tint text-brand" aria-hidden="true">
                <Server size={22} />
              </span>
              <h3 className="mt-4 font-display text-[20px] font-bold text-ink">On-premise</h3>
              <p className="mt-2 text-[15px] leading-relaxed text-muted">
                Run MxERP on your own infrastructure under your security policies.
              </p>
              <ul className="mt-5 space-y-2.5">
                {[
                  "Runs on your own servers",
                  "Aligned to your IT & security policies",
                  "Full control over your data",
                ].map((t) => (
                  <li key={t} className="flex items-start gap-2 text-[13.5px] font-medium text-body">
                    <Check size={16} className="mt-0.5 shrink-0 text-brand" aria-hidden="true" />
                    {t}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <DemoSection
        title="See the platform with your own processes"
        text="A product specialist will walk you through the modules that matter to you."
      />
    </>
  );
}