import Link from "next/link";
import { PublicShell } from "@/components/public/public-shell";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { PITCHES } from "@/lib/sag/pitches";
import { formatCurrency } from "@/lib/utils";

export const metadata = { title: "Invest" };

export default function InvestPage() {
  return (
    <PublicShell>
      <section className="border-b bg-muted/30">
        <div className="container mx-auto max-w-4xl px-6 py-20">
          <Badge variant="warning">Coming soon</Badge>
          <h1 className="mt-4 text-4xl md:text-5xl font-semibold tracking-tight">
            Invest in South Armz Global ventures.
          </h1>
          <p className="mt-4 text-lg text-muted-foreground max-w-2xl">
            We’re preparing Regulation Crowdfunding raises for select portfolio companies under SEC Reg CF, in partnership with a FINRA-registered intermediary. Non-accredited investors welcome.
          </p>
          <div className="mt-8 flex gap-3 flex-wrap">
            <Button asChild size="lg" variant="brand">
              <Link href="/contact">Get on the list</Link>
            </Button>
            <Button asChild size="lg" variant="outline">
              <Link href="/portfolio">Meet the companies</Link>
            </Button>
          </div>
        </div>
      </section>

      <section className="container mx-auto max-w-5xl px-6 py-16">
        <h2 className="text-2xl font-semibold tracking-tight">Upcoming raises</h2>
        <div className="mt-6 space-y-5">
          {PITCHES.map((p) => (
            <Link key={p.slug} href={`/invest/${p.slug}`} className="block group">
              <Card className="transition-all group-hover:shadow-lg group-hover:-translate-y-0.5 overflow-hidden">
                <CardContent className="p-0">
                  <div className="grid md:grid-cols-3">
                    <div
                      className="md:col-span-1 p-10 flex items-center justify-center text-7xl"
                      style={{ background: `linear-gradient(135deg, ${p.primaryColor}25, ${p.primaryColor}10)` }}
                    >
                      {p.emoji}
                    </div>
                    <div className="md:col-span-2 p-8">
                      <div className="flex items-center gap-2 mb-2 flex-wrap">
                        <Badge variant="warning">{p.status.stage}</Badge>
                        <Badge variant="outline">Reg CF planned</Badge>
                      </div>
                      <h3 className="text-2xl font-semibold">{p.legalEntity.replace(/, LLC$/, "")}</h3>
                      <p className="mt-1 text-muted-foreground italic">{p.tagline}</p>
                      <p className="mt-3 text-sm text-foreground/85 line-clamp-2">{p.oneLine}</p>
                      <div className="mt-5 flex items-center gap-6 flex-wrap text-sm">
                        <Stat label="Raise target" value={formatCurrency(p.status.raiseGoal)} />
                        <Stat label="Minimum" value={formatCurrency(p.status.minimumRaise)} />
                        <Stat label="Intermediary" value={p.status.intermediaryPartner} />
                      </div>
                      <div className="mt-5 text-sm font-medium" style={{ color: p.primaryColor }}>View full pitch →</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </section>

      <section className="container mx-auto max-w-4xl px-6 py-16">
        <h2 className="text-2xl font-semibold tracking-tight">How SAG crowdfunding works</h2>
        <div className="mt-8 grid gap-5 md:grid-cols-3">
          <InfoCard step="01" title="Pick a venture" body="Each raise has its own pitch page with the team, traction, financials, terms, and SEC Form C." />
          <InfoCard step="02" title="Invest through a FINRA-registered portal" body="Investments flow through our crowdfunding partner (Wefunder or Republic). Minimums start at $100." />
          <InfoCard step="03" title="Receive quarterly updates" body="Funded raises send quarterly updates and annual reports per Reg CF rules. You’re an investor of record." />
        </div>

        <div className="mt-16 rounded-lg border bg-muted/30 p-6">
          <h3 className="text-lg font-semibold">Important disclosures</h3>
          <p className="mt-2 text-sm text-muted-foreground">
            Investments in private companies are speculative and illiquid. You may lose your entire investment. Reg CF investment limits apply per SEC rules based on your income and net worth. Full risk factors will be disclosed in each project’s Form C.
          </p>
        </div>
      </section>
    </PublicShell>
  );
}

function InfoCard({ step, title, body }: { step: string; title: string; body: string }) {
  return (
    <Card>
      <CardContent className="p-6">
        <div className="text-xs font-medium text-[var(--sag-brand)]">{step}</div>
        <div className="mt-2 text-lg font-semibold">{title}</div>
        <p className="mt-2 text-sm text-muted-foreground">{body}</p>
      </CardContent>
    </Card>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div className="text-xs text-muted-foreground">{label}</div>
      <div className="font-semibold tabular-nums">{value}</div>
    </div>
  );
}