import type { Metadata } from 'next';
import Image from 'next/image';
import { CheckCircle2, TrendingUp, Shield, Phone } from 'lucide-react';
import styles from './features.module.css';

export const metadata: Metadata = {
    title: 'Features - SocialBuddy',
    description: 'Discover all the powerful features that make SocialBuddy the best social media management platform for businesses and creators.',
};

export default function FeaturesPage() {
    const detailedFeatures = [
        {
            category: 'Core Features',
            // icon: '⚡',
            features: [
                {
                    title: 'Workflow Automation',
                    description: 'Streamline your social interactions with intelligent automation rules that work 24/7.',
                    icon: '/images/features/automation.webp',
                },
                {
                    title: 'Secure Account Login',
                    description: 'Connect and manage multiple social profiles securely with our encrypted login system.',
                    icon: '/images/features/secure.webp',
                },
                {
                    title: 'Comment Management',
                    description: 'Organize and oversee all user interactions from a single, unified dashboard.',
                    icon: '/images/features/comment.webp',
                },
                {
                    title: 'Quick Engagement',
                    description: 'Boost your community presence by liking user comments instantly from the dashboard.',
                    icon: '/images/features/quick.webp',
                },
                {
                    title: 'Smart Replies',
                    description: 'Respond efficiently to your audience using saved templates and quick-reply tools.',
                    icon: '/images/features/smart.webp',
                },
                {
                    title: 'Spam Control',
                    description: 'Keep your comment sections clean by easily deleting unwanted or inappropriate content.',
                    icon: '/images/features/spam.webp',
                },
            ],
        },
    ];

    return (
        <div className={styles.featuresPage}>
            {/* Hero Section */}
            <section className={styles.hero}>
                <div className="container">
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>Features</h1>
                        <div className={styles.breadcrumb}>
                            <a href="/">Home</a> / <span>Features</span>
                        </div>
                    </div>
                </div>
            </section>

            {/* Why Choose Us Section */}
            <section className={styles.whySection}>
                <div className="container">
                    <div className={styles.whyGrid}>
                        <div className={styles.whyContent}>
                            <span className={styles.tagline}>WHY CHOOSE US</span>
                            <h2 className={styles.whyTitle}>Why Choose SocialBuddy</h2>
                            <p className={styles.whyDescription}>
                                We provide comprehensive social media solutions that help you automate workflows,
                                secure your accounts, and grow your digital presence authentically.
                            </p>

                            <div className={styles.benefitsRow}>
                                <div className={styles.benefitItem}>
                                    <div className={styles.benefitIconWrapper}>
                                        <TrendingUp className={styles.benefitIcon} />
                                    </div>
                                    <div className={styles.benefitText}>
                                        <h3>Business Growth</h3>
                                        <p>Accelerate your reach</p>
                                    </div>
                                </div>
                                <div className={styles.benefitItem}>
                                    <div className={styles.benefitIconWrapper}>
                                        <Shield className={styles.benefitIcon} />
                                    </div>
                                    <div className={styles.benefitText}>
                                        <h3>Secure Access</h3>
                                        <p>Encrypted login system</p>
                                    </div>
                                </div>
                            </div>

                            <div className={styles.benefitsRow}>
                                <div className={styles.benefitItem}>
                                    <div className={styles.benefitIconWrapper}>
                                        <CheckCircle2 className={styles.benefitIcon} />
                                    </div>
                                    <div className={styles.benefitText}>
                                        <h3>Knowledgeable</h3>
                                        <p>Expert team support</p>
                                    </div>
                                </div>
                                <div className={styles.benefitItem}>
                                    <div className={styles.benefitIconWrapper}>
                                        <Phone className={styles.benefitIcon} />
                                    </div>
                                    <div className={styles.benefitText}>
                                        <h3>24/7 Support</h3>
                                        <p>Always here to help</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className={styles.whyImageWrapper}>
                            <div className={styles.imageBackgroundShape}></div>
                            <div className={styles.mainImageContainer}>
                                <Image
                                    src="/images/features/features.webp"
                                    alt="SocialBuddy Features"
                                    width={600}
                                    height={700}
                                    className={styles.mainImage}
                                    priority
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Features Grid */}
            <section className="section">
                <div className="container">
                    {detailedFeatures.map((category, idx) => (
                        <div key={idx} className={styles.categorySection}>
                            <div className={styles.categoryHeader}>
                                <span className={styles.categoryIcon}></span>
                                <h2 className={styles.categoryTitle}>{category.category}</h2>
                            </div>
                            <div className={styles.featuresGrid}>
                                {category.features.map((feature, index) => (
                                    <div key={index} className={styles.featureCard}>
                                        <div className={styles.featureIcon}>
                                            <Image src={feature.icon} alt={feature.title} width={40} height={40} />
                                        </div>
                                        <h3 className={styles.featureTitle}>{feature.title}</h3>
                                        <p className={styles.featureDescription}>{feature.description}</p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
            </section>

            {/* CTA Section */}
            <section className={styles.ctaSection}>
                <div className="container">
                    <div className={styles.ctaContent}>
                        <h2 className={styles.ctaTitle}>Ready to Get Started?</h2>
                        <p className={styles.ctaSubtitle}>Join thousands of businesses already using SocialBuddy</p>
                        <a href="https://app.socialbuddy.co/signup" className="btn btn-primary btn-large">
                            Start Your Free Trial
                        </a>
                    </div>
                </div>
            </section>
        </div>
    );
}