// Dentstyle — Decorations, icons, pearl orbs, gold arcs
const { useEffect, useRef, useState } = React;
// === Icons ===
const Icon = {
Whatsapp: (p) => (
),
ArrowRight: (p) => (
),
ChevronL: (p) => (
),
ChevronR: (p) => (
),
Menu: (p) => (
),
Close: (p) => (
),
Diamond: (p) => (
),
Tooth: (p) => (
),
Shield: (p) => (
),
Star: (p) => (
),
Spark: (p) => (
),
Users: (p) => (
),
Layers: (p) => (
),
ShieldCheck: (p) => (
),
Bell: (p) => (
),
Drag: (p) => (
),
Instagram: (p) => (
),
Facebook: (p) => (
),
Tiktok: (p) => (
),
};
// === Pearl orb ===
function Pearl({ size = 60, top, left, right, bottom, anim = "a", delay = 0, opacity = 1, style = {}, className = "" }) {
const [tapped, setTapped] = React.useState(false);
const handleTouch = () => {
setTapped(true);
setTimeout(() => setTapped(false), 750);
};
return (
);
}
// === Sparkle ===
function Spark({ top, left, right, bottom, size = 14, delay = 0, style = {} }) {
return (
);
}
// === Gold Arcs (SVG) ===
function GoldArc({ variant = 1, className = "" }) {
if (variant === 1) {
return (
);
}
return (
);
}
// === Twinkle keyframes via injected style ===
(function injectKeyframes() {
if (document.getElementById("dent-keyframes")) return;
const s = document.createElement("style");
s.id = "dent-keyframes";
s.textContent = `
@keyframes twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
}
@keyframes drift-arc-1 {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(-12px, 6px, 0); }
}
@keyframes drift-arc-2 {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(10px, -8px, 0); }
}
.arc-1 { animation: drift-arc-1 14s ease-in-out infinite; }
.arc-2 { animation: drift-arc-2 16s ease-in-out infinite; }
`;
document.head.appendChild(s);
})();
// === Scroll reveal hook (observa .reveal y .reveal-3d) ===
function useReveal() {
useEffect(() => {
const obs = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("in");
obs.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
document.querySelectorAll(".reveal, .reveal-3d").forEach((el) => obs.observe(el));
return () => obs.disconnect();
}, []);
}
// === Tilt 3D (mouse en desktop / scroll ambient en móvil) ===
function Tilt3D({ children, className = "", style = {} }) {
const ref = React.useRef(null);
const rafRef = React.useRef(null);
const [tilt, setTilt] = React.useState({ x: 0, y: 0 });
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const handleMouseMove = (e) => {
if (window.innerWidth < 1024) return;
if (rafRef.current) return;
rafRef.current = requestAnimationFrame(() => {
const rect = el.getBoundingClientRect();
const xc = rect.width / 2;
const yc = rect.height / 2;
setTilt({
x: ((yc - (e.clientY - rect.top)) / yc) * 9,
y: (((e.clientX - rect.left) - xc) / xc) * 9,
});
rafRef.current = null;
});
};
const handleMouseLeave = () => {
if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null; }
setTilt({ x: 0, y: 0 });
};
const handleScroll = () => {
if (window.innerWidth >= 1024) return;
if (rafRef.current) return;
rafRef.current = requestAnimationFrame(() => {
const rect = el.getBoundingClientRect();
const winH = window.innerHeight;
if (rect.top < winH && rect.bottom > 0) {
const diff = (winH / 2 - (rect.top + rect.height / 2)) / (winH / 2);
setTilt({ x: diff * 6, y: 0 });
}
rafRef.current = null;
});
};
el.addEventListener("mousemove", handleMouseMove);
el.addEventListener("mouseleave", handleMouseLeave);
window.addEventListener("scroll", handleScroll, { passive: true });
return () => {
el.removeEventListener("mousemove", handleMouseMove);
el.removeEventListener("mouseleave", handleMouseLeave);
window.removeEventListener("scroll", handleScroll);
if (rafRef.current) cancelAnimationFrame(rafRef.current);
};
}, []);
return (
{children}
);
}
Object.assign(window, { Icon, Pearl, Spark, GoldArc, useReveal, Tilt3D });