import type { Metadata } from "next";
import Link from "next/link";
import { Phone, Mail, MapPin, CheckCircle2 } from "lucide-react";
import BackButton from "./BackButton";

export const metadata: Metadata = {
  title: "Thank You",
  description:
    "Thanks for reaching out to MxERP. A product specialist will contact you shortly.",
  robots: { index: false, follow: false },
};

const NEXT_STEPS = [
  {
    n: "01",
    title: "We review your requirement",
    text: "Our team looks at your industry, company size and areas of interest.",
  },
  {
    n: "02",
    title: "A specialist reaches out",
    text: "Expect a call or email shortly to schedule your tailored walkthrough.",
  },
  {
    n: "03",
    title: "See MxERP on your processes",
    text: "A live demo mapped to your plants, projects and workflows — no obligation.",
  },
];

export default async function ThankYouPage({
  searchParams,
}: {
  searchParams: Promise<{ name?: string; source?: string }>;
}) {
  const params = await searchParams;
  const name = (params.name ?? "").trim().split(/\s+/)[0] ?? "";
  // Single shared page for every form: explicit newsletter variant,
  // everything else (demo, contact, future forms) gets the demo variant.
  const isNewsletter = params.source === "newsletter";

  return (
    <section className="bg-canvas py-16 max-md:py-12" aria-label="Thank you">
      <div className="mx-container max-w-[640px] text-center">
        {/* Received mark */}
        <span
          aria-hidden="true"
          className="mx-auto grid size-16 place-items-center rounded-full bg-green-50 ring-1 ring-green-200"
        >
          <CheckCircle2 size={32} className="text-green-600" />
        </span>

        <p className="mx-auto mt-5 inline-flex items-center gap-2 rounded-full border border-line bg-white px-3.5 py-1.5 font-mono text-[10.5px] font-medium tracking-[0.12em] text-muted">
          <span className="size-[7px] rounded-full bg-green-500" aria-hidden="true" />
          {isNewsletter ? "SUBSCRIBED" : "REQUEST RECEIVED"}
        </p>

        <h1 className="mt-3 font-display text-[clamp(30px,3.4vw,42px)] font-bold leading-tight text-ink">
          Thank you{name ? `, ${name}` : ""}!
        </h1>

        <p className="mx-auto mt-3 w-fit max-w-full whitespace-nowrap rounded-xl bg-green-50 px-5 py-3.5 text-[14.5px] font-medium leading-relaxed text-green-800 ring-1 ring-green-200 max-sm:whitespace-normal">
          {isNewsletter
            ? "You're on the list — one practical ERP email a month, no spam."
            : "Your demo request is with us. A product specialist will contact you shortly."}
        </p>

        {!isNewsletter && (
          <ol
            className="mx-auto mt-8 grid max-w-[720px] grid-cols-3 gap-0 text-left max-sm:grid-cols-1 max-sm:gap-4"
            aria-label="What happens next"
          >
            {NEXT_STEPS.map((s, i) => (
              <li key={s.n} className="relative px-5 first:pl-0 last:pr-0 max-sm:px-0">
                {/* Connector line to the next step: horizontal on desktop, vertical rail on mobile */}
                {i < NEXT_STEPS.length - 1 && (
                  <>
                    <span
                      aria-hidden="true"
                      className="absolute left-[52px] right-[-24px] top-4 h-px bg-line max-sm:hidden"
                    />
                    <span
                      aria-hidden="true"
                      className="absolute bottom-[-16px] left-[15px] top-8 w-px bg-line sm:hidden"
                    />
                  </>
                )}
                <span
                  aria-hidden="true"
                  className="relative z-10 grid size-8 place-items-center rounded-full bg-brand text-[11.5px] font-semibold text-white ring-4 ring-canvas"
                >
                  {s.n}
                </span>
                <h2 className="mt-3 font-display text-[14.5px] font-bold text-ink">
                  {s.title}
                </h2>
              </li>
            ))}
          </ol>
        )}

        <div className="mt-8 flex flex-wrap justify-center gap-3 max-sm:flex-col max-sm:items-stretch">
          <BackButton />
          <Link
            href="/"
            className="inline-flex min-h-[44px] items-center justify-center rounded-lg bg-navy px-5 text-sm font-semibold text-white hover:bg-brand-dark"
          >
            Back to home
          </Link>
          {!isNewsletter && (
            <Link
              href="/modules"
              className="inline-flex min-h-[44px] items-center justify-center rounded-lg bg-brand px-5 text-sm font-semibold text-white hover:bg-brand-dark"
            >
              Explore modules
            </Link>
          )}
        </div>

        <div className="mx-auto mt-8 max-w-[520px] rounded-2xl border border-line bg-white p-6 text-left">
          <p className="text-[13.5px] font-semibold text-ink">
            Need us sooner? Reach us directly.
          </p>
          <ul className="mt-3 space-y-2.5 text-[13.5px] text-body">
            <li>
              <a href="tel:+919818993537" className="flex items-center gap-2.5 hover:text-ink">
                <Phone size={15} className="shrink-0 text-brand" aria-hidden="true" />
                +91-9818993537
                <span className="font-mono text-[10px] font-medium tracking-[0.12em] text-muted">SALES</span>
              </a>
            </li>
            <li>
              <a href="tel:+919899745220" className="flex items-center gap-2.5 hover:text-ink">
                <Phone size={15} className="shrink-0 text-brand" aria-hidden="true" />
                +91-9899745220
                <span className="font-mono text-[10px] font-medium tracking-[0.12em] text-muted">SUPPORT</span>
              </a>
            </li>
            <li>
              <a href="mailto:akg@acgil.net" className="flex items-center gap-2.5 hover:text-ink">
                <Mail size={15} className="shrink-0 text-brand" aria-hidden="true" />
                akg@acgil.net
              </a>
            </li>
            <li>
              <a href="mailto:manvi@acgil.net" className="flex items-center gap-2.5 hover:text-ink">
                <Mail size={15} className="shrink-0 text-brand" aria-hidden="true" />
                manvi@acgil.net
              </a>
            </li>
            <li className="flex items-start gap-2.5">
              <MapPin size={15} className="mt-0.5 shrink-0 text-brand" aria-hidden="true" />
              H-107, Sector-63, Noida – 201301, Uttar Pradesh, India
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}