import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight, Banknote, Bot, LineChart, Mic, Newspaper, Package, Truck, type LucideIcon } from "lucide-react";
import Reveal from "@/components/home/Reveal";
import { ABOUT_IMAGES } from "@/lib/about/images";
import { HOME_IMAGES } from "@/lib/home/images";
import { cn } from "@/lib/utils";

type Tile = {
  key: string;
  icon: LucideIcon;
  title: string;
  text: string;
  href: string;
  image: string;
  alt: string;
  span: string;
  large?: boolean;
};

const TILES: Tile[] = [
  {
    key: "goods",
    icon: Package,
    title: "Biznie Goods",
    text: "Raw materials and finished goods — MS TMT, angles, channels, pipes, round and square bars, flats, billets, sponge iron and more.",
    href: "/products",
    image: HOME_IMAGES.heroTmt,
    alt: "Stacked TMT reinforcement bars",
    span: "col-span-2 row-span-2",
    large: true,
  },
  {
    key: "cargo",
    icon: Truck,
    title: "Biznie Cargo",
    text: "Post loads, find trucks and work with transporters across India.",
    href: "/logistics",
    image: HOME_IMAGES.containerTruck,
    alt: "A container truck at a logistics yard",
    span: "col-span-2",
  },
  {
    key: "credit",
    icon: Banknote,
    title: "Credit",
    text: "Working capital and trade credit, subject to eligibility and approval.",
    href: "/credit-request",
    image: HOME_IMAGES.warehouse,
    alt: "A stocked warehouse with a forklift",
    span: "col-span-1",
  },
  {
    key: "prices",
    icon: LineChart,
    title: "Live Prices",
    text: "Daily mandi rates from key markets.",
    href: "/prices",
    image: ABOUT_IMAGES.mandi,
    alt: "Traders at a wholesale mandi",
    span: "col-span-1",
  },
  {
    key: "news",
    icon: Newspaper,
    title: "Market News",
    text: "Updates and insight on the markets you trade in.",
    href: "/news",
    image: HOME_IMAGES.blastFurnace,
    alt: "A steel plant blast furnace lit up at dusk",
    span: "col-span-2",
  },
];

/** Everything on the platform, as a photo bento with one non-photo tile for Biznie AI. */
export default function OfferingsSection() {
  return (
    <section className="bg-white py-16 sm:py-20 lg:py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <Reveal className="flex flex-col justify-between gap-4 lg:flex-row lg:items-end">
          <div className="max-w-2xl">
            <span className="text-sm font-semibold uppercase tracking-wider text-[#CC1414]">One platform</span>
            <h2 className="mt-2 text-3xl font-black tracking-tight text-slate-900 md:text-4xl">
              Everything your trade needs, in one place
            </h2>
          </div>
          <p className="max-w-md text-slate-500">
            Buy and sell materials, move them, finance them and keep an eye on the market — without switching between
            vendors, brokers and spreadsheets.
          </p>
        </Reveal>

        <div className="mt-10 grid auto-rows-[190px] grid-cols-2 gap-3 sm:auto-rows-[210px] sm:gap-4 md:grid-cols-4 lg:auto-rows-[230px]">
          {TILES.map(({ key, icon: Icon, title, text, href, image, alt, span, large }, i) => (
            <Reveal key={key} delay={(i % 3) * 90} className={cn("h-full", span)}>
              <Link
                href={href}
                className="group relative flex h-full flex-col justify-end overflow-hidden rounded-3xl bg-slate-900 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#CC1414]/40"
              >
                <Image
                  src={image}
                  alt={alt}
                  fill
                  sizes={large ? "(max-width: 768px) 100vw, 640px" : "(max-width: 768px) 50vw, 320px"}
                  className="object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-950/95 via-slate-950/50 to-slate-950/10 transition-colors duration-500 group-hover:from-[#7a0b0b]/95" />
                <ArrowUpRight
                  size={20}
                  aria-hidden
                  className="absolute right-4 top-4 text-white/70 transition-all group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-white"
                />
                <div className="relative p-4 text-white sm:p-5">
                  <span
                    className={cn(
                      "flex items-center justify-center rounded-xl bg-[#CC1414] text-white shadow-lg",
                      large ? "h-12 w-12" : "h-10 w-10"
                    )}
                  >
                    <Icon size={large ? 22 : 18} aria-hidden />
                  </span>
                  <h3 className={cn("mt-3 font-extrabold tracking-tight", large ? "text-2xl sm:text-3xl" : "text-base sm:text-lg")}>
                    {title}
                  </h3>
                  <p
                    className={cn(
                      "mt-1 text-white/75",
                      large ? "max-w-md text-sm sm:text-base" : "text-xs sm:text-sm"
                    )}
                  >
                    {text}
                  </p>
                </div>
              </Link>
            </Reveal>
          ))}

          <Reveal delay={180} className="col-span-2 h-full">
            <div className="relative flex h-full flex-col justify-between overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 via-slate-900 to-[#5c0909] p-4 text-white sm:p-5">
              <div aria-hidden className="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full bg-[#CC1414]/30 blur-[70px]" />
              <div className="relative flex items-start justify-between gap-4">
                <div className="min-w-0">
                  <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/10 text-[#ff6b6b] ring-1 ring-inset ring-white/15">
                    <Bot size={19} aria-hidden />
                  </span>
                  <h3 className="mt-3 text-base font-extrabold tracking-tight sm:text-lg">Biznie AI</h3>
                  <p className="mt-1 max-w-xs text-xs text-white/70 sm:text-sm">
                    Find products, raise enquiries and check your orders in chat — in English, Hindi and other Indian languages.
                  </p>
                </div>
                <div aria-hidden className="hidden w-52 shrink-0 space-y-2 text-[11px] lg:block">
                  <p className="ml-auto w-fit rounded-2xl rounded-br-md bg-[#CC1414] px-3 py-2 font-medium">
                    Where is my TMT order?
                  </p>
                  <p className="w-fit rounded-2xl rounded-bl-md bg-white/10 px-3 py-2 text-white/85 ring-1 ring-inset ring-white/10">
                    It&apos;s dispatched — here are the vehicle and driver details.
                  </p>
                </div>
              </div>
              <p className="relative mt-3 inline-flex items-center gap-2 text-xs font-medium text-white/60">
                <Mic size={14} aria-hidden /> Type or speak — tap the chat button
              </p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}