// 🚫 NO "use client"

import Image from "next/image";
import Link from "next/link";

const SERVICE_KEYWORDS: { href: string; label: string; description: string; keywords: string[] }[] = [
  { href: "/seo",                label: "SEO Services",          description: "Improve rankings, traffic, and conversions with proven SEO.",
    keywords: ["seo", "search engine", "ranking", "google sge", "aeo", "geo"] },
  { href: "/web-design",         label: "Web Design",            description: "Custom, responsive, and conversion-focused website design.",
    keywords: ["web design", "website design", "ui ux", "ui/ux", "responsive", "figma"] },
  { href: "/web-development",    label: "Web Development",       description: "Secure, scalable websites and web apps built to grow with your business.",
    keywords: ["web development", "website development", "developer", "laravel", "next.js", "nextjs", "react", "node", "api"] },
  { href: "/app-development",    label: "Mobile App Development", description: "Native and cross-platform iOS, Android, and Flutter apps.",
    keywords: ["mobile app", "app development", "flutter", "android", "ios", "react native"] },
  { href: "/digital-marketing",  label: "Digital Marketing",     description: "PPC, social media, and performance marketing campaigns that drive ROI.",
    keywords: ["digital marketing", "ppc", "social media", "facebook ads", "google ads", "meta ads", "marketing", "performance marketing"] },
  { href: "/graphic-design",     label: "Graphic Design",        description: "Branding, logos, and marketing collateral that strengthen your brand.",
    keywords: ["graphic design", "logo", "branding", "design"] },
];

function rankRelatedServices(blog: any) {
  const haystack = `${blog?.metaKeyword || ""} ${blog?.title || ""}`.toLowerCase();
  const scored = SERVICE_KEYWORDS.map((s) => ({
    ...s,
    score: s.keywords.reduce((acc, k) => acc + (haystack.includes(k) ? 1 : 0), 0),
  }));
  scored.sort((a, b) => b.score - a.score);
  // Always return top 3 — if no scores, show generic 3 (SEO, Web Dev, Digital Marketing)
  if (scored[0].score === 0) {
    return ["/seo", "/web-development", "/digital-marketing"]
      .map((h) => SERVICE_KEYWORDS.find((s) => s.href === h)!);
  }
  return scored.slice(0, 3);
}

export default function BlogDetail({ blog }: { blog: any }) {
  const relatedServices = rankRelatedServices(blog);
  return (
    <article className="prose max-w-4xl mx-auto bg-white p-6 rounded-xl shadow-lg my-12">

      {/* Blog Image */}
      {blog.image ? (
        <Image
          src={blog.image}
          alt={blog.title}
          width={1200}
          height={600}
          className="rounded-xl mb-6 w-full h-[420px] object-cover"
        />
      ) : (
        <div className="bg-gray-200 h-48 w-full rounded-xl mb-6 flex items-center justify-center text-gray-500">
          No image available
        </div>
      )}

      {/* Title */}
      <h1 className="text-3xl font-bold mb-3">{blog.title}</h1>

      {/* Date */}
      <p className="text-xs text-gray-500 mb-6">{blog.date}</p>

      {/* Description */}
      <div
        className="prose prose-lg max-w-none text-gray-800"
        dangerouslySetInnerHTML={{ __html: blog.description }}
      />

      {/* Additional Content */}
      {blog.content && (
        <div
          className="prose prose-md max-w-none mt-8"
          dangerouslySetInnerHTML={{ __html: blog.content }}
        />
      )}

      {/* Related services + blog index links */}
      <section className="not-prose mt-12 pt-8 border-t border-gray-200">
        <h2 className="text-[22px] md:text-[28px] font-bold text-[#3A3A3A] Manrope">
          Related <span className="text-[#E77025]">Services</span>
        </h2>
        <p className="text-[14px] text-[#5D5D5D] mt-1">
          Want to put these ideas into practice? Talk to Fruxinfo Ahmedabad about:
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-5">
          {relatedServices.map((s) => (
            <Link
              key={s.href}
              href={s.href}
              className="block bg-[#FAFAFA] p-5 rounded-xl border border-gray-100 hover:border-[#E77025] hover:shadow-md transition"
            >
              <h3 className="text-[16px] font-semibold text-[#3A3A3A]">{s.label}</h3>
              <p className="text-[13px] text-[#5D5D5D] mt-1 leading-relaxed">{s.description}</p>
              <span className="text-[#E77025] text-[13px] font-medium mt-2 inline-block">Learn more →</span>
            </Link>
          ))}
        </div>
        <div className="flex flex-wrap gap-x-6 gap-y-2 mt-6 text-[14px]">
          <Link href="/blog" className="text-[#E77025] hover:underline">More articles</Link>
          <Link href="/case-study" className="text-[#E77025] hover:underline">See case studies</Link>
          <Link href="/contact" className="text-[#E77025] hover:underline">Get a free quote</Link>
        </div>
      </section>
    </article>
  );
}