// const quickLinks = [
//   { label: "Home", href: "#" },
//   { label: "About us", href: "#about" },
//   { label: "Contact us", href: "#contact" },
// ];
import { renderSpanHTML } from "@/service/AdvancedFieldService";

// const policyLinks = [
//   { label: "Privacy Policy", href: "#privacy" },
//   { label: "Terms of Service", href: "#terms" },
//   { label: "Cookie Policy", href: "#cookies" },
// ];

export default function Footer({ settings }: { settings: any }) {
  return (
    <footer className="bg-[#0B4B2A] text-white">
      <div className="mx-auto w-full max-w-6xl px-6 py-12">
        <div className="grid gap-10 md:grid-cols-3">
          <div className="space-y-4">
            <div className="flex items-center gap-2 text-lg font-semibold text-white">
              <img alt="" className="h-12 w-auto" src={settings.logo.image} />
            </div>
            <p className="text-base leading-relaxed text-white/80">
              <b>{settings.footer_a_content}</b>
            </p>
            <p className="text-base leading-relaxed text-white/80">
              {settings.footer_a_content_2}
            </p>
          </div>

          <div className="space-y-4">
            <p className="text-lg font-semibold uppercase tracking-wide text-white/80">{settings.footer_b_title}</p>
            <ul className="space-y-3 text-sm text-white/80">
              {settings.quick_links.map((link: any, index: number) => (
                <li key={index}>
                  <a href={link.value_text_2} className="transition-colors hover:text-white text-base">
                    {link.value_text_1}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div className="space-y-4">
            <p className="text-lg font-semibold uppercase tracking-wide text-white/80">{settings.footer_c_title}</p>
            <ul className="space-y-3 text-sm text-white/80">
              {settings.footer_links.map((link: any, index: number) => (
                <li key={index}>
                <span className="mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white ">
                  {renderSpanHTML(link.value_text_2)}
                </span>
                <a href={link.value_text_3} className="text-base px-2" target="_blank">
                  <span dir={link.value_text_3.includes('tel:') ? 'ltr' : 'rtl'}>
                  {link.value_text_1}
                  </span>
                </a>
              </li>
              ))}

            </ul>

            <div className="space-y-3">
              <p className="text-base font-semibold uppercase tracking-wide text-white/80">{settings.footer_c_title_bottom}</p>
              
              <div className="flex items-center gap-4">
                {settings.social_links.map((link: any, index: number) => {
                  return (
                    <a key={index} href={link.value_text_3} target="_blank"
                    className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/20 text-white transition-colors hover:bg-white hover:text-[#0B4B2A]"
                    aria-label={link.value_text_1}
                    >
                      {renderSpanHTML(link.value_text_2)}
                    </a>
                  )
                })}
                
                
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 py-4 text-xs text-white/70 md:flex-row md:items-center md:justify-between">
          <p>{settings.copyright}</p>
          <div className="flex flex-wrap items-center gap-4">
            {settings.bottom_menu.map((link: any, key: number) => (
              <a key={key} href={link.value_text_2} className="transition-colors hover:text-white">
                {link.value_text_1}
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}