import type { Metadata } from "next";
import { Phone, Mail, MapPin } from "lucide-react";
import DemoForm from "@/components/DemoForm";

export const metadata: Metadata = {
  title: "Request a Demo",
  description:
    "See MxERP running on your own processes. Book a demo with a product specialist — no obligation.",
  alternates: { canonical: "/request-demo" },
};

const STEPS = [
  {
    n: "01",
    title: "Tell us about your business",
    text: "Plants, projects, teams and the processes you want to connect.",
  },
  {
    n: "02",
    title: "Get a tailored walkthrough",
    text: "See the manufacturing or construction workflows relevant to you.",
  },
  {
    n: "03",
    title: "Plan your next step",
    text: "Modules, deployment and rollout mapped to your requirements.",
  },
];

const CONTACTS: { icon: typeof Phone; label: string; href?: string }[] = [
  {
    icon: MapPin,
    label: "H-107, Sector-63, Noida - 201301, Uttar Pradesh, India",
  },
];

export default function RequestDemoPage() {
  return (
    <>
      <section className="bg-navy py-16 text-white max-md:py-12">
        <div className="mx-container grid items-start gap-12 lg:grid-cols-2 lg:gap-14">
          {/* Left — copy, process steps and direct contact lines */}
          <div className="max-w-[600px] lg:pt-2">
            <span className="inline-flex items-center gap-2.5 self-start 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" />
              REQUEST A DEMO
            </span>
            <h1 className="mt-3.5 font-display text-[clamp(32px,3.6vw,46px)] font-bold leading-[1.08] text-white">
              See MxERP running on{" "}
              <br className="max-sm:hidden" />
              your own processes
            </h1>
            <p className="mt-4 max-w-[500px] text-[16px] leading-relaxed text-herosub">
              Whether you manage a manufacturing plant or construction projects,
              a product specialist will walk you through the modules that matter
              to you — no obligation.
            </p>

            <ol
              className="mt-9 max-w-[520px] space-y-5"
              aria-label="How the demo works"
            >
              {STEPS.map((s) => (
                <li key={s.n} className="flex gap-3.5">
                  <span
                    aria-hidden="true"
                    className="grid size-8 shrink-0 place-items-center rounded-full bg-brand text-[11.5px] font-semibold text-white"
                  >
                    {s.n}
                  </span>
                  <div className="min-w-0">
                    <h2 className="font-display text-[15px] font-bold text-white">
                      {s.title}
                    </h2>
                    <p className="mt-1 text-[13.5px] leading-relaxed text-herosub">
                      {s.text}
                    </p>
                  </div>
                </li>
              ))}
            </ol>

            <ul className="mt-8 max-w-[520px] space-y-3.5 border-t border-white/10 pt-6 text-[14px] text-herosub">
              <li>
                <span className="flex items-start gap-3">
                  <Phone
                    size={17}
                    className="mt-0.5 shrink-0 text-brand-light"
                  />
                  <span>
                    <a href="tel:+919818993537" className="transition-colors hover:text-white">
                      +91-9818993537
                    </a>{" "}
                    or{" "}
                    <a href="tel:+919899745220" className="transition-colors hover:text-white">
                      +91-9899745220
                    </a>
                  </span>
                </span>
              </li>
              <li>
                <span className="flex items-start gap-3">
                  <Mail
                    size={17}
                    className="mt-0.5 shrink-0 text-brand-light"
                  />
                  <span>
                    <a href="mailto:akg@acgil.net" className="transition-colors hover:text-white">
                      akg@acgil.net
                    </a>{" "}
                    or{" "}
                    <a href="mailto:manvi@acgil.net" className="transition-colors hover:text-white">
                      manvi@acgil.net
                    </a>
                  </span>
                </span>
              </li>
              {CONTACTS.map(({ icon: Icon, label, href }) => {
                const row = (
                  <span className="flex items-start gap-3">
                    <Icon
                      size={17}
                      className="mt-0.5 shrink-0 text-brand-light"
                    />
                    <span>{label}</span>
                  </span>
                );
                return (
                  <li key={label}>
                    {href ? (
                      <a href={href} className="transition-colors hover:text-white">
                        {row}
                      </a>
                    ) : (
                      row
                    )}
                  </li>
                );
              })}
            </ul>
          </div>

          {/* Right — booking card */}
          <div className="lg:pt-1">
            <DemoForm title="Book your demo" extended />
          </div>
        </div>
      </section>

      {/* Direct contact channels */}
      <section className="bg-canvas py-16 max-md:py-12" aria-label="Other ways to reach us">
        <div className="mx-container">
          <div className="grid gap-4 md:grid-cols-3">
            {/* Sales */}
            <a
              href="tel:+919818993537"
              className="group rounded-2xl border border-line bg-white p-7 max-sm:p-6"
            >
              <p className="font-mono text-[11px] font-medium tracking-[0.18em] text-muted">
                SALES
              </p>
              <h2 className="mt-2.5 font-display text-[19px] font-bold text-ink">
                Talk to an ERP expert
              </h2>
              <p className="mt-2.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13.5px] text-body">
                <span className="flex items-center gap-1.5">
                  <Mail size={14} className="text-brand" aria-hidden="true" />
                  akg@acgil.net
                </span>
                <span aria-hidden="true" className="text-line">·</span>
                <span className="flex items-center gap-1.5">
                  <Phone size={14} className="text-brand" aria-hidden="true" />
                  +91-9818993537
                </span>
              </p>
              <span className="mt-4 inline-flex items-center gap-1.5 text-[13px] font-semibold text-brand">
                Call sales
                <span aria-hidden="true">→</span>
              </span>
            </a>

            {/* Support */}
            <div className="rounded-2xl border border-line bg-white p-7 max-sm:p-6">
              <p className="font-mono text-[11px] font-medium tracking-[0.18em] text-muted">
                SUPPORT
              </p>
              <h2 className="mt-2.5 font-display text-[19px] font-bold text-ink">
                Support that picks up
              </h2>
              <p className="mt-2.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13.5px] text-body">
                <a href="mailto:manvi@acgil.net" className="flex items-center gap-1.5 hover:text-ink">
                  <Mail size={14} className="text-brand" aria-hidden="true" />
                  manvi@acgil.net
                </a>
                <span aria-hidden="true" className="text-line">·</span>
                <a href="tel:+919899745220" className="flex items-center gap-1.5 hover:text-ink">
                  <Phone size={14} className="text-brand" aria-hidden="true" />
                  +91-9899745220
                </a>
              </p>
              <a
                href="tel:+919899745220"
                className="mt-4 inline-flex items-center gap-1.5 text-[13px] font-semibold text-brand"
              >
                <Phone size={14} aria-hidden="true" />
                Call support
                <span aria-hidden="true">→</span>
              </a>
            </div>

            {/* Office */}
            <div className="rounded-2xl border border-line bg-white p-7 max-sm:p-6">
              <p className="font-mono text-[11px] font-medium tracking-[0.18em] text-muted">
                OFFICE
              </p>
              <h2 className="mt-2.5 font-display text-[19px] font-bold text-ink">
                Visit us
              </h2>
              <p className="mt-2.5 flex items-start gap-1.5 text-[13.5px] leading-relaxed text-body">
                <MapPin size={14} className="mt-0.5 shrink-0 text-brand" aria-hidden="true" />
                H-107, Sector-63, Noida – 201301, Uttar Pradesh, India
              </p>
              <span className="mt-4 inline-flex items-center gap-1.5 text-[13px] font-semibold text-brand">
                Mon–Sat, business hours
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* Offices */}
      <section className="bg-canvas py-16 max-md:py-12" aria-label="Our offices">
        <div className="mx-container">
          <div className="grid 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">
                OFFICES
              </span>
              <h2 className="mt-2.5 font-display text-[clamp(28px,3.4vw,40px)] font-bold text-ink">
                Reach ACGIL across India and the US.
              </h2>
            </div>
            <p className="max-w-[520px] text-[15px] leading-relaxed text-muted lg:justify-self-end">
              Corporate office in Noida, R&amp;D in San Francisco, and regional
              presence in Pune and New Delhi.
            </p>
          </div>
          <div className="mt-10 grid gap-5 sm:grid-cols-2">
            {/* Noida — HQ */}
            <div className="rounded-2xl border border-line border-l-4 border-l-navy bg-white p-7 max-sm:p-6">
              <div className="flex items-center gap-3">
                <span className="grid size-10 shrink-0 place-items-center rounded-xl bg-brand-tint text-brand" aria-hidden="true">
                  <MapPin size={19} />
                </span>
                <div>
                  <h3 className="font-display text-[17px] font-bold text-ink">Noida</h3>
                  <p className="font-mono text-[10px] font-semibold tracking-[0.14em] text-brand">
                    CORPORATE OFFICE · HEADQUARTERS
                  </p>
                </div>
              </div>
              <p className="mt-4 text-[13.5px] leading-relaxed text-body">
                H-107, Sector-63, Noida – 201301, Uttar Pradesh, India
              </p>
              <p className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[13px]">
                <a href="mailto:akg@acgil.net" className="flex items-center gap-1.5 font-semibold text-brand hover:underline">
                  <Mail size={14} aria-hidden="true" />
                  akg@acgil.net
                </a>
                <a
                  href="https://maps.app.goo.gl/ERJW9L6UY13u4Y7b7"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1 font-semibold text-body hover:text-brand"
                >
                  Get directions
                  <span aria-hidden="true">→</span>
                </a>
              </p>
            </div>
            {/* San Francisco */}
            <div className="rounded-2xl border border-line bg-white p-7 max-sm:p-6">
              <div className="flex items-center gap-3">
                <span className="grid size-10 shrink-0 place-items-center rounded-xl bg-brand-tint text-brand" aria-hidden="true">
                  <MapPin size={19} />
                </span>
                <div>
                  <h3 className="font-display text-[17px] font-bold text-ink">San Francisco</h3>
                  <p className="font-mono text-[10px] font-medium tracking-[0.14em] text-muted">
                    GLOBAL R&amp;D AND REPRESENTATIVE OFFICE
                  </p>
                </div>
              </div>
              <p className="mt-4 text-[13.5px] leading-relaxed text-body">
                1750 O&apos;Farrell Street, San Francisco, California – 94115, USA
              </p>
              <p className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[13px]">
                <a href="mailto:akg@acgil.net" className="flex items-center gap-1.5 font-semibold text-brand hover:underline">
                  <Mail size={14} aria-hidden="true" />
                  akg@acgil.net
                </a>
                <a
                  href="https://www.google.com/maps/search/?api=1&query=1750+O%27Farrell+Street+San+Francisco+CA+94115"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1 font-semibold text-body hover:text-brand"
                >
                  Get directions
                  <span aria-hidden="true">→</span>
                </a>
              </p>
            </div>
            {/* Pune */}
            <div className="rounded-2xl border border-line bg-white p-7 max-sm:p-6">
              <div className="flex items-center gap-3">
                <span className="grid size-10 shrink-0 place-items-center rounded-xl bg-brand-tint text-brand" aria-hidden="true">
                  <MapPin size={19} />
                </span>
                <div>
                  <h3 className="font-display text-[17px] font-bold text-ink">Pune</h3>
                  <p className="font-mono text-[10px] font-medium tracking-[0.14em] text-muted">
                    REGIONAL OFFICE
                  </p>
                </div>
              </div>
              <p className="mt-4 text-[13.5px] leading-relaxed text-body">
                6th Floor, Tower 5, World Trade Center, Kharadi, MIDC Knowledge
                Park, Pune, Maharashtra – 411014
              </p>
              <p className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[13px]">
                <a href="mailto:akg@acgil.net" className="flex items-center gap-1.5 font-semibold text-brand hover:underline">
                  <Mail size={14} aria-hidden="true" />
                  akg@acgil.net
                </a>
                <a
                  href="https://www.google.com/maps/search/?api=1&query=World+Trade+Center+Kharadi+Pune+411014"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1 font-semibold text-body hover:text-brand"
                >
                  Get directions
                  <span aria-hidden="true">→</span>
                </a>
              </p>
            </div>
            {/* New Delhi */}
            <div className="rounded-2xl border border-line bg-white p-7 max-sm:p-6">
              <div className="flex items-center gap-3">
                <span className="grid size-10 shrink-0 place-items-center rounded-xl bg-brand-tint text-brand" aria-hidden="true">
                  <MapPin size={19} />
                </span>
                <div>
                  <h3 className="font-display text-[17px] font-bold text-ink">New Delhi</h3>
                  <p className="font-mono text-[10px] font-medium tracking-[0.14em] text-muted">
                    MARKETING &amp; REPRESENTATIVE OFFICE
                  </p>
                </div>
              </div>
              <p className="mt-4 text-[13.5px] leading-relaxed text-body">
                A 8 Friends Apartments, 49 I. P. Extension, Delhi – 110092, India
              </p>
              <p className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[13px]">
                <a href="mailto:akg@acgil.net" className="flex items-center gap-1.5 font-semibold text-brand hover:underline">
                  <Mail size={14} aria-hidden="true" />
                  akg@acgil.net
                </a>
                <a
                  href="https://www.google.com/maps/search/?api=1&query=49+IP+Extension+Delhi+110092"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1 font-semibold text-body hover:text-brand"
                >
                  Get directions
                  <span aria-hidden="true">→</span>
                </a>
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Office location */}
      <section className="bg-white py-16 max-md:py-12" aria-label="Office location">
        <div className="mx-container grid items-stretch gap-6 lg:grid-cols-[1fr_1.2fr]">
          <div className="flex flex-col justify-center rounded-2xl bg-navy p-8 text-white max-sm:p-6">
            <p className="font-mono text-[11px] font-medium tracking-[0.18em] text-brand-light">
              OFFICE LOCATION
            </p>
            <h2 className="mt-2.5 font-display text-[clamp(24px,2.6vw,32px)] font-bold leading-tight">
              Visit our Noida office
            </h2>
            <p className="mt-3 flex items-start gap-2.5 text-[14.5px] leading-relaxed text-herosub">
              <MapPin size={17} className="mt-0.5 shrink-0 text-brand-light" aria-hidden="true" />
              H-107, Sector-63, Noida – 201301,
              <br />
              Uttar Pradesh, India
            </p>
            <p className="mt-4 border-t border-white/10 pt-4 text-[13.5px] text-herosub">
              Monday – Saturday, business hours.
              <br />
              Call ahead on{" "}
              <a href="tel:+919818993537" className="font-semibold text-white hover:underline">
                +91-9818993537
              </a>{" "}
              or{" "}
              <a href="tel:+919899745220" className="font-semibold text-white hover:underline">
                +91-9899745220
              </a>{" "}
              so we can receive you.
            </p>
            <a
              href="https://maps.app.goo.gl/ERJW9L6UY13u4Y7b7"
              target="_blank"
              rel="noopener noreferrer"
              className="mt-6 inline-flex w-fit items-center gap-2 rounded-lg bg-white px-5 py-2.5 text-[13.5px] font-semibold text-navy hover:bg-brand-tint"
            >
              Get directions
              <span aria-hidden="true">→</span>
            </a>
          </div>
          <div className="overflow-hidden rounded-2xl border border-line">
            <iframe
              title="MxERP office location map — H-107, Sector-63, Noida"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3502.1160617108667!2d77.37285267189324!3d28.62628343061088!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfb3615555511%3A0x3386e36551fc9dc7!2sACGIL!5e0!3m2!1sen!2sin!4v1791008058617!5m2!1sen!2sin"
              loading="lazy"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              className="block h-full min-h-[340px] w-full border-0 max-lg:min-h-[300px]"
            />
          </div>
        </div>
      </section>
    </>
  );
}