import Link from "next/link";
import { notFound } from "next/navigation";
import { PublicShell } from "@/components/public/public-shell";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";
import { InvestorSignup } from "@/components/public/investor-signup";
import { PITCHES, getPitch } from "@/lib/sag/pitches";
import { formatCurrency } from "@/lib/utils";

export function generateStaticParams() {
  return PITCHES.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const p = getPitch(slug);
  return {
    title: p ? `Invest in ${p.legalEntity.replace(/, LLC$/, "")}` : "Not found",
    description: p?.oneLine,
  };
}

export default async function PitchPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const pitch = getPitch(slug);
  if (!pitch) notFound();

  const { status, storyLong, whyNow, team, use_of_funds, milestones, perks, faq, oneLine, primaryColor, emoji, legalEntity, tagline } =
    pitch;
  const pct = status.raiseGoal > 0 ? (status.currentlyRaised / status.raiseGoal) * 100 : 0;

  return (
    <PublicShell>
      {/* HERO */}
      <section className="border-b" style={{ background: `linear-gradient(135deg, ${primaryColor}15, transparent 70%)` }}>
        <div className="container mx-auto max-w-7xl px-6 py-16">
          <Link href="/invest" className="text-sm text-muted-foreground hover:text-foreground">
            ← All raises
          </Link>
          <div className="mt-6 grid lg:grid-cols-5 gap-10">
            <div className="lg:col-span-3">
              <div className="flex items-center gap-2 mb-3 flex-wrap">
                <Badge variant="warning">{status.stage}</Badge>
                <Badge variant="outline">Reg CF · planned</Badge>
                <Badge variant="secondary">{legalEntity}</Badge>
              </div>
              <h1 className="text-4xl md:text-6xl font-semibold tracking-tight">
                <span className="mr-3">{emoji}</span>
                {legalEntity.replace(/, LLC$/, "")}
              </h1>
              <p className="mt-4 text-xl text-muted-foreground italic">{tagline}</p>
              <p className="mt-5 text-lg text-foreground/85 max-w-2xl">{oneLine}</p>
            </div>
            <aside className="lg:col-span-2">
              <Card className="bg-background/80 backdrop-blur">
                <CardContent className="p-6">
                  <div className="text-xs uppercase tracking-wider text-muted-foreground">Raise target</div>
                  <div className="mt-1 text-3xl font-semibold">{formatCurrency(status.raiseGoal)}</div>
                  <div className="text-sm text-muted-foreground">Minimum to close: {formatCurrency(status.minimumRaise)}</div>
                  <Progress value={pct} className="mt-4" />
                  <div className="mt-1.5 text-xs text-muted-foreground">
                    {formatCurrency(status.currentlyRaised)} of {formatCurrency(status.raiseGoal)} pledged
                  </div>
                  <Separator className="my-5" />
                  <ul className="space-y-2.5 text-sm">
                    <Row label="Offering type">Reg CF (planned)</Row>
                    <Row label="Accredited only">{status.accreditedOnly ? "Yes" : "No"}</Row>
                    <Row label="Intermediary">{status.intermediaryPartner}</Row>
                    <Row label="Stage">{status.stage}</Row>
                  </ul>
                </CardContent>
              </Card>
            </aside>
          </div>
        </div>
      </section>

      <section className="container mx-auto max-w-3xl px-6 py-16">
        <h2 className="text-3xl font-semibold tracking-tight">The opportunity</h2>
        <div className="mt-6 space-y-5 text-lg text-foreground/85 leading-relaxed">
          {storyLong.split("\n\n").map((para, i) => (
            <p key={i} dangerouslySetInnerHTML={{ __html: para.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>") }} />
          ))}
        </div>
      </section>

      <Separator />

      <section className="container mx-auto max-w-5xl px-6 py-16">
        <h2 className="text-3xl font-semibold tracking-tight">Why now</h2>
        <div className="mt-8 grid md:grid-cols-2 gap-5">
          {whyNow.map((reason, i) => (
            <Card key={i}>
              <CardContent className="p-5 flex gap-3">
                <span className="font-mono shrink-0" style={{ color: primaryColor }}>0{i + 1}</span>
                <p className="text-sm text-foreground/85 leading-relaxed">{reason}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <Separator />

      <section className="container mx-auto max-w-5xl px-6 py-16">
        <h2 className="text-3xl font-semibold tracking-tight">Use of funds</h2>
        <p className="mt-2 text-muted-foreground">How {formatCurrency(status.raiseGoal)} gets deployed.</p>
        <div className="mt-8 space-y-3">
          {use_of_funds.map((line) => (
            <div key={line.label} className="border rounded-md p-4 bg-card">
              <div className="flex items-center justify-between text-sm font-medium">
                <span>{line.label}</span>
                <span className="font-mono tabular-nums">
                  {formatCurrency(line.amount)} <span className="text-muted-foreground font-normal">({line.percent}%)</span>
                </span>
              </div>
              <Progress value={line.percent} className="mt-2 h-1.5" />
            </div>
          ))}
        </div>
      </section>

      <Separator />

      <section className="container mx-auto max-w-5xl px-6 py-16">
        <h2 className="text-3xl font-semibold tracking-tight">Milestones</h2>
        <div className="mt-8">
          <ol className="relative space-y-6 ml-6 border-l-2 border-muted">
            {milestones.map((m, i) => (
              <li key={i} className="ml-6">
                <span className="absolute -left-2 flex w-4 h-4 items-center justify-center rounded-full text-white text-[10px]" style={{ background: primaryColor }}>
                  {i + 1}
                </span>
                <div className="text-xs font-medium" style={{ color: primaryColor }}>{m.date}</div>
                <div className="text-base font-medium mt-0.5">{m.label}</div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <Separator />

      <section className="container mx-auto max-w-5xl px-6 py-16">
        <h2 className="text-3xl font-semibold tracking-tight">Team</h2>
        <div className="mt-8 grid md:grid-cols-2 gap-5">
          {team.map((member) => (
            <Card key={member.name}>
              <CardContent className="p-6">
                <h3 className="text-lg font-semibold">{member.name}</h3>
                <p className="text-sm font-medium" style={{ color: primaryColor }}>{member.role}</p>
                <p className="mt-2 text-sm text-foreground/85">{member.bio}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <Separator />

      <section className="container mx-auto max-w-5xl px-6 py-16">
        <h2 className="text-3xl font-semibold tracking-tight">Investment perks</h2>
        <p className="mt-2 text-muted-foreground">Equity is equity. These are extras for our earliest backers.</p>
        <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {perks.map((p) => (
            <Card key={p.tier}>
              <CardContent className="p-5">
                <div className="text-2xl font-semibold">{p.tier}+</div>
                <div className="text-sm font-medium mb-3" style={{ color: primaryColor }}>{p.title}</div>
                <ul className="space-y-1.5 text-sm text-foreground/85">
                  {p.perks.map((perk, i) => (
                    <li key={i} className="flex gap-1.5">
                      <span style={{ color: primaryColor }}>·</span>
                      <span>{perk}</span>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <Separator />

      <section className="container mx-auto max-w-3xl px-6 py-16">
        <h2 className="text-3xl font-semibold tracking-tight">FAQ</h2>
        <div className="mt-8 space-y-5">
          {faq.map((item, i) => (
            <div key={i} className="border-l-2 pl-5" style={{ borderColor: primaryColor + "60" }}>
              <h3 className="text-lg font-semibold">{item.q}</h3>
              <p className="mt-2 text-foreground/85 leading-relaxed">{item.a}</p>
            </div>
          ))}
        </div>
      </section>

      {/* SIGNUP CTA */}
      <section className="container mx-auto max-w-3xl px-6 py-16">
        <div className="text-center mb-8">
          <h2 className="text-3xl font-semibold tracking-tight">Be first when the raise opens.</h2>
          <p className="mt-3 text-lg text-muted-foreground max-w-2xl mx-auto">
            We’ll email you when the SEC Form C is live and the raise opens on the funding portal.
          </p>
        </div>
        <InvestorSignup projectSlug={slug} projectName={legalEntity.replace(/, LLC$/, "")} />
        <p className="mt-6 text-xs text-center text-muted-foreground max-w-2xl mx-auto">
          This page is informational only and does not constitute an offer to sell securities. Securities are offered only through SEC Form C and a FINRA-registered intermediary.
        </p>
      </section>
    </PublicShell>
  );
}

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <li className="flex justify-between gap-3">
      <span className="text-muted-foreground">{label}</span>
      <span className="font-medium text-right">{children}</span>
    </li>
  );
}