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 { SUBSIDIARIES, getIndustryGroups } from "@/lib/sag/entities";
import { getToastTotals } from "@/lib/sag/toast-sample";
import { formatCurrencyCompact } from "@/lib/utils";

export default function Home() {
  const totals = getToastTotals();
  const featuredOrgs = SUBSIDIARIES.slice(0, 6);
  const industries = getIndustryGroups();

  return (
    <PublicShell>
      {/* HERO */}
      <section className="relative overflow-hidden border-b">
        <div className="absolute inset-0 bg-gradient-to-br from-[var(--sag-brand)]/8 via-background to-background pointer-events-none" />
        <div className="container relative mx-auto max-w-7xl px-6 py-24 md:py-32">
          <div className="max-w-3xl">
            <div className="inline-flex items-center rounded-full border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
              Pittsboro, NC &middot; Established 2019
            </div>
            <h1 className="mt-6 text-4xl md:text-6xl font-semibold tracking-tight text-foreground">
              One family. <span className="text-[var(--sag-brand)]">Many ventures.</span> Built in North Carolina.
            </h1>
            <p className="mt-6 text-lg text-muted-foreground max-w-2xl">
              South Armz Global is the parent holding company for {SUBSIDIARIES.length} operating businesses across food and beverage, hemp, technology, media, music, and recreation — all rooted in the Carolinas.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Button asChild size="lg" variant="brand">
                <Link href="/portfolio">See the portfolio</Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link href="/invest">Invest in our ventures</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* STATS */}
      <section className="border-b bg-muted/30">
        <div className="container mx-auto max-w-7xl px-6 py-12">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <Stat label="Operating companies" value={String(SUBSIDIARIES.length)} />
            <Stat label="Industries" value={String(industries.length)} />
            <Stat label="2025 portfolio sales" value={formatCurrencyCompact(totals.netSales)} hint="Toast POS · partial" />
            <Stat label="Headquartered in" value="North Carolina" />
          </div>
        </div>
      </section>

      {/* FEATURED ORGS */}
      <section className="container mx-auto max-w-7xl px-6 py-20">
        <div className="flex items-end justify-between mb-10 gap-4">
          <div>
            <h2 className="text-3xl font-semibold tracking-tight">Featured ventures</h2>
            <p className="mt-2 text-muted-foreground">A sample of the SAG portfolio. There are {SUBSIDIARIES.length - featuredOrgs.length} more.</p>
          </div>
          <Button asChild variant="ghost" size="sm">
            <Link href="/portfolio">View all →</Link>
          </Button>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {featuredOrgs.map((org) => (
            <Link key={org.slug} href={`/portfolio/${org.slug}`} className="group">
              <Card className="h-full transition-all group-hover:shadow-md group-hover:-translate-y-0.5">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between mb-3">
                    <div
                      className="flex items-center justify-center w-12 h-12 rounded-md text-2xl"
                      style={{ backgroundColor: `${org.primaryColor}15` }}
                    >
                      {org.emoji}
                    </div>
                    <span className="text-xs text-muted-foreground">{org.industry}</span>
                  </div>
                  <h3 className="text-lg font-semibold mt-2">{org.name}</h3>
                  <p className="mt-1 text-sm text-muted-foreground italic">{org.tagline}</p>
                  <p className="mt-3 text-sm text-foreground/80 line-clamp-3">{org.blurb}</p>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </section>

      {/* INDUSTRIES */}
      <section className="border-t bg-muted/20">
        <div className="container mx-auto max-w-7xl px-6 py-20">
          <h2 className="text-3xl font-semibold tracking-tight">Diversified across {industries.length} industries</h2>
          <p className="mt-2 text-muted-foreground max-w-2xl">
            From hemp cultivation to blockchain to radio broadcasting — SAG ventures span the categories most active in Carolina’s economy.
          </p>
          <div className="mt-10 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
            {industries.map(({ industry, orgs }) => (
              <Card key={industry}>
                <CardContent className="p-5">
                  <div className="text-xs uppercase tracking-wider text-muted-foreground">{industry}</div>
                  <div className="mt-2 text-2xl font-semibold">{orgs.length}</div>
                  <div className="mt-1 text-xs text-muted-foreground line-clamp-2">
                    {orgs.map((o) => o.name).join(" · ")}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="container mx-auto max-w-7xl px-6 py-20">
        <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">
              Invest in the SAG family.
            </h2>
            <p className="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
              We’re launching Regulation Crowdfunding raises for select portfolio companies. Be the first to know when projects go live.
            </p>
            <div className="mt-8 flex justify-center gap-3 flex-wrap">
              <Button asChild size="lg" variant="brand">
                <Link href="/invest">See open raises</Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link href="/contact">Get in touch</Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </section>
    </PublicShell>
  );
}

function Stat({ label, value, hint }: { label: string; value: string; hint?: string }) {
  return (
    <div>
      <div className="text-3xl md:text-4xl font-semibold tracking-tight text-foreground">{value}</div>
      <div className="mt-1 text-sm text-muted-foreground">{label}</div>
      {hint && <div className="mt-0.5 text-xs text-muted-foreground/70">{hint}</div>}
    </div>
  );
}