import type { Metadata } from "next";
import Image from "next/image";
import { SectionHeader, PrimaryCta } from "@/components/ui";
import ExpertCta from "@/components/ExpertCta";
import ClientFilter from "@/components/ClientFilter";
import TestimonialMarquee from "@/components/TestimonialMarquee";
import DemoSection from "@/components/DemoSection";
import { STATS, CLIENT_LOGOS, CASE_CARDS } from "@/lib/content";

export const metadata: Metadata = {
  title: "Customers & Success Stories",
  description:
    "Manufacturing plants and construction project teams use MxERP to connect production, projects, procurement, inventory and finance.",
  alternates: { canonical: "/customers" },
};

export default function CustomersPage() {
  return (
    <>
      <section className="bg-navy pb-14 pt-24 text-white max-md:pb-10 max-md:pt-[72px]">
        <div className="mx-container grid items-center gap-12 lg:grid-cols-[1fr_1.05fr]">
          <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" />
              CUSTOMERS
            </span>
            <h1 className="my-[22px] font-display text-[clamp(30px,3.6vw,44px)] font-bold leading-[1.08] text-white">
              Powering growth across{" "}
              <span className="text-[#F59E13]">manufacturing &amp; construction</span>
            </h1>
            <p className="max-w-[560px] text-[17px] leading-relaxed text-herosub">
              Plants and project teams use MxERP to connect production, projects, procurement, inventory and finance on one platform.
            </p>
            <div className="my-7 flex flex-wrap gap-3.5">
              <PrimaryCta href="/request-demo">Become our next success story</PrimaryCta>
              <ExpertCta dark />
            </div>
          </div>
          <figure className="relative overflow-hidden rounded-2xl bg-navy2 p-8 ring-1 ring-white/10 max-sm:p-6" aria-label="Featured customer appreciation">
            <span aria-hidden="true" className="absolute inset-y-0 left-0 w-1.5 bg-accent" />
            <span className="inline-flex items-center rounded-md bg-white/10 px-2.5 py-1 font-mono text-[10px] font-semibold tracking-[0.12em] text-herosub">
              GO-LIVE APPRECIATION · MANAGING DIRECTOR
            </span>
            <blockquote className="mt-4 font-display text-[clamp(19px,2vw,24px)] font-bold leading-snug text-white">
              <span aria-hidden="true" className="font-serif text-accent">&ldquo;</span>
              The leadership at Franstek Belts thank each of you at ACGIL for
              ensuring that the go-live target is achieved. Together we can!
            </blockquote>
            <figcaption className="mt-5 flex items-center gap-3">
              <span
                aria-hidden="true"
                className="grid size-11 shrink-0 place-items-center rounded-full bg-accent font-display text-[15px] font-bold text-navy"
              >
                AP
              </span>
              <span className="text-[13.5px] text-herosub">
                <b className="block text-white">Mr. Avinash G Pai, Managing Director</b>
                Franstek Belts Pvt. Ltd. (CHIORINO Group, Italy)
              </span>
            </figcaption>
            <a
              href="#testimonials"
              className="mt-6 inline-flex items-center gap-1.5 text-[13.5px] font-semibold text-brand-light hover:text-white"
            >
              Read more customer stories
              <span aria-hidden="true">→</span>
            </a>
          </figure>
        </div>
      </section>

      <section className="border-t border-white/10 bg-navy py-7 max-md:py-6" aria-label="Customer highlights">
        <div className="mx-container grid grid-cols-3 gap-6 max-sm:gap-4">
          {STATS.map((s) => (
            <div key={s.label} className="flex flex-col items-center gap-1 text-center">
              <p className="font-display text-[clamp(30px,3.2vw,42px)] font-bold tracking-tight text-white">
                {s.value}
              </p>
              <p className="font-mono text-[11px] font-medium tracking-[0.14em] text-herosub">{s.label.toUpperCase()}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="pb-12 pt-24 max-md:pb-8 max-md:pt-[72px]">
        <div className="mx-container">
          <div className="mb-8 flex items-center justify-between gap-6 max-md:flex-col max-md:items-start max-md:gap-4">
            <h2 className="font-display text-[clamp(22px,2.4vw,28px)] font-bold text-ink">
              Trusted by teams across industries
            </h2>
            <ClientFilter />
          </div>
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6" aria-label="Client logos">
            {CLIENT_LOGOS.map((logo) => (
              <div key={logo.src} className="grid h-20 place-items-center overflow-hidden rounded-xl border border-line bg-paper px-4">
                <Image
                  src={logo.src}
                  alt={`${logo.name} logo`}
                  width={160}
                  height={64}
                  className="h-9 w-auto max-w-full object-contain"
                  loading="lazy"
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/*
      <section className="bg-canvas py-24 max-md:py-[72px]">
        <div className="mx-container">
          <div className="mx-auto mb-12 max-w-2xl text-center">
          <SectionHeader eyebrow="Case studies" title="Results from the field" />
          </div>
          <div className="grid gap-6 md:grid-cols-3">
            {CASE_CARDS.map((c) => (
              <article key={c.title} className="overflow-hidden rounded-2xl border border-line bg-white shadow-soft">
                <div className="grid h-40 place-items-center bg-navy font-mono text-[11px] tracking-[0.12em] text-footsub" aria-hidden="true">
                  [Photo]
                </div>
                <div className="p-7">
                  <span className="font-mono text-[10px] font-medium tracking-[0.14em] text-brand">
                    {c.tag}
                  </span>
                  <h3 className="mt-2 font-display text-lg font-bold text-ink">{c.title}</h3>
                  <p className="mt-2 text-sm text-muted">{c.text}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
      */}

      <section id="testimonials" className="pb-24 pt-12 max-md:pb-16 max-md:pt-8" style={{ scrollMarginTop: 84 }}>
        <div className="mx-container">
          <div className="mx-auto mb-12 grid max-w-none items-end gap-6 lg:grid-cols-[1fr_1fr]">
            <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">
                TESTIMONIALS
              </span>
              <h2 className="mt-2.5 font-display text-[clamp(28px,3.4vw,40px)] font-bold text-ink">
                Signed, stamped, and running live across industries.
              </h2>
            </div>
            <p className="max-w-[520px] text-[15px] leading-relaxed text-muted lg:justify-self-end">
              Completion certificates, go-live notes and enterprise orders from
              manufacturing plants and construction project teams — across
              industries, in their words, not ours.
            </p>
          </div>
          <TestimonialMarquee />

          <p className="mt-8 text-center">
            <a
              href="/request-demo"
              className="inline-flex min-h-[44px] items-center justify-center rounded-lg bg-brand px-6 text-sm font-semibold text-white hover:bg-brand-dark"
            >
              Become our next story
              <span aria-hidden="true" className="ml-1.5">→</span>
            </a>
          </p>
        </div>
      </section>

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