import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { ParticlesBackground } from "@/components/ParticlesBackground";
import { FileText, ScrollText } from "lucide-react";

type LegalSection = {
  heading: string;
  paragraphs: string[];
};

type LegalDocumentPageProps = {
  title: string;
  subtitle: string;
  sections: LegalSection[];
};

function makeSectionId(heading: string, index: number) {
  const normalized = heading
    .toLowerCase()
    .replace(/[^a-zа-я0-9]+/gi, "-")
    .replace(/^-+|-+$/g, "");
  return normalized ? `${normalized}-${index + 1}` : `section-${index + 1}`;
}

export function LegalDocumentPage({ title, subtitle, sections }: LegalDocumentPageProps) {
  return (
    <div className="relative min-h-screen">
      <ParticlesBackground />
      <Navbar />

      <main className="relative z-10 px-4 pb-16 pt-28 sm:pb-20">
        <div className="mx-auto max-w-7xl">
          <section className="mb-5 rounded-2xl border border-gekon-green/20 bg-gradient-to-br from-background/95 via-background/85 to-background/95 p-6 shadow-[0_0_0_1px_rgba(16,185,129,0.06)] sm:p-8">
            <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-gekon-green/30 bg-gekon-green/10 px-3 py-1 text-xs font-medium text-gekon-green">
              <FileText size={14} />
              Юридический документ
            </div>
            <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">{title}</h1>
            <p className="mt-3 max-w-4xl text-sm leading-relaxed text-muted-foreground sm:text-base">{subtitle}</p>
          </section>

          <div className="grid gap-5 lg:grid-cols-[280px_minmax(0,1fr)]">
            <aside className="h-fit rounded-2xl border border-border bg-background/75 p-4 lg:sticky lg:top-24">
              <h2 className="mb-3 inline-flex items-center gap-2 text-sm font-semibold text-foreground">
                <ScrollText size={16} />
                Содержание
              </h2>
              <nav className="space-y-1.5">
                {sections.map((section, index) => {
                  const id = makeSectionId(section.heading, index);
                  return (
                    <a
                      key={id}
                      href={`#${id}`}
                      className="block rounded-lg px-2.5 py-2 text-sm text-muted-foreground transition-colors hover:bg-gekon-green/10 hover:text-foreground"
                    >
                      {section.heading}
                    </a>
                  );
                })}
              </nav>
            </aside>

            <section className="space-y-4">
              {sections.map((section, index) => {
                const id = makeSectionId(section.heading, index);
                return (
                  <article
                    id={id}
                    key={id}
                    className="scroll-mt-24 rounded-2xl border border-gekon-green/15 bg-gradient-to-br from-background/90 via-background/75 to-background/90 p-5 shadow-[0_0_0_1px_rgba(16,185,129,0.05)] transition-all hover:border-gekon-green/30 hover:shadow-[0_10px_28px_rgba(16,185,129,0.12)] sm:p-6"
                  >
                    <h3 className="text-lg font-semibold text-foreground sm:text-xl">{section.heading}</h3>
                    <div className="mt-3 space-y-3">
                      {section.paragraphs.map((paragraph) => (
                        <p key={paragraph} className="text-sm leading-relaxed text-muted-foreground sm:text-[15px]">
                          {paragraph}
                        </p>
                      ))}
                    </div>
                  </article>
                );
              })}
            </section>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  );
}