import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Zap,
  Shield,
  Code,
  Server,
  Database,
  Lock,
  CheckCircle2,
  FileSignature,
  FileCheck,
  Scale,
  Sparkles
} from 'lucide-react';
import WorkflowVisual from '../../components/marketing/WorkflowVisual';
import CTASection from '../../components/marketing/CTASection';

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

  return (
    <div className="bg-white dark:bg-gray-900 min-h-screen pt-24">

      {/* Header */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-20">
        <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
          {t('marketing.features.pageTitle')}
        </h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
          {t('marketing.features.pageSubtitle')}
        </p>
      </div>

      {/* Feature 1: The Automation Engine */}
      <section className="py-20 bg-gray-50 dark:bg-gray-800/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 text-sm font-medium mb-6">
                <Sparkles className="w-4 h-4" />
                <span>{t('marketing.features.automationEngine.badge')}</span>
              </div>
              <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
                {t('marketing.features.automationEngine.title')}
              </h2>
              <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
                {t('marketing.features.automationEngine.description')}
              </p>

              <ul className="space-y-4">
                {[
                  t('marketing.features.automationEngine.features.visualBuilder'),
                  t('marketing.features.automationEngine.features.aiCopilot'),
                  t('marketing.features.automationEngine.features.integrations'),
                  t('marketing.features.automationEngine.features.templates')
                ].map((item) => (
                  <li key={item} className="flex items-center gap-3">
                    <CheckCircle2 className="w-5 h-5 text-green-500" />
                    <span className="text-gray-700 dark:text-gray-300">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="relative">
              <div className="absolute -inset-4 bg-purple-500/20 rounded-3xl blur-2xl" />
              <WorkflowVisual variant="noshow" trigger="" actions={[]} />
            </div>
          </div>
        </div>
      </section>

      {/* Feature 2: Multi-Tenancy */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center lg:flex-row-reverse">
            <div className="order-2 lg:order-1">
              <div className="relative rounded-2xl bg-gray-900 border border-gray-800 p-8 overflow-hidden">
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-4 bg-gray-800 rounded-lg border border-gray-700">
                    <Database className="w-8 h-8 text-blue-400 mb-3" />
                    <div className="text-sm font-mono text-gray-400">tenant_a_vault</div>
                    <div className="h-2 w-16 bg-blue-500/20 rounded mt-2" />
                    <div className="h-2 w-12 bg-blue-500/20 rounded mt-1" />
                  </div>
                  <div className="p-4 bg-gray-800 rounded-lg border border-gray-700">
                    <Database className="w-8 h-8 text-green-400 mb-3" />
                    <div className="text-sm font-mono text-gray-400">tenant_b_vault</div>
                    <div className="h-2 w-16 bg-green-500/20 rounded mt-2" />
                    <div className="h-2 w-12 bg-green-500/20 rounded mt-1" />
                  </div>
                </div>
                <div className="mt-8 flex items-center justify-center gap-4 text-gray-500 text-sm">
                  <Lock className="w-4 h-4" />
                  <span>{t('marketing.features.multiTenancy.strictDataIsolation')}</span>
                </div>
              </div>
            </div>

            <div className="order-1 lg:order-2">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-sm font-medium mb-6">
                <Shield className="w-4 h-4" />
                <span>{t('marketing.features.multiTenancy.badge')}</span>
              </div>
              <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
                {t('marketing.features.multiTenancy.title')}
              </h2>
              <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
                {t('marketing.features.multiTenancy.description')}
              </p>

              <div className="grid sm:grid-cols-2 gap-6">
                <div className="flex gap-4">
                  <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg text-blue-600 dark:text-blue-400 h-fit">
                    <Server className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900 dark:text-white mb-1">{t('marketing.features.multiTenancy.customDomains.title')}</h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {t('marketing.features.multiTenancy.customDomains.description')}
                    </p>
                  </div>
                </div>
                <div className="flex gap-4">
                  <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg text-green-600 dark:text-green-400 h-fit">
                    <Code className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900 dark:text-white mb-1">{t('marketing.features.multiTenancy.whiteLabeling.title')}</h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {t('marketing.features.multiTenancy.whiteLabeling.description')}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Feature 3: Digital Contracts */}
      <section className="py-20 bg-gray-50 dark:bg-gray-800/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 text-sm font-medium mb-6">
                <Scale className="w-4 h-4" />
                <span>{t('marketing.features.contracts.badge')}</span>
              </div>
              <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
                {t('marketing.features.contracts.title')}
              </h2>
              <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
                {t('marketing.features.contracts.description')}
              </p>

              <ul className="space-y-4">
                {[
                  t('marketing.features.contracts.features.templates'),
                  t('marketing.features.contracts.features.eSignature'),
                  t('marketing.features.contracts.features.auditTrail'),
                  t('marketing.features.contracts.features.pdfGeneration')
                ].map((item) => (
                  <li key={item} className="flex items-center gap-3">
                    <CheckCircle2 className="w-5 h-5 text-green-500" />
                    <span className="text-gray-700 dark:text-gray-300">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="relative">
              <div className="absolute -inset-4 bg-teal-500/20 rounded-3xl blur-2xl" />
              <div className="relative rounded-2xl bg-gray-900 border border-gray-800 p-8 overflow-hidden">
                <div className="space-y-6">
                  {/* Contract Preview Mock */}
                  <div className="p-4 bg-white dark:bg-gray-100 rounded-lg">
                    <div className="flex items-center gap-3 mb-4">
                      <FileSignature className="w-8 h-8 text-teal-600" />
                      <div>
                        <div className="text-sm font-semibold text-gray-900">Service Agreement</div>
                        <div className="text-xs text-gray-500">Awaiting signature</div>
                      </div>
                    </div>
                    <div className="h-2 w-full bg-gray-200 rounded mb-2" />
                    <div className="h-2 w-3/4 bg-gray-200 rounded mb-2" />
                    <div className="h-2 w-5/6 bg-gray-200 rounded" />
                  </div>

                  {/* Compliance Badge */}
                  <div className="flex items-center justify-between p-4 bg-gray-800 rounded-lg border border-gray-700">
                    <div className="flex items-center gap-3">
                      <FileCheck className="w-6 h-6 text-green-400" />
                      <span className="text-sm text-gray-300">ESIGN Act Compliant</span>
                    </div>
                    <CheckCircle2 className="w-5 h-5 text-green-500" />
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div className="flex gap-4">
                      <div className="p-2 bg-teal-900/30 rounded-lg text-teal-400 h-fit">
                        <Scale className="w-6 h-6" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-white text-sm mb-1">{t('marketing.features.contracts.compliance.title')}</h3>
                        <p className="text-xs text-gray-400">
                          {t('marketing.features.contracts.compliance.description')}
                        </p>
                      </div>
                    </div>
                    <div className="flex gap-4">
                      <div className="p-2 bg-purple-900/30 rounded-lg text-purple-400 h-fit">
                        <Zap className="w-6 h-6" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-white text-sm mb-1">{t('marketing.features.contracts.automation.title')}</h3>
                        <p className="text-xs text-gray-400">
                          {t('marketing.features.contracts.automation.description')}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTASection />
    </div>
  );
};

export default FeaturesPage;