@devrongx/games 0.4.37 → 0.4.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devrongx/games",
-  "version": "0.4.37",
+  "version": "0.4.39",
   "description": "Game UI components for sports prediction markets",
   "license": "MIT",
   "main": "./src/index.ts",

package/src/matches/MatchCalendar.tsx

@@ -2,28 +2,20 @@
 "use client";
 
 import { useRef, useMemo, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { Calendar, MapPin, Loader2, Trophy, Zap, Target, Users } from "lucide-react";
+import { motion } from "framer-motion";
+import { Calendar, MapPin, Loader2, Trophy, Target, Users, Zap } from "lucide-react";
 import { useTDMatches } from "./useTDMatches";
 import { useTDPools } from "../pools/hooks";
 import type { ITDPool } from "../pools/types";
 import { TDGameType, TDPoolStatus } from "../pools/types";
 import type { ITDMatch } from "./types";
 
-// TD match status enum values
-const MATCH_STATUS = {
-  UPCOMING: 1,
-  LIVE: 2,
-  COMPLETED: 5,
-} as const;
-
+const MATCH_STATUS = { UPCOMING: 1, LIVE: 2, COMPLETED: 5 } as const;
 const OUTFIT = { fontFamily: "Outfit, sans-serif" };
 
 /* ── Date helpers ── */
 
-function toLocalDate(iso: string): Date {
-  return new Date(iso);
-}
+function toLocalDate(iso: string): Date { return new Date(iso); }
 
 function formatDayMonth(d: Date): string {
   return `${d.getDate()} ${d.toLocaleString("en-US", { month: "short" }).toUpperCase()}`;
@@ -41,9 +33,7 @@ function isSameDay(a: Date, b: Date): boolean {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
 
-function isToday(d: Date): boolean {
-  return isSameDay(d, new Date());
-}
+function isToday(d: Date): boolean { return isSameDay(d, new Date()); }
 
 function isTomorrow(d: Date): boolean {
   const t = new Date();
@@ -62,12 +52,21 @@ function getTeamShortName(match: ITDMatch, team: "a" | "b"): string {
   return t.short_name || t.name.slice(0, 3).toUpperCase();
 }
 
-/** Map popularity 0-10 to border shine opacity (0 = no shine, 10 = full intensity) */
 function getShineOpacity(popularity: number): number {
   if (popularity <= 0) return 0;
   return Math.min(popularity / 10, 1);
 }
 
+function humanizeCount(n: number): string {
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+  return String(n);
+}
+
+function isFreePool(pool: ITDPool): boolean {
+  const dp = (pool.display_price || "").toLowerCase().trim();
+  return dp === "" || dp === "free" || (pool.entry_fee === 0 && !dp);
+}
+
 /* ── Grouping: by date ── */
 
 interface IMatchDay {
@@ -80,69 +79,58 @@ interface IMatchDay {
 
 function groupByDate(matches: ITDMatch[]): IMatchDay[] {
   const map = new Map<string, { date: Date; matches: ITDMatch[] }>();
-
   for (const m of matches) {
     if (!m.scheduled_start_at) continue;
     const d = toLocalDate(m.scheduled_start_at);
     const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
     const existing = map.get(key);
-    if (existing) {
-      existing.matches.push(m);
-    } else {
-      map.set(key, { date: d, matches: [m] });
-    }
+    if (existing) { existing.matches.push(m); }
+    else { map.set(key, { date: d, matches: [m] }); }
   }
-
   return Array.from(map.entries())
     .sort(([a], [b]) => a.localeCompare(b))
     .map(([dateKey, { date, matches: dayMatches }]) => ({
-      dateKey,
-      date,
-      label: getDayLabel(date),
-      dayMonth: formatDayMonth(date),
-      matches: dayMatches,
+      dateKey, date, label: getDayLabel(date), dayMonth: formatDayMonth(date), matches: dayMatches,
     }));
 }
 
-/* ── Pool pills for a match ── */
+/* ── Pool display ── */
 
-const GAME_TYPE_STYLE: Record<number, { icon: typeof Target; color: string; bg: string; label: string }> = {
-  [TDGameType.PRE_MATCH_BETS]: { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)", label: "Pre-Match Bets" },
-  [TDGameType.FANTASY_11]: { icon: Users, color: "#9945FF", bg: "rgba(153,69,255,0.06)", label: "Fantasy 11" },
-  [TDGameType.BALL_SEQUENCE]: { icon: Zap, color: "#FF9945", bg: "rgba(255,153,69,0.06)", label: "Ball Sequence" },
+const GAME_TYPE_STYLE: Record<number, { icon: typeof Target; color: string; label: string }> = {
+  [TDGameType.PRE_MATCH_BETS]: { icon: Target, color: "#22E3E8", label: "Pre-Match Bets" },
+  [TDGameType.FANTASY_11]: { icon: Users, color: "#9945FF", label: "Fantasy 11" },
+  [TDGameType.BALL_SEQUENCE]: { icon: Zap, color: "#FF9945", label: "Ball Sequence" },
 };
 
-function PoolPill({ pool, onPress }: { pool: ITDPool; onPress: (pool: ITDPool) => void }) {
-  const style = GAME_TYPE_STYLE[pool.game_type] ?? { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)", label: "Play" };
+/** Tiny inline pill for a single pool */
+function PoolChip({ pool, color, onPress }: { pool: ITDPool; color: string; onPress: (p: ITDPool) => void }) {
   const isClosed = pool.status === TDPoolStatus.CLOSED || pool.status === TDPoolStatus.RESOLVING || pool.status === TDPoolStatus.COMPLETE;
   const isOpen = pool.status === TDPoolStatus.OPEN;
+  const free = isFreePool(pool);
 
   return (
     <motion.button
       onClick={() => onPress(pool)}
-      whileTap={{ scale: 0.93 }}
-      whileHover={{ scale: 1.04 }}
-      transition={{ type: "spring", stiffness: 500, damping: 25 }}
-      className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg flex-shrink-0"
+      whileTap={{ scale: 0.92 }}
+      className="flex items-center gap-1 px-2 py-1 rounded-md shrink-0"
       style={{
-        background: isOpen ? style.bg.replace("0.06", "0.10") : style.bg,
-        border: `1px solid ${style.color}${isOpen ? "50" : "25"}`,
-        opacity: isClosed ? 0.45 : 1,
-        boxShadow: isOpen ? `0 0 8px ${style.color}18` : undefined,
+        background: `${color}${isOpen ? "14" : "0a"}`,
+        border: `1px solid ${color}${isOpen ? "40" : "20"}`,
+        opacity: isClosed ? 0.4 : 1,
       }}
     >
       {isOpen && (
-        <span className="relative flex h-1.5 w-1.5 shrink-0">
-          <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-60" style={{ backgroundColor: style.color }} />
-          <span className="relative inline-flex rounded-full h-1.5 w-1.5" style={{ backgroundColor: style.color }} />
+        <span className="relative flex h-1 w-1 shrink-0">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-50" style={{ backgroundColor: color }} />
+          <span className="relative inline-flex rounded-full h-1 w-1" style={{ backgroundColor: color }} />
         </span>
       )}
-      <span className="text-[10px] font-bold tracking-wide" style={{ ...OUTFIT, color: "#fff" }}>
-        PLAY
+      <span className="text-[9px] font-bold" style={{ ...OUTFIT, color: free ? "rgba(255,255,255,0.8)" : "#fff" }}>
+        {free ? "Free" : pool.display_price}
       </span>
       {pool.entry_count > 0 && (
-        <span className="text-[8px] font-medium" style={{ ...OUTFIT, color: `${style.color}99` }}>
-          {pool.entry_count > 999 ? `${(pool.entry_count / 1000).toFixed(1)}k` : pool.entry_count} in
+        <span className="text-[7px]" style={{ ...OUTFIT, color: `${color}90` }}>
+          {humanizeCount(pool.entry_count)}
         </span>
       )}
     </motion.button>
@@ -150,10 +138,7 @@ function PoolPill({ pool, onPress }: { pool: ITDPool; onPress: (pool: ITDPool) =
 }
 
 function MatchGameSection({
-  matchId,
-  isCompleted,
-  onPoolPress,
-  partnerSource,
+  matchId, isCompleted, onPoolPress, partnerSource,
 }: {
   matchId: number;
   isCompleted: boolean;
@@ -161,14 +146,10 @@ function MatchGameSection({
   partnerSource?: string;
 }) {
   const { pools, loading } = useTDPools(matchId, partnerSource);
-
   if (isCompleted || loading || pools.length === 0) return null;
 
-  // Group by game_type (integer)
   const grouped: Record<number, ITDPool[]> = {};
-  for (const p of pools) {
-    (grouped[p.game_type] ??= []).push(p);
-  }
+  for (const p of pools) { (grouped[p.game_type] ??= []).push(p); }
 
   const gameTypes = (Object.keys(grouped) as unknown as number[])
     .map(Number)
@@ -176,28 +157,37 @@ function MatchGameSection({
   if (gameTypes.length === 0) return null;
 
   return (
-    <div className="flex flex-col gap-1.5 mt-1.5 pt-2" style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}>
+    <div className="flex flex-col gap-1.5 mt-1.5 pt-1.5" style={{ borderTop: "1px solid rgba(255,255,255,0.07)" }}>
       {gameTypes.map((gt) => {
         const style = GAME_TYPE_STYLE[gt];
         const Icon = style.icon;
+        // Sort: free first, then by display_price
+        const sorted = [...grouped[gt]].sort((a, b) => {
+          const af = isFreePool(a) ? 0 : 1;
+          const bf = isFreePool(b) ? 0 : 1;
+          if (af !== bf) return af - bf;
+          return a.entry_fee - b.entry_fee;
+        });
+        // Deduplicate: keep only one free pool per game type
+        const seen = new Set<string>();
+        const deduped = sorted.filter((p) => {
+          const key = isFreePool(p) ? "free" : p.display_price;
+          if (seen.has(key)) return false;
+          seen.add(key);
+          return true;
+        });
+
         return (
           <div key={gt} className="flex flex-col gap-1">
-            <div className="flex items-center gap-1 px-0.5">
-              <Icon size={9} style={{ color: style.color }} />
-              <span className="text-[8px] barlowcondensedBold tracking-wide" style={{ color: "rgba(255,255,255,0.85)" }}>
+            <div className="flex items-center gap-1">
+              <Icon size={8} style={{ color: style.color }} />
+              <span className="text-[7px] barlowcondensedBold tracking-wider uppercase" style={{ color: `${style.color}cc` }}>
                 {style.label}
               </span>
             </div>
-            <div className="flex gap-1.5 flex-wrap">
-              {grouped[gt].map((pool, idx) => (
-                <motion.div
-                  key={pool.id}
-                  initial={{ opacity: 0, y: 6 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: idx * 0.04, duration: 0.25, ease: "easeOut" }}
-                >
-                  <PoolPill pool={pool} onPress={onPoolPress ?? (() => {})} />
-                </motion.div>
+            <div className="flex gap-1 flex-wrap">
+              {deduped.map((pool) => (
+                <PoolChip key={pool.id} pool={pool} color={style.color} onPress={onPoolPress ?? (() => {})} />
               ))}
             </div>
           </div>
@@ -207,7 +197,7 @@ function MatchGameSection({
   );
 }
 
-/* ── Match card with border shine animation ── */
+/* ── Match card ── */
 
 function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onPoolPress?: (pool: ITDPool, match: ITDMatch) => void; partnerSource?: string }) {
   const isLive = match.status === MATCH_STATUS.LIVE;
@@ -219,7 +209,6 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
 
   return (
     <div className="relative w-full rounded-xl p-[1px] overflow-hidden">
-      {/* Spinning border shine — intensity based on popularity */}
       {showShine && (
         <div
           className="absolute inset-[-50%] pointer-events-none"
@@ -231,38 +220,21 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
           }}
         />
       )}
-
-      {/* Static border for no-shine / completed */}
       {!showShine && (
-        <div
-          className="absolute inset-0 rounded-xl"
-          style={{
-            border: isCompleted
-              ? "1px solid rgba(255,255,255,0.06)"
-              : "1px solid rgba(255,255,255,0.08)",
-          }}
-        />
+        <div className="absolute inset-0 rounded-xl" style={{ border: isCompleted ? "1px solid rgba(255,255,255,0.06)" : "1px solid rgba(255,255,255,0.08)" }} />
       )}
 
       <motion.div
-        className="relative flex flex-col gap-2 rounded-xl px-3.5 py-3"
+        className="relative flex flex-col gap-1 rounded-xl px-2.5 py-2"
         style={{
           background: isLive
             ? "linear-gradient(160deg, rgba(14,10,24,0.98) 0%, rgba(10,8,20,0.98) 100%)"
             : "rgba(10,10,18,0.98)",
         }}
-        whileHover={{ backgroundColor: "rgba(18,18,28,0.98)" }}
-        transition={{ duration: 0.2 }}
       >
-        {/* Time + live indicator */}
-        <div className="flex items-center justify-between gap-1">
-          <span
-            className="text-[11px] font-semibold"
-            style={{
-              ...OUTFIT,
-              color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.45)" : "#fff",
-            }}
-          >
+        {/* Time row */}
+        <div className="flex items-center justify-between">
+          <span className="text-[9px] font-semibold" style={{ ...OUTFIT, color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.6)" }}>
             {time}
           </span>
           {isLive && (
@@ -271,65 +243,38 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
                 <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#f83cc5] opacity-75" />
                 <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#f83cc5]" />
               </span>
-              <span className="text-[8px] barlowcondensedBold tracking-widest" style={{ color: "#f83cc5" }}>
-                LIVE
-              </span>
+              <span className="text-[7px] barlowcondensedBold tracking-widest" style={{ color: "#f83cc5" }}>LIVE</span>
             </div>
           )}
           {isCompleted && match.winner && (
-            <span className="text-[8px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.5)" }}>
+            <span className="text-[7px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.45)" }}>
               {match.winner.short_name || match.winner.name} won
             </span>
           )}
         </div>
 
         {/* Teams */}
-        <div className="flex items-center gap-2 justify-center">
-          <span
-            className="barlowcondensedBold text-[24px] leading-none tracking-wide"
-            style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}
-          >
+        <div className="flex items-center gap-1.5 justify-center">
+          <span className="barlowcondensedBold text-[18px] leading-none tracking-wide" style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}>
             {getTeamShortName(match, "a")}
           </span>
-          <span className="text-[10px] font-semibold" style={{ ...OUTFIT, color: "rgba(255,255,255,0.5)" }}>
-            vs
-          </span>
-          <span
-            className="barlowcondensedBold text-[24px] leading-none tracking-wide"
-            style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}
-          >
+          <span className="text-[8px] font-semibold" style={{ ...OUTFIT, color: "rgba(255,255,255,0.4)" }}>vs</span>
+          <span className="barlowcondensedBold text-[18px] leading-none tracking-wide" style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}>
             {getTeamShortName(match, "b")}
           </span>
         </div>
 
         {/* Venue */}
         {venue && (
-          <div className="flex items-center gap-1 justify-center">
-            <MapPin size={9} style={{ color: "rgba(255,255,255,0.55)" }} />
-            <span
-              className="text-[9px] truncate max-w-[130px]"
-              style={{ ...OUTFIT, color: "rgba(255,255,255,0.7)" }}
-            >
+          <div className="flex items-center gap-0.5 justify-center">
+            <MapPin size={7} style={{ color: "rgba(255,255,255,0.4)" }} />
+            <span className="text-[7px] truncate max-w-[110px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.55)" }}>
               {venue}
             </span>
           </div>
         )}
 
-        {/* Popularity indicator */}
-        {match.rating_popularity > 0 && !isCompleted && (
-          <div className="flex items-center gap-0.5 justify-center mt-0.5">
-            {Array.from({ length: Math.min(Math.ceil(match.rating_popularity / 2), 5) }).map((_, i) => (
-              <Zap
-                key={i}
-                size={8}
-                fill={isLive ? "#f83cc5" : "#22E3E8"}
-                style={{ color: isLive ? "#f83cc5" : "#22E3E8", opacity: 0.45 + i * 0.13 }}
-              />
-            ))}
-          </div>
-        )}
-
-        {/* Game modes — driven by real pools */}
+        {/* Pools */}
         <MatchGameSection
           matchId={match.id}
           isCompleted={isCompleted}
@@ -353,37 +298,26 @@ function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay;
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.35, delay: index * 0.04, ease: [0.25, 0.46, 0.45, 0.94] }}
-      className="shrink-0 flex flex-col gap-2"
-      style={{ scrollSnapAlign: "start", width: "180px" }}
+      className="shrink-0 flex flex-col gap-1.5"
+      style={{ scrollSnapAlign: "start", width: "150px" }}
     >
-      {/* Day header */}
-      <div className="flex flex-col items-center gap-0.5 pb-1.5">
+      <div className="flex flex-col items-center gap-0.5 pb-1">
         <span
-          className="text-[11px] barlowcondensedBold tracking-widest"
-          style={{
-            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.9)",
-          }}
+          className="text-[9px] barlowcondensedBold tracking-widest"
+          style={{ color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.85)" }}
         >
           {day.label}
         </span>
         <span
-          className="text-[13px] font-semibold"
-          style={{
-            ...OUTFIT,
-            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.35)" : "#fff",
-          }}
+          className="text-[11px] font-semibold"
+          style={{ ...OUTFIT, color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.3)" : "#fff" }}
         >
           {day.dayMonth}
         </span>
         {(hasToday || hasLive) && (
-          <div
-            className="w-6 h-[2px] rounded-full mt-0.5"
-            style={{ background: hasLive ? "#f83cc5" : "#22E3E8" }}
-          />
+          <div className="w-4 h-[1.5px] rounded-full mt-0.5" style={{ background: hasLive ? "#f83cc5" : "#22E3E8" }} />
         )}
       </div>
-
-      {/* Match cards for the day */}
       {day.matches.map((match) => (
         <MatchCard key={match.id} match={match} onPoolPress={onPoolPress} partnerSource={partnerSource} />
       ))}
@@ -391,26 +325,19 @@ function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay;
   );
 }
 
-/* ── Main calendar component ── */
+/* ── Main calendar ── */
 
 interface MatchCalendarProps {
   tournamentId?: number;
-  /** Called when user taps a pool pill. Receives both the pool and its parent match. */
   onPoolPress?: (pool: ITDPool, match: ITDMatch) => void;
-  /** Filter pools to a specific partner source (e.g. "iamgame") */
   partnerSource?: string;
 }
 
 export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: MatchCalendarProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const { matches, isLoading, error } = useTDMatches({
-    tournamentId,
-    limit: 100,
-  });
-
+  const { matches, isLoading, error } = useTDMatches({ tournamentId, limit: 100 });
   const days = useMemo(() => groupByDate(matches), [matches]);
 
-  // Auto-scroll to today or first upcoming day
   const scrollTargetIndex = useMemo(() => {
     const tIdx = days.findIndex((d) => isToday(d.date));
     if (tIdx >= 0) return tIdx;
@@ -422,11 +349,8 @@ export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: Matc
 
   useEffect(() => {
     if (scrollRef.current && scrollTargetIndex > 0) {
-      const container = scrollRef.current;
-      const target = container.children[scrollTargetIndex] as HTMLElement;
-      if (target) {
-        container.scrollTo({ left: target.offsetLeft - 20, behavior: "smooth" });
-      }
+      const target = scrollRef.current.children[scrollTargetIndex] as HTMLElement;
+      if (target) scrollRef.current.scrollTo({ left: target.offsetLeft - 16, behavior: "smooth" });
     }
   }, [scrollTargetIndex, days]);
 
@@ -443,42 +367,33 @@ export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: Matc
   if (error || matches.length === 0) return null;
 
   return (
-    <div className="relative z-30 w-full mt-6 mb-4">
-      {/* Tournament info header */}
+    <div className="relative z-30 w-full mt-5 mb-3">
       {tournament && (
-        <div className="px-5 mb-3">
-          <div className="flex items-center gap-2 mb-1">
-            <Trophy size={14} style={{ color: "#22E3E8" }} />
-            <span className="barlowcondensedBold text-[16px] tracking-wide text-white">
-              {tournament.name}
-            </span>
+        <div className="px-5 mb-2.5">
+          <div className="flex items-center gap-2 mb-0.5">
+            <Trophy size={13} style={{ color: "#22E3E8" }} />
+            <span className="barlowcondensedBold text-[15px] tracking-wide text-white">{tournament.name}</span>
           </div>
           <div className="flex items-center gap-3">
             {tournament.start_date && tournament.end_date && (
-              <span className="text-[11px] text-white" style={OUTFIT}>
+              <span className="text-[10px] text-white/50" style={OUTFIT}>
                 {formatDayMonth(toLocalDate(tournament.start_date))} – {formatDayMonth(toLocalDate(tournament.end_date))}
               </span>
             )}
-            <span className="text-[11px] text-white" style={OUTFIT}>
-              {matches.length} matches announced
-            </span>
+            <span className="text-[10px] text-white/50" style={OUTFIT}>{matches.length} matches</span>
           </div>
         </div>
       )}
 
-      {/* Section header */}
-      <div className="flex items-center gap-2 px-5 mb-3">
-        <Calendar size={13} style={{ color: "#22E3E8" }} />
-        <span className="barlowCondensedSemiBold text-[14px] tracking-wider text-white">
-          SCHEDULE
-        </span>
-        <div className="flex-1 h-px" style={{ background: "rgba(255,255,255,0.08)" }} />
+      <div className="flex items-center gap-2 px-5 mb-2.5">
+        <Calendar size={12} style={{ color: "#22E3E8" }} />
+        <span className="barlowCondensedSemiBold text-[13px] tracking-wider text-white">SCHEDULE</span>
+        <div className="flex-1 h-px" style={{ background: "rgba(255,255,255,0.07)" }} />
       </div>
 
-      {/* Scrollable day columns */}
       <div
         ref={scrollRef}
-        className="flex gap-3 overflow-x-auto px-5 pb-4 scrollbar-hide"
+        className="flex gap-2.5 overflow-x-auto px-5 pb-3 scrollbar-hide"
         style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}
       >
         {days.map((day, i) => (