import type { Metadata } from "next";
import Link from "next/link";
import { PageHeader } from "@/components/page-header";
import { buildOgMeta } from "@/lib/og";
import {
  BookOpen,
  BrainCircuit,
  Blocks,
  Circle,
  CheckCircle2,
} from "lucide-react";

const PHASES = [
  {
    title: "Phase I — The Vedabase",
    status: "in-progress" as const,
    icon: BookOpen,
    description:
      "Indexing the complete pre-1980s Vedabase into a structured, searchable database — books, letters, essays, magazines, journals, glossary, and disciple records — with a clean, accessible reading interface.",
    highlights: [
      "Verse-by-verse editions with Devanagari, transliteration, synonyms, translations & purports",
      "6,800+ letters browsable by year, recipient, and location",
      "4,700+ initiated disciples indexed with initiation details",
      "Comprehensive glossary of 2,700+ Sanskrit & Vedic terms",
      "Accessibility features — adjustable font size, line height, and theme",
    ],
  },
  {
    title: "Phase II — AI Companion",
    status: "upcoming" as const,
    icon: BrainCircuit,
    description:
      "Training and integrating an AI companion grounded entirely in Śrīla Prabhupāda's teachings — designed to help devotees study, cross-reference, and deepen their understanding of the philosophy.",
    highlights: [
      "Answers rooted exclusively in Śrīla Prabhupāda's books and lectures",
      "Cross-referencing across books, letters, and conversations",
      "Guided study paths for new and experienced devotees",
    ],
  },
  {
    title: "Phase III — Decentralized Preservation",
    status: "upcoming" as const,
    icon: Blocks,
    description:
      "Deploying the Vedabase onto blockchain infrastructure to ensure the teachings remain permanently accessible, tamper-proof, and beyond the control of any single entity.",
    highlights: [],
  },
];

export function generateMetadata(): Metadata {
  return buildOgMeta({
    title: "About — Prabhupāda Says",
    quote:
      "Built by a small team of Prabhupādānugas — preserving and presenting the teachings of Śrīla Prabhupāda exactly as he gave them, without alteration.",
  });
}

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-background">
      <PageHeader>
        <Link
          href="/"
          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          &larr; Home
        </Link>
        <h1 className="mt-3 text-3xl font-bold text-foreground">About</h1>
        <p className="mt-1 text-muted-foreground">
          Who we are and what we&apos;re building
        </p>
      </PageHeader>

      <main className="max-w-5xl mx-auto px-6 py-10 space-y-14">
        {/* ---- Mission ---- */}
        <section className="space-y-4">
          <h2 className="text-2xl font-bold text-foreground">Our Mission</h2>
          <div className="space-y-4 text-[15px] leading-relaxed text-muted-foreground">
            <p>
              <span className="font-medium text-foreground">
                Prabhupāda Says
              </span>{" "}
              is built by a small team of Prabhupādānugas — devotees dedicated
              to preserving and presenting the teachings of His Divine Grace
              A.C. Bhaktivedanta Swami Prabhupāda exactly as he gave them,
              without alteration, reinterpretation, or institutional bias.
            </p>
            <p>
              Our sole purpose is to make Śrīla Prabhupāda&apos;s <em>vāṇī</em>{" "}
              — his words, books, letters, and instructions — freely available
              to sincere seekers everywhere, presented as faithfully as possible
              in a modern, accessible format.
            </p>
            <p>
              We are an independent project. We are not affiliated with, nor do
              we represent or promote the views of, any institution, governing
              body, or faction within the broader Vaiṣṇava community. Our work
              speaks for itself: Śrīla Prabhupāda&apos;s words, as they are.
            </p>
          </div>
        </section>

        {/* ---- Data Source ---- */}
        <section className="space-y-4">
          <h2 className="text-2xl font-bold text-foreground">About the Data</h2>
          <div className="space-y-4 text-[15px] leading-relaxed text-muted-foreground">
            <p>
              The content on this site is sourced from the{" "}
              <span className="font-medium text-foreground">
                pre-1980s Vedabase
              </span>{" "}
              — the original, unrevised collection of Śrīla Prabhupāda&apos;s
              literary and personal works compiled during and shortly after his
              physical presence.
            </p>
            <p>
              We are aware that additional letters, documents, conversations,
              and initiated disciples&apos; records were discovered in the years
              following 1980. Some of this material may not yet be reflected on
              Prabhupāda Says. We are actively working to verify, index, and
              incorporate these documents into our database as quickly and
              carefully as possible.
            </p>
            <p>
              If you have access to original documents, corrections, or
              historical information that could improve the accuracy of this
              archive, we welcome your contribution.
            </p>
          </div>
        </section>

        {/* ---- Roadmap ---- */}
        <section className="space-y-6">
          <div>
            <h2 className="text-2xl font-bold text-foreground">Roadmap</h2>
            <p className="mt-1 text-[15px] text-muted-foreground">
              Our work is organized into three phases — each building on the
              last.
            </p>
          </div>

          <div className="relative space-y-0">
            {/* Vertical timeline line */}
            <div className="absolute left-4.75 top-6 bottom-6 w-px bg-border" />

            {PHASES.map((phase, i) => {
              const Icon = phase.icon;
              const isInProgress = phase.status === "in-progress";

              return (
                <div key={i} className="relative flex gap-5 pb-10 last:pb-0">
                  {/* Timeline node */}
                  <div className="relative z-10 flex items-center justify-center size-10 shrink-0 rounded-full bg-background ring-1 ring-border">
                    {isInProgress ? (
                      <div className="relative">
                        <Icon className="size-4 text-primary" />
                        <span className="absolute -top-1 -right-1 size-2.5 rounded-full bg-primary animate-pulse" />
                      </div>
                    ) : (
                      <Icon className="size-4 text-muted-foreground" />
                    )}
                  </div>

                  {/* Content */}
                  <div className="flex-1 min-w-0 space-y-3 pt-1.5">
                    <div className="flex items-center gap-3 flex-wrap">
                      <h3 className="text-lg font-semibold text-foreground">
                        {phase.title}
                      </h3>
                      {isInProgress ? (
                        <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
                          <CheckCircle2 className="size-3" />
                          In Progress
                        </span>
                      ) : (
                        <span className="inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
                          <Circle className="size-3" />
                          Upcoming
                        </span>
                      )}
                    </div>

                    <p className="text-[15px] leading-relaxed text-muted-foreground">
                      {phase.description}
                    </p>

                    {phase.highlights.length > 0 && (
                      <ul className="space-y-1.5 text-sm text-muted-foreground">
                        {phase.highlights.map((item, j) => (
                          <li key={j} className="flex gap-2">
                            <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary/50" />
                            <span>{item}</span>
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </section>
      </main>
    </div>
  );
}