import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { PublicLayout } from '../../components/layout';
import {
  Target,
  Heart,
  Shield,
  Users,
  TrendingUp,
  Brain,
  Leaf,
  Award,
  ArrowRight,
  CheckCircle2,
  Sparkles
} from 'lucide-react';

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

  const values = [
    {
      icon: Leaf,
      title: t('values.sustainability.title'),
      description: t('values.sustainability.description'),
    },
    {
      icon: Shield,
      title: t('values.privacy.title'),
      description: t('values.privacy.description'),
    },
    {
      icon: Heart,
      title: t('values.passion.title'),
      description: t('values.passion.description'),
    },
    {
      icon: Users,
      title: t('values.transparency.title'),
      description: t('values.transparency.description'),
    },
  ];

  const founderHighlights = [
    {
      icon: Brain,
      title: t('founder.highlights.experience.title'),
      description: t('founder.highlights.experience.description'),
    },
    {
      icon: Award,
      title: t('founder.highlights.education.title'),
      description: t('founder.highlights.education.description'),
    },
    {
      icon: TrendingUp,
      title: t('founder.highlights.expertise.title'),
      description: t('founder.highlights.expertise.description'),
    },
    {
      icon: Users,
      title: t('founder.highlights.vision.title'),
      description: t('founder.highlights.vision.description'),
    },
  ];

  const milestones = [
    {
      year: t('timeline.milestones.inception.year'),
      title: t('timeline.milestones.inception.title'),
      description: t('timeline.milestones.inception.description'),
    },
    {
      year: t('timeline.milestones.development.year'),
      title: t('timeline.milestones.development.title'),
      description: t('timeline.milestones.development.description'),
    },
    {
      year: t('timeline.milestones.pilot.year'),
      title: t('timeline.milestones.pilot.title'),
      description: t('timeline.milestones.pilot.description'),
    },
    {
      year: t('timeline.milestones.expansion.year'),
      title: t('timeline.milestones.expansion.title'),
      description: t('timeline.milestones.expansion.description'),
    },
  ];

  return (
    <PublicLayout
      variant="default"
      contentPadding="md"
      headerProps={{
        showThemeToggle: true,
        showAuthButtons: true,
        showLanguageSelector: true,
        variant: "default"
      }}
    >
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-4xl mx-auto">
            <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
              <Sparkles className="w-4 h-4" />
              <span>{t('hero.badge')}</span>
            </div>
            <h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
              {t('hero.title_line1')}
              <span className="block text-[var(--color-primary)]">{t('hero.title_line2')}</span>
            </h1>
            <p className="text-xl text-[var(--text-secondary)] leading-relaxed">
              {t('hero.subtitle')}
            </p>
          </div>
        </div>
      </section>

      {/* Mission & Vision */}
      <section className="py-20 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-12">
            {/* Mission */}
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8 border-2 border-blue-200 dark:border-blue-800">
              <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-6">
                <Target className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-3xl font-bold text-[var(--text-primary)] mb-4">{t('mission.title')}</h2>
              <p className="text-lg text-[var(--text-secondary)] leading-relaxed" dangerouslySetInnerHTML={{ __html: t('mission.description') }} />
            </div>

            {/* Vision */}
            <div className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 rounded-2xl p-8 border-2 border-amber-200 dark:border-amber-800">
              <div className="w-16 h-16 bg-amber-600 rounded-2xl flex items-center justify-center mb-6">
                <Brain className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-3xl font-bold text-[var(--text-primary)] mb-4">{t('vision.title')}</h2>
              <p className="text-lg text-[var(--text-secondary)] leading-relaxed" dangerouslySetInnerHTML={{ __html: t('vision.description') }} />
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="py-20 bg-[var(--bg-secondary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              {t('values.title')}
            </h2>
            <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
              {t('values.subtitle')}
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {values.map((value, index) => (
              <div
                key={index}
                className="bg-[var(--bg-primary)] rounded-2xl p-8 border border-[var(--border-primary)] hover:shadow-xl transition-all duration-300"
              >
                <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center mb-6">
                  <value.icon className="w-6 h-6 text-[var(--color-primary)]" />
                </div>
                <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-4">{value.title}</h3>
                <p className="text-[var(--text-secondary)] leading-relaxed">{value.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Founder */}
      <section className="py-20 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              {t('founder.title')}
            </h2>
            <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
              {t('founder.subtitle')}
            </p>
          </div>

          {/* Founder Profile Card */}
          <div className="max-w-4xl mx-auto mb-12">
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8 border-2 border-blue-200 dark:border-blue-800">
              <div className="flex flex-col md:flex-row gap-8 items-center md:items-start">
                <div className="w-32 h-32 bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-full flex items-center justify-center text-white text-4xl font-bold flex-shrink-0">
                  UA
                </div>
                <div className="flex-1 text-center md:text-left">
                  <h3 className="text-3xl font-bold text-[var(--text-primary)] mb-2">{t('founder.name')}</h3>
                  <p className="text-xl text-[var(--color-primary)] font-medium mb-4">{t('founder.position')}</p>
                  <p className="text-[var(--text-secondary)] leading-relaxed mb-4">
                    {t('founder.intro')}
                  </p>
                  <p className="text-[var(--text-secondary)] leading-relaxed">
                    {t('founder.bio')}
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Founder Highlights */}
          <div className="grid md:grid-cols-2 gap-8">
            {founderHighlights.map((highlight, index) => (
              <div
                key={index}
                className="bg-[var(--bg-secondary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all duration-300"
              >
                <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center mb-4">
                  <highlight.icon className="w-6 h-6 text-[var(--color-primary)]" />
                </div>
                <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">{highlight.title}</h3>
                <p className="text-sm text-[var(--text-secondary)]">{highlight.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="py-20 bg-[var(--bg-secondary)]">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              {t('timeline.title')}
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              {t('timeline.subtitle')}
            </p>
          </div>

          <div className="relative">
            {/* Timeline line */}
            <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-[var(--color-primary)]/30"></div>

            {/* Milestones */}
            <div className="space-y-12">
              {milestones.map((milestone, index) => (
                <div key={index} className="relative pl-20">
                  <div className="absolute left-0 w-16 h-16 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold border-4 border-[var(--bg-secondary)]">
                    <CheckCircle2 className="w-8 h-8" />
                  </div>
                  <div className="bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)]">
                    <div className="text-sm font-bold text-[var(--color-primary)] mb-2">{milestone.year}</div>
                    <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">{milestone.title}</h3>
                    <p className="text-[var(--text-secondary)]">{milestone.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 bg-gradient-to-r from-[var(--color-primary)] to-orange-600">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl lg:text-4xl font-bold text-white mb-6">
            {t('cta.title')}
          </h2>
          <p className="text-xl text-white/90 mb-8 leading-relaxed">
            {t('cta.subtitle')}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              to="/register"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-[var(--color-primary)] rounded-xl font-bold hover:shadow-2xl transition-all hover:scale-105"
            >
              <span>{t('cta.primary')}</span>
              <ArrowRight className="w-5 h-5" />
            </Link>
            <Link
              to="/demo"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-white text-white rounded-xl font-bold hover:bg-white hover:text-[var(--color-primary)] transition-all"
            >
              <span>{t('cta.secondary')}</span>
            </Link>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
};

export default AboutPage;
