import type { Metadata } from 'next';
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: 'Content Management',
            icon: '📝',
            features: [
                {
                    title: 'Visual Content Calendar',
                    description: 'Plan and organize your content with an intuitive drag-and-drop calendar interface.',
                    icon: '📅',
                },
                {
                    title: 'Bulk Upload & Scheduling',
                    description: 'Upload and schedule hundreds of posts at once with CSV import functionality.',
                    icon: '⬆️',
                },
                {
                    title: 'Content Library',
                    description: 'Store and organize your media assets in a centralized, searchable library.',
                    icon: '📚',
                },
            ],
        },
        {
            category: 'Analytics & Insights',
            icon: '📊',
            features: [
                {
                    title: 'Real-Time Analytics',
                    description: 'Monitor your performance with live data updates and comprehensive metrics.',
                    icon: '📈',
                },
                {
                    title: 'Competitor Analysis',
                    description: 'Track and compare your performance against competitors in your industry.',
                    icon: '🎯',
                },
                {
                    title: 'Custom Reports',
                    description: 'Generate beautiful, white-labeled reports for clients and stakeholders.',
                    icon: '📄',
                },
            ],
        },
        {
            category: 'Engagement Tools',
            icon: '💬',
            features: [
                {
                    title: 'Unified Inbox',
                    description: 'Manage all your messages, comments, and mentions from one centralized inbox.',
                    icon: '📥',
                },
                {
                    title: 'Auto-Responses',
                    description: 'Set up automated responses for common questions and inquiries.',
                    icon: '🤖',
                },
                {
                    title: 'Sentiment Analysis',
                    description: 'Understand audience sentiment with AI-powered emotion detection.',
                    icon: '😊',
                },
            ],
        },
        {
            category: 'Team Collaboration',
            icon: '👥',
            features: [
                {
                    title: 'Role-Based Access',
                    description: 'Control permissions with customizable roles for team members.',
                    icon: '🔐',
                },
                {
                    title: 'Approval Workflows',
                    description: 'Set up multi-level approval processes for content review.',
                    icon: '✅',
                },
                {
                    title: 'Team Activity Log',
                    description: 'Track all team actions with a comprehensive audit trail.',
                    icon: '📋',
                },
            ],
        },
    ];

    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>

            {/* 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}>{category.icon}</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}>{feature.icon}</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>
    );
}