From b3082997b1a873169370b98abd28f95bcc4c6c44 Mon Sep 17 00:00:00 2001
From: 230417 <230417@epvc.pt>
Date: Mon, 4 May 2026 10:18:53 +0100
Subject: [PATCH] refactor: update booking flow UI labels and enhance date
 picker input component

---
 web/src/pages/Booking.tsx | 37 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/web/src/pages/Booking.tsx b/web/src/pages/Booking.tsx
index 6304839..436b64c 100644
--- a/web/src/pages/Booking.tsx
+++ b/web/src/pages/Booking.tsx
@@ -192,7 +192,6 @@ export default function Booking() {
             <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
               <div className="space-y-2 text-center md:text-left">
                 <h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">1. Selecione o <span className="text-indigo-600">Serviço</span></h3>
-                <p className="text-slate-500 font-medium italic">O primeiro passo para o seu agendamento.</p>
               </div>
               <div className="grid md:grid-cols-2 gap-6">
                 {shop.services.map((s) => (
@@ -231,8 +230,7 @@ export default function Booking() {
           {step === 2 && (
             <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
               <div className="space-y-2 text-center md:text-left">
-                <h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">2. Escolha o <span className="text-indigo-600">Mestre</span></h3>
-                <p className="text-slate-500 font-medium italic">Selecione o artista que cuidará do seu visual.</p>
+                <h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">2. Escolha o <span className="text-indigo-600">Barbeiro</span></h3>
               </div>
               <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
                 {shop.barbers.map((b) => (
@@ -272,23 +270,25 @@ export default function Booking() {
           {step === 3 && (
             <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
               <div className="space-y-2 text-center md:text-left">
-                <h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">3. Escolha o <span className="text-indigo-600">Horário</span></h3>
-                <p className="text-slate-500 font-medium italic">Seu tempo é valioso. Escolha a data perfeita.</p>
+                <h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">3. Escolha a <span className="text-indigo-600">Data</span></h3>
               </div>
               <div className="max-w-md mx-auto relative">
-                <div className="absolute left-6 top-1/2 -translate-y-1/2 text-indigo-600 pointer-events-none z-10">
-                   <Calendar size={20} />
+                <div className="flex items-center h-16 bg-slate-50 border-none rounded-2xl px-6 focus-within:ring-2 focus-within:ring-indigo-500/20 transition-all shadow-inner relative overflow-hidden">
+                   <Calendar size={20} className="text-indigo-600 mr-4 shrink-0 pointer-events-none" />
+                   <span className={`text-base sm:text-lg font-black uppercase tracking-widest pointer-events-none ${date ? 'text-slate-900' : 'text-slate-400'}`}>
+                     {date ? new Date(date).toLocaleDateString('pt-PT', { day: 'numeric', month: 'long', year: 'numeric' }) : 'SELECIONAR DATA'}
+                   </span>
+                   <input
+                     type="date"
+                     value={date}
+                     onChange={(e) => {
+                       setDate(e.target.value);
+                       if (e.target.value) setStep(4);
+                     }}
+                     min={new Date().toISOString().split('T')[0]}
+                     className="absolute inset-0 w-full h-full opacity-0 cursor-pointer m-0 p-0"
+                   />
                 </div>
-                <Input
-                  type="date"
-                  value={date}
-                  onChange={(e) => {
-                    setDate(e.target.value);
-                    if (e.target.value) setStep(4);
-                  }}
-                  min={new Date().toISOString().split('T')[0]}
-                  className="h-16 pl-14 pr-6 bg-slate-50 border-none rounded-2xl text-lg font-black uppercase tracking-widest text-slate-900 focus:ring-2 focus:ring-indigo-500/20 transition-all shadow-inner"
-                />
               </div>
             </div>
           )}
@@ -296,8 +296,7 @@ export default function Booking() {
           {step === 4 && (
             <div className="space-y-10 animate-in fade-in slide-in-from-bottom-4 duration-500">
               <div className="space-y-2 text-center md:text-left">
-                <h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">4. Escolha o <span className="text-indigo-600">Horário Privilegiado</span></h3>
-                <p className="text-slate-500 font-medium italic">A pontualidade é a cortesia dos reis.</p>
+                <h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">4. Escolha o <span className="text-indigo-600">Horário</span></h3>
               </div>
 
               <div className="flex flex-col md:flex-row gap-6">