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 { routes } from '@/app/constants'
import News from '@/components/News'
import { getFAQs } from '@/lib/main/fetchFAQ'
import { getNews } from '@/lib/main/fetchNews'
import { getFirstRoutes } from '@/lib/main/fetchFirstRoutes'
import Link from 'next/link'

export default async function Home() {
  const faqs = await getFAQs()
  const news = await getNews()
  const latestRoutes = await getFirstRoutes()

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

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

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

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

      <div className="mx-auto w-full max-w-[1250px]">
        <div className="grid w-full grid-cols-1 gap-4">
          {Array.isArray(latestRoutes) && latestRoutes.length > 0 ? (
            latestRoutes.map(card => <SearchCard key={card.id} {...card} />)
          ) : (
            <div className="py-4 text-center text-gray-600">Нет доступных маршрутов</div>
          )}
        </div>
        <div className="flex justify-center py-4">
          <Link
            href="/account/create-as-sender"
            className="bg-orange rounded-lg px-6 py-3 text-xl font-semibold text-white"
          >
            Разместить объявление
          </Link>
        </div>
      </div>

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

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

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

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

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

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

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