"use client";

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

export default function HomePage() {
  const { theme } = useTheme();
  const { isAuthenticated, login, loading } = useAuth();

  return (
    <div className="pb-16">
      {/* Hero */}
      <section className="relative overflow-hidden border-b border-gray-100 bg-gradient-to-b from-[var(--color-primary-soft)] to-white">
        <Container className="relative py-12 sm:py-16">
          <div className="mx-auto max-w-2xl text-center">
            <Badge variant="primary" className="mb-4">
              نسل جدید SuperApp
            </Badge>
            <h1 className="text-3xl font-extrabold leading-tight text-secondary sm:text-4xl lg:text-5xl">
              {theme?.site_name ?? "Torbatyar"}
            </h1>
            <p className="mt-4 text-base leading-8 text-gray-600 sm:text-lg">
              یک پلتفرم، ده‌ها سرویس — حسابداری، CRM، فروشگاه، پیامک و بیشتر.
              همه با یک ورود واحد (SSO).
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
              {isAuthenticated ? (
                <Link href="/dashboard">
                  <Button size="lg">رفتن به داشبورد</Button>
                </Link>
              ) : (
                <Button size="lg" onClick={() => login()} loading={loading} loadingText="...">
                  ورود / ثبت‌نام
                </Button>
              )}
            </div>
          </div>
        </Container>
        <div className="pointer-events-none absolute -left-20 top-10 h-64 w-64 rounded-full bg-[var(--color-primary-muted)] blur-3xl" />
        <div className="pointer-events-none absolute -right-10 bottom-0 h-48 w-48 rounded-full bg-[var(--color-secondary-muted)] blur-3xl" />
      </section>

      {/* App Store Grid */}
      <Container className="py-10 sm:py-14">
        <AppStoreGrid />
      </Container>

      {/* Footer strip */}
      <footer className="border-t border-gray-100 bg-gray-50/80">
        <Container className="flex flex-col items-center justify-between gap-3 py-6 text-center text-sm text-gray-500 sm:flex-row sm:text-right">
          <p>
            © {new Date().getFullYear()} {theme?.site_name ?? "Torbatyar"} — White-label SaaS Platform
          </p>
          <p>{theme?.support_email ?? "support@example.com"}</p>
        </Container>
      </footer>
    </div>
  );
}