Added complex data

apps/frontend/src/features/public-booking/public-booking-page.tsx

@@ -485,6 +485,33 @@ function PublicBookingPageChrome({
   );
 }
 
+function ComplexInfoPanel({
+  complexName,
+  complexAddress,
+}: {
+  complexName?: string;
+  complexAddress?: string;
+}) {
+  return (
+    <Panel className="p-5">
+      <div className="flex items-start gap-4">
+        <div className="flex size-12 shrink-0 items-center justify-center rounded-full border border-emerald-500/40 bg-emerald-500/12">
+          <Building2 className="size-6 text-emerald-400" />
+        </div>
+        <div className="min-w-0">
+          <h2 className="text-lg font-semibold text-white">{complexName ?? 'Complex'}</h2>
+          {complexAddress && (
+            <p className="mt-1 flex items-start gap-2 text-sm text-white/62">
+              <MapPin className="mt-0.5 size-4 shrink-0 text-emerald-400" />
+              <span className="leading-relaxed">{complexAddress}</span>
+            </p>
+          )}
+        </div>
+      </div>
+    </Panel>
+  );
+}
+
 function PublicBookingDesktop(props: BookingShellProps) {
   const {
     courts,
@@ -520,6 +547,7 @@ function PublicBookingDesktop(props: BookingShellProps) {
     >
       <div className="mx-auto grid max-w-[1320px] grid-cols-[330px_minmax(0,1fr)] gap-5 px-10">
         <aside className="space-y-4">
+          <ComplexInfoPanel complexName={props.complexName} complexAddress={props.complexAddress} />
           <Panel className="p-5">
             <h2 className="text-lg font-semibold">Seleccioná tu cancha</h2>
             <div className="mt-5 space-y-4">
@@ -968,7 +996,7 @@ function BookingTimeline({
       }
     >
       <div className={compact ? 'min-w-[540px] px-3' : 'min-w-[780px]'}>
-        <div className="relative mt-5 h-7">
+        <div className="relative mt-2 h-6">
           {ticks.map((tick) => (
             <div
               key={tick}
@@ -979,7 +1007,7 @@ function BookingTimeline({
             </div>
           ))}
         </div>
-        <div className={compact ? 'relative h-28' : 'relative h-36'}>
+        <div className={compact ? 'relative h-20' : 'relative h-24'}>
           {ticks.map((tick) => (
             <span
               key={tick}
@@ -1008,7 +1036,7 @@ function BookingTimeline({
                       endTime: slot.endTime,
                     });
                   }}
-                  className={`absolute top-12 flex h-16 min-w-[50px] items-center justify-center rounded border text-xs transition ${
+                  className={`absolute top-7 flex h-12 min-w-[50px] items-center justify-center rounded border text-xs transition ${
                     selected
                       ? 'border-emerald-300 bg-emerald-500/45 text-white shadow-lg shadow-emerald-500/20'
                       : 'border-emerald-500 bg-emerald-500/18 text-white hover:bg-emerald-500/28'
@@ -1036,7 +1064,7 @@ function BookingTimeline({
             return (
               <div
                 key={`${court?.courtId}-blocked-${slot.startTime}`}
-                className={`absolute top-12 flex h-16 min-w-[44px] items-center justify-center rounded border ${
+                className={`absolute top-7 flex h-12 min-w-[44px] items-center justify-center rounded border ${
                   maintenance
                     ? 'border-red-500/80 bg-red-500/28 text-red-100'
                     : 'border-blue-500/70 bg-blue-500/24 text-blue-100'
@@ -1057,7 +1085,7 @@ function BookingTimeline({
               <span className="rounded-md bg-emerald-500 px-2 py-1 text-xs font-bold text-white shadow-lg shadow-emerald-500/25">
                 {selectedSlot.startTime}
               </span>
-              <span className="h-24 w-px border-l border-dashed border-emerald-400" />
+              <span className="h-14 w-px border-l border-dashed border-emerald-400" />
             </div>
           )}
         </div>