(() => {
  const labels = [
    "제품 데모. Backend 담당 민수에게 결제 버튼이 비활성화되는 조건을 묻자, 민수's AI가 필수 약관에 동의하지 않았거나 결제 요청을 처리 중일 때라고 답합니다.",
    "제품 데모. 민수가 AI의 읽기 전용 작업 폴더를 payment-web으로 지정합니다. 개발 환경은 자동 답변, 배포 일정은 직접 확인, 고객 계약은 답변 거절로 설정합니다.",
    "제품 데모. 민수와 나눈 결제 버튼 대화에서 로딩 중 문구를 이어 묻습니다. 민수's AI가 결제 중…으로 바뀌고 요청이 끝날 때까지 중복 결제를 막는다고 답합니다.",
    "제품 데모. 민수는 휴가 중이고 AI는 응답 가능한 상태입니다. 지수가 입력창에서 결제 테스트 순서를 묻자, 민수's AI가 공유된 작업 폴더의 테스트 체크리스트를 참고해 카드·카카오페이와 실패·취소 케이스의 확인 순서를 안내합니다. 자동 답변은 민수의 앱이 실행 중이고 AI를 사용할 수 있을 때 가능합니다.",
  ];

  function DemoIcon({ name, className = "" }) {
    const paths = {
      chat: <path d="M20 11.5a7.5 7.5 0 0 1-7.5 7.5H5l-3 3V11.5a9 9 0 0 1 18 0Z M7 10h8 M7 14h5" />,
      settings: <><path d="M4 7h16M4 17h16" /><circle cx="9" cy="7" r="3" /><circle cx="15" cy="17" r="3" /></>,
      folder: <path d="M3 7V5a1 1 0 0 1 1-1h5l2 3h9a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7Z" />,
      check: <path d="m5 12 4 4L19 6" />,
      arrow: <path d="M12 19V5m-6 6 6-6 6 6" />,
      chevron: <path d="m9 5 7 7-7 7" />,
      attach: <path d="m8 13 6-6a3 3 0 0 1 4 4l-8 8a5 5 0 0 1-7-7l8-8" />,
      shield: <><path d="m12 3 8 3v6c0 4-4 7-8 9-4-2-8-5-8-9V6l8-3Z" /><path d="m8 12 3 3 5-6" /></>,
      search: <><circle cx="10" cy="10" r="6" /><path d="m15 15 5 5" /></>,
      people: <><path d="M3 20v-2a6 6 0 0 1 12 0v2M17 13a5 5 0 0 1 4 5v2M16 3a4 4 0 0 1 0 8" /><circle cx="9" cy="7" r="4" /></>,
      plus: <path d="M12 5v14M5 12h14" />,
      more: <><circle cx="5" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></>,
    };
    return <svg className={`pd-icon ${className}`} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{paths[name]}</svg>;
  }

  function AIMark({ small = false }) {
    return <span className={`pd-ai-mark${small ? " pd-ai-mark-small" : ""}`}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" fill="currentColor" /></svg></span>;
  }

  const conversations = [
    {
      question: "결제 버튼은 언제 비활성화돼요?",
      answer: [
        { text: "필수 약관에 동의하지 않았거나", strong: true },
        { text: "\n결제 요청을 처리 중일 때 비활성화돼요." },
      ],
    },
    {
      question: "그럼 로딩 중에는 어떤 문구가 보여요?",
      answer: [
        { text: "결제 중…", strong: true },
        { text: "으로 바뀌어요.\n요청이 끝날 때까지 중복 결제를 막습니다." },
      ],
    },
    {
      question: "결제 테스트는 어떤 순서로 진행하면 돼요?",
      answer: [
        { text: "카드 결제 → 카카오페이", strong: true },
        { text: " 순서로 확인하세요.\n실패·취소 케이스까지 확인한 뒤,\n결과는 테스트 기록에 남기면 됩니다." },
      ],
      source: "테스트 체크리스트",
    },
  ];

  // Reserve the final text layout while revealing letters in this component only.
  function Typewriter({ parts, delay, interval, animate, cursorAtEnd = false }) {
    const text = parts.map((part) => part.text).join("").replace(/\n/g, "");
    const total = Array.from(text).length;
    const [visible, setVisible] = React.useState(0);
    React.useLayoutEffect(() => {
      if (!animate) return;
      setVisible(0);
      const started = performance.now();
      let frame = 0;
      let previous = 0;
      const tick = (now) => {
        const count = Math.max(0, Math.min(total, Math.floor((now - started - delay) / interval) + 1));
        if (count !== previous) {
          previous = count;
          setVisible(count);
        }
        if (count < total) frame = window.requestAnimationFrame(tick);
      };
      frame = window.requestAnimationFrame(tick);
      return () => window.cancelAnimationFrame(frame);
    }, [animate, text, total, delay, interval]);
    let characterIndex = 0;
    return <span className="pd-typewriter">
      {parts.map((part, partIndex) => {
        const characters = Array.from(part.text).map((character, index) => {
          if (character === "\n") return <br key={index} />;
          const current = characterIndex++;
          const cursor = animate && current === visible - 1 && (visible < total || cursorAtEnd);
          return <span className={`pd-character${cursor ? " pd-character-cursor" : ""}`} key={index} style={{ opacity: !animate || current < visible ? 1 : 0 }}>{character}</span>;
        });
        return part.strong ? <strong key={partIndex}>{characters}</strong> : <React.Fragment key={partIndex}>{characters}</React.Fragment>;
      })}
    </span>;
  }

  function Message({ name = "지수", role = "PM", time = "10:42", children, reveal = false }) {
    return <div className={`pd-message${reveal ? " pd-arrive-question" : ""}`}>
      <span className="pd-person-avatar" data-person={name}>{name.slice(0, 1)}</span>
      <div className="pd-message-copy"><div className="pd-message-head"><strong>{name}</strong><span>{role}</span><time>{time}</time></div><p>{children}</p></div>
    </div>;
  }

  function Answer({ content, answerDelay = 0, animate, reveal = true, time = "10:42" }) {
    return <div className="pd-answer-wrap">
      {reveal && <div className="pd-thinking"><AIMark small /><span>답변 준비 중</span><span className="pd-dots"><i /><i /><i /></span></div>}
      <div className={`pd-answer${reveal ? " pd-arrive-answer" : ""}`}>
        <div className="pd-message-byline"><AIMark small /><strong>민수's AI</strong><span className="pd-ai-badge">자동 답변</span><time>{time}</time></div>
        <p><Typewriter parts={content.answer} delay={answerDelay + 160} interval={28} animate={animate} /></p>
        <div className={`pd-source${reveal ? " pd-arrive-source" : ""}`}><DemoIcon name="folder" /><span>payment-web</span><span className="pd-source-separator">/</span><span>{content.source || "Claude Code"}</span><DemoIcon name="chevron" /></div>
      </div>
    </div>;
  }

  function ChatScene({ conversationIndex, animate }) {
    const content = conversations[conversationIndex];
    const followup = conversationIndex === 1;
    const away = conversationIndex === 2;
    const questionEnd = 200 + (Array.from(content.question).length - 1) * 45;
    const sendAt = questionEnd + 350;
    const answerDelay = sendAt + 600;
    const answerLength = content.answer.reduce((length, part) => length + Array.from(part.text.replace(/\n/g, "")).length, 0);
    const [hasSent, setHasSent] = React.useState(false);
    React.useLayoutEffect(() => {
      if (!animate) return;
      setHasSent(false);
      const timeout = window.setTimeout(() => setHasSent(true), sendAt);
      return () => window.clearTimeout(timeout);
    }, [animate, sendAt]);
    const sent = !animate || hasSent;
    return <>
      <div className={`pd-chat-content${followup ? " pd-chat-followup" : ""}`} style={{ "--pd-send-at": `${sendAt}ms`, "--pd-thinking-at": `${sendAt}ms`, "--pd-answer-at": `${answerDelay}ms`, "--pd-source-at": `${answerDelay + 160 + answerLength * 28 + 120}ms` }}>
        <div className="pd-date">{away ? "어제" : "오늘"}</div>
        {followup ? <div className="pd-history">
          <Message>{conversations[0].question}</Message>
          <Answer content={conversations[0]} animate={false} reveal={false} />
        </div> : <div className="pd-history"><Message name="민수" role="Backend" time="10:40">{away ? <>카드·카카오페이 연동을 반영했어요.<br />테스트 케이스도 프로젝트 폴더에 있어요.</> : <>결제 버튼 동작을 정리해 뒀어요.<br />궁금한 점은 여기에 남겨 주세요.</>}</Message></div>}
        {away && <div className="pd-date">오늘</div>}
        <Message time={followup ? "10:43" : "10:42"} reveal>{content.question}</Message>
        <Answer content={content} answerDelay={answerDelay} animate={animate} time={followup ? "10:43" : "10:42"} />
      </div>
      <div className="pd-composer-area">
        <div className="pd-composer" data-composing={!sent} style={{ "--pd-send-press-at": `${sendAt - 120}ms` }}>
          <DemoIcon name="plus" />
          <span className="pd-composer-field"><span className="pd-composer-placeholder">민수에게 메시지 보내기</span><span className="pd-composer-draft"><Typewriter parts={[{ text: content.question }]} delay={200} interval={45} animate={animate} cursorAtEnd /></span></span>
          <span className="pd-send"><DemoIcon name="arrow" /></span>
        </div>
        <div className="pd-composer-hint"><span className="pd-online-dot" />민수가 허용한 범위에서 답변해요</div>
      </div>
    </>;
  }

  function SettingsScene() {
    return <div className="pd-settings-content">
      <div className="pd-settings-heading"><h4>공유 범위</h4><p>팀원에게 공유할 업무 맥락과 답변 규칙을 관리합니다.</p></div>
      <div className="pd-folder-group pd-arrive-question">
        <div className="pd-field-label">허용한 작업 폴더<span>1개</span></div>
        <div className="pd-folder-card"><span className="pd-folder-icon"><DemoIcon name="folder" /></span><div className="pd-folder-details"><strong>payment-web</strong><span>~/Projects/payment-web</span><span className="pd-readonly">Claude Code · 읽기 전용</span></div><span className="pd-folder-check"><DemoIcon name="check" /></span></div>
      </div>
      <div className="pd-rules pd-arrive-answer">
        <div className="pd-field-label">답변 규칙</div>
        <div className="pd-rule-row"><span>개발 환경</span><span className="pd-rule-status pd-rule-auto"><span />자동 답변</span></div>
        <div className="pd-rule-row"><span>배포 일정</span><span className="pd-rule-status pd-rule-review"><span />직접 확인</span></div>
        <div className="pd-rule-row"><span>고객 계약</span><span className="pd-rule-status pd-rule-decline"><span />답변 거절</span></div>
      </div>
      <div className="pd-settings-footnote pd-arrive-source"><DemoIcon name="shield" /><span>직접 확인할 질문도 규칙으로 정할 수 있어요.</span></div>
    </div>;
  }

  function Sidebar({ step }) {
    const settings = step === 1;
    const away = step === 3;
    const people = [
      ["민수", away ? "결제 테스트 순서" : "결제 버튼 동작", away ? "휴가 중" : "방금"],
      ["혜진", "결제 · 데모 범위", "10:42"],
      ["유나", "로그인 문의 확인", "오전"],
      ["도윤", "아이콘 에셋 전달", "어제"],
      ["서연", "온보딩 문구 검토", "어제"],
    ];
    return <div className="pd-sidebar">
      <div className="pd-sidebar-heading"><strong>대화</strong><DemoIcon name="plus" /></div>
      <div className="pd-search"><DemoIcon name="search" /><span>대화 검색</span><kbd>⌘ K</kbd></div>
      <div className="pd-list-label">최근 대화<span>5</span></div>
      {people.map(([name, preview, time], index) => <div className={`pd-thread${!settings && index === 0 ? " pd-thread-selected" : ""}`} key={name}>
        <span className="pd-thread-avatar" data-person={name}>{name.slice(0, 1)}</span>
        <div className="pd-thread-copy"><div><strong>{name}</strong><time>{time}</time></div><p>{preview}</p></div>
      </div>)}
      <div className="pd-online-list"><div className="pd-list-label">온라인 동료<span>3</span></div>{[["지훈", "Backend"], ["지민", "기획"], ["수빈", "디자인"]].map(([name, role]) => <div className="pd-online-person" key={name}><i /><strong>{name}</strong><span>{role}</span></div>)}</div>
      <div className={`pd-sidebar-foot${settings ? " pd-settings-selected" : ""}`}><DemoIcon name="settings" /><div><strong>내 AI 설정</strong><span>공유 범위 관리</span></div><DemoIcon name="chevron" /></div>
    </div>;
  }

  window.ProductDemo = function ProductDemo({ step = 0, animate = true }) {
    const activeStep = Math.max(0, Math.min(labels.length - 1, Math.floor(Number(step) || 0)));
    const shouldAnimate = animate;
    const settings = activeStep === 1;
    const away = activeStep === 3;
    return <div className={`pd-demo${shouldAnimate ? " pd-animated" : ""}`} data-away={away} role="img" aria-label={labels[activeStep]}>
      <div className="pd-appbar" aria-hidden="true"><div className="pd-brand"><AIMark small /><span className="pd-wordmark">Vanta<span>Green</span></span></div><span className="pd-workspace-label">제품팀 <DemoIcon name="chevron" /> 팀 워크스페이스</span><span className="pd-connected"><span className="pd-online-dot" />연결됨</span></div>
      <div className="pd-shell" aria-hidden="true">
        <div className="pd-rail">
          <div className="pd-rail-nav"><span className={`pd-rail-item${!settings ? " pd-rail-active" : ""}`}><DemoIcon name="chat" /></span><span className="pd-rail-item"><DemoIcon name="people" /></span><span className={`pd-rail-item${settings ? " pd-rail-active" : ""}`}><DemoIcon name="settings" /></span></div>
          <span className="pd-owner-avatar" data-person={settings ? "민수" : "지수"}>{settings ? "민" : "지"}</span>
        </div>
        <Sidebar step={activeStep} />
        <div className="pd-workspace">
          <div className="pd-header">{!settings && <span className="pd-header-avatar" data-person="민수">민<span /></span>}<div><h3>{settings ? "내 AI 설정" : "민수"}{away && <span className="pd-away-badge">휴가 중</span>}</h3><p>{settings ? "민수 · 개인 설정" : "Backend · 결제 프로젝트"}</p></div>{away && <span className="pd-agent-available"><span className="pd-online-dot" />AI 응답 가능</span>}<span className="pd-header-more"><DemoIcon name="more" /></span></div>
          <div key={activeStep} className={`pd-stage pd-stage-${activeStep}`}>
            {settings ? <SettingsScene /> : <ChatScene conversationIndex={activeStep === 2 ? 1 : away ? 2 : 0} animate={shouldAnimate} />}
          </div>
        </div>
      </div>
    </div>;
  };
})();