import type { Metadata } from "next";
import { getSettings } from "@/lib/queries";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Tentang Kami",
  description:
    "Kenali lebih jauh CV Cloud Point Indonesia, partner IT terpercaya Anda.",
};

const valueIcons = [
  <svg key="v1" className="w-8 h-8" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
  </svg>,
  <svg key="v2" className="w-8 h-8" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" d="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" />
  </svg>,
  <svg key="v3" className="w-8 h-8" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
  </svg>,
  <svg key="v4" className="w-8 h-8" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
  </svg>,
];

export default async function TentangKami() {
  const settings = await getSettings();

  const values = [
    { title: settings.about_value1_title || "Profesional", description: settings.about_value1_desc || "Kami selalu menjaga standar profesionalisme dalam setiap pekerjaan." },
    { title: settings.about_value2_title || "Terpercaya", description: settings.about_value2_desc || "Kepercayaan klien adalah aset terbesar kami." },
    { title: settings.about_value3_title || "Inovatif", description: settings.about_value3_desc || "Kami selalu menghadirkan solusi terbaru dan terbaik." },
    { title: settings.about_value4_title || "Berkomitmen", description: settings.about_value4_desc || "Kami berkomitmen untuk memberikan yang terbaik bagi klien." },
  ];

  const team = [
    { name: settings.about_team1_name || "Tim Pengembangan", role: settings.about_team1_role || "Website & Aplikasi", description: settings.about_team1_desc || "Tim developer berpengalaman dalam pengembangan website dan aplikasi.", photo: settings.about_team1_photo || "" },
    { name: settings.about_team2_name || "Tim Support", role: settings.about_team2_role || "Dukungan Teknis", description: settings.about_team2_desc || "Siap membantu Anda kapan saja dengan layanan support 24/7.", photo: settings.about_team2_photo || "" },
    { name: settings.about_team3_name || "Tim Konsultasi", role: settings.about_team3_role || "IT Consulting", description: settings.about_team3_desc || "Ahli IT yang siap membantu transformasi digital bisnis Anda.", photo: settings.about_team3_photo || "" },
  ];

  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.about_hero_title || "Tentang Kami"}</h1>
          <p className="text-xl text-white/80 max-w-2xl">
            {settings.about_hero_description || "Mengenal lebih jauh CV Cloud Point Indonesia"}
          </p>
        </div>
      </section>

      {/* Company Profile */}
      <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">
                Profil Perusahaan
              </span>
              <h2 className="text-3xl font-bold text-gray-800 mb-6">
                {settings.company_name || "CV Cloud Point Indonesia"}
              </h2>
              <div className="space-y-4 text-gray-600 leading-relaxed">
                <p>{settings.about_profile_p1 || "CV Cloud Point Indonesia adalah perusahaan yang bergerak di bidang layanan teknologi informasi (IT) yang berlokasi di Sidoarjo, Jawa Timur. Kami adalah reseller resmi Google Workspace yang menyediakan berbagai solusi IT untuk bisnis Anda."}</p>
                <p>{settings.about_profile_p2 || "Dengan pengalaman dan tim profesional yang kami miliki, kami berkomitmen untuk memberikan layanan terbaik kepada klien kami. Layanan kami meliputi penjualan lisensi Google Workspace, pembuatan website, pengembangan aplikasi, serta konsultasi IT."}</p>
                <p>{settings.about_profile_p3 || "Visi kami adalah menjadi partner IT terpercaya yang membantu bisnis Anda berkembang di era digital dengan solusi teknologi yang tepat guna dan inovatif."}</p>
              </div>
            </div>
            <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-8">Informasi Perusahaan</h3>
              <div className="space-y-6">
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                    </svg>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">Alamat</p>
                    <p className="text-white/80 text-sm">
                      {settings.company_address_id || "Jl. Semeru CD 3 Kepuh Permai Waru, Sidoarjo 61256, Jawa Timur - Indonesia"}
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} 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>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">Telepon</p>
                    <a href={`tel:${settings.company_phone || "08563372278"}`} className="text-white/80 text-sm hover:text-white">
                      {settings.company_phone || "08563372278"}
                    </a>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg className="w-5 h-5" 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>
                  </div>
                  <div>
                    <p className="font-semibold mb-1">Email</p>
                    <a href={`mailto:${settings.company_email || "info@cloudpoint.co.id"}`} className="text-white/80 text-sm hover:text-white">
                      {settings.company_email || "info@cloudpoint.co.id"}
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <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">
              Nilai Kami
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
              Nilai-Nilai yang Kami Anut
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {values.map((value, index) => (
              <div key={index} className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 text-center">
                <div className="w-14 h-14 bg-brand-blue/10 rounded-xl flex items-center justify-center text-brand-blue mx-auto mb-6">
                  {valueIcons[index]}
                </div>
                <h3 className="text-xl font-bold text-gray-800 mb-3">{value.title}</h3>
                <p className="text-gray-600 text-sm">{value.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="py-20 bg-white">
        <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">
              Tim Kami
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
              Tim Profesional Kami
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Didukung oleh tim yang berpengalaman dan profesional di bidangnya.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {team.map((item, index) => (
              <div key={index} className="bg-gray-50 p-8 rounded-2xl text-center">
                {item.photo ? (
                  <img src={item.photo} alt={item.name} className="w-20 h-20 rounded-full object-cover mx-auto mb-6 border-2 border-white shadow-sm" />
                ) : (
                  <div className="w-20 h-20 bg-brand-blue rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6">
                    {item.name.charAt(0)}
                  </div>
                )}
                <h3 className="text-xl font-bold text-gray-800 mb-2">{item.name}</h3>
                <p className="text-brand-blue text-sm font-medium mb-3">{item.role}</p>
                <p className="text-gray-600 text-sm">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}