/* global React */ const TEAM_ROLES = [ { no: "01", role: "Photographer", accent: "var(--peacock-bright)", duties: [ "Coverage of daily activities, public meetings and events", "Campaign visuals and on-ground photography", "Building a strong visual record of the candidate's journey" ] }, { no: "02", role: "Videographer", accent: "var(--gold)", duties: [ "Recording campaign events, speeches and public interactions", "Producing reels and short-form video content", "Full promotional video coverage across the campaign" ] }, { no: "03", role: "Graphic Designer", accent: "var(--peacock-bright)", duties: [ "Creation of campaign graphics, banners and posters", "Social media posts and digital creatives", "Consistent visual identity across all campaign materials" ] }, { no: "04", role: "Video Editor", accent: "var(--gold)", duties: [ "Editing footage from campaign events, speeches and interactions", "Producing reels, promotional videos and public interaction cuts", "Post-production delivery at campaign pace" ] }, { no: "05", role: "Social Media Handler", accent: "var(--peacock-bright)", duties: [ "Managing daily posts, analytics and platform engagement", "DMs, comments and public interaction across all channels", "Maintaining a consistent and responsive online presence" ] }, { no: "06", role: "Social Media Strategist", accent: "var(--gold)", duties: [ "Planning content strategy and campaign narratives", "Posting schedules, audience targeting and A/B testing", "Performance optimisation and weekly reporting" ] }, { no: "07", role: "Content Writer", accent: "var(--peacock-bright)", duties: [ "Scriptwriting, captions and speech drafts", "Press notes, manifesto content and manifestos", "Message drafts tailored for every platform and audience" ] }, { no: "08", role: "Campaign Manager", accent: "var(--gold-bright)", duties: [ "Overall coordination of all campaign activities", "Team management, strategy execution and escalation", "Ground coordination, daily briefings and reporting" ] }, { no: "09", role: "Ads & Boosting Executive", accent: "var(--peacock-bright)", duties: [ "Running paid advertisements and boosting targeted posts", "Audience segmentation, budget management and bid strategy", "Performance tracking, optimisation and ROI reporting" ] }, { no: "10", role: "Campaign Associate", accent: "var(--gold)", duties: [ "Supporting day-to-day campaign operations on ground", "Coordinating with field teams, booth workers and local units", "Execution support, feedback collection and status reports" ] } ]; const SLIDE_DURATION = 5000; const TeamStructure = () => { const [active, setActive] = React.useState(0); const [visible, setVisible] = React.useState(true); const [progress, setProgress] = React.useState(0); const autoRef = React.useRef(null); const rafRef = React.useRef(null); const progStart = React.useRef(null); const goTo = (idx) => { clearTimeout(autoRef.current); cancelAnimationFrame(rafRef.current); setVisible(false); setTimeout(() => { setActive(idx); setVisible(true); setProgress(0); }, 200); }; /* ── Auto-advance ── */ React.useEffect(() => { autoRef.current = setTimeout(() => { goTo((active + 1) % TEAM_ROLES.length); }, SLIDE_DURATION); return () => clearTimeout(autoRef.current); }, [active]); /* ── Progress bar ── */ React.useEffect(() => { setProgress(0); progStart.current = Date.now(); const tick = () => { const p = Math.min(((Date.now() - progStart.current) / SLIDE_DURATION) * 100, 100); setProgress(p); if (p < 100) rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [active]); const role = TEAM_ROLES[active]; return (
{/* ── Header ── */}
Campaign Team Structure

Your complete team,
deployed for every candidate.

A dedicated 10-member team is assigned to each campaign — covering strategy, content, ground operations and digital execution end to end.

{/* ── Slide card ── */}
{/* Progress bar */}
{/* Slide content */}
{/* Left: big number */}
{role.no}
of {TEAM_ROLES.length} roles
{/* Right: role name + duties */}
{role.role}
    {role.duties.map((d, i) => (
  • {d}
    • ))}
{/* Bottom nav bar */}
{/* Pill dots */}
{TEAM_ROLES.map((_, idx) => (
{/* Arrow controls */}
{/* ── Role chips overview ── */}
{TEAM_ROLES.map((r, idx) => ( ))}
); }; window.TeamStructure = TeamStructure;