import type { Metadata } from "next";
import Link from "next/link";
import { getPortofolios, getSettings } from "@/lib/queries";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Portofolio",
  description:
    "Lihat portofolio proyek yang telah dikerjakan oleh CV Cloud Point Indonesia.",
};

export default async function Portofolio() {
  const [portofolios, settings] = await Promise.all([getPortofolios(), getSettings()]);

  return (
    <>
      {/* Hero */}
      <section className="bg-gradient-to-br from-brand-blue to-brand-blue-dark text-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">{settings.portofolio_hero_title || "Portofolio"}</h1>
          <p className="text-xl text-white/80 max-w-2xl">
            {settings.portofolio_hero_description || "Lihat proyek-proyek yang telah kami kerjakan."}
          </p>
        </div>
      </section>

      {/* Portfolio Grid */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {portofolios.length === 0 ? (
            <div className="text-center py-20">
              <svg className="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
              </svg>
              <p className="text-gray-500 text-lg">Belum ada portofolio</p>
            </div>
          ) : (
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {portofolios.map((item) => (
                <div key={item.id} className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-xl transition-shadow group">
                  <div className="aspect-video bg-gradient-to-br from-brand-blue/10 to-brand-blue/5 flex items-center justify-center">
                    {item.images ? (
                      <img src={item.images.split(",")[0]} alt={item.titleId} className="w-full h-full object-cover" />
                    ) : (
                      <div className="w-16 h-16 bg-brand-blue/20 rounded-2xl flex items-center justify-center text-brand-blue group-hover:scale-110 transition-transform">
                        <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
                        </svg>
                      </div>
                    )}
                  </div>
                  <div className="p-6">
                    <div className="flex items-center gap-2 mb-3">
                      {item.category && (
                        <span className="px-3 py-1 bg-brand-blue/10 text-brand-blue text-xs font-medium rounded-full">
                          {item.category}
                        </span>
                      )}
                      {item.year && (
                        <span className="text-gray-400 text-xs">{item.year}</span>
                      )}
                    </div>
                    <h3 className="text-lg font-bold text-gray-800 mb-2 group-hover:text-brand-blue transition-colors">
                      {item.titleId}
                    </h3>
                    <p className="text-gray-600 text-sm mb-4 line-clamp-2">
                      {item.descriptionId}
                    </p>
                    {item.clientName && (
                      <p className="text-gray-400 text-xs">Klien: {item.clientName}</p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold text-gray-800 mb-4">Ingin Seperti Mereka?</h2>
          <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
            Hubungi kami untuk mendiskusikan proyek Anda.
          </p>
          <Link href="/kontak" className="inline-flex items-center px-8 py-4 bg-brand-blue text-white font-semibold rounded-xl hover:bg-brand-blue-dark transition-colors">
            Mulai Proyek Anda
          </Link>
        </div>
      </section>
    </>
  );
}