"use client";

import React, { useEffect } from "react";
import { setCookie } from "cookies-next";
import { useSearchParams } from "next/navigation";

export default function Home() {
  const searchParams = useSearchParams();
  useEffect(() => {
    const clickId = searchParams.get("clickid");
    setCookie("clickid", clickId);
    const b_did = localStorage.getItem("b_did");
    if (b_did) return;
    const temDid =
      Date.now() + "_" + Math.random().toString(36).substring(2, 9);
    localStorage.setItem("b_did", temDid);
  }, []);

  useEffect(() => {
    const handleEvent = async () => {
      const clickId = searchParams.get("clickid");
      await fetch("/event/v2/conversion", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          event_type: "page_view",
          context: {
            ad: {
              callback: clickId,
            },
          },
          timestamp: new Date().getTime(),
        }),
      });
    };
    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-4">
        <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>
  );
}