import Image from 'next/image';
import Link from 'next/link';
import { headers } from 'next/headers';
import { getCountryByCode } from '@/lib/countries';
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 FeaturedCategoriesSection from '@/components/sections/FeaturedCategoriesSection';

interface HomePageProps {
  params: Promise<{
    locale: string;
  }>;
}

export default async function HomePage({ params }: HomePageProps) {
  const { locale } = await params;
  
  // Get country info from headers
  const headersList = await headers();
  const countryCode = headersList.get('x-country-code') || 'LU';
  const country = getCountryByCode(countryCode);

  return (
    <>
      {/* Page-specific CSS */}
      <link rel="stylesheet" href="/assets/css/home.css" />
      
      {/* Hero wrapper */}
      <section className="hero-wrapper position-relative pt-80">
        <div className="bg-shap position-absolute bottom-0 start-0 z-3 w-100">
          <img src="/assets/image/banner-shap.svg" alt="shap" />
        </div>
        <div className="container z-2">
          <div className="row">
            <div className="col-12 col-md-12">
              <div className="hero-content">
                <h1>
                  <span className="primary-color">Post Your project</span> For
                  Free & Hire Top <span className="secondary-text">Talent</span> in Min!
                </h1>
                <p>
                  Connect with Experts: Within minutes, you'll start receiving bids from top
                  freelancers who have the skills and experience you need.
                </p>
                <div className="button-group justify-content-center">
                  <Link href={`/${locale}/client/post-project`} className="custom-btn primary-fill rounded-pill btn-lg">
                    Post A Project                         
                  </Link>
                  <Link href={`/${locale}/freelancers`} className="custom-btn secondary-outline rounded-pill btn-lg">
                    Hire 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">
                  <img src="/assets/image/home/proofilecard3.svg" alt="proofilecard1" />                            
                  <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">
                  <img src="/assets/image/home/proofilecard1.svg" alt="proofilecard2" />
                  <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">
                  <img src="/assets/image/home/proofilecard2.svg" alt="proofilecard3" />
                  <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">
                    <img src="/assets/image/heroimg01.svg" className="img-fluid" alt="" />
                  </div>
                  <div className="animi-icon icon-1">
                    <img src="/assets/image/home/plan-1.svg" alt="plan-1.svg" />
                  </div>
                  <div className="animi-icon icon-2">
                    <img src="/assets/image/home/plan-2.svg" alt="plan-2.svg" />
                  </div>
                  <div className="animi-icon icon-3">
                    <img src="/assets/image/home/plan-3.svg" alt="plan-3.svg" />
                  </div>
                  <div className="animi-chat01 animi-chat aniamtion-key-1">
                    <div className="icon">
                      <img src="/assets/image/animichat03.png" alt="" />
                    </div>
                    <div className="content">
                      <h5>Posted a project</h5>
                      <span>5 min ago</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Categories */}
      <FeaturedCategoriesSection locale={locale} />

      {/* Hiring */}
      <section className="hiring-wrapper pt-120">
        <div className="container">
          <div className="hiring-inner">
            <div className="content">
              <h3>
                With <span className="primary-text">Smile24,</span> your next great hire is just a
                few clicks away.
              </h3>
              <p>
                Start now & experience the fastest way to find and hire the best freelance talent available!
              </p>
              <div className="button-group d-flex">
                <Link href={`/${locale}/client/post-project`} className="custom-btn primary-fill">
                  Post a project
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Project step */}
      <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">
                    <img src="/assets/image/step01.png" className="img-fluid" alt="" />
                  </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">
                    <img src="/assets/image/step02.png" className="img-fluid" alt="" />
                  </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">
                    <img src="/assets/image/step03.png" className="img-fluid" alt="" />
                  </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">
                    <img src="/assets/image/step04.svg" className="img-fluid" alt="" />
                  </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>
          <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>

      {/* Feedback section */}
      <section className="py-100 feedback-sec">
        <div className="container">          
          <div className="row">
            <div className="col-12 col-sm-6 col-md-4">
              <div className="feedback-item">
                <div className="feedback-icon">
                  <img src="/assets/image/feedback-1.svg" alt="feedback-1" />
                </div>
                <div className="feedback-content">
                  <h3>
                    72k<div className="primary-text">+</div>
                  </h3>
                  <p>Freelancers finding work they love</p>
                </div>
              </div>
            </div>
            <div className="col-12 col-sm-6 col-md-4">
              <div className="feedback-item">
                <div className="feedback-icon">
                  <img src="/assets/image/feedback-2.svg" alt="feedback-2" />
                </div>
                <div className="feedback-content">
                  <h3>
                    1M<div className="primary-text">+</div>
                  </h3>
                  <p>Users connected through our growing community</p>
                </div>
              </div>
            </div>
            <div className="col-12 col-sm-6 col-md-4">
              <div className="feedback-item">
                <div className="feedback-icon">
                  <img src="/assets/image/feedback-3.svg" alt="feedback-3" />
                </div>
                <div className="feedback-content">
                  <h3>
                    650k<div className="primary-text">+</div>
                  </h3>
                  <p>Projects posted and successfully completed</p>
                </div>
              </div>
            </div>
          </div>  
        </div>
      </section>

      {/* Benefits */}
      <BenefitsSection />

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

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

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

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