import { createFileRoute, Link } from "@tanstack/react-router";
import { Megaphone } from "lucide-react";

import { AppShell } from "@/components/app-shell";
import { Button } from "@/components/ui/button";

export const Route = createFileRoute("/_authenticated/opportunities")({
  head: () => ({
    meta: [
      { title: "Opportunities | UZIA Academy" },
      { name: "description", content: "Grants, tenders and market opportunities, coming soon." },
      { name: "robots", content: "noindex" },
    ],
  }),
  component: Opportunities,
});

function Opportunities() {
  return (
    <AppShell
      title="Opportunities"
      description="Grants, tenders, market linkages and financing calls relevant to your sector and county."
    >
      <div className="rounded-2xl border border-dashed border-border bg-surface p-12 text-center">
        <Megaphone className="mx-auto size-8 text-secondary" />
        <h2 className="mt-4 font-display text-xl font-bold">Opportunity feed in the works</h2>
        <p className="mx-auto mt-3 max-w-lg text-sm text-muted-foreground">
          Keep your business profile current — sector, size and county are what we'll use to filter
          opportunities for you when this launches.
        </p>
        <Button asChild className="mt-6" variant="outline">
          <Link to="/profile">Update your profile</Link>
        </Button>
      </div>
    </AppShell>
  );
}
