'use client';

import Image from 'next/image';
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 SOLUTIONS</div>
                    <h2 className={styles.title}>One Platform to Run <br />Every <span className="gradient-text">Social Activity</span></h2>
                    <p className={styles.subtitle}>
                        Social Buddy brings planning, publishing, monitoring, and performance tracking together in a single workspace. Instead of juggling multiple tools, teams can manage daily social operations efficiently while staying focused on growth and engagement.
                    </p>
                </div>

                <div className={styles.gridContainer}>
                    {/* Left Column */}
                    <div className={styles.columnLeft}>
                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <Image
                                    src="/images/home/control-panel.webp"
                                    alt="Central Control Panel"
                                    width={29}
                                    height={29}
                                />
                            </div>
                            <div className={styles.content}>
                                <h3>Central Control Panel</h3>
                                <p>Oversee multiple social profiles from one streamlined interface, making it easier to publish updates, monitor activity, and stay organized across platforms.</p>
                            </div>
                        </div>

                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <Image
                                    src="/images/home/automation.webp"
                                    alt="Intelligent Posting Automation"
                                    width={29}
                                    height={29}
                                />
                            </div>
                            <div className={styles.content}>
                                <h3>Intelligent Posting Automation</h3>
                                <p>Schedule content using engagement-driven timing recommendations that help posts reach audiences when attention levels are highest.</p>
                            </div>
                        </div>

                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <Image
                                    src="/images/home/planning.webp"
                                    alt="Interactive Planning View"
                                    width={29}
                                    height={29}
                                />
                            </div>
                            <div className={styles.content}>
                                <h3>Interactive Planning View</h3>
                                <p>Map out campaigns visually with a flexible content planner that helps teams align messaging weeks or months ahead.</p>
                            </div>
                        </div>
                    </div>

                    {/* Center Column - Image */}
                    <div className={styles.columnCenter}>
                        <div className={styles.centralVisual}>
                            <Image
                                src="/images/home/our-solutions-centre-main.webp"
                                alt="Our Solutions Centre"
                                width={203}
                                height={256}
                                className={styles.centerImage}
                            />
                        </div>
                    </div>

                    {/* Right Column */}
                    <div className={styles.columnRight}>
                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <Image
                                    src="/images/home/insights.webp"
                                    alt="Performance Insights"
                                    width={29}
                                    height={29}
                                />
                            </div>
                            <div className={styles.content}>
                                <h3>Performance Insights & Exports</h3>
                                <p>Access clear performance summaries with customizable reports that help evaluate results and communicate value to stakeholders.</p>
                            </div>
                        </div>

                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <Image
                                    src="/images/home/team.webp"
                                    alt="Team-Based Workflows"
                                    width={29}
                                    height={29}
                                />
                            </div>
                            <div className={styles.content}>
                                <h3>Team-Based Workflows</h3>
                                <p>Coordinate seamlessly with internal teams or clients using structured review processes and permission-based access.</p>
                            </div>
                        </div>

                        <div className={styles.serviceItem}>
                            <div className={styles.iconWrapper}>
                                <Image
                                    src="/images/home/message.webp"
                                    alt="Unified Message Center"
                                    width={29}
                                    height={29}
                                />
                            </div>
                            <div className={styles.content}>
                                <h3>Unified Message Center</h3>
                                <p>Handle comments, mentions, and private messages from different platforms in one response hub - so no interaction goes unnoticed.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}