import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { Hero } from "@/components/hero";
import { SectionTitle } from "@/components/section-title";
import { ServicesGrid } from "@/components/services-grid";
import { ProjectsGrid } from "@/components/projects-grid";
import { listProjects, listServices } from "@/lib/data";

export default async function Home() {
  const [services, projects] = await Promise.all([
    listServices({ featured: true }),
    listProjects({ featured: true, limit: 6 }),
  ]);

  return (
    <>
      <Hero />

      <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="Ne yapıyoruz?"
            title="Uçtan uca dijital çözümler"
            description="Strateji, tasarım, geliştirme ve büyüme — tek bir ekip, tek bir vizyon."
          />
          <div className="mt-12">
            <ServicesGrid services={services} />
          </div>
        </div>
      </section>

      <section className="py-20">
        <div className="mx-auto max-w-7xl px-6">
          <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-end">
            <SectionTitle
              align="left"
              eyebrow="Çalışmalarımız"
              title="Öne çıkan projeler"
              description="Müşterilerimiz için tasarladığımız ve geliştirdiğimiz seçili işler."
            />
            <Link
              href="/projeler"
              className="inline-flex items-center gap-1 text-sm font-medium text-[var(--sky-600)] hover:text-[var(--navy)]"
            >
              Tümünü gör <ArrowRight className="size-4" />
            </Link>
          </div>
          <div className="mt-12">
            <ProjectsGrid projects={projects} />
          </div>
        </div>
      </section>

      <section className="relative overflow-hidden bg-[var(--navy)] py-20 text-white">
        <div className="absolute -left-20 top-0 size-96 rounded-full bg-[var(--sky)]/20 blur-3xl" aria-hidden />
        <div className="relative mx-auto max-w-4xl px-6 text-center">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
            Projenizi konuşalım
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-white/70">
            İhtiyacınızı dinleyip size en uygun çözümü öneren bir ekip arıyorsanız,
            ilk görüşme bizden.
          </p>
          <Link
            href="/iletisim"
            className="mt-8 inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-medium text-[var(--navy)] transition hover:bg-[var(--sky-50)]"
          >
            Ücretsiz keşif görüşmesi
            <ArrowRight className="size-4" />
          </Link>
        </div>
      </section>
    </>
  );
}