import React from "react";
import type { Metadata } from "next";
import { SiteFrame } from "@/app/components/SiteFrame/SiteFrame";
import { JsonLd } from "@/app/lib/structured-data";
import { AboutContent } from "./AboutContent";
import styles from "./about.module.css";

export const metadata: Metadata = {
  title: "About",
  description:
    "Learn how Meliorate builds products, custom software, AI agents, automation systems, and growth infrastructure for ambitious teams.",
  alternates: { canonical: "/about" },
  openGraph: {
    title: "About Meliorate",
    description: "Execution-focused studio combining product engineering, AI automation, and growth infrastructure.",
    url: "/about",
  },
};

export default function AboutPage() {
  return (
    <SiteFrame>
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          itemListElement: [
            { "@type": "ListItem", position: 1, name: "Home", item: "https://meliorate.pro" },
            { "@type": "ListItem", position: 2, name: "About", item: "https://meliorate.pro/about" },
          ],
        }}
      />
      <section className={styles.pageSection}>
        <div className={styles.container}>
          <AboutContent />
        </div>
      </section>
    </SiteFrame>
  );
}