import type { Metadata } from "next";
import Link from "next/link";
import { prisma } from "@/lib/db";
import { encodeCheckoutToken } from "@/lib/checkout";
import ToolsExplorer from "@/components/ToolsExplorer";

export const revalidate = 300;

export const metadata: Metadata = {
  title: "Private Tools — Dedicated Personal Accounts",
  description:
    "No more shared accounts! Enjoy 100% private access to premium tools like ChatGPT, Claude AI, and Adobe CC—all on your personal email.",
};

export default async function PrivateToolsPage() {
  const tools = await prisma.tool.findMany({
    where: { isPrivate: true },
    include: { category: true },
    orderBy: { sortOrder: "asc" },
  });

  return (
    <>
      <section className="relative overflow-hidden border-b border-slate-100 bg-gradient-to-b from-violet-50/70 to-white py-16">
        <div className="pointer-events-none absolute -right-20 top-0 h-64 w-64 rounded-full bg-violet-200/40 blur-3xl animate-blob" />
        <div className="relative mx-auto grid max-w-7xl items-center gap-10 px-4 sm:px-6 lg:grid-cols-2 lg:px-8">
          <div>
            <span className="inline-block rounded-full border border-violet-200 bg-white px-4 py-1.5 text-xs font-semibold text-violet-600 shadow-sm">
              Premium Private Access
            </span>
            <h1 className="mt-5 text-4xl font-extrabold leading-tight tracking-tight text-slate-900 sm:text-5xl">
              Unlock Premium Power: <br />
              <span className="bg-gradient-to-r from-violet-600 to-brand-600 bg-clip-text text-transparent">
                Your Own Private Access
              </span>
            </h1>
            <p className="mt-4 max-w-xl leading-relaxed text-slate-500">
              No more shared accounts! Enjoy 100% private access to premium tools like ChatGPT,
              Claude AI, and Adobe CC—all on your personal email.
            </p>
            <div className="mt-6 flex flex-wrap gap-5 text-sm font-semibold text-slate-600">
              <span className="flex items-center gap-1.5">📧 Own Email Activation</span>
              <span className="flex items-center gap-1.5">🔒 100% Dedicated</span>
              <span className="flex items-center gap-1.5">⚡ Instant Delivery</span>
            </div>
          </div>
          <div className="hidden justify-center lg:flex">
            <div className="relative h-72 w-72">
              <div className="absolute inset-6 animate-float-soft rounded-[2.5rem] bg-gradient-to-br from-violet-500 via-brand-500 to-indigo-600 shadow-2xl shadow-violet-500/30">
                <div className="flex h-full items-center justify-center text-8xl" aria-hidden>
                  🔐
                </div>
              </div>
              <div className="absolute -left-2 top-8 animate-float-medium rounded-2xl bg-white px-4 py-3 text-sm font-semibold text-slate-700 shadow-lg" style={{ ["--base-rotate" as string]: "-6deg" }}>
                📧 Own Email
              </div>
              <div className="absolute -right-4 top-24 animate-float-medium rounded-2xl bg-white px-4 py-3 text-sm font-semibold text-slate-700 shadow-lg" style={{ ["--base-rotate" as string]: "5deg", animationDelay: "0.6s" }}>
                👤 100% Private
              </div>
              <div className="absolute bottom-4 left-6 animate-float-medium rounded-2xl bg-white px-4 py-3 text-sm font-semibold text-slate-700 shadow-lg" style={{ ["--base-rotate" as string]: "3deg", animationDelay: "1.2s" }}>
                ⚡ Instant Delivery
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="bg-white py-10">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col items-center justify-between gap-6 rounded-3xl bg-gradient-to-r from-violet-600 to-brand-600 px-8 py-10 text-center sm:flex-row sm:text-left">
            <div>
              <p className="text-sm font-semibold text-violet-100">Smart Savings Intuition</p>
              <h2 className="mt-2 text-2xl font-extrabold text-white">
                Better Together: The Bundle System
              </h2>
              <p className="mt-2 max-w-2xl text-sm text-violet-100">
                Why settle for just one? Combine multiple premium tools into a single customized
                plan and save up to 40% every month. Professional power, consolidated price.
              </p>
              <p className="mt-3 text-xs font-semibold text-violet-100">
                Instant Activation • Budget Friendly
              </p>
            </div>
            <Link
              href="/packages/"
              className="shrink-0 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-violet-700 shadow-lg transition-transform hover:scale-105"
            >
              Explore Bundle Plans
            </Link>
          </div>
        </div>
      </section>

      <section className="bg-white pb-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <ToolsExplorer
            tools={tools.map((t) => ({
              name: t.name,
              slug: t.slug,
              price: t.price,
              period: t.period,
              iconUrl: t.iconUrl,
              badge: t.badge,
              categoryName: t.category?.name ?? null,
              checkoutToken: encodeCheckoutToken({ type: "tool", id: t.id }),
            }))}
            categories={[]}
          />
        </div>
      </section>
    </>
  );
}