"use client";
import { useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { format } from "date-fns";
import { homePageEffect } from "@/effects/homeEffect";

import { ArticlesData } from "../data/article";

export default function Home() {
  useEffect(() => {
    const typingNode = document.getElementById("typewriter") as HTMLElement;
    if (typingNode) {
      homePageEffect.showTypingEffect(typingNode);
    }

    // slider đối tác
    homePageEffect.startCarousel("#navheight", true, 3000);
  }, []);

  return (
    <>
      <div className="homepage">
        <div className="box-slogan">
          <div className="content-slogan">
            <div className="main-sologan">
              Cung cấp{" "}
              <span id="typewriter">
                các giải pháp tmđt toàn diện & chuyên nghiệp.
              </span>
              <span className="caret"></span>
            </div>
            <div className="note">
              Tư vấn và phát triển website, marketing online, chăm sóc khách
              hàng, tên miền, cloud hosting
            </div>
            <div className="group-btn flex items-center justify-center">
              <Link href="/lien-he" className="btn btn-contact">
                <i className="icon_2024 phone"></i>
                <span>Liên hệ</span>
              </Link>
            </div>
          </div>
        </div>

        <div className="box-customer">
          <div className="container">
            <h2 className="title">Khách hàng đồng hành</h2>
            <div className="navheight" id="navheight">
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
              </div>
              <div className="item-big">
                <div className="item active">
                  <Image
                    src="/images/logo-apollhome-new.png"
                    width={100}
                    height={100}
                    alt="apollhome"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-hacom-new.png"
                    width={100}
                    height={100}
                    alt="hacom"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-traphaco.png"
                    width={100}
                    height={100}
                    alt="traphaco"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-anphat-new.png"
                    width={100}
                    height={100}
                    alt="anphat"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/icon-nagakawa-new.png"
                    width={100}
                    height={100}
                    alt="nagakawa"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-tainghe.png"
                    width={100}
                    height={100}
                    alt="tainghe"
                  />
                </div>
                <div className="item">
                  <Image
                    src="/images/logo-philong.png"
                    width={100}
                    height={100}
                    alt="philong"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="box-product">
          <div className="container">
            <h2 className="title">Sản phẩm</h2>
            <div className="list-product flex">
              <div className="item-product">
                <div className="top">
                  <div className="icon">
                    <Image
                      src="/images/icon-hura8.png"
                      width={100}
                      height={100}
                      alt="hura 8"
                    />
                  </div>
                  <p className="txt line-clamp-5">
                    Phần mềm tạo website TMĐT chạy nên nền tảng Cloud dành cho
                    doanh nghiệp lớn
                  </p>
                </div>
                <a href="//hura8.com" target="_blank" className="more">
                  Xem thêm <i className="fa-solid fa-arrow-right"></i>
                </a>
              </div>
              <div className="item-product">
                <div className="top">
                  <div className="icon">
                    <Image
                      src="/images/logo-xstore.png"
                      width={93}
                      height={35}
                      alt="xstore"
                    />
                  </div>
                  <p className="txt line-clamp-5">
                    Nền tảng quản lý cửa hàng nhỏ toàn diện, bao gồm: Quản lý
                    đơn hàng đa kênh, Kho hàng, Website và POS
                  </p>
                </div>
                <a href="//xstore.vn" target="_blank" className="more">
                  Xem thêm <i className="fa-solid fa-arrow-right"></i>
                </a>
              </div>
              <div className="item-product">
                <div className="top">
                  <div className="icon">
                    <Image
                      src="/images/icon-adman.png"
                      width={100}
                      height={100}
                      alt="icon-adman"
                    />
                  </div>
                  <p className="txt line-clamp-5">
                    Nền tảng marketing toàn diện dành cho các chuyên gia.
                  </p>
                </div>
                <a href="//adman.vn" target="_blank" className="more">
                  Xem thêm <i className="fa-solid fa-arrow-right"></i>
                </a>
              </div>
              <div className="item-product chatngay">
                <div className="top">
                  <div className="icon">
                    <Image
                      src="/images/icon-chatngay.png"
                      width={100}
                      height={100}
                      alt="icon-chatngay"
                    />
                  </div>
                  <p className="txt line-clamp-5">
                    Phần mềm hỗ trợ, cskh tích hợp website giúp khách hàng tương
                    tác nhanh chóng và thuận tiện.
                  </p>
                </div>
                <a href="//chatngay.com" target="_blank" className="more">
                  Xem thêm <i className="fa-solid fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="box-article">
          <div className="container">
            <h2 className="title">Có gì mới?</h2>
            <div className="content-item-article" id="js-article-new">
              {ArticlesData.list.slice(0, 1).map((articles) => (
                <div className="flex" key={articles.id}>
                  <div className="info">
                    <div className="tag-blog flex items-center">
                      <i className="icon_2024 blog"></i>
                      <span>Blog</span>
                    </div>
                    <a href={articles.url} className="name line-clamp-4">
                      {articles.title}
                    </a>
                    <div className="summary line-clamp-4">
                      {articles.summary}
                    </div>
                    <a href={articles.url} className="more">
                      Chi tiết <i className="fa-solid fa-arrow-right"></i>
                    </a>

                    <div className="info-author">
                      <div className="author flex items-center">
                        <span>Đăng bởi</span>
                        <span className="name-author">Admin</span>
                      </div>
                      <div className="time">
                        <i className="far fa-clock"></i>{" "}
                        <span>
                          {format(
                            new Date(articles.last_update * 1000),
                            "dd/MM/yyyy HH:mm"
                          )}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div className="image-right">
                    <img
                      src={`https://hurasoft8.hurasoft.com/${articles.image.large}`}
                      width={100}
                      height={100}
                      alt={articles.title}
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
