"use client";

/**
 * /ask — placeholder for the Kautilya AI study companion.
 *
 * The actual chat surface (an AI tuned on Śrīla Prabhupāda's books,
 * letters, and lectures) isn't built yet. Until it ships we render a
 * coming-soon page so the nav entries (sidebar + bottom bar) have a
 * real route to point at. When the feature lands, swap this file for
 * the real chat UI — nav wiring stays the same.
 */

import Link from "next/link";
import { Compass } from "lucide-react";
import { KautilyaIcon } from "@/components/selection-toolbar/shared";

export default function AskPage() {
  return (
    <main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-16 sm:py-24">
      <div className="flex flex-col items-center text-center gap-5">
        <span
          aria-hidden
          className="inline-flex size-14 items-center justify-center rounded-full bg-primary/10 text-primary"
        >
          <KautilyaIcon className="size-7" />
        </span>

        <h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-3xl text-foreground leading-tight text-balance">
          Kautilya is coming soon
        </h1>

        <p className="text-sm text-muted-foreground leading-relaxed max-w-md">
          An AI study companion tuned on Śrīla Prabhupāda&apos;s books,
          letters, and lectures — ask any question, get answers grounded in
          his own words with citations back to the source passages. Until
          it lands, the full library is already waiting.
        </p>

        <div className="flex flex-col sm:flex-row items-center gap-3 mt-2">
          <Link
            href="/search"
            className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary text-primary-foreground px-5 h-11 text-sm font-medium hover:bg-primary/90 transition-colors min-w-[12rem]"
          >
            <Compass className="size-4" />
            Explore Knowledgebase
          </Link>
        </div>
      </div>
    </main>
  );
}