// components.jsx — small reusable components
const { useState, useEffect, useRef } = React;
// Logo mark — original mark for "Tu Abogado Miami"
function LogoMark({ size = 28, color = "currentColor" }) {
return (
);
}
// Phone icon
function IconPhone({ size = 14 }) {
return (
);
}
function IconArrow({ size = 14 }) {
return (
);
}
function IconCheck({ size = 14 }) {
return (
);
}
function IconPin({ size = 14 }) {
return (
);
}
function IconGlobe({ size = 14 }) {
return (
);
}
function IconStar({ size = 12 }) {
return (
);
}
function IconScale({ size = 26, color = "currentColor" }) {
return (
);
}
// Striped placeholder image
function Placeholder({ label, ratio = "4 / 5", style = {}, tone = "cream" }) {
const bg = tone === "deep"
? { background: "var(--bg-deep)", color: "var(--paper)" }
: tone === "brass"
? { background: "var(--brass)" }
: {};
return (
);
}
// Reveal-on-scroll wrapper — with viewport check + IO fallback
function Reveal({ children, delay = 0, as: As = "div", style, className = "", ...rest }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
if (!ref.current || seen) return;
const el = ref.current;
const inView = () => {
const r = el.getBoundingClientRect();
return r.top < (window.innerHeight || 0) - 40 && r.bottom > 0;
};
if (inView()) { setSeen(true); return; }
let io;
try {
io = new IntersectionObserver((entries) => {
if (entries.some((e) => e.isIntersecting)) { setSeen(true); io.disconnect(); }
}, { threshold: 0.05, rootMargin: "0px 0px -40px 0px" });
io.observe(el);
} catch (_) {}
const onScroll = () => { if (inView()) { setSeen(true); cleanup(); } };
const cleanup = () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
io?.disconnect();
};
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
// Final safety: ensure content is visible after 1.5s no matter what.
const fallback = setTimeout(() => setSeen(true), 1500);
return () => { cleanup(); clearTimeout(fallback); };
}, [seen]);
return (
{children}
);
}
// Section heading block — eyebrow + display title + lead
function SectionHead({ eyebrow, title, sub, align = "left", maxw = 720, titleSize = "clamp(34px, 4.4vw, 64px)" }) {
const ta = align === "center" ? "center" : "left";
return (
{eyebrow && (
{eyebrow}
)}
{title}
{sub && {sub}
}
);
}
// Animated counter on view
function CountUp({ value, suffix = "", duration = 1400 }) {
const ref = useRef(null);
const [n, setN] = useState(0);
useEffect(() => {
if (!ref.current) return;
let raf;
const io = new IntersectionObserver(([e]) => {
if (!e.isIntersecting) return;
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setN(Math.round(value * eased));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
io.disconnect();
}, { threshold: 0.5 });
io.observe(ref.current);
return () => { io.disconnect(); cancelAnimationFrame(raf); };
}, [value, duration]);
return {n.toLocaleString()}{suffix};
}
Object.assign(window, {
LogoMark, IconPhone, IconArrow, IconCheck, IconPin, IconGlobe, IconStar, IconScale,
Placeholder, Reveal, SectionHead, CountUp,
});