---
import { localizedPath } from '../../i18n/utils';
import type { Locale } from '../../data/site';
import { serviceSlugs, serviceLabels } from '../../data/navigation';
import SectionHeading from '../ui/SectionHeading.astro';
import { t } from '../../i18n/ui';

interface Props {
  locale: Locale;
  showAllLink?: boolean;
}

const { locale, showAllLink = true } = Astro.props;
const ui = t(locale);
const isRtl = locale === 'ar';
const icons = [
  '/images/service-card-1.png',
  '/images/service-card-2.png',
  '/images/service-card-3.png',
  '/images/service-card-4.png',
];
---

<section class="section-padding bg-base-100">
  <div class="container-site">
    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
      {serviceSlugs.map((slug, i) => (
        <a
          href={localizedPath(locale, `services/${slug}`)}
          class="reveal group relative flex flex-col overflow-hidden bg-base-200 border border-base-300/60 hover:shadow-xl hover:border-secondary/30 transition-all duration-500"
          style={`transition-delay:${i * 60}ms`}
        >
          <!-- Body -->
          <div class="flex flex-col flex-1 p-6">
            <h3 class="text-2xl font-bold text-base-content mb-auto group-hover:text-primary transition-colors duration-300">
              {serviceLabels[slug][locale]}
            </h3>
            <div class="mt-4 flex items-center gap-1.5 text-secondary text-sm font-semibold">
              <span>{ui.readMore}</span>
              <svg class="h-4 w-4 transition-all duration-300 group-hover:ms-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" style={isRtl ? 'transform:scaleX(-1)' : ''}>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>

          <!-- Bottom gold accent line -->
          <span class="absolute bottom-0 inset-s-0 h-0.5 w-0 bg-secondary transition-all duration-500 group-hover:w-full" aria-hidden="true"></span>
        </a>
      ))}
    </div>

    {showAllLink && (
      <div class="mt-12 text-center reveal">
        <a href={localizedPath(locale, 'services')} class="btn btn-primary btn-lg px-10">
          {ui.allServices}
        </a>
      </div>
    )}
  </div>
</section>