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

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Layanan",
  description:
    "Layanan CV Cloud Point Indonesia: Google Workspace, Pembuatan Website, Pembuatan Aplikasi, dan Konsultasi IT.",
};

const serviceIcons: Record<string, React.ReactNode> = {
  "google-workspace": (
    <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
    </svg>
  ),
  "pembuatan-website": (
    <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 7.157A2.25 2.25 0 012.25 5.243V5.25" />
    </svg>
  ),
  "pembuatan-aplikasi": (
    <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-6 18.75h9" />
    </svg>
  ),
  "konsultasi-it": (
    <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
    </svg>
  ),
};

const defaultIcon: React.ReactNode = (
  <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" d="M11.42 15.17l-5.1-5.1m5.1 5.1L17.25 9m-5.83 6.17l5.1-5.1m-5.1 5.1L6 15.17m11.25-6l-5.1 5.1m5.1-5.1L17.25 3" />
  </svg>
);

export default async function Layanan() {
  const [services, settings] = await Promise.all([getServices(), 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.layanan_hero_title || "Layanan Kami"}</h1>
          <p className="text-xl text-white/80 max-w-2xl">
            {settings.layanan_hero_description || "Solusi IT komprehensif untuk membantu bisnis Anda berkembang di era digital."}
          </p>
        </div>
      </section>

      {/* Services List */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="space-y-20">
            {services.map((service, index) => {
              const slug = service.slugId;
              return (
                <div
                  key={service.id}
                  id={slug}
                  className={`grid lg:grid-cols-2 gap-12 items-center ${
                    index % 2 === 1 ? "lg:flex-row-reverse" : ""
                  }`}
                >
                  <div className={index % 2 === 1 ? "lg:order-2" : ""}>
                    <div className="w-16 h-16 bg-brand-blue/10 rounded-2xl flex items-center justify-center text-brand-blue mb-6">
                      {serviceIcons[slug] || defaultIcon}
                    </div>
                    <h2 className="text-3xl font-bold text-gray-800 mb-4">
                      {service.nameId}
                    </h2>
                    <p className="text-gray-600 mb-6 leading-relaxed">
                      {service.descriptionId}
                    </p>
                    {service.benefitsId && (
                      <ul className="space-y-3 mb-8">
                        {service.benefitsId.split(",").map((feature) => (
                          <li key={feature} className="flex items-center gap-3">
                            <div className="w-5 h-5 bg-brand-blue rounded-full flex items-center justify-center flex-shrink-0">
                              <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                              </svg>
                            </div>
                            <span className="text-gray-600">{feature.trim()}</span>
                          </li>
                        ))}
                      </ul>
                    )}
                    <Link
                      href="/kontak"
                      className="inline-flex items-center px-6 py-3 bg-brand-blue text-white font-semibold rounded-lg hover:bg-brand-blue-dark transition-colors"
                    >
                      Konsultasi Sekarang
                      <svg className="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                      </svg>
                    </Link>
                  </div>
                  <div className={`bg-gradient-to-br from-gray-50 to-gray-100 rounded-3xl p-12 ${index % 2 === 1 ? "lg:order-1" : ""}`}>
                    <div className="aspect-video bg-white rounded-2xl shadow-sm flex items-center justify-center">
                      <div className="text-brand-blue/30">{serviceIcons[slug] || defaultIcon}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 bg-gray-50">
        <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">Butuh Konsultasi?</h2>
          <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
            Hubungi kami untuk mendiskusikan kebutuhan IT bisnis 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">
            Hubungi Kami
          </Link>
        </div>
      </section>
    </>
  );
}