← back to Govarbitrage

src/app/selling-avenues/page.tsx

139 lines

import type { Metadata } from "next";
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  SOURCING,
  SELLING,
  INTERNATIONAL,
  COMPLIANCE,
  WORKED_EXAMPLE,
  type AvenueGroup,
} from "@/lib/selling-avenues";

const PAGE_TITLE = "Sourcing & Selling Avenues";
const PAGE_DESC =
  "Where to buy government surplus, where to resell it, and how to validate demand before you bid — with the compliance rules that keep 'sell before you buy' legal.";

export const metadata: Metadata = {
  title: PAGE_TITLE,
  description: PAGE_DESC,
  alternates: { canonical: "/selling-avenues" },
  openGraph: {
    title: PAGE_TITLE,
    description: PAGE_DESC,
    url: "/selling-avenues",
    type: "website",
  },
};

const faqJsonLd = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: COMPLIANCE.map((rule) => ({
    "@type": "Question",
    name: rule.title,
    acceptedAnswer: {
      "@type": "Answer",
      text: rule.body,
    },
  })),
};

function Groups({ groups }: { groups: AvenueGroup[] }) {
  return (
    <div className="grid gap-3 md:grid-cols-3">
      {groups.map((g) => (
        <Card key={g.heading}>
          <CardHeader>
            <CardTitle className="text-foreground">{g.heading}</CardTitle>
            <p className="text-xs text-muted-foreground">{g.blurb}</p>
          </CardHeader>
          <CardContent className="space-y-2">
            {g.avenues.map((a) => (
              <div key={a.url} className="text-sm">
                <a
                  href={a.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="font-medium text-primary hover:underline"
                >
                  {a.name} ↗
                </a>
                <p className="text-xs text-muted-foreground">{a.note}</p>
              </div>
            ))}
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

export default function SellingAvenuesPage() {
  return (
    <main className="mx-auto max-w-6xl space-y-6 p-5">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
      />
      <div className="text-sm">
        <Link href="/" className="text-primary hover:underline">
          ← Dashboard
        </Link>
      </div>
      <header>
        <h1 className="text-2xl font-semibold tracking-tight">Sourcing &amp; Selling Avenues</h1>
        <p className="text-sm text-muted-foreground">
          Where to buy government surplus, where to resell it, and how to validate demand
          <em> before </em> you bid — with the compliance rules that keep &ldquo;sell before you buy&rdquo; legal.
        </p>
      </header>

      <Card>
        <CardHeader>
          <CardTitle className="text-foreground">{WORKED_EXAMPLE.title}</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">{WORKED_EXAMPLE.body}</p>
        </CardContent>
      </Card>

      <section className="space-y-3">
        <h2 className="text-lg font-semibold">Where to source</h2>
        <Groups groups={SOURCING} />
      </section>

      <section className="space-y-3">
        <h2 className="text-lg font-semibold">Where to sell &amp; validate demand</h2>
        <Groups groups={SELLING} />
      </section>

      <section className="space-y-3">
        <h2 className="text-lg font-semibold">
          International — source &amp; resell abroad (Europe · Japan · HK · Australia · China)
        </h2>
        <Groups groups={INTERNATIONAL} />
      </section>

      <section className="space-y-3">
        <h2 className="text-lg font-semibold">
          Compliance — selling before you own <Badge variant="warning">read this</Badge>
        </h2>
        <div className="grid gap-3 md:grid-cols-2">
          {COMPLIANCE.map((r) => (
            <Card key={r.title}>
              <CardHeader>
                <CardTitle className="text-foreground">{r.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">{r.body}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>
    </main>
  );
}