import React from "react";

export function DirectionsBlock() {
  return (
    <section className="mt-20 pt-16 border-t border-line" id="directions">
      <div className="flex items-center gap-3 mb-6">
        <span className="h-px w-8 bg-vermillion"></span>
        <span className="font-mono text-xs tracking-widest uppercase text-vermillion font-bold">
          Location & Contact
        </span>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
        {/* Left info column */}
        <div className="lg:col-span-7 space-y-6">
          <h2 className="font-serif text-3xl font-normal text-ink">
            오시는 길 & 연구실 소재지
          </h2>
          <p className="text-ink-mute text-base leading-relaxed">
            경북대학교 AI 에이전트 네트워크 연구실 (ANL)은 IT대학 5호관에 위치하고 있으며, 차세대 차세대 에이전트 오케스트레이션 및 고성능 네트워크 백본 연구를 수행합니다.
          </p>

          <address className="not-italic space-y-4 pt-2 text-sm font-sans text-ink">
            <div className="flex items-start gap-3">
              <span className="font-mono text-xs uppercase tracking-wider text-ink-mute w-20 pt-0.5">
                소재지
              </span>
              <div>
                <p className="font-medium">
                  경북대학교 IT대학 5호관(415동) 527호
                </p>
                <p className="text-xs text-ink-mute mt-0.5">
                  School of Computer Science and Engineering, Kyungpook National University
                </p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <span className="font-mono text-xs uppercase tracking-wider text-ink-mute w-20">
                지도교수
              </span>
              <span>
                고석주 교수 (<a href="mailto:sjkoh@knu.ac.kr" className="text-vermillion hover:underline">sjkoh@knu.ac.kr</a>)
              </span>
            </div>

            <div className="flex items-start gap-3">
              <span className="font-mono text-xs uppercase tracking-wider text-ink-mute w-20 pt-0.5">
                관련 기관
              </span>
              <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs font-mono text-cobalt-dark dark:text-cobalt">
                <a href="http://www.knu.ac.kr/" target="_blank" rel="noreferrer" className="hover:underline">
                  경북대학교 (KNU) ↗
                </a>
                <a href="http://cse.knu.ac.kr/" target="_blank" rel="noreferrer" className="hover:underline">
                  컴퓨터학부 ↗
                </a>
                <a href="http://it.knu.ac.kr/" target="_blank" rel="noreferrer" className="hover:underline">
                  IT대학 ↗
                </a>
              </div>
            </div>
          </address>
        </div>

        {/* Right card column */}
        <div className="lg:col-span-5 bg-paper p-6 rounded-lg border border-line flex flex-col justify-between">
          <div className="space-y-4">
            <div className="font-mono text-xs text-ink-mute uppercase tracking-wider">
              Research Environment
            </div>
            <h3 className="font-serif text-xl font-normal text-ink">
              AI Agent Networking Lab
            </h3>
            <p className="text-xs text-ink-mute leading-relaxed">
              QUIC/gRPC 스트리밍 통신 인프라와 컨테이너 격리 프로세스 격리 환경을 포함한 멀티 에이전트 실험실 공간을 운용합니다.
            </p>
          </div>
          <div className="mt-6 pt-4 border-t border-line flex justify-between items-center text-xs font-mono text-ink-mute">
            <span>IT-5 Building #527</span>
            <span className="text-vermillion font-bold">ANL Laboratory</span>
          </div>
        </div>
      </div>
    </section>
  );
}