Spaces:
Sleeping
Sleeping
File size: 7,726 Bytes
4bea261 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | 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>
);
}
|