import { Suspense } from "react";
import type { Metadata } from "next";
import { PageHero } from "@/components/sections/PageHero";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { InquiryForm } from "@/components/sections/InquiryForm";
import { Reveal, RevealItem } from "@/components/motion/Reveal";
import { GlobeFallback } from "@/components/hero/GlobeFallback";
import { WeaveRule } from "@/components/ui/WeaveRule";
import { company, contact, offices } from "@/content/company";

export const metadata: Metadata = {
  title: "Contact",
  description:
    "Contact Three Stars Hosiery Mills in Multan and Lahore, Pakistan. Enquiries, sampling, factory visits and agent appointments for South America and Latin America.",
};

/**
 * Holds the height of the form area while the client boundary resolves, so the
 * page does not jump. Kept deliberately plain: it is on screen for a frame.
 */
function InquiryFormFallback() {
  return (
    <div className="min-h-[42rem]" aria-hidden="true">
      <p className="eyebrow">Enquiry</p>
      <p className="display-md mt-5 text-[var(--cotton)]/40">Start here.</p>
    </div>
  );
}

export default function ContactPage() {
  return (
    <>
      <PageHero
        kicker="Get in touch"
        title="Tell us what you are making."
        lede="Sampling, capacity checks, certificate copies, a factory visit or an agency in a market we are not in yet. Enquiries are answered from Multan during Pakistan business hours."
        pattern="fleece"
        tone="ember"
        patternScale={2.6}
        scrim="soft"
        meta={[
          { label: "Pakistan", value: contact.phonePk },
          { label: "United States", value: contact.phoneUs },
          { label: "Email", value: contact.email },
        ]}
      />

      {/* Form and details --------------------------------------------------- */}
      <section className="section bg-[var(--ink)]">
        <div className="shell grid gap-16 lg:grid-cols-12 lg:gap-20">
          <div className="lg:col-span-7">
            {/* The form reads ?intent from the URL to decide which questions to
                ask, which means useSearchParams, which without a Suspense
                boundary would opt this whole route out of static rendering.
                The boundary is what keeps /contact prerendered. */}
            <Suspense fallback={<InquiryFormFallback />}>
              <InquiryForm />
            </Suspense>
          </div>

          <aside className="lg:col-span-5">
            <Reveal stagger={0.1} className="space-y-px bg-[var(--rule)]">
              {offices.map((office) => (
                <RevealItem key={office.id} className="bg-[var(--ink)] p-7">
                  <p className="eyebrow">{office.role}</p>
                  <h2 className="mt-3 font-display text-2xl text-[var(--cotton)]">
                    {office.label}
                  </h2>
                  <address className="mt-4 not-italic text-sm leading-relaxed text-[var(--melange)]">
                    {office.address}
                  </address>
                  <ul className="mt-5 space-y-1.5">
                    {office.phones.map((phone) => (
                      <li key={phone}>
                        <a
                          href={`tel:${phone.replace(/\s/g, "")}`}
                          className="data text-sm text-[var(--cotton)]/85 transition-colors hover:text-[var(--thread)]"
                        >
                          {phone}
                        </a>
                      </li>
                    ))}
                    {office.fax ? (
                      <li className="data text-sm text-[var(--melange)]">
                        Fax {office.fax}
                      </li>
                    ) : null}
                  </ul>

                  <a
                    href={
                      office.primary
                        ? contact.mapUrl
                        : `https://www.google.com/maps/search/?api=1&query=${office.coords.lat},${office.coords.lng}`
                    }
                    target="_blank"
                    rel="noreferrer noopener"
                    className="group mt-6 inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.16em] text-[var(--thread)]"
                  >
                    Open in maps
                    <span
                      aria-hidden="true"
                      className="transition-transform duration-500 group-hover:translate-x-1"
                    >
                      &rarr;
                    </span>
                  </a>
                </RevealItem>
              ))}

              <RevealItem className="bg-[var(--ink)] p-7">
                <p className="eyebrow">Office hours, PKT</p>
                <dl className="mt-4 space-y-2.5">
                  {contact.hours.map((entry) => (
                    <div key={entry.days} className="flex justify-between gap-6 text-sm">
                      <dt className="text-[var(--cotton)]/85">{entry.days}</dt>
                      <dd className="data text-[var(--melange)]">{entry.time}</dd>
                    </div>
                  ))}
                </dl>
              </RevealItem>

              <RevealItem className="bg-[var(--ink)] p-7">
                <p className="eyebrow">Agents wanted</p>
                <p className="mt-4 text-sm leading-relaxed text-[var(--melange)]">
                  We are appointing agents and distributors across South America
                  and Latin America. If you represent buyers in those markets,
                  write to{" "}
                  <a
                    href={`mailto:${contact.email}?subject=${encodeURIComponent("Agency enquiry, South America")}`}
                    className="text-[var(--cotton)] underline decoration-[var(--thread)] underline-offset-4"
                  >
                    {contact.email}
                  </a>{" "}
                  with the territory you cover.
                </p>
              </RevealItem>
            </Reveal>
          </aside>
        </div>
      </section>

      {/* Location ----------------------------------------------------------- */}
      <section className="relative overflow-hidden border-t border-[var(--rule)] bg-[var(--ink-2)]">
        <WeaveRule />
        <div className="shell grid gap-14 py-20 md:py-28 lg:grid-cols-12 lg:items-center">
          <div className="lg:col-span-6">
            <SectionHeading
              eyebrow="Finding us"
              title="10-A Industrial Estate, Multan."
              lede={`${company.positioning}, four hundred kilometres south west of Lahore in the cotton belt of southern Punjab, which is exactly where a spinning mill wants to be.`}
            />

            <Reveal delay={0.15}>
              <p className="data mt-8 text-sm text-[var(--melange)]">
                {offices[0].coords.lat}, {offices[0].coords.lng}
              </p>
              <a
                href={contact.mapUrl}
                target="_blank"
                rel="noreferrer noopener"
                className="group mt-6 inline-flex items-center gap-3 border-b border-[var(--thread)] pb-1 text-sm text-[var(--cotton)]"
              >
                Open the works in Google Maps
                <span
                  aria-hidden="true"
                  className="transition-transform duration-500 group-hover:translate-x-1"
                >
                  &rarr;
                </span>
              </a>
            </Reveal>
          </div>

          <div className="lg:col-span-6">
            <Reveal direction="left" duration={1}>
              <div className="relative mx-auto max-w-[460px]">
                <GlobeFallback className="h-auto w-full" />
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </>
  );
}