import Link from "next/link";
import {
  BookOpen,
  Mail,
  Mic,
  PenLine,
  Newspaper,
  NotebookPen,
  BookA,
  Users,
  FileStack,
  ArrowUpRight,
} from "lucide-react";

/**
 * Editorial homepage.
 *
 * Three layers, top to bottom:
 *   1. Hero  — a large serif quote attributed to Śrīla Prabhupāda + a stat
 *              strip ("36 books · 6,866 letters · 3,787 lectures · …").
 *   2. Start here — three primary entry points (Books, Letters, Lectures)
 *                   rendered as full-width feature tiles with longer copy.
 *   3. Explore   — a six-card asymmetric grid for the remaining sections.
 *
 * SiteHeader handles brand + nav + search + user menu, so this page paints
 * directly onto the background — no PageHeader needed.
 */

type Feature = {
  href: string;
  label: string;
  blurb: string;
  count?: string;
  icon: React.ComponentType<{ className?: string }>;
};

const FEATURED: Feature[] = [
  {
    href: "/books",
    label: "Books",
    blurb:
      "Bhagavad-gītā, Śrīmad-Bhāgavatam, Caitanya-caritāmṛta and 34 more — each verse with Devanāgarī, transliteration, synonyms, translation and purport.",
    count: "37 books",
    icon: BookOpen,
  },
  {
    href: "/letters",
    label: "Letters",
    blurb:
      "Three decades of personal correspondence to disciples, family, and officials. Browse by year, recipient, or location.",
    count: "6,866 letters",
    icon: Mail,
  },
  {
    href: "/transcriptions",
    label: "Lectures & Conversations",
    blurb:
      "Lectures, morning walks, room conversations, and dialogues — the living voice of the Founder-Ācārya preserved in text and audio.",
    count: "3,787 transcripts",
    icon: Mic,
  },
];

const EXPLORE: Feature[] = [
  {
    href: "/essays",
    label: "Essays",
    blurb: "Foundational standalone essays.",
    count: "23 essays",
    icon: PenLine,
  },
  {
    href: "/magazines",
    label: "Back to Godhead",
    blurb: "The original 1944 – 1973 magazine archive.",
    count: "1,124 articles",
    icon: Newspaper,
  },
  {
    href: "/journals",
    label: "Journals",
    blurb: "The Jaladuta Diary and The Beginning.",
    count: "300 entries",
    icon: NotebookPen,
  },
  {
    href: "/glossary",
    label: "Glossary",
    blurb: "Sanskrit and Vedic terms with definitions.",
    count: "2,749 terms",
    icon: BookA,
  },
  {
    href: "/disciples",
    label: "Disciples",
    blurb: "Initiated disciples 1966 – 1977.",
    count: "4,747 names",
    icon: Users,
  },
  {
    href: "/other-documents",
    label: "Other Documents",
    blurb: "Miscellaneous analyses and writings.",
    count: "12 documents",
    icon: FileStack,
  },
];

const STATS = [
  { label: "Books", value: "37" },
  { label: "Letters", value: "6,866" },
  { label: "Lectures", value: "3,787" },
  { label: "Glossary", value: "2,749" },
];

export default function Home() {
  return (
    <div className="flex-1">
      <Hero />
      <Featured />
      <Explore />
    </div>
  );
}

// ─── Hero ────────────────────────────────────────────────────────────────

function Hero() {
  return (
    <section className="max-w-5xl mx-auto px-4 sm:px-6 pt-12 sm:pt-20 pb-10 sm:pb-14">
      {/* Eyebrow */}
      <p className="uppercase tracking-[0.22em] text-xs font-medium text-muted-foreground">
        The Words of Śrīla Prabhupāda
      </p>

      {/* Hero quote — each sentence on its own line so the visual rhythm is
          predictable regardless of viewport. text-balance keeps wraps tidy. */}
      <blockquote className="mt-5 font-[family-name:var(--font-title)] font-semibold text-3xl sm:text-4xl md:text-5xl leading-[1.2] text-foreground max-w-3xl text-balance">
        <span className="block">“Books are the basis.</span>
        <span className="block">Purity is the force.</span>
        <span className="block">Preaching is the essence.</span>
        <span className="block">Utility is the principle.”</span>
      </blockquote>

      <p className="mt-6 text-base text-muted-foreground max-w-xl leading-relaxed">
        A complete, searchable library of His Divine Grace A.C. Bhaktivedanta
        Swami Prabhupāda&apos;s books, letters, lectures, and teachings — set
        in modern Unicode Sanskrit, free to read.
      </p>

      {/* Stat strip */}
      <dl className="mt-10 grid grid-cols-2 sm:grid-cols-4 gap-x-6 gap-y-4 max-w-2xl border-y border-border py-5">
        {STATS.map((s) => (
          <div key={s.label}>
            <dd className="font-[family-name:var(--font-title)] font-semibold text-2xl text-foreground tabular-nums">
              {s.value}
            </dd>
            <dt className="text-xs uppercase tracking-[0.14em] text-muted-foreground mt-0.5">
              {s.label}
            </dt>
          </div>
        ))}
      </dl>
    </section>
  );
}

// ─── Featured (3-up large tiles) ─────────────────────────────────────────

function Featured() {
  return (
    <section className="max-w-5xl mx-auto px-4 sm:px-6 py-10">
      <SectionHeading eyebrow="Start here" title="Three doors in" />
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-5">
        {FEATURED.map((f) => (
          <FeaturedTile key={f.href} feature={f} />
        ))}
      </div>
    </section>
  );
}

function FeaturedTile({ feature }: { feature: Feature }) {
  const Icon = feature.icon;
  return (
    <Link
      href={feature.href}
      className="group relative flex flex-col h-full rounded-2xl bg-card ring-1 ring-foreground/10 hover:ring-foreground/25 hover:shadow-md transition-all p-6"
    >
      <div className="flex items-start justify-between">
        <div className="flex items-center justify-center size-11 rounded-xl bg-primary/12 text-primary">
          <Icon className="size-5" />
        </div>
        <ArrowUpRight className="size-4 text-muted-foreground/60 group-hover:text-foreground transition-colors" />
      </div>

      <h3 className="mt-5 font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-[1.6rem] leading-tight text-foreground">
        {feature.label}
      </h3>

      <p className="mt-2 text-sm text-muted-foreground leading-relaxed flex-1">
        {feature.blurb}
      </p>

      {feature.count ? (
        <p className="mt-5 text-xs uppercase tracking-[0.14em] font-medium text-muted-foreground">
          {feature.count}
        </p>
      ) : null}
    </Link>
  );
}

// ─── Explore (smaller grid) ──────────────────────────────────────────────

function Explore() {
  return (
    <section className="max-w-5xl mx-auto px-4 sm:px-6 py-10 pb-16">
      <SectionHeading eyebrow="Explore" title="The wider library" />
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
        {EXPLORE.map((f) => (
          <ExploreTile key={f.href} feature={f} />
        ))}
      </div>
    </section>
  );
}

function ExploreTile({ feature }: { feature: Feature }) {
  const Icon = feature.icon;
  return (
    <Link
      href={feature.href}
      className="group flex items-start gap-4 rounded-xl bg-card/70 ring-1 ring-foreground/8 hover:ring-foreground/20 hover:bg-card transition-all p-4 sm:p-5"
    >
      <div className="flex items-center justify-center size-9 rounded-lg bg-secondary text-secondary-foreground/80 shrink-0">
        <Icon className="size-4" />
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between gap-2">
          <h4 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground leading-tight">
            {feature.label}
          </h4>
          <ArrowUpRight className="size-3.5 text-muted-foreground/50 group-hover:text-foreground transition-colors shrink-0" />
        </div>
        <p className="text-sm text-muted-foreground mt-1 leading-relaxed">
          {feature.blurb}
        </p>
        {feature.count ? (
          <p className="text-xs uppercase tracking-[0.14em] font-medium text-muted-foreground/80 mt-2">
            {feature.count}
          </p>
        ) : null}
      </div>
    </Link>
  );
}

// ─── Section heading (eyebrow + title) ───────────────────────────────────

function SectionHeading({
  eyebrow,
  title,
}: {
  eyebrow: string;
  title: string;
}) {
  return (
    <div className="mb-6 flex items-baseline gap-4">
      <span className="text-xs uppercase tracking-[0.2em] font-semibold text-muted-foreground">
        {eyebrow}
      </span>
      <span className="flex-1 h-px bg-border" />
      <h2 className="font-[family-name:var(--font-title)] font-semibold text-xl sm:text-2xl text-foreground">
        {title}
      </h2>
    </div>
  );
}