import { getTranslations } from 'next-intl/server';
import { Briefcase, GraduationCap, Globe } from 'lucide-react';

interface WorkPosition {
  title: string;
  period: string;
  company: string;
  location: string;
  highlights: string[];
}

interface LanguageItem {
  name: string;
  level: string;
}

const Journey = async () => {
  const t = await getTranslations('pages.about.journey');

  let workPositions: WorkPosition[] = [];
  let languageItems: [string, LanguageItem][] = [];

  try {
    const positions = t.raw('work.positions') as WorkPosition[];
    if (Array.isArray(positions)) {
      workPositions = positions;
    }
  } catch {
    workPositions = [];
  }

  try {
    const items = t.raw('languages.items') as Record<string, LanguageItem>;
    if (typeof items === 'object') {
      languageItems = Object.entries(items);
    }
  } catch {
    languageItems = [];
  }

  return (
    <section className="py-24 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-3xl font-bold text-white mb-4">
            {t('title')}
          </h2>
          <p className="text-zinc-400 max-w-2xl mx-auto">
            {t('subtitle')}
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
          {/* Education Column */}
          <div className="space-y-6">
            <div className="p-6 bg-zinc-800/30 border border-zinc-800 rounded-lg">
              <div className="flex items-center gap-3 mb-6">
                <GraduationCap className="h-5 w-5 text-zinc-400" />
                <h3 className="text-lg font-medium text-white">
                  {t('education.title')}
                </h3>
              </div>
              <div className="space-y-4">
                <div>
                  <h4 className="text-white font-medium">
                    {t('education.degrees.masters.degree')}
                  </h4>
                  <p className="text-zinc-400 text-sm">
                    {t('education.degrees.masters.university')}
                  </p>
                  <p className="text-zinc-500 text-sm">
                    {t('education.degrees.masters.period')}
                  </p>
                </div>
                <div>
                  <h4 className="text-white font-medium">
                    {t('education.degrees.bachelors.degree')}
                  </h4>
                  <p className="text-zinc-400 text-sm">
                    {t('education.degrees.bachelors.university')}
                  </p>
                  <p className="text-zinc-500 text-sm">
                    {t('education.degrees.bachelors.period')}
                  </p>
                </div>
              </div>
            </div>

            {/* Languages */}
            <div className="p-6 bg-zinc-800/30 border border-zinc-800 rounded-lg">
              <div className="flex items-center gap-3 mb-6">
                <Globe className="h-5 w-5 text-zinc-400" />
                <h3 className="text-lg font-medium text-white">
                  {t('languages.title')}
                </h3>
              </div>
              <div className="grid grid-cols-2 gap-4">
                {languageItems.map(([key, item]) => (
                  <div key={key}>
                    <div className="text-zinc-300">{item.name}</div>
                    <div className="text-zinc-500 text-sm">{item.level}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Work History */}
          <div className="lg:col-span-2 space-y-6">
            {workPositions.map((job, index) => (
              <div
                key={index}
                className="p-6 bg-zinc-800/30 border border-zinc-800 rounded-lg"
              >
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-medium text-white">{job.title}</h3>
                  <span className="text-zinc-500 text-sm">{job.period}</span>
                </div>
                <div className="flex items-center gap-2 mb-4">
                  <Briefcase className="h-4 w-4 text-zinc-400" />
                  <p className="text-zinc-300">{job.company}</p>
                  <span className="text-zinc-500">• {job.location}</span>
                </div>
                <ul className="space-y-2">
                  {job.highlights.map((highlight, idx) => (
                    <li key={idx} className="text-zinc-400 text-sm flex items-start gap-2">
                      <span className="text-zinc-500">•</span>
                      {highlight}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Journey;
