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

const EnterpriseHosting: React.FC = () => {
    const { t } = useTranslation();
    const [customDomain, setCustomDomain] = React.useState('');

    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.hosting.title')}</h2>
                <p className="text-gray-500 dark:text-gray-400 mt-1">{t('seo.hosting.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">{t('seo.hosting.custom_domain')}</h3>
                    <p className="text-gray-500 dark:text-gray-400 mb-2">{t('seo.hosting.custom_domain_desc')}</p>
                    <div className="flex items-center bg-gray-100 dark:bg-gray-700 rounded-md">
                        <input
                            type="text"
                            value={customDomain}
                            onChange={(e) => setCustomDomain(e.target.value)}
                            placeholder="your-domain.com"
                            className="w-full bg-transparent p-3 text-gray-900 dark:text-white focus:outline-none rounded-md"
                        />
                    </div>
                    <button className="mt-4 w-full md:w-auto bg-brand-primary text-white font-semibold py-2 px-5 rounded-md hover:bg-brand-secondary transition-colors flex items-center justify-center gap-2">
                        {t('seo.hosting.connect_domain')}
                        <span className="text-xs bg-yellow-400 text-yellow-900 px-2 py-0.5 rounded-full font-bold">{t('pro')}</span>
                    </button>
                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-4">{t('seo.hosting.dns_note')}</p>
                </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">{t('seo.hosting.subscription')}</h3>
                    <p className="text-gray-500 dark:text-gray-400 mb-4">{t('seo.hosting.subscription_desc')}</p>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {['Starter', 'Business', 'Enterprise'].map((plan, index) => (
                            <div key={plan} className={`p-6 rounded-lg border-2 ${index === 1 ? 'border-brand-primary bg-brand-primary/5' : 'border-gray-200 dark:border-gray-700'}`}>
                                <h4 className="text-xl font-bold text-gray-900 dark:text-white">{plan}</h4>
                                <p className="text-3xl font-bold text-gray-900 dark:text-white my-4">${[29, 79, 199][index]}<span className="text-base font-normal text-gray-500 dark:text-gray-400">/mo</span></p>
                                <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                                    <li className="flex items-center gap-2"><Icon className="h-4 w-4 text-brand-primary"><path d="M5 13l4 4L19 7"/></Icon> Custom Domain</li>
                                    <li className="flex items-center gap-2"><Icon className="h-4 w-4 text-brand-primary"><path d="M5 13l4 4L19 7"/></Icon> {['10k', '50k', 'Unlimited'][index]} Clicks/mo</li>
                                    <li className="flex items-center gap-2"><Icon className="h-4 w-4 text-brand-primary"><path d="M5 13l4 4L19 7"/></Icon> Managed Hosting</li>
                                </ul>
                                <button className={`mt-6 w-full py-2 rounded-md font-semibold ${index === 1 ? 'bg-brand-primary text-white' : 'bg-gray-200 dark:bg-gray-600'}`}>
                                    {index === 1 ? t('seo.hosting.current_plan') : t('seo.hosting.select_plan')}
                                </button>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default EnterpriseHosting;