import Link from "next/link";
import type { Metadata } from "next";
import { ArrowRight, Phone, MessageCircle } 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 { TrustBand } from "@/components/trust-band";
import { LogoCloud } from "@/components/logo-cloud";
import { QuickLeadForm } from "@/components/quick-lead-form";
import { WhyUs } from "@/components/why-us";
import { ProcessSteps } from "@/components/process-steps";
import { Guarantee } from "@/components/guarantee";
import { HomepageFaq } from "@/components/homepage-faq";
import { OrganizationLd } from "@/components/json-ld";
import {
  getSiteSettings,
  listProjects,
  listServices,
  listTestimonials,
} from "@/lib/data";
import { buildMetadata } from "@/lib/seo";
import { siteConfig } from "@/lib/site-config";

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(),
  ]);

  const phoneRaw = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
  const phone = settings?.contact_phone ?? siteConfig.contact.phone;
  const waCleaned = phoneRaw.replace(/[^\d]/g, "");
  const waMessage = settings?.whatsapp_message ?? "";
  const waHref = `https://wa.me/${waCleaned}${
    waMessage ? `?text=${encodeURIComponent(waMessage)}` : ""
  }`;

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

      <Hero settings={settings} />

      <TrustBand settings={settings} />

      {settings?.client_logos && settings.client_logos.length > 0 && (
        <LogoCloud logos={settings.client_logos} />
      )}

      <section className="border-b border-[var(--border)] bg-gradient-to-br from-[var(--navy-50)]/60 via-white to-[var(--sky-50)]/40 py-16">
        <div className="mx-auto grid max-w-7xl items-center gap-10 px-6 lg:grid-cols-[1.1fr_1fr]">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--sky-600)]">
              Hızlı iletişim
            </p>
            <h2 className="mt-3 text-3xl font-bold tracking-tight text-[var(--navy)] sm:text-4xl">
              Projenizi 5 dakikada konuşmaya başlayalım
            </h2>
            <p className="mt-4 text-base leading-relaxed text-[var(--muted)]">
              Ücretsiz keşif görüşmesi için bize ulaşın. WhatsApp'tan yazabilir,
              direkt arayabilir veya yandaki formu doldurabilirsiniz.
            </p>
            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
              <a
                href={`tel:${phoneRaw}`}
                className="inline-flex items-center justify-center gap-2 rounded-full bg-[var(--navy)] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[var(--navy-700)]"
              >
                <Phone className="size-4" />
                {phone}
              </a>
              <a
                href={waHref}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center justify-center gap-2 rounded-full bg-[#25D366] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[#1ebd56]"
              >
                <MessageCircle className="size-4" />
                WhatsApp'tan yazın
              </a>
            </div>
            <p className="mt-4 text-xs text-[var(--muted)]">
              Hafta içi 09:00 — 18:00 arası dakikalar içinde, dışında 24 saat içinde dönüş.
            </p>
          </div>

          <QuickLeadForm
            title={settings?.lead_form_title ?? "Ücretsiz teklif alın"}
            description={
              settings?.lead_form_description ??
              "Adınızı ve telefonunuzu bırakın, 24 saat içinde sizi arayalım."
            }
            buttonLabel="Beni arayın"
          />
        </div>
      </section>

      <section className="border-b border-[var(--border)] 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>

      <WhyUs settings={settings} />

      <Guarantee settings={settings} />

      <ProcessSteps settings={settings} />

      <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>
      )}

      <HomepageFaq settings={settings} />

      <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>
          <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <Link
              href={settings?.cta_button_href ?? "/iletisim"}
              className="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>
            <a
              href={waHref}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-full border border-white/30 px-6 py-3 text-sm font-medium text-white transition hover:bg-white/10"
            >
              <MessageCircle className="size-4" />
              WhatsApp ile yazın
            </a>
          </div>
        </div>
      </section>
    </>
  );
}