// variation-a.jsx — DARK PREMIUM (academia / fitness premium vibe)
// Black canvas, big condensed type, yellow energy accents, red CTA reserves.
// Stable string hash → 0..1 used to vary the placeholder per preparation type.
function paHash(s) {
let h = 0;
for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
return Math.abs(h % 1000) / 1000;
}
// Resolve the best image src for an item + selected type, if any.
function paResolvePhoto(item, variant) {
if (!item) return null;
if (variant && item.photosByType && item.photosByType[variant]) return item.photosByType[variant];
if (item.photo) return item.photo;
return null;
}
// Cache of s that have successfully loaded, so subsequent renders skip
// the placeholder flash entirely.
const PA_LOADED = new Set();
// Cache of srcs that failed to load — fall back to the placeholder forever.
const PA_FAILED = new Set();
// Preload every preparation image for an item the moment the user opens it,
// so toggling between types swaps instantly from the browser cache.
function paPreloadItem(item) {
if (!item) return;
const srcs = new Set();
if (item.photo) srcs.add(item.photo);
if (item.photosByType) Object.values(item.photosByType).forEach((s) => s && srcs.add(s));
srcs.forEach((src) => {
if (PA_LOADED.has(src) || PA_FAILED.has(src)) return;
const img = new Image();
img.onload = () => PA_LOADED.add(src);
img.onerror = () => PA_FAILED.add(src);
img.src = src;
});
}
const PaPhoto = ({ item, hue, label, variant, ratio = '1/1', radius = 18 }) => {
const src = paResolvePhoto(item, variant);
// Track loaded/failed at module scope so changing variant doesn't reset.
const [, force] = React.useReducer((x) => x + 1, 0);
const failed = src ? PA_FAILED.has(src) : true;
const loaded = src ? PA_LOADED.has(src) : false;
// Placeholder visuals — used as background until loads (or always if it fails).
const v = variant ? paHash(variant) : 0;
const hueShift = (v * 26 - 13);
const lightShift = (v * 0.08 - 0.04);
const angle = 90 + Math.round(v * 180);
const effHue = (hue || 30) + hueShift;
const displayLabel = variant ? variant : label;
const showImg = src && !failed;
// Neutral dark bg while loading (so we don't flash colored placeholder
// *behind* the image while it decodes the first time).
const bg = (showImg && !loaded)
? '#1a1a1a'
: `linear-gradient(${angle}deg, oklch(${0.28 + lightShift} 0.05 ${effHue}), oklch(${0.18 + lightShift} 0.03 ${effHue}))`;
return (
{/* Real image — always rendered (no key, no unmount on variant change).
Browser swaps it instantly from cache thanks to paPreloadItem above. */}
{showImg && (
{ PA_LOADED.add(src); force(); }}
onError={() => { PA_FAILED.add(src); force(); }}
style={{
position: 'absolute', inset: 0,
width: '100%', height: '100%',
objectFit: 'cover', borderRadius: 'inherit',
display: 'block',
}}
/>
)}
{/* Placeholder decorations + label (only when no image) */}
{!showImg && (
· {displayLabel}
)}
);
};
function PaHeader({ cart, onCartTap }) {
return (
Anabólica
Dieta congelada
);
}
function PaHero() {
return (
Florianópolis · São José · Palhoça
Monte sua marmita.
Sem lactose, sem conservantes, sem óleo de soja. Mínimo 6 marmitas — frete grátis acima de 14.
