import Link from "next/link";
import { ArrowRight, Sparkles } from "lucide-react";
import type { SiteSettingsRow, StatItem } from "@/lib/types";

const DEFAULT_STATS: StatItem[] = [
  { value: "150+", label: "Tamamlanan proje" },
  { value: "50+", label: "Aktif müşteri" },
  { value: "100%", label: "Memnuniyet" },
  { value: "24/7", label: "Teknik destek" },
];

function parseStats(items?: string[] | null): StatItem[] {
  if (!items || items.length === 0) return DEFAULT_STATS;
  const out: StatItem[] = [];
  for (const raw of items) {
    try {
      const obj = JSON.parse(raw) as Partial<StatItem>;
      if (obj.value && obj.label) out.push({ value: obj.value, label: obj.label });
    } catch {
      /* ignore */
    }
  }
  return out.length > 0 ? out : DEFAULT_STATS;
}

export function Hero({ settings }: { settings?: SiteSettingsRow | null }) {
  const badge =
    settings?.hero_badge ?? "Kocaeli Web Tasarım & Yazılım Ajansı";
  const title =
    settings?.hero_title ??
    "Kocaeli Web Tasarım ve Yazılım Ajansı";
  const subtitle =
    settings?.hero_subtitle ??
    "Kocaeli ve İzmit'te profesyonel web tasarım, SEO optimizasyonu ve özel yazılım çözümleri. 2015'ten bu yana işletmelere dijital dönüşümde rehberlik ediyoruz.";
  const primaryLabel = settings?.hero_cta_primary_label ?? "Ücretsiz Teklif Al";
  const primaryHref = settings?.hero_cta_primary_href ?? "/iletisim";
  const secondaryLabel =
    settings?.hero_cta_secondary_label ?? "Hizmetlerimizi İnceleyin";
  const secondaryHref = settings?.hero_cta_secondary_href ?? "/hizmetler";
  const stats = parseStats(settings?.hero_stats);

  return (
    <section className="hero-dark hero-glow relative overflow-hidden">
      {/* Grid pattern overlay */}
      <div
        className="absolute inset-0 opacity-[0.04]"
        style={{
          backgroundImage:
            "radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
          backgroundSize: "32px 32px",
        }}
        aria-hidden
      />

      <div className="relative mx-auto max-w-5xl px-6 py-24 text-center md:py-32">
        <span className="inline-flex items-center gap-2 rounded-full border border-blue-400/30 bg-[#043e8c]/30 px-4 py-1.5 text-sm font-medium text-blue-300">
          <Sparkles className="size-4" />
          {badge}
        </span>

        <h1 className="mt-6 text-4xl font-extrabold leading-[1.1] tracking-tight text-white sm:text-5xl md:text-6xl">
          {title.split(" ").map((word, i, arr) => {
            // Highlight key words in blue (Web Tasarım, Yazılım)
            const highlight =
              word.toLowerCase().includes("web") ||
              word.toLowerCase().includes("tasarım") ||
              word.toLowerCase().includes("yazılım") ||
              word.toLowerCase().includes("ajansı");
            return (
              <span key={i}>
                <span className={highlight ? "text-blue-400" : undefined}>
                  {word}
                </span>
                {i < arr.length - 1 && " "}
              </span>
            );
          })}
        </h1>

        <p className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-slate-300 sm:text-lg">
          {subtitle}
        </p>

        <div className="mt-10 flex flex-col justify-center gap-3 sm:flex-row">
          <Link
            href={primaryHref}
            className="inline-flex items-center justify-center gap-2 rounded-xl bg-[var(--sky)] px-7 py-3.5 text-sm font-semibold text-white shadow-lg shadow-[var(--sky)]/30 transition hover:-translate-y-0.5 hover:bg-[var(--sky-600)] hover:shadow-xl hover:shadow-[var(--sky)]/40"
          >
            {primaryLabel}
            <ArrowRight className="size-4" />
          </Link>
          <Link
            href={secondaryHref}
            className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/20 bg-white/5 px-7 py-3.5 text-sm font-semibold text-white backdrop-blur transition hover:border-white/40 hover:bg-white/10"
          >
            {secondaryLabel}
          </Link>
        </div>
      </div>

      {/* Stats strip — pinned bottom of hero */}
      {stats.length > 0 && (
        <div className="relative border-t border-white/10 bg-black/20 backdrop-blur">
          <div className="mx-auto grid max-w-6xl grid-cols-2 gap-4 px-6 py-8 sm:grid-cols-4">
            {stats.map((stat) => (
              <div key={stat.label} className="text-center">
                <p className="text-3xl font-bold text-[var(--sky)] sm:text-4xl">
                  {stat.value}
                </p>
                <p className="mt-1 text-xs text-slate-400 sm:text-sm">
                  {stat.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      )}
    </section>
  );
}