/* Tefi — Services backgrounds. Real SVG art + canvas particles, swappable. */
function ServicesBackground({ kind }) {
if (kind === 'bone') return ;
if (kind === 'cream') return ;
if (kind === 'ink') return ;
if (kind === 'sage') return ;
if (kind === 'gradient') return ;
if (kind === 'botanical') return ;
if (kind === 'arches') return ;
if (kind === 'pearl') return ;
if (kind === 'brushstroke') return ;
if (kind === 'sparkles') return ;
if (kind === 'spotlight') return ;
return ;
}
function SolidBg({ color }) {
return ;
}
function GradientBg() {
return (
);
}
/* Botanical · large tonal pressed-leaf silhouettes scattered across the section.
Drawn slowly with proper composition — think pressed flower archive. */
function BotanicalBg() {
return (
);
}
/* Arches · architectural arched panels — gallery wall feel */
function ArchesBg() {
return (
);
}
/* Pearl · giant single sculpted nail / pearl with realistic gradient — big visual anchor */
function PearlBg() {
return (
);
}
/* Brushstroke · big confident brushstrokes referencing nail polish gestures */
function BrushstrokeBg() {
return (
);
}
/* Spotlight · soft directional studio light + concentric arcs */
function SpotlightBg() {
return (
);
}
/* Sparkles · canvas-based twinkling field with real four-point sparkles */
function SparklesCanvas() {
const ref = React.useRef(null);
React.useEffect(() => {
const canvas = ref.current; if (!canvas) return;
const ctx = canvas.getContext('2d');
let raf, w, h;
const stars = [];
const sparkles = [];
// Read accent colour from the live computed style
const root = canvas.closest('section') || document.documentElement;
const cs = getComputedStyle(root);
const accent = cs.getPropertyValue('--accent').trim() || '#C97456';
const accentDeep = cs.getPropertyValue('--accent-deep').trim() || '#9F543A';
const resize = () => {
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const r = canvas.getBoundingClientRect();
w = r.width; h = r.height;
canvas.width = w * dpr; canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
stars.length = 0; sparkles.length = 0;
const starN = Math.floor((w * h) / 8000);
for (let i = 0; i < starN; i++) {
stars.push({
x: Math.random() * w,
y: Math.random() * h,
r: 0.6 + Math.random() * 1.4,
tw: Math.random() * Math.PI * 2,
twS: 0.005 + Math.random() * 0.012,
base: 0.25 + Math.random() * 0.35,
});
}
const sparkN = Math.floor((w * h) / 60000);
for (let i = 0; i < sparkN; i++) {
sparkles.push({
x: Math.random() * w,
y: Math.random() * h,
size: 8 + Math.random() * 18,
rot: Math.random() * Math.PI,
tw: Math.random() * Math.PI * 2,
twS: 0.012 + Math.random() * 0.02,
colour: Math.random() > 0.4 ? accent : accentDeep,
});
}
};
const drawSparkle = (x, y, size, rot, alpha, colour) => {
ctx.save();
ctx.translate(x, y);
ctx.rotate(rot);
ctx.globalAlpha = alpha;
ctx.fillStyle = colour;
// four-point sparkle (concave diamond)
ctx.beginPath();
const s = size, t = size * 0.18;
ctx.moveTo(0, -s);
ctx.quadraticCurveTo(t, -t, s, 0);
ctx.quadraticCurveTo(t, t, 0, s);
ctx.quadraticCurveTo(-t, t, -s, 0);
ctx.quadraticCurveTo(-t, -t, 0, -s);
ctx.closePath();
ctx.fill();
// bright centre
ctx.globalAlpha = alpha * 0.9;
ctx.fillStyle = '#fff';
ctx.beginPath(); ctx.arc(0, 0, size * 0.12, 0, Math.PI * 2); ctx.fill();
ctx.restore();
};
const tick = () => {
ctx.clearRect(0, 0, w, h);
// small twinkling stars
for (const s of stars) {
s.tw += s.twS;
const a = s.base + Math.sin(s.tw) * 0.35;
ctx.globalAlpha = Math.max(0, a);
ctx.fillStyle = accent;
ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2); ctx.fill();
}
// four-point sparkles
for (const sp of sparkles) {
sp.tw += sp.twS;
const t = (Math.sin(sp.tw) + 1) / 2; // 0..1
const alpha = 0.15 + t * 0.55;
const scale = 0.6 + t * 0.6;
drawSparkle(sp.x, sp.y, sp.size * scale, sp.rot, alpha, sp.colour);
}
ctx.globalAlpha = 1;
raf = requestAnimationFrame(tick);
};
resize();
tick();
const ro = new ResizeObserver(resize);
ro.observe(canvas);
return () => { cancelAnimationFrame(raf); ro.disconnect(); };
}, []);
return (
);
}
window.ServicesBackground = ServicesBackground;