---
import { localizedPath } from '../../../i18n/utils';
import { getCollection } from 'astro:content';
import PageLayout from '../../../layouts/PageLayout.astro';
import CTABand from '../../../components/sections/CTABand.astro';
import { professionSlugs, professionLabels, type ProfessionSlug } from '../../../data/navigation';
import { t } from '../../../i18n/ui';
import House from 'phosphor-astro/House.astro';
import Baby from 'phosphor-astro/Baby.astro';
import CarSimple from 'phosphor-astro/CarSimple.astro';
import Heart from 'phosphor-astro/Heart.astro';
import ArrowRight from 'phosphor-astro/ArrowRight.astro';
import ArrowLeft from 'phosphor-astro/ArrowLeft.astro';

const professionMeta: Record<ProfessionSlug, { icon: typeof House }> = {
  'domestic-worker': { icon: House },
  nanny: { icon: Baby },
  'private-driver': { icon: CarSimple },
  caregiver: { icon: Heart },
};

function entrySlug(id: string, locale: string) {
  return id.replace(`${locale}/`, '').replace(/\.mdx?$/, '');
}

export const prerender = false;

const lang = Astro.currentLocale === 'en' ? 'en' : 'ar';

const ui = t(lang);
const professionEntries = await getCollection('professions', ({ id }) => id.startsWith(`${lang}/`));
const Arrow = lang === 'ar' ? ArrowLeft : ArrowRight;
---

<PageLayout
  locale={lang}
  title={ui.professions}
  description={lang === 'ar'
    ? 'تعرف على المهن التي نستقدمها: عاملة منزلية، مربية، سائق خاص، ومقدمة رعاية'
    : 'Learn about the roles we recruit: domestic workers, nannies, private drivers, and caregivers'}
  breadcrumbs={[
    { label: ui.home, href: localizedPath(lang, '') },
    { label: ui.professions },
  ]}
>
  <section class="page-hero">
    <div class="container-site">
      <h1 class="text-4xl font-bold">{ui.professions}</h1>
      <p class="mt-3 max-w-2xl text-lg text-primary-content/80">
        {lang === 'ar'
          ? 'تعرف على متطلبات كل مهنة والجنسيات المتاحة ومدة الاستقدام'
          : 'Learn about requirements, available nationalities, and recruitment timelines for each role'}
      </p>
    </div>
  </section>

  <section class="section-padding">
    <div class="container-site">
      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {professionSlugs.map((slug) => {
          const Icon = professionMeta[slug].icon;
          const entry = professionEntries.find((e) => entrySlug(e.id, lang) === slug);

          return (
            <a
              href={localizedPath(lang, `professions/${slug}`)}
              class="group flex flex-col rounded-2xl border border-base-300/60 bg-base-100 p-5 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:border-secondary/40 hover:shadow-md"
            >
              <div class="mb-4 flex items-start justify-between gap-3 relative">
                <span class="absolute top-0 end-0 flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-secondary/15 group-hover:text-secondary">
                  <Icon class="h-6 w-6" aria-hidden="true" />
                </span>
              </div>

              <h2 class="text-lg font-bold text-base-content group-hover:text-primary transition-colors">
                {professionLabels[slug][lang]}
              </h2>

              {entry && (
                <p class="mt-2 line-clamp-3 flex-1 text-sm leading-relaxed text-base-content/60">
                  {entry.data.description}
                </p>
              )}

              <span class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-secondary">
                {lang === 'ar' ? 'تفاصيل المهنة' : 'Role details'}
                <Arrow class="h-4 w-4 transition-transform group-hover:translate-x-0.5 rtl:group-hover:-translate-x-0.5" aria-hidden="true" />
              </span>
            </a>
          );
        })}
      </div>
    </div>
  </section>

  <CTABand locale={lang} />
</PageLayout>