'use client';

import Link from 'next/link';
import Image from 'next/image';
import Footer from '@/components/Footer';
import BenefitsSection from '@/components/sections/BenefitsSection';
import CtaSection from '@/components/sections/CtaSection';
import FreelancersSection from '@/components/sections/FreelancersSection';
import PostProjectSection from '@/components/sections/PostProjectSection';
import { useSession } from 'next-auth/react';
type ButtonAddedProps = {
  locale: string;
};

const ButtonAdded: React.FC<ButtonAddedProps> = ({ locale }) => {
    const { data: session, status } = useSession();

  return (
    <>
      {/* Hero Section */}
      <section className="hero-wrapper position-relative pt-80 d-none">
        <div className="bg-shap position-absolute bottom-0 start-0 z-3 w-100">
          <Image src="/assets/image/banner-shap.svg" alt="shape" width={1920} height={200} />
        </div>
        <div className="container z-2">
          <div className="row">
            <div className="col-12 col-md-12">
              <div className="hero-content">
                <h1>
                  Whether <span className="primary-color">You Hire</span> or{' '}
                  <span className="secondary-text">Get Hired</span>, It Starts Here
                </h1>
                <p>From posting jobs to getting paid, Smile24 makes every step simple for everyone.</p>
                <div className="button-group justify-content-center">
                  <Link href={`/${locale}/signup`} className="custom-btn primary-fill rounded-pill btn-lg">
                    For Clients
                  </Link>
                  <Link href={`/${locale}/signup`} className="custom-btn secondary-outline rounded-pill btn-lg">
                    For Freelancers
                  </Link>
                </div>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12 col-md-12">
              <div className="w-100 position-relative hero-image-outer">
                <div className="animi-card an-1">
                  <Image src="/assets/image/home/proofilecard3.svg" alt="profile card 1" width={260} height={180} />
                  <div className="animi-chat02 animi-chat">
                    <div className="content">
                      <h5>
                        I'll do this task <br />
                        in just $50....
                        <span>3 min ago</span>
                      </h5>
                    </div>
                  </div>
                </div>
                <div className="animi-card an-2">
                  <Image src="/assets/image/home/proofilecard1.svg" alt="profile card 2" width={260} height={180} />
                  <div className="animi-chat03 animi-chat">
                    <div className="content">
                      <h5>
                        I can do this task
                        <br />
                        For $10....
                        <span>3 min ago</span>
                      </h5>
                    </div>
                  </div>
                </div>
                <div className="animi-card an-3">
                  <Image src="/assets/image/home/proofilecard2.svg" alt="profile card 3" width={260} height={180} />
                  <div className="animi-chat03 animi-chat">
                    <div className="content">
                      <h5>
                        I can do this task
                        <br />
                        For $10....
                        <span>3 min ago</span>
                      </h5>
                    </div>
                  </div>
                </div>
                <div className="hero-image">
                  <div className="user-img">
                    <Image src="/assets/image/heroimg01.svg" className="img-fluid" alt="hero image" width={407} height={500} />
                  </div>
                  <div className="animi-icon icon-1">
                    <Image src="/assets/image/home/plan-1.svg" alt="plan 1" width={44} height={44} />
                  </div>
                  <div className="animi-icon icon-2">
                    <Image src="/assets/image/home/plan-2.svg" alt="plan 2" width={44} height={44} />
                  </div>
                  <div className="animi-icon icon-3">
                    <Image src="/assets/image/home/plan-3.svg" alt="plan 3" width={44} height={44} />
                  </div>
                  <div className="animi-chat01 animi-chat aniamtion-key-1">
                    <div className="icon">
                      <Image src="/assets/image/animichat03.png" alt="chat avatar" width={50} height={50} />
                    </div>
                    <div className="content">
                      <h5>Posted a project</h5>
                      <span>5 min ago</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* New Hero Section */}
      <section className="hero-wrapper position-relative  pt-80">
        <div className="bg-shap position-absolute bottom-0 start-0 z-3 w-100">
            <Image src="/assets/image/banner-shap.svg" alt="shape" width={1920} height={200} />
        </div>
        <div className="container z-2">
            <div className="row">
                <div className="col-12 col-md-12">
                    <div className="hero-content">
                        <h1>Whether <span className="primary-color">You Hire</span> or <span className="secondary-text">Get Hired</span>, It Starts Here
                        </h1>
                        <p>From posting jobs to getting paid, Smile24 makes every step simple for everyone.</p>
                        <div className="button-group justify-content-center">
                            <Link href={`/${locale}/login`} className="custom-btn primary-fill rounded-pill btn-lg">
                              For Clients
                            </Link>
                            <Link href={`/${locale}/signup`} className="custom-btn secondary-outline rounded-pill btn-lg">
                              For Freelancers
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col-12 col-md-12">
                    <div className="w-100 position-relative hero-image-outer">
                        <div className="sub-hero-image-inner">
                            <div className="hero-image how-it-work-hero-image">
                                <div className="user-img">
                                    <Image src="/assets/image/heroimg03.png" className="img-fluid" alt="" width={300} height={200} />
                                </div>
                                <div className="animi-icon icon-1">
                                    <Image src="/assets/image/home/plan-4.svg" alt="plan-4.svg" width={240} height={240} />
                                </div>
                                <div className="animi-chat01 animi-chat aniamtion-key-1">
                                    <div className="icon">
                                        <Image src="/assets/image/animichat06.png" alt="" width={50} height={50} />
                                    </div>
                                    <div className="content">
                                        <h5>I’ll do this task <br /> in just....</h5>
                                        <span>
                                            5 min ago
                                        </span>
                                    </div>
                                </div>
                            </div>
    
                            <div className="hero-image how-it-work-hero-image2">
                                <div className="user-img">
                                    <Image src="/assets/image/heroimg02.png" className="img-fluid" alt="" width={300} height={200} />
                                </div>
                                <div className="animi-chat01 animi-chat aniamtion-key-1">
                                    <div className="icon">
                                        <Image src="/assets/image/jessicapearson.png" alt="" width={50} height={50} />
                                    </div>
                                    <div className="content">
                                        <h5>Posted a project</h5>
                                        <span>
                                            5 min ago
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        

                    </div>
                </div>
            </div>
        </div>
      </section>

      {/* Project Steps Section */}
      <section className="project-step-wrapper py-120">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="head-content">
                <div className="heading-box">
                  <h2>
                    Get The Best talent in <span className="primary-text">just few Steps</span>
                  </h2>
                </div>
              </div>
              <div className="project-step">
                <div className="step-item">
                  <div className="step-img">
                    <Image src="/assets/image/step01.png" className="img-fluid" alt="step 1" width={172} height={172} />
                  </div>
                  <div className="step-content">
                    <h4>Simply just Post the project</h4>
                    <p>
                      Just post the project details with <span className="secondary-text">Smile24</span> easy steps.
                    </p>
                  </div>
                </div>
                <div className="step-item">
                  <div className="step-img">
                    <Image src="/assets/image/step02.png" className="img-fluid" alt="step 2" width={172} height={172} />
                  </div>
                  <div className="step-content">
                    <h4>Get Best Offers from Freelancer</h4>
                    <p>
                      Get best offers from top professionals Talents on{' '}
                      <span className="secondary-text">Smile24</span>.
                    </p>
                  </div>
                </div>
                <div className="step-item">
                  <div className="step-img">
                    <Image src="/assets/image/step03.png" className="img-fluid" alt="step 3" width={172} height={172} />
                  </div>
                  <div className="step-content">
                    <h4>Just pick the best talent</h4>
                    <p>Just Pick the best freelancer for your task in the may options.</p>
                  </div>
                </div>
                <div className="step-item">
                  <div className="step-img">
                    <Image src="/assets/image/step04.svg" className="img-fluid" alt="step 4" width={172} height={172} />
                  </div>
                  <div className="step-content">
                    <h4>Direct Payment Transfer</h4>
                    <p>The money goes straight from client to freelancer — we don't stay in the middle.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

         { session && session?.user?.role == "CLIENT" && (
            <>        
                <div className="post-project-btn button-group justify-content-center d-flex">
                    <Link href={`/${locale}/client/post-project`} className="custom-btn secondary-btn">
                        Post A Project
                        <svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 8.5L23 8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                        <path d="M16 1.5L23 8.5L16 15.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                    </Link>
                </div>
            </>
        )}

          
        </div>
      </section>

      {/* Benefits Section */}
      <BenefitsSection />

      {/* CTA Section */}
      <CtaSection locale={locale} />

      {/* Freelancers Section */}
      <FreelancersSection locale={locale} />

      {/* Post Project Section */}
      <PostProjectSection locale={locale} />

      {/* Footer */}
      <Footer locale={locale} />
  
    </>
  )
}

export default ButtonAdded;