"use client";

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

interface CTABottomProps {
  userEmail?: string | null;
  isAuthenticated: boolean;
}

export default function CTABottom({ userEmail, isAuthenticated }: CTABottomProps) {
  const [mounted, setMounted] = useState(false);

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

  return (
    <div className="cta-wrapper bg-img" style={{backgroundImage: 'url("/assets/img/core-img/grid.jpg")'}} suppressHydrationWarning>
      <div className="divider"></div>
      <div className="container">
        <div className="row g-4 g-xl-5 align-items-center">
          <div className="col-12 col-lg-6 col-xl-7">
            <h2 
              className={`mb-0 ${mounted ? 'wow fadeInUp' : ''}`}
              data-wow-duration="1000ms" 
              data-wow-delay="400ms"
              suppressHydrationWarning
            >
              {isAuthenticated ? `Welcome back, ${userEmail}!` : "Start Building Your Business Now"}
            </h2>
          </div>
          <div className="col-12 col-lg-6 col-xl-5">
            <p 
              className={mounted ? 'wow fadeInUp' : ''} 
              data-wow-duration="1000ms" 
              data-wow-delay="600ms"
              suppressHydrationWarning
            >
              {isAuthenticated 
                ? "Access your dashboard to manage your profile and explore all features."
                : "Create your account today and experience the power of our authentication system."}
            </p>
            <Link 
              href={isAuthenticated ? "/dashboard" : "/auth/register"} 
              className={`btn btn-primary btn-hover-border ${mounted ? 'wow fadeInUp' : ''}`}
              data-wow-duration="1000ms" 
              data-wow-delay="800ms"
              suppressHydrationWarning
            >
              {isAuthenticated ? "Go to Dashboard" : "Get Started"} <i className="ti ti-arrow-up-right"></i>
            </Link>
          </div>
        </div>
      </div>
      <div className="divider"></div>
    </div>
  );
}

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