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: 'INSIGHTS',
            badgeText: 'Smarter decisions powered by data',
            title: 'Understand what works and amplify your impact.',
            subtitle: 'Monitor interactions, audience behavior, and campaign outcomes through a unified insights panel designed to guide better marketing moves.',
            ctaPrimary: 'View Insights',
            trustedBy:'Chosen by teams across industries',
            image: '/images/home/banner-1.webp'
        },
        {
            id: 2,
            badge: 'CONTROL',
            badgeText: 'One dashboard, total clarity',
            title: 'Take charge of every social channel effortlessly.',
            subtitle: 'Coordinate publishing, conversations, and performance tracking across platforms without switching tools or losing momentum.',
            ctaPrimary: 'Access the Dashboard',
            trustedBy:'Supporting brands, creators, and agencies globally',
            image: '/images/home/banner-2.webp'
        },
        {
            id: 3,
            badge: 'OPTIMIZATION',
            badgeText: 'Designed for consistent growth',
            title: 'Turn social activity into measurable business wins.',
            subtitle: 'Leverage intelligent reports and audience insights to refine your strategy, improve visibility, and scale engagement with confidence.',
            ctaPrimary: 'Start Your Journey',
            trustedBy:'Built for fast-moving marketing teams',
            image: '/images/home/banner-3.webp'
        },
    ];

    // 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>{slide.trustedBy}</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>
    );
}