import Link from "next/link";
import { ArrowUpRight, Banknote, LineChart, Package, Truck } from "lucide-react";
import { cn } from "@/lib/utils";

const PILLARS = [
  {
    icon: Package,
    title: "Goods Procurement",
    text: "Steel & more from verified sellers",
    href: "/products",
    tone: "bg-red-50 text-[#CC1414]",
  },
  {
    icon: Banknote,
    title: "Working Capital",
    text: "Credit for manufacturers & contractors",
    href: "/credit-request",
    tone: "bg-amber-50 text-amber-600",
  },
  {
    icon: Truck,
    title: "Biznie Cargo",
    text: "Trucks & loads across India",
    href: "/logistics",
    tone: "bg-blue-50 text-blue-600",
  },
  {
    icon: LineChart,
    title: "Live Prices & News",
    text: "Daily mandi rates and market insight",
    href: "/prices",
    tone: "bg-emerald-50 text-emerald-600",
  },
];

/**
 * The four things Biznie does, pulled up over the bottom of the hero.
 * 2×2 (icon over title) on phones, one row of four on desktop.
 */
export default function PillarsStrip() {
  return (
    <section className="relative z-20 -mt-20 px-4 sm:-mt-24 sm:px-6 lg:px-8">
      <div className="mx-auto grid max-w-7xl grid-cols-2 overflow-hidden rounded-3xl bg-white shadow-[0_24px_60px_rgba(15,23,42,0.14)] ring-1 ring-slate-100 lg:grid-cols-4">
        {PILLARS.map(({ icon: Icon, title, text, href, tone }, i) => (
          <Link
            key={title}
            href={href}
            className={cn(
              "group flex flex-col items-start gap-3 border-slate-100 p-4 transition-colors hover:bg-slate-50 sm:flex-row sm:items-center sm:gap-4 sm:p-6",
              i % 2 === 1 && "border-l",
              i >= 2 && "border-t lg:border-t-0",
              i === 2 && "lg:border-l"
            )}
          >
            <span className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl sm:h-12 sm:w-12 ${tone}`}>
              <Icon size={22} aria-hidden />
            </span>
            <span className="min-w-0 flex-1">
              <span className="block text-sm font-bold leading-snug text-slate-900 group-hover:text-[#CC1414] sm:text-[15px]">
                {title}
              </span>
              <span className="mt-0.5 hidden text-[13px] leading-snug text-slate-500 sm:block">{text}</span>
            </span>
            <ArrowUpRight
              size={18}
              className="hidden shrink-0 text-slate-300 transition-all group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-[#CC1414] sm:block"
              aria-hidden
            />
          </Link>
        ))}
      </div>
    </section>
  );
}