import { useEffect } from "react";
import PortfolioGrid from "./components/Services/Services";
import TradingGraph from "./components/Services/TradingGraph";
import DonationShop from "./components/donate/DonationShop";
import ContactMeForm from "../../components/home/ContactMe/ContactMeForm";
import Services from "../../components/home/services/Services";


export default function Home() {
  // Optional: keep spark effect for fun
  useEffect(() => {
    const handleClick = (event: MouseEvent) => {
      const spark = document.createElement("div");
      spark.className = "spark-cursor";
      document.body.appendChild(spark);
      spark.style.top = `${event.pageY}px`;
      spark.style.left = `${event.pageX}px`;
      for (let i = 0; i < 8; i++) {
        const span = document.createElement("span");
        span.style.transform = `rotate(${i * 45}deg)`;
        spark.appendChild(span);
      }
      setTimeout(() => {
        spark.querySelectorAll("span").forEach((s) => {
          (s as HTMLElement).classList.add("animate");
        });
      }, 10);
      setTimeout(() => spark.remove(), 1000);
    };
    document.body.addEventListener("click", handleClick);
    return () => document.body.removeEventListener("click", handleClick);
  }, []);

  return (
    <main>
      <Services />
      <div className="divider" />
      <PortfolioGrid />
      <div className="divider" />
      <TradingGraph />
      <div className="divider" />
      <DonationShop />
      <div className="divider" />
      <ContactMeForm />
    </main>
  );
}
