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";
import HomeBanner from "@/components/sections/HomeBanner";
import { getTranslations } from "next-intl/server";

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);

  const t = await getTranslations();

  return (
    <>
      {/* Page-specific CSS */}
      <link rel="stylesheet" href="/assets/css/home.css" />
      <HomeBanner locale={locale} />
      {/* Hero wrapper */}

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

      {/* Hiring */}
      <section className="hiring-wrapper pt-120">
        <div className="container">
          <div className="hiring-inner">
            <div className="content">
              <h3>
                {t("home.hiring.with")}{" "}
                <span className="primary-text">{t("home.name")},</span>{" "}
                {t("home.hiring.description")}
              </h3>
              <p>{t("home.hiring.cta")}</p>
              <div className="button-group d-flex">
                <Link
                  href={`/${locale}/client/post-project`}
                  className="custom-btn primary-fill"
                >
                  {t("home.post_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>
                    {t("home.project_step.title")}{" "}
                    <span className="primary-text">
                      {t("home.project_step.subtitle")}
                    </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>{t("home.project_step.step1.message")}</h4>
                    <p>
                      {t("home.project_step.step1.description")}{" "}
                      <span className="secondary-text">{t("home.name")}</span>{" "}
                      {t("home.project_step.step1.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>{t("home.project_step.step2.message")}</h4>
                    <p>
                      {t("home.project_step.step2.description")}{" "}
                      <span className="secondary-text">{t("home.name")}</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>{t("home.project_step.step3.message")}</h4>
                    <p>{t("home.project_step.step3.description")} </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>{t("home.project_step.step4.message")}</h4>
                    <p>{t("home.project_step.step4.description")} </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"
            >
              {t("home.post_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>
                    {t("home.feedback.first.metric")}
                    <div className="primary-text">+</div>
                  </h3>
                  <p>{t("home.feedback.first.description")}</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>
                    {t("home.feedback.second.metric")}
                    <div className="primary-text">+</div>
                  </h3>
                  <p>{t("home.feedback.second.description")}</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>
                    {t("home.feedback.third.metric")}
                    <div className="primary-text">+</div>
                  </h3>
                  <p>{t("home.feedback.third.description")}</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} />
    </>
  );
}
