SocialBuddyMarketingWebsite/components/Hero.tsx

'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import styles from './Hero.module.css';

export default function Hero() {
    const [currentSlide, setCurrentSlide] = useState(0);
    const [typedText, setTypedText] = useState('');

    const slides = [
        {
            id: 1,
            badge: 'New Feature',
            badgeText: 'AI-Powered Scheduling is here',
            title: 'Find your social media success.',
            subtitle: 'Your dream engagement is waiting for you. Manage all your accounts in one place.',
            ctaPrimary: 'Get Started',
            image: '/hero-slide-1.png'
        },
        {
            id: 2,
            badge: 'Analytics',
            badgeText: 'Deep insights for growth',
            title: 'Analyze performance & boost reach.',
            subtitle: 'Track every click, like, and share with our advanced analytics dashboard.',
            ctaPrimary: 'Explore Analytics',
            image: '/hero-slide-2.png'
        },
        {
            id: 3,
            badge: 'Community',
            badgeText: 'Join 10,000+ Creators',
            title: 'Connect with your audience instantly.',
            subtitle: 'Real-time engagement tools to keep your community active and growing.',
            ctaPrimary: 'Join Community',
            image: '/hero-slide-3.png'
        },
    ];

    // Typing effect for the title of the current slide
    useEffect(() => {
        const text = slides[currentSlide].title;
        setTypedText('');
        let i = 0;
        const timer = setInterval(() => {
            if (i < text.length) {
                setTypedText((prev) => text.slice(0, i + 1));
                i++;
            } else {
                clearInterval(timer);
            }
        }, 50);
        return () => clearInterval(timer);
    }, [currentSlide]);

    // Auto-slide
    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentSlide((prev) => (prev + 1) % slides.length);
        }, 5000);
        return () => clearInterval(timer);
    }, []);

    const slide = slides[currentSlide];

    return (
        <section className={styles.heroSection}>
            <div className={styles.heroBackground}>
                {/* Abstract Circles/Shapes like reference */}
                <div className={styles.circleBg1}></div>
                <div className={styles.circleBg2}></div>
            </div>

            <div className={`container ${styles.container}`}>
                <div className={styles.contentWrapper}>
                    {/* Left Content */}
                    <div className={styles.leftContent}>
                        <div className={`${styles.badge} animate-fade-in`}>
                            <span className={styles.badgeLabel}>{slide.badge}</span>
                            <span className={styles.badgeText}>{slide.badgeText}</span>
                        </div>

                        <h1 className={styles.title}>
                            {typedText}<span className={styles.cursor}>|</span>
                        </h1>

                        <p className={`${styles.subtitle} animate-fade-in`}>
                            {slide.subtitle}
                        </p>

                        {/* Search-like CTA Bar like Reference */}
                        <div className={`${styles.searchBarCta} animate-fade-in`}>
                            <div className={styles.inputGroup}>
                                <span className={styles.searchIcon}>✉️</span>
                                <input type="email" placeholder="Enter your email address" className={styles.searchInput} />
                            </div>
                            <button className={styles.searchBtn}>
                                {slide.ctaPrimary}
                            </button>
                        </div>

                        <div className={styles.trustedBy}>
                            <p>We are Trusted by:</p>
                            <div className={styles.trustedIcons}>
                                <div className={styles.trustIcon} style={{ color: '#EA4335' }}>G</div> {/* Google */}
                                <div className={styles.trustIcon} style={{ color: '#0057ff' }}>Be</div> {/* Behance */}
                                <div className={styles.trustIcon} style={{ color: '#E4405F' }}>📷</div> {/* Insta */}
                                <div className={styles.trustIcon} style={{ color: '#00A4EF' }}>⊞</div> {/* Microsoft */}
                            </div>
                        </div>
                    </div>

                    {/* Right Content - Image & Floating Cards */}
                    <div className={styles.rightContent}>
                        <div className={styles.imageContainer}>
                            <div className={styles.mainImageCircle}>
                                {/* Using dynamic image from slide data */}
                                <img
                                    key={slide.id}
                                    src={slide.image}
                                    alt={slide.title}
                                    className={`${styles.heroImage} animate-fade-in`}
                                />
                            </div>

                            {/* Floating Card 1: Congrats */}
                            <div className={`${styles.floatCard} ${styles.cardCongrats}`}>
                                <div className={styles.cardIcon}>📩</div>
                                <div className={styles.cardText}>
                                    <strong>Congrats!</strong>
                                    <span>You have got an Email</span>
                                </div>
                                <div className={styles.checkIcon}>✓</div>
                            </div>

                            {/* Floating Card 2: Jobholder / Users */}
                            <div className={`${styles.floatCard} ${styles.cardUsers}`}>
                                <div className={styles.userCount}>10k+ <span className={styles.userLabel}>Active Users</span></div>
                                <div className={styles.userAvatars}>
                                    <span className={styles.avatar}>👩</span>
                                    <span className={styles.avatar}>👨</span>
                                    <span className={styles.avatar}>🧑</span>
                                    <span className={styles.addBtn}>+</span>
                                </div>
                            </div>

                            {/* Floating Card 3: Small Message */}
                            <div className={`${styles.floatCard} ${styles.cardMessage}`}>
                                <div className={styles.msgAvatar}>👱‍♀️</div>
                                <div className={styles.msgText}>
                                    <span>Hi,</span>
                                    <p>I am looking for...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Slider Indicators */}
                <div className={styles.sliderDots}>
                    {slides.map((_, idx) => (
                        <button
                            key={idx}
                            className={`${styles.dot} ${currentSlide === idx ? styles.activeDot : ''}`}
                            onClick={() => setCurrentSlide(idx)}
                        />
                    ))}
                </div>
            </div>
        </section>
    );
}