오시는 길: 위치 사진 + 주소·지하철·버스 안내 카드

const MAP_URL = "https://example.com/map";

const BUSES = [
  { no: "101", dir: "빛담시장 방면" },
  { no: "240", dir: "예시구청 방면" },
  { no: "3412", dir: "빛담역 2번 출구 방면" },
  { no: "7720", dir: "중앙공원 방면" },
];

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

function ExternalIcon() {
  return (
    <svg viewBox="0 0 24 24" className="ml-1 inline-block h-3 w-3 opacity-60" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M7 7h10v10" />
      <path d="M7 17 17 7" />
    </svg>
  );
}

export default function Directions() {
  return (
    <section className="w-full bg-white" style={{ fontFamily: FONT, wordBreak: "keep-all" }}>
      <div className="mx-auto w-full max-w-[1200px] px-4 py-12 sm:px-6 lg:py-16">
        <div className="relative h-[320px] overflow-hidden rounded-2xl bg-[#f4f6f9] lg:h-[480px]">
          <img src="https://nnuer.site/media/oHsaDTAKCR8e" alt="학교 주변 시가지 항공 사진" className="absolute inset-0 h-full w-full object-cover" />
          <span className="absolute inset-0 bg-[rgba(18,26,42,0.35)]" />
          <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-full flex-col items-center">
            <span className="whitespace-nowrap rounded-full bg-white px-4 py-2 text-sm font-bold text-[#172031] shadow-[0_18px_40px_rgba(18,26,42,0.12)]">루멘 사진학교</span>
            <svg viewBox="0 0 24 24" className="mt-1.5 h-10 w-10 text-[#F5C842] drop-shadow-[0_4px_8px_rgba(18,26,42,0.35)]" fill="currentColor" fillRule="evenodd" aria-hidden="true">
              <path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z" />
            </svg>
          </div>
        </div>
        <p className="mt-3.5 flex justify-end">
          <a
            href={MAP_URL}
            target="_blank"
            rel="noopener noreferrer"
            title="새 창으로 열림"
            className="inline-flex h-11 items-center whitespace-nowrap rounded-full border-[1.5px] border-[#e4e7ed] px-5 text-[15px] font-bold text-[#172031] transition-colors hover:border-[#172031]"
          >
            지도 앱에서 크게 보기
            <ExternalIcon />
            <span className="sr-only">(새 창)</span>
          </a>
        </p>

        <div className="mt-12 grid grid-cols-1 gap-5 lg:grid-cols-3">
          <div className="rounded-2xl bg-[#1B263B] p-7 text-white/75">
            <h2 className="text-[15px] font-bold text-[#F5C842]">주소</h2>
            <strong className="mt-2 block text-xl leading-[1.45] text-white">서울특별시 예시구 빛담로 120, 3층</strong>
            <p className="mt-2 text-[15px]">Tel. 02-1234-5678 / 02-1234-5679</p>
            <p className="mt-2 text-[15px]">hello@example.com</p>
          </div>

          <div className="rounded-2xl bg-[#f4f6f9] p-7 text-[#4a5466]">
            <h2 className="text-[15px] font-bold text-[#3D64B1]">지하철</h2>
            <strong className="mt-2 flex items-center text-xl leading-[1.45] text-[#172031]">
              <span className="mr-1.5 inline-flex h-[26px] w-[26px] items-center justify-center rounded-full bg-[#2b7a3f] text-[13px] font-extrabold text-white">2</span>
              빛담역 2번 출구
            </strong>
            <p className="mt-2 text-[15px]">하차 후 도보 4분</p>
            <h2 className="mt-6 text-[15px] font-bold text-[#3D64B1]">자동차</h2>
            <p className="mt-2 text-[15px]">건물 지하 주차장 2시간 무료</p>
          </div>

          <div className="rounded-2xl bg-[#f4f6f9] p-7 text-[#4a5466]">
            <h2 className="text-[15px] font-bold text-[#3D64B1]">
              버스 <small className="ml-1.5 text-[13px] font-medium text-[#8a93a3]">빛담역 정류장 하차</small>
            </h2>
            <ul className="mt-2.5 grid gap-1.5">
              {BUSES.map((b) => (
                <li key={b.no} className="flex items-center text-[15px]">
                  <span className="mr-2 inline-flex h-[26px] min-w-[46px] items-center justify-center rounded-md bg-[#2f8a3a] px-2 text-[13px] font-bold tabular-nums text-white">{b.no}</span>
                  {b.dir}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}