import React from 'react'
import Image from 'next/image'
import AddressSelector from '@/components/AddressSelector'
import SearchCard from '@/app/(urls)/search/components/SearchCard'
import FAQ from '@/components/FAQ'
import { data } from '@/app/staticData'
import { routes } from '@/app/staticData'
import Button from '@/components/ui/Button'
import News from '@/components/News'
import { getFAQs } from '@/lib/fetchFAQ'

export default async function Home() {
  const faqs = await getFAQs()

  return (
    <div className="flex flex-col items-center justify-center  max-w-[93%] mx-auto">
      {/* main */}
      <div className="flex items-center justify-center space-x-16">
        <div>
          <Image
            src="/images/box1.png"
            alt="main"
            width={220}
            height={220}
            className="hidden sm:block"
          />
        </div>
        <div className="flex flex-col items-center justify-center space-y-5">
          <h1 className="text-3xl sm:text-4xl text-center font-bold">
            <div className="pb-1">
              Сервис по <span className="text-orange">поиску</span>{' '}
            </div>
            <div>
              <span className="text-orange">перевозчиков</span> посылок
            </div>
          </h1>
          <p className="text-base sm:text-lg text-center pb-3">
            Доставка посылок с попутчиками: от документов до крупногабаритных
            грузов
          </p>
        </div>
        <div>
          <Image
            src="/images/box2.png"
            alt="main"
            width={220}
            height={220}
            className="hidden sm:block"
          />
        </div>
      </div>

      {/* форма на серч */}
      <AddressSelector />

      <div className="text-lg font-normal text-[#272424] underline decoration-orange underline-offset-4 mb-20 hover:text-orange transition-colors cursor-pointer">
        Я могу взять с собой посылку
      </div>

      <div className="flex flex-col items-center justify-center mb-8">
        <h2 className="text-4xl text-center font-bold">Все объявления</h2>
        <div className="text-base my-3">
          На нашем сайте размещено уже{' '}
          <span className="text-orange">{routes}</span> объявлений по отправке и
          перевозке посылок
        </div>
      </div>

      {/* первые пять серч карточек -- бекенд??? */}
      <div className="w-full max-w-[1250px] mx-auto">
        <div className="grid grid-cols-1 gap-4 w-full">
          {data.map((card) => (
            <SearchCard key={card.id} {...card} />
          ))}
        </div>
        <div className="flex justify-center py-4">
          <Button
            text="Разместить объявление"
            className=" bg-orange text-white text-xl font-semibold px-6 py-3 rounded-lg"
          />
        </div>
      </div>

      {/* how it works */}
      <div className="w-full max-w-[1250px] mx-auto my-20">
        <h2 className="text-4xl text-center font-bold">Как это работает</h2>
        <div className="flex flex-col items-center justify-center text-base font-medium text-center py-4 mb-4">
          <span>
            TWB - это сервис, созданный для того, чтобы отправитель и перевозчик
            нашли друг-друга!
          </span>
          <span>
            Наш сервис предлагает вам прямые контакты, а не является посредником
            !
          </span>
        </div>
        <div className="flex flex-col sm:flex-row justify-center items-center sm:items-start sm:space-x-4 md:space-x-8 lg:space-x-20 space-y-8 sm:space-y-0">
          <div className="flex flex-col items-center w-full sm:w-1/3 px-4 sm:px-2">
            <div className="flex flex-col items-center h-[260px] sm:h-[300px]">
              <Image
                src="/images/laptop.png"
                alt="laptop"
                width={230}
                height={230}
                className="mb-6 w-[180px] h-[180px] sm:w-[230px] sm:h-[230px]"
              />
              <div className="text-xl sm:text-2xl font-semibold text-center">
                Найдите перевозчика
              </div>
            </div>
            <div className="text-sm sm:text-base text-gray-600 text-center px-2 sm:px-4 md:px-7">
              В форме поиска укажите откуда и куда Вам нужно доставить посылку,
              нажмите кнопку "найти перевозчика". Если по вашему запросу ничего
              не найдено - Вы можете сами разместить объявление и тогда
              перевозчики Вас найдут.
            </div>
          </div>

          <div className="flex flex-col items-center w-full sm:w-1/3 px-4 sm:px-2">
            <div className="flex flex-col items-center h-[260px] sm:h-[300px]">
              <Image
                src="/images/phone.png"
                alt="phone"
                width={230}
                height={230}
                className="mb-6 w-[180px] h-[180px] sm:w-[230px] sm:h-[230px]"
              />
              <div className="text-xl sm:text-2xl font-semibold text-center">
                Свяжитесь с перевозчиком
              </div>
            </div>
            <div className="text-sm sm:text-base text-gray-600 text-center px-2 sm:px-4 md:px-7">
              Нажмите на кнопку «ОТКЛИКНУТЬСЯ», свяжитесь и договоритесь о месте
              встречи и условиях перевозки
            </div>
          </div>

          <div className="flex flex-col items-center w-full sm:w-1/3 px-4 sm:px-2">
            <div className="flex flex-col items-center h-[260px] sm:h-[300px]">
              <Image
                src="/images/package.png"
                alt="package"
                width={230}
                height={230}
                className="mb-6 w-[180px] h-[180px] sm:w-[230px] sm:h-[230px]"
              />
              <div className="text-xl sm:text-2xl font-semibold text-center">
                Передайте посылку
              </div>
            </div>
            <div className="text-sm sm:text-base text-gray-600 text-center px-2 sm:px-4 md:px-7">
              Встречайтесь, знакомьтесь и передавайте посылку
            </div>
          </div>
        </div>
        <div className="flex justify-center pt-8 sm:pt-10">
          <Button
            text="Отправить посылку"
            className="bg-orange hover:bg-orange/80 text-white text-base sm:text-lg px-8 sm:px-12 py-2.5 sm:py-3 rounded-lg"
          />
        </div>
      </div>

      {/* преимущества */}
      <div className="w-full max-w-[1250px] mx-auto my-10 px-4 sm:px-6">
        <h2 className="text-3xl sm:text-4xl text-center font-bold mb-12">
          Преимущества сервиса
        </h2>
        <div className="flex flex-col lg:flex-row items-center justify-between gap-6 lg:gap-4">
          <div className="flex flex-col w-full lg:w-1/4 space-y-4">
            <div className="flex flex-col space-y-1">
              <div className="text-xl text-center sm:text-left font-semibold">
                Прямой контакт
              </div>
              <span className="text-base text-center sm:text-left text-gray-600">
                Общаешься напрямую с перевозчиком, никаких посредников
              </span>
            </div>
            <div className="flex flex-col space-y-1">
              <div className="text-xl text-center sm:text-left font-semibold">
                Своя цена
              </div>
              <span className="text-base text-center sm:text-left text-gray-600">
                Стоимость перевозки самостоятельно обговариваете с перевозчиком.
              </span>
            </div>
            <div className="flex flex-col space-y-1">
              <div className="text-xl text-center sm:text-left font-semibold">
                Нет доп. расходов
              </div>
              <span className="text-base text-center sm:text-left text-gray-600">
                Никаких комиссий, переплат и дополнительных расходов за
                отправку.
              </span>
            </div>
          </div>

          <div className="w-full lg:w-auto px-4 sm:px-0">
            <Image
              src="/images/advantage.svg"
              alt="advantages"
              width={648}
              height={403}
            />
          </div>

          <div className="flex flex-col w-full lg:w-1/4 space-y-4">
            <div className="flex flex-col space-y-1">
              <div className="text-xl text-center sm:text-left font-semibold">
                Уведомления
              </div>
              <span className="text-base text-center sm:text-left text-gray-600">
                Можешь самостоятельно найти перевозчиков или разместить
                объявление на сайте.
              </span>
            </div>
            <div className="flex flex-col space-y-1">
              <div className="text-xl text-center sm:text-left font-semibold">
                Удобный поиск
              </div>
              <span className="text-base text-center sm:text-left text-gray-600">
                Как только по твоему объявлению найдется перевозчик мы сообщим
                на E-mail.
              </span>
            </div>
            <div className="flex flex-col space-y-1">
              <div className="text-xl text-center sm:text-left font-semibold">
                Экономия времени
              </div>
              <span className="text-base text-center sm:text-left text-gray-600">
                Не нужно искать группы, чаты, и кидать "клич", а просто
                достаточно разместить объявление на сайте.
              </span>
            </div>
          </div>
        </div>
      </div>
      {/* FAQ */}
      <FAQ faqs={faqs} />

      {/* новости */}
      <News />
    </div>
  )
}
