import type { Metadata } from "next";
import { Rocket, Landmark, HandHeart, Building2, ShieldCheck } from "lucide-react";
import { PageHero } from "@/components/patterns/PageHero";
import { Alert } from "@/components/ui/Alert";
import { Card, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/Card";
import { LinkButton } from "@/components/ui/LinkButton";

export const metadata: Metadata = {
  title: "Portal",
  description:
    "ROPTS Venture Capital portal access for founders, investors, NGOs and trusts, CSR partners, and administrators.",
  alternates: { canonical: "/portal" },
  openGraph: {
    title: "Portal — ROPTS Venture Capital",
    description: "Portal access for founders, investors, NGOs and trusts, CSR partners, and administrators.",
    type: "website",
    url: "/portal",
  },
};

const roles = [
  {
    icon: Rocket,
    title: "Founder Login",
    description: "Track your application, readiness review, and introduction status.",
  },
  {
    icon: Landmark,
    title: "Investor Login",
    description: "View curated, readiness-reviewed organization introductions matched to your mandate.",
  },
  {
    icon: HandHeart,
    title: "NGO / Trust Login",
    description: "Manage your mandate profile and track grant and CSR introduction status.",
  },
  {
    icon: Building2,
    title: "CSR Partner Login",
    description: "Review matched organizations and manage your CSR partnership mandate.",
  },
  {
    icon: ShieldCheck,
    title: "Administrator Login",
    description: "Internal access for ROPTS advisory and operations staff.",
  },
];

export default function PortalPage() {
  return (
    <>
      <PageHero
        breadcrumb={[{ label: "Home", href: "/" }, { label: "Portal" }]}
        eyebrow="Portal"
        title="Portal"
        description="Role-based access for everyone working through ROPTS — founders and organizations, investors and partners, and internal staff."
      />

      <section className="container py-16 md:py-20">
        <Alert variant="info" title="Portal access is provisioned individually" className="mb-10 max-w-2xl">
          Login credentials are issued once your application, readiness review, or partner registration is
          underway. If you already have an account, use the sign-in link you were sent. If you don&apos;t yet, apply
          first — there&apos;s no cost, and no obligation until an introduction is made.
        </Alert>

        <h2 className="sr-only">Login by Role</h2>
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {roles.map((role) => (
            <Card key={role.title} className="flex h-full flex-col">
              <CardHeader>
                <role.icon className="size-6 text-primary" aria-hidden="true" />
                <CardTitle className="mt-2">{role.title}</CardTitle>
                <CardDescription>{role.description}</CardDescription>
              </CardHeader>
              <CardFooter className="mt-auto">
                <LinkButton href="/contact" variant="secondary" size="sm">
                  Request Access
                </LinkButton>
              </CardFooter>
            </Card>
          ))}
        </div>
      </section>
    </>
  );
}