import Link from "next/link";
import { PublicShell } from "@/components/public/public-shell";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { getIndustryGroups, SUBSIDIARIES } from "@/lib/sag/entities";

export const metadata = {
  title: "Portfolio",
  description: "The complete South Armz Global portfolio — all 22 ventures.",
};

export default function PortfolioPage() {
  const groups = getIndustryGroups().sort((a, b) => b.orgs.length - a.orgs.length);

  return (
    <PublicShell>
      <section className="border-b bg-muted/30">
        <div className="container mx-auto max-w-7xl px-6 py-16">
          <div className="max-w-3xl">
            <p className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Portfolio</p>
            <h1 className="mt-2 text-4xl md:text-5xl font-semibold tracking-tight">
              {SUBSIDIARIES.length} ventures, one family.
            </h1>
            <p className="mt-4 text-lg text-muted-foreground">
              Every company in the SAG family is built around the same values: Carolina-rooted, independent-owned, and accountable to its community.
            </p>
          </div>
        </div>
      </section>

      <section className="container mx-auto max-w-7xl px-6 py-16">
        {groups.map(({ industry, orgs }) => (
          <div key={industry} className="mb-16 last:mb-0">
            <div className="flex items-end justify-between mb-6 gap-4">
              <h2 className="text-2xl font-semibold tracking-tight">{industry}</h2>
              <Badge variant="outline">{orgs.length} {orgs.length === 1 ? "venture" : "ventures"}</Badge>
            </div>
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
              {orgs.map((org) => (
                <Link key={org.slug} href={`/portfolio/${org.slug}`} className="group">
                  <Card className="h-full transition-all group-hover:shadow-md group-hover:-translate-y-0.5">
                    <CardContent className="p-6">
                      <div className="flex items-start justify-between gap-3 mb-3">
                        <div
                          className="flex items-center justify-center w-12 h-12 rounded-md text-2xl shrink-0"
                          style={{ backgroundColor: `${org.primaryColor}15` }}
                        >
                          {org.emoji}
                        </div>
                        <Badge variant="success" className="text-[10px]">{org.status}</Badge>
                      </div>
                      <h3 className="text-lg font-semibold">{org.name}</h3>
                      <p className="mt-1 text-sm text-muted-foreground italic line-clamp-1">{org.tagline}</p>
                      <p className="mt-3 text-sm text-foreground/80 line-clamp-3">{org.blurb}</p>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          </div>
        ))}
      </section>
    </PublicShell>
  );
}