'use client';

import { useState } from 'react';
import Image from 'next/image';
import styles from './Features.module.css';

export default function Features() {
    const [activeIndex, setActiveIndex] = useState(0);

    const features = [
        {
            icon: '📅',
            title: 'Smart Scheduling',
            description: 'Schedule posts across all platforms with AI-powered optimal timing suggestions to maximize your reach and engagement.',
            color: '#667eea',
            image: '/features/scheduling.png'
        },
        {
            icon: '📊',
            title: 'Advanced Analytics',
            description: 'Track performance metrics, engagement rates, and audience insights in real-time with comprehensive interactive dashboards.',
            color: '#ec4899',
            image: '/features/analytics.png'
        },
        {
            icon: '🤖',
            title: 'AI Content Assistant',
            description: 'Generate engaging captions, hashtags, and creative content ideas instantly with our advanced AI-powered writing tools.',
            color: '#14b8a6',
            image: '/features/ai.png'
        },
        {
            icon: '👥',
            title: 'Team Collaboration',
            description: 'Work seamlessly with your team using role-based access, approval workflows, and shared content calendars.',
            color: '#f59e0b',
            image: '/features/platforms.png'
        },
        {
            icon: '📱',
            title: 'Multi-Platform Support',
            description: 'Manage Facebook, Instagram, Twitter, LinkedIn, and more from a single, unified dashboard without switching tabs.',
            color: '#8b5cf6',
            image: '/features/platforms.png'
        },
        {
            icon: '🔔',
            title: 'Real-Time Notifications',
            description: 'Stay on top of your community with instant alerts for new mentions, comments, and engagement opportunities.',
            color: '#ef4444',
            image: '/features/ai.png'
        },
    ];

    return (
        <section className="section" id="features">
            <div className="container">
                <div className={styles.header}>
                    <div className={styles.subTitle}>Features</div>
                    <h2 className={styles.title}>
                        Everything You Need to Succeed
                    </h2>
                    <p className={styles.subtitle}>
                        Powerful tools designed to streamline your social media management and boost your online presence.
                    </p>
                </div>

                <div className={styles.contentWrapper}>
                    {/* Left Column: Image Preview */}
                    <div className={styles.desktopImageWrapper}>
                        {features.map((feature, index) => (
                            <Image
                                key={index}
                                src={feature.image}
                                alt={feature.title}
                                fill
                                className={styles.featureImage}
                                style={{
                                    opacity: index === activeIndex ? 1 : 0,
                                    zIndex: index === activeIndex ? 10 : 0,
                                    transform: index === activeIndex ? 'scale(1)' : 'scale(1.05)',
                                }}
                                priority={index === 0}
                            />
                        ))}
                        <div className={styles.imageOverlay} />
                    </div>

                    {/* Right Column: Accordion */}
                    <div className={styles.accordion}>
                        {features.map((feature, index) => (
                            <div
                                key={index}
                                className={`${styles.accordionItem} ${index === activeIndex ? styles.active : ''}`}
                                onClick={() => setActiveIndex(index)}
                            >
                                <div className={styles.itemHeader}>
                                    <div className={styles.iconWrapper} style={{
                                        color: index === activeIndex ? 'white' : feature.color,
                                        backgroundColor: index === activeIndex ? feature.color : `${feature.color}15`
                                    }}>
                                        {feature.icon}
                                    </div>
                                    <h3 className={styles.itemTitle} style={{
                                        color: index === activeIndex ? feature.color : undefined
                                    }}>
                                        {feature.title}
                                    </h3>
                                </div>
                                <div className={styles.itemContent}>
                                    <div className={styles.contentInner}>
                                        <div className={styles.mobileImageWrapper}>
                                            <Image
                                                src={feature.image}
                                                alt={feature.title}
                                                width={600}
                                                height={400}
                                                className={styles.mobileImage}
                                            />
                                        </div>
                                        {feature.description}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}