import { interactions } from '../consts/interactions';
import { Title } from './ui/Title';

export function Interactions() {
  return (
    <div className="items-start space-y-8 lg:flex sm:max-lg:space-y-10 gap-x-4">
      <Title className="lg:sticky top-10 max-lg:hidden max-w-[50vw]">
        С помощью интерактивных инструментов создаем систему{' '}
        <span className="text-gradient">
          эффективного взаимодействия с&nbsp;клиентами
        </span>
      </Title>
      <Title className="lg:sticky top-10 lg:hidden">
        Создаем систему для
        <span className="text-gradient">
          {' '}
          эффективного взаимодействия с&nbsp;клиентами
        </span>{' '}
        с&nbsp;помощью интерактивных инструментов и&nbsp;анализа
        пользовательского опыта
      </Title>
      <div className="space-y-4">{interactions.map(Interaction)}</div>
    </div>
  );
}

function Interaction({ title, video }: { title: string; video: string }) {
  return (
    <div className="sm:p-8 p-3 border border-[#3D425C] bg-[#14161F]">
      <p className="font-medium leading-none text-[clamp(20px,20px+(100vw-360px)/1240*12,32px)]">
        {title}
      </p>
      <video
        src={video}
        muted
        autoPlay
        loop
        playsInline
        className="-mb-3 sm:-mb-8"
      />
    </div>
  );
}
