'use client';

import { useEffect, useRef } from 'react';
import styles from './HowItWorks.module.css';
import { TrendingUp, BarChart3, Users, Heart } from 'lucide-react';

export default function HowItWorks() {
    const sectionRef = useRef<HTMLElement>(null);

    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add(styles.visible);
                    }
                });
            },
            { threshold: 0.1 }
        );

        const steps = sectionRef.current?.querySelectorAll(`.${styles.stepItem}`);
        steps?.forEach((step) => observer.observe(step));

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

    const steps = [
        {
            number: '01',
            title: 'Trends and Technologies',
            description: 'Leverage emerging tools to foster innovation and collaboration.',
            icon: <TrendingUp />,
        },
        {
            number: '02',
            title: 'Data Analysis and Analytics',
            description: 'Deploy insights to improve decision making and drive traffic.',
            icon: <BarChart3 />,
        },
        {
            number: '03',
            title: 'Your Target Audience',
            description: 'Understand Your Target Audience and their shopping behavior.',
            icon: <Users />,
        },
        {
            number: '04',
            title: 'Social Media Engagement',
            description: 'Create valuable, shareable content for increased engagement.',
            icon: <Heart />,
        },
    ];

    return (
        <section className={styles.section} id="how-it-works" ref={sectionRef}>
            <div className={styles.container}>
                <div className={styles.header}>
                    <span className={styles.subTitle}>Our Work Process</span>
                    <h2 className={styles.title}>
                        How We <span className="gradient-text">Drive Results</span>
                    </h2>
                </div>

                <div className={styles.timeline}>
                    {steps.map((step, index) => (
                        <div key={index} className={styles.stepItem}>
                            {/* Number Circle Left */}
                            <div className={styles.numberWrapper}>
                                <div className={styles.numberCircle}>
                                    {step.number}
                                </div>
                            </div>

                            {/* Content Capsule */}
                            <div className={styles.cardCapsule}>
                                <div className={styles.textContent}>
                                    <h3 className={styles.stepTitle}>{step.title}</h3>
                                    <p className={styles.stepDescription}>{step.description}</p>
                                </div>
                                <div className={styles.iconCircle}>
                                    {step.icon}
                                </div>
                            </div>

                            {/* Manual connecting line logic for visual flow if needed 
                                (CSS pseudo-element ::before handles main vertical line)
                            */}
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}