import React, { useEffect, useRef, useState } from 'react';
import MainLayout from '../components/layout/MainLayout';
import { FiArrowRight, FiCalendar, FiUsers, FiAward, FiChevronLeft, FiChevronRight } from 'react-icons/fi';
import '../styles/theme.css';
import './styles/UnifiedHome.css';
import { getPublicSettings } from '../services/settings';
import { assetUrl, sanitizeClubName } from '../utils/url';
import { getPlayers as apiGetPlayers, Player as ApiPlayer } from '../services/players';
import { getSponsors as apiGetSponsors, Sponsor as ApiSponsor } from '../services/sponsors';
import BlogCardsScroller from '../components/home/BlogCardsScroller';
import BlogSwiper from '../components/home/BlogSwiper';
import VideosSection from '../components/home/VideosSection';
import MerchSection from '../components/home/MerchSection';
import GallerySection from '../components/home/GallerySection';
import { getArticles as apiGetArticles, Article as ApiArticle } from '../services/articles';
import { getCompetitionAliasesPublic, CompetitionAlias } from '../services/competitionAliases';
import NewsletterSubscribe from '../components/newsletter/NewsletterSubscribe';
import MyUIbrixStyleEditor from '../components/editor/MyUIbrixEditor';
import ClubModal from '../components/home/ClubModal';
import MatchModal from '../components/home/MatchModal';
import { useAllPageElementConfigs } from '../hooks/usePageElementConfig';

// Types for real API-driven data
type NewsItem = {
  id: number | string;
  title: string;
  excerpt?: string;
  image?: string;
  date?: string;
  category?: string;
  slug?: string;
};

type MatchItem = {
  id: number | string;
  homeTeam: string;
  awayTeam: string;
  competition?: string;
  date: string; // yyyy-mm-dd
  time: string; // HH:MM
  venue?: string;
  isHome?: boolean;
  homeLogoURL?: string;
  awayLogoURL?: string;
};

const HomePage: React.FC = () => {
  // Local state now starts empty; filled by FACR/cache/live APIs
  const [news, setNews] = useState<NewsItem[]>([]);
  const [matches, setMatches] = useState<MatchItem[]>([]);
  const [countdown, setCountdown] = useState<string>('');
  const [clubName, setClubName] = useState<string>('');
  const [clubLogo, setClubLogo] = useState<string>('');
  const [standings, setStandings] = useState<any[]>([]);
  const [activeComp, setActiveComp] = useState<number>(0);
  const [sponsorLayout, setSponsorLayout] = useState<'grid'|'slider'|'scroller'|'pyramid'>('grid');
  const [shopUrl, setShopUrl] = useState<string | null>(null);
  const [facebookUrl, setFacebookUrl] = useState<string | null>(null);
  const [instagramUrl, setInstagramUrl] = useState<string | null>(null);
  const [youtubeUrl, setYoutubeUrl] = useState<string | null>(null);
  const [galleryUrl, setGalleryUrl] = useState<string | null>(null);
  const [galleryLabel, setGalleryLabel] = useState<string>('Fotogalerie');
  const [sponsorsTheme, setSponsorsTheme] = useState<'dark'|'light'>('light');
  const [unifiedCategory, setUnifiedCategory] = useState<string>('Vše');
  const [heroStyle, setHeroStyle] = useState<'grid' | 'scroller' | 'swiper' | 'swiper_full'>('grid');
  // Removed: custom styles - using unified only
  // PRO style: hero index
  const [proHeroIndex, setProHeroIndex] = useState<number>(0);
  // EDGE style: hero index and back-to-top button
  const [edgeHeroIndex, setEdgeHeroIndex] = useState<number>(0);
  const [showEdgeTop, setShowEdgeTop] = useState<boolean>(false);
  const [edgeRoleIdx, setEdgeRoleIdx] = useState<number>(0);
  const blogAutoRef = useRef<HTMLDivElement | null>(null);
  // FACR competitions with matches (for slider)
  const [facrCompetitions, setFacrCompetitions] = useState<Array<{ name:string; matches:Array<any>; matches_link?:string }>>([]);
  const [matchesTab, setMatchesTab] = useState<number>(0);
  const [selectedClub, setSelectedClub] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedMatch, setSelectedMatch] = useState<any>(null);
  const [isMatchModalOpen, setIsMatchModalOpen] = useState(false);
  // Index for the NEXT MATCH competition carousel
  const [nextCompIdx, setNextCompIdx] = useState<number>(0);
  const [nextMatchLink, setNextMatchLink] = useState<string | undefined>(undefined);
  // Ref to the draggable matches track and per-competition closest index
  const trackRef = useRef<HTMLDivElement | null>(null);
  const [closestIndexByComp, setClosestIndexByComp] = useState<number[]>([]);

  // API-driven players and sponsors
  type UiPlayer = { id:number|string; name:string; number?:number; position?:string; image?:string; slug?:string };
  type UiSponsor = { id:number|string; name:string; logo:string; url?:string };
  type UiBanner = { id:number|string; name:string; image:string; url?:string; placement?:string; width?:number; height?:number };
  type UiMerch = { id?: number|string; title?: string; image_url: string; url?: string };
  const [players, setPlayers] = useState<UiPlayer[]>([]);
  const [sponsors, setSponsors] = useState<UiSponsor[]>([]);
  const [banners, setBanners] = useState<UiBanner[]>([]);
  const [featured, setFeatured] = useState<NewsItem[]>([]);
  const [videos, setVideos] = useState<string[]>([]);
  const [videosRich, setVideosRich] = useState<Array<{ url:string; title?:string; length?:string; uploaded_at?:string; thumbnail_url?:string }>>([]);
  const [merchItems, setMerchItems] = useState<UiMerch[]>([]);
  const [merchEnabled, setMerchEnabled] = useState<boolean>(false);
  // Aliases
  const [aliases, setAliases] = useState<CompetitionAlias[]>([]);
  const [aliasMap, setAliasMap] = useState<Record<string, { alias: string; original_name?: string }>>({});
  const [settings, setSettings] = useState<any>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  
  // MyUIbrix element configuration hook for live preview
  const { getVariant, isVisible, loading: configLoading } = useAllPageElementConfigs('homepage');

  useEffect(() => {
    let cancelled = false;

    const resolveBackendUrl = (path: string) => {
      try {
        if (/^https?:\/\//i.test(path)) return path;
        if (path.startsWith('/cache') || path.startsWith('/uploads') || path.startsWith('/api/')) {
          const base = process.env.REACT_APP_API_BASE_URL || process.env.REACT_APP_API_URL || 'http://localhost:8080/api/v1';
          const u = new URL(base);
          // We want backend origin root, not /api/v1
          u.pathname = path;
          return u.toString();
        }
        return path;
      } catch {
        return path;
      }
    };

    const fetchJSON = async (url: string) => {
      try {
        const res = await fetch(resolveBackendUrl(url), { cache: 'no-cache' });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return await res.json();
      } catch {
        return null;
      }
    };

    const mapArticles = (data: any): NewsItem[] => {
      if (!data) return [] as any;
      // Try common shapes: {items: []}, {data: []}, []
      const items = Array.isArray(data)
        ? data
        : Array.isArray(data?.items)
        ? data.items
        : Array.isArray(data?.data)
        ? data.data
        : [];
      const mapped: NewsItem[] = items.slice(0, 6).map((a: any, idx: number) => ({
        id: a.id ?? idx + 1,
        title: a.title ?? a.name ?? 'Article',
        excerpt: a.excerpt ?? a.summary ?? a.content?.slice?.(0, 140) ?? '',
        image: a.imageUrl ?? a.image_url ?? a.cover ?? '/images/news/placeholder.jpg',
        date: a.createdAt ?? a.created_at ?? a.publishedAt ?? a.published_at ?? new Date().toISOString(),
        category: a.category?.name ?? a.category ?? 'News',
        slug: a.slug ?? a.urlSlug ?? a.seoSlug ?? undefined,
      }));
      return mapped;
    };

    const mapMatches = (data: any): MatchItem[] => {
      if (!data) return [] as any;
      const items = Array.isArray(data)
        ? data
        : Array.isArray(data?.items)
        ? data.items
        : Array.isArray(data?.data)
        ? data.data
        : [];
      const mapped: MatchItem[] = items.slice(0, 2).map((m: any, idx: number) => ({
        id: m.id ?? idx + 1,
        homeTeam: m.homeTeam ?? m.home_team ?? m.home ?? 'Home',
        awayTeam: m.awayTeam ?? m.away_team ?? m.away ?? 'Away',
        competition: m.competition ?? m.league ?? 'Match',
        date: m.date ?? m.kickoffDate ?? m.kickoff_date ?? new Date().toISOString().slice(0, 10),
        time: m.time ?? m.kickoffTime ?? m.kickoff_time ?? '18:00',
        venue: m.venue ?? 'Stadium',
        isHome: Boolean(m.isHome ?? m.is_home ?? true),
        homeLogoURL: m.homeLogoURL ?? m.HomeLogoURL ?? m.home_logo_url ?? m.home_logo ?? m.homeLogo ?? undefined,
        awayLogoURL: m.awayLogoURL ?? m.AwayLogoURL ?? m.away_logo_url ?? m.away_logo ?? m.awayLogo ?? undefined,
      }));
      return mapped;
    };

    (async () => {
      // Prefer FACR prefetch cache if available
      const [
        articlesJSON,
        matchesJSON,
        cachedSettingsJSON,
        facrClubJSON,
        facrTablesJSON,
        teamLogoOverridesAPI,
        teamLogoOverridesFile,
      ] = await Promise.all([
        fetchJSON('/cache/prefetch/articles.json'),
        fetchJSON('/cache/prefetch/matches.json'),
        fetchJSON('/cache/prefetch/settings.json'),
        fetchJSON('/cache/prefetch/facr_club_info.json'),
        fetchJSON('/cache/prefetch/facr_tables.json'),
        // Prefer public endpoint (cache-busted) for overrides
        fetchJSON(`/api/v1/public/team-logo-overrides?t=${Date.now()}`),
        // Fallback to cached JSON snapshot written by backend after saves
        fetchJSON('/cache/prefetch/team_logo_overrides.json'),
      ]);
      // load aliases (public)
      let aliasesList: CompetitionAlias[] = [];
      try {
        aliasesList = await getCompetitionAliasesPublic();
      } catch {}
      const amap: Record<string, { alias: string; original_name?: string }> = {};
      (aliasesList || []).forEach((a) => { if (a?.code && a?.alias) amap[a.code] = { alias: a.alias, original_name: a.original_name }; });
      // Try live settings API first
      let liveSettings: any = null;
      try {
        liveSettings = await getPublicSettings();
      } catch {}
      if (!cancelled) {
        setNews(mapArticles(articlesJSON));
        setAliases(aliasesList || []);
        setAliasMap(amap);

        // Build override helpers
        const teamLogoOverridesJSON = (teamLogoOverridesAPI && teamLogoOverridesAPI.by_name) ? teamLogoOverridesAPI : (teamLogoOverridesFile || {});
        const byName: Record<string, string> = (teamLogoOverridesJSON?.by_name || {}) as any;
        const normalize = (s: string) => String(s)
          .normalize('NFD')
          .replace(/[\u0300-\u036f]/g, '')
          .replace(/\s+/g, ' ')
          .trim()
          .toLowerCase();
        const stripPrefixes = (s: string) => {
          // Remove common Czech prefixes/words in club names for more robust matching
          // e.g., "Městský fotbalový klub Kravaře" -> "Kravaře"
          let x = normalize(s);
          x = x.replace(/\b(mestsky|m\.?f\.?k\.?|mfk|tj|sk|sokol|fotbalovy|fotbalový|fotbalovy\s+klub|fotbalovy\s+klub)\b/g, '').replace(/\s+/g, ' ').trim();
          return x;
        };
        const byNameNormalized: Record<string, string> = Object.keys(byName || {}).reduce((acc: Record<string, string>, k: string) => {
          acc[normalize(k)] = byName[k];
          return acc;
        }, {});
        const byNameStrippedPairs: Array<{ keyNorm: string; url: string }> = Object.keys(byName || {}).map((k: string) => ({ keyNorm: stripPrefixes(k), url: byName[k] }));
        const getOverrideLogo = (teamName?: string, original?: string) => {
          if (!teamName) return original;
          const exact = (byName || {})[teamName];
          const normName = normalize(teamName);
          let candidate = exact || byNameNormalized[normName];
          if (!candidate) {
            // Try suffix/containment match after stripping prefixes
            const stripped = stripPrefixes(teamName);
            for (const { keyNorm, url } of byNameStrippedPairs) {
              if (!keyNorm) continue;
              if (stripped.endsWith(keyNorm) || keyNorm.endsWith(stripped)) { candidate = url; break; }
            }
          }
          const chosen = candidate || original;
          if (typeof chosen === 'string' && chosen.startsWith('/')) return resolveBackendUrl(chosen);
          return chosen;
        };

        // Matches: map from FACR club info if available, otherwise fallback to matches.json
        if (facrClubJSON?.competitions?.length) {
          const allMatches = (facrClubJSON.competitions || [])
            .flatMap((c: any) =>
              (Array.isArray(c.matches) ? c.matches : []).map((m: any, idx: number) => {
                // m.date_time e.g. "12.08.2023 18:00" -> split
                const dt: string = String(m.date_time || '');
                const [d, t] = dt.includes(' ') ? dt.split(' ') : [dt, ''];
                const [day, month, year] = d.split('.');
                const isoDate = (day && month && year) ? `${year}-${month.padStart(2,'0')}-${day.padStart(2,'0')}` : new Date().toISOString().slice(0,10);
                const time = (t || '18:00').slice(0,5);
                return {
                  id: m.match_id || idx + 1,
                  homeTeam: m.home,
                  awayTeam: m.away,
                  competition: m.competition || m.competition_name || c?.name || c?.code || '',
                  date: isoDate,
                  time,
                  venue: m.venue || '',
                  isHome: facrClubJSON?.name ? (m.home || '').toLowerCase().includes(String(facrClubJSON.name).toLowerCase()) : true,
                  homeLogoURL: getOverrideLogo(m.home, m.home_logo_url),
                  awayLogoURL: getOverrideLogo(m.away, m.away_logo_url),
                  score: m.score,
                  facr_link: m.facr_link,
                  report_url: m.report_url,
                };
              })
            );
          // Sort by datetime and pick upcoming first
          const parseDT = (d: string, t: string) => new Date(`${d}T${(t || '00:00')}:00`).getTime();
          const now = Date.now();
          const upcoming = allMatches
            .map((m: any & { __ts?: number }) => ({
              ...m,
              __ts: parseDT(m.date, m.time)
            }))
            .filter((m: { __ts?: number }) => typeof m.__ts === 'number' && !isNaN(m.__ts!) && (m.__ts as number) >= now)
            .sort((a: { __ts?: number }, b: { __ts?: number }) => (a.__ts as number) - (b.__ts as number))
            .map(({ __ts, ...rest }: any & { __ts?: number }) => rest);
          const chosen = upcoming.length ? upcoming : allMatches;
          setMatches(chosen);

          // Build competitions with their matches for slider
          const comps = (facrClubJSON.competitions || []).map((c: any) => ({
            name: (amap?.[c?.code]?.alias) || c.name || c.code || 'Soutěž',
            matches_link: c.matches_link,
            matches: (Array.isArray(c.matches) ? c.matches : []).map((m: any, idx: number) => {
              const dt: string = String(m.date_time || '');
              const [d, t] = dt.includes(' ') ? dt.split(' ') : [dt, ''];
              const [day, month, year] = (d || '').split('.');
              const isoDate = (day && month && year) ? `${year}-${month.padStart(2,'0')}-${day.padStart(2,'0')}` : new Date().toISOString().slice(0,10);
              const time = (t || '18:00').slice(0,5);
              return {
                id: m.match_id || idx + 1,
                date: isoDate,
                time,
                home: m.home,
                away: m.away,
                home_logo_url: getOverrideLogo(m.home, m.home_logo_url),
                away_logo_url: getOverrideLogo(m.away, m.away_logo_url),
                score: m.score,
                facr_link: m.facr_link,
                report_url: m.report_url,
                venue: m.venue || '',
              };
            })
          }));
          setFacrCompetitions(comps);

          // Compute closest match index per competition to current time
          const nowTs = Date.now();
          const closestIdx: number[] = comps.map((c: { matches: any[] }) => {
            let bestIdx = -1;
            let bestDiff = Number.POSITIVE_INFINITY;
            (c.matches || []).forEach((m: any, idx: number) => {
              const ts = new Date(`${m.date}T${(m.time || '00:00')}:00`).getTime();
              if (!isNaN(ts)) {
                const diff = Math.abs(ts - nowTs);
                if (diff < bestDiff) { bestDiff = diff; bestIdx = idx; }
              }
            });
            return bestIdx;
          });
          setClosestIndexByComp(closestIdx);

          // Next match FACR link
          const first = chosen?.[0];
          setNextMatchLink((first && (first.facr_link || first.report_url)) || comps?.[0]?.matches_link || facrClubJSON?.url);
        } else {
          setMatches(mapMatches(matchesJSON));
        }

        const settingsJSON = liveSettings || cachedSettingsJSON;
        setSettings(settingsJSON);
        if (settingsJSON) {
          const name = settingsJSON?.club_name || settingsJSON?.clubName || settingsJSON?.name || settingsJSON?.siteName;
          const logo = settingsJSON?.club_logo_url || settingsJSON?.clubLogo || settingsJSON?.logo || settingsJSON?.logoUrl || settingsJSON?.logoURL;
          if (name) setClubName(name);
          if (logo) setClubLogo(logo);

          // Load players via API
          try {
            const apiPlayers: ApiPlayer[] = await apiGetPlayers();
            const mappedPlayers: UiPlayer[] = (apiPlayers || []).map((p: ApiPlayer) => ({
              id: p.id,
              name: [p.first_name, p.last_name].filter(Boolean).join(' '),
              number: p.jersey_number,
              position: p.position,
              image: assetUrl(p.image_url) || undefined,
            }));
            setPlayers(mappedPlayers);
          } catch {}

          // Load sponsors via API (also used for banners with placement metadata)
          try {
            const apiSponsors: ApiSponsor[] = await apiGetSponsors();
            const mapped: UiSponsor[] = (apiSponsors || []).map((s: ApiSponsor) => ({
              id: s.id,
              name: s.name,
              logo: assetUrl(s.logo_url) || '/images/sponsors/placeholder.png',
              url: s.website_url || undefined,
            }));
            setSponsors(mapped);
            // Extract banners by placement metadata if provided
            const mappedBanners: UiBanner[] = (apiSponsors || [])
              .filter((s: any) => s && (s as any).placement)
              .map((s: any) => ({
                id: s.id,
                name: s.name,
                image: assetUrl(s.logo_url) || '/images/sponsors/placeholder.png',
                url: s.website_url || undefined,
                placement: s.placement,
                width: typeof s.width === 'number' ? s.width : undefined,
                height: typeof s.height === 'number' ? s.height : undefined,
              }));
            if (mappedBanners.length) setBanners(mappedBanners);
          } catch {}

          // Load featured articles (homepage primary) via API
          try {
            const resp = await apiGetArticles({ featured: true, page_size: 3 });
            const items = (resp?.data || []).map((a: ApiArticle, idx: number) => ({
              id: a.id ?? idx + 1,
              title: a.title,
              excerpt: (a as any).excerpt || (a.content || '').slice(0, 140),
              image: (a as any).image || a.image_url || '/images/news/placeholder.jpg',
              date: a.created_at || new Date().toISOString(),
              category: 'Aktuality',
              slug: a.slug,
            }));
            setFeatured(items);
            // Ensure non-featured 'news' excludes featured items
            setNews((prev) => {
              const featuredKeys = new Set(items.map((f) => (f.slug ? `s:${f.slug}` : `i:${f.id}`)));
              return (prev || []).filter((n) => !featuredKeys.has(n.slug ? `s:${n.slug}` : `i:${n.id}`));
            });
          } catch {}

          // Shop URL for merchandise CTA
          const shop = settingsJSON?.shop_url || settingsJSON?.shopUrl || settingsJSON?.eshop_url || settingsJSON?.e_shop_url || null;
          if (shop) setShopUrl(String(shop));
          // Hero style variant
          const hs = settingsJSON?.hero_style || settingsJSON?.homepage?.hero_style || settingsJSON?.frontpage_hero_style;
          if (hs === 'grid' || hs === 'scroller' || hs === 'swiper' || hs === 'swiper_full') setHeroStyle(hs);
          // Sponsor layout preference: 'grid' or 'slider'
          const sponsorPref = settingsJSON?.homepage?.sponsors_layout || settingsJSON?.sponsors_layout || settingsJSON?.sponsorsLayout;
          if (sponsorPref === 'slider' || sponsorPref === 'grid' || sponsorPref === 'scroller' || sponsorPref === 'pyramid') {
            setSponsorLayout(sponsorPref);
          }
          // Sponsors theme: dark or light
          const sTheme = settingsJSON?.sponsors_theme || settingsJSON?.homepage?.sponsors_theme || settingsJSON?.sponsorsTheme;
          if (sTheme === 'dark' || sTheme === 'light') setSponsorsTheme(sTheme);
          // Sponsors data, if present in settings/cache
          const sponsorsData = settingsJSON?.sponsors || settingsJSON?.partners || null;
          if (Array.isArray(sponsorsData) && sponsorsData.length) {
            setSponsors(
              sponsorsData.map((s: any, i: number) => ({
                id: s.id ?? i + 1,
                name: s.name || 'Sponsor',
                logo: s.logo_url || s.logoUrl || s.logo || '/images/sponsors/placeholder.png',
                url: s.url || s.website || s.link || '#',
              }))
            );
          }
          // Socials & gallery
          setFacebookUrl(settingsJSON?.facebook_url || null);
          setInstagramUrl(settingsJSON?.instagram_url || null);
          setYoutubeUrl(settingsJSON?.youtube_url || null);
          setGalleryUrl(settingsJSON?.gallery_url || settingsJSON?.zonerama_url || null);
          setGalleryLabel(settingsJSON?.gallery_label || 'Fotogalerie');
          // Removed: custom style selection - using unified only
          // Videos (optional)
          if (Array.isArray(settingsJSON?.videos)) setVideos(settingsJSON.videos as string[]);
          if (Array.isArray(settingsJSON?.videos_items)) setVideosRich(settingsJSON.videos_items as any);
          // Merch (optional)
          if (typeof settingsJSON?.merch_module_enabled === 'boolean') setMerchEnabled(!!settingsJSON.merch_module_enabled);
          if (Array.isArray(settingsJSON?.merch_items)) setMerchItems((settingsJSON.merch_items as any[]).map((m:any, i:number)=> ({ id: m.id ?? i, title: m.title, image_url: m.image_url, url: m.url })));
        }
        // Standings: prefer FACR tables JSON
        if (facrTablesJSON?.competitions?.length) {
          const comps = (facrTablesJSON.competitions || []).map((c: any) => ({
            name: (amap?.[c?.code]?.alias) || c.name || c.code,
            table: (c.table?.overall || []).map((r: any, idx: number) => ({
              position: Number(r.rank || idx + 1),
              team: r.team || r.team_name || '-',
              team_logo_url: r.team_logo_url,
              points: Number(r.points || r.pts || 0),
              played: Number(r.played || 0),
              wins: Number(r.wins || 0),
              draws: Number(r.draws || 0),
              losses: Number(r.losses || 0),
              score: r.score || '0:0',
            })),
          }));
          setStandings(comps);
        }

        // Club name/logo from FACR if not provided by settings
        if (facrClubJSON) {
          if (facrClubJSON.name && !clubName) setClubName(facrClubJSON.name);
          if (facrClubJSON.logo_url && !clubLogo) setClubLogo(facrClubJSON.logo_url);
          // If settings did not override, still prefer FACR values
          if (facrClubJSON.name) setClubName(facrClubJSON.name);
          if (facrClubJSON.logo_url) setClubLogo(facrClubJSON.logo_url);
        }
        
        // Mark loading complete
        setIsLoading(false);
      }
    })();

    return () => {
      cancelled = true;
    };
  }, []);

  // Auto-scroll matches track to the closest match for current tab
  useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    const idx = (closestIndexByComp[matchesTab] ?? 0);
    const child = el.children?.[idx] as HTMLElement | undefined;
    if (!child) return;
    const run = () => {
      const targetLeft = child.offsetLeft - (el.clientWidth - child.clientWidth) / 2;
      el.scrollTo({ left: Math.max(0, targetLeft), behavior: 'smooth' });
    };
    // Wait for layout
    if (typeof requestAnimationFrame !== 'undefined') {
      requestAnimationFrame(run);
    } else {
      setTimeout(run, 0);
    }
  }, [facrCompetitions, matchesTab, closestIndexByComp]);

  // Auto-theme from club logo dominant color
  useEffect(() => {
    if (!clubLogo) return;
    let disposed = false;

    const toHex = (v: number) => {
      const h = Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0');
      return h;
    };
    const rgbToHex = (r: number, g: number, b: number) => `#${toHex(r)}${toHex(g)}${toHex(b)}`;
    const lighten = (r: number, g: number, b: number, amt = 20) => [
      Math.min(255, r + amt),
      Math.min(255, g + amt),
      Math.min(255, b + amt),
    ] as const;
    const darkenIfLowContrast = (r: number, g: number, b: number) => {
      // ensure contrast versus white text (used in .next-match)
      const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255; // 0..1
      if (luminance > 0.75) {
        // too light, darken
        return [r * 0.6, g * 0.6, b * 0.6] as const;
      }
      return [r, g, b] as const;
    };

    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = assetUrl(clubLogo) || clubLogo;
    img.onload = () => {
      if (disposed) return;
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      if (!ctx) return;
      const w = 100, h = 100;
      canvas.width = w; canvas.height = h;
      try {
        ctx.drawImage(img, 0, 0, w, h);
        const data = ctx.getImageData(0, 0, w, h).data;
        let r = 0, g = 0, b = 0, n = 0;
        for (let i = 0; i < data.length; i += 4) {
          const a = data[i + 3];
          if (a < 64) continue; // skip transparent
          const rr = data[i], gg = data[i + 1], bb = data[i + 2];
          // skip near-white background pixels to better catch logo color
          if (rr > 240 && gg > 240 && bb > 240) continue;
          r += rr; g += gg; b += bb; n++;
        }
        if (n > 0) {
          r /= n; g /= n; b /= n;
          // adjust for readability
          [r, g, b] = darkenIfLowContrast(r, g, b);
          const [lr, lg, lb] = lighten(r, g, b, 24);
          const primary = rgbToHex(r, g, b);
          const primaryLight = rgbToHex(lr, lg, lb);
          // secondary: golden fallback if color is blueish, else a subtle accent
          const isBlueish = b > r && b > g;
          const secondary = isBlueish ? '#d69e2e' : '#2c5282';
          const root = document.documentElement;
          root.style.setProperty('--primary', primary);
          root.style.setProperty('--primary-light', primaryLight);
          root.style.setProperty('--secondary', secondary);
        }
      } catch {
        // ignore CORS or canvas tainting
      }
    };
    return () => { disposed = true; };
  }, [clubLogo]);

  // MyUIbrix events are handled by useAllPageElementConfigs hook
  // It automatically updates getVariant() and isVisible() when changes occur in edit mode

  // Countdown to next match (uses selected competition upcoming if available)
  useEffect(() => {
    const getUpcomingForComp = (c: any) => {
      const items = Array.isArray(c?.matches) ? c.matches : [];
      const future = items
        .map((m: any) => ({ m, t: new Date(`${m.date}T${(m.time || '00:00')}:00`).getTime() }))
        .filter((x: any) => !isNaN(x.t) && x.t > Date.now())
        .sort((a: any, b: any) => a.t - b.t);
      return future[0]?.m || null;
    };
    const getNextKickoff = () => {
      if (facrCompetitions.length) {
        const sel = facrCompetitions[Math.max(0, Math.min(matchesTab, facrCompetitions.length - 1))];
        const up = getUpcomingForComp(sel);
        if (up) {
          const iso = `${up.date}T${(up.time || '00:00')}:00`;
          const d = new Date(iso);
          return isNaN(d.getTime()) ? null : d;
        }
      }
      if (!matches.length) return null;
      const m = matches[0];
      const iso = `${m.date}T${(m.time || '00:00')}:00`;
      const d = new Date(iso);
      return isNaN(d.getTime()) ? null : d;
    };
    const update = () => {
      const next = getNextKickoff();
      if (!next) { setCountdown(''); return; }
      const diff = next.getTime() - Date.now();
      if (diff <= 0) { setCountdown('Začátek'); return; }
      const s = Math.floor(diff / 1000);
      const days = Math.floor(s / 86400);
      const hrs = Math.floor((s % 86400) / 3600);
      const mins = Math.floor((s % 3600) / 60);
      const secs = s % 60;
      setCountdown(`${days} d ${hrs} h ${mins} m ${secs} s`);
    };
    update();
    const id = setInterval(update, 1000);
    return () => clearInterval(id);
  }, [matches, facrCompetitions, matchesTab]);

  // Removed: Edge auto-cycle

  // Removed: Aurora layout
  if (false) {
    const heroItems = [...featured, ...news].slice(0, 3);
    const top = heroItems[0] || news[0];
    return (
      <MainLayout>
        <div className="aurora">
          <section className="aurora-hero">
            <div className="bg" style={{ backgroundImage: `url(${assetUrl(top?.image) || '/images/news/placeholder.jpg'})` }} />
            <div className="gradient" aria-hidden />
            <div className="glow" aria-hidden />
            <div className="content">
              <img className="logo" src={assetUrl(clubLogo) || '/images/club-logo.png'} alt="Klub" />
              <h1 className="title">{clubName || 'Fotbal Club'}</h1>
              {top && (<a className="pill" href={`/news/${top.slug || top.id}`}>{top.title}</a>)}
              <div className="quick">
                {galleryUrl && (<a href={galleryUrl || undefined} target="_blank" rel="noreferrer noopener">{galleryLabel}</a>)}
                {facebookUrl && (<a href={facebookUrl || undefined} target="_blank" rel="noreferrer noopener">Facebook</a>)}
                {instagramUrl && (<a href={instagramUrl || undefined} target="_blank" rel="noreferrer noopener">Instagram</a>)}
                {youtubeUrl && (<a href={youtubeUrl || undefined} target="_blank" rel="noreferrer noopener">YouTube</a>)}
              </div>
            </div>
          </section>

          <section className="aurora-main">
            <div className="card matches">
              <div className="head">
                <h3>Nejbližší zápasy</h3>
                <div className="tabs">
                  {facrCompetitions.map((c, i) => (
                    <button key={`${c.name}-${i}`} className={i===matchesTab ? 'active' : ''} onClick={()=>setMatchesTab(i)}>{c.name}</button>
                  ))}
                </div>
              </div>
              <div className="list">
                {(facrCompetitions[matchesTab]?.matches || []).slice(0,4).map((m:any, idx:number) => (
                  <a key={m.id || idx} className="row" href={m.facr_link || m.report_url || '#'} target="_blank" rel="noopener noreferrer">
                    <div className="team"><img src={assetUrl(m.home_logo_url)} alt={m.home} /><span>{sanitizeClubName(m.home)}</span></div>
                    <div className="meta"><span>{new Date(`${m.date}T${(m.time||'00:00')}:00`).toLocaleDateString()}</span><span>•</span><span>{m.time || ''}</span></div>
                    <div className="team"><img src={assetUrl(m.away_logo_url)} alt={m.away} /><span>{sanitizeClubName(m.away)}</span></div>
                  </a>
                ))}
              </div>
              <div className="action"><a className="btn" href="/kalendar">Všechny zápasy</a></div>
            </div>

            <div className="card news">
              <div className="head"><h3>Aktuality</h3></div>
              <div className="grid">
                {news.slice(0,6).map((n)=> (
                  <a key={n.id} href={`/news/${n.slug || n.id}`} className="n">
                    <div className="thumb" style={{ backgroundImage: `url(${assetUrl(n.image) || '/images/news/placeholder.jpg'})` }} />
                    <div className="meta"><div className="tag">{n.category || 'Aktuality'}</div><div className="title">{n.title}</div></div>
                  </a>
                ))}
              </div>
              <div className="action"><a className="btn" href="/news">Další články</a></div>
            </div>

            {/* Merch section (Aurora) */}
            <div className="card" style={{ marginTop: 24 }}>
              <MerchSection />
            </div>

            <div className="card tables">
              <div className="head"><h3>Tabulky</h3></div>
              <div className="tabs small">
                {(standings.length ? standings.map((s:any)=> s.name || 'Soutěž') : ['Liga']).map((t: string, i: number) => (
                  <button key={`${t}-${i}`} className={i===activeComp ? 'active' : ''} onClick={()=>setActiveComp(i)}>{t}</button>
                ))}
              </div>
              <div className="table">
                {(standings[activeComp]?.table || standings[activeComp]?.rows || []).slice(0,8).map((row:any, idx:number) => (
                  <div key={idx} className="tr"><span>#{row.position ?? row.pos ?? idx+1}</span><span className="team">{row.team?.name ?? row.team ?? row.club ?? '-'}</span><span>{row.points ?? row.pts ?? '-'}</span></div>
                ))}
              </div>
              <div className="action"><a className="btn" href="/tabulky">Zobrazit vše</a></div>
            </div>
          </section>

          {sponsors.length > 0 && (
            <section className="aurora-sponsors">
              <div className="belt">
                {[...sponsors, ...sponsors].slice(0, Math.max(8, sponsors.length)).map((s, idx) => (
                  <a key={`${s.id}-${idx}`} className="tile" href={s.url || '#'} target="_blank" rel="noreferrer noopener"><img src={assetUrl(s.logo) || '/images/sponsors/placeholder.png'} alt={s.name} /></a>
                ))}
              </div>
            </section>
          )}
        </div>
      </MainLayout>
    );
  }

  // Removed: Magazine layout
  if (false) {
    return (
      <MainLayout>
        <div className="magazine">
          {/* Top color bars */}
          <div className="mag-bars" aria-hidden>
            <div className="c1" />
            <div className="c2" />
          </div>
          <div className="mag-container">
            {/* Club header */}
            <header className="mag-header">
              <div className="club-colors">
                <span className="swatch" style={{ background: 'var(--primary)' }} />
                <span className="swatch" style={{ background: 'var(--secondary)' }} />
              </div>
              <div className="brand">
                <img className="logo" src={assetUrl(clubLogo) || '/images/club-logo.png'} alt="Klub" />
                <h1 className="name">{clubName || 'Fotbal Club'}</h1>
              </div>
              {/* Category nav in club color (optional) */}
              <nav className="mag-nav" aria-label="Sekce webu">
                <a href="/" className="link">Domů</a>
                <a href="/blog" className="link">Aktuality</a>
                <a href="/kalendar" className="link">Kalendář</a>
                <a href="/tabulky" className="link">Tabulky</a>
                <a href="/kontakt" className="link">Kontakt</a>
              </nav>
            </header>

            {/* 3-feature grid like in picture */}
            <section className="mag-hero">
              {[0,1,2].map((i) => {
                const n = featured[i] || news[i];
                if (!n) return (
                  <a key={`ph-${i}`} className="mag-card" href="#" aria-hidden />
                );
                return (
                  <a key={n.id} href={`/news/${n.slug || n.id}`} className={`mag-card ${i===0 ? 'large' : ''}`}>
                    <div className="bg" style={{ backgroundImage: `url(${assetUrl(n.image) || '/images/news/placeholder.jpg'})` }} />
                    <div className="overlay">
                      <div className="cat">{n.category || 'Aktuality'}</div>
                      <h2 className="title">{n.title}</h2>
                    </div>
                  </a>
                );
              })}
            </section>

            {/* Upcoming matches slider (2 visible), with competition switcher */}
            {facrCompetitions.length > 0 && (
              <section className="mag-upcoming">
                <div className="head">
                  <h3>Nejbližší zápasy</h3>
                  <div className="tabs">
                    {facrCompetitions.map((c, i) => (
                      <button key={`${c.name}-${i}`} className={i===matchesTab ? 'active' : ''} onClick={() => setMatchesTab(i)}>{c.name}</button>
                    ))}
                  </div>
                </div>
                <div className="match-slider">
                  {(facrCompetitions[matchesTab]?.matches || []).map((m:any, idx:number) => (
                    <a key={m.id || idx} className="match-tile" href={m.facr_link || m.report_url || '#'} target="_blank" rel="noopener noreferrer">
                      <div className="row top">
                        <span className="meta">{new Date(`${m.date}T${(m.time||'00:00')}:00`).toLocaleDateString()} • {(m.time||'')}</span>
                      </div>
                      <div className="row teams">
                        <div className="team">
                          <img src={assetUrl(m.home_logo_url)} alt={m.home} />
                          <span>{sanitizeClubName(m.home)}</span>
                        </div>
                        <span className="vs">vs</span>
                        <div className="team">
                          <img src={assetUrl(m.away_logo_url)} alt={m.away} />
                          <span>{sanitizeClubName(m.away)}</span>
                        </div>
                      </div>
                    </a>
                  ))}
                </div>
              </section>
            )}
            <aside className="col right">
                <div className="widget">
                  <h3>Tabulky</h3>
                  {standings.length ? (
                    <div>
                      {(standings[activeComp]?.table || standings[activeComp]?.rows || []).slice(0,8).map((row: any, idx: number) => (
                        <div key={idx} className="row-table">
                          <div>#{row.position ?? row.pos ?? idx+1}</div>
                          <div className="team">{row.team?.name ?? row.team ?? row.club ?? '-'}</div>
                          <div>{row.points ?? row.pts ?? '-'}</div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="muted">Zde se zobrazí tabulky podle soutěží.</div>
                  )}
                </div>
                <div className="widget">
                  <h3>O klubu</h3>
                  <p className="muted">{clubName} – oficiální web klubu. Sledujte novinky, zápasy a tabulky.</p>
                </div>
              </aside>
            </div>

            {/* Merch section (Magazine) - optional via settings */}
            <section className="mag-merch" style={{ marginTop: 16, marginBottom: 16 }}>
              <div className="mag-container">
                <MerchSection />
              </div>
            </section>

            {/* Sponsors: grid or slider (controlled by settings) */}
            <section
              className={`sponsors ${sponsorsTheme === 'dark' ? 'dark' : ''}`}
              style={{
                width: '100vw',
                position: 'relative',
                left: '50%',
                right: '50%',
                transform: 'translateX(-50%)',
                paddingLeft: 'max(16px, calc((100vw - 1200px) / 2))',
                paddingRight: 'max(16px, calc((100vw - 1200px) / 2))',
                boxSizing: 'border-box',
              }}
            >
              <div className="section-head">
                <h3>Sponzoři</h3>
              </div>
              {(sponsorLayout==='grid' || sponsorLayout==='pyramid') ? (
                (()=>{
                  const title = sponsors.find((s:any)=>s.tier==='title') || sponsors[0];
                  const others = sponsors.filter((s)=>s !== title);
                  return (
                    <>
                      {title && (
                        <div className="title-sponsor">
                          <a className="sponsor-tile" href={title.url || '#'} target="_blank" rel="noreferrer noopener">
                            <img src={assetUrl(title.logo) || '/images/sponsors/placeholder.png'} alt={title.name} />
                          </a>
                        </div>
                      )}
                      <div className="divider" aria-hidden />
                      <div className="sponsors-grid">
                        {others.map((s) => (
                          <a key={s.id} className="sponsor-tile" href={s.url || '#'} target="_blank" rel="noreferrer noopener">
                            <img src={assetUrl(s.logo) || '/images/sponsors/placeholder.png'} alt={s.name} />
                          </a>
                        ))}
                      </div>
                    </>
                  );
                })()
              ) : sponsorLayout==='slider' ? (
                <div className="sponsors-slider">
                  <div className="track">
                    {[...sponsors, ...sponsors].map((s, idx) => (
                      <a key={`${s.id}-${idx}`} className="sponsor-tile" href={s.url || '#'} target="_blank" rel="noreferrer noopener">
                        <img src={assetUrl(s.logo) || '/images/sponsors/placeholder.png'} alt={s.name} />
                      </a>
                    ))}
                  </div>
                </div>
              ) : (
                <div className="sponsors-scroller">
                  <div className="belt">
                    {[...sponsors, ...sponsors, ...sponsors].map((s, idx) => (
                      <a key={`${s.id}-${idx}`} className="sponsor-tile" href={s.url || '#'} target="_blank" rel="noreferrer noopener">
                        <img src={assetUrl(s.logo) || '/images/sponsors/placeholder.png'} alt={s.name} />
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </section>
        </div>
      </MainLayout>
    );
  }

  // Removed: Edge layout
  if (false) {
    const heroItems = [...featured, ...news].slice(0, 5);
    const heroItem = heroItems[edgeHeroIndex];
    const splitTitle = (t?: string) => {
      if (!t) return { em: '', strong: '' } as const;
      const parts = t.split(' ');
      const n = Math.max(1, Math.floor(parts.length / 3));
      return { em: parts.slice(0, n).join(' '), strong: parts.slice(n).join(' ') } as const;
    };
    const { em, strong } = splitTitle(heroItem?.title);
    const heroKeys = new Set(heroItems.map((f) => (f?.slug ? `s:${f.slug}` : `i:${f?.id}`)));
    const restBlogs = (news || []).filter((n) => !heroKeys.has(n.slug ? `s:${n.slug}` : `i:${n.id}`));
    const videoUrlToEmbed = (u: string) => {
      try {
        if (/youtu\.be\//i.test(u)) { const id = u.split('/').pop(); return `https://www.youtube.com/embed/${id}`; }
        const m = u.match(/v=([^&]+)/); if (m) return `https://www.youtube.com/embed/${m[1]}`;
      } catch {}
      return u;
    };
    return (
      <MainLayout>
        <div className="edge">
          <section className="edge-hero bleed">
            <div className="slides">
              {heroItems.map((n, i) => (
                <a key={n?.id || i} href={n ? `/news/${n.slug || n.id}` : '#'} className={`slide ${i===edgeHeroIndex ? 'active' : ''}`} style={{ backgroundImage: `url(${assetUrl(n?.image) || '/images/news/placeholder.jpg'})` }}>
                  <div className="overlay">
                    <h2 className="title"><span className="em">{em}</span>{em ? ' ' : ''}<span className="strong">{strong}</span></h2>
                    {n && <a className="link" href={`/news/${n.slug || n.id}`}>Přejít na článek</a>}
                  </div>
                </a>
              ))}
              <div className="pagers">
                {heroItems.map((_, i) => (
                  <button key={i} className={`pager ${i===edgeHeroIndex ? 'active' : ''}`} onClick={()=>setEdgeHeroIndex(i)}>{i+1}</button>
                ))}
              </div>
            </div>
          </section>

          {facrCompetitions.length > 0 && (()=>{
            const comp = facrCompetitions[Math.max(0, Math.min(matchesTab, facrCompetitions.length - 1))];
            const items = Array.isArray(comp?.matches) ? comp.matches : [];
            const upcoming = items
              .map((m: any) => ({ m, t: new Date(`${m.date}T${(m.time || '00:00')}:00`).getTime() }))
              .filter((x: any) => !isNaN(x.t) && x.t > Date.now())
              .sort((a: any, b: any) => a.t - b.t)[0]?.m;
            const show = upcoming || items[0] || null;
            const isFuture = show ? (new Date(`${show.date}T${(show.time||'00:00')}:00`).getTime() > Date.now()) : false;
            return (
              <section className="edge-upcoming">
                <div className="head">
                  <h3>Nejbližší zápasy</h3>
                  <div className="tabs">
                    {facrCompetitions.map((c, i) => (
                      <button key={`${c.name}-${i}`} className={i===matchesTab ? 'active' : ''} onClick={()=>setMatchesTab(i)}>{c.name}</button>
                    ))}
                  </div>
                </div>
                <div className="card">
                  <div className="team">
                    <img src={assetUrl(show?.home_logo_url) || assetUrl(clubLogo) || '/images/club-logo.png'} alt="Domácí" />
                    <div>{show?.home || clubName}</div>
                  </div>
                  <div className="meta">
                    {isFuture ? <><div style={{ fontWeight: 800 }}>{countdown || '—'}</div><div>Začátek</div></> : <div style={{ fontWeight: 800 }}>{show?.score || '—'}</div>}
                  </div>
                  <div className="team">
                    <img src={assetUrl(show?.away_logo_url) || '/images/club-opponent.png'} alt="Hosté" />
                    <div>{show?.away || 'Soupeř'}</div>
                  </div>
                </div>
                <div className="links">
                  {show && (show.facr_link || show.report_url) && <a href={show.facr_link || show.report_url} target="_blank" rel="noreferrer noopener">Detail na FACR</a>}
                  <a href="#edge-tables">Tabulky</a>
                  <a href="/kalendar">Všechny zápasy</a>
                </div>
              </section>
            );
          })()}

          <section className="edge-grid">
            <div className="left">
              <div className="blogs4">
                {restBlogs.slice(0,4).map((n) => (
                  <a key={n.id} href={`/news/${n.slug || n.id}`} className="bcard">
                    <div className="thumb" style={{ backgroundImage: `url(${assetUrl(n.image) || '/images/news/placeholder.jpg'})` }} />
                    <div className="meta">{n.title}</div>
                  </a>
                ))}
              </div>
              <div style={{ marginTop: 10 }}>
                <a className="btn" href="/news">Všechny aktuality</a>
              </div>
            </div>
            <aside className="right" id="edge-tables">
              <div className="tables">
                <div className="tabs">
                  {(standings.length ? standings.map((s:any)=> s.name || 'Soutěž') : ['Liga']).map((t: string, i: number) => (
                    <button key={`${t}-${i}`} className={i===activeComp ? 'active' : ''} onClick={()=>setActiveComp(i)}>{t}</button>
                  ))}
                </div>
                {standings.length ? (
                  <div>
                    {(standings[activeComp]?.table || standings[activeComp]?.rows || []).slice(0,10).map((row: any, idx: number) => (
                      <div className="row" key={idx}>
                        <div>#{row.position ?? row.pos ?? idx+1}</div>
                        <div>{row.team?.name ?? row.team ?? row.club ?? '-'}</div>
                        <div>{row.points ?? row.pts ?? '-'}</div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div style={{ color: 'var(--dark-gray)' }}>Tabulky ještě nejsou k dispozici.</div>
                )}
              </div>
            </aside>
          </section>

          {(videosRich.length > 0 || (Array.isArray(videos) && videos.length > 0)) && (
            <section className="edge-videos">
              <div className="wrap">
                <div className="main">
                  {videosRich.length > 0 ? (
                    <iframe title="video-main" src={videoUrlToEmbed(videosRich[0].url)} allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />
                  ) : (
                    <iframe title="video-main" src={videoUrlToEmbed(videos[0])} allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />
                  )}
                </div>
                <div className="grid4">
                  {(videosRich.length > 0 ? videosRich.slice(1,5).map(v=>v.url) : videos.slice(1,5)).map((v, i) => (
                    <div key={i} className="small"><a href={v} target="_blank" rel="noreferrer noopener" /></div>
                  ))}
                </div>
              </div>
            </section>
          )}

          {players.length > 0 && (
            <section className="edge-team">
              {(() => {
                const roles = Array.from(new Set(players.map((p:any)=> p.position || 'Tým')));
                const role = roles[Math.max(0, Math.min(edgeRoleIdx, roles.length - 1))];
                const items = players.filter((p:any)=> (p.position || 'Tým') === role);
                return (
                  <>
                    <div className="tabs">
                      {roles.map((r, i)=> (
                        <button key={r + i} className={i===edgeRoleIdx? 'active' : ''} onClick={()=>setEdgeRoleIdx(i)}>{r}</button>
                      ))}
                    </div>
                    <div className="track">
                      {items.map((p)=> (
                        <div key={p.id} className="card">
                          <div className="photo" style={{ backgroundImage: `url(${assetUrl((p as any).image) || '/images/player-placeholder.jpg'})` }} />
                          <div className="name">{p.name}</div>
                          <div className="role">{p.position || 'Hráč'}</div>
                          <div className="number">#{p.number || '—'}</div>
                        </div>
                      ))}
                    </div>
                  </>
                );
              })()}
            </section>
          )}

          {merchEnabled && (shopUrl || merchItems.length > 0) && (
            <section className="edge-merch">
              <div className="head" style={{ marginBottom: 8 }}><h3>Oblečení týmu</h3></div>
              <div className="grid">
                {(merchItems.length > 0 ? merchItems.map((m)=> ({ id: m.id, name: m.title, image: m.image_url, url: m.url })) : (banners || []).filter((b:any)=> (b.placement === 'merch' || b.placement === 'homepage_merch'))).slice(0,8).map((it:any) => (
                  <a key={it.id} className="item" href={it.url || shopUrl || '#'} target="_blank" rel="noreferrer noopener">
                    <div className="thumb" style={{ backgroundImage: `url(${it.image})` }} />
                    <div className="meta">{it.name || 'Fanshop'}</div>
                  </a>
                ))}
              </div>
            </section>
          )}

          {sponsors.length > 0 && (
            <section className="edge-sponsors">
              <div className="grid">
                {sponsors.map((s) => (
                  <a key={s.id} className="tile" href={s.url || '#'} target="_blank" rel="noreferrer noopener">
                    <img src={assetUrl(s.logo) || '/images/sponsors/placeholder.png'} alt={s.name} />
                  </a>
                ))}
              </div>
            </section>
          )}

          <div className={`edge-top ${showEdgeTop ? 'show' : ''}`}>
            <button className="btn" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>Nahoru</button>
          </div>
        </div>
      </MainLayout>
    );
  }

  // Removed: Pro layout
  // if (false) {
  //   const heroItems = [...featured, ...news].slice(0, 5);
  //   return (
  //     <MainLayout>
  //       <div className="pro">
  //         {/* Fullscreen hero with numeric pagers and glow */}
  //         <section className="pro-hero">
  //           <div className="slides">
  //             {heroItems.map((n, i) => (
  //               <a
  //                 key={n.id}
  //                 href={`/news/${n.slug || n.id}`}
  //                 className={`slide ${i===proHeroIndex ? 'active' : ''}`}
  //                 aria-hidden={i!==proHeroIndex}
  //                 style={{ backgroundImage: `url(${assetUrl(n.image) || '/images/news/placeholder.jpg'})` }}
  //               >
  //                 <div className="overlay">
  //                   <h2 className="title">{n.title}</h2>
  //                 </div>
  //               </a>
  //             ))}
  //             <div className="glow" aria-hidden />
  //             <div className="pagers">
  //               {heroItems.map((_, i) => (
  //                 <button key={i} className={`pager ${i===proHeroIndex ? 'active' : ''}`} aria-label={`Slide ${i+1}`} onClick={()=>setProHeroIndex(i)}>{i+1}</button>
  //               ))}
  //             </div>
  //           </div>
  //         </section>

  //         {/* Main two-column grid */}
  //         <div className="pro-container">
  //           <section className="pro-grid">
  //             {/* Left column */}
  //             <div className="col left">
  //               {/* Matches by competitions with switcher and horizontal scroller */}
  //               {facrCompetitions.length > 0 && (
  //                 <div className="widget">
  //                   <div className="head">
  //                     <h3>Nejbližší zápasy</h3>
  //                     <div className="tabs">
  //                       {facrCompetitions.map((c, i) => (
  //                         <button key={`${c.name}-${i}`} className={i===matchesTab ? 'active' : ''} onClick={() => setMatchesTab(i)}>{c.name}</button>
  //                       ))}
  //                     </div>
  //                   </div>
  //                   <div className="match-scroller">
  //                     {(facrCompetitions[matchesTab]?.matches || []).map((m:any, idx:number) => (
  //                       <a key={m.id || idx} className="mcard" href={m.facr_link || m.report_url || '#'} target="_blank" rel="noopener noreferrer">
  //                         <div className="row meta">
  //                           <span>{new Date(`${m.date}T${(m.time||'00:00')}:00`).toLocaleDateString()}</span>
  //                           <span>•</span>
  //                           <span>{m.time || ''}</span>
  //                         </div>
  //                         <div className="row teams">
  //                           <div className="team">
  //                             <img src={assetUrl(m.home_logo_url)} alt={m.home} />
  //                             <span>{m.home}</span>
  //                           </div>
  //                           <span className="vs">vs</span>
  //                           <div className="team">
  //                             <img src={assetUrl(m.away_logo_url)} alt={m.away} />
  //                             <span>{m.away}</span>
  //                           </div>
  //                         </div>
  //                       </a>
  //                     ))}
  //                   </div>
  //                   <div className="more"><a href="/kalendar" className="btn">Všechny zápasy</a></div>
  //                 </div>
  //               )}

  //               {/* Blogs auto scroller with arrows */}
  //               <div className="widget">
  //                 <div className="head">
  //                   <h3>Aktuality</h3>
  //                   <div className="arrows" aria-hidden>
  //                     <button className="prev" aria-label="Zpět" onClick={()=>{ const el = blogAutoRef.current; if (el) el.scrollBy({ left: -280, behavior: 'smooth' }); }}>‹</button>
  //                     <button className="next" aria-label="Vpřed" onClick={()=>{ const el = blogAutoRef.current; if (el) el.scrollBy({ left: 280, behavior: 'smooth' }); }}>›</button>
  //                   </div>
  //                 </div>
  //                 <div className="blog-auto" ref={blogAutoRef}>
  //                   {news.slice(0, 10).map((n) => (
  //                     <a key={n.id} href={`/news/${n.slug || n.id}`} className="bcard">
  //                       <div className="thumb" style={{ backgroundImage: `url(${assetUrl(n.image) || '/images/news/placeholder.jpg'})` }} />
  //                       <div className="meta">
  //                         <div className="tag">{n.category || 'Aktuality'}</div>
  //                         <div className="title">{n.title}</div>
  //                         <div className="date">{new Date(n.date || Date.now()).toLocaleDateString()}</div>
  //                       </div>
  //                     </a>
  //                   ))}
  //                 </div>
  //                 <div className="more"><a href="/news" className="btn">Všechny aktuality</a></div>
  //               </div>

  //               {/* Standings Z V R P B with switcher */}
  //               {standings.length > 0 && (
  //                 <div className="widget">
  //                   <div className="head">
  //                     <h3>Tabulky</h3>
  //                     <div className="tabs">
  //                       {standings.map((s:any, i:number) => (
  //                         <button key={`${s.name}-${i}`} className={i===activeComp ? 'active' : ''} onClick={() => setActiveComp(i)}>{s.name || 'Soutěž'}</button>
  //                       ))}
  //                     </div>
  //                   </div>
  //                   <div className="table">
  //                     <div className="thead">
  //                       <span>#</span><span>Tým</span><span>Z</span><span>V</span><span>R</span><span>P</span><span>B</span>
  //                     </div>
  //                     <div className="tbody">
  //                       {(standings[activeComp]?.table || []).map((row:any, idx:number) => (
  //                         <div key={idx} className="tr">
  //                           <span>{row.position ?? idx+1}</span>
  //                           <span className="team">{row.team?.name ?? row.team ?? '-'}</span>
  //                           <span>{row.played ?? row.matches ?? '-'}</span>
  //                           <span>{row.wins ?? row.win ?? '-'}</span>
  //                           <span>{row.draws ?? row.draw ?? '-'}</span>
  //                           <span>{row.losses ?? row.loss ?? '-'}</span>
  //                           <span>{row.points ?? row.pts ?? '-'}</span>
  //                         </div>
  //                       ))}
  //                     </div>
  //                   </div>
  //                 </div>
  //               )}

  //               {/* Sponsors belt with faded edges */}
  //               <div className="widget">
  //                 <div className="head"><h3>Sponzoři</h3></div>
  //                 <div className="sponsor-belt">
  //                   <div className="mask left" aria-hidden />
  //                   <div className="track">
  //                     {[...sponsors, ...sponsors].map((s, idx) => (
  //                       <a key={`${s.id}-${idx}`} className="tile" href={s.url || '#'} target="_blank" rel="noreferrer noopener">
  //                         <img src={assetUrl(s.logo) || '/images/sponsors/placeholder.png'} alt={s.name} />
  //                       </a>
  //                     ))}
  //                   </div>
  //                   <div className="mask right" aria-hidden />
  //                 </div>
  //               </div>
  //             </div>

  //             {/* Right column: ticket next match */}
  //             <aside className="col right">
  //               {(() => {
  //                 const comp = facrCompetitions[Math.max(0, Math.min(nextCompIdx, facrCompetitions.length - 1))];
  //                 const items = Array.isArray(comp?.matches) ? comp.matches : [];
  //                 const upcoming = items
  //                   .map((m: any) => ({ m, t: new Date(`${m.date}T${(m.time || '00:00')}:00`).getTime() }))
  //                   .filter((x: any) => !isNaN(x.t) && x.t > Date.now())
  //                   .sort((a: any, b: any) => a.t - b.t)[0]?.m;
  //                 const show = upcoming || items[0] || null;
  //                 const link = (show && (show.facr_link || show.report_url)) || comp?.matches_link || nextMatchLink;
  //                 return (
  //                   <div className="ticket">
  //                     <div className="ticket-head">
  //                       <h3>Další zápas</h3>
  //                       <div className="tabs">
  //                         {facrCompetitions.map((c, i) => (
  //                           <button key={`${c.name}-${i}`} className={i===nextCompIdx ? 'active' : ''} onClick={() => setNextCompIdx(i)}>{c.name}</button>
  //                         ))}
  //                       </div>
  //                     </div>
  //                     <div className="ticket-body">
  //                       <div className="team">
  //                         <img src={assetUrl(show?.home_logo_url) || assetUrl(clubLogo) || '/images/club-logo.png'} alt="Domácí" />
  //                         <div className="name">{show?.home || clubName}</div>
  //                       </div>
  //                       <div className="vs">VS</div>
  //                       <div className="team">
  //                         <img src={assetUrl(show?.away_logo_url) || '/images/club-opponent.png'} alt="Hosté" />
  //                         <div className="name">{show?.away || 'Soupeř'}</div>
  //                       </div>
  //                       <div className="venue">{show?.venue || ''}</div>
  //                     </div>
  //                     <div className="ticket-countdown">{countdown || '—'}</div>
  //                     <div className="ticket-action">
  //                       {link && <a className="btn" href={link} target="_blank" rel="noopener noreferrer">Detail na FACR</a>}
  //                     </div>
  //                   </div>
  //                 );
  //               })()}
  //             </aside>
  //           </section>
  //         </div>

  //         {/* Merch section (Pro) - optional via settings */}
  //         <section className="pro-merch" style={{ marginTop: 16, marginBottom: 16 }}>
  //           <div className="pro-container">
  //             <MerchSection />
  //           </div>
  //         </section>
  //         {/* Socials & Embeds */}
  //         {(facebookUrl || instagramUrl || youtubeUrl || galleryUrl) && (
  //           <section className="pro-socials">
  //             <div className="pro-container">
  //               <div className="links">
  //                 {galleryUrl && (<a className="sbtn" href={galleryUrl || undefined} target="_blank" rel="noreferrer noopener">{galleryLabel}</a>)}
  //                 {facebookUrl && (<a className="sbtn" href={facebookUrl || undefined} target="_blank" rel="noreferrer noopener">Facebook</a>)}
  //                 {instagramUrl && (<a className="sbtn" href={instagramUrl || undefined} target="_blank" rel="noreferrer noopener">Instagram</a>)}
  //                 {youtubeUrl && (<a className="sbtn" href={youtubeUrl || undefined} target="_blank" rel="noreferrer noopener">YouTube</a>)}
  //               </div>
  //               {facebookUrl && (
  //                 <div className="embeds" style={{ marginTop: 12 }}>
  //                   <iframe
  //                     title="Facebook Page"
  //                     src={`https://www.facebook.com/plugins/page.php?href=${encodeURIComponent(facebookUrl ?? '')}&tabs=timeline&width=500&height=280&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true`}
  //                     width="100%"
  //                     height="280"
  //                     style={{ border: 'none', overflow: 'hidden', maxWidth: 700 }}
  //                     scrolling="no"
  //                     frameBorder={0}
  //                     allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
  //                   />
  //                 </div>
  //               )}
  //             </div>
  //           </section>
  //         )}

  //         {/* Optional Ads row from banners with placement 'homepage_ads' */}
  //         {(banners || []).some(b => b.placement === 'homepage_ads') && (
  //           <section className="pro-ads">
  //             <div className="pro-container">
  //               <div className="ads-row">
  //                 {(banners || []).filter(b => b.placement === 'homepage_ads').map((b) => (
  //                   <a key={b.id} className="ad" href={b.url || '#'} target={b.url ? '_blank' : undefined} rel={b.url ? 'noopener noreferrer' : undefined}>
  //                     {/* eslint-disable-next-line jsx-a11y/alt-text */}
  //                     <img src={b.image} alt={b.name} />
  //                   </a>
  //                 ))}
  //               </div>
  //             </div>
  //           </section>
  //         )}
  //       </div>
  //     </MainLayout>
  //   );
  // }

  return (
    <MainLayout>
      <div className="container">
        {/* Header: logo + club name */}
        <div className="home-header">
          <img src={assetUrl(clubLogo) || '/images/club-logo.png'} alt="Klub" />
          <div>
            <h1 style={{ margin: 0 }}>{clubName}</h1>
            <div className="subtitle" style={{ fontSize: '0.95rem' }}>Oficiální web klubu</div>
          </div>
        </div>

        {/* Hero section: variant controlled by MyUIbrix (getVariant) or fallback to settings.hero_style */}
        {getVariant('hero', heroStyle) === 'grid' && isVisible('hero', true) && (
          <section data-element="hero" className="hero-grid">
            {featured[0] ? (
              <a href={`/news/${featured[0].slug || featured[0].id}`} className="hero-card big" style={{ textDecoration: 'none' }}>
                <div className="bg" style={{ backgroundImage: `url(${assetUrl(featured[0].image) || '/images/news/placeholder.jpg'})` }} />
                <div className="overlay">
                  <div style={{ opacity: 0.9, fontSize: '0.8rem', color: '#ffffff' }}>{featured[0].category || 'Aktuality'}</div>
                  <h2 style={{ margin: '4px 0 0 0', color: '#ffffff' }}>{featured[0].title}</h2>
                </div>
              </a>
            ) : (
              <a href="/news" className="hero-card big" style={{ textDecoration: 'none' }}>
                <div className="bg" style={{ backgroundImage: `url('/images/news/placeholder.jpg')` }} />
                <div className="overlay">
                  <div style={{ opacity: 0.9, fontSize: '0.8rem', color: '#ffffff' }}>Aktuality</div>
                  <h2 style={{ margin: '4px 0 0 0', color: '#ffffff' }}>Nejnovější titulek</h2>
                </div>
              </a>
            )}
            <div className="small-col">
              {featured.slice(1, 3).map((n, idx) => (
                <a key={n.id} href={`/news/${n.slug || n.id}`} className="hero-card small" style={{ textDecoration: 'none' }}>
                  <div className="bg" style={{ backgroundImage: `url(${assetUrl(n.image) || '/images/news/placeholder.jpg'})` }} />
                  <div className="overlay">
                    <div style={{ opacity: 0.9, fontSize: '0.8rem', color: '#ffffff' }}>{n.category || 'Aktuality'}</div>
                    <h3 style={{ margin: '4px 0 0 0', color: '#ffffff' }}>{n.title}</h3>
                  </div>
                </a>
              ))}
              {Array.from({ length: Math.max(0, 2 - Math.min(2, Math.max(0, featured.length - 1))) }).map((_, idx) => (
                <a key={`placeholder-${idx}`} href="/news" className="hero-card small" style={{ textDecoration: 'none' }}>
                  <div className="bg" style={{ backgroundImage: `url('/images/news/placeholder.jpg')`, filter: 'grayscale(50%) brightness(0.7)' }} />
                  <div className="overlay">
                    <div style={{ opacity: 0.8, fontSize: '0.8rem', color: '#fff' }}>Aktuality</div>
                    <h3 style={{ margin: '4px 0 0 0', color: '#fff' }}>Připravujeme...</h3>
                  </div>
                </a>
              ))}
            </div>
          </section>
        )}
        {/* Banner: homepage_middle */}
        {(banners || []).some(b => b.placement === 'homepage_middle') && isVisible('banner', true) && (
          <section data-element="banner" className="banner banner-middle" style={{ margin: '24px 0', textAlign: 'center' }}>
            {(banners || []).filter(b => b.placement === 'homepage_middle').map((b) => (
              <a key={b.id} href={b.url || '#'} target={b.url ? '_blank' : undefined} rel={b.url ? 'noopener noreferrer' : undefined} style={{ display: 'inline-block', margin: 8 }}>
                {/* eslint-disable-next-line jsx-a11y/alt-text */}
                <img src={b.image} alt={b.name} style={{ maxWidth: '100%', width: b.width ? `${b.width}px` : undefined, height: b.height ? `${b.height}px` : 'auto' }} />
              </a>
            ))}
          </section>
        )}

        {/* Featured articles are now shown in the hero grid above, not here */}

        {/* Sidebar banners (homepage_sidebar) */}
        {(banners || []).some(b => b.placement === 'homepage_sidebar') && (
          <section data-element="sidebar" className="banner banner-sidebar" style={{ margin: '24px 0' }}>
            {/* Simple responsive behavior: stack on mobile, sticky right rail on desktop */}
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <div style={{ width: 320, maxWidth: '100%', position: 'sticky' as const, top: 96 }}>
                {(banners || []).filter(b => b.placement === 'homepage_sidebar').map((b) => (
                  <a key={b.id} href={b.url || '#'} target={b.url ? '_blank' : undefined} rel={b.url ? 'noopener noreferrer' : undefined} style={{ display: 'block', marginBottom: 12 }}>
                    {/* eslint-disable-next-line jsx-a11y/alt-text */}
                    <img loading="lazy" src={b.image} alt={b.name} style={{ width: b.width ? `${b.width}px` : '100%', height: b.height ? `${b.height}px` : 'auto', maxWidth: '100%' }} />
                  </a>
                ))}
              </div>
            </div>
          </section>
        )}
        {getVariant('hero', heroStyle) === 'scroller' && isVisible('hero', true) && (
          <section data-element="hero">
            <BlogCardsScroller />
          </section>
        )}
        {(getVariant('hero', heroStyle) === 'swiper' || getVariant('hero', heroStyle) === 'swiper_full') && isVisible('hero', true) && (
          <section data-element="hero" style={getVariant('hero', heroStyle) === 'swiper_full' ? { marginLeft: 'calc(50% - 50vw)', marginRight: 'calc(50% - 50vw)' } : undefined}>
            <BlogSwiper />
          </section>
        )}

        {/* Next match: categories (competitions) with left/right navigation - synced with matchesTab */}
        {facrCompetitions.length > 0 && isVisible('matches', true) ? (
          (() => {
            const comp = facrCompetitions[Math.max(0, Math.min(matchesTab, facrCompetitions.length - 1))];
            const items = Array.isArray(comp?.matches) ? comp.matches : [];
            const upcoming = items
              .map((m: any) => ({ m, t: new Date(`${m.date}T${(m.time || '00:00')}:00`).getTime() }))
              .filter((x: any) => !isNaN(x.t) && x.t > Date.now())
              .sort((a: any, b: any) => a.t - b.t)[0]?.m;
            const show = upcoming || items[0] || null;
            const link = (show && (show.facr_link || show.report_url)) || comp?.matches_link || nextMatchLink;
            const handleNextMatchClick = () => {
              if (show) {
                setSelectedMatch({
                  ...show,
                  competition: comp?.name,
                  competitionName: comp?.name,
                });
                setIsMatchModalOpen(true);
              }
            };
            return (
              <section data-element="matches" className="next-match" onClick={handleNextMatchClick} style={{ cursor: 'pointer' }}>
                <button 
                  aria-label="Předchozí soutěž" 
                  onClick={(e) => { e.stopPropagation(); setMatchesTab((i) => (i - 1 + facrCompetitions.length) % facrCompetitions.length); }} 
                  className="nav prev" 
                  style={{ background:'transparent', border:'none', color:'var(--text-on-primary)' }}
                >
                  <FiChevronLeft size={24} />
                </button>
                <div className="team">
                  <img className="logo" src={assetUrl(show?.home_logo_url) || assetUrl(clubLogo) || '/images/club-logo.png'} alt="Domácí" />
                  <div>{sanitizeClubName(show?.home || matches[0]?.homeTeam || clubName)}</div>
                </div>
                <div className="countdown">
                  <div style={{ fontSize: '0.8rem', opacity: 0.85, marginBottom: 4 }}>{comp?.name || 'Soutěž'}</div>
                  {countdown || '—'}
                  <div style={{ fontSize: '0.8rem', opacity: 0.85 }}>Začátek zápasu</div>
                </div>
                <div className="team">
                  <img className="logo" src={assetUrl(show?.away_logo_url) || '/images/club-opponent.png'} alt="Hosté" />
                  <div>{sanitizeClubName(show?.away || matches[0]?.awayTeam || 'Soupeř')}</div>
                </div>
                <button 
                  aria-label="Další soutěž" 
                  onClick={(e) => { e.stopPropagation(); setMatchesTab((i) => (i + 1) % facrCompetitions.length); }} 
                  className="nav next" 
                  style={{ background:'transparent', border:'none', color:'var(--text-on-primary)' }}
                >
                  <FiChevronRight size={24} />
                </button>
              </section>
            );
          })()
        ) : isVisible('matches', true) ? (
          <section data-element="matches" className="next-match">
            <div className="team">
              <img className="logo" src={assetUrl(matches[0]?.homeLogoURL) || assetUrl(clubLogo) || '/images/club-logo.png'} alt="Domácí" />
              <div>{sanitizeClubName(matches[0]?.homeTeam || clubName)}</div>
            </div>
            <div className="countdown">
              {countdown || '—'}
              <div style={{ fontSize: '0.8rem', opacity: 0.85 }}>Začátek zápasu</div>
              {nextMatchLink && (
                <div style={{ marginTop: 6 }}>
                  <a href={nextMatchLink} target="_blank" rel="noopener noreferrer" style={{ color: '#fff', textDecoration: 'underline', fontSize: '0.85rem' }}>Detail na FACR</a>
                </div>
              )}
            </div>
            <div className="team">
              <img className="logo" src={assetUrl(matches[0]?.awayLogoURL) || '/images/club-opponent.png'} alt="Hosté" />
              <div>{sanitizeClubName(matches[0]?.awayTeam || 'Soupeř')}</div>
            </div>
          </section>
        ) : null}

        {/* Matches slider with scores by competition */}
        {facrCompetitions.length > 0 && (
          <section className="matches-slider">
            <div className="section-head" style={{ marginTop: 16, marginBottom: 16 }}>
              <h3>Zápasy</h3>
              <a href="/kalendar" className="see-all">Všechny zápasy <FiArrowRight /></a>
            </div>
            <div className="matches-grid">
              <div className="matches-track" ref={trackRef}>
                {(facrCompetitions[matchesTab]?.matches || []).map((m:any, idx:number) => {
                  const handleMatchClick = (e: React.MouseEvent) => {
                    e.preventDefault();
                    setSelectedMatch({
                      ...m,
                      competition: facrCompetitions[matchesTab]?.name,
                      competitionName: facrCompetitions[matchesTab]?.name,
                    });
                    setIsMatchModalOpen(true);
                  };
                  return (
                  <div key={m.id || idx} className="match-card" onClick={handleMatchClick} style={{ cursor: 'pointer' }}>
                    <div className="match-meta">
                      <span>{(m.venue || '').split(',')[0] || ''}</span>
                      <span>•</span>
                      <span>{new Date(`${m.date}T${(m.time||'00:00')}:00`).toLocaleDateString()}</span>
                    </div>
                    <div className="teams">
                      <div className="team">
                        <img src={assetUrl(m.home_logo_url)} alt={m.home} />
                        <div className="name">{sanitizeClubName(m.home)}</div>
                      </div>
                      <div className="score">
                        {m.score ? (
                          <>
                            <span className="home">{String(m.score).split(':')[0]}</span>
                            <span className="sep">:</span>
                            <span className="away">{String(m.score).split(':')[1]}</span>
                          </>
                        ) : (
                          <span className="time">{m.time}</span>
                        )}
                      </div>
                      <div className="team">
                        <img src={assetUrl(m.away_logo_url)} alt={m.away} />
                        <div className="name">{sanitizeClubName(m.away)}</div>
                      </div>
                    </div>
                  </div>
                );
                })}
              </div>
              <div className="matches-tabs">
                {facrCompetitions.map((c, i) => (
                  <button key={`${c.name}-${i}`} className={i===matchesTab ? 'active' : ''} onClick={() => setMatchesTab(i)}>{c.name}</button>
                ))}
              </div>
            </div>
          </section>
        )}
        {/* Competition tables moved into right column below */}

        {/* Standings: tabs per competition (only FACR), clicking row opens ClubModal */}
        {isVisible('table', true) && (() => {
          // Match standings to current competition by name instead of assuming same index
          const currentCompetition = facrCompetitions[matchesTab];
          const currentCompetitionName = currentCompetition?.name || '';
          const matchingStanding = standings.find((s: any) => s.name === currentCompetitionName);
          
          const hasStandingsForCurrentTab = matchingStanding && (
            (matchingStanding.table && matchingStanding.table.length > 0) ||
            (matchingStanding.rows && matchingStanding.rows.length > 0)
          );
          
          return (
            <section 
              data-element="table" 
              className="standings" 
              data-variant={hasStandingsForCurrentTab ? undefined : 'standard'}
              style={{ marginTop: 32 }}
            >
              <div>
                <div className="section-head" style={{ marginTop: 0 }}>
                  <h3>Další aktuality</h3>
                </div>
                <div className="blog-list">
                  {news.length > 0 ? news.slice(0, 4).map((n) => (
                    <a key={n.id} href={`/news/${n.slug || n.id}`} className="card" style={{ textDecoration: 'none', color: 'inherit' }}>
                      <div className="thumb" style={{ backgroundImage: `url(${assetUrl(n.image) || '/images/news/placeholder.jpg'})` }} />
                      <div>
                        <h4>{n.title}</h4>
                        <div style={{ color: 'var(--dark-gray)', fontSize: '0.9rem' }}>{n.excerpt}</div>
                      </div>
                    </a>
                  )) : (
                    <div style={{ padding: '24px', textAlign: 'center', color: 'var(--dark-gray)', background: 'var(--bg-soft)', borderRadius: '12px' }}>
                      <p>Zatím nejsou k dispozici žádné aktuality.</p>
                    </div>
                  )}
                </div>
                {news.length > 0 && (
                  <div style={{ marginTop: 12 }}>
                    <a className="btn" href="/news">Zobrazit všechny aktuality</a>
                  </div>
                )}
              </div>
              {hasStandingsForCurrentTab && (
                <div>
                  <div className="table-card">
                    <div className="section-head" style={{ marginTop: 0, marginBottom: 12 }}>
                      <h3>Tabulky</h3>
                      <a href="/tabulky" className="see-all" style={{ fontSize: '0.85rem' }}>Zobrazit vše <FiArrowRight size={14} /></a>
                    </div>
                    <div className="standings">
                      {(matchingStanding?.table || matchingStanding?.rows || []).slice(0,8).map((row: any, idx: number) => {
                        const handleClick = () => {
                          const clubData = {
                            team: row.team?.name ?? row.team ?? row.club ?? '-',
                            team_id: row.team_id || '',
                            team_logo_url: row.team_logo_url,
                            rank: row.position ?? row.pos ?? row.rank ?? idx+1,
                            played: row.played ?? row.matches ?? '-',
                            wins: row.wins ?? row.win ?? '-',
                            draws: row.draws ?? row.draw ?? '-',
                            losses: row.losses ?? row.loss ?? '-',
                            score: row.score ?? '-',
                            points: row.points ?? row.pts ?? '-',
                          };
                          setSelectedClub(clubData);
                          setIsModalOpen(true);
                        };
                        return (
                          <div key={idx} className="standing-row" onClick={handleClick}>
                            <div className="pos">#{row.position ?? row.pos ?? row.rank ?? idx+1}</div>
                            <div className="team">
                              {row.team_logo_url && (
                                <img src={assetUrl(row.team_logo_url)} alt={row.team?.name ?? row.team ?? row.club ?? '-'} />
                              )}
                              <span className="name">{row.team?.name ?? row.team ?? row.club ?? '-'}</span>
                            </div>
                            <div className="pts">{row.points ?? row.pts ?? '-'}</div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>
              )}
            </section>
          );
        })()}

        {/* Players scroller (optional) */}
        {players.length > 0 && isVisible('team', false) && (
          <section data-element="team" className="players-scroller" style={{ marginTop: 32 }}>
            <div className="section-head">
              <h3>Hráči</h3>
              <a href="/players" className="see-all">Zobrazit vše <FiArrowRight /></a>
            </div>
            <div className="scroll-x">
              {players.map((p) => (
              <a key={p.id} href={p.slug ? `/players/${p.slug}` : `/players/${p.id}`} className="player-card">
                <div className="photo" style={{ backgroundImage: `url(${assetUrl(p.image) || p.image})` }} />
                <div className="meta"><span className="nr">#{p.number}</span> {p.name}</div>
                <div className="pos">{p.position}</div>
              </a>
              ))}
            </div>
          </section>
        )}

        {/* Merchandise / clothing (optional; only if shop URL is set) */}
        {shopUrl && (
          <section className="merch-cta">
            <div className="card">
              <div>
                <h3>Oficiální fanshop</h3>
                <p>Pořiďte si dresy, šály a další. Podpořte tým!</p>
                <a className="btn" href={shopUrl || undefined} target="_blank" rel="noopener noreferrer">Přejít do e‑shopu</a>
              </div>
              <div className="mockup" aria-hidden>
                <div className="shirt" />
              </div>
            </div>
          </section>
        )}

        {/* Gallery */}
        {isVisible('gallery', false) && (
        <section data-element="gallery" style={{ marginTop: 32, marginBottom: 32 }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 12px' }}>
            <GallerySection />
          </div>
        </section>
        )}

        {/* Videos */}
        {isVisible('videos', false) && (
        <section data-element="videos" style={{ marginTop: 32, marginBottom: 32 }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 12px' }}>
            <VideosSection />
          </div>
        </section>
        )}

        {isVisible('merch', true) && (
          <section data-element="merch" style={{ marginTop: 24, marginBottom: 24 }}>
            <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 12px' }}>
              <MerchSection />
            </div>
          </section>
        )}

        {/* Newsletter subscription CTA */}
        {isVisible('newsletter', false) && (
        <section data-element="newsletter" className="newsletter-cta" style={{ marginTop: 24, marginBottom: 24 }}>
          <div className="card" style={{ maxWidth: 960, margin: '0 auto' }}>
            <NewsletterSubscribe />
          </div>
        </section>
        )}

        {/* Banner: homepage_top */}
        {(banners || []).some(b => b.placement === 'homepage_top') && (
          <section data-element="banner" className="banner banner-top" style={{ margin: '24px 0', textAlign: 'center' }}>
            {(banners || []).filter(b => b.placement === 'homepage_top').map((b) => (
              <a key={b.id} href={b.url || '#'} target={b.url ? '_blank' : undefined} rel={b.url ? 'noopener noreferrer' : undefined} style={{ display: 'inline-block', margin: 8 }}>
                {/* eslint-disable-next-line jsx-a11y/alt-text */}
                <img src={b.image} alt={b.name} style={{ maxWidth: '100%', width: b.width ? `${b.width}px` : undefined, height: b.height ? `${b.height}px` : 'auto' }} />
              </a>
            ))}
          </section>
        )}

        {/* Banner: homepage_footer */}
        {(banners || []).some(b => b.placement === 'homepage_footer') && (
          <section data-element="banner" className="banner banner-footer" style={{ margin: '24px 0', textAlign: 'center' }}>
            {(banners || []).filter(b => b.placement === 'homepage_footer').map((b) => (
              <a key={b.id} href={b.url || '#'} target={b.url ? '_blank' : undefined} rel={b.url ? 'noopener noreferrer' : undefined} style={{ display: 'inline-block', margin: 8 }}>
                {/* eslint-disable-next-line jsx-a11y/alt-text */}
                <img src={b.image} alt={b.name} style={{ maxWidth: '100%', width: b.width ? `${b.width}px` : undefined, height: b.height ? `${b.height}px` : 'auto' }} />
              </a>
            ))}
          </section>
        )}

        {/* Sponsors: grid or slider (controlled by settings); dark theme supported; full-bleed */}
        {isVisible('sponsors', true) && (
        <section
          data-element="sponsors"
          className={`sponsors ${sponsorsTheme === 'dark' ? 'dark' : ''}`}
          style={{
            width: '100vw',
            position: 'relative',
            left: '50%',
            right: '50%',
            transform: 'translateX(-50%)',
            paddingLeft: 'max(16px, calc((100vw - 1200px) / 2))',
            paddingRight: 'max(16px, calc((100vw - 1200px) / 2))',
            boxSizing: 'border-box',
          }}
        >
          <div className="section-head">
            <h3>Sponzoři</h3>
          </div>
          {sponsorLayout==='grid' ? (
            (()=>{
              const title = sponsors.find((s:any)=>s.tier==='title') || sponsors[0];
              const others = sponsors.filter((s)=>s !== title);
              return (
                <>
                  {title && (
                    <div className="title-sponsor">
                      <a className="sponsor-tile" href={title.url || '#'} target="_blank" rel="noreferrer noopener">
                        <img src={assetUrl(title.logo) || '/images/sponsors/placeholder.png'} alt={title.name} />
                      </a>
                    </div>
                  )}
                  <div className="divider" aria-hidden />
                  <div className="sponsors-grid">
                    {others.map((s) => (
                      <a key={s.id} className="sponsor-tile" href={s.url || '#'} target="_blank" rel="noreferrer noopener">
                        <img src={assetUrl(s.logo) || '/images/sponsors/placeholder.png'} alt={s.name} />
                      </a>
                    ))}
                  </div>
                </>
              );
            })()
          ) : (
            <div className="sponsors-slider">
              <div className="track">
                {[...sponsors, ...sponsors].map((s, idx) => (
                  <a key={`${s.id}-${idx}`} className="sponsor-tile" href={s.url || '#'} target="_blank" rel="noreferrer noopener">
                    <img src={assetUrl(s.logo) || '/images/sponsors/placeholder.png'} alt={s.name} />
                  </a>
                ))}
              </div>
            </div>
          )}
        </section>
        )}
      </div>
      <ClubModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        club={selectedClub}
        clubType={(settings?.club_type as 'football' | 'futsal') || 'football'}
      />
      <MatchModal
        isOpen={isMatchModalOpen}
        onClose={() => setIsMatchModalOpen(false)}
        match={selectedMatch}
        onTeamClick={(teamName, teamLogoUrl) => {
          // Optional: could open club modal when clicking team in match modal
          console.log('Team clicked:', teamName);
        }}
      />
      <MyUIbrixStyleEditor pageType="homepage" />
    </MainLayout>
  );
};

export default HomePage;