import type { Metadata } from 'next';
import Link from 'next/link';
import styles from './docs.module.css';

export const metadata: Metadata = {
    title: 'Documentation - SocialBuddy',
    description: 'Complete documentation and guides for using SocialBuddy. Learn how to manage your social media effectively.',
};

export default function DocsPage() {
    const docCategories = [
        {
            title: 'Getting Started',
            icon: '🚀',
            docs: [
                { title: 'Quick Start Guide', href: '/docs/quick-start' },
                { title: 'Account Setup', href: '/docs/account-setup' },
                { title: 'Connecting Social Accounts', href: '/docs/connecting-accounts' },
                { title: 'Dashboard Overview', href: '/docs/dashboard' },
            ],
        },
        {
            title: 'Content Management',
            icon: '📝',
            docs: [
                { title: 'Creating Posts', href: '/docs/creating-posts' },
                { title: 'Scheduling Content', href: '/docs/scheduling' },
                { title: 'Content Calendar', href: '/docs/calendar' },
                { title: 'Media Library', href: '/docs/media-library' },
            ],
        },
        {
            title: 'Analytics',
            icon: '📊',
            docs: [
                { title: 'Understanding Analytics', href: '/docs/analytics' },
                { title: 'Custom Reports', href: '/docs/reports' },
                { title: 'Competitor Analysis', href: '/docs/competitor-analysis' },
                { title: 'Export Data', href: '/docs/export-data' },
            ],
        },
        {
            title: 'Team Collaboration',
            icon: '👥',
            docs: [
                { title: 'Inviting Team Members', href: '/docs/team-members' },
                { title: 'Roles & Permissions', href: '/docs/roles' },
                { title: 'Approval Workflows', href: '/docs/workflows' },
                { title: 'Team Activity Log', href: '/docs/activity-log' },
            ],
        },
        {
            title: 'API & Integrations',
            icon: '🔌',
            docs: [
                { title: 'API Documentation', href: '/docs/api' },
                { title: 'Webhooks', href: '/docs/webhooks' },
                { title: 'Third-Party Integrations', href: '/docs/integrations' },
                { title: 'Developer Resources', href: '/docs/developers' },
            ],
        },
        {
            title: 'Account & Billing',
            icon: '💳',
            docs: [
                { title: 'Managing Your Account', href: '/docs/account' },
                { title: 'Billing & Payments', href: '/docs/billing' },
                { title: 'Upgrading Plans', href: '/docs/upgrading' },
                { title: 'Security Settings', href: '/docs/security' },
            ],
        },
    ];

    return (
        <div className={styles.docsPage}>
            {/* Hero Section */}
            <section className={styles.hero}>
                <div className="container">
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>
                            <span className="gradient-text">Documentation</span> & Guides
                        </h1>
                        <p className={styles.heroSubtitle}>
                            Everything you need to know about using SocialBuddy effectively
                        </p>
                        <div className={styles.searchBox}>
                            <input
                                type="text"
                                placeholder="Search documentation..."
                                className={styles.searchInput}
                            />
                            <button className={styles.searchButton}>🔍</button>
                        </div>
                    </div>
                </div>
            </section>

            {/* Documentation Grid */}
            <section className="section">
                <div className="container">
                    <div className={styles.docsGrid}>
                        {docCategories.map((category, idx) => (
                            <div key={idx} className={styles.docCategory}>
                                <div className={styles.categoryHeader}>
                                    <span className={styles.categoryIcon}>{category.icon}</span>
                                    <h2 className={styles.categoryTitle}>{category.title}</h2>
                                </div>
                                <div className={styles.docsList}>
                                    {category.docs.map((doc, index) => (
                                        <Link key={index} href={doc.href} className={styles.docLink}>
                                            <span className={styles.docIcon}>📄</span>
                                            <span>{doc.title}</span>
                                            <span className={styles.arrow}>→</span>
                                        </Link>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Help Section */}
            <section className={styles.helpSection}>
                <div className="container">
                    <div className={styles.helpContent}>
                        <h2 className={styles.helpTitle}>Need More Help?</h2>
                        <p className={styles.helpSubtitle}>
                            Can't find what you're looking for? Our support team is here to help.
                        </p>
                        <div className={styles.helpButtons}>
                            <a href="/contact" className="btn btn-primary">
                                Contact Support
                            </a>
                            <a href="/community" className="btn btn-secondary">
                                Join Community
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}