'use client'; // If this component is client-side only

import React from "react";
import Slider from "react-slick";
import Link from 'next/link';
import { useTranslation } from 'next-i18next';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const settings = {
    dots: true,
    arrows: false,
    speed: 1200,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 2500,
    fade: true
};

const Hero = () => {
    const { t } = useTranslation('homeHero'); // Use 'home' namespace

    return (
        <section className="wpo-hero-slider">
            <div className="hero-container">
                <div className="hero-wrapper">
                    <Slider {...settings}>
                        <div className="hero-slide">
                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-1.webp)` }}>
                                <div className="container-fluid">
                                    <div className="slide-content">
                                        <div data-swiper-parallax="300" className="slide-title">
                                            <h2>{t('hero.slide1.title')}</h2>
                                        </div>
                                        <div data-swiper-parallax="400" className="slide-text">
                                            <p>{t('hero.slide1.text')}</p>
                                        </div>
                                        <div className="clearfix"></div>
                                        <div className="slide-btns">
                                            <Link href="/about" className="theme-btn">{t('hero.slide1.button')}</Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="hero-slide">
                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-2.webp)` }}>
                                <div className="container-fluid">
                                    <div className="slide-content">
                                        <div data-swiper-parallax="300" className="slide-title">
                                            <h2>{t('hero.slide2.title')}</h2>
                                        </div>
                                        <div data-swiper-parallax="400" className="slide-text">
                                            <p>{t('hero.slide2.text')}</p>
                                        </div>
                                        <div className="clearfix"></div>
                                        <div className="slide-btns">
                                            <Link href="/our-approach" className="theme-btn">{t('hero.slide2.button')}</Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="hero-slide">
                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-3.webp)` }}>
                                <div className="container-fluid">
                                    <div className="slide-content">
                                        <div data-swiper-parallax="300" className="slide-title">
                                            <h2>{t('hero.slide3.title')}</h2>
                                        </div>
                                        <div data-swiper-parallax="400" className="slide-text">
                                            <p>{t('hero.slide3.text')}</p>
                                        </div>
                                        <div className="clearfix"></div>
                                        <div className="slide-btns">
                                            <Link href="/services" className="theme-btn">{t('hero.slide3.button')}</Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="hero-slide">
                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-4.webp)` }}>
                                <div className="container-fluid">
                                    <div className="slide-content">
                                        <div data-swiper-parallax="300" className="slide-title">
                                            <h2>{t('hero.slide4.title')}</h2>
                                        </div>
                                        <div data-swiper-parallax="400" className="slide-text">
                                            <p>{t('hero.slide4.text')}</p>
                                        </div>
                                        <div className="clearfix"></div>
                                        <div className="slide-btns">
                                            <Link href="/contact" className="theme-btn">{t('hero.slide4.button')}</Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Slider>
                </div>
            </div>
            <div className="hero-shape">
                <svg viewBox="0 0 1920 193" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0L960 193L1920 0V193H0V0Z" fill="white" />
                </svg>
            </div>
        </section>
    );
};

export default Hero;