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

export function meta({}: Route.MetaArgs) {
  const breadcrumbs = generateBreadcrumbList([
    { name: 'Home', url: SITE_CONFIG.siteUrl },
    { name: 'About Us', url: `${SITE_CONFIG.siteUrl}/about-us` },
  ]);

  const metaTags = generateMetaTags({
    title: 'About Us',
    description: 'We are a team of dedicated professionals committed to helping you achieve your business goals through strategic branding and purpose-driven design.',
    url: `${SITE_CONFIG.siteUrl}/about-us`,
    type: 'website',
  });

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

export default function AboutUs() {
  return (
    <div>
      <Navbar />
      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-6">
        <h2 className="text-3xl font-bold mb-4">About Us</h2>
        <p className="text-lg text-gray-700">
          We are a team of dedicated professionals committed to helping you achieve your business goals.
        </p>
      </div>
      <Footer />
    </div>
  );
}
