'use client';

import Image from 'next/image';
import { useEffect, useRef, useState } from 'react';

type CounterProps = {
    value: number;
    suffix?: string;
};

const Counter = ({ value, suffix = '+' }: CounterProps) => {
    const [count, setCount] = useState(0);
    const [isVisible, setIsVisible] = useState(false);
    const counterRef = useRef<HTMLSpanElement>(null);

    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    setIsVisible(true);
                }
            },
            { threshold: 0.3 }
        );

        if (counterRef.current) observer.observe(counterRef.current);

        return () => {
            if (counterRef.current) observer.unobserve(counterRef.current);
        };
    }, []);

    useEffect(() => {
        if (!isVisible) return;

        const duration = 2000;
        const steps = 60;
        const increment = value / steps;
        const stepDuration = duration / steps;
        let currentStep = 0;

        const timer = setInterval(() => {
            currentStep++;
            if (currentStep <= steps) {
                setCount(Math.floor(increment * currentStep));
            } else {
                setCount(value);
                clearInterval(timer);
            }
        }, stepDuration);

        return () => clearInterval(timer);
    }, [isVisible, value]);

    return (
        <span ref={counterRef}>
            {count.toLocaleString()}
            <span aria-hidden="true">{suffix}</span>
        </span>
    );
};

export default function ImpactSection() {
    return (
        <>
            <section
                className="w-full bg-[#f1efee] impact-section"
                style={{ paddingTop: '60px', paddingBottom: '80px' }}
            >
                <div className="mx-auto max-w-[1140px] px-[15px]">
                    <div className="flex gap-[80px] impact-flex">

                        {/* IMAGE */}
                        <div className="w-[42%] flex items-center justify-center impact-left">
                            <div className="relative w-full max-w-[450px] h-[450px] impact-image">
                                <Image
                                    src="/second_image_colage.png"
                                    alt="Nyra impact collage"
                                    fill
                                    priority
                                    className="object-contain"
                                />
                            </div>
                        </div>

                        {/* CONTENT */}
                        <div className="w-[58%] min-w-0 impact-right">

                            {/* TITLE */}
                            <div className="mb-[40px]">
                                <h2 className="mb-[6px] text-[32px] font-bold text-[#1f2a44] impact-heading">
                                    OUR IMPACT
                                </h2>
                                <div
                                    className="border-t border-dashed border-[#d86a8c] impact-divider"
                                    style={{ borderWidth: '0.5px', width: '240px', maxWidth: '100%' }}
                                />
                            </div>

                            {/* DESCRIPTION */}
                            <p className="mb-[70px] max-w-[620px] text-[16px] leading-[1.9] text-[#5d6371] text-justify impact-text">
                                We work with clients to holistically identify and achieve their
                                business outcomes through a comprehensive Leadership Management &
                                Development model that integrates Communication, Strategic Thinking,
                                and Creative Acumen along with people, business, and results to
                                create a well rounded and holistic approach. We have worked across
                                Technology, Retail, Med-Tech, Ed-Tech.
                            </p>

                            {/* STATS */}
                            <div className="impact-stats">
                                {[
                                    { value: 26000, label: 'Lives touched' },
                                    { value: 500, label: 'Clients served' },
                                    { value: 12, label: 'Companies collaborated' },
                                ].map((item, i) => (
                                    <div key={i} className="impact-stat-item">
                                        <div
                                            className="impact-stat-number"
                                            style={{
                                                fontWeight: 900,
                                                fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
                                            }}
                                        >
                                            <Counter value={item.value} />
                                        </div>
                                        <div className="impact-stat-label">
                                            {item.label}
                                        </div>
                                        <div
                                            className="impact-stat-divider"
                                            style={{ borderWidth: '0.5px' }}
                                        />
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* BLUE LINE */}
            <div className="w-full h-[8px] bg-[#5DADE2]" />

            <style dangerouslySetInnerHTML={{
                __html: `
                /* ── STATS — desktop ── */
                .impact-stats {
                    display: flex;
                    flex-direction: column;
                    gap: 0;
                }
                .impact-stat-item {
                    padding: 20px 0;
                }
                .impact-stat-number {
                    font-size: 40px;
                    line-height: 1;
                    color: #B74273;
                }
                .impact-stat-label {
                    margin-top: 8px;
                    font-size: 18px;
                    color: #5d6371;
                }
                .impact-stat-divider {
                    margin-top: 20px;
                    width: 400px;
                    border-top: 0.5px dashed #1f2a44;
                }

                /* ── MOBILE ── */
                @media (max-width: 767px) {
                    .impact-section {
                        padding-top: 30px !important;
                        padding-bottom: 40px !important;
                    }

                    .impact-flex {
                        flex-direction: column !important;
                        gap: 20px !important;
                    }

                    .impact-left,
                    .impact-right {
                        width: 100% !important;
                    }

                    /* Tighter image — no excess gap above or below */
                    .impact-left {
                        padding: 0 !important;
                        margin: 0 !important;
                    }
                    .impact-image {
                        height: 260px !important;
                        max-width: 100% !important;
                    }

                    /* Heading on one line */
                    .impact-heading {
                        font-size: 26px !important;
                        white-space: nowrap !important;
                        text-align: left !important;
                    }

                    .impact-divider {
                        width: 35% !important;
                        max-width: 35% !important;
                    }

                    .impact-text {
                        text-align: left !important;
                        font-size: 15px !important;
                        line-height: 1.7 !important;
                        margin-bottom: 32px !important;
                    }

                    /* Stats — equal spacing matching screenshot */
                    .impact-stat-item {
                        padding: 14px 0 !important;
                    }
                    .impact-stat-number {
                        font-size: 32px !important;
                    }
                    .impact-stat-label {
                        font-size: 15px !important;
                        margin-top: 4px !important;
                        text-align: left !important;
                    }
                    .impact-stat-divider {
                        width: 100% !important;
                        margin-top: 14px !important;
                    }
                }

                @media (max-width: 480px) {
                    .impact-heading {
                        font-size: 22px !important;
                    }
                    .impact-image {
                        height: 220px !important;
                    }
                    .impact-stat-number {
                        font-size: 28px !important;
                    }
                    .impact-stat-item {
                        padding: 12px 0 !important;
                    }
                    .impact-stat-divider {
                        margin-top: 12px !important;
                    }
                }
            `}} />
        </>
    );
}