import Link from "next/link";

type CaseStudyMeta = { name: string; service: string; serviceName: string };

const CASE_STUDIES: Record<string, CaseStudyMeta> = {
  "/case-study-acemica":               { name: "Acemica",                service: "/web-development",  serviceName: "Web Development" },
  "/case-study-4111food":              { name: "4111 Food",              service: "/web-design",       serviceName: "Web Design" },
  "/case-study-autocarxpert":          { name: "AutoCarXpert",           service: "/web-development",  serviceName: "Web Development" },
  "/case-study-convart":               { name: "Convart",                service: "/web-development",  serviceName: "Web Development" },
  "/case-study-finflextax":            { name: "FinFlexTax",             service: "/web-development",  serviceName: "Web Development" },
  "/case-study-irisautomation":        { name: "IRIS Automation",        service: "/web-development",  serviceName: "Web Development" },
  "/case-study-medicosurg-solutions":  { name: "Medicosurg Solutions",   service: "/web-development",  serviceName: "Web Development" },
  "/case-study-megastarfoods":         { name: "Megastar Foods",         service: "/web-design",       serviceName: "Web Design" },
  "/case-study-mydoctorss":            { name: "MyDoctorss",             service: "/web-development",  serviceName: "Web Development" },
  "/case-study-myparkingtag":          { name: "My Parking Tag",         service: "/app-development",  serviceName: "Mobile App Development" },
  "/case-study-niyati-makeup":         { name: "Niyati Makeup Studio",   service: "/web-design",       serviceName: "Web Design" },
  "/case-study-promax":                { name: "Promax Card",            service: "/web-design",       serviceName: "Web Design" },
  "/case-study-rklabel":               { name: "RK Label Machines",      service: "/web-development",  serviceName: "Web Development" },
  "/case-study-shreejiprojects":       { name: "Shreeji Projects",       service: "/web-design",       serviceName: "Web Design" },
  "/case-study-shubhalay":             { name: "Shubhalay",              service: "/web-design",       serviceName: "Web Design" },
  "/case-study-soulmate-salon":        { name: "Soulmate Salon",         service: "/web-design",       serviceName: "Web Design" },
  "/case-study-twoarchitects":         { name: "Two Architects",         service: "/web-design",       serviceName: "Web Design" },
  "/case-study-winxalpha":             { name: "WinXalpha",              service: "/web-development",  serviceName: "Web Development" },
};

interface RelatedCaseStudiesProps {
  current: string;
  count?: number;
}

export default function RelatedCaseStudies({ current, count = 3 }: RelatedCaseStudiesProps) {
  const meta = CASE_STUDIES[current];
  if (!meta) return null;

  // Pick siblings: prefer same-service first, then fill from others. Rotate by current to vary order.
  const allEntries = Object.entries(CASE_STUDIES);
  const sameService = allEntries.filter(([k, v]) => k !== current && v.service === meta.service);
  const otherService = allEntries.filter(([k, v]) => k !== current && v.service !== meta.service);

  // Rotate same-service list so different case studies see different siblings
  const idx = Object.keys(CASE_STUDIES).indexOf(current);
  const rotate = <T,>(arr: T[], by: number): T[] => arr.length ? [...arr.slice(by % arr.length), ...arr.slice(0, by % arr.length)] : arr;

  const candidates = [...rotate(sameService, idx), ...rotate(otherService, idx)];
  const siblings = candidates.slice(0, count).map(([href, m]) => ({ href, ...m }));

  return (
    <section className="py-12 md:py-16 bg-[#FAFAFA] border-t border-gray-200">
      <div className="max-w-[1200px] mx-auto px-4">
        {/* Related service callout */}
        <div className="text-center mb-8">
          <h2 className="text-[26px] md:text-[36px] font-bold text-[#3A3A3A] Manrope">
            See How We Build <span className="text-[#E77025]">{meta.serviceName}</span>
          </h2>
          <p className="text-[#5D5D5D] mt-2 max-w-[700px] mx-auto text-[15px]">
            Want a project like {meta.name}? Explore our {meta.serviceName.toLowerCase()} services or browse more recent work.
          </p>
          <Link
            href={meta.service}
            className="inline-block mt-4 px-6 py-3 bg-[#E77025] text-white font-medium rounded-md hover:bg-[#C45F1F] transition"
          >
            Explore {meta.serviceName} Services
          </Link>
        </div>

        {/* Sibling case studies */}
        <h3 className="text-[20px] md:text-[24px] font-semibold text-[#3A3A3A] text-center mt-10">
          More Case Studies
        </h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
          {siblings.map((s) => (
            <Link
              key={s.href}
              href={s.href}
              className="block bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-[#E77025] transition"
            >
              <h4 className="text-[18px] font-semibold text-[#3A3A3A]">{s.name}</h4>
              <p className="text-[13px] text-[#5D5D5D] mt-1">{s.serviceName}</p>
              <span className="text-[#E77025] text-[14px] font-medium mt-3 inline-block">Read case study →</span>
            </Link>
          ))}
        </div>

        {/* Footer CTAs */}
        <div className="flex flex-wrap justify-center gap-x-6 gap-y-2 mt-8 text-[14px]">
          <Link href="/case-study" className="text-[#E77025] hover:underline">View all case studies</Link>
          <Link href="/contact" className="text-[#E77025] hover:underline">Start your project</Link>
        </div>
      </div>
    </section>
  );
}