import type { Metadata } from "next";
import { Section } from "@/components/layout/Section";
import { InquiryForm } from "@/components/forms/InquiryForm";
import { inquiryChannels } from "@/content/inquiries";
import { pageSeo } from "@/content/page-seo";
import { createPageMetadata } from "@/lib/seo";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export const metadata: Metadata = createPageMetadata(pageSeo.contact);

export default function ContactPage() {
  return (
    <>
      <Section className="pt-24">
        <h1 className="text-4xl font-bold">Contact us</h1>
        <p className="mt-4 max-w-2xl text-muted-foreground">
          Reach the right team for registration, exhibitions, sponsorship, or media inquiries.
        </p>
        <div className="mt-10 grid gap-4 sm:grid-cols-2">
          {inquiryChannels.map((ch) => (
            <Card key={ch.id}>
              <CardHeader>
                <CardTitle className="text-lg">{ch.label}</CardTitle>
                <CardDescription>{ch.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <a
                  href={`mailto:${ch.email}`}
                  className="font-medium text-[#1f3d7e] hover:underline"
                >
                  {ch.email}
                </a>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>
      <Section variant="muted">
        <h2 className="text-2xl font-bold">Send a message</h2>
        <div className="mt-8 max-w-lg">
          <InquiryForm intent="general" />
        </div>
      </Section>
    </>
  );
}