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

export const metadata = {
  title: "Investor relations",
  description: "Open and upcoming Regulation Crowdfunding raises across the South Armz Global portfolio.",
};

export default function InvestorsPage() {
  const totalGoal = PITCHES.reduce((a, p) => a + p.status.raiseGoal, 0);
  const totalRaised = PITCHES.reduce((a, p) => a + p.status.currentlyRaised, 0);

  return (
    <PublicShell>
      <section className="border-b" style={{ background: "linear-gradient(135deg, var(--sag-brand)08, transparent 70%)" }}>
        <div className="container mx-auto max-w-7xl px-6 py-20">
          <Badge variant="warning">Investor relations</Badge>
          <h1 className="mt-4 text-4xl md:text-6xl font-semibold tracking-tight">
            Back the SAG family.
          </h1>
          <p className="mt-5 text-lg text-muted-foreground max-w-2xl">
            South Armz Global is preparing Regulation Crowdfunding raises for select portfolio companies. Non-accredited investors welcome via a FINRA-registered intermediary. Get on the list and we will notify you the moment each Form C is live.
          </p>

          <div className="mt-10 grid grid-cols-2 md:grid-cols-4 gap-6">
            <Stat label="Open + upcoming raises" value={String(PITCHES.length)} />
            <Stat label="Combined target" value={formatCurrency(totalGoal)} />
            <Stat label="Pledged to date" value={formatCurrency(totalRaised)} />
            <Stat label="Intermediary" value="Wefunder (planned)" />
          </div>
        </div>
      </section>

      <section className="container mx-auto max-w-7xl px-6 py-16">
        <h2 className="text-3xl font-semibold tracking-tight mb-8">Each venture, on its own terms</h2>
        <div className="space-y-6">
          {PITCHES.map((p) => {
            const pct = p.status.raiseGoal > 0 ? (p.status.currentlyRaised / p.status.raiseGoal) * 100 : 0;
            return (
              <Card key={p.slug} className="overflow-hidden">
                <CardContent className="p-0">
                  <div className="grid md:grid-cols-5 gap-0">
                    <div
                      className="md:col-span-1 p-12 flex items-center justify-center text-8xl"
                      style={{ background: `linear-gradient(135deg, ${p.primaryColor}25, ${p.primaryColor}05)` }}
                    >
                      {p.emoji}
                    </div>
                    <div className="md:col-span-3 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 md:text-3xl font-semibold">{p.legalEntity.replace(/, LLC$/, "")}</h3>
                      <p className="mt-1 text-muted-foreground italic">{p.tagline}</p>
                      <p className="mt-3 text-sm md:text-base text-foreground/85 leading-relaxed">{p.oneLine}</p>
                      <div className="mt-5 flex items-center gap-2 flex-wrap">
                        <Button asChild variant="brand">
                          <Link href={`/invest/${p.slug}`}>View full pitch →</Link>
                        </Button>
                        <Button asChild variant="outline">
                          <Link href={`/invest/${p.slug}#signup`}>Get notified</Link>
                        </Button>
                      </div>
                    </div>
                    <div className="md:col-span-1 p-6 bg-muted/30 border-l">
                      <div className="text-[10px] uppercase tracking-wider text-muted-foreground">Target</div>
                      <div className="mt-1 text-2xl font-semibold tabular-nums" style={{ color: p.primaryColor }}>
                        {formatCurrency(p.status.raiseGoal)}
                      </div>
                      <Progress value={pct} className="mt-3" />
                      <div className="mt-1.5 text-[11px] text-muted-foreground">
                        {formatCurrency(p.status.currentlyRaised)} pledged
                      </div>
                      <div className="mt-4 text-[10px] uppercase tracking-wider text-muted-foreground">Min to close</div>
                      <div className="mt-0.5 text-base font-semibold tabular-nums">{formatCurrency(p.status.minimumRaise)}</div>
                      <div className="mt-4 text-[10px] uppercase tracking-wider text-muted-foreground">Min investment</div>
                      <div className="mt-0.5 text-base font-semibold">$100</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </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 space-y-4 text-foreground/85 leading-relaxed">
          <p>
            <strong>One parent, many ventures.</strong> South Armz Global, LLC is a Carolina-rooted holding company. Each subsidiary you can invest in is an independent legal entity — a wholly-owned SAG sub — with its own EIN, financials, and direct equity offered to you.
          </p>
          <p>
            <strong>Reg CF, the right way.</strong> Investments happen through a FINRA-registered intermediary (planned: Wefunder or Republic), not directly through this site. Minimums start at $100. Reg CF income/net-worth caps apply per SEC rules. You are an investor of record from day one.
          </p>
          <p>
            <strong>You get the upside; SAG keeps the back-office.</strong> SAG provides shared operations (legal, finance, HR, technology, distribution across sibling brands) so each venture runs lean. The upside accrues to the subsidiary you back, not to the parent.
          </p>
          <p>
            <strong>Risk is real.</strong> Private-company investments are speculative and illiquid. Don’t invest more than you can afford to lose. Each pitch links to full SEC Form C risk disclosures before you commit.
          </p>
        </div>
      </section>

      <section className="container mx-auto max-w-5xl px-6 py-16">
        <Card className="bg-[var(--sag-brand)]/5 border-[var(--sag-brand)]/20">
          <CardContent className="p-10 md:p-14 text-center">
            <h2 className="text-3xl md:text-4xl font-semibold tracking-tight">Want a heads-up on all raises?</h2>
            <p className="mt-3 text-lg text-muted-foreground max-w-2xl mx-auto">
              Get on the SAG investor list — we’ll email when each Form C is live and the raise opens.
            </p>
            <Button asChild size="lg" variant="brand" className="mt-6">
              <Link href="/contact">Join the SAG investor list</Link>
            </Button>
          </CardContent>
        </Card>
      </section>
    </PublicShell>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div className="text-2xl md:text-3xl font-semibold tracking-tight text-foreground tabular-nums">{value}</div>
      <div className="mt-1 text-xs text-muted-foreground">{label}</div>
    </div>
  );
}