'use client';

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.step}`);
        steps?.forEach((step) => observer.observe(step));

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

    const steps = [
        {
            number: '01',
            title: 'Connect Your Accounts',
            description: 'Link all your social media accounts in seconds with our secure OAuth integration.',
            icon: '🔗',
            color: '#667eea',
        },
        {
            number: '02',
            title: 'Create & Schedule Content',
            description: 'Design beautiful posts with our editor and schedule them at optimal times using AI suggestions.',
            icon: '✍️',
            color: '#ec4899',
        },
        {
            number: '03',
            title: 'Engage Your Audience',
            description: 'Respond to comments, messages, and mentions from a unified inbox across all platforms.',
            icon: '💬',
            color: '#14b8a6',
        },
        {
            number: '04',
            title: 'Analyze & Optimize',
            description: 'Track performance metrics and get actionable insights to improve your social media strategy.',
            icon: '📈',
            color: '#f59e0b',
        },
    ];

    return (
        <section className="section" id="how-it-works" ref={sectionRef}>
            <div className="container">
                <div className={styles.header}>
                    <div className={styles.badge}>
                        <span>🚀</span>
                        <span>How It Works</span>
                    </div>
                    <h2 className={styles.title}>
                        Get Started in <span className="gradient-text">4 Simple Steps</span>
                    </h2>
                    <p className={styles.subtitle}>
                        From setup to success, we've made it incredibly easy to manage your social media presence.
                    </p>
                </div>

                <div className={styles.stepsContainer}>
                    {steps.map((step, index) => (
                        <div key={index} className={styles.step}>
                            <div className={styles.stepNumber} style={{ background: `${step.color}20`, color: step.color }}>
                                {step.number}
                            </div>
                            <div className={styles.stepContent}>
                                <div className={styles.stepIcon} style={{ background: `${step.color}15` }}>
                                    <span style={{ filter: `drop-shadow(0 0 10px ${step.color})` }}>{step.icon}</span>
                                </div>
                                <h3 className={styles.stepTitle}>{step.title}</h3>
                                <p className={styles.stepDescription}>{step.description}</p>
                            </div>
                            {index < steps.length - 1 && (
                                <div className={styles.connector}>
                                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                    </svg>
                                </div>
                            )}
                        </div>
                    ))}
                </div>

                <div className={styles.ctaBox}>
                    <div className={styles.ctaContent}>
                        <h3 className={styles.ctaTitle}>Ready to streamline your social media?</h3>
                        <p className={styles.ctaText}>Start your 14-day free trial today. No credit card required.</p>
                    </div>
                    <a href="https://app.socialbuddy.co/signup" className="btn btn-primary btn-large">
                        Get Started Free
                        <span className={styles.arrow}>→</span>
                    </a>
                </div>
            </div>
        </section>
    );
}