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

export const metadata: Metadata = {
  title: { absolute: "About Quto AI — The AI Agents Agency" },
  description:
    "Quto AI is a done-for-you AI agents agency. We design, build and deploy conversational AI agents across voice, WhatsApp, chat and web.",
  keywords: [
    "ai agents agency",
    "voice ai development company",
    "conversational ai agency",
    "custom ai voice bots",
    "enterprise ai automation",
    "about quto ai",
  ],
  alternates: { canonical: "/about" },
  openGraph: {
    ...ogBase,
    title: "About Quto AI — The AI Agents Agency",
    description:
      "How Quto AI designs, builds and deploys AI agents for real business conversations.",
    url: "/about",
  },
  twitter: {
    ...twitterBase,
    title: "About Quto AI — The AI Agents Agency",
    description:
      "How Quto AI designs, builds and deploys AI agents for real business conversations.",
  },
};

export default function AboutPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Organization",
    name: site.name,
    url: site.url,
    logo: `${site.url}/images/quto-logo.png`,
    description: site.description,
    member: [
      { "@type": "Person", name: "Mohit Kumar Mittal", jobTitle: "Co-Founder" },
      { "@type": "Person", name: "Lily Singhal", jobTitle: "Co-Founder" },
      { "@type": "Person", name: "Suryabhan Singh", jobTitle: "Lead Engineer" },
      { "@type": "Person", name: "Shubham Jadhav", jobTitle: "Associate Engineer" },
    ],
    ...(site.email
      ? {
          contactPoint: {
            "@type": "ContactPoint",
            email: site.email,
            ...(site.phone ? { telephone: `+91-${site.phone}` } : {}),
            contactType: "sales",
            areaServed: "IN",
            availableLanguage: ["en", "hi"],
          },
        }
      : {}),
    ...(site.sameAs.length ? { sameAs: site.sameAs } : {}),
  };

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

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