"use client";

import Image from "next/image";
import Link from "@/app/components/LocaleLink";

import { useLanguage } from "@/app/context/LanguageContext";

export default function Hero() {
  const { t } = useLanguage();

  return (

    <section className="hero">
      <div className="container">
        <div className="row align-items-center">
          <div className="col-lg-6">
            <h1>
              {t("hero.titleLine1")}<br />
              {t("hero.titleLine2")}
            </h1>

            <p>
              {t("hero.subtitlePrefix")}
              <span>{t("hero.verifiedCount")}</span> {t("hero.subtitleSuffix")}
            </p>

            <div className="mt-5 d-flex flex-wrap gap-3">
              <Link href="/chat-with-astrologer" className="btn-chat read-more">
                <svg
                  width="19"
                  height="19"
                  viewBox="0 0 19 19"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M3.74998 11.2499H11.2499V9.74998H3.74998V11.2499ZM3.74998 8.24994H15.2499V6.74998H3.74998V8.24994ZM3.74998 5.24995H15.2499V3.74998H3.74998V5.24995ZM0 18.5384V1.80768C0 1.30255 0.174998 0.874992 0.524995 0.524995C0.874992 0.174998 1.30255 0 1.80768 0H17.1922C17.6974 0 18.1249 0.174998 18.4749 0.524995C18.8249 0.874992 18.9999 1.30255 18.9999 1.80768V13.1922C18.9999 13.6974 18.8249 14.1249 18.4749 14.4749C18.1249 14.8249 17.6974 14.9999 17.1922 14.9999H3.53843L0 18.5384ZM2.89998 13.5H17.1922C17.2692 13.5 17.3397 13.4679 17.4038 13.4038C17.4679 13.3397 17.5 13.2692 17.5 13.1922V1.80768C17.5 1.73075 17.4679 1.66023 17.4038 1.59612C17.3397 1.53202 17.2692 1.49996 17.1922 1.49996H1.80768C1.73075 1.49996 1.66023 1.53202 1.59612 1.59612C1.53202 1.66023 1.49996 1.73075 1.49996 1.80768V14.8846L2.89998 13.5ZM1.49996 13.5V1.80768C1.49996 1.73075 1.49996 1.66023 1.49996 1.59612C1.49996 1.53202 1.49996 1.49996 1.49996 1.49996C1.49996 1.49996 1.49996 1.53202 1.49996 1.59612C1.49996 1.66023 1.49996 1.73075 1.49996 1.80768V13.1922C1.49996 13.2692 1.49996 13.3397 1.49996 13.4038C1.49996 13.4679 1.49996 13.5 1.49996 13.5Z"
                    fill="#020135"
                  ></path>
                </svg>
                {t("hero.getFreeChat")}
              </Link>

              <Link href="#" className="btn-app read-more">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24px"
                  height="24px"
                  viewBox="0 0 24 24"
                >
                  <path d="M0 0h24v24H0z" fill="none" />
                  <path
                    fill="currentColor"
                    d="M11.625 15.513q-.175-.063-.325-.213l-3.6-3.6q-.3-.3-.288-.7t.288-.7q.3-.3.713-.312t.712.287L11 12.15V5q0-.425.288-.712T12 4t.713.288T13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7t-.288.7l-3.6 3.6q-.15.15-.325.213t-.375.062t-.375-.062M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20z"
                  />
                </svg>

                {t("hero.downloadApp")}
              </Link>
            </div>
          </div>

          <div className="col-lg-6 text-center">
            <Image
              width={500}
              height={500}
              src="/images/banner-right-image.png"
              className="w-100 h-100 img-fluid hero-image"
              alt="Banner Image"
            />
          </div>
        </div>
      </div>
    </section>
  );
}