import type { Metadata } from "next";
import PageHero from "@/components/site/PageHero";
import ContactForm from "@/components/site/ContactForm";
import { Reveal } from "@/components/motion/Reveal";
import TiltCard from "@/components/motion/TiltCard";
import { offices } from "@/lib/content/company";

export const metadata: Metadata = {
  title: "Contact",
  description:
    "Head office in Makkah, branches in Jeddah, Riyadh and Dammam. Send a brief, a problem, or a question — a senior engineer replies within one business day.",
  alternates: { canonical: "/contact" },
};

const INFO = [
  { label: "Email", lines: ["hello@vira.sa"], href: "mailto:hello@vira.sa" },
  { label: "Call", lines: ["+966 920 004 512"], href: "tel:+966920004512" },
  { label: "Hours", lines: ["Sunday – Thursday · 9:00 – 18:00 AST"] },
];

export default async function ContactPage({
  searchParams,
}: {
  searchParams: Promise<{ topic?: string; product?: string; item?: string }>;
}) {
  const sp = await searchParams;
  const initialTopic = sp.product
    ? "A readymade product"
    : sp.topic === "hosting"
      ? "Hosting & domains"
      : sp.topic === "shop"
        ? "Shop order"
        : undefined;
  const initialMessage = sp.item ? `I'd like to order: ${sp.item}\n\n` : undefined;

  return (
    <>
      <PageHero
        eyebrow="Contact"
        titleLines={["Start the", "conversation."]}
        lede="Send a brief, a problem, or just a question. A senior engineer — not a sales script — replies within one business day. NDA on request."
      />
      <section className="weave-light on-light py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto grid w-full max-w-[1280px] gap-14 px-5 md:px-10 lg:grid-cols-[1fr_1.3fr]">
          <div>
            <ul className="grid gap-6">
              {INFO.map((item, i) => (
                <Reveal key={item.label} delay={i * 0.06} as="li" className="flex gap-4">
                  <span
                    className="grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-black/10 text-azure-deep"
                    aria-hidden
                  >
                    <i className="h-2.5 w-2.5 bg-current [clip-path:polygon(50%_0,100%_100%,0_100%)]" />
                  </span>
                  <div>
                    <b className="block font-semibold text-lhi">{item.label}</b>
                    {item.href ? (
                      <a href={item.href} className="text-[0.95rem] text-lmid hover:text-azure-deep">
                        {item.lines[0]}
                      </a>
                    ) : (
                      item.lines.map((l) => (
                        <span key={l} className="block text-[0.95rem] text-lmid">
                          {l}
                        </span>
                      ))
                    )}
                  </div>
                </Reveal>
              ))}
            </ul>
            <Reveal delay={0.3}>
              <p className="mt-9 rounded-r-lg border-l-[3px] border-ice-deep bg-ice/15 px-5 py-4 text-[0.92rem] leading-relaxed text-lmid">
                Government or regulated entity? We run procurement-ready engagements — RFP responses,
                proofs of concept, and Etimad-channel contracting.
              </p>
            </Reveal>
          </div>
          <Reveal delay={0.1}>
            <ContactForm initialTopic={initialTopic} initialMessage={initialMessage} />
          </Reveal>
        </div>
      </section>

      {/* offices */}
      <section className="weave-dark border-t border-white/10 py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <Reveal>
            <p className="eyebrow">Where we are</p>
            <h2 className="mt-4 text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-thi">
              Four cities. One team.
            </h2>
            <p className="mt-4 max-w-[62ch] text-tmid">
              Headquartered in Makkah, minutes from the heart of the Kingdom — with branch teams in
              Jeddah, Riyadh, and Dammam so every engagement has an engineer within reach.
            </p>
          </Reveal>
          <div className="mt-12 grid gap-6 sm:grid-cols-2 xl:grid-cols-4">
            {offices.map((o, i) => (
              <Reveal key={o.city} delay={i * 0.07} as="div">
                <TiltCard className="h-full" max={5}>
                  <div
                    className={`flex h-full flex-col rounded-xl border p-6 ${
                      o.type === "Head Office"
                        ? "border-azure/50 bg-gradient-to-br from-navy to-ink-2 shadow-[0_0_60px_-20px_rgba(46,139,247,0.4)]"
                        : "border-white/10 bg-ink-2"
                    }`}
                  >
                    <div className="flex items-baseline justify-between gap-3">
                      <h3 className="text-xl font-semibold text-thi">{o.city}</h3>
                      <span className="ar text-[0.95rem] text-ice" lang="ar">
                        {o.ar}
                      </span>
                    </div>
                    <p
                      className={`mt-1 font-[family-name:var(--font-mono)] text-[0.68rem] uppercase tracking-[0.16em] ${
                        o.type === "Head Office" ? "text-azure-bright" : "text-tlo"
                      }`}
                    >
                      {o.type}
                    </p>
                    <p className="mt-4 flex-1 text-[0.92rem] leading-relaxed text-tmid">
                      {o.lines.map((l) => (
                        <span key={l} className="block">
                          {l}
                        </span>
                      ))}
                    </p>
                  </div>
                </TiltCard>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}