import { useTranslations } from "next-intl";
import { ExternalLink } from "lucide-react";
import { SectionHeader } from "@/components/shared/SectionHeader";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

const products = [
  {
    name: "HyperAccount",
    description: "Identity and account infrastructure for the next web.",
    tag: "Product",
    href: "https://hyperaccount.ir",
    status: "Live",
  },
  {
    name: "Khanehban",
    description: "Smart property management for Persian landlords and tenants.",
    tag: "Product",
    href: "https://khanehban.ir",
    status: "Beta",
  },
  {
    name: "NODE-AUTH (Dezhban)",
    description: "Authentication & authorization layer built for Persian products.",
    tag: "Infrastructure",
    href: "https://nodegroup.ir",
    status: "Building",
  },
];

export function BuildingNow() {
  const t = useTranslations("sections");

  return (
    <section className="relative z-10 px-6 py-16">
      <div className="mx-auto max-w-6xl">
        <SectionHeader label={t("building_now")} />

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {products.map((product) => (
            <a
              key={product.name}
              href={product.href}
              target="_blank"
              rel="noopener noreferrer"
              className="group block"
            >
              <Card className="h-full p-5">
                <CardContent className="p-0">
                  <div className="mb-3 flex items-start justify-between gap-2">
                    <div className="flex items-center gap-2">
                      <Badge variant="secondary">{product.tag}</Badge>
                      <span className={`font-mono text-xs ${
                        product.status === "Live" ? "text-success" :
                        product.status === "Beta" ? "text-accent" : "text-text-secondary"
                      }`}>
                        {product.status}
                      </span>
                    </div>
                    <ExternalLink
                      size={14}
                      className="text-text-secondary opacity-0 transition-opacity group-hover:opacity-100"
                    />
                  </div>
                  <h3 className="mb-2 font-mono text-base font-semibold text-text-primary group-hover:text-accent transition-colors">
                    {product.name}
                  </h3>
                  <p className="text-sm text-text-secondary leading-relaxed">
                    {product.description}
                  </p>
                </CardContent>
              </Card>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
