import Container from "@/components/ui/Container";
import ContactForm from "@/components/forms/ContactForm";
import { getSiteSettings } from "@/lib/api";

export const metadata = { title: "Contact Us | allBETs" };
export const revalidate = 300;

export default async function ContactPage() {
  const site = await getSiteSettings();

  return (
    <section className="py-16">
      <Container>
        <h1 className="font-display font-black text-3xl sm:text-4xl text-ink">Contact Us</h1>
        <p className="mt-3 text-neutral-700 max-w-2xl">
          Questions about an order, the app, or anything else — reach out and we&apos;ll get back to you.
        </p>

        <div className="mt-10 grid grid-cols-1 lg:grid-cols-3 gap-10">
          <div className="lg:col-span-1 flex flex-col gap-4">
            <InfoCard label="Address" value={site.address} />
            <InfoCard label="Phone" value={site.phone} href={`tel:${site.phone}`} />
            <InfoCard label="Email" value={site.email} href={`mailto:${site.email}`} />
          </div>
          <div className="lg:col-span-2">
            <ContactForm />
          </div>
        </div>
      </Container>
    </section>
  );
}

function InfoCard({ label, value, href }: { label: string; value: string; href?: string }) {
  return (
    <div className="rounded-xl2 border border-divider bg-surface p-5">
      <p className="text-xs font-semibold uppercase tracking-wide text-neutral-600">{label}</p>
      {href ? (
        <a href={href} className="mt-1 block text-sm font-medium text-ink hover:text-accent-600">
          {value}
        </a>
      ) : (
        <p className="mt-1 text-sm font-medium text-ink">{value}</p>
      )}
    </div>
  );
}