// ============================================================
// HogaresReviews — "Opiniones" section.
// Content/structure from the attached mockup; visuals = resi DS only.
// Desktop: left auto-advancing review carousel + right rating/recommend stats.
// Mobile (<768px): swipeable horizontal carousel (one card ~85vw, next peeking)
// with pagination dots, full untruncated text, reduced padding; stats below.
// ============================================================
const HOGARES_REVIEWS = [
{ text: "Lo que más me gustó fue saber el nombre del reciclador. Eso cambia todo.",
init: "AR", name: "Andrés R.", meta: "Metropolitan, Palermo", time: "8 meses con resi", color: "var(--resi-orange)" },
{ text: "Llevaba años separando y nunca sabía si servía de algo. Con resi lo veo en el reporte. Ya no tengo esa duda.",
init: "VG", name: "Vanessa G.", meta: "CR6, Puerta del Sol", time: "5 meses con resi", color: "var(--resi-blue)" },
{ text: "En mi edificio no había cultura de reciclaje. Ahora somos 14 hogares y el punto limpio está siempre lleno.",
init: "SN", name: "Sandra N.", meta: "Verde Niza, La Sultana", time: "11 meses con resi", color: "var(--resi-pink)" },
{ text: "Mi hijo de 12 años ya sabe qué va en cada bolsita. Lo hace solo.",
init: "LR", name: "Lorena R.", meta: "Villa Carmenza, Manizales", time: "6 meses con resi", color: "var(--resi-green)" },
];
const Stars = ({ size = 14 }) => (
{[0, 1, 2, 3, 4].map(i => )}
);
// Author row — shared by desktop + mobile review cards.
const ReviewAuthor = ({ r }) => (
{r.init}
{r.name}{r.meta}{r.time}
);
// Mobile review card — full untruncated text, reduced padding (20px),
// equal height across the swipe row (stretch + author pinned to bottom).
const ReviewCardMobile = ({ r }) => (
"
{r.text}
);
// Stat cards — shared by desktop + mobile (padding parametrized so desktop
// stays pixel-identical at pad=28; mobile tightens to pad=20).
const RatingStatCard = ({ pad = 28 }) => (
4.9
valoración promedio de todos los hogares resi
);
const RecommendStatCard = ({ pad = 28 }) => (
Hogares que recomendarían resi
96%
);
const HogaresReviews = () => {
const isMobile = useIsMobile();
const [idx, setIdx] = React.useState(0);
const [progress, setProgress] = React.useState(0);
const n = HOGARES_REVIEWS.length;
const go = (i) => { setIdx((i + n) % n); setProgress(0); };
// Auto-advance only powers the desktop single-card carousel.
React.useEffect(() => {
if (isMobile) return;
const t = setInterval(() => {
setProgress(p => {
if (p >= 100) { setIdx(i => (i + 1) % n); return 0; }
return p + 2;
});
}, 100);
return () => clearInterval(t);
}, [idx, isMobile]);
const r = HOGARES_REVIEWS[idx];
return (