import type { Metadata } from "next";
import type { ReactNode } from "react";
import Link from "next/link";
import { prisma } from "@/lib/db";
import { getCurrentUser } from "@/lib/auth/dal";
import { resolvePageMetadata } from "@/lib/seo/metadata";
import { getSiteSettings } from "@/lib/settings/site-settings";
import { buildOrganizationSchema, buildWebsiteSchema } from "@/lib/seo/schema";
import { JsonLd } from "@/components/seo/JsonLd";
import { listConfessionsPreview } from "@/lib/confessions/queries";
import { listQuotesPreview, listQuoteCategories, countQuotesByCategory } from "@/lib/quotes/queries";
import { listActiveRooms } from "@/lib/rooms/queries";
import { listPopularMembers, listActiveStatusMembers } from "@/lib/members/queries";
import { getActiveHomeSections } from "@/lib/home-sections/queries";
import type { HomeSectionKey } from "@sohbetegir/db";
import { ConfessionCard } from "@/components/confessions/ConfessionCard";
import { QuoteCard } from "@/components/quotes/QuoteCard";
import { MemberCard } from "@/components/members/MemberCard";
import { StatusStoryBar } from "@/components/members/StatusStoryBar";
import { RoomCard } from "@/components/rooms/RoomCard";
import { FadeInSection } from "@/components/ui/FadeInSection";

function memberInitials(fullName: string) {
  return fullName
    .split(" ")
    .map((part) => part[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();
}

const HERO_BUBBLE_LAYOUT = [
  { top: "2%", left: "8%", size: 128, z: 3, delay: "0s", duration: "6s" },
  { top: "44%", left: "62%", size: 96, z: 2, delay: "1.1s", duration: "5s" },
  { top: "8%", left: "68%", size: 76, z: 1, delay: "0.5s", duration: "4.2s" },
  { top: "62%", left: "4%", size: 84, z: 2, delay: "1.6s", duration: "5.6s" },
];

export async function generateMetadata(): Promise<Metadata> {
  return resolvePageMetadata("/", {
    title: "Sohbet, İtiraf ve Güzel Sözler Platformu",
    description:
      "SohbeteGir.com; profilini oluştur, sohbet odalarına katıl, itiraflarını paylaş ve güzel sözleri sevdiklerinle paylaş.",
  });
}

const FEATURES = [
  {
    title: "Kişiselleştirilmiş Profil",
    description: "Anlık durum, fotoğraf galerisi ve seni anlatan tüm detaylarla profilini oluştur.",
    icon: (
      <>
        <circle cx="12" cy="8" r="4" />
        <path d="M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7" />
      </>
    ),
  },
  {
    title: "Onaylı Görsel Sistemi",
    description: "Paylaştığın tüm fotoğraflar yayına girmeden önce ekibimiz tarafından incelenir.",
    icon: (
      <>
        <rect x="3" y="5" width="18" height="14" rx="2" />
        <circle cx="8.5" cy="10.5" r="1.5" />
        <path d="M4 17l4.5-4.5L12 16l3-3 5 5" />
      </>
    ),
  },
  {
    title: "Güvenli Mesajlaşma",
    description: "Beğendiğin üyelerle özel ve güvenli bir ortamda sohbet et.",
    icon: (
      <>
        <path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" />
        <path d="M9 12l2 2 4-4" />
      </>
    ),
  },
  {
    title: "İtiraf Köşesi",
    description: "Sırlarını gizli ya da açık şekilde paylaş, istediğin üyeyi etiketle.",
    icon: (
      <>
        <rect x="5" y="11" width="14" height="9" rx="2" />
        <path d="M8 11V7a4 4 0 1 1 8 0v4" />
      </>
    ),
  },
  {
    title: "Güzel Sözler",
    description: "Günün sözünü oku, sevdiğine gönder, kategorilere göz at.",
    icon: <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z" />,
  },
  {
    title: "Sohbet Odaları",
    description: "İlgi alanına uygun odaları keşfet, yeni konulara göz at.",
    icon: (
      <>
        <rect x="6" y="3" width="12" height="18" rx="1.5" />
        <circle cx="14" cy="12" r="1" />
      </>
    ),
  },
];

const STEPS = [
  { title: "Ücretsiz Üye Ol", description: "Birkaç adımda kaydını tamamla, e-posta adresini doğrula." },
  { title: "Profilini Oluştur", description: "Fotoğraflarını ekle, anlık durumunu paylaş, kendini anlat." },
  { title: "Sohbete Başla", description: "Odalara göz at, beğen, mesajlaş, itiraf et, güzel sözler gönder." },
];

export default async function HomePage() {
  const [user, siteSettings] = await Promise.all([getCurrentUser(), getSiteSettings()]);

  const canSeeConfessions = siteSettings.confessionVisibility === "EVERYONE" || Boolean(user);

  const [
    memberCount,
    confessionCount,
    quoteCount,
    confessions,
    quotes,
    quoteCategories,
    quoteCountsByCategory,
    rooms,
    popularMembers,
    activeStatuses,
    homeSections,
  ] = await Promise.all([
    prisma.profile.count(),
    prisma.confession.count({ where: { isActive: true } }),
    prisma.quote.count({ where: { isActive: true } }),
    canSeeConfessions ? listConfessionsPreview(3, user?.id) : Promise.resolve([]),
    listQuotesPreview(9, user?.id),
    listQuoteCategories(),
    countQuotesByCategory(),
    listActiveRooms(),
    listPopularMembers(4),
    listActiveStatusMembers(8),
    getActiveHomeSections(),
  ]);

  const previewRooms = rooms.slice(0, 4);

  const sectionRenderers: Record<HomeSectionKey, ReactNode> = {
    ISTATISTIK: (
      <div key="ISTATISTIK" className="relative w-full overflow-hidden bg-ink">
        <div className="pointer-events-none absolute -top-44 left-[8%] h-[420px] w-[420px] rounded-full bg-accent opacity-35 blur-[1px] [background:radial-gradient(circle,var(--accent)_0%,transparent_70%)]" />
        <div className="pointer-events-none absolute -top-44 right-[8%] h-[420px] w-[420px] rounded-full opacity-35 [background:radial-gradient(circle,var(--accent-2)_0%,transparent_70%)]" />
        <FadeInSection className="relative mx-auto grid max-w-5xl grid-cols-2 gap-y-8 px-6 py-14 sm:grid-cols-4">
          {[
            { value: `${memberCount}+`, label: "Aktif Üye" },
            { value: `${confessionCount}+`, label: "Paylaşılan İtiraf" },
            { value: `${quoteCount}+`, label: "Güzel Söz" },
            { value: "%100", label: "Onaylı Görsel Sistemi" },
          ].map((stat) => (
            <div key={stat.label} className="text-center">
              <div className="font-heading bg-gradient-to-r from-accent to-accent-2 bg-clip-text text-[28px] text-transparent sm:text-[34px]">
                {stat.value}
              </div>
              <div className="mt-1.5 text-[12px] text-white/70 sm:text-[12.5px]">{stat.label}</div>
            </div>
          ))}
        </FadeInSection>
      </div>
    ),

    UYELER:
      activeStatuses.length > 0 || popularMembers.length > 0 ? (
        <div key="UYELER" className="relative overflow-hidden">
          <div className="pointer-events-none absolute -left-40 top-10 h-[420px] w-[420px] rounded-full bg-[radial-gradient(circle,oklch(85%_0.07_18_/_.4),transparent_70%)]" />
          <FadeInSection className="relative mx-auto max-w-5xl px-6 py-20">
            <div className="mb-9 flex flex-wrap items-end justify-between gap-4">
              <div>
                <span className="mb-3 inline-block rounded-full bg-gradient-to-r from-accent to-accent-2 px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-wide text-white">
                  Üyeler
                </span>
                <h2 className="text-[28px] leading-tight sm:text-[34px]">SohbeteGir Ailesiyle Tanış</h2>
              </div>
              <Link href="/uyeler" className="flex items-center gap-1.5 text-[14px] font-semibold text-text-muted hover:text-accent">
                Tüm Üyeleri Gör
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14M13 6l6 6-6 6" />
                </svg>
              </Link>
            </div>

            <StatusStoryBar statuses={activeStatuses} />

            {popularMembers.length > 0 && (
              <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
                {popularMembers.map((member, index) => (
                  <div key={member.id} className={index === 0 ? "col-span-2" : ""}>
                    <MemberCard member={member} featured={index === 0} />
                  </div>
                ))}
              </div>
            )}
          </FadeInSection>
        </div>
      ) : null,

    ITIRAFLAR: (
      <FadeInSection key="ITIRAFLAR" className="mx-auto max-w-5xl px-6 py-20">
        <div className="mb-9 flex flex-wrap items-end justify-between gap-4">
          <div>
            <span className="mb-3 inline-block rounded-full bg-gradient-to-r from-accent to-accent-2 px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-wide text-white">
              İtiraf Köşesi
            </span>
            <h2 className="text-[28px] leading-tight sm:text-[34px]">Sırlarını Güvenle Paylaş</h2>
          </div>
          <Link href="/itiraflar" className="flex items-center gap-1.5 text-[14px] font-semibold text-text-muted hover:text-accent">
            Tüm İtirafları Gör
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </Link>
        </div>

        {canSeeConfessions ? (
          confessions.length > 0 ? (
            <div className="grid grid-cols-1 gap-5 sm:grid-cols-3">
              {confessions.map((confession) => (
                <ConfessionCard key={confession.id} confession={confession} canLike={Boolean(user)} />
              ))}
            </div>
          ) : (
            <p className="text-center text-[13.5px] text-text-muted">Henüz itiraf paylaşılmamış.</p>
          )
        ) : (
          <div className="rounded-2xl border border-dashed border-border p-8 text-center text-[13.5px] text-text-muted">
            İtirafları görüntülemek için{" "}
            <Link href="/kayit" className="font-semibold text-accent">
              üye ol
            </Link>
            .
          </div>
        )}
      </FadeInSection>
    ),

    SOZLER: (
      <div key="SOZLER" className="bg-dot-grid w-full border-y border-border bg-bg-alt">
        <FadeInSection className="mx-auto max-w-6xl px-6 py-20">
          <div className="mb-9 text-center">
            <span className="mb-3 inline-block rounded-full bg-gradient-to-r from-accent to-accent-2 px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-wide text-white">
              Güzel Sözler
            </span>
            <h2 className="text-[28px] leading-tight sm:text-[34px]">Gönlünce Seç, Sevdiğine Gönder</h2>
          </div>

          {quotes.length > 0 ? (
            <div className="grid grid-cols-1 gap-8 lg:grid-cols-[200px_minmax(0,1fr)]">
              <aside className="lg:self-start">
                <h3 className="mb-3 px-1 text-[12px] font-bold uppercase tracking-wide text-text-muted">Kategoriler</h3>
                <nav className="flex gap-2 overflow-x-auto pb-2 lg:flex-col lg:overflow-visible lg:pb-0">
                  <Link
                    href="/sozler"
                    className="flex shrink-0 items-center justify-between gap-2 rounded-xl bg-gradient-to-r from-accent to-accent-2 px-3.5 py-2.5 text-[13.5px] font-semibold text-white shadow-[0_4px_12px_rgba(228,67,46,.25)]"
                  >
                    Tümü
                    <span className="rounded-full bg-white/20 px-1.5 py-0.5 text-[10.5px] font-bold">{quoteCount}</span>
                  </Link>
                  {quoteCategories.map((category) => (
                    <Link
                      key={category.id}
                      href={`/sozler/${category.slug}`}
                      className="flex shrink-0 items-center justify-between gap-2 rounded-xl px-3.5 py-2.5 text-[13.5px] font-semibold text-text-muted transition-colors hover:bg-surface"
                    >
                      {category.name}
                      <span className="rounded-full bg-bg-alt px-1.5 py-0.5 text-[10.5px] font-bold text-text-muted">
                        {quoteCountsByCategory.get(category.id) ?? 0}
                      </span>
                    </Link>
                  ))}
                </nav>
              </aside>

              <div className="grid grid-cols-1 items-start gap-5 self-start sm:grid-cols-3">
                {quotes.map((quote) => (
                  <QuoteCard key={quote.id} quote={quote} canSend={Boolean(user)} canLike={Boolean(user)} />
                ))}
              </div>
            </div>
          ) : (
            <p className="text-center text-[13.5px] text-text-muted">Henüz söz eklenmemiş.</p>
          )}
        </FadeInSection>
      </div>
    ),

    ODALAR:
      previewRooms.length > 0 ? (
        <div key="ODALAR" className="relative overflow-hidden">
          <div className="pointer-events-none absolute -right-32 bottom-0 h-[380px] w-[380px] rounded-full bg-[radial-gradient(circle,oklch(80%_0.08_335_/_.3),transparent_70%)]" />
          <FadeInSection className="relative mx-auto max-w-5xl px-6 py-20">
            <div className="mb-9 flex flex-wrap items-end justify-between gap-4">
              <div>
                <span className="mb-3 inline-block rounded-full bg-gradient-to-r from-accent to-accent-2 px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-wide text-white">
                  Sohbet Odaları
                </span>
                <h2 className="text-[28px] leading-tight sm:text-[34px]">İlgi Alanına Göre Bir Oda Seç</h2>
              </div>
              <Link href="/odalar" className="flex items-center gap-1.5 text-[14px] font-semibold text-text-muted hover:text-accent">
                Tüm Odaları Gör
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14M13 6l6 6-6 6" />
                </svg>
              </Link>
            </div>

            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
              {previewRooms.map((room, index) => (
                <div key={room.id} className={index === 0 ? "lg:col-span-2" : ""}>
                  <RoomCard room={room} featured={index === 0} />
                </div>
              ))}
            </div>
          </FadeInSection>
        </div>
      ) : null,

    OZELLIKLER: (
      <div key="OZELLIKLER" className="bg-dot-grid w-full border-y border-border bg-bg-alt">
        <FadeInSection className="mx-auto max-w-5xl px-6 py-20">
          <div className="mb-12 text-center">
            <span className="mb-3 inline-block rounded-full bg-gradient-to-r from-accent to-accent-2 px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-wide text-white">
              Neden SohbeteGir?
            </span>
            <h2 className="text-[28px] leading-tight sm:text-[34px]">Bir Platformda Hepsi Bir Arada</h2>
          </div>

          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {FEATURES.map((feature) => (
              <div key={feature.title} className="flex gap-4">
                <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-accent/10">
                  <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
                    {feature.icon}
                  </svg>
                </div>
                <div>
                  <h3 className="mb-1 text-[15px] font-bold">{feature.title}</h3>
                  <p className="text-[13.5px] leading-relaxed text-text-muted">{feature.description}</p>
                </div>
              </div>
            ))}
          </div>
        </FadeInSection>
      </div>
    ),

    ADIMLAR: (
      <FadeInSection key="ADIMLAR" className="mx-auto max-w-5xl px-6 py-20">
        <div className="mb-12 text-center">
          <span className="mb-3 inline-block rounded-full bg-gradient-to-r from-accent to-accent-2 px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-wide text-white">
            Nasıl Çalışır
          </span>
          <h2 className="text-[28px] leading-tight sm:text-[34px]">3 Adımda Sohbete Katıl</h2>
        </div>

        <div className="grid grid-cols-1 gap-10 sm:grid-cols-3">
          {STEPS.map((step, index) => (
            <div key={step.title} className="text-center">
              <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-accent to-accent-2 text-[20px] font-extrabold text-white shadow-[0_10px_24px_oklch(58%_0.225_18_/_.35)]">
                {index + 1}
              </div>
              <h3 className="mb-1.5 text-[16px] font-bold">{step.title}</h3>
              <p className="mx-auto max-w-[240px] text-[13.5px] leading-relaxed text-text-muted">{step.description}</p>
            </div>
          ))}
        </div>
      </FadeInSection>
    ),
  };

  return (
    <div className="relative overflow-hidden">
      <JsonLd data={buildOrganizationSchema(siteSettings)} />
      <JsonLd data={buildWebsiteSchema(siteSettings)} />

      {/* HERO */}
      <div className="relative overflow-hidden">
        <div className="pointer-events-none absolute -right-40 -top-32 h-[560px] w-[560px] rounded-full bg-[radial-gradient(circle,oklch(88%_0.06_40_/_.5),transparent_70%)]" />

        <div className="pointer-events-none absolute -bottom-24 -left-32 h-[420px] w-[420px] rounded-full bg-[radial-gradient(circle,oklch(80%_0.08_335_/_.35),transparent_70%)]" />

        <div className="relative mx-auto grid max-w-6xl grid-cols-1 items-center gap-10 px-6 py-16 sm:py-20 lg:grid-cols-[1.05fr_0.95fr] lg:py-28">
          <div className="fade-up fade-up-d1 text-center lg:text-left">
            <span className="mb-6 inline-flex items-center gap-2 rounded-full border border-border bg-bg-alt px-4 py-1.5 text-[12.5px] font-semibold text-text-muted sm:text-[13px]">
              <span className="h-2 w-2 rounded-full bg-accent" />
              Türkiye&apos;nin Yeni Nesil Sohbet Platformu
            </span>

            <h1 className="text-[36px] leading-[1.08] tracking-tight sm:text-[46px] lg:text-[56px]">
              Kalbini Aç,{" "}
              <span className="bg-gradient-to-r from-accent to-accent-2 bg-clip-text text-transparent">
                Sohbete Gir.
              </span>
            </h1>

            <p className="mx-auto mt-6 max-w-lg text-[15.5px] leading-relaxed text-text-muted sm:text-[17px] lg:mx-0">
              Profilini oluştur, kendini anlat, itiraflarını dile getir ve güzel sözleri sevdiklerinle paylaş.
            </p>

            <div className="mt-9 flex flex-wrap items-center justify-center gap-3 lg:justify-start">
              {user ? (
                <Link
                  href="/profil"
                  className="btn-glow rounded-full bg-accent px-8 py-4 text-[15.5px] font-semibold text-white hover:bg-accent-dark"
                >
                  Profilime Git
                </Link>
              ) : (
                <>
                  <Link
                    href="/kayit"
                    className="btn-glow rounded-full bg-accent px-8 py-4 text-[15.5px] font-semibold text-white hover:bg-accent-dark"
                  >
                    Ücretsiz Üye Ol
                  </Link>
                  <Link
                    href="/giris"
                    className="rounded-full border border-border bg-surface px-8 py-4 text-[15.5px] font-semibold text-text hover:border-accent"
                  >
                    Giriş Yap
                  </Link>
                </>
              )}
              <Link
                href="/odalar"
                className="rounded-full border border-border bg-surface px-8 py-4 text-[15.5px] font-semibold text-text hover:border-accent"
              >
                Odaları Keşfet
              </Link>
            </div>

            {popularMembers.length > 0 && (
              <div className="mt-10 flex items-center justify-center gap-3 lg:justify-start">
                <div className="flex -space-x-3">
                  {popularMembers.slice(0, 4).map((member) => {
                    const profile = member.profile!;
                    const cover = profile.avatarPhoto ?? member.photos[0];
                    return (
                      <span
                        key={member.id}
                        className="h-9 w-9 overflow-hidden rounded-full border-2 border-bg shadow-sm"
                        title={profile.fullName}
                      >
                        {cover ? (
                          // eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği
                          <img src={cover.thumbUrl} alt={profile.fullName} className="h-full w-full object-cover" />
                        ) : (
                          <span className="flex h-full w-full items-center justify-center bg-gradient-to-br from-accent to-accent-2 text-[10px] font-bold text-white">
                            {memberInitials(profile.fullName)}
                          </span>
                        )}
                      </span>
                    );
                  })}
                </div>
                <span className="text-[13.5px] text-text-muted">Üyeler her gün yeni sohbetler başlatıyor</span>
              </div>
            )}
          </div>

          <div className="fade-up fade-up-d2 relative mx-auto h-[260px] w-full max-w-[420px] sm:h-[420px] lg:mx-0">
            <div className="blob-pulse absolute inset-0 rounded-[32px] bg-gradient-to-br from-accent to-accent-2" />

            <div className="spin-slow pointer-events-none absolute -inset-6 rounded-full border border-dashed border-accent/25" />

            <span className="float-anim pointer-events-none absolute -left-3 top-[30%] h-5 w-5 rounded-full bg-accent-2/50 blur-[2px]" style={{ animationDelay: "0.3s", animationDuration: "4.5s" }} />
            <span className="float-anim pointer-events-none absolute -right-2 bottom-[18%] h-7 w-7 rounded-full bg-accent/40 blur-[3px]" style={{ animationDelay: "1.4s", animationDuration: "5.4s" }} />

            {popularMembers.length > 0
              ? popularMembers.slice(0, 4).map((member, index) => {
                  const layout = HERO_BUBBLE_LAYOUT[index];
                  const profile = member.profile!;
                  const cover = profile.avatarPhoto ?? member.photos[0];
                  return (
                    <Link
                      key={member.id}
                      href={`/profil/${profile.username}`}
                      className="float-anim absolute overflow-hidden rounded-full border-4 border-surface shadow-[0_16px_32px_rgba(30,15,8,.18)] transition-transform hover:scale-110"
                      style={{
                        top: layout.top,
                        left: layout.left,
                        width: layout.size,
                        height: layout.size,
                        zIndex: layout.z,
                        animationDelay: layout.delay,
                        animationDuration: layout.duration,
                      }}
                      title={profile.fullName}
                    >
                      {cover ? (
                        // eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği
                        <img src={cover.thumbUrl} alt={profile.fullName} className="h-full w-full object-cover" />
                      ) : (
                        <span
                          className="flex h-full w-full items-center justify-center bg-gradient-to-br from-accent to-accent-2 font-heading text-white"
                          style={{ fontSize: layout.size / 3.2 }}
                        >
                          {memberInitials(profile.fullName)}
                        </span>
                      )}
                    </Link>
                  );
                })
              : null}

            {activeStatuses[0]?.user.profile && (
              <div
                className="float-anim absolute bottom-4 right-0 max-w-[220px] rounded-2xl bg-surface p-4 shadow-[0_16px_32px_rgba(30,15,8,.14)]"
                style={{ animationDelay: "0.8s", animationDuration: "6s" }}
              >
                <div className="mb-1.5 flex items-center gap-1.5 text-[11.5px] font-bold text-accent">
                  <span className="relative flex h-1.5 w-1.5">
                    <span className="ping-soft absolute inline-flex h-full w-full rounded-full bg-accent" />
                    <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-accent" />
                  </span>
                  Yeni Durum
                </div>
                <p className="text-[12.5px] text-text-muted">
                  {activeStatuses[0].user.profile.fullName} yeni bir durum paylaştı
                </p>
              </div>
            )}
          </div>
        </div>
      </div>

      {homeSections.map((section) => sectionRenderers[section.key])}

      {/* FINAL CTA */}
      {!user && (
        <div className="relative w-full overflow-hidden bg-gradient-to-br from-accent to-accent-dark">
          <div className="pointer-events-none absolute -top-24 left-1/4 h-[360px] w-[360px] rounded-full bg-[radial-gradient(circle,oklch(100%_0_0_/_.15),transparent_70%)]" />
          <div className="pointer-events-none absolute -bottom-24 right-1/4 h-[360px] w-[360px] rounded-full bg-[radial-gradient(circle,oklch(100%_0_0_/_.12),transparent_70%)]" />
          <FadeInSection className="relative mx-auto max-w-xl px-6 py-20 text-center">
            <h2 className="mb-4 text-[28px] leading-tight text-white sm:text-[34px]">Sohbete Bugün Katıl</h2>
            <p className="mb-8 text-[15px] text-white/90">Ücretsiz üye ol, profilini oluştur, ilk sohbetine hemen başla.</p>
            <Link
              href="/kayit"
              className="inline-block rounded-full bg-white px-8 py-4 text-[15.5px] font-bold text-accent-dark shadow-[0_10px_28px_rgba(0,0,0,.25)] transition-transform hover:-translate-y-1 hover:bg-white/90"
            >
              Ücretsiz Üye Ol
            </Link>
          </FadeInSection>
        </div>
      )}
    </div>
  );
}