AI 비서 연결 안내 히어로와 대화 예시 창

import { useState } from "react";

export default function AssistantConnectHero() {
  const [copied, setCopied] = useState(false);
  const url = "https://tempo.app/assistant";

  return (
    <section className="w-full bg-[#0b0b0f] px-5 py-16 text-zinc-100 sm:px-8 lg:py-24">
      <div className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-[5fr_6fr]">
        <div>
          <p className="text-[13px] font-semibold uppercase tracking-[0.2em] text-sky-300">Tempo Assistant</p>
          <h1 className="mt-3 text-4xl font-semibold tracking-tight sm:text-5xl">
            일정은 말로,
            <br />
            정리는 Tempo가
          </h1>
          <p className="mt-5 max-w-md text-[15px] leading-relaxed text-zinc-400">
            쓰고 있는 AI 비서에 Tempo 캘린더를 연결하면 &quot;목요일 오후에 회의 잡아줘&quot;라고 말하는 것만으로 일정이
            들어갑니다. 겹치는 일정은 먼저 물어보고, 확인한 것만 저장합니다.
          </p>
          <div className="mt-7 max-w-md space-y-2.5">
            <div className="flex items-center gap-2 rounded-xl border border-white/10 bg-black/40 py-1.5 pl-3.5 pr-1.5">
              <code className="min-w-0 flex-1 truncate font-mono text-[13px] text-zinc-300">{url}</code>
              <button
                type="button"
                onClick={() => {
                  navigator.clipboard?.writeText(url);
                  setCopied(true);
                  setTimeout(() => setCopied(false), 1500);
                }}
                className="h-8 shrink-0 rounded-lg bg-white px-3 text-[13px] font-medium text-zinc-900 transition hover:bg-zinc-200 active:scale-[0.98]"
              >
                {copied ? "복사됨" : "주소 복사"}
              </button>
            </div>
            <a
              href="#"
              className="flex h-11 items-center justify-center gap-1.5 rounded-xl border border-white/10 bg-white/[0.04] text-sm font-medium transition hover:border-white/20 hover:bg-white/[0.08]"
            >
              AI 비서에 연결하는 방법 보기
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden className="text-zinc-400">
                <path d="M6 3.5 10.5 8 6 12.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
          </div>
          <p className="mt-3 text-[13px] text-zinc-500">Claude, ChatGPT 등 원격 연결을 지원하는 AI 도구에서 쓸 수 있습니다.</p>
        </div>

        <figure
          aria-label="AI 비서에서 일정을 잡는 대화 예시"
          className="overflow-hidden rounded-2xl border border-white/15 bg-[#121218] shadow-[0_30px_70px_-30px_rgba(0,0,0,0.9)]"
        >
          <div className="flex items-center gap-1.5 border-b border-white/10 px-4 py-3" aria-hidden>
            <span className="h-2.5 w-2.5 rounded-full bg-white/15" />
            <span className="h-2.5 w-2.5 rounded-full bg-white/15" />
            <span className="h-2.5 w-2.5 rounded-full bg-white/15" />
            <span className="ml-3 text-xs text-zinc-500">AI 비서</span>
          </div>
          <div className="space-y-4 p-5 text-[13.5px] leading-relaxed">
            <p className="ml-auto w-fit max-w-[85%] rounded-xl border border-sky-400/25 bg-sky-400/10 px-3.5 py-2 text-sky-100">
              목요일 오후에 디자인 리뷰 1시간 잡아줘
            </p>
            <div className="space-y-1.5 text-[13px] text-zinc-500">
              <p>Tempo에서 목요일 빈 시간 찾기</p>
              <p>
                Tempo에 일정 추가 <span className="text-zinc-400">· 목 15:00–16:00</span>
              </p>
            </div>
            <p className="text-zinc-200">
              목요일 오후 3시부터 1시간 동안 &quot;디자인 리뷰&quot;를 잡았습니다. 참석자 초대는 Tempo에서 확인 후 보낼 수
              있어요.
            </p>
            <div className="flex w-fit items-center gap-2 rounded-lg border border-white/10 bg-black/40 px-3 py-2">
              <span className="h-8 w-1 rounded-full bg-sky-400" />
              <span>
                <span className="block text-[13px] font-medium text-zinc-100">디자인 리뷰</span>
                <span className="block text-xs text-zinc-500">10월 23일 (목) 15:00–16:00</span>
              </span>
            </div>
            <div className="flex h-10 items-center rounded-lg border border-white/10 bg-black/40 px-3 text-[13px] text-zinc-600" aria-hidden>
              메시지 입력
            </div>
          </div>
        </figure>
      </div>
    </section>
  );
}