import Link from "next/link";
import { ArrowRight, CheckCircle2, Lightbulb } from "lucide-react";

import type { BlogPageCopy, BlogPost } from "@/data/blogs.data";
import type { Locale } from "@/lib/locales";
import { localizedPath } from "@/lib/routes";

const productLinksByBlog: Record<string, string> = {
  "saas-real-estate-lead-management": "/products/pureestate",
  "builders-crm-erp-one-place": "/products/buildpro",
  "society-maintenance-billing-software": "/products/societypro",
  "real-estate-challenges-without-crm": "/products/pureestate",
  "digital-follow-ups-sales-conversion": "/products/pureestate",
  "connect-leads-projects-bookings-reports": "/products/buildpro",
};

const productLabelsByPath: Record<string, Record<Locale, string>> = {
  "/products/pureestate": {
    en: "Explore PureEstate CRM",
    hi: "PureEstate CRM देखें",
    gu: "PureEstate CRM જુઓ",
  },
  "/products/buildpro": {
    en: "Explore BuildPro builder CRM",
    hi: "BuildPro builder CRM देखें",
    gu: "BuildPro builder CRM જુઓ",
  },
  "/products/societypro": {
    en: "Explore SocietyPro society software",
    hi: "SocietyPro society software देखें",
    gu: "SocietyPro society software જુઓ",
  },
};

export default function BlogDetailContent({ copy, locale, post }: { copy: BlogPageCopy; locale: Locale; post: BlogPost }) {
  const productPath = productLinksByBlog[post.slug];
  const productLabel = productPath ? productLabelsByPath[productPath]?.[locale] : undefined;

  return (
    <article className="mx-auto max-w-[820px] px-6 py-12">
      {post.sections.map((section, index) => (
        <section key={section.heading} className={index === 0 ? "" : "mt-10"}>
          <h2 className="text-2xl font-extrabold tracking-[-0.04em] text-[#1b2648]">{section.heading}</h2>
          {section.paragraphs.map((paragraph) => <p key={paragraph} className="mt-4 text-[15px] leading-8 text-[#65718b]">{paragraph}</p>)}
          {section.bullets ? <div className="mt-5 space-y-3 rounded-2xl border border-[#e4e8f4] bg-[#f9faff] p-5">{section.bullets.map((bullet) => <p key={bullet} className="flex gap-2.5 text-[14px] leading-6 text-[#5f6c86]"><CheckCircle2 size={18} className="mt-1 shrink-0 text-[#5d6bea]" />{bullet}</p>)}</div> : null}
          {section.highlight ? <div className="mt-5 flex gap-3 rounded-2xl border border-[#dfe3ff] bg-gradient-to-r from-[#f5f6ff] to-[#fbfbff] p-5 text-[14px] font-semibold leading-7 text-[#59657d]"><Lightbulb size={21} className="mt-1 shrink-0 text-[#6a6fe9]" />{section.highlight}</div> : null}
        </section>
      ))}
      <aside className="mt-10 rounded-[22px] bg-gradient-to-r from-[#5867ed] to-[#7756eb] p-6 text-white shadow-[0_14px_30px_rgba(91,87,231,0.18)]">
        <h2 className="text-xl font-extrabold tracking-[-0.04em]">{copy.articleCtaTitle}</h2>
        <p className="mt-2 text-[13px] leading-6 text-[#e4e6ff]">{copy.articleCtaDescription}</p>
        <div className="mt-4 flex flex-wrap gap-3">
          {productPath && productLabel ? (
            <Link href={localizedPath(locale, productPath)} className="inline-flex items-center gap-2 rounded-lg bg-white px-4 py-2.5 text-[12px] font-bold text-[#5e63dd]">{productLabel}<ArrowRight size={14} /></Link>
          ) : null}
          <Link href={localizedPath(locale, "/products")} className="inline-flex items-center gap-2 rounded-lg border border-white/40 px-4 py-2.5 text-[12px] font-bold text-white">{copy.exploreProducts}<ArrowRight size={14} /></Link>
        </div>
      </aside>
    </article>
  );
}