<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Daten Foyer TV Display</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        body { 
            font-family: 'Inter', sans-serif; 
            background-color: #030712; 
            color: #f8fafc; 
            overflow: hidden; 
            -webkit-font-smoothing: antialiased;
        }
        .glass-panel { 
            background: rgba(15, 23, 42, 0.94); 
            border: 1px solid rgba(249, 115, 22, 0.3); 
        }
        .glow-effect { 
            box-shadow: 0 0 40px -10px rgba(249, 115, 22, 0.2); 
        }
        .slide-animate { 
            animation: fastFade 0.25s ease-out forwards; 
            will-change: opacity, transform;
        }
        @keyframes fastFade {
            0% { opacity: 0; transform: translateY(4px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes progress {
            0% { width: 0%; }
            100% { width: 100%; }
        }
        .animate-progress { 
            animation: progress var(--slide-duration, 14s) linear infinite; 
            will-change: width;
        }
    </style>
</head>
<body class="w-screen h-screen flex flex-col justify-between p-2 md:p-4 select-none bg-slate-950">

    <!-- INVISIBLE SILENT VIDEO WORKAROUND FOR LG webOS SCREENSAVER -->
    <video autoplay muted loop playsinline style="position: absolute; width: 1px; height: 1px; opacity: 0.01; pointer-events: none; z-index: -1;">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>

    <div id="tv-frame" class="w-full h-full relative overflow-hidden flex flex-col justify-start rounded-3xl p-5 md:p-8 border border-slate-800 bg-slate-950 shadow-2xl">
        
        <!-- SLEEP MODE OVERLAY -->
        <div id="sleep-overlay" class="absolute inset-0 bg-black z-50 flex flex-col items-center justify-center text-slate-600 transition-opacity duration-500 opacity-0 pointer-events-none">
            <div class="text-center space-y-3">
                <i class="fa-solid fa-moon text-7xl text-orange-600/60 animate-pulse"></i>
                <h2 class="text-3xl font-black tracking-widest uppercase text-slate-500">The Daten - Foyer Sleep Mode</h2>
                <p id="sleep-reason" class="text-sm text-slate-600">Active (Standby Mode)</p>
            </div>
        </div>

        <!-- TAKEOVER NOTICE OVERLAY -->
        <div id="takeover-overlay" class="absolute inset-0 bg-orange-950/95 z-40 flex flex-col items-center justify-center p-12 text-center hidden">
            <div class="max-w-5xl space-y-6">
                <div class="inline-flex items-center gap-3 bg-orange-600 text-white px-6 py-2.5 rounded-2xl font-black text-base uppercase tracking-wider shadow-2xl">
                    <i class="fa-solid fa-triangle-exclamation"></i> High Priority Notice
                </div>
                <h1 id="takeover-title" class="text-5xl md:text-7xl font-black text-white tracking-tight">Announcement Title</h1>
                <p id="takeover-message" class="text-2xl md:text-3xl text-orange-100 font-medium leading-relaxed">Announcement message goes here...</p>
            </div>
        </div>

        <!-- BACKGROUND IMAGE OVERLAY -->
        <div class="absolute inset-0 z-0 overflow-hidden pointer-events-none">
            <img id="global-slide-bg" src="" alt="Background" class="w-full h-full object-cover opacity-20">
            <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/90 to-slate-950/95"></div>
        </div>

        <!-- TOP BANNER NOTICE -->
        <div id="banner-container" class="relative z-20 mx-2 mt-1 mb-2 bg-orange-600/20 border border-orange-500/40 rounded-xl overflow-hidden px-6 py-2.5 flex items-center shadow-lg shrink-0">
            <div class="bg-orange-600 text-white text-xs font-black px-3.5 py-1 rounded-lg uppercase tracking-wider shrink-0 flex items-center gap-2 mr-4 shadow">
                <i class="fa-solid fa-bullhorn"></i> Notice
            </div>
            <div class="overflow-hidden whitespace-nowrap flex-1">
                <div id="banner-text" class="text-sm md:text-base font-bold text-orange-200">Welcome to The Daten Foyer Display</div>
            </div>
        </div>

        <!-- HEADER BAR -->
        <header class="relative z-20 mx-2 glass-panel px-7 py-4 rounded-2xl flex items-center justify-between shrink-0 shadow-2xl">
            <div class="flex items-center space-x-5">
                <img src="https://images.benjc.uk/datenwhite.png" alt="The Daten Logo" class="h-12 md:h-14 w-auto object-contain">
                <div>
                    <h2 class="text-lg md:text-xl font-extrabold tracking-tight text-white leading-tight">
                        Multi Sport Club Foyer
                    </h2>
                    <p class="text-xs md:text-sm text-slate-400 font-medium">Culcheth, Warrington • Live Display Loop</p>
                </div>
            </div>

            <div class="flex items-center space-x-5">
                <!-- Weather Widget -->
                <div class="hidden sm:flex items-center space-x-3.5 bg-slate-900/90 px-5 py-2.5 rounded-xl border border-slate-800 text-xs h-[50px]">
                    <i class="fa-solid fa-cloud-sun text-amber-400 text-xl"></i>
                    <div>
                        <span class="font-bold text-slate-200 text-sm">Culcheth 14°C</span>
                        <span class="text-[11px] text-slate-400 block font-medium">Dry & Bright</span>
                    </div>
                </div>

                <!-- Clock Widget -->
                <div class="bg-slate-900/90 px-6 py-2.5 rounded-xl border border-slate-800 text-right flex items-center space-x-4 h-[50px]">
                    <i class="fa-regular fa-clock text-orange-400 text-xl"></i>
                    <div>
                        <div id="tv-live-clock" class="text-lg md:text-xl font-black tracking-wider text-slate-100">00:00:00</div>
                        <div id="tv-live-date" class="text-[11px] text-slate-400 font-medium">Loading Date...</div>
                    </div>
                </div>
            </div>
        </header>

        <!-- MAIN CAROUSEL VIEW -->
        <main class="relative z-10 flex-1 mx-2 my-3 flex flex-col justify-between overflow-hidden">
            <div id="slide-container" class="glass-panel rounded-3xl p-6 md:p-10 flex-1 flex flex-col justify-between relative overflow-hidden shadow-2xl glow-effect border-orange-500/30 slide-animate">
                
                <div class="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-8 my-auto items-center">
                    <div class="space-y-4">
                        <div>
                            <div class="flex items-center space-x-4 mb-2">
                                <span id="slide-badge" class="px-3.5 py-1.5 bg-orange-600 text-white text-xs md:text-sm font-extrabold rounded-xl uppercase tracking-wider shadow">Main Club & Bar</span>
                                <span id="slide-tagline" class="text-slate-300 text-sm md:text-base font-medium">The heartbeat of Culcheth community & social life</span>
                            </div>
                            <h3 id="slide-title" class="text-3xl md:text-5xl font-black text-white tracking-tight leading-tight">The Daten (Main Club & Bar)</h3>
                        </div>

                        <!-- Schedule & QR Layout Container for Bar Slide -->
                        <div id="slide-schedule-container" class="space-y-2">
                            <div class="text-xs uppercase tracking-wider text-orange-400 font-extrabold flex items-center gap-2">
                                <i class="fa-solid fa-clock-rotate-left"></i> Today's Timings & Schedule
                            </div>
                            <!-- Side-by-side grid so schedule and QR fit nicely even at 125% zoom -->
                            <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 items-stretch">
                                <div id="slide-schedule-box" class="lg:col-span-7 bg-slate-950/90 p-3.5 rounded-2xl border border-orange-500/40 text-xs md:text-sm text-slate-100 font-medium shadow-xl">
                                    <!-- Populated dynamically -->
                                </div>
                                <div id="slide-bar-qr-box" class="lg:col-span-5 bg-slate-950/90 p-3 rounded-2xl border border-orange-500/40 shadow-xl flex items-center gap-3">
                                    <img id="bar-qr-img" src="" alt="QR Code" class="w-16 h-16 md:w-20 md:h-20 object-contain bg-white rounded-xl p-1.5 shrink-0">
                                    <div class="overflow-hidden">
                                        <div class="text-xs font-black text-white flex items-center gap-1">
                                            <i class="fa-solid fa-qrcode text-orange-400"></i> Scan to Explore
                                        </div>
                                        <div class="text-[10px] text-slate-300 leading-tight mt-0.5">Point phone camera here</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <p id="slide-description" class="text-slate-200 text-base md:text-lg leading-relaxed font-normal">
                            Our welcoming licensed bar is open every day!
                        </p>

                        <!-- Standard QR Container for other slides -->
                        <div id="slide-qr-left-container" class="pt-1 hidden">
                            <div class="inline-flex items-center gap-4 bg-slate-950/90 px-5 py-3 rounded-2xl border border-orange-500/40 shadow-2xl">
                                <img id="slide-qr-img" src="" alt="QR Code" class="w-20 h-20 md:w-24 md:h-24 object-contain bg-white rounded-xl p-2">
                                <div>
                                    <div class="text-sm md:text-base font-black text-white flex items-center gap-2">
                                        <i class="fa-solid fa-qrcode text-orange-400 text-lg"></i> Scan to Book & Explore
                                    </div>
                                    <div class="text-xs text-slate-300">Point phone camera here</div>
                                    <div class="text-[10px] text-orange-400 font-bold uppercase tracking-wider pt-0.5">Instant Access</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column: Big Image Panel -->
                    <div class="relative rounded-3xl overflow-hidden border border-slate-700/60 bg-slate-900 shadow-2xl aspect-[16/10] flex items-center justify-center">
                        <img id="slide-main-img" src="" alt="Slide Image" class="w-full h-full object-cover rounded-2xl shadow-inner">
                    </div>
                </div>

                <!-- FOOTER PROGRESS BAR -->
                <div class="relative z-10 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs md:text-sm text-slate-400">
                    <div class="flex items-center space-x-2.5">
                        <i class="fa-solid fa-circle-dot text-orange-400 animate-pulse text-base"></i>
                        <span id="progress-section-label">Auto-Rotating Feed Active</span>
                    </div>
                    <div class="w-1/3 bg-slate-900 h-2 rounded-full overflow-hidden border border-slate-800">
                        <div id="progress-bar" class="bg-gradient-to-r from-orange-500 to-amber-400 h-full w-full animate-progress"></div>
                    </div>
                    <div>
                        <span class="text-orange-400 font-bold">The Daten Foyer Feed</span>
                    </div>
                </div>

            </div>
        </main>

        <!-- TV Stand Footer -->
        <div class="flex justify-center items-center py-1 text-xs text-slate-500 gap-3 shrink-0">
            <span>LG Smart TV 55" Display • Resolution 1920x1080 (60Hz) • Zoom-Optimized Layout Active</span>
        </div>
    </div>

    <script>
        const slides = [
            {
                id: 'daten-bar',
                title: 'The Daten (Main Club & Bar)',
                tagline: 'The heartbeat of Culcheth community & social life',
                badge: 'Main Club & Bar',
                description: 'Our welcoming licensed bar is open every day!',
                isBarTable: true,
                image: 'https://images.benjc.uk/bardaten.jpg',
                qr: 'https://images.benjc.uk/qr%20codes/daten.png'
            },
            {
                id: 'northern-starr',
                title: 'Northern Starr Dance & Fitness',
                tagline: 'Dynamic classes, fitness suites & rhythm',
                badge: 'Dance & Fitness',
                description: 'From energetic fitness classes, Zumba, and aerobics to competitive dance training for children and adults. Get fit, make friends, and move with Northern Starr!',
                image: 'https://images.benjc.uk/dance.jpg',
                qr: 'https://images.benjc.uk/qr%20codes/northernstarr.png'
            },
            {
                id: 'tennis-pickleball',
                title: 'Culcheth Tennis & Pickleball Club',
                tagline: 'All-weather courts for all ages & abilities',
                badge: 'Tennis & Pickleball',
                description: 'Featuring state-of-the-art floodlit courts, social club nights, internal box leagues, and expert coaching for both Tennis and the fastest-growing sport, Pickleball!',
                image: 'https://images.benjc.uk/ctpc.jpg',
                qr: 'https://images.benjc.uk/qr%20codes/ctpc.png'
            },
            {
                id: 'john-carrigan',
                title: 'John Carrigan Racquets Academy',
                tagline: 'Community junior & adult coaching programmes',
                badge: 'John Carrigan Racquets',
                description: 'Led by professional coaches, JCRA provides top-tier training pathways from beginner juniors to county-level tournament competitors, building technique, stamina, and match craft.',
                image: 'https://images.benjc.uk/jcraprogram.jpg',
                qr: 'https://images.benjc.uk/qr%20codes/jcra.uk.png'
            },
            {
                id: 'ace-padel',
                title: 'Ace Padel',
                tagline: 'High-energy glass court padel action',
                badge: 'Racket Sports',
                description: 'Experience the thrilling fusion of tennis and squash. Ace Padel brings premium panoramic glass courts to Culcheth, perfect for fast-paced doubles matches and social tournaments.',
                image: 'https://images.benjc.uk/sectionimg/acepadel.jpg',
                qr: 'https://images.benjc.uk/qr%20codes/ace.png'
            },
            {
                id: 'ace-fr',
                title: 'Ace Fitness & Reformer',
                tagline: 'Your journey to peak fitness and mindful movement.',
                badge: 'Health & Fitness',
                description: 'Experience elite fitness and reformer precision at Ace Fitness & Reformer. Sculpt your body, master your core, and elevate your strength in our state-of-the-art facility. Join our community and define your edge today.',
                image: 'https://images.benjc.uk/fitness.jpg',
                qr: 'https://images.benjc.uk/acefitneesref.png'
            },
            {
                id: 'active-soccer',
                title: 'Active Soccer',
                tagline: 'Elevating children\'s football in Culcheth',
                badge: 'Active Soccer',
                description: 'At Active Soccer Warrington, we provide a complete football pathway—from a child\'s very first kick to advanced player development.',
                image: 'https://images.benjc.uk/7%20(1).webp',
                qr: 'https://images.benjc.uk/activesoccer.svg'
            },
            {
                id: 'daten-fc',
                title: 'Daten Football Club',
                tagline: 'Grassroots football for junior & senior teams',
                badge: 'Daten Football Club',
                description: 'Providing excellent grass pitches, training facilities, and matchday hospitality for our thriving junior and senior football teams representing Culcheth with pride.',
                image: 'https://images.benjc.uk/datenfcpic.jpeg',
                qr: 'https://images.benjc.uk/qr%20codes/datenFC.png'
            },
            {
                id: 'ukrainian-family-hub',
                title: 'Ukrainian Family Hub',
                tagline: 'Supporting Ukrainian families in Culcheth',
                badge: 'Ukrainian Family Hub',
                description: 'A community hub providing support, social activities, and resources for Ukrainian families in Culcheth.',
                image: 'https://images.benjc.uk/hub.jpeg',
                qr: 'https://images.benjc.uk/qr%20codes/adobe-express-qr-code%20(1).png'
            },
            {
                id: 'sundial-kitchen',
                title: 'Sundial Community Kitchen',
                tagline: 'Fresh hot meals, snacks, coffee & treats',
                badge: 'Sundial Kitchen',
                description: 'Serving delicious hot food, artisan coffees, wholesome post-match snacks, and family treats in a warm, friendly communal dining environment.',
                image: 'https://images.benjc.uk/cafe.png',
                qr: 'https://images.benjc.uk/qr%20codes/cafe.png'
            }
        ];

        const barHours = [
            { day: 'Monday', time: '17:30 - 22:30' },
            { day: 'Tuesday', time: '17:30 - 22:30' },
            { day: 'Wednesday', time: '18:00 - 22:30' },
            { day: 'Thursday', time: '17:00 - 22:30' },
            { day: 'Friday', time: '17:00 - 00:00' },
            { day: 'Saturday', time: '11:30 - 23:00' },
            { day: 'Sunday', time: '11:30 - 22:30' }
        ];

        let currentIdx = 0;
        let rotationInterval = null;
        const SLIDE_DURATION_SEC = 14;

        let cachedBarTableHtml = '';
        function buildBarTable() {
            if (cachedBarTableHtml) return cachedBarTableHtml;
            const todayName = new Date().toLocaleDateString('en-US', { weekday: 'long' });
            let tableHtml = `<div class="grid grid-cols-1 gap-1 text-[11px] md:text-xs">`;
            barHours.forEach(h => {
                const isToday = h.day === todayName;
                tableHtml += `
                    <div class="flex items-center justify-between px-2.5 py-1.5 rounded-lg ${isToday ? 'bg-orange-600/35 text-orange-100 font-black border border-orange-500/60 shadow' : 'bg-slate-900/95 text-slate-200 border border-slate-800'}">
                        <span>${h.day} ${isToday ? '<span class="text-[9px] bg-orange-600 text-white px-1 py-0.5 rounded ml-1 uppercase font-black">Today</span>' : ''}</span>
                        <span class="font-mono font-bold tracking-wide">${h.time}</span>
                    </div>
                `;
            });
            tableHtml += `</div>`;
            cachedBarTableHtml = tableHtml;
            return cachedBarTableHtml;
        }

        function preloadImages() {
            slides.forEach(s => {
                if (s.image) {
                    const img = new Image();
                    img.src = s.image;
                }
                if (s.qr) {
                    const qrImg = new Image();
                    qrImg.src = s.qr;
                }
            });
        }

        function initApp() {
            preloadImages();
            renderSlide();
            startRotation();
            setInterval(updateClock, 1000);
            updateClock();
            startAudioWakePulse();
        }

        function startAudioWakePulse() {
            setInterval(() => {
                try {
                    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                    const oscillator = audioCtx.createOscillator();
                    const gainNode = audioCtx.createGain();
                    gainNode.gain.value = 0.0001;
                    oscillator.connect(gainNode);
                    gainNode.connect(audioCtx.destination);
                    oscillator.start();
                    oscillator.stop(audioCtx.currentTime + 0.1);
                } catch (e) {}
            }, 240000);
        }

        function startRotation() {
            if (rotationInterval) clearInterval(rotationInterval);
            rotationInterval = setInterval(() => {
                currentIdx = (currentIdx + 1) % slides.length;
                renderSlide();
            }, SLIDE_DURATION_SEC * 1000);
        }

        function renderSlide() {
            const sec = slides[currentIdx] || slides[0];
            const container = document.getElementById('slide-container');
            
            container.classList.remove('slide-animate');
            void container.offsetWidth;
            container.classList.add('slide-animate');

            document.getElementById('global-slide-bg').src = sec.image || 'https://images.benjc.uk/bardaten.jpg';
            document.getElementById('slide-title').textContent = sec.title;
            document.getElementById('slide-tagline').textContent = sec.tagline;
            document.getElementById('slide-badge').textContent = sec.badge;
            document.getElementById('slide-description').textContent = sec.description;
            document.getElementById('progress-section-label').textContent = `Displaying Section ${currentIdx + 1} of ${slides.length}`;

            const progressBar = document.getElementById('progress-bar');
            progressBar.style.animation = 'none';
            void progressBar.offsetWidth;
            progressBar.style.animation = `progress ${SLIDE_DURATION_SEC}s linear infinite`;

            const scheduleContainer = document.getElementById('slide-schedule-container');
            const scheduleBox = document.getElementById('slide-schedule-box');
            const barQrBox = document.getElementById('slide-bar-qr-box');
            const standardQrContainer = document.getElementById('slide-qr-left-container');
            const standardQrImg = document.getElementById('slide-qr-img');

            if (sec.isBarTable || currentIdx === 0) {
                scheduleContainer.classList.remove('hidden');
                scheduleBox.innerHTML = buildBarTable();
                barQrBox.classList.remove('hidden');
                document.getElementById('bar-qr-img').src = sec.qr;
                standardQrContainer.classList.add('hidden');
            } else {
                scheduleContainer.classList.add('hidden');
                barQrBox.classList.add('hidden');
                if (sec.qr) {
                    standardQrContainer.classList.remove('hidden');
                    standardQrImg.src = sec.qr;
                } else {
                    standardQrContainer.classList.add('hidden');
                }
            }

            document.getElementById('slide-main-img').src = sec.image || 'https://images.benjc.uk/bardaten.jpg';
        }

        function updateClock() {
            const now = new Date();
            document.getElementById('tv-live-clock').textContent = now.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
            document.getElementById('tv-live-date').textContent = now.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' });
        }

        window.onload = initApp;
    </script>
</body>
</html>
