const CONFIG = {
  sectionA: [
    {
      id: 1,
      title: "시민주도 공공개발",
      link: "https://urienergy.com/projects/",
      image:
        "https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?auto=format&fit=crop&q=80&w=800",
      icon: (
        <svg
          className="w-10 h-10 md:w-11 md:h-11 text-white mb-2 md:mb-3 drop-shadow-md"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
          />
        </svg>
      ),
    },
    {
      id: 2,
      title: "진행중 프로젝트",
      link: "https://urienergy.com/ingbiz/",
      image:
        "https://images.unsplash.com/photo-1466611653911-95081537e5b7?auto=format&fit=crop&q=80&w=800",
      icon: (
        <svg
          className="w-10 h-10 md:w-11 md:h-11 text-white mb-2 md:mb-3 drop-shadow-md"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
          />
        </svg>
      ),
    },
    {
      id: 3,
      title: "참여하기",
      link: "https://urienergy.com/join/",
      image:
        "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&q=80&w=800",
      icon: (
        <svg
          className="w-10 h-10 md:w-11 md:h-11 text-white mb-2 md:mb-3 drop-shadow-md"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
          />
        </svg>
      ),
    },
    {
      id: 4,
      title: (
        <span className="text-[14px] md:text-[16px] leading-snug block tracking-tight font-bold">
          회원사 전용
          <br />
          <span className="whitespace-nowrap text-[13px] sm:text-[15px] md:text-[16px]">
            웹·제안서 지원
          </span>
        </span>
      ),
      link: "https://urienergy.com/promo_landing_page.html",
      image:
        "https://images.unsplash.com/photo-1508514177221-188b1ca16e93?auto=format&fit=crop&q=80&w=800",
      icon: (
        <svg
          className="w-10 h-10 md:w-11 md:h-11 text-white mb-2 md:mb-3 drop-shadow-md"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
          />
        </svg>
      ),
    },
  ],
  sectionB: [
    {
      id: 1,
      title: <span className="text-[14px] md:text-[16px] leading-tight block tracking-tighter">국민에너지<br/>전국회의</span>,
      link: "https://urienergy.com/about-2/",
      icon: (
        <svg
          className="w-9 h-9 md:w-10 md:h-10 text-teal-600 mb-2 md:mb-3 shrink-0 group-hover:text-blue-600 transition-colors duration-300"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
          />
        </svg>
      ),
    },
    {
      id: 2,
      title: "국민솔라(주)",
      link: "https://urienergy.com/home/",
      icon: (
        <svg
          className="w-9 h-9 md:w-10 md:h-10 text-teal-600 mb-2 md:mb-3 shrink-0 group-hover:text-blue-600 transition-colors duration-300"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.2}
            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
          />
        </svg>
      ),
    },
    {
      id: 3,
      title: "상담신청",
      link: "https://urienergy.com/contact/",
      icon: (
        <svg
          className="w-9 h-9 md:w-10 md:h-10 text-teal-600 mb-2 md:mb-3 shrink-0 group-hover:text-blue-600 transition-colors duration-300"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.2}
            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
          />
        </svg>
      ),
    },
    {
      id: 4,
      title: "회사위치",
      link: "https://urienergy.com/contact/",
      icon: (
        <svg
          className="w-9 h-9 md:w-10 md:h-10 text-teal-600 mb-2 md:mb-3 shrink-0 group-hover:text-blue-600 transition-colors duration-300"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.2}
            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.243-4.243a8 8 0 1111.314 0z"
          />
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.2}
            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
          />
        </svg>
      ),
    },
    {
      id: 5,
      title: (
        <span className="text-[11px] sm:text-[12px] md:text-[13px] leading-tight block tracking-tight px-0.5">
          나라장터 +<br />
          태양광사업
        </span>
      ),
      link: "https://uloca.net/g2b_search/?searchType=1&kwd=%ED%83%9C%EC%96%91%EA%B4%91",
      icon: (
        <svg
          className="w-9 h-9 md:w-10 md:h-10 text-teal-600 mb-2 md:mb-3 group-hover:text-blue-600 transition-colors duration-300 shrink-0"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          />
        </svg>
      ),
    },
  ],
};

function FrequentlyVisitedMenu() {
  return (
    <section className="py-8 px-4 md:px-8 max-w-[1200px] mx-auto w-full font-sans">
      {/* Main Title */}
      <h2 className="text-[28px] md:text-3xl font-bold text-center text-gray-900 mb-8 tracking-tight">
        자주 찾는 메뉴
      </h2>

      {/* =========================================
          Section A : Business Cards (Grid of 4)
          ========================================= */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4 mb-10">
        {CONFIG.sectionA.map((item) => (
          <a
            key={item.id}
            href={item.link}
            target="_blank"
            rel="noopener noreferrer"
            className="group relative min-h-[132px] h-32 sm:h-36 md:h-[148px] rounded-xl md:rounded-2xl overflow-hidden shadow-md transition-transform duration-500 hover:-translate-y-1 md:hover:-translate-y-2 block"
          >
            <div
              className="absolute inset-0 bg-cover bg-center transition-transform duration-700 ease-in-out group-hover:scale-110"
              style={{ backgroundImage: `url(${item.image})` }}
            />

            <div className="absolute inset-0 bg-black/65 transition-colors duration-500 group-hover:bg-black/40" />

            <div className="absolute inset-0 px-3 py-4 md:p-5 flex flex-col items-center justify-center text-center">
              {item.icon}
              <h3 className="text-[15px] sm:text-[17px] md:text-[18px] font-bold text-white mb-0 tracking-wide drop-shadow-md [&_span]:font-bold">
                {item.title}
              </h3>

            </div>
          </a>
        ))}
      </div>

      {/* =========================================
          Section B : Quick Links (Grid of 5)
          ========================================= */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 sm:gap-3 md:gap-4">
        {CONFIG.sectionB.map((item) => (
          <a
            key={item.id}
            href={item.link}
            target="_blank"
            rel="noopener noreferrer"
            className="group block bg-white rounded-xl md:rounded-2xl p-3 md:p-4 shadow-sm border border-gray-100 flex flex-col items-center justify-center text-center transition-all duration-300 hover:bg-[#F0F7FF] hover:border-blue-100 hover:shadow-lg min-h-[7.5rem] h-auto md:min-h-[9rem] md:h-36"
          >
            {item.icon}
            <h4 className="text-[12px] sm:text-[13px] md:text-[14px] font-bold text-gray-800 mt-1.5 md:mt-2 group-hover:text-blue-900 transition-colors duration-300 w-full leading-snug break-keep [&_span]:block">
              {item.title}
            </h4>

          </a>
        ))}
      </div>
    </section>
  );
}

const rootElement = document.getElementById("frequently-visited-root");
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<FrequentlyVisitedMenu />);
}