import * as React from 'react';
import { Icon } from './ui/Icon';
import { useTranslation } from '../hooks/useI18n';

const SEOServices: React.FC = () => {
    const { t } = useTranslation();
    return (
        <div className="p-8 max-w-4xl mx-auto">
            <header className="mb-8">
                <h2 className="text-3xl font-bold text-gray-900 dark:text-white">{t('seo.services.title')}</h2>
                <p className="text-gray-500 dark:text-gray-400 mt-1">{t('seo.services.subtitle')}</p>
            </header>
            <div className="space-y-8">
                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        {t('seo.services.keyword_analysis')}
                        <span className="text-xs bg-yellow-400 text-yellow-900 px-2 py-0.5 rounded-full font-bold">{t('pro')}</span>
                    </h3>
                    <p className="text-gray-500 dark:text-gray-400 mb-4">{t('seo.services.keyword_analysis_desc')}</p>
                    <div className="flex items-center gap-2">
                        <input
                            type="text"
                            placeholder="e.g., 'digital marketing for startups'"
                            className="w-full bg-gray-100 dark:bg-gray-700 p-3 rounded-md border border-gray-300 dark:border-gray-600"
                        />
                        <button className="bg-brand-primary text-white font-semibold py-3 px-5 rounded-md hover:bg-brand-secondary">
                            {t('seo.services.analyze')}
                        </button>
                    </div>
                     <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg text-center text-gray-400">
                        <p>{t('seo.services.keyword_results_placeholder')}</p>
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
                     <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        {t('seo.services.ai_content')}
                        <span className="text-xs bg-yellow-400 text-yellow-900 px-2 py-0.5 rounded-full font-bold">{t('pro')}</span>
                    </h3>
                    <p className="text-gray-500 dark:text-gray-400 mb-4">
                        {t('seo.services.ai_content_desc')}
                    </p>
                    <div className="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
                        <p className="font-semibold text-gray-800 dark:text-gray-200">{t('seo.services.how_it_works')}</p>
                        <ol className="list-decimal list-inside mt-2 text-sm text-gray-600 dark:text-gray-300 space-y-1">
                            <li>{t('seo.services.step1')}</li>
                            <li>{t('seo.services.step2')}</li>
                            <li>{t('seo.services.step3')}</li>
                            <li>{t('seo.services.step4')}</li>
                        </ol>
                    </div>
                    <button className="mt-4 bg-brand-primary/10 text-brand-primary font-semibold py-2 px-5 rounded-md hover:bg-brand-primary/20 transition-colors">
                        {t('seo.services.go_to_news_creator')}
                    </button>
                </div>
            </div>
        </div>
    );
};

export default SEOServices;