import { useEffect } from "react";
import HeroCarousel from "../../components/hero/HeroCarousel";
import PortfolioGrid from "../../components/portfolio/PortfolioGrid";
import TradingGraph from "../../components/trading/TradingGraph";
import DonationShop from "../../components/donate/DonationShop";
import SkillsSection from "../../components/skills/SkillsSection";
import HostingSecuritySection from "../../components/hosting/HostingSecuritySection";

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>
      <HeroCarousel />
      <div className="divider" />
      <PortfolioGrid />
      <div className="divider" />
      <TradingGraph />
      <div className="divider" />
      <DonationShop />
      <div className="divider" />
      <SkillsSection />
      <div className="divider" />
      <HostingSecuritySection />
    </main>
  );
}