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

export const dynamic = "force-dynamic";

const serviceIcons: Record<string, React.ReactNode> = {
  "google-workspace": (
    <svg className="w-8 h-8" 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-8 h-8" 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-8 h-8" 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-8 h-8" 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 = (
  <svg className="w-8 h-8" 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 Home() {
  const [services, testimonials, settings] = await Promise.all([
    getServices(),
    getTestimonials(),
    getSettings(),
  ]);

  const stats = [
    { number: settings.stats_1_number || "50+", label: settings.stats_1_label || "Klien Puas" },
    { number: settings.stats_2_number || "100+", label: settings.stats_2_label || "Project Selesai" },
    { number: settings.stats_3_number || "5+", label: settings.stats_3_label || "Tahun Pengalaman" },
    { number: settings.stats_4_number || "24/7", label: settings.stats_4_label || "Dukungan Teknis" },
  ];

  const whyItems = [
    { title: settings.why_item1_title || "Reseller Resmi", desc: settings.why_item1_desc || "Google Workspace resmi dengan harga kompetitif" },
    { title: settings.why_item2_title || "Tim Profesional", desc: settings.why_item2_desc || "Didukung oleh tim IT berpengalaman" },
    { title: settings.why_item3_title || "Support 24/7", desc: settings.why_item3_desc || "Dukungan teknis kapan saja Anda butuhkan" },
    { title: settings.why_item4_title || "Harga Kompetitif", desc: settings.why_item4_desc || "Solusi terbaik dengan harga yang terjangkau" },
  ];

  return (
    <>
      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-brand-blue via-brand-blue-dark to-gray-900 text-white overflow-hidden">
        <div className="absolute inset-0 bg-[url('/grid.svg')] opacity-10" />
        <div className="absolute top-0 right-0 w-96 h-96 bg-brand-blue-light/20 rounded-full blur-3xl" />
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-brand-blue/30 rounded-full blur-3xl" />

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 rounded-full text-sm font-medium mb-6 backdrop-blur-sm">
              <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
              {settings.hero_badge || "Reseller Resmi Google Workspace"}
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
              {settings.hero_title || "Solusi IT Terpercaya untuk Bisnis Anda"}
            </h1>
            <p className="text-lg md:text-xl text-gray-200 mb-8 leading-relaxed">
              {settings.hero_description || "CV Cloud Point Indonesia menyediakan layanan IT komprehensif mulai dari lisensi Google Workspace, pengembangan website & aplikasi, hingga konsultasi IT profesional."}
            </p>
            <div className="flex flex-wrap gap-4">
              <Link href="/layanan" className="inline-flex items-center px-8 py-4 bg-white text-brand-blue font-semibold rounded-xl hover:bg-gray-100 transition-colors shadow-xl">
                Lihat Layanan
                <svg className="w-5 h-5 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>
              <Link href="/kontak" className="inline-flex items-center px-8 py-4 bg-transparent border-2 border-white/30 text-white font-semibold rounded-xl hover:bg-white/10 transition-colors">
                Hubungi Kami
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="bg-white border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat) => (
              <div key={stat.label} className="text-center">
                <p className="text-3xl md:text-4xl font-bold text-brand-blue">{stat.number}</p>
                <p className="text-sm text-gray-500 mt-1">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <span className="inline-block px-4 py-1.5 bg-brand-blue/10 text-brand-blue text-sm font-semibold rounded-full mb-4">
              Layanan Kami
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
              Solusi Lengkap untuk Kebutuhan IT Anda
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Kami menyediakan berbagai layanan IT untuk membantu bisnis Anda berkembang di era digital.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {services.map((service) => (
              <Link key={service.id} href={`/layanan/${service.slugId}`} className="group bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl hover:border-brand-blue/20 transition-all duration-300">
                <div className="w-14 h-14 bg-brand-blue/10 rounded-xl flex items-center justify-center text-brand-blue mb-6 group-hover:bg-brand-blue group-hover:text-white transition-colors">
                  {serviceIcons[service.slugId] || defaultIcon}
                </div>
                <h3 className="text-xl font-bold text-gray-800 mb-3">{service.nameId}</h3>
                <p className="text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3">{service.descriptionId}</p>
                <span className="inline-flex items-center text-brand-blue text-sm font-semibold group-hover:gap-2 transition-all">
                  Selengkapnya
                  <svg className="w-4 h-4 ml-1" 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>
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <span className="inline-block px-4 py-1.5 bg-brand-blue/10 text-brand-blue text-sm font-semibold rounded-full mb-4">
                Mengapa Kami?
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-6">
                {settings.why_title || "Partner IT Terpercaya untuk Bisnis Anda"}
              </h2>
              <p className="text-gray-600 mb-8 leading-relaxed">
                {settings.why_description || "Dengan pengalaman bertahun-tahun dalam industri IT, kami berkomitmen memberikan layanan terbaik untuk kesuksesan bisnis Anda."}
              </p>
              <div className="space-y-6">
                {whyItems.map((item) => (
                  <div key={item.title} className="flex items-start gap-4">
                    <div className="w-6 h-6 bg-brand-blue rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <svg className="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                      </svg>
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">{item.title}</h4>
                      <p className="text-gray-500 text-sm">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative">
              <div className="bg-gradient-to-br from-brand-blue to-brand-blue-dark rounded-3xl p-12 text-white">
                <h3 className="text-2xl font-bold mb-6">Siap Meningkatkan Produktivitas Bisnis?</h3>
                <p className="text-white/80 mb-8">Konsultasikan kebutuhan IT Anda dengan kami secara gratis.</p>
                <Link href="/kontak" className="inline-flex items-center px-8 py-4 bg-white text-brand-blue font-semibold rounded-xl hover:bg-gray-100 transition-colors">
                  Konsultasi Gratis
                  <svg className="w-5 h-5 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>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <span className="inline-block px-4 py-1.5 bg-brand-blue/10 text-brand-blue text-sm font-semibold rounded-full mb-4">
              Testimoni
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Apa Kata Klien Kami?</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">Kepuasan klien adalah prioritas utama kami.</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((item) => (
              <div key={item.id} className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
                <div className="flex items-center gap-1 mb-4">
                  {[...Array(item.rating)].map((_, i) => (
                    <svg key={i} className="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  ))}
                </div>
                <p className="text-gray-600 mb-6 leading-relaxed">&ldquo;{item.contentId}&rdquo;</p>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-brand-blue rounded-full flex items-center justify-center text-white font-bold">
                    {item.clientName.charAt(0)}
                  </div>
                  <div>
                    <p className="font-semibold text-gray-800">{item.clientName}</p>
                    <p className="text-sm text-gray-500">{item.company}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-brand-blue">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
            {settings.cta_title || "Butuh Solusi IT untuk Bisnis Anda?"}
          </h2>
          <p className="text-white/80 max-w-2xl mx-auto mb-8">
            {settings.cta_description || "Hubungi kami sekarang untuk konsultasi gratis dan dapatkan penawaran terbaik."}
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            {settings.cta_whatsapp && (
              <a href={settings.cta_whatsapp} target="_blank" rel="noopener noreferrer" className="inline-flex items-center px-8 py-4 bg-white text-brand-blue font-semibold rounded-xl hover:bg-gray-100 transition-colors shadow-xl">
                <svg className="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
                </svg>
                Chat WhatsApp
              </a>
            )}
            {settings.cta_phone && (
              <a href={`tel:${settings.cta_phone}`} className="inline-flex items-center px-8 py-4 bg-transparent border-2 border-white/30 text-white font-semibold rounded-xl hover:bg-white/10 transition-colors">
                <svg className="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                </svg>
                {settings.cta_phone}
              </a>
            )}
          </div>
        </div>
      </section>
    </>
  );
}