import React from 'react';
import { useTranslation } from 'react-i18next';

const TermsOfServicePage: React.FC = () => {
  const { t } = useTranslation();

  return (
    <div>
      {/* Header Section */}
      <section className="py-20 lg:py-28 bg-gradient-to-br from-white via-brand-50/30 to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
            {t('marketing.termsOfService.title')}
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-400">
            {t('marketing.termsOfService.lastUpdated')}
          </p>
        </div>
      </section>

      {/* Content Section */}
      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="prose prose-lg dark:prose-invert max-w-none">

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.acceptanceOfTerms.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.acceptanceOfTerms.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.descriptionOfService.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.descriptionOfService.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.userAccounts.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              {t('marketing.termsOfService.sections.userAccounts.intro')}
            </p>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              <li>{t('marketing.termsOfService.sections.userAccounts.requirements.accurate')}</li>
              <li>{t('marketing.termsOfService.sections.userAccounts.requirements.security')}</li>
              <li>{t('marketing.termsOfService.sections.userAccounts.requirements.notify')}</li>
              <li>{t('marketing.termsOfService.sections.userAccounts.requirements.responsible')}</li>
            </ul>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.acceptableUse.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              {t('marketing.termsOfService.sections.acceptableUse.intro')}
            </p>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              <li>{t('marketing.termsOfService.sections.acceptableUse.prohibitions.laws')}</li>
              <li>{t('marketing.termsOfService.sections.acceptableUse.prohibitions.ip')}</li>
              <li>{t('marketing.termsOfService.sections.acceptableUse.prohibitions.malicious')}</li>
              <li>{t('marketing.termsOfService.sections.acceptableUse.prohibitions.unauthorized')}</li>
              <li>{t('marketing.termsOfService.sections.acceptableUse.prohibitions.fraudulent')}</li>
            </ul>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.subscriptionsAndPayments.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              {t('marketing.termsOfService.sections.subscriptionsAndPayments.intro')}
            </p>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              <li>{t('marketing.termsOfService.sections.subscriptionsAndPayments.terms.billing')}</li>
              <li>{t('marketing.termsOfService.sections.subscriptionsAndPayments.terms.cancel')}</li>
              <li>{t('marketing.termsOfService.sections.subscriptionsAndPayments.terms.refunds')}</li>
              <li>{t('marketing.termsOfService.sections.subscriptionsAndPayments.terms.pricing')}</li>
              <li>{t('marketing.termsOfService.sections.subscriptionsAndPayments.terms.failed')}</li>
            </ul>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.trialPeriod.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.trialPeriod.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.dataAndPrivacy.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.dataAndPrivacy.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.serviceAvailability.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.serviceAvailability.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.intellectualProperty.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.intellectualProperty.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.termination.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.termination.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.limitationOfLiability.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.limitationOfLiability.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.warrantyDisclaimer.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.warrantyDisclaimer.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.indemnification.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.indemnification.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.changesToTerms.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.changesToTerms.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.governingLaw.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.governingLaw.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">
              {t('marketing.termsOfService.sections.contactUs.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.termsOfService.sections.contactUs.intro')}
            </p>
            <p className="text-gray-600 dark:text-gray-400 mb-2">
              <strong>{t('marketing.termsOfService.sections.contactUs.email')}</strong> {t('marketing.termsOfService.sections.contactUs.emailAddress')}
            </p>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              <strong>{t('marketing.termsOfService.sections.contactUs.website')}</strong> {t('marketing.termsOfService.sections.contactUs.websiteUrl')}
            </p>

          </div>
        </div>
      </section>
    </div>
  );
};

export default TermsOfServicePage;
