import type { Metadata } from "next";
import { ContactView } from "@/components/contact/contact-view";
import { site, ogBase, twitterBase } from "@/content/site";

export const metadata: Metadata = {
  title: { absolute: "Contact Quto AI — AI Agents, Voice & WhatsApp Automation" },
  description:
    "Talk to Quto AI about AI voice agents, WhatsApp automation and conversational AI. Share your use case and we'll show how an agent handles it.",
  keywords: [
    "contact quto ai",
    "ai voice agent consultation",
    "hire voice ai developers",
    "whatsapp automation demo",
    "custom ai agent pricing",
    "enterprise conversational ai demo",
  ],
  alternates: { canonical: "/contact" },
  openGraph: {
    ...ogBase,
    title: "Contact Quto AI",
    description:
      "Talk to Quto AI about AI voice agents, WhatsApp automation and conversational AI — tell us your use case.",
    url: "/contact",
  },
  twitter: {
    ...twitterBase,
    title: "Contact Quto AI",
    description:
      "Talk to Quto AI about AI voice agents, WhatsApp automation and conversational AI — tell us your use case.",
  },
};

export default function ContactPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "ContactPage",
    name: "Contact Quto AI",
    description:
      "Get in touch with Quto AI to design, build and deploy AI agents for your business.",
    publisher: {
      "@type": "Organization",
      name: site.name,
      url: site.url,
    },
  };

  const breadcrumbsSchema = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: site.url },
      { "@type": "ListItem", position: 2, name: "Contact", item: `${site.url}/contact` },
    ],
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify([jsonLd, breadcrumbsSchema]) }}
      />
      <ContactView />
    </>
  );
}