import React from "react";
import type { Metadata } from "next";
import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1";
import ContactSection from "@/components/contact/ContactSection";
import MapSection from "@/components/contact/MapSection";
import PageHeader from "@/components/common/PageHeader";

export const metadata: Metadata = {
    title: "Contact Digital Marketing Experts Canada",
    description: "Let's Connect. Drop us a Line. Whether you have a question, a project idea, or just want to chat, we're here for you.",
    alternates: {
        canonical: "/contact-digital-marketing-experts-canada",
    },
};

export default function ContactPage() {
    return (
        <>
            <Header1 />
            <main id="main-content">
                <PageHeader
                    title="Contact Us"
                    bannerLeftImage="/assets/images/innerbanner/left/left-contact.webp"
                    bannerRightImage="/assets/images/innerbanner/right/right-contact.webp"
                />
                <ContactSection />
                <MapSection />
            </main>
            <Footer1 />
        </>
    );
}