'use client';

import { useTranslations, useLocale } from 'next-intl';
import { Link } from '@/lib/navigation';

export default function CuratorHelpClient() {
    const t = useTranslations('CuratorHelp');
    const locale = useLocale();

    return (
        <main style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
            <header style={{ marginBottom: '2rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>{t('title')}</h1>
                    <Link
                        href="/curator"
                        style={{
                            padding: '0.5rem 1rem',
                            background: '#6b7280',
                            color: 'white',
                            textDecoration: 'none',
                            borderRadius: '0.375rem',
                            fontSize: '0.9rem',
                        }}
                    >
                        {t('backToDashboard')}
                    </Link>
                </div>
            </header>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
                {/* Einführung */}
                <section>
                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
                        {t('introductionTitle')}
                    </h2>
                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
                        <p style={{ marginBottom: '1rem' }}>{t('introductionText')}</p>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('permissionsTitle')}</h3>
                        <ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
                            <li style={{ marginBottom: '0.5rem' }}>{t('permission1')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('permission2')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('permission3')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('permission4')}</li>
                        </ul>
                        <p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
                            <strong>{t('note')}:</strong> {t('permissionNote')}
                        </p>
                    </div>
                </section>

                {/* Song-Upload */}
                <section>
                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
                        {t('uploadTitle')}
                    </h2>
                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('uploadStepsTitle')}</h3>
                        <ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadStep1')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadStep2')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadStep3')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadStep4')}</li>
                        </ol>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('uploadBestPracticesTitle')}</h3>
                        <ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice1')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice2')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice3')}</li>
                        </ul>
                        <p style={{ marginTop: '1rem', padding: '0.75rem', background: '#dbeafe', borderRadius: '0.375rem', border: '1px solid #3b82f6' }}>
                            <strong>{t('tip')}:</strong> {t('uploadTip')}
                        </p>
                    </div>
                </section>

                {/* Song-Bearbeitung */}
                <section>
                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
                        {t('editingTitle')}
                    </h2>
                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('singleEditTitle')}</h3>
                        <p style={{ marginBottom: '1rem' }}>{t('singleEditText')}</p>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('batchEditTitle')}</h3>
                        <p style={{ marginBottom: '1rem' }}>{t('batchEditText')}</p>
                        <ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
                            <li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature1')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature2')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature3')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature4')}</li>
                        </ul>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('genreSpecialAssignmentTitle')}</h3>
                        <p style={{ marginBottom: '1rem' }}>{t('genreSpecialAssignmentText')}</p>
                    </div>
                </section>

                {/* Specials kuratieren */}
                <section>
                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
                        {t('curateSpecialsHelpTitle')}
                    </h2>
                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
                        <p style={{ marginBottom: '1rem' }}>{t('curateSpecialsHelpIntro')}</p>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>
                            {t('curateSpecialsHelpStepsTitle')}
                        </h3>
                        <ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep1')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep2')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep3')}</li>
                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep4')}</li>
                        </ol>
                        <p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
                            <strong>{t('note')}:</strong> {t('curateSpecialsPermissionsNote')}
                        </p>
                    </div>
                </section>

                {/* Kommentar-Verwaltung */}
                <section>
                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
                        {t('commentsTitle')}
                    </h2>
                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
                        <p style={{ marginBottom: '1rem' }}>{t('commentsText')}</p>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('commentsActionsTitle')}</h3>
                        <ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
                            <li style={{ marginBottom: '0.5rem' }}><strong>{t('markAsRead')}:</strong> {t('markAsReadText')}</li>
                            <li style={{ marginBottom: '0.5rem' }}><strong>{t('archive')}:</strong> {t('archiveText')}</li>
                        </ul>
                    </div>
                </section>

                {/* Best Practices */}
                <section>
                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
                        {t('bestPracticesTitle')}
                    </h2>
                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
                        <ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
                            <li style={{ marginBottom: '0.75rem' }}>{t('bestPractice1')}</li>
                            <li style={{ marginBottom: '0.75rem' }}>{t('bestPractice2')}</li>
                            <li style={{ marginBottom: '0.75rem' }}>{t('bestPractice3')}</li>
                            <li style={{ marginBottom: '0.75rem' }}>{t('bestPractice4')}</li>
                            <li style={{ marginBottom: '0.75rem' }}>{t('bestPractice5')}</li>
                        </ul>
                    </div>
                </section>

                {/* Troubleshooting */}
                <section>
                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
                        {t('troubleshootingTitle')}
                    </h2>
                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ1')}</h3>
                        <p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA1')}</p>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ2')}</h3>
                        <p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA2')}</p>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ3')}</h3>
                        <p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA3')}</p>
                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ4')}</h3>
                        <p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA4')}</p>
                    </div>
                </section>
            </div>
        </main>
    );
}