// Hero.jsx — MinduBier × Copa 2026 Hero with Countdown
function Hero({ tweaks, onCTAClick }) {
const { days, hours, minutes, seconds } = useCountdown(COPA_KICKOFF);
const variant = tweaks.heroVariant || 'celebrativo';
const isDark = tweaks.theme === 'dark';
return (
{/* Background flourishes */}
{/* Soft yellow burst */}
{/* TEXT side */}
COM MINDUBIER,JÁ SOMOS HEXA!
Da cervejaria mais premiada da Bahia para o peito de toda a torcida. Com a camisa da MinduBier 10 Anos, desenhada para a Copa 2026, com certeza o HEXA vem!
{/* Countdown */}
Contagem regressiva para a Copa
{/* IMAGE side */}
);
}
function CountdownTile({ value, label, big = false, pulse = false, isDark }) {
const padded = String(value).padStart(2, '0');
return (
);
}
function TrustItem({ icon, text, isDark }) {
return (
{icon}
{text}
);
}
function ProductFrame({ variant, isDark }) {
// Local toggle: front / back
const [side, setSide] = React.useState('frente'); // 'frente' | 'costas'
const isFront = side === 'frente';
// "produto" = clean studio panel with bigger frame, more breathing room
// "celebrativo" = floating shirt with playful tags + giant green halo
if (variant === 'produto') {
return (
{/* Diagonal stripe pattern */}
{/* Side toggle */}
Camisa oficial · {isFront ? 'Frente' : 'Costas'}
);
}
// CELEBRATIVO — giant shirt with playful overlays
return (
{/* Big green/yellow halo */}
{/* Confetti dots */}
{/* Shirt flipper */}
{/* Floating "R$ 99" tag */}
{/* Floating edition badge */}
{/* Side toggle */}
);
}
// Shirt with 3D card-flip between front and back
function ShirtFlipper({ isFront, frontSrc, backSrc, tilt = false }) {
return (
);
}
function SideToggle({ side, onChange, isDark, celebrativo = false }) {
const items = [
{ key: 'frente', label: 'Frente' },
{ key: 'costas', label: 'Costas' }];
return (
{items.map((it) =>
onChange(it.key)}
aria-pressed={side === it.key}
style={{
padding: '7px 14px',
borderRadius: 999,
border: 'none',
cursor: 'pointer',
fontFamily: MB.display,
fontWeight: 700,
fontSize: 11,
letterSpacing: '0.10em',
textTransform: 'uppercase',
background: side === it.key ?
'linear-gradient(135deg, var(--copa-yellow), #ffc800)' :
'transparent',
color: side === it.key ? MB.bgDarker : 'rgba(255,255,244,0.75)',
transition: `all 250ms ${MB.ease}`
}}>
{it.label}
)}
);
}
function ConfettiSparkles() {
const dots = React.useMemo(() => {
const c = ['var(--copa-green)', 'var(--copa-yellow)', 'var(--brand-copper)', '#ffffff'];
return Array.from({ length: 18 }).map((_, i) => ({
id: i,
top: Math.random() * 100,
left: Math.random() * 100,
size: 4 + Math.random() * 7,
color: c[i % c.length],
delay: Math.random() * 3
}));
}, []);
return (
{dots.map((d) =>
);
}
Object.assign(window, { Hero, CountdownTile, ProductFrame, ShirtFlipper, SideToggle, ConfettiSparkles });