fivedevs.com/src/app/contact/page.tsx

import { Button } from "@/components/button";
import { Container } from "@/components/container";
import { ContactForm } from "@/components/contact-form";
import { Eyebrow } from "@/components/section-heading";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Contact",
  description:
    "Three ways to reach Five Devs: book a 20-minute intro call, send a quick note, or email Chris directly.",
};

const calLink = "https://cal.com/cgsmith/intro";

export default function ContactPage() {
  return (
    <section className="py-20 sm:py-28">
      <Container>
        <div className="grid gap-16 lg:grid-cols-[1.1fr_1fr]">
          {/* Left: pitch */}
          <div>
            <Eyebrow>Get in touch</Eyebrow>
            <h1 className="mt-6 font-serif text-4xl font-semibold leading-tight tracking-tight text-ink sm:text-5xl">
              Tell me what&rsquo;s on the back burner.
            </h1>
            <p className="mt-7 max-w-md text-lg leading-relaxed text-ink-soft">
              The fastest way to find out if I can help is a 20-minute
              call. No pitch deck, no SDR email sequence &mdash; just a
              real conversation about what you&rsquo;re trying to do.
            </p>

            <div className="mt-10 space-y-6">
              <div className="rounded-2xl border border-ink bg-ink p-7 text-cream">
                <p className="font-mono text-xs uppercase tracking-[0.18em] text-cream/60">
                  Recommended
                </p>
                <h2 className="mt-2 font-serif text-2xl font-semibold">
                  Book a 20-min intro call
                </h2>
                <p className="mt-2 text-cream/80">
                  Pick a time that works for you. I&rsquo;ll come ready
                  with questions.
                </p>
                <Button
                  href={calLink}
                  variant="secondary"
                  className="mt-5 border-cream/30 text-cream hover:border-cream hover:bg-cream/10"
                >
                  Open my calendar &rarr;
                </Button>
              </div>

              <div className="rounded-2xl border border-line/80 bg-cream-soft p-7">
                <h2 className="font-serif text-xl font-semibold text-ink">
                  Prefer email?
                </h2>
                <p className="mt-2 text-ink-soft">
                  No problem.{" "}
                  <a
                    href="mailto:chris@fivedevs.com"
                    className="font-medium text-ink underline underline-offset-4"
                  >
                    chris@fivedevs.com
                  </a>{" "}
                  goes straight to me.
                </p>
              </div>

              <div className="text-sm text-muted">
                <p>
                  <span className="font-medium text-ink">Mailing address:</span>{" "}
                  Five Devs, LLC &middot; 1887 Whitney Mesa Dr. PMB 7325
                  &middot; Henderson, NV 89014 &middot; USA
                </p>
              </div>
            </div>
          </div>

          {/* Right: form */}
          <div className="rounded-2xl border border-line/80 bg-cream-soft p-8 sm:p-10">
            <h2 className="font-serif text-2xl font-semibold text-ink">
              Or send a quick note
            </h2>
            <p className="mt-2 text-sm text-muted">
              I read every message and reply within one business day.
            </p>
            <div className="mt-8">
              <ContactForm />
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}