'use client'; import { useEffect, useRef, useState } from 'react'; // ─── Data ──────────────────────────────────────────────────────────────────── const roles = [ { role: 'Software Developers', icon: ( ), headline: 'Code at the speed of thought', points: [ 'AI-assisted code generation and refactoring', 'Automated test suite generation and debugging', 'Architecture review and performance analysis', 'Security vulnerability scanning in real time', ], }, { role: 'Graphic Design Artists', icon: ( ), headline: 'From concept to pixel — instantly', points: [ 'AI mood-board and concept generation', 'Rapid visual prototyping and style exploration', 'Background removal and image enhancement', 'Brand consistency checks across deliverables', ], }, { role: 'Business Consultants', icon: ( ), headline: 'Sharper insights, faster decisions', points: [ 'AI-powered competitive landscape analysis', 'Market trend forecasting and opportunity mapping', 'Automated business reporting and KPI dashboards', 'Data-driven strategic planning and modeling', ], }, { role: 'Certified Public Accountant', icon: ( ), headline: 'Numbers that tell the full story', points: [ 'AI-driven financial modeling and forecasting', 'Automated bookkeeping anomaly detection', 'Tax optimization scenario simulation', 'Instant compliance and regulatory checks', ], }, { role: 'Google Ads Specialist', icon: ( ), headline: 'Every ad dollar works harder', points: [ 'AI bid strategy and budget optimization', 'Predictive audience targeting and segmentation', 'Automated A/B copy and creative testing', 'Real-time campaign performance forecasting', ], }, ]; // ─── Grid card (desktop) ────────────────────────────────────────────────────── function GridRoleCard({ role, icon, headline, points, index }: typeof roles[0] & { index: number }) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } }, { threshold: 0.15 } ); observer.observe(el); return () => observer.disconnect(); }, []); return (
{icon}
{role}

{headline}

    {points.map((pt) => (
  • ◆ {pt}
    • ))}
); } // ─── Slider card (compact screens) ─────────────────────────────────────────── function SliderRoleCard({ role, icon, headline, points }: typeof roles[0]) { return (
{icon}
{role}

{headline}

    {points.map((pt) => (
  • ◆ {pt}
    • ))}
); } // ─── Slider nav button ──────────────────────────────────────────────────────── function NavBtn({ direction, onClick, disabled }: { direction: 'prev' | 'next'; onClick: () => void; disabled: boolean }) { return ( ); } // ─── Main Component ─────────────────────────────────────────────────────────── /** Slider is used when the viewport is narrower than this threshold. */ const SLIDER_BREAKPOINT = 900; export default function AiSection() { const [useSlider, setUseSlider] = useState(false); const [card, setCard] = useState(0); const [slideDir, setSlideDir] = useState<'fwd' | 'bwd'>('fwd'); const headingRef = useRef(null); const [headingVisible, setHeadingVisible] = useState(false); // Detect layout mode based on viewport width useEffect(() => { const check = () => setUseSlider(window.innerWidth < SLIDER_BREAKPOINT); check(); window.addEventListener('resize', check); return () => window.removeEventListener('resize', check); }, []); // Heading entrance animation — re-attach when layout switches so the ref is current useEffect(() => { const el = headingRef.current; if (!el) return; if (headingVisible) return; // already animated, no need to observe const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setHeadingVisible(true); observer.disconnect(); } }, { threshold: 0.1 } ); observer.observe(el); return () => observer.disconnect(); }, [useSlider, headingVisible]); const go = (next: number) => { if (next < 0 || next >= roles.length) return; setSlideDir(next > card ? 'fwd' : 'bwd'); setCard(next); }; // ── Shared decorative elements ───────────────────────────────────────────── const decorative = ( <>
); // ── Shared heading ───────────────────────────────────────────────────────── const heading = (

Our Competitive Edge

Every expert on our team
amplified by AI.

At Bitsia, artificial intelligence is not a buzzword — it is woven into the daily workflow of every specialist. The result: faster delivery, sharper output, and measurably better outcomes for every client project.

); // ── Shared callout ───────────────────────────────────────────────────────── const callout = (

The same project scope. Delivered with greater precision — and in less time.

Start a Project
); // ── Slider layout (compact screens) ─────────────────────────────────────── if (useSlider) { return (
{decorative}
{/* Compact heading for slider */}

Our Competitive Edge

Every expert on our team{' '} amplified by AI.

AI is woven into the daily workflow of every specialist — faster delivery, sharper output.

{/* Slider */}
go(card - 1)} disabled={card === 0} />
{/* Dots */}
{roles.map((_, i) => (
go(card + 1)} disabled={card === roles.length - 1} />
{/* Callout (compact) */}

The same scope. Greater precision. Less time.

Start a Project
); } // ── Grid layout (desktop) ────────────────────────────────────────────────── return (
{decorative}
{heading}
{/* Role cards grid */}
{roles.map((r, i) => ( ))}
{/* Callout */}
{callout}
); }