Hero

"use client";

import React, { useEffect } from "react";
import Hero from "@/components/ui/hero";
import { useHeroAnimation, type HeroData } from "@/lib/utils";


export default function HeroPage() {
  // Business logic - Animation state management
  const {
    isLoaded,
    currentWord,
    setCurrentWord,
    mousePosition,
    isNight,
    toggleMode,
    cycleWords,
  } = useHeroAnimation();

  // Hero data configuration
  const heroData: HeroData = {
    mode: isNight ? "night" : "day",
    badge: {
      text: isNight ? "Under the Stars" : "Welcome to the Future",
      icon: true,
    },
    title: {
      prefix: isNight ? "Dream The" : "Build The",
      animatedWords: ["Innovation", "Excellence", "Future", "Success"],
    },
    subtitle: "Transform your ideas into reality with cutting-edge technology and innovative solutions",
    buttons: {
      primary: {
        text: "Get Started",
        href: "#get-started",
      },
      secondary: {
        text: "Learn More",
        href: "#learn-more",
      },
    },
    stats: [
      { label: "Active Users", value: "10K+" },
      { label: "Projects", value: "500+" },
      { label: "Success Rate", value: "99%" },
      { label: "Countries", value: "50+" },
    ],
    space: {
      showPlanets: true,
      showAstronauts: true,
      showStars: true,
      showShootingStars: true,
      showConstellations: true,
      showMoon: true,
      showAurora: true,
      showISS: true,
      planets: [
        {
          type: "earth",
          position: { top: "12%", left: "10%" },
          size: "medium",
          orbitSpeed: "slow",
        },
        {
          type: "mars",
          position: { bottom: "18%", right: "15%" },
          size: "small",
          orbitSpeed: "medium",
        },
        {
          type: "jupiter",
          position: { bottom: "15%", left: "12%" },
          size: "large",
          orbitSpeed: "fast",
        },
        {
          type: "saturn",
          position: { top: "18%", right: "12%" },
          size: "medium",
          orbitSpeed: "reverse",
        },
      ],
      astronauts: [
        {
          id: "astronaut-1",
          type: "floating",
          position: { top: "30%", right: "12%" },
          animation: "float",
        },
        {
          id: "astronaut-2",
          type: "spacewalk",
          position: { top: "55%", left: "10%" },
          animation: "drift",
        },
        {
          id: "astronaut-3",
          type: "distant",
          position: { bottom: "25%", left: "20%" },
          animation: "slow",
        },
      ],
    },
    particles: {
      enabled: true,
      count: 30,
    },
    background: {
      gradient: "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900",
      darkGradient: "bg-gradient-to-b from-slate-950 via-indigo-950 to-purple-950",
      showGrid: true,
      showOrbs: true,
    },
  };

  // Event handlers
  const handlePrimaryClick = () => {
    console.log("Primary button clicked!");
    // Add your navigation or action logic here
  };

  const handleSecondaryClick = () => {
    console.log("Secondary button clicked!");
    // Add your navigation or action logic here
  };

  // Word cycling effect
  useEffect(() => {
    const cleanup = cycleWords(heroData.title.animatedWords);
    return cleanup;
  }, [cycleWords, heroData.title.animatedWords]);

  return (
    <Hero
      data={heroData}
      isLoaded={isLoaded}
      currentWord={currentWord}
      mousePosition={mousePosition}
      isNight={isNight}
      onToggleMode={toggleMode}
      onPrimaryClick={handlePrimaryClick}
      onSecondaryClick={handleSecondaryClick}
    />
  );
}