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: 'Интерактивные приложения',
              count: 21,
              to: 'interactive',
            },
            { solution: '3D макеты', count: 14, to: '3d_makets' },
            { solution: 'VR и AR', count: 12, to: 'vr_ar' },
          ].map(({ count, solution, to }, index) => (
            <Link
              key={solution}
              to={`#${to}`}
              className="h4 font-medium flex gap-x-[7px]"
              onClick={() => {
                const element = document.getElementById(to);
                element?.scrollIntoView({ behavior: 'smooth' });
                element?.click();
              }}
            >
              {solution}
              <sup className="text-xs">{count}</sup>
              {index !== 2 && <span>/</span>}
            </Link>
          ))}
        </div>
      </div>
      <Showreel />
    </div>
  );
}
