import Link from "next/link";
import type { Metadata } from "next";
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 { TestimonialsCarousel } from "@/components/testimonials";
import {
  getSiteSettings,
  listProjects,
  listServices,
  listTestimonials,
} from "@/lib/data";
import { buildMetadata } from "@/lib/seo";

export async function generateMetadata(): Promise<Metadata> {
  return buildMetadata("/");
}

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

  return (
    <>
      <Hero settings={settings} />

      <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={settings?.services_eyebrow ?? "Ne yapıyoruz?"}
            title={settings?.services_title ?? "Uçtan uca dijital çözümler"}
            description={
              settings?.services_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={settings?.projects_eyebrow ?? "Çalışmalarımız"}
              title={settings?.projects_title ?? "Öne çıkan projeler"}
              description={
                settings?.projects_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>

      {testimonials.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={settings?.testimonials_eyebrow ?? "Referanslar"}
              title={
                settings?.testimonials_title ?? "Müşterilerimiz ne diyor?"
              }
              description={
                settings?.testimonials_description ??
                "Birlikte çalıştığımız markalardan geri bildirimler."
              }
            />
            <div className="mt-12">
              <TestimonialsCarousel items={testimonials} />
            </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">
            {settings?.cta_title ?? "Projenizi konuşalım"}
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-white/70">
            {settings?.cta_description ??
              "İhtiyacınızı dinleyip size en uygun çözümü öneren bir ekip arıyorsanız, ilk görüşme bizden."}
          </p>
          <Link
            href={settings?.cta_button_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)]"
          >
            {settings?.cta_button_label ?? "Ücretsiz keşif görüşmesi"}
            <ArrowRight className="size-4" />
          </Link>
        </div>
      </section>
    </>
  );
}