"use client";

import Link from "next/link";
import { Button, Container } from "@/components/ui";
import { useAuth } from "@/hooks/useAuth";

const GUIDES = [
  {
    title: "شروع سریع",
    body: "از کشف کسب‌وکار تا ساخت workspace و داشبورد.",
    href: "/discover",
    cta: "شروع ارزیابی",
  },
  {
    title: "Trial و اشتراک",
    body: "فعال‌سازی trial، مشاهده مصرف، ارتقا و فاکتورها.",
    href: "/billing",
    cta: "رفتن به Billing",
  },
  {
    title: "دامنه و SSL",
    body: "زیردامنه پلتفرم، اتصال دامنه اختصاصی پس از entitlement.",
    href: "/domains",
    cta: "مدیریت دامنه",
  },
  {
    title: "راه‌اندازی محصولات",
    body: "هر محصول ویزارد اولین اجرا دارد — از Apps → راه‌اندازی.",
    href: "/apps",
    cta: "Apps Launcher",
  },
];

export default function HelpPage() {
  const { isAuthenticated, login, loading } = useAuth();

  return (
    <Container className="py-12">
      <h1 className="text-3xl font-extrabold text-secondary dark:text-gray-100">مرکز راهنما</h1>
      <p className="mt-2 max-w-2xl text-sm text-gray-600 dark:text-gray-400">
        راهنمای onboarding، trial، دامنه و راه‌اندازی محصولات — بدون صفحه خالی.
      </p>

      <div className="mt-10 grid gap-6 sm:grid-cols-2">
        {GUIDES.map((g) => (
          <article
            key={g.href}
            className="rounded-2xl border border-gray-100 bg-white p-5 dark:border-gray-800 dark:bg-gray-900"
          >
            <h2 className="text-lg font-bold text-secondary dark:text-gray-100">{g.title}</h2>
            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{g.body}</p>
            <Link href={g.href} className="mt-4 inline-block text-sm font-semibold text-primary">
              {g.cta} →
            </Link>
          </article>
        ))}
      </div>

      <section className="mt-12 rounded-3xl border border-gray-100 bg-[var(--color-primary-soft)] p-6 dark:border-gray-800">
        <h2 className="text-xl font-bold text-secondary dark:text-gray-100">پشتیبانی</h2>
        <p className="mt-2 text-sm text-gray-700 dark:text-gray-300">
          برای پشتیبانی سازمانی از طریق Admin تجاری یا ایمیل پشتیبانی پلتفرم اقدام کنید. تا زمان
          اتصال تیکتینگ، از مسیرهای بالا برای رفع بن‌بست استفاده کنید.
        </p>
        <div className="mt-4 flex flex-wrap gap-2">
          {!isAuthenticated ? (
            <Button loading={loading} onClick={() => login()}>
              ورود برای ادامه
            </Button>
          ) : (
            <Link href="/dashboard">
              <Button>داشبورد</Button>
            </Link>
          )}
          <Link href="/search">
            <Button variant="outline">جستجوی سراسری</Button>
          </Link>
        </div>
      </section>
    </Container>
  );
}