'use client';

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import styles from './AboutSection.module.css';

const AboutSection = () => {
    return (
        <section className={styles.section} id="about">
            <div className={styles.container}>
                <div className={styles.contentWrapper}>
                    {/* Left Side - Image Composition */}
                    <div className={`${styles.imageGrid} animate-slide-right`}>
                        {/* Main Large Image (Top Right) */}
                        <div className={styles.mainImageWrapper}>
                            <Image
                                src="/images/home/about-big-img.webp"
                                alt="Business Professional"
                                width={500}
                                height={600}
                                className={styles.image}
                            />
                        </div>
                        {/* Secondary Small Image (Bottom Left) */}
                        <div className={styles.secondaryImageWrapper}>
                            <Image
                                src="/images/home/about-small-img.webp"
                                alt="Team working"
                                width={400}
                                height={400}
                                className={styles.image}
                            />
                        </div>
                        {/* Badge removed as requested */}
                    </div>

                    {/* Right Side - Content */}
                    <div className={`${styles.textContent} animate-slide-left`}>
                        {/* Subtitle */}
                        <div className={styles.subTitle}>
                            ABOUT SOCIAL BUDDY
                        </div>

                        {/* Title */}
                        <h2 className={styles.title}>
                            A Smarter Way to Grow Your <span className="gradient-text">Social Presence</span>
                        </h2>

                        {/* Description */}
                        <p className={styles.description}>
                            Social Buddy is a performance-focused social media marketing team helping businesses manage, optimize, and grow their presence across digital platforms. We work with brands that want clarity, consistency, and measurable progress from their social efforts.
                        </p>

                        {/* Features List */}
                        <ul className={styles.featuresList}>
                            <li className={styles.featureItem}>
                                <div className={styles.iconWrapper}>
                                    <Image
                                        src="/images/home/strategic.webp"
                                        alt="Strategic Partnership"
                                        width={28}
                                        height={28}
                                    />
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Strategic Partnership</h4>
                                    <p>We collaborate closely with brands to understand their audience, objectives, and challenges—then translate those insights into practical social execution plans.</p>
                                </div>
                            </li>

                            <li className={styles.featureItem}>
                                <div className={styles.iconWrapper}>
                                    <Image
                                        src="/images/home/efficient.webp"
                                        alt="Efficient Campaign Execution"
                                        width={28}
                                        height={28}
                                    />
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Efficient Campaign Execution</h4>
                                    <p>Our workflows enable quick rollout of content and campaigns across major social networks while maintaining alignment with brand goals.</p>
                                </div>
                            </li>

                            <li className={styles.featureItem}>
                                <div className={styles.iconWrapper}>
                                    <Image
                                        src="/images/home/data.webp"
                                        alt="Data-Led Performance Tracking"
                                        width={28}
                                        height={28}
                                    />
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Data-Led Performance Tracking</h4>
                                    <p>Every activity is supported by clear metrics and transparent reporting, allowing brands to evaluate outcomes and refine decisions with confidence.</p>
                                </div>
                            </li>
                        </ul>

                        {/* CTA Button */}
                        <div className={styles.buttonWrapper}>
                            <Link href="/about" className="btn btn-primary btn-large">
                                Explore Our Approach <ArrowRight size={20} />
                            </Link>
                        </div>
                    </div>
                </div>

                {/* Counters Section Removed as requested */}
            </div>
        </section>
    );
};

export default AboutSection;