import Link from "next/link";
import { getPayload } from "payload";
import config from "@payload-config";
import { ProductCard } from "@/components/ProductCard";

export const dynamic = "force-dynamic";

export default async function HomePage() {
  const payload = await getPayload({ config });

  const { docs: featured } = await payload.find({
    collection: "products",
    limit: 8,
    sort: "-createdAt",
    depth: 1,
  });

  const { docs: categories } = await payload.find({
    collection: "categories",
    limit: 20,
    where: { parent: { exists: false } },
    sort: "name",
    depth: 0,
  });

  return (
    <>
      {/* Hero */}
      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-700 text-white">
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PHBhdGggZD0iTTM2IDE4YzMuMzEzIDAgNiAyLjY4NyA2IDZzLTIuNjg3IDYtNiA2LTYtMi42ODctNi02IDIuNjg3LTYgNi02eiIvPjwvZz48L2c+PC9zdmc+')] opacity-50" />
        <div className="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-28 lg:px-8 lg:py-36">
          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
            Финские двери
            <span className="block text-amber-400">в Москве и России</span>
          </h1>
          <p className="mt-6 max-w-xl text-lg leading-relaxed text-slate-300">
            Входные и межкомнатные двери KASKI, SWEDOOR by JELD-WEN, ALAVUS.
            Оригинальная продукция с гарантией от производителя. Работаем с 1994
            года.
          </p>
          <div className="mt-10 flex flex-wrap gap-4">
            <Link
              href="/catalog"
              className="rounded-lg bg-amber-500 px-6 py-3.5 font-semibold text-slate-900 shadow-lg shadow-amber-500/25 transition hover:bg-amber-400"
            >
              Каталог дверей
            </Link>
            <Link
              href="/contacts"
              className="rounded-lg border border-white/20 px-6 py-3.5 font-semibold text-white backdrop-blur transition hover:bg-white/10"
            >
              Контакты
            </Link>
          </div>
        </div>
      </section>

      {/* Brands bar */}
      <section className="border-b bg-white py-10">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-4 text-xl font-bold tracking-wide text-slate-300">
            {["KASKI", "SWEDOOR", "JELD-WEN", "ALAVUS", "MATTIOVI", "ABLOY"].map(
              (brand) => (
                <Link
                  key={brand}
                  href={`/catalog?brand=${brand}`}
                  className="transition hover:text-amber-600"
                >
                  {brand}
                </Link>
              ),
            )}
          </div>
        </div>
      </section>

      {/* Categories */}
      {categories.length > 0 && (
        <section className="py-16">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <h2 className="text-center text-2xl font-bold text-slate-900 sm:text-3xl">
              Категории
            </h2>
            <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {categories.map((cat) => (
                <Link
                  key={cat.id}
                  href={`/catalog?category=${cat.slug}`}
                  className="group flex items-center gap-4 rounded-xl border bg-white p-5 shadow-sm transition hover:border-amber-200 hover:shadow-md"
                >
                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-amber-50 text-amber-600 transition group-hover:bg-amber-100">
                    <svg
                      className="h-6 w-6"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={1.5}
                        d="M3.75 9.75h16.5m-16.5 0A2.25 2.25 0 015.25 7.5h13.5a2.25 2.25 0 012.25 2.25m-16.5 0v7.5A2.25 2.25 0 005.25 19.5h13.5a2.25 2.25 0 002.25-2.25v-7.5"
                      />
                    </svg>
                  </div>
                  <span className="font-semibold text-slate-900 group-hover:text-amber-600">
                    {cat.name}
                  </span>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Why Finnish doors */}
      <section className="border-t bg-slate-50 py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <h2 className="text-center text-2xl font-bold sm:text-3xl">
            Почему финские двери?
          </h2>
          <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {[
              {
                icon: "M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.047 8.287 8.287 0 009 9.601a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z",
                title: "Теплоизоляция",
                desc: "Коэффициент теплопередачи U ≤ 0,7–1,0 W/m²K — сохраняют тепло в суровом климате.",
              },
              {
                icon: "M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z",
                title: "Надёжность",
                desc: "Каркас из массива сосны, усиленный брусом LVL и листовым алюминием с двух сторон.",
              },
              {
                icon: "M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z",
                title: "Безопасность",
                desc: "Замки Abloy, противовзломные петли, силиконовый уплотнитель по периметру.",
              },
              {
                icon: "M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42",
                title: "Качество отделки",
                desc: "MDF влагостойкий, атмосферная краска. Окраска по каталогам NCS/RAL.",
              },
              {
                icon: "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z",
                title: "Гарантия",
                desc: "Оригинальная продукция от производителей с гарантией качества.",
              },
              {
                icon: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z",
                title: "Опыт с 1994",
                desc: "Более 30 лет работы с финскими дверями — знаем продукцию досконально.",
              },
            ].map((item) => (
              <div
                key={item.title}
                className="rounded-xl border bg-white p-6 shadow-sm"
              >
                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50">
                  <svg
                    className="h-5 w-5 text-amber-600"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth={1.5}
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d={item.icon}
                    />
                  </svg>
                </div>
                <h3 className="text-lg font-semibold">{item.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">
                  {item.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Featured products */}
      {featured.length > 0 && (
        <section className="py-16">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <h2 className="text-center text-2xl font-bold sm:text-3xl">
              Новые поступления
            </h2>
            <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
              {featured.map((product) => (
                <ProductCard
                  key={product.id}
                  product={{
                    id: product.id,
                    slug: product.slug,
                    name: product.name,
                    articleNumber: product.articleNumber,
                    price: product.price,
                    discountPrice: product.discountPrice,
                    availability: product.availability,
                    images: product.images as unknown[],
                  }}
                />
              ))}
            </div>
            <div className="mt-10 text-center">
              <Link
                href="/catalog"
                className="inline-flex rounded-lg bg-slate-900 px-8 py-3.5 font-semibold text-white transition hover:bg-slate-800"
              >
                Весь каталог →
              </Link>
            </div>
          </div>
        </section>
      )}

      {/* CTA */}
      <section className="border-t bg-amber-50 py-16">
        <div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold sm:text-3xl">
            Нужна консультация?
          </h2>
          <p className="mt-4 text-slate-600">
            Поможем подобрать дверь под ваш проём, рассчитаем стоимость с
            доставкой и установкой.
          </p>
          <div className="mt-8 flex flex-wrap justify-center gap-4">
            <a
              href="tel:+74957181212"
              className="rounded-lg bg-amber-500 px-6 py-3 font-semibold text-slate-900 transition hover:bg-amber-400"
            >
              +7 495 718 1212
            </a>
            <a
              href="https://wa.me/79851232828"
              target="_blank"
              rel="noopener noreferrer"
              className="rounded-lg border border-slate-300 bg-white px-6 py-3 font-semibold text-slate-900 transition hover:bg-slate-50"
            >
              WhatsApp
            </a>
          </div>
        </div>
      </section>
    </>
  );
}