"use client";

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

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

  return (
    <section className="app-section">
      <div className="container">
        <div className="row align-items-center gy-5">
          {/* <!-- Left Image --> */}
          <div className="col-lg-6 text-center">
            <div className="app-image">
              <img
                src="/images/app-image.png"
                className="img-fluid"
                alt={t("home.mobileApp.imageAlt", "Astrology App")}
              />
            </div>
          </div>

          {/* <!-- Right Content --> */}
          <div className="col-lg-6">
            <span className="app-badge">
              <svg
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M3.35416 8.82849L5.54165 7.16151L7.72913 8.82849L6.91023 6.12049L9.09211 4.57018H6.41888L5.54165 1.72756L4.66441 4.57018H1.99118L4.17306 6.12049L3.35416 8.82849ZM5.54262 11.0833C4.77616 11.0833 4.05572 10.9378 3.38131 10.647C2.7069 10.3561 2.12025 9.9613 1.62137 9.46264C1.12248 8.96398 0.727536 8.3776 0.436522 7.70348C0.145507 7.02937 0 6.30908 0 5.54262C0 4.77616 0.145443 4.05572 0.436328 3.38131C0.727213 2.7069 1.12199 2.12025 1.62065 1.62137C2.11931 1.12248 2.70569 0.727536 3.37981 0.436522C4.05392 0.145507 4.77421 0 5.54067 0C6.30713 0 7.02757 0.145443 7.70198 0.436328C8.3764 0.727213 8.96304 1.12199 9.46192 1.62065C9.96081 2.11931 10.3558 2.70569 10.6468 3.37981C10.9378 4.05392 11.0833 4.77421 11.0833 5.54067C11.0833 6.30713 10.9378 7.02757 10.647 7.70198C10.3561 8.3764 9.9613 8.96304 9.46264 9.46192C8.96398 9.96081 8.3776 10.3558 7.70348 10.6468C7.02937 10.9378 6.30908 11.0833 5.54262 11.0833ZM5.54165 10.2083C6.84442 10.2083 7.9479 9.75623 8.85206 8.85206C9.75623 7.9479 10.2083 6.84442 10.2083 5.54165C10.2083 4.23887 9.75623 3.1354 8.85206 2.23123C7.9479 1.32706 6.84442 0.874979 5.54165 0.874979C4.23887 0.874979 3.1354 1.32706 2.23123 2.23123C1.32706 3.1354 0.874979 4.23887 0.874979 5.54165C0.874979 6.84442 1.32706 7.9479 2.23123 8.85206C3.1354 9.75623 4.23887 10.2083 5.54165 10.2083Z"
                  fill="#FCD400"
                />
              </svg>
              {t("home.mobileApp.badge", "GLOBAL EXCELLENCE")}
            </span>

            <h2 className="app-title mt-4">
              {t("home.mobileApp.titleLine1", "India's #1 Astrology")} <br />
              {t("home.mobileApp.titleLine2", "App.")}
              <span>{t("home.mobileApp.titleTagline", "Always with you.")}</span>
            </h2>

            <p className="app-desc">
              {t(
                "home.mobileApp.description",
                "Access ancient Vedic wisdom through a modern, secure platform. Connect with world-class astrologers for precise life guidance, anytime, anywhere."
              )}
            </p>

            <div className="app-divider"></div>

            <div className="row mt-4 mb-4">
              <div className="col-6">
                <div className="app-rating">
                  <div className="stars">
                    <svg
                      width="116"
                      height="19"
                      viewBox="0 0 116 19"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M3.825 19L5.45 11.975L0 7.25L7.2 6.625L10 0L12.8 6.625L20 7.25L14.55 11.975L16.175 19L10 15.275L3.825 19Z"
                        fill="#FCD400"
                      />
                      <path
                        d="M27.825 19L29.45 11.975L24 7.25L31.2 6.625L34 0L36.8 6.625L44 7.25L38.55 11.975L40.175 19L34 15.275L27.825 19Z"
                        fill="#FCD400"
                      />
                      <path
                        d="M51.825 19L53.45 11.975L48 7.25L55.2 6.625L58 0L60.8 6.625L68 7.25L62.55 11.975L64.175 19L58 15.275L51.825 19Z"
                        fill="#FCD400"
                      />
                      <path
                        d="M75.825 19L77.45 11.975L72 7.25L79.2 6.625L82 0L84.8 6.625L92 7.25L86.55 11.975L88.175 19L82 15.275L75.825 19Z"
                        fill="#FCD400"
                      />
                      <path
                        d="M109.15 14.85L108.325 11.25L111.1 8.85L107.45 8.525L106 5.125V12.925L109.15 14.85ZM99.825 19L101.45 11.975L96 7.25L103.2 6.625L106 0L108.8 6.625L116 7.25L110.55 11.975L112.175 19L106 15.275L99.825 19Z"
                        fill="#FCD400"
                      />
                    </svg>
                  </div>

                  <h4>{t("home.mobileApp.ratingCaption", "4.5 Rating")}</h4>

                  <p>{t("home.mobileApp.ratingSubtext", "on Play Store & App Store")}</p>
                </div>
              </div>

              <div className="col-6">
                <div className="app-rating">
                  <div className="people-icon">
                    <svg
                      width="21"
                      height="15"
                      viewBox="0 0 21 15"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M0 14.6153V12.3922C0 11.8769 0.133012 11.4169 0.399036 11.0125C0.665059 10.608 1.02033 10.2933 1.46485 10.0684C2.41519 9.60354 3.37081 9.24516 4.3317 8.99324C5.29259 8.74132 6.34868 8.61536 7.49996 8.61536C8.65125 8.61536 9.70734 8.74132 10.6682 8.99324C11.6291 9.24516 12.5847 9.60354 13.5351 10.0684C13.9796 10.2933 14.3349 10.608 14.6009 11.0125C14.8669 11.4169 14.9999 11.8769 14.9999 12.3922V14.6153H0ZM16.9999 14.6153V12.2692C16.9999 11.6128 16.8392 10.9872 16.5178 10.3924C16.1963 9.7977 15.7404 9.28739 15.15 8.86152C15.8205 8.96152 16.457 9.11632 17.0595 9.32594C17.6621 9.53555 18.2371 9.7833 18.7845 10.0692C19.3012 10.3448 19.7002 10.6697 19.9816 11.0438C20.263 11.4179 20.4037 11.8264 20.4037 12.2692V14.6153H16.9999ZM7.49996 6.99993C6.53459 6.99993 5.70992 6.65794 5.02595 5.97398C4.34198 5.29001 4 4.46534 4 3.49996C4 2.53459 4.34198 1.70992 5.02595 1.02595C5.70992 0.341984 6.53459 0 7.49996 0C8.46534 0 9.29001 0.341984 9.97398 1.02595C10.6579 1.70992 10.9999 2.53459 10.9999 3.49996C10.9999 4.46534 10.6579 5.29001 9.97398 5.97398C9.29001 6.65794 8.46534 6.99993 7.49996 6.99993ZM16.1345 3.49996C16.1345 4.46534 15.7918 5.29001 15.1064 5.97398C14.421 6.65794 13.597 6.99993 12.6345 6.99993C12.5217 6.99993 12.3781 6.98711 12.2038 6.96147C12.0294 6.93583 11.8858 6.90762 11.773 6.87686C12.1674 6.40274 12.4705 5.87676 12.6822 5.29893C12.894 4.72111 12.9999 4.12105 12.9999 3.49877C12.9999 2.8765 12.8919 2.27882 12.6759 1.70575C12.4599 1.13268 12.1589 0.605119 11.773 0.123071C11.9166 0.0717916 12.0602 0.0384598 12.2038 0.0230759C12.3473 0.00769196 12.4909 0 12.6345 0C13.597 0 14.421 0.341984 15.1064 1.02595C15.7918 1.70992 16.1345 2.53459 16.1345 3.49996ZM1.49996 13.1153H13.5V12.3922C13.5 12.1833 13.4477 11.9974 13.3432 11.8346C13.2387 11.6717 13.073 11.5294 12.8461 11.4076C12.023 10.9833 11.1756 10.6618 10.3038 10.4432C9.43202 10.2246 8.4974 10.1153 7.49996 10.1153C6.50252 10.1153 5.56791 10.2246 4.69612 10.4432C3.82432 10.6618 2.97689 10.9833 2.15382 11.4076C1.92689 11.5294 1.76118 11.6717 1.6567 11.8346C1.55221 11.9974 1.49996 12.1833 1.49996 12.3922V13.1153ZM7.49996 5.49996C8.04996 5.49996 8.5208 5.30413 8.91246 4.91246C9.30413 4.5208 9.49996 4.04996 9.49996 3.49996C9.49996 2.94996 9.30413 2.47913 8.91246 2.08746C8.5208 1.6958 8.04996 1.49996 7.49996 1.49996C6.94996 1.49996 6.47913 1.6958 6.08746 2.08746C5.6958 2.47913 5.49996 2.94996 5.49996 3.49996C5.49996 4.04996 5.6958 4.5208 6.08746 4.91246C6.47913 5.30413 6.94996 5.49996 7.49996 5.49996Z"
                        fill="#FCD400"
                      />
                    </svg>
                  </div>

                  <h4>120.2M+</h4>

                  <p>{t("home.mobileApp.customersLabel", "Trusted Happy Customers")}</p>
                </div>
              </div>
            </div>

            <div className="app-divider mb-4"></div>

            <div className="download-btns">
              <a href="#" className="store-btn">
                <img src="/images/app-store.svg" alt={t("home.mobileApp.appStoreAlt", "App Store")} />
              </a>

              <a href="#" className="store-btn">
                <img src="/images/google-play.svg" alt={t("home.mobileApp.googlePlayAlt", "Google Play")} />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}