import React from 'react';
import { useTranslation } from 'react-i18next';
import { Lightbulb, Shield, Eye, HeartHandshake } from 'lucide-react';
import CTASection from '../../components/marketing/CTASection';

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

  const values = [
    {
      icon: Lightbulb,
      titleKey: 'marketing.about.values.simplicity.title',
      descriptionKey: 'marketing.about.values.simplicity.description',
      color: 'brand',
    },
    {
      icon: Shield,
      titleKey: 'marketing.about.values.reliability.title',
      descriptionKey: 'marketing.about.values.reliability.description',
      color: 'green',
    },
    {
      icon: Eye,
      titleKey: 'marketing.about.values.transparency.title',
      descriptionKey: 'marketing.about.values.transparency.description',
      color: 'purple',
    },
    {
      icon: HeartHandshake,
      titleKey: 'marketing.about.values.support.title',
      descriptionKey: 'marketing.about.values.support.description',
      color: 'orange',
    },
  ];

  const colorClasses: Record<string, string> = {
    brand: 'bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400',
    green: 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400',
    purple: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400',
    orange: 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400',
  };

  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.about.title')}
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-400">
            {t('marketing.about.subtitle')}
          </p>
        </div>
      </section>

      {/* Story Section */}
      <section className="py-20 bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
                {t('marketing.about.story.title')}
              </h2>
              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                {t('marketing.about.story.content')}
              </p>
              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
                {t('marketing.about.story.content2')}
              </p>
            </div>
            <div className="bg-gradient-to-br from-brand-500 to-brand-600 rounded-2xl p-8 text-white">
              <div className="text-6xl font-bold mb-2">2017</div>
              <div className="text-brand-100">{t('marketing.about.story.founded')}</div>
              <div className="mt-8 space-y-4">
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-brand-200 rounded-full" />
                  <span className="text-brand-100">8+ years building scheduling solutions</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-brand-200 rounded-full" />
                  <span className="text-brand-100">Battle-tested with real businesses</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-brand-200 rounded-full" />
                  <span className="text-brand-100">Features born from customer feedback</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-brand-200 rounded-full" />
                  <span className="text-brand-100">Now available to everyone</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission Section */}
      <section className="py-20 bg-gray-50 dark:bg-gray-800/50">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
            {t('marketing.about.mission.title')}
          </h2>
          <p className="text-xl text-gray-600 dark:text-gray-400 leading-relaxed max-w-3xl mx-auto">
            {t('marketing.about.mission.content')}
          </p>
        </div>
      </section>

      {/* Values Section */}
      <section className="py-20 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-12 text-center">
            {t('marketing.about.values.title')}
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {values.map((value) => (
              <div key={value.titleKey} className="text-center">
                <div className={`inline-flex p-4 rounded-2xl ${colorClasses[value.color]} mb-4`}>
                  <value.icon className="h-8 w-8" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  {t(value.titleKey)}
                </h3>
                <p className="text-gray-600 dark:text-gray-400">
                  {t(value.descriptionKey)}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <CTASection variant="minimal" />
    </div>
  );
};

export default AboutPage;