import type { Metadata } from "next";
import { getSettings } from "@/lib/settings";
import EnquiryForm from "@/components/store/EnquiryForm";
export const metadata: Metadata = { title: "Contact", alternates: { canonical: "/contact" } };
export default async function Contact({ searchParams }: { searchParams: Promise<{ topic?: string }> }) {
  const [s, sp] = await Promise.all([getSettings(), searchParams]);
  return (
    <div className="wrap py-12 md:py-20 grid md:grid-cols-12 gap-12">
      <div className="md:col-span-5"><h1 className="font-display text-[48px] md:text-[80px] leading-none">Contact</h1>
        <div className="mt-8 space-y-2 text-[16px]">{s.email && <p><a className="hover:text-gilt" href={`mailto:${s.email}`}>{s.email}</a></p>}{s.phone && <p>{s.phone}</p>}{s.whatsapp && <p><a className="underline underline-offset-4" href={`https://wa.me/${s.whatsapp}`} rel="noopener noreferrer" target="_blank">Message on WhatsApp</a></p>}<p className="text-stone">{s.address}</p></div>
        <p className="mt-6 text-stone max-w-[40ch]">Ask about sizing, colours, an order or a styling idea. We usually reply within one working day.</p></div>
      <div className="md:col-span-6 md:col-start-7"><EnquiryForm topic={sp.topic} /></div>
    </div>
  );
}