퀵메뉴: PC 오른쪽 세로 타일 / 모바일 하단 고정 바

const TEL = "02-1234-5678";
const CHAT = "https://example.com/chat";
const BOOKING = "https://example.com/booking";
const FONT = '"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif';

/* 아이콘: Lucide (ISC License), 채팅 말풍선은 단순화한 채움형 도형 */
const ICON = "h-[18px] w-[18px] shrink-0 min-[1366px]:h-6 min-[1366px]:w-6";
const PhoneIcon = () => (
  <svg viewBox="0 0 24 24" className={ICON} fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
  </svg>
);
const ChatIcon = () => (
  <svg viewBox="0 0 24 24" className={ICON} fill="currentColor" aria-hidden="true">
    <path d="M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7l-1 3.6c-.1.3.3.6.6.4l4.2-2.8c.5.1 1 .1 1.5.1 5.5 0 10-3.6 10-8S17.5 3 12 3z" />
  </svg>
);
const MessageIcon = () => (
  <svg viewBox="0 0 24 24" className={ICON} fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
    <path d="M13 8H7" />
    <path d="M17 12H7" />
  </svg>
);
const ClipboardIcon = () => (
  <svg viewBox="0 0 24 24" className={ICON} fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
    <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
    <path d="m9 14 2 2 4-4" />
  </svg>
);
const ExternalMark = () => (
  <>
    <svg
      viewBox="0 0 24 24"
      className="absolute right-1.5 top-1.5 h-2.5 w-2.5 opacity-55 min-[1366px]:right-2 min-[1366px]:top-2 min-[1366px]:h-3 min-[1366px]:w-3"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M7 7h10v10" />
      <path d="M7 17 17 7" />
    </svg>
    <span className="sr-only">(새 창)</span>
  </>
);

/* 좁은 화면: 하단 고정 바(높이 56px) / 1366px 이상: 오른쪽 세로 타일 */
const ITEM =
  "group relative flex flex-1 flex-col items-center justify-center gap-0.5 h-14 text-[11px] font-bold leading-[1.3] tracking-[-0.03em] sm:flex-row sm:gap-1.5 sm:text-sm " +
  "min-[1366px]:flex-none min-[1366px]:flex-col min-[1366px]:gap-1.5 min-[1366px]:h-[84px] min-[1366px]:w-[84px] min-[1366px]:rounded-[20px] min-[1366px]:text-xs " +
  "min-[1366px]:shadow-[0_6px_20px_rgba(18,26,42,0.12)] min-[1366px]:transition min-[1366px]:hover:-translate-y-0.5 min-[1366px]:hover:shadow-[0_10px_24px_rgba(18,26,42,0.18)]";
const DIVIDER = "border-l border-[#e4e7ed] min-[1366px]:border-l-0";

export default function QuickMenu() {
  return (
    <div className="w-full" style={{ fontFamily: FONT }}>
      {/* 하단 고정 바가 마지막 콘텐츠를 가리지 않도록 같은 높이만큼 자리를 둔다 */}
      <div aria-hidden="true" className="h-14 min-[1366px]:hidden" />
      <aside
        aria-label="퀵메뉴"
        className="fixed inset-x-0 bottom-0 z-[90] flex bg-white pb-[env(safe-area-inset-bottom)] shadow-[0_-4px_20px_rgba(18,26,42,0.1)] min-[1366px]:inset-x-auto min-[1366px]:bottom-auto min-[1366px]:right-4 min-[1366px]:top-1/2 min-[1366px]:-translate-y-1/2 min-[1366px]:flex-col min-[1366px]:gap-2 min-[1366px]:bg-transparent min-[1366px]:pb-0 min-[1366px]:shadow-none"
      >
        <a href={`tel:${TEL}`} className={`${ITEM} bg-[#1B263B] text-white`}>
          <span className="text-[#F5C842]">
            <PhoneIcon />
          </span>
          <span className="whitespace-nowrap">전화 상담</span>
          <span className="invisible absolute right-[calc(100%+10px)] top-1/2 hidden -translate-y-1/2 whitespace-nowrap rounded-full bg-[#1B263B] px-3.5 py-2 text-[15px] tabular-nums text-[#F5C842] opacity-0 shadow-[0_18px_40px_rgba(18,26,42,0.12)] transition-opacity group-hover:visible group-hover:opacity-100 group-focus-visible:visible group-focus-visible:opacity-100 min-[1366px]:block">
            {TEL}
          </span>
        </a>
        <a href={CHAT} target="_blank" rel="noopener noreferrer" title="새 창으로 열림" className={`${ITEM} bg-[#FEE500] text-[#191919]`}>
          <ChatIcon />
          <span className="whitespace-nowrap">채팅 상담</span>
          <ExternalMark />
        </a>
        <a href="/contact" className={`${ITEM} ${DIVIDER} bg-white text-[#172031]`}>
          <MessageIcon />
          <span className="whitespace-nowrap">온라인 상담</span>
        </a>
        <a href={BOOKING} target="_blank" rel="noopener noreferrer" title="새 창으로 열림" className={`${ITEM} ${DIVIDER} bg-white text-[#172031]`}>
          <ClipboardIcon />
          <span className="whitespace-nowrap">클래스 예약</span>
          <ExternalMark />
        </a>
      </aside>
    </div>
  );
}