src/components/CombinedRegionSection.jsx

import { formatImageUrl } from '../lib/image';

export default function CombinedRegionSection({ sections = [] }) {
  if (!sections || sections.length === 0) return null;

  return (
    <section className="mx-auto max-w-7xl px-4 py-10 md:px-8 relative overflow-hidden">
      {/* Master Premium Glass Container */}
      <div className="relative overflow-hidden rounded-[32px] border border-white/5 bg-gradient-to-br from-white/[0.02] to-white/[0.003] p-6 shadow-2xl backdrop-blur-2xl md:p-10">
        
        {/* Abstract Floating Glows */}
        <div className="absolute -left-20 -top-20 -z-10 h-80 w-80 rounded-full bg-primary/5 blur-[100px] pointer-events-none" />
        <div className="absolute -right-20 -bottom-20 -z-10 h-80 w-80 rounded-full bg-amber-500/5 blur-[100px] pointer-events-none" />

        {/* Section Header */}
        <div className="relative z-10 mb-10 flex items-center justify-between border-b border-white/5 pb-5">
          <div className="flex items-center gap-3">
            <span className="h-8 w-2 rounded-full bg-gradient-to-b from-primary to-amber-500 shadow-[0_0_20px_rgba(124,58,237,0.4)]" />
            <h2 className="text-xl font-black uppercase tracking-tight text-white md:text-2xl">
              Đường Đua Điện Ảnh Quốc Tế
            </h2>
          </div>
          <span className="hidden sm:inline-block rounded-full bg-white/5 border border-white/10 px-3 py-1 text-[8px] font-black uppercase tracking-widest text-gray-400">
            Cập nhật hàng ngày
          </span>
        </div>

        {/* Rows wrapper */}
        <div className="relative z-10 space-y-12">
          {sections.map((sec, idx) => {
            // Authentic sponsor configuration for each region
            const sponsors = {
              'trung-quoc': { name: 'VIC88 TÀI TRỢ', bg: 'from-amber-600 to-red-600 shadow-red-600/30' },
              'han-quoc': { name: 'F88 SPORT', bg: 'from-emerald-600 to-teal-600 shadow-emerald-600/30' },
              'au-my': { name: '86BET LIVE', bg: 'from-blue-600 to-indigo-600 shadow-blue-600/30' }
            };
            
            const sponsor = sponsors[sec.country] || { name: 'ROPHIM VIP', bg: 'from-primary to-accent shadow-primary/30' };

            return (
              <div key={sec.country} className="space-y-5">
                {/* Row Header */}
                <div className="flex items-center justify-between">
                  <h3 className="flex items-center gap-2.5 text-xs font-black uppercase tracking-widest text-gray-300">
                    <span className={`h-2.5 w-2.5 rounded-full bg-gradient-to-br ${sponsor.bg}`} />
                    {sec.title}
                  </h3>
                  <a 
                    href={sec.href} 
                    className="group/all flex items-center gap-1 text-[9px] font-black uppercase tracking-widest text-primary hover:text-white transition-all duration-300 cursor-pointer"
                  >
                    Xem tất cả 
                    <i className="fas fa-chevron-right text-[7px] transition-transform duration-300 group-hover/all:translate-x-1" />
                  </a>
                </div>

                {/* Landscape 16/9 Card Scroll list */}
                <div className="scrollbar-hide flex overflow-x-auto gap-5 pb-4 px-1 -mx-1 snap-x scroll-smooth">
                  {sec.movies.slice(0, 10).map((m, mIdx) => {
                    const poster = formatImageUrl(m.poster_url || m.thumb_url);
                    const year = m.year || '';
                    const quality = m.quality || 'FHD';
                    const lang = m.lang || 'Vietsub';

                    return (
                      <div 
                        key={m._id || m.slug} 
                        className="w-[200px] sm:w-[240px] md:w-[280px] flex-shrink-0 snap-start group/land relative"
                      >
                        {/* 16:9 Image wrapper */}
                        <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl border border-white/5 bg-black/40 transition-all duration-500 shadow-lg group-hover/land:scale-[1.03] group-hover/land:shadow-[0_12px_30px_rgba(0,0,0,0.6)] group-hover/land:border-white/15">
                          <img 
                            src={poster} 
                            alt={m.name} 
                            className="h-full w-full object-cover transition-transform duration-700 group-hover/land:scale-105" 
                          />
                          <div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/30 to-transparent" />

                          {/* Authentic Sponsor Badge Overlay (on FIRST card of row) */}
                          {mIdx === 0 && (
                            <div className={`absolute top-3 left-3 z-30 bg-gradient-to-r ${sponsor.bg} text-[7px] font-black uppercase text-white px-2.5 py-0.5 rounded shadow-[0_4px_12px_rgba(0,0,0,0.5)] tracking-widest`}>
                              {sponsor.name}
                            </div>
                          )}

                          {/* Quality/Lang tags in top-right */}
                          <div className="absolute top-3 right-3 z-20 flex gap-1">
                            <span className="rounded bg-black/70 border border-white/10 px-1.5 py-[2px] text-[7px] font-black uppercase text-gray-300 backdrop-blur-sm shadow-md">
                              {quality}
                            </span>
                            <span className="rounded bg-primary/90 px-1.5 py-[2px] text-[7px] font-black uppercase text-white backdrop-blur-sm shadow-md">
                              {lang}
                            </span>
                          </div>

                          {/* Glow Play Button overlay */}
                          <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover/land:opacity-100 transition-opacity duration-300 bg-black/40 backdrop-blur-[1px] z-10">
                            <div className="h-11 w-11 rounded-full bg-primary flex items-center justify-center text-white shadow-[0_0_20px_rgba(229,9,20,0.5)] transform scale-75 group-hover/land:scale-100 transition-transform duration-300">
                              <i className="fas fa-play text-xs ml-0.5" />
                            </div>
                          </div>

                          {/* Movie title overlay */}
                          <div className="absolute bottom-3 left-4 right-4 z-20">
                            <h4 className="line-clamp-1 text-[11px] sm:text-xs font-black uppercase tracking-tight text-white group-hover/land:text-primary transition-colors duration-300">
                              {m.name}
                            </h4>
                            <div className="mt-0.5 flex items-center gap-1.5 text-[8px] font-bold text-gray-400 uppercase tracking-widest">
                              <span className="truncate max-w-[120px]">{m.origin_name}</span>
                              {year && (
                                <>
                                  <span className="h-1 w-1 rounded-full bg-gray-600" />
                                  <span>{year}</span>
                                </>
                              )}
                            </div>
                          </div>

                          <a href={`/phim/${m.slug}`} className="absolute inset-0 z-30" />
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}