import type { Metadata } from "next";
import Link from "next/link";
import { PageHero } from "@/components/patterns/PageHero";
import { SectionHeading } from "@/components/patterns/SectionHeading";
import { CtaSection } from "@/components/patterns/CtaSection";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";

export const metadata: Metadata = {
  title: "About",
  description:
    "ROPTS Venture Capital is a fundraising advisory and venture-connectivity firm. Learn about our vision and mission, leadership and advisory structure, and governance and compliance posture.",
  alternates: { canonical: "/about" },
  openGraph: {
    title: "About — ROPTS Venture Capital",
    description:
      "A fundraising advisory and venture-connectivity firm that prepares organizations to raise and introduces them to a curated network of investors and partners.",
    type: "website",
    url: "/about",
  },
};

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "AboutPage",
  name: "About ROPTS Venture Capital",
  description:
    "ROPTS Venture Capital is a fundraising advisory and venture-connectivity firm connecting startups, MSMEs, SMEs, NGOs, trusts, and social enterprises with investors, CSR partners, and grant providers. ROPTS's role ends at introduction.",
  url: "https://www.ropts.com/about",
  mainEntity: { "@type": "Organization", name: "ROPTS Venture Capital" },
};

const subPages = [
  {
    title: "Vision & Mission",
    description: "What ROPTS exists to do, and the principles that shape how it does it.",
    href: "/about/vision-and-mission",
  },
  {
    title: "Leadership",
    description: "How ROPTS's advisory review is structured and the expertise it draws on.",
    href: "/about/leadership",
  },
  {
    title: "Governance & Compliance",
    description: "How organizations are evaluated, how confidentiality is protected, and where our role ends.",
    href: "/about/governance-and-compliance",
  },
];

export default function AboutPage() {
  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />

      <PageHero
        breadcrumb={[{ label: "Home", href: "/" }, { label: "About" }]}
        eyebrow="About"
        title="An advisory bridge, not a fund"
        description="ROPTS Venture Capital prepares startups, MSMEs, SMEs, NGOs, trusts, and social enterprises to raise capital, then introduces them to investors and partners whose stated focus actually fits. ROPTS does not invest directly, and its role ends at introduction."
        primaryLabel="See How It Works"
        primaryHref="/how-it-works"
        secondaryLabel="Apply to Raise Capital"
        secondaryHref="/apply/organization"
      />

      <div className="container py-16">
        <div className="max-w-2xl">
          <SectionHeading
            eyebrow="What We Are"
            title="A fundraising advisory and connectivity firm"
          />
          <p className="mt-6 text-body-md text-ink-soft">
            Most organizations raising capital don&apos;t fail because the underlying business, program, or mission
            is weak — they fail because they approach the wrong investors with the wrong preparation, or the right
            investors never hear about them at all. ROPTS exists to close that gap. We review an organization&apos;s
            fundraising readiness, help close the gaps we find, and then introduce it to angel investors, VC firms,
            family offices, corporate investors, CSR partners, grant providers, philanthropic organizations, impact
            investors, foundations, and government funding programs whose focus genuinely overlaps with what&apos;s
            being raised.
          </p>
          <p className="mt-4 text-body-md text-ink-soft">
            We are not a venture fund and we do not make investment decisions on an organization&apos;s behalf. Once
            an introduction is made, the relationship, the terms, and the outcome belong to the organization and the
            investor or partner it was introduced to.
          </p>
        </div>

        <div className="mt-16">
          <SectionHeading eyebrow="Learn More" title="Explore ROPTS" />
          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {subPages.map((page) => (
              <Card key={page.href} className="flex flex-col">
                <CardHeader>
                  <CardTitle>{page.title}</CardTitle>
                  <CardDescription>{page.description}</CardDescription>
                </CardHeader>
                <Link
                  href={page.href}
                  className="mt-auto px-6 pb-6 pt-4 text-body-sm text-primary underline underline-offset-4"
                >
                  Read more
                </Link>
              </Card>
            ))}
            <Card className="flex flex-col">
              <CardHeader>
                <CardTitle>Contact</CardTitle>
                <CardDescription>Reach the ROPTS team directly with a question or mandate.</CardDescription>
              </CardHeader>
              <Link href="/contact" className="mt-auto px-6 pb-6 pt-4 text-body-sm text-primary underline underline-offset-4">
                Get in touch
              </Link>
            </Card>
          </div>
        </div>
      </div>

      <CtaSection
        title="See how the process works, end to end."
        primaryLabel="See How It Works"
        primaryHref="/how-it-works"
        secondaryLabel="Apply to Raise Capital"
        secondaryHref="/apply/organization"
      />
    </>
  );
}