import { Footer, Navbar } from "~/components";
import { InlineWidget } from "react-calendly";
import type { Route } from "./+types";
import { generateMetaTags, SITE_CONFIG, schemaToJsonLd, generateBreadcrumbList } from "~/lib/utils";

export function meta({}: Route.MetaArgs) {
  const breadcrumbs = generateBreadcrumbList([
    { name: 'Home', url: SITE_CONFIG.siteUrl },
    { name: 'Schedule a Call', url: `${SITE_CONFIG.siteUrl}/schedule` },
  ]);

  const metaTags = generateMetaTags({
    title: 'Schedule a Call',
    description: 'Ready to align your brand with purpose? Schedule a consultation with our team to discuss your branding strategy, design needs, and business goals.',
    url: `${SITE_CONFIG.siteUrl}/schedule`,
    type: 'website',
  });

  return [
    ...metaTags,
    schemaToJsonLd(breadcrumbs),
  ];
}

export default function ContactUs() {
  return (
    <div>
      <Navbar />
      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-6">
        <div className="text-center mt-12">
          <h2 className="text-3xl font-bold mb-4">Contact Us</h2>
          <p className="text-lg text-gray-700">
            We would love to hear from you! Please reach out with any questions
            or inquiries or make a booking here.
          </p>
        </div>
        <div className="my-4 w-full">
          <InlineWidget
            url="https://calendly.com/softwareserviceszw/30min"
            styles={cardStyles}
            pageSettings={pageSettings}
          />
        </div>
      </div>
      <Footer />
    </div>
  );
}

const cardStyles = {
  height: "680px",
};

const pageSettings = {
  backgroundColor: "ffffff",
  hideEventTypeDetails: false,
  hideLandingPageDetails: false,
  primaryColor: "#c10007",
  textColor: "4d5055",
};
