"use client";

import { useEffect, useState, useRef } from "react";

export default function CTASection() {
  const [mounted, setMounted] = useState(false);
  const ctaRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setMounted(true);
    
    // Initialize Jarallax manually after mount
    const initJarallax = () => {
      if (ctaRef.current && typeof window !== 'undefined' && (window as any).jarallax) {
        (window as any).jarallax(ctaRef.current, {
          speed: 0.6
        });
      }
    };

    // Delay to ensure jarallax library is loaded
    setTimeout(initJarallax, 200);

    return () => {
      // Cleanup jarallax on unmount
      if (ctaRef.current && typeof window !== 'undefined' && (window as any).jarallax) {
        (window as any).jarallax(ctaRef.current, 'destroy');
      }
    };
  }, []);

  if (!mounted) {
    // Server-side render: simple div without jarallax
    return (
      <div 
        className="cta-wrap" 
        style={{backgroundImage: 'url("/assets/img/bg-img/20.jpg")', backgroundSize: 'cover', backgroundPosition: 'center'}}
      >
        <div className="divider"></div>
        <div className="container">
          <div className="row justify-content-end">
            <div className="col-12 col-sm-11 col-md-10 col-lg-7 col-xl-6 col-xxl-5">
              <div className="cta-card">
                <div className="total-clients-wrap">
                  <div className="total-number">
                    <h3>200+</h3>
                    <p className="mb-0">Satisfied Customers</p>
                  </div>
                  <div className="clients-images">
                    <img src="/assets/img/bg-img/21.png" alt="" />
                    <img src="/assets/img/bg-img/22.png" alt="" />
                    <img src="/assets/img/bg-img/23.png" alt="" />
                    <img src="/assets/img/bg-img/24.png" alt="" />
                  </div>
                </div>
                <div className="cta-stats">
                  <div>
                    <h2>100+</h2>
                    <p className="mb-0">Global Clients</p>
                  </div>
                  <div>
                    <h2>150+</h2>
                    <p className="mb-0">Team Members</p>
                  </div>
                  <div>
                    <h2>15+</h2>
                    <p className="mb-0">Business Experience</p>
                  </div>
                  <div>
                    <h2>300+</h2>
                    <p className="mb-0">Projects Complete</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="divider"></div>
      </div>
    );
  }

  // Client-side render: with jarallax
  return (
    <div 
      ref={ctaRef}
      className="cta-wrap jarallax" 
      data-jarallax="" 
      data-speed="0.6" 
      style={{backgroundImage: 'url("/assets/img/bg-img/20.jpg")'}}
    >
      <div className="divider"></div>
      <div className="container">
        <div className="row justify-content-end">
          <div className="col-12 col-sm-11 col-md-10 col-lg-7 col-xl-6 col-xxl-5">
            <div className="cta-card">
              <div className="total-clients-wrap">
                <div className="total-number">
                  <h3>200+</h3>
                  <p className="mb-0">Satisfied Customers</p>
                </div>
                <div className="clients-images">
                  <img src="/assets/img/bg-img/21.png" alt="" />
                  <img src="/assets/img/bg-img/22.png" alt="" />
                  <img src="/assets/img/bg-img/23.png" alt="" />
                  <img src="/assets/img/bg-img/24.png" alt="" />
                </div>
              </div>
              <div className="cta-stats">
                <div>
                  <h2>100+</h2>
                  <p className="mb-0">Global Clients</p>
                </div>
                <div>
                  <h2>150+</h2>
                  <p className="mb-0">Team Members</p>
                </div>
                <div>
                  <h2>15+</h2>
                  <p className="mb-0">Business Experience</p>
                </div>
                <div>
                  <h2>300+</h2>
                  <p className="mb-0">Projects Complete</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="divider"></div>
    </div>
  );
}