'use client';

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

export default function CoreServices() {
    return (
        <section className={styles.section}>
            <div className="container">
                <div className={styles.header}>
                    <div className={styles.subTitle}>Our Services</div>
                    <h2 className={styles.title}>All-in-One <span className="gradient-text">Social Management</span></h2>
                    <p className={styles.subtitle}>
                        Everything you need to dominate social media, conveniently organized in one powerful platform.
                    </p>
                </div>

                <div className={styles.gridContainer}>
                    {/* Left Column */}
                    <div className={styles.columnLeft}>
                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <span className={styles.icon}>📊</span>
                            </div>
                            <div className={styles.content}>
                                <h3>Unified Dashboard</h3>
                                <p>Manage Facebook, Instagram, X, and LinkedIn from one centralized, intuitive interface.</p>
                            </div>
                        </div>

                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <span className={styles.icon}>⚡</span>
                            </div>
                            <div className={styles.content}>
                                <h3>Smart Scheduling</h3>
                                <p>AI-powered timing suggestions to automatically post when your audience is most active.</p>
                            </div>
                        </div>

                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <span className={styles.icon}>📅</span>
                            </div>
                            <div className={styles.content}>
                                <h3>Visual Calendar</h3>
                                <p>Drag-and-drop content calendar to plan and visualize your strategy months in advance.</p>
                            </div>
                        </div>
                    </div>

                    {/* Center Column - Image */}
                    <div className={styles.columnCenter}>
                        <div className={styles.centralVisual}>
                            {/* CSS-based Abstract Dashboard/Manager Illustration */}
                            <div className={styles.circleBg}></div>
                            <div className={styles.glassCard}>
                                <div className={styles.cardHeader}>
                                    <div className={styles.dots}>
                                        <span></span><span></span><span></span>
                                    </div>
                                </div>
                                <div className={styles.cardBody}>
                                    <div className={styles.graphArea}>
                                        <div className={styles.bar}></div>
                                        <div className={styles.bar}></div>
                                        <div className={styles.bar}></div>
                                        <div className={styles.bar}></div>
                                    </div>
                                    <div className={styles.pieChart}></div>
                                </div>
                                <div className={styles.floatingBadge}>
                                    <span>🚀</span> +128%
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Right Column */}
                    <div className={styles.columnRight}>
                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <span className={styles.icon}>📈</span>
                            </div>
                            <div className={styles.content}>
                                <h3>Analytics & Reports</h3>
                                <p>Deep dive into performance metrics with automated, white-labeled reports for clients.</p>
                            </div>
                        </div>

                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <span className={styles.icon}>👥</span>
                            </div>
                            <div className={styles.content}>
                                <h3>Team Collaboration</h3>
                                <p>Built-in approval workflows and role-based access for seamless team coordination.</p>
                            </div>
                        </div>

                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <span className={styles.icon}>💬</span>
                            </div>
                            <div className={styles.content}>
                                <h3>Social Inbox</h3>
                                <p>Never miss a comment or DM. innovative unified inbox to reply to all interactions.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}