import Link from "next/link";
import { Reveal } from "@/components/motion/Reveal";
import { SplitText } from "@/components/motion/SplitText";
import { Button } from "@/components/ui/Button";
import { WeaveRule } from "@/components/ui/WeaveRule";
import { contact } from "@/content/company";
import { paths, type PathId } from "@/content/paths";

export function ContactCta({
  title = "Send us a tech pack.",
  body = "Sampling, capacity checks, certificate copies or a first enquiry. Tell us what you are making and we will tell you exactly how we would make it.",
  paths: pathIdList = ["tech-pack", "capacity", "yarn"],
}: {
  title?: string;
  body?: string;
  /**
   * Which routes to offer here. Each page surfaces the ones that make sense
   * where the reader is standing rather than the same generic button
   * everywhere. Three reads as a considered set rather than a leftover pair.
   */
  paths?: PathId[];
}) {
  const offered = pathIdList
    .map((id) => paths.find((p) => p.id === id))
    .filter((p): p is (typeof paths)[number] => Boolean(p));

  // The grid draws its hairlines as a one pixel gap over a rule coloured
  // background, so any cell left over in the final row shows through as a bare
  // grey panel. Matching the column count to the number of routes keeps every
  // row full at every width. Three routes stay stacked until desktop rather
  // than sitting two up with a gap beside them on a tablet.
  const columns =
    offered.length === 1
      ? "grid-cols-1"
      : offered.length === 2
        ? "grid-cols-1 sm:grid-cols-2"
        : "grid-cols-1 lg:grid-cols-3";

  return (
    <section className="relative overflow-hidden border-t border-[var(--rule)] bg-[var(--indigo)]/25">
      <WeaveRule />

      <div className="shell relative py-20 md:py-28">
        <div className="max-w-3xl">
          <Reveal direction="none">
            <p className="eyebrow flex items-center gap-3">
              <span className="h-px w-8 bg-[var(--thread)]" />
              Next step
            </p>
          </Reveal>

          <SplitText
            text={title}
            as="h2"
            className="display-lg mt-6 text-balance text-[var(--cotton)]"
          />

          <Reveal delay={0.15}>
            <p className="lede mt-6 text-pretty">{body}</p>
          </Reveal>

          <Reveal delay={0.25}>
            <ul className={`mt-10 grid gap-px bg-[var(--rule)] ${columns}`}>
              {offered.map((path) => (
                <li key={path.id}>
                  <Link
                    href={`/contact?intent=${path.id}`}
                    className="group flex h-full items-start gap-3 bg-[var(--ink)] p-5 transition-colors duration-500 hover:bg-[var(--ink-2)]"
                  >
                    <span className="flex-1 text-sm leading-snug text-[var(--cotton)]">
                      {path.label}
                    </span>
                    <span
                      aria-hidden="true"
                      className="text-[var(--melange)] transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-x-1 group-hover:text-[var(--thread)]"
                    >
                      &rarr;
                    </span>
                  </Link>
                </li>
              ))}
            </ul>

            <div className="mt-6 flex flex-wrap items-center gap-3">
              <Button href="/contact" variant="outline">
                Something else
              </Button>
              <Button href={`mailto:${contact.email}`} variant="ghost" external>
                {contact.email}
              </Button>
            </div>
          </Reveal>

          <Reveal delay={0.35}>
            <dl className="mt-14 grid gap-8 border-t border-[var(--rule)] pt-8 sm:grid-cols-3">
              <div>
                <dt className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--melange)]">
                  Pakistan
                </dt>
                <dd className="data mt-2 text-[var(--cotton)]">
                  <a href={`tel:${contact.phonePk.replace(/\s/g, "")}`}>
                    {contact.phonePk}
                  </a>
                </dd>
              </div>
              <div>
                <dt className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--melange)]">
                  United States
                </dt>
                <dd className="data mt-2 text-[var(--cotton)]">
                  <a href={`tel:${contact.phoneUs.replace(/[\s()]/g, "")}`}>
                    {contact.phoneUs}
                  </a>
                </dd>
              </div>
              <div>
                <dt className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--melange)]">
                  Hours, PKT
                </dt>
                <dd className="mt-2 text-sm text-[var(--cotton)]">
                  {contact.hours[0].days}
                  <br />
                  <span className="data text-[var(--melange)]">
                    {contact.hours[0].time}
                  </span>
                </dd>
              </div>
            </dl>
          </Reveal>
        </div>
      </div>
    </section>
  );
}