메인 둘째 줄: 공간 사진 · 공지사항 · 오시는 길 카드

const NOTICES = [
  { id: 12, title: "가을 학기 클래스 일정 및 수강료", date: "2026.09.01" },
  { id: 11, title: "11월 야외 출사 일정 안내", date: "2026.08.24" },
  { id: 10, title: "수강생 사진전 출품작 접수", date: "2026.08.10" },
  { id: 9, title: "스튜디오 대관 운영 시간 변경", date: "2026.07.18" },
];

const FONT = '"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif';

export default function MainInfoCards() {
  return (
    <section className="w-full bg-[#f4f6f9]" style={{ fontFamily: FONT }}>
      <div className="mx-auto grid w-full max-w-[1200px] grid-cols-1 gap-3 px-4 pb-10 pt-1.5 sm:grid-cols-2 sm:gap-4 sm:px-6 sm:pt-2 lg:grid-cols-12 lg:pb-16">
        {/* 공간 사진 카드 */}
        <a href="/space" className="group relative block min-h-[200px] overflow-hidden rounded-[20px] sm:min-h-[260px] sm:rounded-[24px] lg:col-span-5">
          <img
            src="https://nnuer.site/media/eVx6PCrQHbLd"
            alt=""
            loading="lazy"
            className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
          />
          <span className="absolute inset-0 bg-[linear-gradient(180deg,transparent_40%,rgba(18,26,42,0.75)_100%)]" />
          <span className="absolute inset-x-7 bottom-6 z-[1] flex flex-col text-white">
            <strong className="text-xl font-extrabold">공간 둘러보기</strong>
            <span className="text-sm text-white/80">스튜디오 2곳 · 장비실 · 라운지</span>
          </span>
        </a>

        {/* 공지사항 카드 */}
        <section aria-labelledby="main-notice-title" className="rounded-[20px] bg-white p-[22px] sm:rounded-[24px] sm:p-7 lg:col-span-4">
          <div className="mb-4 flex items-center justify-between gap-3">
            <h2 id="main-notice-title" className="text-xl font-extrabold tracking-[-0.02em] text-[#172031]">
              공지사항
            </h2>
            <a href="/notice" className="whitespace-nowrap text-sm font-bold text-[#8a93a3] hover:text-[#3D64B1]">
              전체 보기
            </a>
          </div>
          <ul>
            {NOTICES.map((n, i) => (
              <li key={n.id}>
                <a
                  href={`/notice/${n.id}`}
                  className={`group grid grid-cols-[1fr_auto] items-center gap-3 py-3 ${i < NOTICES.length - 1 ? "border-b border-[#e4e7ed]" : ""}`}
                >
                  <span className="min-w-0 truncate text-[15px] font-semibold text-[#172031] transition-colors group-hover:text-[#3D64B1]">{n.title}</span>
                  <time dateTime={n.date.replace(/\./g, "-")} className="text-[13px] tabular-nums text-[#8a93a3]">
                    {n.date}
                  </time>
                </a>
              </li>
            ))}
          </ul>
        </section>

        {/* 오시는 길 카드 */}
        <section aria-labelledby="main-visit-title" className="flex flex-col rounded-[20px] bg-[#F5C842] p-[22px] sm:col-span-2 sm:rounded-[24px] sm:p-7 lg:col-span-3">
          <h2 id="main-visit-title" className="text-[15px] font-bold text-[#1B263B]/70">
            오시는 길
          </h2>
          <p className="mt-2.5 text-[26px] font-extrabold leading-[1.3] tracking-[-0.03em] text-[#1B263B]">
            빛담역 2번 출구
            <br />
            도보 4분
          </p>
          <p className="mt-3 text-sm leading-[1.6] tracking-[-0.01em] text-[#1B263B]/70">서울특별시 예시구 빛담로 120, 3층</p>
          <a href="/location" className="mt-auto pt-4 text-sm font-bold text-[#1B263B] underline-offset-[3px] hover:underline">
            교통편 보기
          </a>
        </section>
      </div>
    </section>
  );
}