'use client';

import Image from 'next/image';
import { useEffect, useRef } from 'react';
import styles from './HowItWorks.module.css';

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: 'Discovery Session',
            description: 'We begin by understanding your brand goals, audience behavior, and existing social presence to identify opportunities.',
            icon: '/images/home/discovery.webp',
        },
        {
            number: '02',
            title: 'Planning & Direction',
            description: 'Insights gathered are translated into a focused roadmap covering content themes, platforms, timelines, and success metrics.',
            icon: '/images/home/plan.webp',
        },
        {
            number: '03',
            title: 'Execution Phase',
            description: 'Content is created, scheduled, and managed with precision, ensuring consistency across channels and alignment with strategy.',
            icon: '/images/home/execution.webp',
        },
        {
            number: '04',
            title: 'Outcome & Optimization',
            description: 'Performance is evaluated using clear metrics, allowing continuous refinement and improvement for stronger long-term results.',
            icon: '/images/home/outcome.webp',
        },
    ];

    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}>
                        A Clear, Structured <br /> Path to <span className="gradient-text">Social Growth</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}>
                                    <Image
                                        src={step.icon}
                                        alt={step.title}
                                        width={31}
                                        height={31}
                                        className={styles.iconImage}
                                    />
                                </div>
                            </div>

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