"use client";

import React, { useState, useEffect, useRef } from 'react';

const AboutThree = () => {
    const [count, setCount] = useState(0);
    const countTarget = 10;
    const [hasCounted, setHasCounted] = useState(false);
    const counterRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                setHasCounted(true);
                let start = 0;
                const duration = 1500;
                const increment = countTarget / (duration / 16);
                const timer = setInterval(() => {
                    start += increment;
                    if (start >= countTarget) {
                        setCount(countTarget);
                        clearInterval(timer);
                    } else {
                        setCount(Math.floor(start));
                    }
                }, 16);
            } else {
                setHasCounted(false);
                setCount(0);
            }
        }, { threshold: 0.5 });

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

        return () => observer.disconnect();
    }, []);

    return (
        <section className="about-three">
            <div className="about-three__bg">
                <div className="about-three__shape-one">
                    <img src="/assets/images/careers/2/element-1.webp" alt="Team defining innovation strategy at Metatron Cube Solutions." />
                </div>
                <div className="about-three__shape-two">
                    <img src="/assets/images/careers/2/element-2.webp" alt="element-1" />
                </div>
            </div>
            <div className="container">
                <div className="row">
                    <div className="col-xl-6 wow fadeInUp animated" data-wow-delay="100ms">
                        <div className="about-three__content">
                            <div className="sec-title">
                                <div className="sec-title__shape"></div>
                                <h6 className="sec-title__tagline">Benefits That Matter</h6>
                                <h3 className="sec-title__title">What We Offer</h3>
                            </div>
                            <p className="about-three__text">
                                From career growth to work-life balance, discover why Metatroncube is the right place for you.
                            </p>
                            <div className="about-three__card">
                                <ul className="about-three__card__list">
                                    <li className="about-three__card__item">
                                        <div className="about-three__card__icon">
                                            <img src="/assets/images/careers/2/icon.webp" alt="Innovate Fearlessly" />
                                        </div>
                                        <h3 className='text-white'>Innovate Fearlessly</h3>
                                    </li>
                                    <li>
                                        {/* <span className="fa-solid fa-circle-check" style={{ color: '#1a1f2b', fontSize: '20px', marginRight: '8px' }}></span>
                                        The right therapist can help you develop skills */}
                                    </li>
                                </ul>
                                <div className="about-three__card__exp count-box counted" ref={counterRef}>
                                    <h3 className="about-three__card__exp__number">
                                        <span className="count-text">{count}</span>+
                                    </h3>
                                    <p className="about-three__card__exp__text">Years Experience</p>
                                </div>
                            </div>
                            <div className="about-three__benefits pt-20">
                                <ul className="about-three__benefits__list">
                                    <li className="bullet-item d-flex align-items-center mb-20">
                                        <i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>
                                        <span><b>Opportunities to Innovate: </b> Work on cutting-edge projects that challenge you to think outside the box.</span>
                                    </li>
                                    <li className="bullet-item d-flex align-items-center mb-20">
                                        <i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>
                                        <span><b>Global Exposure:</b> Collaborate with international clients and diverse teams.</span>
                                    </li>
                                    <li className="bullet-item d-flex align-items-center mb-20">
                                        <i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>
                                        <span><b>
                                            Career Growth:</b> Advance your skills with our mentorship programs, certifications, and workshops.</span>
                                    </li>
                                    <li className="bullet-item d-flex align-items-center mb-20">
                                        <i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>
                                        <span><b>
                                            Inclusive Culture:</b> Be part of a workplace that values diversity, equity, and belonging.</span>
                                    </li>
                                    <li className="bullet-item d-flex align-items-center">
                                        <i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>
                                        <span><b>
                                            Employee-First Approach:</b> Enjoy flexible work policies, wellness programs, and a focus on work-life balance.</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="col-xl-6 wow fadeInRight animated" data-wow-delay="200ms">
                        <div className="pelocis-stretch-element-inside-column" style={{ marginLeft: '0px', marginRight: '-375.012px' }}>
                            <div className="about-three__img">
                                <img src="/assets/images/careers/2/right-img.webp" alt="What we offer" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default AboutThree;