kolaytercih/src/components/rehber-kapak.tsx

type RehberKapakProps = {
  baslik: string;
  className?: string;
  compact?: boolean;
};

const VURGU_DESENLERI = [
  /^YKS Tercih Listesi/i,
  /^Ölü Tercih/i,
  /^Kaç Sıralama/i,
  /^Ek Yerleştirme/i,
  /^Taban Puan/i,
  /^YKS 2026 Tercih Takvimi/i,
  /^Devlet mi Vakıf mı\?/i,
  /^Baraj ve Başarı Sıralaması Şartları/i,
  /^TYT ile Önlisans Tercihi/i,
  /^Taban Sıralamalar/i,
];

export function rehberBasliginiBol(baslik: string) {
  const eslesme = VURGU_DESENLERI.map((desen) => baslik.match(desen)).find(
    Boolean,
  );
  const vurgu = eslesme?.[0] ?? baslik.split(/\s+/).slice(0, 3).join(" ");
  return { vurgu, kalan: baslik.slice(vurgu.length) };
}

export function rehberMetniniParcala(metin: string) {
  return metin.split(/(\d+(?:[.,]\d+)*)/g).filter(Boolean);
}

function KapakMetni({ metin }: { metin: string }) {
  return rehberMetniniParcala(metin).map((parca, i) =>
    /^\d/.test(parca) ? (
      <span key={i} className="font-bricolage font-black italic">
        {parca}
      </span>
    ) : (
      parca
    ),
  );
}

const KAPAK_PIKSELLERI = [
  [960, 50, 0.16], [980, 50, 0.28], [1020, 50, 0.12],
  [940, 70, 0.24], [980, 70, 0.12], [1000, 70, 0.3], [1060, 70, 0.18],
  [960, 90, 0.12], [1000, 90, 0.2], [1040, 90, 0.1], [1080, 90, 0.26],
  [1080, 110, 0.14], [1120, 110, 0.22], [1140, 110, 0.12],
  [60, 490, 0.12], [100, 490, 0.25], [120, 490, 0.14],
  [40, 510, 0.24], [80, 510, 0.12], [120, 510, 0.3], [160, 510, 0.16],
  [60, 530, 0.14], [100, 530, 0.22], [140, 530, 0.1], [180, 530, 0.27],
] as const;

export function RehberKapak({
  baslik,
  className = "",
  compact = false,
}: RehberKapakProps) {
  const { vurgu, kalan } = rehberBasliginiBol(baslik);
  const baslikBoyutu = compact
    ? baslik.length > 70
      ? "text-[clamp(15px,1.8vw,20px)]"
      : baslik.length > 52
        ? "text-[clamp(17px,2.1vw,23px)]"
        : "text-[clamp(19px,2.4vw,27px)]"
    : baslik.length > 70
      ? "text-[clamp(28px,4vw,48px)]"
      : baslik.length > 52
        ? "text-[clamp(32px,4.5vw,54px)]"
        : "text-[clamp(36px,5vw,62px)]";

  return (
    <div
      className={`relative isolate aspect-1200/630 w-full overflow-hidden rounded-3xl border border-[#2563eb]/15 bg-white font-bricolage text-[#2563eb] ${className}`}
      role="img"
      aria-label={`${baslik} yazı kapağı`}
    >
      <svg
        viewBox="0 0 1200 630"
        preserveAspectRatio="none"
        className="absolute inset-0 size-full text-[#2563eb]"
        aria-hidden
      >
        {KAPAK_PIKSELLERI.map(([x, y, opacity]) => (
          <rect
            key={`${x}-${y}`}
            x={x}
            y={y}
            width="14"
            height="14"
            rx="4"
            fill="currentColor"
            fillOpacity={opacity}
          />
        ))}
        <rect x="1040" y="50" width="14" height="14" rx="4" fill="#ff5a00" fillOpacity="0.8" />
        <rect x="80" y="530" width="14" height="14" rx="4" fill="#ff5a00" fillOpacity="0.8" />
      </svg>

      <div
        className={`relative flex h-full flex-col justify-between ${
          compact ? "p-[clamp(14px,2.2vw,24px)]" : "p-[clamp(20px,5vw,60px)]"
        }`}
      >
        <div className="flex items-center">
          <span
            className={`font-sans font-bold uppercase tracking-[0.2em] text-[#2563eb] ${
              compact
                ? "text-[clamp(8px,1vw,11px)]"
                : "text-[clamp(10px,1.5vw,18px)]"
            }`}
          >
            Tercih Rehberi
          </span>
        </div>

        <h2
          className={`max-w-[88%] text-balance font-heading font-light leading-[1.02] tracking-tight text-[#2563eb] ${baslikBoyutu}`}
        >
          <span className="font-bricolage font-semibold tracking-tighter text-[#ff5a00]">
            <KapakMetni metin={vurgu} />
          </span>
          {kalan ? (
            <>
              {/^\s/.test(kalan) ? " " : null}
              <KapakMetni metin={kalan.trimStart()} />
            </>
          ) : null}
        </h2>

        <div className="flex items-center justify-end gap-0.5">
          <svg
            viewBox="0 0 180 180"
            className={
              compact
                ? "size-[clamp(16px,1.8vw,22px)] shrink-0"
                : "size-[clamp(22px,3vw,38px)] shrink-0"
            }
            aria-hidden="true"
          >
            <rect x="27" y="56" width="57" height="57" rx="13" fill="#3b82f6" />
            <rect x="91" y="29" width="56" height="56" rx="13" fill="#fdc7a7" />
            <rect x="91" y="95" width="56" height="56" rx="13" fill="#ff5a00" />
          </svg>
          <span
            className={`tracking-tighter text-[#2563eb] ${
              compact
                ? "text-[clamp(10px,1.2vw,14px)]"
                : "text-[clamp(13px,2vw,24px)]"
            }`}
          >
            <span className="font-light">Kolay</span>
            <span className="font-semibold">Tercih</span>
          </span>
        </div>
      </div>
    </div>
  );
}