"use client";

import { useTheme } from "next-themes";
import { ShootingStars } from "./ui/shooting-stars";
import { SparklesCore } from "./ui/sparkles";
import { StarsBackground } from "./ui/stars-background";

const WelcomeSection = () => {
  const { theme } = useTheme();
  return (
    <section className="h-screen w-full dark:bg-black flex flex-col items-center justify-center overflow-hidden">
      <h1
        className="md:text-7xl text-3xl lg:text-9xl font-bold text-center text-white relative z-20
          bg-clip-text text-transparent bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white"
      >
        ATOM
      </h1>
      <div className="w-[40rem] h-40 relative">
        {/* Gradients */}
        <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-sm" />
        <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4" />
        <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-sm" />
        <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px w-1/4" />

        {/* Core component */}
        <SparklesCore
          background="transparent"
          minSize={0.4}
          maxSize={1}
          particleDensity={1200}
          className="w-full h-full"
          particleColor="#FFFFFF"
        />

        <h3 className="mt-[-9rem] pb-1 md:text-xl text-sm lg:text-3xl bg-clip-text text-transparent bg-gradient-to-b from-gray-800 to-gray-500 dark:from-neutral-200 dark:to-neutral-600 text-center font-sans font-bold relative z-20">
          Your one-stop shop
          <br />
          for gravity-free design...
        </h3>

        {theme === "dark" && (
          /* Radial Gradient to prevent sharp edges */
          <div className="absolute inset-0 w-full h-full bg-black [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]"></div>
        )}
      </div>
      <ShootingStars minSpeed={3} maxSpeed={12} />
      <StarsBackground starDensity={0.0005} />
    </section>
  );
};

export default WelcomeSection;