"use client";

import Link from "@/app/components/LocaleLink";

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

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

  return (
    <section className="journal-section py-5">
      <div className="container">
        <div className="text-center mb-5">
          <span className="journal-subtitle"> {t("home.journal.subtitle", "From the journal")} </span>

          <h2 className="journal-title">{t("home.journal.title", "Read between the stars")}</h2>

          <span className="title-line"></span>
        </div>

        <div className="row g-4">
          <div className="col-lg-3 col-md-6">
            <div className="journal-card">
              <div className="journal-image">
                <img
                  src="/images/ai-in-astrology.png"
                  className="img-fluid"
                  alt=""
                />
              </div>

              <div className="journal-content">
                <h4>{t("home.journal.posts.mars.title", "Mars Enters Scorpio: What it means for you")}</h4>

                <p>
                  {t(
                    "home.journal.posts.mars.description",
                    "Discover the intense energy shift as the red planet moves into Scorpio."
                  )}
                </p>

                <Link href="#" className="read-more">
                  {t("home.journal.readMore", "Read More")}
                  <svg
                    width="10"
                    height="10"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12.175 9H0V7H12.175L6.575 1.4L8 0L16 8L8 16L6.575 14.6L12.175 9Z"
                      fill="#FFD400"
                    ></path>
                  </svg>
                </Link>
              </div>
            </div>
          </div>


          <div className="col-lg-3 col-md-6">
            <div className="journal-card">
              <div className="journal-image">
                <img
                  src="/images/ayurveda.png"
                  className="img-fluid"
                  alt=""
                />
              </div>

              <div className="journal-content">
                <h4>{t("home.journal.posts.jupiter.title", "Jupiter in Cancer: A Season of Growth")}</h4>

                <p>
                  {t(
                    "home.journal.posts.jupiter.description",
                    "Abundance and emotional intelligence peak during this transit."
                  )}
                </p>

                <Link href="#" className="read-more">
                  {t("home.journal.readMore", "Read More")}
                  <svg
                    width="10"
                    height="10"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12.175 9H0V7H12.175L6.575 1.4L8 0L16 8L8 16L6.575 14.6L12.175 9Z"
                      fill="#FFD400"
                    ></path>
                  </svg>
                </Link>
              </div>
            </div>
          </div>


          <div className="col-lg-3 col-md-6">
            <div className="journal-card">
              <div className="journal-image">
                <img
                  src="/images/ai-in-astrology.png"
                  className="img-fluid"
                  alt=""
                />
              </div>

              <div className="journal-content">
                <h4>{t("home.journal.posts.ai.title", "How AstroMystic is using AI for Precision")}</h4>

                <p>{t("home.journal.posts.ai.description", "Merging ancient wisdom with modern AI-powered astrology.")}</p>

                <Link href="#" className="read-more">
                  {t("home.journal.readMore", "Read More")}
                  <svg
                    width="10"
                    height="10"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12.175 9H0V7H12.175L6.575 1.4L8 0L16 8L8 16L6.575 14.6L12.175 9Z"
                      fill="#FFD400"
                    ></path>
                  </svg>
                </Link>
              </div>
            </div>
          </div>


          <div className="col-lg-3 col-md-6">
            <div className="journal-card">
              <div className="journal-image">
                <img
                  src="/images/ayurveda.png"
                  className="img-fluid"
                  alt=""
                />
              </div>

              <div className="journal-content">
                <h4>{t("home.journal.posts.ayurveda.title", "Khazani Ayurveda: Healing with Stars")}</h4>

                <p>{t("home.journal.posts.ayurveda.description", "Align your health with the cosmic rhythms of Ayurveda.")}</p>

                <Link href="#" className="read-more">
                  {t("home.journal.readMore", "Read More")}
                  <svg
                    width="10"
                    height="10"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12.175 9H0V7H12.175L6.575 1.4L8 0L16 8L8 16L6.575 14.6L12.175 9Z"
                      fill="#FFD400"
                    ></path>
                  </svg>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}