"use client";

import Image from "next/image";
import { useCollection } from "@/hooks/useCollection";
import { COLLECTIONS } from "@/lib/firestore-paths";
import { sampleExpertise } from "@/lib/sample-expertise";
import type { ExpertiseArea } from "@/types/models";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { FadeIn } from "@/components/motion/FadeIn";
import { ExpertiseIcon } from "@/components/icons/ExpertiseIcon";
import { publicImageSrc } from "@/lib/public-image";

export default function ExpertisePage() {
  const { items } = useCollection<ExpertiseArea>(COLLECTIONS.expertise, "order", "asc");
  const list =
    items.length > 0 ? [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)) : sampleExpertise;

  return (
    <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6 lg:px-8">
      <FadeIn>
        <SectionTitle
          eyebrow="Çalışma alanları"
          title="Uzmanlık alanları"
          subtitle="Her alanda güncel mevzuat, sağlam dokümantasyon ve net iletişim ile ilerliyorum."
        />
      </FadeIn>

      <div className="mt-12 grid gap-6 sm:grid-cols-2">
        {list.map((area, i) => (
          <FadeIn key={area.id} delay={i * 0.06}>
            <article className="group flex h-full flex-col overflow-hidden rounded-2xl border border-black/5 bg-white shadow-[0_16px_50px_-24px_rgba(15,31,68,0.45)] transition duration-300 hover:-translate-y-0.5">
              <div className="relative h-48 w-full overflow-hidden bg-[#f0f2f7]">
                {area.imageUrl ? (
                  <Image
                    src={publicImageSrc(area.imageUrl)}
                    alt=""
                    fill
                    className="object-cover transition duration-500 group-hover:scale-[1.03]"
                    unoptimized
                  />
                ) : (
                  <div className="flex h-full items-center justify-center bg-gradient-to-br from-[#0f1f44] to-[#152a45]">
                    <ExpertiseIcon name={area.iconKey} className="h-14 w-14 text-[var(--gold)]" />
                  </div>
                )}
                <div className="absolute left-4 top-4 inline-flex items-center gap-2 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-[var(--navy)] shadow-sm backdrop-blur">
                  <ExpertiseIcon name={area.iconKey} className="h-4 w-4 text-[var(--gold-dark)]" />
                  {area.title}
                </div>
              </div>
              <div className="flex flex-1 flex-col p-6">
                <h2 className="font-[family-name:var(--font-display)] text-2xl text-[var(--navy)]">
                  {area.title}
                </h2>
                <p className="mt-3 flex-1 text-sm leading-relaxed text-[var(--muted)]">
                  {area.description}
                </p>
              </div>
            </article>
          </FadeIn>
        ))}
      </div>
    </div>
  );
}