"use client";

import React, { useState, useEffect } from "react";
import InOtherApp from "@/components/InOtherApp";
import Image from "next/image";
import download_lefttop from "@/public/images/download_lefttop.png";
import download_righttop from "@/public/images/download_righttop.png";
import download_rightmedium from "@/public/images/download_rightmedium.png";
import download_leftbottom from "@/public/images/download_leftbottom.png";
import download_rightbottom from "@/public/images/download_rightbottom.png";
import slogan from "@/public/images/slogan.png";
import qrcode from "@/public/images/qrcode.png";
import Footer from "@/components/Footer";
import Link from "next/link";

export default function Home() {
  const [deviceType, setDeviceType] = useState("");
  useEffect(() => {
    const userAgent = navigator.userAgent;
    //区分设备类型
    if (/Android/i.test(userAgent)) {
      setDeviceType("Android");
    } else if (/iPhone|iPad|iPod/i.test(userAgent)) {
      setDeviceType("ios");
    } else {
      setDeviceType("pc");
    }
  }, []);
  return (
    <section className="flex flex-col container">
      <InOtherApp />
      <div className="absolute top-0 left-0 w-full h-full z-0">
        <Image
          className="absolute top-0 left-0 w-36"
          src={download_lefttop}
          alt=""
        />
        <Image
          className="absolute top-10 right-0 w-28"
          src={download_righttop}
          alt=""
        />
        <Image
          className="absolute top-64 right-0 w-24"
          src={download_rightmedium}
          alt=""
        />
        <Image
          className="absolute bottom-[17rem] left-0 w-32"
          src={download_leftbottom}
          alt=""
        />
        <Image
          className="absolute bottom-0 right-0 w-[21rem]"
          src={download_rightbottom}
          alt=""
        />
      </div>
      <div className="flex flex-col flex-1 py-16 items-center justify-center gap-10 z-10">
        <h1 className="text-center text-white font-medium text-2xl px-10">
          多塔传媒
          <br />
          网红达人助力产品营销，定制广告方案
        </h1>
        <div>
          <p className="text-white text-center mb-4 font-medium text-2xl">
            推荐KOL
          </p>
          <div className="flex flex-row flex-wrap justify-center gap-2">
            <Link
              href="/253020"
              className="flex flex-col w-32 rounded-lg overflow-hidden"
            >
              <img
                className="w-full aspect-square object-cover"
                src="https://file.wishpaldev.tech/imgprod/dd/e8/bf6d-f643-4853-86ab-9df91ad4e191"
                alt=""
              />
              <p className="text-white bg-[#FFFFFF1A] text-center font-medium py-1">
                震震昊看世界
              </p>
            </Link>
            <Link
              href="/724471"
              className="flex flex-col w-32 rounded-lg overflow-hidden"
            >
              <img
                className="w-full aspect-square object-cover"
                src="https://file.wishpaldev.tech/imgprod/64/81/4605-2c65-4be9-8688-7ad4d9a0092d"
                alt=""
              />
              <p className="text-white bg-[#FFFFFF1A] text-center font-medium py-1">
                白仔游世界🌸
              </p>
            </Link>
            <Link
              href="/898644"
              className="flex flex-col w-32 rounded-lg overflow-hidden"
            >
              <img
                className="w-full aspect-square object-cover"
                src="https://file.wishpaldev.tech/imgprod/88/db/370c-a850-4d2c-a7b4-950c9a722d86"
                alt=""
              />
              <p className="text-white bg-[#FFFFFF1A] text-center font-medium py-1">
                Quyen
              </p>
            </Link>
            <Link
              href="/442668"
              className="flex flex-col w-32 rounded-lg overflow-hidden"
            >
              <img
                className="w-full aspect-square object-cover"
                src="https://file.wishpaldev.tech/imgprod/f7/b8/fc3c-0279-407a-828c-8b1b92a0b9a4"
                alt=""
              />
              <p className="text-white bg-[#FFFFFF1A] text-center font-medium py-1">
                Kasia
              </p>
            </Link>
          </div>
        </div>
      </div>
      <Footer />
    </section>
  );
}