import Link from "next/link"

function DeliveryTruckIcon() {
  return (
    <svg className="h-16 w-20 text-gold" viewBox="0 0 48 32" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
      {/* Cargo box */}
      <rect x="1" y="7" width="26" height="16" rx="1.5" />
      {/* Cab */}
      <path d="M27 11h9l4 12H27V11z" />
      {/* Windshield */}
      <path d="M28 13h7l2 7" />
      {/* Wheels */}
      <circle cx="10" cy="26" r="3.5" />
      <circle cx="35" cy="26" r="3.5" />
      <circle cx="19" cy="26" r="3.5" />
      {/* Lightning bolt in cargo box */}
      <path d="M16 10l-3 5h4l-3 5" />
    </svg>
  )
}

const pricingTables = [
  {
    label: "1. Design Crewneck",
    sublabel: "(Sublimation)",
    rows: [
      { qty: 20,   price: 1500 },
      { qty: 50,   price: 1350 },
      { qty: 100,  price: 1250 },
      { qty: 200,  price: 1175 },
      { qty: 500,  price: 1100 },
      { qty: 1000, price: 1000 },
    ],
  },
  {
    label: "2. Design Premium Polo",
    sublabel: "(Embroidery)",
    rows: [
      { qty: 20,   price: 2100 },
      { qty: 50,   price: 1975 },
      { qty: 100,  price: 1875 },
      { qty: 200,  price: 1750 },
      { qty: 500,  price: 1600 },
      { qty: 1000, price: 1525 },
    ],
  },
  {
    label: "3. Design Basic Polo",
    sublabel: "T Shirt",
    rows: [
      { qty: 20,   price: 1875 },
      { qty: 50,   price: 1750 },
      { qty: 100,  price: 1590 },
      { qty: 200,  price: 1540 },
      { qty: 500,  price: 1480 },
      { qty: 1000, price: 1425 },
    ],
  },
]

export function Pricing() {
  return (
    <section id="pricing" className="bg-black py-12">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-3 lg:grid-cols-[1.1fr_1fr_1fr_1fr_1fr]">

          {/* Left: product image panel */}
          <div className="relative flex flex-col justify-end overflow-hidden rounded-xl bg-surface min-h-72">
            {/* Gold glow */}
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="h-56 w-56 rounded-full bg-gold/20 blur-3xl" />
            </div>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/bulk.png"
              alt="Bulk custom printing"
              className="absolute inset-0 h-full w-full object-cover object-center opacity-60"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent" />
            <div className="relative z-10 p-6">
              <h2 className="text-xl font-black uppercase leading-tight text-white">
                Bulk Pricing
                <br />
                <span className="text-gold">Made Simple</span>
              </h2>
              <p className="mt-2 text-xs leading-relaxed text-silver">
                The more you order, the better the price. Contact us for a custom quote tailored to your needs.
              </p>
              <Link
                href="/#contact"
                className="mt-4 inline-flex items-center gap-1 rounded-lg border border-white/40 px-4 py-2 text-xs font-semibold text-white transition-colors hover:border-gold hover:text-gold"
              >
                Request a Quote <span aria-hidden>›</span>
              </Link>
            </div>
          </div>

          {/* Pricing tables */}
          {pricingTables.map((table) => (
            <div key={table.label} className="overflow-hidden rounded-xl bg-surface">
              {/* Gold header */}
              <div className="bg-gold px-4 py-3 text-center">
                <p className="text-[11px] font-black uppercase tracking-wide text-black leading-tight">
                  {table.label}
                </p>
                <p className="text-[10px] font-bold uppercase text-black/70 leading-tight">
                  {table.sublabel}
                </p>
              </div>

              {/* Column headers */}
              <div className="grid grid-cols-2 border-b border-white/10 px-4 py-2">
                <span className="text-[10px] font-semibold uppercase tracking-widest text-silver">QTY</span>
                <span className="text-[10px] font-semibold uppercase tracking-widest text-silver">PRICE</span>
              </div>

              {/* Rows */}
              {table.rows.map((row, i) => (
                <div
                  key={row.qty}
                  className={`grid grid-cols-2 px-4 py-2 ${i % 2 === 1 ? "bg-white/[0.03]" : ""}`}
                >
                  <span className="text-sm font-medium text-white">{row.qty}</span>
                  <span className="text-sm font-medium text-white">{row.price}</span>
                </div>
              ))}
            </div>
          ))}

          {/* Right: fast delivery panel */}
          <div className="flex flex-col items-center justify-center rounded-xl bg-[#1a1200] border border-gold/20 p-6 text-center">
            <DeliveryTruckIcon />
            <h3 className="mt-4 text-lg font-black uppercase leading-tight">
              <span className="text-gold">Fast Delivery</span>
              <br />
              <span className="text-white">You Can Count On</span>
            </h3>
            <p className="mt-3 text-xs leading-relaxed text-silver">
              Ready in 7–10 Business Days with 99% On-time Delivery guarantee.
            </p>
          </div>

        </div>
      </div>
    </section>
  )
}