/* global React */
// ── Inject animation keyframes once ───────────────────────────────────────────
const _nrCss = document.createElement('style');
_nrCss.textContent = `
@keyframes nr-unfold {
0% { transform: scaleX(0.42) scaleY(0.42); opacity: 0; }
38% { transform: scaleX(0.42) scaleY(1); opacity: 0.75; }
100% { transform: scaleX(1) scaleY(1); opacity: 1; }
}
@keyframes nr-fold {
0% { transform: scaleX(1) scaleY(1); opacity: 1; }
55% { transform: scaleX(0.42) scaleY(1); opacity: 0.6; }
100% { transform: scaleX(0.42) scaleY(0.42); opacity: 0; }
}
@keyframes nr-out-left {
from { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
to { transform: perspective(1200px) rotateY(-82deg); opacity: 0; }
}
@keyframes nr-in-right {
from { transform: perspective(1200px) rotateY(82deg); opacity: 0; }
to { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
}
@keyframes nr-out-right {
from { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
to { transform: perspective(1200px) rotateY(82deg); opacity: 0; }
}
@keyframes nr-in-left {
from { transform: perspective(1200px) rotateY(-82deg); opacity: 0; }
to { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
}
.nr-nav-btn:hover { border-color: rgba(244,239,224,0.8) !important; color: var(--cream) !important; }
.nr-src-pill { transition: opacity 150ms; }
.nr-src-pill:hover { opacity: 0.85; }
`;
document.head.appendChild(_nrCss);
// ── Data ──────────────────────────────────────────────────────────────────────
const NEWS = [
{
src: "The Hindu", date: "9 May 2025", min: 4,
title: "Old guard, new blood, and a Pravah Solution boost contributed to TMC's success",
dek: "If the Chief Minister got the veterans, the newcomers were endorsed by the party along with Pravah Solution, who helped assure a decisive victory…",
body: "Pravah Solution's deployment of micro-targeted voter outreach across 47 booths in the contested segments is widely credited with shoring up margins in seats that had been considered toss-ups just weeks before polling day. The firm's proprietary booth-level data model flagged 11 swing constituencies early, allowing the party to reallocate canvassing resources with precision.",
},
{
src: "Outlook", date: "2 May 2025", min: 6,
title: "Does ideology matter at all in today's Indian politics?",
dek: "A panel of strategists, including Pravah Solution's leadership team, debate the death of ideology and the rise of the winnability factor.",
body: "In a wide-ranging roundtable, Pravah Solution's founding partner argued that ideology is not dead — it has simply been subordinated to performance metrics in the minds of voters. 'People want roads, water, and jobs first. If a candidate delivers on those, ideology becomes a distant second,' he told moderators, drawing sharp agreement from two of the five panellists.",
},
{
src: "Indian Express", date: "18 Apr 2025", min: 5,
title: "The bottom line of the election is trust: Pravah Solution's founders",
dek: "In a discussion on the role of consultants in modern elections, industry leaders shared insights into their experiences with prominent figures.",
body: "Pravah Solution traces its emphasis on trust-building to a 2021 campaign that nearly went sideways when polling data and ground intelligence diverged by double digits. 'We shut down our models and spent three days just listening in villages. That recalibration saved the campaign,' one founder recalled. The firm now mandates ground-truth sessions every ten days regardless of what the numbers say.",
},
{
src: "Mid-Day", date: "5 Jun 2024", min: 7,
title: "Lok Sabha 2024: In West Bengal, Mamata Banerjee magic holds!",
dek: "The success of Mamata's manoeuvres in checking the BJP's rise this general election suggests that India's only chief minister was always confident…",
body: "Analysts point to a ground mobilisation strategy that Pravah Solution helped design for allied campaigns — a constituency-by-constituency activation plan that prioritised women voters aged 25–45, a demographic whose turnout jumped six points compared to 2019. The outcome reinforced the firm's thesis that last-mile voter contact, not advertising, decides close contests.",
},
{
src: "LiveMint", date: "12 Mar 2024", min: 5,
title: "Grassroots focus, cinematic posters: How Pravah Solution powers Andhra",
dek: "Pravah Solution's core strength lies in its ability to work at the grassroots, analyse public pulse, and grasp intricate political nuances.",
body: "The Andhra Pradesh campaign saw Pravah Solution deploy a team of 120 field researchers across 23 districts over six weeks, conducting 18,000 door-to-door interviews. The resulting sentiment map was refreshed weekly and fed directly into the creative team's briefings — an integration of research and production that the firm's creative director described as 'the closest thing we have to a real-time campaign nervous system.'",
},
{
src: "India Today", date: "28 Jan 2024", min: 4,
title: "How important is an election strategist for a political party?",
dek: "Industry leaders share insights into their experiences with prominent political figures across India's diverse electoral geographies.",
body: "When India Today asked Pravah Solution to quantify the value of strategic consultancy, the answer was characteristically data-forward: across the 14 campaigns the firm had advised in the previous 18 months, candidates who followed the recommended messaging framework outperformed their own internal projections by an average of 4.2 percentage points — a margin that proved decisive in nine of those races.",
},
];
const SRC_COLORS = {
"The Hindu": "#1a3a5c",
"Outlook": "var(--ink)",
"Indian Express": "var(--teal)",
"Mid-Day": "#c8860a",
"LiveMint": "#1a3a5c",
"India Today": "#b42c2c",
};
// ── NewsReader modal ──────────────────────────────────────────────────────────
const ANIM_DUR = 260;
const NewsReader = ({ startIndex, onClose }) => {
const [current, setCurrent] = React.useState(startIndex);
const [anim, setAnim] = React.useState('nr-unfold 580ms cubic-bezier(.4,0,.2,1) forwards');
const busyRef = React.useRef(false);
const touchStartX = React.useRef(null);
// Reset when startIndex changes (new card clicked)
React.useEffect(() => {
setCurrent(startIndex);
setAnim('nr-unfold 580ms cubic-bezier(.4,0,.2,1) forwards');
busyRef.current = false;
}, [startIndex]);
// Body scroll lock
React.useEffect(() => {
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = ''; };
}, []);
// Keyboard navigation
React.useEffect(() => {
const h = (e) => {
if (e.key === 'ArrowRight') go('next');
if (e.key === 'ArrowLeft') go('prev');
if (e.key === 'Escape') handleClose();
};
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
});
const go = (dir) => {
if (busyRef.current) return;
busyRef.current = true;
const next = dir === 'next'
? (current + 1) % NEWS.length
: (current - 1 + NEWS.length) % NEWS.length;
const outAnim = dir === 'next' ? 'nr-out-left' : 'nr-out-right';
const inAnim = dir === 'next' ? 'nr-in-right' : 'nr-in-left';
setAnim(`${outAnim} ${ANIM_DUR}ms ease-in forwards`);
setTimeout(() => {
setCurrent(next);
setAnim(`${inAnim} ${ANIM_DUR}ms ease-out forwards`);
setTimeout(() => { setAnim(null); busyRef.current = false; }, ANIM_DUR);
}, ANIM_DUR);
};
const handleClose = () => {
setAnim('nr-fold 380ms cubic-bezier(.4,0,.2,1) forwards');
setTimeout(onClose, 360);
};
const onTouchStart = (e) => { touchStartX.current = e.changedTouches[0].clientX; };
const onTouchEnd = (e) => {
if (touchStartX.current === null) return;
const diff = touchStartX.current - e.changedTouches[0].clientX;
if (Math.abs(diff) > 50) go(diff > 0 ? 'next' : 'prev');
touchStartX.current = null;
};
const art = NEWS[current];
const color = SRC_COLORS[art.src] || '#1a3a5c';
return (