"use client";

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

interface AboutSectionProps {
  isAuthenticated: boolean;
}

export default function AboutSection({ isAuthenticated }: AboutSectionProps) {
  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="about-section" suppressHydrationWarning>
      <div className="right-shape">
        <img src="/assets/img/core-img/shape.png" alt="" />
      </div>
      <div className="divider"></div>
      <div className="container">
        <div className="row g-5 align-items-center">
          <div className="col-12 col-lg-6">
            <div className="about-content ps-md-4">
              <div className="section-heading">
                <span className="sub-title">About Us</span>
                <h2 className="mb-4">We Are About to Witness Something Great</h2>
                <p className="mb-5">
                  Empower your business with our cutting-edge IT services and unmatched support, tailored for transformative growth and harness innovation.
                </p>
                <ul className="about-list ps-0 d-flex flex-column gap-3 list-unstyled mb-5">
                  <li className="d-flex align-items-center gap-2">
                    <div className="icon"><i className="ti ti-arrow-right"></i></div>
                    <h5 className="mb-0">Complete authentication system with email verification</h5>
                  </li>
                  <li className="d-flex align-items-center gap-2">
                    <div className="icon"><i className="ti ti-arrow-right"></i></div>
                    <h5 className="mb-0">Social login with Google and GitHub integration</h5>
                  </li>
                  <li className="d-flex align-items-center gap-2">
                    <div className="icon"><i className="ti ti-arrow-right"></i></div>
                    <h5 className="mb-0">Secure JWT token management and refresh</h5>
                  </li>
                </ul>
                <Link className="btn btn-primary" href={isAuthenticated ? "/dashboard" : "/auth/register"}>
                  {isAuthenticated ? "View Dashboard" : "Get Started"} <i className="ti ti-arrow-up-right"></i>
                </Link>
              </div>
            </div>
          </div>
          <div className="col-12 col-lg-6">
            <div 
              className={mounted ? "about-video-content wow fadeInUp" : "about-video-content"} 
              data-wow-duration="1000ms" 
              data-wow-delay="500ms"
              suppressHydrationWarning
            >
              <img src="/assets/img/bg-img/25.jpg" alt="" />
              <div className="play-video-btn video-btn" data-video="https://youtu.be/4GUFkrHvZdE">
                <div className="icon"><i className="ti ti-player-play-filled"></i></div>
              </div>
            </div>
            <div 
              className={mounted ? "about-images d-flex px-5 mt-5 wow fadeInUp" : "about-images d-flex px-5 mt-5"} 
              data-wow-duration="1000ms" 
              data-wow-delay="800ms"
              suppressHydrationWarning
            >
              <div>
                <img className="w-100" src="/assets/img/bg-img/26.jpg" alt="" />
              </div>
              <div>
                <svg className="rotatingImage" xmlns="http://www.w3.org/2000/svg" width={70} height={70} viewBox="0 0 70 70" fill="none">
                  <path d="M35 0L46.1369 23.8631L70 35L46.1369 46.1369L35 70L23.8631 46.1369L0 35L23.8631 23.8631L35 0Z" fill="#222222" />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="divider"></div>
    </section>
  );
}

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