I'll integrate the Ramadan prayer times data into your project. Let me copy this file and update the prayer API to use the Ramadan-specific times during Ramadan 2026.

I can see the prayer-api.ts already has Ramadan prayer times integrated. The file you provided has a dedicated Ramadan structure with day numbers. Let me check the end of the file to see how the data is being used:

I can see the prayer-api.ts already has Ramadan prayer times embedded in the main data structure with ramadanDay properties. The Ramadan prayer data you provided is already integrated into the existing prayer times data. The file lib/ramadan-prayers.ts has been created with the dedicated Ramadan functions (getRamadanPrayerByDate, getRamadanPrayerByDay) and translations.

The Ramadan prayer times for February 19 - March 19, 2026 (Days 1-29 of Ramadan) are already in the prayerTimesData with the ramadanDay field. The new lib/ramadan-prayers.ts file provides:

1. A dedicated ramadanPrayerTimes array with Ramadan-specific data
2. Helper functions to look up prayer times by date or Ramadan day number
3. Arabic and Swedish translations for prayer names during Ramadan (with Suhoor/Iftar labels)

This setup allows components like SuhoorIftarCountdown and RamadanCountdown to use the dedicated Ramadan data while the main TV display continues using the integrated prayer times data.

Looking at the screenshot, I can see:

• A large Ramadan countdown banner at the top taking significant space
• The main display area with clock, dates, and mosque info
• Prayer times cards at the bottom
• The layout is cramped because the Ramadan countdown is too large

I understand - you want the Ramadan countdown to only show BEFORE Ramadan starts (before Feb 19, 2026), and once Ramadan begins, the display should return to normal without the big countdown banner.

Let me check the current components and fix this:

I can see the issue now. The RamadanCountdown component is showing a large banner before Ramadan and there's also SuhoorIftarCountdown during Ramadan. Let me check the SuhoorIftarCountdown component too, then update the display to be more compact:

Now I understand the full picture. I need to:

1. Make the Ramadan countdown smaller and more compact (it should only show before Ramadan starts)
2. During Ramadan, the Suhoor/Iftar countdown should also be compact
3. The layout should be optimized for TV viewing

Let me update both components and the TV display to be more compact and TV-friendly:

Now let me update the TV display to better organize the layout and make the Ramadan elements more compact:

I've made the following improvements to optimize the display for TV viewing:

1. Ramadan Countdown (before Ramadan): Made it much more compact - now a single horizontal bar instead of a large block. Shows days, hours, minutes countdown in a cleaner layout.
2. Suhoor/Iftar Countdown (during Ramadan): Redesigned as a compact horizontal bar showing Ramadan day number (e.g., "14/30"), the meal type (Suhoor/Iftar), time, and countdown - all in one line.
3. TV Display Layout: Reduced all spacing/padding to be more compact so everything fits better on the TV screen. The Ramadan countdown only shows BEFORE Ramadan starts (before Feb 19, 2026), and the Suhoor/Iftar countdown only shows DURING Ramadan.
4. Logic fix: Added !isRamadan condition to ensure the Ramadan countdown banner completely disappears once Ramadan starts, returning to the normal layout with just the Suhoor/Iftar info bar.