Stats and logos

"use client";

const LOGOS = ["Gulshan Parking", "Bashundhara City", "Jamuna Future Park", "Banani Tower", "Unimart", "Square Hospital", "Shanta Holdings", "Navana"];

export default function LogoCloud() {
  return (
    <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
      <p className="text-center text-[13px] font-medium text-muted">Trusted by the busiest car parks in Dhaka and Chattogram</p>
      {/* A row that drifts sideways, paused on hover; the ends fade into the page. */}
      <div className="group relative mt-8 overflow-hidden [mask-image:linear-gradient(90deg,transparent,#000_12%,#000_88%,transparent)]">
        <div className="flex w-max animate-[wm-marquee_32s_linear_infinite] gap-4 group-hover:[animation-play-state:paused] motion-reduce:animate-none">
          {[...LOGOS, ...LOGOS].map((l, i) => (
            <span
              key={i}
              className="disp flex h-14 shrink-0 items-center rounded-[14px] border border-border bg-raised px-6 text-[15px] font-semibold text-muted shadow-[var(--lit)] transition-colors hover:text-text"
            >
              {l}
            </span>
          ))}
        </div>
      </div>
      <style>{`@keyframes wm-marquee { to { transform: translateX(calc(-50% - 8px)) } }`}</style>
    </section>
  );
}

const STATS = [
  ["2.4M", "cars a month"],
  ["120+", "car parks"],
  ["99.98%", "gate uptime"],
  ["৳18 Cr", "paid through it last year"],
];

export default function StatsSimple() {
  return (
    <section className="px-4 py-16 sm:px-6">
      <dl className="mx-auto grid max-w-5xl grid-cols-2 gap-y-10 md:grid-cols-4 md:divide-x md:divide-border">
        {STATS.map(([n, l]) => (
          <div key={l} className="flex flex-col items-center px-4 text-center">
            <dt className="order-2 mt-1.5 text-[14px] text-muted">{l}</dt>
            <dd className="disp num text-[36px] font-bold leading-[1.1] tracking-[-0.035em] text-text sm:text-[42px]">{n}</dd>
          </div>
        ))}
      </dl>
    </section>
  );
}