"use client";

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

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

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

  return (
    <footer className="footer-section">
      <div className="container">
        <div className="row gy-5">
          {/*  About  */}
          <div className="col-lg-3 col-md-6">
            <Link href="/">
              <Image
                src="/images/logo-vertical.svg"
                alt="AstroEye"
                width={180}
                height={50}
                className="object-contain mb-3"
                priority
              />
            </Link>

            <p className="footer-about">
              {t(
                "footer.about",
                "Bridging ancient wisdom with modern precision to provide guidance for your soul's journey."
              )}
            </p>

            <div className="social-icons">
              <Link href="#">
                <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="M19.05 4.91A9.82 9.82 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91c0-2.65-1.03-5.14-2.9-7.01m-7.01 15.24c-1.48 0-2.93-.4-4.2-1.15l-.3-.18l-3.12.82l.83-3.04l-.2-.31a8.26 8.26 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24c2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.83c.02 4.54-3.68 8.23-8.22 8.23m4.52-6.16c-.25-.12-1.47-.72-1.69-.81c-.23-.08-.39-.12-.56.12c-.17.25-.64.81-.78.97c-.14.17-.29.19-.54.06c-.25-.12-1.05-.39-1.99-1.23c-.74-.66-1.23-1.47-1.38-1.72c-.14-.25-.02-.38.11-.51c.11-.11.25-.29.37-.43s.17-.25.25-.41c.08-.17.04-.31-.02-.43s-.56-1.34-.76-1.84c-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31c-.22.25-.86.85-.86 2.07s.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74c.59.26 1.05.41 1.41.52c.59.19 1.13.16 1.56.1c.48-.07 1.47-.6 1.67-1.18c.21-.58.21-1.07.14-1.18s-.22-.16-.47-.28"
                  />
                </svg>
              </Link>

              <Link href="#">
                <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="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
                  />
                </svg>
              </Link>

              <Link href="#">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24px"
                  height="24px"
                  viewBox="0 0 16 16"
                >
                  <path d="M0 0h16v16H0z" fill="none" />
                  <path
                    fill="currentColor"
                    fill-rule="evenodd"
                    d="M3.11 15c-.559 0-1.09-.222-1.49-.617s-.617-.931-.617-1.49v-9.79c0-.559.222-1.09.617-1.49S2.551.996 3.11.996h9.79c.559 0 1.09.222 1.49.617s.617.931.617 1.49v9.79c0 .559-.222 1.09-.617 1.49S13.459 15 12.9 15zm8.55-5.91h-1.48v4.89h2.72a1.084 1.084 0 0 0 1.087-1.087v-9.79A1.086 1.086 0 0 0 12.9 2.016H3.11a1.09 1.09 0 0 0-1.087 1.087v9.79A1.09 1.09 0 0 0 3.11 13.98h5.44V9.09H6.92V7.46h1.63v-.876c0-1.66.808-2.39 2.19-2.39c.647 0 .995.047 1.16.07l.01.001v1.56h-.94c-.474 0-.698.203-.766.612a2 2 0 0 0-.023.322v.697h1.71l-.233 1.63z"
                    clip-rule="evenodd"
                  />
                </svg>
              </Link>

              <Link href="#">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24px"
                  height="24px"
                  viewBox="0 0 16 16"
                >
                  <path d="M0 0h16v16H0z" fill="none" />
                  <path
                    fill="currentColor"
                    d="M9.294 6.928L14.357 1h-1.2L8.762 6.147L5.25 1H1.2l5.31 7.784L1.2 15h1.2l4.642-5.436L10.751 15h4.05zM7.651 8.852l-.538-.775L2.832 1.91h1.843l3.454 4.977l.538.775l4.491 6.47h-1.843z"
                  />
                </svg>
              </Link>
            </div>
          </div>

          {/*  Explore  */}

          <div className="col-lg-3 col-md-6">
            <h5 className="footer-title">{t("footer.explore.heading", "EXPLORE")}</h5>

            <ul className="footer-links">
              <li>
                <Link href="/horoscope/daily-horoscope">{t("footer.explore.dailyHoroscope", "Daily Horoscope")}</Link>
              </li>

              <li>
                <Link href="/free-kundli">{t("footer.explore.freeKundli", "Free Kundli")}</Link>
              </li>

              <li>
                <Link href="/kundli-matching">{t("footer.explore.kundliMatching", "Kundli Matching")}</Link>
              </li>

              <li>
                <Link href="/panchang/today-panchang">{t("footer.explore.todayPanchang", "Today Panchang")}</Link>
              </li>
              <li>
                <Link href="/blogs">{t("footer.explore.blogs", "Blogs")}</Link>
              </li>
            </ul>

            <h5 className="footer-title pt-3 mb-3">{t("footer.astrologer.heading", "ASTROLOGER")}</h5>

            <ul className="footer-links">
              <li>
                <Link href="/astrologer/signin">{t("footer.astrologer.login", "Astrologer Login")}</Link>
              </li>

              <li>
                <Link href="/astrologer/register">{t("footer.astrologer.registration", "Astrologer Registration")}</Link>
              </li>
            </ul>
          </div>

          {/*  Company  */}

          <div className="col-lg-3 col-md-6">
            <h5 className="footer-title">{t("footer.company.heading", "COMPANY")}</h5>

            <ul className="footer-links">
              <li>
                <Link href="/aboutus">{t("footer.company.aboutUs", "About Us")}</Link>
              </li>

              <li>
                <Link href="/privacy">{t("footer.company.privacyPolicy", "Privacy Policy")}</Link>
              </li>

              <li>
                <Link href="/terms">{t("footer.company.termsOfService", "Terms of Service")}</Link>
              </li>

            </ul>
            <h5 className="footer-title pt-3 mb-3">{t("footer.contact.heading", "CONTACT US")}</h5>
            <ul className="footer-links">
              <li>
                {t("footer.contact.availability", "We are available 24x7 on chat support")} <br />
                {t("footer.contact.emailPrefix", "Email:")} <Link href="mailto:contact@astroeye.in">contact@astroeye.in</Link>
              </li>
            </ul>
          </div>

          {/*  Newsletter  */}

          <div className="col-lg-3 col-md-6">
            <h5 className="footer-title">{t("footer.newsletter.heading", "NEWSLETTER")}</h5>

            <p className="newsletter-text">
              {t("footer.newsletter.description", "Weekly cosmic insights delivered to your inbox.")}
            </p>

            <form className="newsletter-form">
              <input
                type="email"
                className="form-control"
                placeholder={t("footer.newsletter.emailPlaceholder", "Email Address")}
              />

              <button className="btn subscribe-btn">{t("footer.newsletter.subscribe", "Subscribe")}</button>
            </form>
          </div>
        </div>

        <hr className="footer-divider" />

        <div className="text-center copyright">
          {t("footer.copyright", "© 2026 NovaEdge System Pvt. Ltd. | Crafted with ❤️ by")} <Link className="footer-logo" style={{ textDecoration: 'none', margin: '0 5px' }} href="https://www.togwe.com/" target="_blank" rel="noopener"><img src="images/togwe-icon-light.png" alt="logo" width="20"/> </Link>
        </div>
      </div>
    </footer>
  );
}