import type { Metadata } from "next";
import Image from "next/image";
import { SectionTitle } from "@/components/section-title";
import { CheckCircle2 } from "lucide-react";
import { TeamGrid } from "@/components/team-grid";
import { listTeamMembers } from "@/lib/data";
import { buildMetadata } from "@/lib/seo";

export async function generateMetadata(): Promise<Metadata> {
  return buildMetadata("/hakkimizda", {
    title: "Hakkımızda",
    description:
      "Kovak Yazılım, Kocaeli merkezli bir teknoloji ajansıdır. Web, mobil ve CRM çözümleri üretir.",
  });
}

const values = [
  {
    title: "Uçtan uca üretim",
    description:
      "Fikir aşamasından lansmana, lansman sonrası bakıma kadar tek bir ekip.",
  },
  {
    title: "Ölçülebilir sonuç",
    description:
      "Her projeyi performans, dönüşüm ve kullanıcı deneyimi metrikleriyle değerlendiriyoruz.",
  },
  {
    title: "Şeffaf süreç",
    description:
      "Her sprint demo ile başlar, her engel açıkça konuşulur. Sürprize yer yok.",
  },
  {
    title: "Uzun vadeli ortaklık",
    description:
      "Proje biter, iş büyür. Bakım ve geliştirme süreçlerinde yanınızdayız.",
  },
];

export default async function AboutPage() {
  const team = await listTeamMembers();

  return (
    <>
      <section className="mx-auto max-w-7xl px-6 py-20">
        <div className="grid items-center gap-12 md:grid-cols-2">
          <div>
            <SectionTitle
              align="left"
              eyebrow="Hakkımızda"
              title="Kocaeli'den dünyaya dijital ürünler"
              description="Kovak Yazılım, kurumsal markalardan girişimlere kadar geniş bir yelpazedeki müşterileri için web, mobil ve CRM çözümleri üretir. Hızlı, ölçeklenebilir ve estetik."
            />

            <ul className="mt-10 space-y-4">
              {values.map((v) => (
                <li key={v.title} className="flex gap-3">
                  <CheckCircle2 className="mt-1 size-5 shrink-0 text-[var(--sky-600)]" />
                  <div>
                    <p className="font-semibold text-[var(--navy)]">{v.title}</p>
                    <p className="text-sm text-[var(--muted)]">{v.description}</p>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          <div className="relative">
            <div className="absolute inset-0 -z-10 rounded-3xl bg-gradient-to-br from-[var(--sky-50)] to-[var(--navy-50)]" />
            <div className="flex aspect-square items-center justify-center p-12">
              <Image
                src="/logo.png"
                alt="Kovak Yazılım"
                width={400}
                height={400}
                className="size-full object-contain drop-shadow-xl"
              />
            </div>
          </div>
        </div>
      </section>

      {team.length > 0 && (
        <section className="border-y border-[var(--border)] bg-[var(--navy-50)]/40 py-20">
          <div className="mx-auto max-w-7xl px-6">
            <SectionTitle
              eyebrow="Ekip"
              title="İşi yapan insanları tanıyın"
              description="Sizin projenizde birebir çalışacak ekip — geliştirici, tasarımcı ve proje yöneticileri."
            />
            <div className="mt-12">
              <TeamGrid members={team} />
            </div>
          </div>
        </section>
      )}

      <section className="bg-[var(--navy)] py-20 text-white">
        <div className="mx-auto grid max-w-7xl gap-12 px-6 md:grid-cols-3">
          {[
            { value: "50+", label: "Tamamlanan proje" },
            { value: "30+", label: "Mutlu müşteri" },
            { value: "10+", label: "Yıllık deneyim" },
          ].map((s) => (
            <div key={s.label} className="text-center">
              <p className="text-5xl font-bold">{s.value}</p>
              <p className="mt-2 text-sm text-white/70">{s.label}</p>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}