"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

interface HeroSectionProps {
  isAuthenticated: boolean;
}

export default function HeroSection({ isAuthenticated }: HeroSectionProps) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    
    // Initialize WOW.js after mount
    if (typeof window !== "undefined" && window.WOW) {
      new window.WOW().init();
    }
  }, []);

  return (
    <section className="hero-section" style={{backgroundImage: 'url("/assets/img/core-img/grid3.png")'}} suppressHydrationWarning>
      <div className="divider"></div>
      <div className="container">
        <div className="hero-content">
          <div className="row g-5">
            <div className="col-12 col-md-6">
              <h2 
                className={`mb-0 text-white ${mounted ? 'wow fadeInUp' : ''}`}
                data-wow-duration="1000ms" 
                data-wow-delay="400ms"
                suppressHydrationWarning
              >
                Best IT <span>Solution</span> Agency For Your Business
              </h2>
            </div>
            <div className="col-12 col-md-6 col-xl-5 offset-xl-1 col-xxl-4 offset-xxl-1">
              <p 
                className={`text-white ${mounted ? 'wow fadeInUp' : ''}`}
                data-wow-duration="1000ms" 
                data-wow-delay="600ms"
                suppressHydrationWarning
              >
                At Solvexa, we are dedicated transforming your digital aspirations into reality. With a passion for innovation and a commitment to excellence.
              </p>
              <Link 
                className={`btn border-2 btn-outline-light ${mounted ? 'wow fadeInUp' : ''}`}
                data-wow-duration="1000ms" 
                data-wow-delay="800ms" 
                href={isAuthenticated ? "/dashboard" : "/auth/register"}
                suppressHydrationWarning
              >
                {isAuthenticated ? "Go to Dashboard" : "Get Started"} <i className="ti ti-arrow-up-right"></i>
              </Link>
            </div>
          </div>
        </div>
      </div>
      <div className="divider"></div>
    </section>
  );
}

// Extend Window interface
declare global {
  interface Window {
    WOW: any;
  }
}