'use client';

import styles from './WhyChooseUs.module.css';

export default function WhyChooseUs() {
    return (
        <section className={styles.section}>
            <div className="container">
                <div className={styles.header}>
                    <div className={styles.subTitle}>Why Choose Us</div>
                    <h2 className={styles.title}>Why <span className="gradient-text">SocialBuddy?</span></h2>
                    <p className={styles.subtitle}>
                        Don't just manage your social media—master it. Join thousands of creators and businesses who use SocialBuddy to grow faster.
                    </p>
                </div>

                <div className={styles.bentoGrid}>
                    {/* Item 1: AI Assistant (Large) */}
                    <div className={`${styles.bentoItem} ${styles.itemLarge} ${styles.aiCard}`}>
                        <div className={styles.itemContent}>
                            <div className={styles.iconWrapper}>
                                <span className={styles.icon}>✨</span>
                            </div>
                            <h3>The Ultimate AI Assistant</h3>
                            <p>Generate captions, hashtags, and creative ideas in seconds with our context-aware AI.</p>
                        </div>
                        <div className={styles.visualAi}>
                            <div className={styles.typingBox}>
                                <span className={styles.typingDot}></span>
                                <span className={styles.typingDot}></span>
                                <span className={styles.typingDot}></span>
                            </div>
                            <div className={styles.aiMessage}>Content generated! 🚀</div>
                        </div>
                    </div>

                    {/* Item 2: Community (Small) */}
                    <div className={styles.bentoItem}>
                        <div className={styles.itemContent}>
                            <div className={styles.iconWrapper}>
                                <span className={styles.icon}>👥</span>
                            </div>
                            <h3>Trusted by 50K+</h3>
                            <p>Join a community of serious creators.</p>
                        </div>
                        <div className={styles.visualCommunity}>
                            <div className={styles.avatarStack}>
                                <div className={styles.avatar}></div>
                                <div className={styles.avatar}></div>
                                <div className={styles.avatar}></div>
                            </div>
                        </div>
                    </div>

                    {/* Item 3: Integrations (Small) */}
                    <div className={styles.bentoItem}>
                        <div className={styles.itemContent}>
                            <div className={styles.iconWrapper}>
                                <span className={styles.icon}>🔌</span>
                            </div>
                            <h3>Seamless Sync</h3>
                            <p>Works with your favorite tools.</p>
                        </div>
                        <div className={styles.visualIntegrations}>
                            <div className={styles.logoGrid}>
                                <div className={styles.miniLogo}></div>
                                <div className={styles.miniLogo}></div>
                                <div className={styles.miniLogo}></div>
                                <div className={styles.miniLogo}></div>
                            </div>
                        </div>
                    </div>

                    {/* Item 4: Analytics (Large) */}
                    <div className={`${styles.bentoItem} ${styles.itemLarge} ${styles.analyticsCard}`}>
                        <div className={styles.itemContent}>
                            <div className={styles.iconWrapper}>
                                <span className={styles.icon}>📈</span>
                            </div>
                            <h3>Data-Driven Insights</h3>
                            <p>Make decisions based on real-time performance data, not guesswork. Track growth instantly.</p>
                        </div>
                        <div className={styles.visualAnalytics}>
                            <div className={styles.graphBar}></div>
                            <div className={styles.graphBar}></div>
                            <div className={styles.graphBar}></div>
                            <div className={styles.graphLine}></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}