feature: localization's first implmentation done. all frontend hardcoded text is now localized.

frontend/src/components/staff/StaffWorkingHoursStep.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { WorkingHoursEditor } from '@/components/staff/WorkingHoursEditor';
 import {
   blocksFromEditorDays,
@@ -27,18 +28,17 @@ export function StaffWorkingHoursStep({
   onValidationChange,
   disabled,
 }: StaffWorkingHoursStepProps) {
+  const t = useTranslations('staff.workingHours');
+
   useEffect(() => {
-    onValidationChange?.(validateEditorDays(days));
-  }, [days, onValidationChange]);
+    onValidationChange?.(validateEditorDays(days, t));
+  }, [days, onValidationChange, t]);
 
   return (
     <div className="space-y-3">
       <div className="rounded-[var(--radius-md)] border border-primary/25 bg-primary/5 px-3 py-3">
-        <p className="text-sm text-text-primary font-medium">Working hours recommended</p>
-        <p className="text-sm text-text-secondary mt-1">
-          Staff with treatment edit access appear as provider columns in Appointments. Set their
-          weekly hours so the schedule grid shows the right bookable times.
-        </p>
+        <p className="text-sm text-text-primary font-medium">{t('recommendedTitle')}</p>
+        <p className="text-sm text-text-secondary mt-1">{t('recommendedBody')}</p>
       </div>
       <WorkingHoursEditor
         days={days}