"use client";

import React, { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    const b_did = localStorage.getItem("b_did");
    if (!b_did) {
      const temDid =
        Date.now() + "_" + Math.random().toString(36).substring(2, 9);
      localStorage.setItem("b_did", temDid);
    }

    //访问量埋点
    const handleEvent = async () => {
      const userId = localStorage.getItem("b_did");
      await fetch("/api/Raven_IQ_test_visit/create", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          user_id: userId,
          v_type: 0,
          ct: Math.floor(Date.now() / 1000),
        }),
      });
    };
    handleEvent();
  }, []);

  return (
    <main className="flex flex-col flex-1 bg-[url('/svg/background.svg')] max-w-screen-sm w-full p-4">
      <div className="flex flex-col gap-2">
        <h1 className="text-3xl font-bold text-center text-white">
          瑞文国际标准智商测试
        </h1>
        <div className="flex flex-row items-center w-full justify-center">
          <img className="w-10" src="/svg/light.svg" alt="" />
          <p className="text-sm font-medium text-white text-center">
            每年近1000万人参与
            <br />
            被广泛应用于智力分析和职业选择等领域
          </p>
          <img className="w-10" src="/svg/cube.svg" alt="" />
        </div>
      </div>
      <div className="flex flex-col items-center py-4 px-8 mx-auto rounded-2xl bg-white shadow-xl shadow-black my-16">
        <img className="w-24" src="/svg/paper.svg" alt="" />
        <p className="text-2xl font-bold">36题</p>
        <p className="text-base text-purple-500">5-8分钟</p>
      </div>
      <a
        className="flex items-center justify-center w-full py-2 border-2 border-black rounded-full bg-yellow-200 text-2xl font-bold"
        href="/iqtest"
      >
        立即开始测试
      </a>
    </main>
  );
}