"use client";

import type { ComponentProps, Ref } from "react";
import { PikselZemin } from "@/components/piksel-zemin";
import { cn } from "@/lib/utils";

/**
 * CTA bandı — DESIGN.md §10.8 kanonik yüzey: sitenin mavisi (`bg-primary`),
 * arka planda büyüklü küçüklü, masonry gibi kaymış ve imleç yaklaşınca
 * turuncuya ısınan piksel dokusu (`PixelMasonry`), beyaz yazı, tek turuncu buton.
 *
 * - `buyuk` (varsayılan): sayfa kapanışı / panel — ortalı, iri boşluk.
 * - `kompakt`: çekmece altı gibi dar yerler — sola yaslı, alçak.
 * - `ton="beyaz"`: aynı bant beyaz zeminde — slate kenarlık, koyu yazı,
 *   slate pikseller. Aynı sayfada üst üste iki mavi bant olmasın diye
 *   (Bilal, 24 Eyl 2026: "her kısımda mavi arka kullanmışsın, çeşitlendir").
 *   Çağıran paragraf renklerini tona göre verir (`text-white/90` ↔
 *   `text-slate-600`).
 *
 * İçerik (başlık, paragraf, buton) çağıranındır; yalnız kabuk burada durur.
 * Bilal'in kararı (24 Eyl 2026): koyu slate-950 yüzey yerine bu band.
 */
export function CtaBandi({
  children,
  className,
  seed = 8,
  boyut = "buyuk",
  ton = "mavi",
  etiket = "section",
  ref,
  ...props
}: Omit<ComponentProps<"div">, "ref"> & {
  /** Piksel dokusunun deseni; aynı sayfadaki iki band farklı olsun */
  seed?: number;
  boyut?: "buyuk" | "kompakt";
  ton?: "mavi" | "beyaz";
  /** Çekmece altı gibi başlıksız yerlerde `div` */
  etiket?: "section" | "div";
  ref?: Ref<HTMLElement>;
}) {
  const buyuk = boyut === "buyuk";
  // İki etiket de HTMLElement'tir; JSX tipi için div'e daraltılır.
  const Etiket = etiket as "div";
  return (
    <Etiket
      ref={ref as Ref<HTMLDivElement>}
      className={cn(
        "relative isolate overflow-hidden rounded-2xl",
        ton === "beyaz"
          ? "border border-slate-200 bg-white text-slate-900"
          : "bg-primary text-white",
        buyuk ? "px-5 py-8 text-center sm:p-12" : "px-5 py-4 text-left sm:py-5",
        className,
      )}
      {...props}
    >
      <PikselZemin
        seed={seed}
        ton={ton === "beyaz" ? "acik" : "koyu"}
        className={buyuk ? "-inset-y-10" : undefined}
      />
      {children}
    </Etiket>
  );
}