'use client';

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Users, Layout, ShieldCheck, 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="/about-image.png"
                                alt="Business Professional"
                                width={500}
                                height={600}
                                className={styles.image}
                            />
                        </div>
                        {/* Secondary Small Image (Bottom Left) */}
                        <div className={styles.secondaryImageWrapper}>
                            <Image
                                src="/about-image-2.png"
                                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 Company
                        </div>

                        {/* Title */}
                        <h2 className={styles.title}>
                            We Are The Best <span className="gradient-text">Social Media</span> Marketing Agency
                        </h2>

                        {/* Description */}
                        <p className={styles.description}>
                            Elevate your brand with our data-driven social media strategies. We combine creativity with analytics to deliver campaigns that resonate with your audience and drive measurable results.
                        </p>

                        {/* Features List */}
                        <ul className={styles.featuresList}>
                            <li className={styles.featureItem}>
                                <div className={styles.iconWrapper}>
                                    <Users size={28} />
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Trusted Partner</h4>
                                    <p>Over a decade of experience helping brands grow their online presence with verified strategies.</p>
                                </div>
                            </li>

                            <li className={styles.featureItem}>
                                <div className={styles.iconWrapper}>
                                    <Layout size={28} />
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Fastpace Platform</h4>
                                    <p>Rapid deployment of campaigns across all major social platforms to catch trends instantly.</p>
                                </div>
                            </li>

                            <li className={styles.featureItem}>
                                <div className={styles.iconWrapper}>
                                    <ShieldCheck size={28} />
                                </div>
                                <div className={styles.featureContent}>
                                    <h4>Tested Reliability</h4>
                                    <p>Consistent results and transparent reporting you can count on, backed by data.</p>
                                </div>
                            </li>
                        </ul>

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

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

export default AboutSection;