import type { Metadata } from "next";
import { LeadForm } from "@/components/forms/LeadForm";
import { TextLink } from "@/components/ui/Button";
import { Eyebrow } from "@/components/ui/SectionHeading";
import { Breadcrumbs } from "@/components/ui/Structured";
import { routes } from "@/lib/routes";
import { pageMetadata } from "@/lib/seo";
import { siteConfig } from "@/lib/site";

export const metadata: Metadata = pageMetadata({
  title: "Contact",
  description:
    "Contact Axidys Media, a growth marketing agency for SaaS and e-commerce companies. Axidys Limited, Wan Chai, Hong Kong.",
  path: routes.contact,
  ogKey: "contact",
});

export default function ContactPage() {
  const { address } = siteConfig;

  return (
    <section aria-labelledby="page-title">
      <div className="container-page pb-24 pt-8 lg:pb-32 lg:pt-10">
        <Breadcrumbs
          items={[
            { name: "Home", href: routes.home },
            { name: "Contact", href: routes.contact },
          ]}
        />
        <div className="mt-10 grid gap-12 lg:mt-14 lg:grid-cols-12 lg:gap-6">
          <div className="lg:col-span-5">
            <div className="fade-rise">
              <Eyebrow>Contact</Eyebrow>
            </div>
            <h1 id="page-title" className="fade-rise mt-6 text-display-lg">
              Contact Axidys Media.
            </h1>
            <p className="fade-rise mt-6 text-lead text-ink-soft">
              For new projects, a Growth Audit request is the fastest route. For anything else, send a message and we&rsquo;ll
              reply by email.
            </p>
            <TextLink href={routes.audit} className="fade-rise mt-4">
              Request a Growth Audit
            </TextLink>

            <dl className="fade-rise mt-12 border-t border-ink text-[0.9375rem]">
              <div className="grid grid-cols-[9rem_1fr] gap-4 border-b border-line py-4">
                <dt className="text-muted">Company</dt>
                <dd>{siteConfig.legalName}</dd>
              </div>
              <div className="grid grid-cols-[9rem_1fr] gap-4 border-b border-line py-4">
                <dt className="text-muted">Company No.</dt>
                <dd>{siteConfig.companyNumber}</dd>
              </div>
              <div className="grid grid-cols-[9rem_1fr] gap-4 border-b border-line py-4">
                <dt className="text-muted">Address</dt>
                <dd>
                  <address className="not-italic">
                    {address.streetAddress}
                    <br />
                    {address.addressLocality}, {address.countryName}
                  </address>
                </dd>
              </div>
              <div className="grid grid-cols-[9rem_1fr] gap-4 border-b border-line py-4">
                <dt className="text-muted">Email</dt>
                <dd>
                  <a href={`mailto:${siteConfig.contactEmail}`} className="link-underline">
                    {siteConfig.contactEmail}
                  </a>
                </dd>
              </div>
            </dl>
          </div>

          <div className="lg:col-span-6 lg:col-start-7">
            <div className="fade-rise rounded-lg border border-line bg-surface p-6 sm:p-9">
              <h2 className="text-title">Send a message.</h2>
              <div className="mt-8">
                <LeadForm intent="contact" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}