import { Link } from 'react-router-dom';
import { Showreel } from './Showreel';

export function Motivation() {
  return (
    <div className="pt-16 lg:pt-20 sm:pt-14">
      <div className="mb-6 space-y-8 lg:space-y-12">
        <h1 className="font-medium h1">
          Создаем интерактивные
          <span className="text-gradient"> выставочные решения</span>
        </h1>
        <div className="flex flex-wrap sm:gap-x-5 gap-x-2 gap-y-4">
          {[
            { solution: 'VR и AR', count: 12 },
            { solution: 'Интерактивные приложения', count: 21 },
            { solution: '3D макеты', count: 14 },
          ].map(({ count, solution }, index) => (
            <Link
              key={solution}
              className="h4 font-medium flex gap-x-[7px]"
              to={`#${index === 0 ? 'vr_ar' : index == 1 ? 'interactive' : '3d_makets'}`}
              onClick={() =>
                document
                  .getElementById(
                    index === 0
                      ? 'vr_ar'
                      : index == 1
                        ? 'interactive'
                        : '3d_makets',
                  )
                  ?.scrollIntoView({ behavior: 'smooth', block: 'start' })
              }
            >
              {solution}
              <sup className="text-xs">{count}</sup>
              {index !== 2 && <span>/</span>}
            </Link>
          ))}
        </div>
      </div>
      <Showreel />
    </div>
  );
}
