import Link from "next/link";

type ServiceMeta = { label: string; description: string };

const SERVICE_META: Record<string, ServiceMeta> = {
  "/seo": {
    label: "SEO Services",
    description: "Improve rankings, drive organic traffic, and grow business with technical, on-page, and off-page SEO.",
  },
  "/web-design": {
    label: "Web Design",
    description: "Custom, responsive, and conversion-focused website design built for businesses worldwide.",
  },
  "/web-development": {
    label: "Web Development",
    description: "Secure, scalable, and high-performance websites and web applications, built to scale.",
  },
  "/app-development": {
    label: "Mobile App Development",
    description: "Native and cross-platform iOS, Android, and Flutter apps for modern business needs.",
  },
  "/digital-marketing": {
    label: "Digital Marketing",
    description: "SEO, PPC, social media, and performance marketing campaigns that drive measurable ROI.",
  },
  "/graphic-design": {
    label: "Graphic Design",
    description: "Branding, logos, marketing collateral, and visual identity that strengthen your brand.",
  },
};

interface RelatedServicesProps {
  hrefs: string[];
}

export default function RelatedServices({ hrefs }: RelatedServicesProps) {
  const items = hrefs
    .filter((h) => SERVICE_META[h])
    .map((h) => ({ href: h, ...SERVICE_META[h] }));

  return (
    <section className="py-12 md:py-16 bg-[#FAFAFA] border-t border-gray-200">
      <div className="max-w-[1200px] mx-auto px-4">
        <h2 className="text-[28px] md:text-[40px] font-bold text-[#3A3A3A] text-center Manrope">
          Explore <span className="text-[#E77025]">Related Services</span>
        </h2>
        <p className="text-center text-[#5D5D5D] mt-3 max-w-[700px] mx-auto text-[15px] md:text-[16px]">
          Combine these services with what you just explored for a complete digital strategy from Fruxinfo.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
          {items.map((it) => (
            <Link
              key={it.href}
              href={it.href}
              className="block bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-[#E77025] transition"
            >
              <h3 className="text-[18px] font-semibold text-[#3A3A3A]">{it.label}</h3>
              <p className="text-[14px] text-[#5D5D5D] mt-2 leading-relaxed">{it.description}</p>
              <span className="text-[#E77025] text-[14px] font-medium mt-3 inline-block">Learn more →</span>
            </Link>
          ))}
        </div>
        <div className="flex flex-wrap justify-center gap-x-6 gap-y-2 mt-8 text-[14px]">
          <Link href="/services" className="text-[#E77025] hover:underline">View all services</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>
      </div>
    </section>
  );
}