import React, { useState, useEffect, useRef } from 'react'; // ── 인라인 문의 폼 (AI 버블 내부) ────────────────────────────────── function InlineContactForm({ conversationId, setConversationId, initialShowPlan = false, onSwitchForm }) { const [honeypot, setHoneypot] = useState(''); const [formLoadTime] = useState(Date.now()); const HONEYPOT_FIELD_NAME = 'contact_url_ref_x7k2'; const MIN_SUBMIT_TIME_MS = 3000; const CONFIG = { labels: { name: "お名前 *", email: "メールアドレス *", company: "会社名 *", phone: "電話番号 *", inquiryType: "お問い合わせ種別", workspaceType: "ご希望のサブスクリプションプラン *", subject: "件名", message: "お問い合わせ内容 *" }, placeholders: { name: "お名前", email: "メールアドレス", company: "会社名", phone: "電話番号", subject: "件名", message: "お問い合わせ内容をご入力ください" }, messages: { success: "お問い合わせを受け付けいたしました。\n\n組織とともに進化する無限のエージェントホームページ isshoniAI にご関心をお寄せいただき、誠にありがとうございます。\nご記入いただいた内容は担当者に速やかに転送されました。確認の上、ご登録の連絡先へ折り返しご連絡申し上げます。", requiredFields: "必須項目をすべてご入力ください。", invalidEmail: "有効なメールアドレスをご入力ください。", consentRequired: "プライバシーポリシーへの同意が必要です。", error: "送信中にエラーが発生しました。しばらくしてから再度お試しください。", }, }; const [formData, setFormData] = useState({ name: '', email: '', company: '', phone: '', inquiryType: '', workspaceType: '', subject: '', message: '', consent: false }); const [isLoading, setIsLoading] = useState(false); const [submitStatus, setSubmitStatus] = useState(null); const [statusMsg, setStatusMsg] = useState(''); const [personalEmailError, setPersonalEmailError] = useState(false); const FREE_EMAIL_DOMAINS = [ 'gmail.com','googlemail.com','yahoo.com','yahoo.co.kr','outlook.com','hotmail.com','live.com', 'naver.com','nate.com','daum.net','hanmail.net','kakao.com', 'icloud.com','me.com','mac.com','aol.com','protonmail.com','proton.me', 'zoho.com','yandex.com','mail.com','gmx.com','gmx.net', 'qq.com','163.com','126.com','sina.com', ]; const isPersonalEmail = (email) => { const domain = email.split('@')[1]?.toLowerCase(); if (!domain) return false; return FREE_EMAIL_DOMAINS.includes(domain); }; const [formStartTime] = useState(Date.now()); const [showPlanAndPurpose, setShowPlanAndPurpose] = useState(initialShowPlan); const [billingTab, setBillingTab] = useState('monthly'); const handleChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); if (name === 'email') { if (initialShowPlan && value.includes('@')) { setPersonalEmailError(isPersonalEmail(value)); } else { setPersonalEmailError(false); } } }; const sendToOfficenext = async (fd) => { try { const isApply = initialShowPlan; const tag = isApply ? '[PlanitAI お申し込み受付]' : '[PlanitAI お問い合わせ受付]'; const header = isApply ? 'PlanitAI お申し込み' : 'PlanitAI お問い合わせ'; let msg = `${tag}\n\nお名前: ${fd.name}\nメールアドレス: ${fd.email}\n会社名: ${fd.company || '未入力'}\n電話番号: ${fd.phone || '未入力'}`; if (isApply) { msg += `\nご利用目的: ${fd.subject || '未入力'}`; } else { msg += `\nお問い合わせ種別: ${fd.inquiryType || '未選択'}\n件名: ${fd.subject || '未入力'}`; } msg += `\n\nお問い合わせ内容: ${fd.message}`; await API.ToolCall('onext_notification_as_gachiai_fixed', { body: { whole: false, to: ['sbtmxk200@jiran.com'], template: 'text', type: 'static', important: isApply, items: { header, contents: msg }, }, }); } catch (e) { console.error('OfficeNEXT 전송 실패:', e); } }; const handleSubmit = async (e) => { e.preventDefault(); if (isLoading || submitStatus === 'success') return; const { name, email, company, phone, inquiryType, workspaceType, subject, message, consent } = formData; if (honeypot) { setSubmitStatus('success'); setStatusMsg(CONFIG.messages.success); return; } const elapsedMs = Date.now() - formLoadTime; if (elapsedMs < MIN_SUBMIT_TIME_MS) { setSubmitStatus('success'); setStatusMsg(CONFIG.messages.success); return; } if (!name || !email || !company || !phone || !message || (showPlanAndPurpose && (!workspaceType || !subject))) { setSubmitStatus('error'); setStatusMsg(CONFIG.messages.requiredFields); return; } if (!showPlanAndPurpose && !consent) { setSubmitStatus('error'); setStatusMsg(CONFIG.messages.consentRequired); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setSubmitStatus('error'); setStatusMsg(CONFIG.messages.invalidEmail); return; } if (showPlanAndPurpose && isPersonalEmail(email)) { setPersonalEmailError(true); setSubmitStatus('error'); setStatusMsg('会社のメールアドレスをご入力ください。'); return; } setIsLoading(true); setSubmitStatus(null); try { const subjectLine = formData.subject || 'お問い合わせフォーム受付'; const body = `[isshoniAI ホームページお問い合わせフォーム受付]\nお名前: ${name}\nメールアドレス: ${email}\n会社名: ${company || '未入力'}\n電話番号: ${phone || '未入力'}\nお問い合わせ種別: ${inquiryType || '未選択'}\n件名: ${subjectLine}\n\nお問い合わせ内容:\n${message}`.trim(); await API.Site_SendEmailToAdmin(subjectLine, body, Date.now() - formStartTime); await sendToOfficenext(formData); setSubmitStatus('success'); setStatusMsg(CONFIG.messages.success); } catch (err) { setSubmitStatus('error'); setStatusMsg(err.message?.includes('HTTP 403') ? '不正なアクセスが検出されました。' : CONFIG.messages.error); } finally { setIsLoading(false); } }; const inp = { width: '100%', padding: '8px 11px', border: '1px solid rgba(70,93,170,0.24)', borderRadius: '8px', fontSize: '13px', color: '#0f172a', background: '#ffffff', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.15s, background 0.15s', }; const lbl = { display: 'block', fontSize: '11px', fontWeight: 700, color: 'var(--color-brand, #465daa)', marginBottom: '4px', letterSpacing: '0.05em' }; return (

下記フォームにご記入いただきますと、担当者よりご連絡申し上げます。

{CONFIG.labels.name} { e.target.style.borderColor = 'var(--color-brand, #465daa)'; e.target.style.background = 'rgba(70,93,170,0.05)'; }} onBlur={e => { e.target.style.borderColor = 'rgba(70,93,170,0.24)'; e.target.style.background = '#ffffff'; }} />

{CONFIG.labels.email} { e.target.style.borderColor = 'var(--color-brand, #465daa)'; e.target.style.background = 'rgba(70,93,170,0.05)'; }} onBlur={e => { e.target.style.borderColor = 'rgba(70,93,170,0.24)'; e.target.style.background = '#ffffff'; }} />

{CONFIG.labels.company} { e.target.style.borderColor = 'var(--color-brand, #465daa)'; e.target.style.background = 'rgba(70,93,170,0.05)'; }} onBlur={e => { e.target.style.borderColor = 'rgba(70,93,170,0.24)'; e.target.style.background = '#ffffff'; }} />

{CONFIG.labels.phone} { e.target.style.borderColor = 'var(--color-brand, #465daa)'; e.target.style.background = 'rgba(70,93,170,0.05)'; }} onBlur={e => { e.target.style.borderColor = 'rgba(70,93,170,0.24)'; e.target.style.background = '#ffffff'; }} />

{!showPlanAndPurpose && (

{CONFIG.labels.inquiryType}

)} {showPlanAndPurpose && (

{CONFIG.labels.workspaceType} {(() => { const plans = { monthly: [ { name: 'Basic', price: '10万ウォン', desc: '月額 / 税別', detail: '' }, { name: 'Standard', price: '30万ウォン', desc: '月額 / 税別', detail: '', popular: true }, { name: 'Business', price: '100万ウォン', desc: '月額 / 税別', detail: '' }, { name: 'Premium', price: '別途ご相談', desc: '別途ご相談', detail: '' }, ], yearly: [ { name: 'Free Trial', price: '無料体験', desc: '15日間体験', detail: 'AI Agent 制限範囲内でご利用可能' }, { name: 'Basic', price: '27万ウォン', desc: '年間324万ウォン (10%↓) / 税別', detail: '月5,000クレジット含む' }, { name: 'Standard', price: '90万ウォン', desc: '年間1,080万ウォン (10%↓) / 税別', detail: '月16,000クレジット含む', popular: true }, { name: 'Max', price: 'カスタム', desc: '別途ご相談', detail: '月間クレジットは\nStandardの5〜20倍' }, ], }; const currentPlans = plans[billingTab]; const handleSelect = (plan) => { const billing = billingTab === 'monthly' ? '月額' : '年額'; const label = `${plan.name} (${billing}) - ${plan.price} / ${plan.desc} / ${plan.detail.replace('\n', ' ')}`; setFormData(prev => ({ ...prev, workspaceType: label })); }; return (

{[{ key: 'monthly', label: '料金を選択' }, { key: 'consult', label: 'ご相談の上で決定' }].map(tab => ( ))}

{billingTab === 'consult' && (

担当者とご相談の上、プランをお決めいただけます。
下記お問い合わせ欄にご要望をご記入ください。

)} {billingTab !== 'consult' &&

{currentPlans.map((plan) => { const billing = billingTab === 'monthly' ? '月額' : '年額'; const selectedLabel = `${plan.name} (${billing}) - ${plan.price} / ${plan.desc} / ${plan.detail.replace('\n', ' ')}`; const isSelected = formData.workspaceType === selectedLabel; return (

handleSelect(plan)} style={{ position: 'relative', padding: '10px 8px', borderRadius: '10px', border: isSelected ? '1px solid rgba(70,93,170,0.6)' : '1px solid rgba(0,0,0,0.08)', background: isSelected ? 'rgba(70,93,170,0.08)' : '#ffffff', cursor: 'pointer', transition: 'all 0.15s', textAlign: 'center', overflow: 'hidden', boxShadow: isSelected ? '0 2px 8px rgba(70,93,170,0.2)' : '0 1px 3px rgba(0,0,0,0.05)', }}> {plan.popular && (

人気

)}

{plan.name}

{plan.originalPrice && {plan.originalPrice}} {plan.price}

{plan.desc}

{plan.detail.replace('\\n', '\n')}

{isSelected && (

)}

); })}

}

); })()}

)}

{showPlanAndPurpose ? 'ご利用目的 *' : CONFIG.labels.subject} { e.target.style.borderColor = 'var(--color-brand, #465daa)'; e.target.style.background = 'rgba(70,93,170,0.05)'; }} onBlur={e => { e.target.style.borderColor = 'rgba(70,93,170,0.24)'; e.target.style.background = '#ffffff'; }} />

{CONFIG.labels.message}

{ e.target.style.borderColor = 'var(--color-brand, #465daa)'; e.target.style.background = 'rgba(70,93,170,0.05)'; }}
          onBlur={e => { e.target.style.borderColor = 'rgba(70,93,170,0.24)'; e.target.style.background = '#ffffff'; }} />
      </div>

{!showPlanAndPurpose && (
        <div style={{ padding: '10px 12px', borderRadius: '10px', border: '1px solid rgba(70,93,170,0.2)', background: 'rgba(70,93,170,0.04)' }}>
          <p style={{ margin: '0 0 8px', fontSize: '12px', color: '#64748b' }}>プライバシーポリシーに同意の上、お問い合わせください。</p>
          <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px', color: '#334155' }}>
            <input type="checkbox" name="consent" checked={!!formData.consent} onChange={handleChange} />
            <a href="/privacy-policy" target="_blank" rel="noreferrer" style={{ color: 'var(--color-brand, #465daa)', textDecoration: 'underline' }}>
              プライバシーポリシーに同意する
            </a>
          </label>
        </div>
      )}

{personalEmailError && showPlanAndPurpose && (
        <div style={{ padding: '12px 14px', borderRadius: '10px', fontSize: '12px', background: 'rgba(251,191,36,0.08)', border: '1px solid rgba(251,191,36,0.3)', color: '#b45309', lineHeight: 1.7 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px', fontWeight: 700, fontSize: '13px' }}>
            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
            </svg>
            会社のメールアドレスが必要です
          </div>
          <p style={{ margin: 0 }}>PlanitAIは企業・組織単位での導入を前提としております。会社のメールアドレスにてお申し込みください。</p>
        </div>
      )}

{submitStatus === 'error' && (
        <div style={{ padding: '8px 10px', borderRadius: '8px', fontSize: '12px', background: 'rgba(239,68,68,0.06)', border: '1px solid rgba(239,68,68,0.2)', color: '#dc2626', display: 'flex', alignItems: 'center', gap: '5px' }}>
          <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
          </svg>
          {statusMsg}
        </div>
      )}

{submitStatus === 'success' && (
        <div style={{ padding: '14px 16px', background: 'rgba(34,197,94,0.06)', borderRadius: '12px', border: '1px solid rgba(34,197,94,0.2)', textAlign: 'center' }}>
          <div style={{ fontSize: '26px', marginBottom: '6px' }}>✅</div>
          <p style={{ fontSize: '12px', fontWeight: 600, color: '#16a34a', whiteSpace: 'pre-line', lineHeight: 1.7 }}>{statusMsg}</p>
        </div>
      )}

<button type="submit" disabled={isLoading}
        style={{
          width: '100%', padding: '10px',
          borderRadius: '10px', border: 'none',
          background: isLoading ? 'rgba(70,93,170,0.45)' : 'var(--color-brand, #465daa)',
          color: '#ffffff', fontSize: '13px', fontWeight: 700,
          cursor: isLoading ? 'not-allowed' : 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
          transition: 'opacity 0.15s',
          boxShadow: isLoading ? 'none' : '0 4px 20px -6px rgba(70,93,170,0.45)',
        }}>
        {isLoading ? (
          <>
            <svg style={{ animation: 'spin 1s linear infinite' }} width="13" height="13" fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" opacity="0.25" />
              <path fill="currentColor" opacity="0.75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
            </svg>
            送信中...
          </>
        ) : (
          <>
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            送信する
          </>
        )}
      </button>

</form>
  );
}

// ── 메인 Chat Widget ─────────────────────────────────────────────
export default function ChatWidget() {
  // ── Rate Limit 설정 (Constants로 제어) ──
  const COOLDOWN_MS = (Constants.cooldownSeconds ?? 3) * 1000;
  const MAX_MESSAGES = Constants.maxMessagesPerSession ?? 20;

const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [conversationId, setConversationId] = useState(null);
  const [hasUnread, setHasUnread] = useState(false);
  const [lastSentAt, setLastSentAt] = useState(0);
  const [userMsgCount, setUserMsgCount] = useState(0);
  const [scrollEnergy, setScrollEnergy] = useState(0);
  const [scrollYPos, setScrollYPos] = useState(0);
  const [motionPhase, setMotionPhase] = useState(0);

const abortRef = useRef(null);
  const messagesContainerRef = useRef(null);
  const inputRef = useRef(null);

const scrollToBottom = () => {
    if (messagesContainerRef.current) {
      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
    }
  };

useEffect(() => {
    if (messages.length > 0) setTimeout(scrollToBottom, 50);
  }, [messages]);

const openContactFormRef = useRef(openContactForm);
  openContactFormRef.current = openContactForm;

useEffect(() => {
    const checkCookie = () => {
      try {
        if (document.cookie.includes('open-gachi-contact=1')) {
          document.cookie = 'open-gachi-contact=;path=/;max-age=0';
          setIsOpen(true);
          setTimeout(() => { openContactFormRef.current(); }, 300);
          return true;
        }
      } catch(e) {}
      return false;
    };
    if (!checkCookie()) {
      const interval = setInterval(() => {
        if (checkCookie()) clearInterval(interval);
      }, 300);
      const timeout = setTimeout(() => clearInterval(interval), 10000);
      return () => { clearInterval(interval); clearTimeout(timeout); };
    }
  }, []);

useEffect(() => {
    const handleOpenContact = (withPlan = false) => {
      setIsOpen(true);
      setTimeout(() => { openContactFormRef.current(withPlan); }, 150);
    };
    let bc = null;
    try {
      bc = new BroadcastChannel('gachi-contact-channel');
      bc.onmessage = (event) => {
        if (event.data?.type === 'open-gachi-contact') handleOpenContact();
        if (event.data?.type === 'open-gachi-contact-with-plan') handleOpenContact(true);
      };
    } catch(e) {}
    const handleMessage = (event) => {
      if (event.data?.type === 'open-gachi-contact') handleOpenContact();
      if (event.data?.type === 'open-gachi-contact-with-plan') handleOpenContact(true);
    };
    window.addEventListener('message', handleMessage);
    const handleCustom = () => { handleOpenContact(); };
    window.addEventListener('open-gachi-contact', handleCustom);
    return () => {
      if (bc) bc.close();
      window.removeEventListener('message', handleMessage);
      window.removeEventListener('open-gachi-contact', handleCustom);
    };
  }, []);

useEffect(() => {
    if (isOpen) {
      setHasUnread(false);
      setTimeout(() => inputRef.current?.focus(), 300);
    }
    const isMobile = window.innerWidth <= 480;
    if (isMobile) {
      if (isOpen) {
        document.body.style.overflow = 'hidden';
        document.body.style.position = 'fixed';
        document.body.style.width = '100%';
      } else {
        document.body.style.overflow = '';
        document.body.style.position = '';
        document.body.style.width = '';
      }
    }
    return () => {
      document.body.style.overflow = '';
      document.body.style.position = '';
      document.body.style.width = '';
    };
  }, [isOpen]);

useEffect(() => {
    let rafId = null;
    let decayTimer = null;
    let phaseRafId = null;
    let lastY = window.scrollY || window.pageYOffset || 0;

const updateFromScroll = () => {
      const y = window.scrollY || window.pageYOffset || 0;
      const delta = Math.abs(y - lastY);
      lastY = y;
      setScrollYPos(y);
      if (delta > 0) {
        setScrollEnergy(prev => Math.min(140, prev + Math.min(28, delta * 0.65) + 5));
      }
    };

const onScrollLike = () => {
      if (rafId != null) return;
      rafId = requestAnimationFrame(() => {
        rafId = null;
        updateFromScroll();
      });
    };

const tickPhase = () => {
      setMotionPhase(prev => (prev + 0.035) % (Math.PI * 2));
      phaseRafId = requestAnimationFrame(tickPhase);
    };

decayTimer = setInterval(() => {
      setScrollEnergy(prev => (prev <= 0.2 ? 0 : prev * 0.965));
    }, 16);

phaseRafId = requestAnimationFrame(tickPhase);

return () => {
      window.removeEventListener('scroll', onScrollLike);
      window.removeEventListener('wheel', onScrollLike);
      window.removeEventListener('touchmove', onScrollLike);
      window.removeEventListener('resize', onScrollLike);
      if (rafId != null) cancelAnimationFrame(rafId);
      if (phaseRafId != null) cancelAnimationFrame(phaseRafId);
      if (decayTimer) clearInterval(decayTimer);
    };
  }, []);

const stopLoading = () => {
    if (abortRef.current) { abortRef.current.abort(); abortRef.current = null; }
    setLoading(false);
  };

const isGuideRelatedQuery = (text) => {
    const guideKeywords = ['어떻게', '방법', '하려면', '하는법', '설정', '업로드', '만들기', '추가', '사용', '기능', '가이드', '도움말', '알려', '적용', '변경', '삭제', '등록', '연결', '확인', '열기', '닫기', '저장', '배포', '공개', '수정', '편집'];
    const namoKeywords = ['잇쇼니', '사이트빌더', 'isshoni', 'sitebuilder', '페이지', '위젯', '도메인', '챗봇', '문서', '에디터', '템플릿', '메뉴', '헤더', '푸터', '이미지', '자산', 'assets', '블로그', '게시글', '카테고리', '회원', '로그인', 'css', 'html', 'javascript'];
    const lower = text.toLowerCase();
    const hasGuide = guideKeywords.some(k => lower.includes(k));
    const hasNamo = namoKeywords.some(k => lower.includes(k));
    // 가이드 키워드만 있어도 검색 수행 (나모 주어 없이도 답변 가능)
    return hasGuide || hasNamo;
  };

const buildContextMessage = async (userMessage) => {
    try {
      const guideQuery = isGuideRelatedQuery(userMessage);

let searchResult = { results: [] };
      let menuResult = { items: [] };

// 검색 정확도를 높이기 위해 핵심 키워드만 추출
      const extractSearchQuery = (text) => {
        // 불필요한 조사/어미/의문사 제거 후 핵심어 추출
        const stopWords = ['어떻게', '어떻게', '하나요', '하려면', '하는법', '하는 법', '있나요', '있어요', '인가요', '인지', '알려줘', '알려주세요', 'isshoniAI사이트빌더에서', 'isshoniAI에서', '에서', '을', '를', '이', '가', '은', '는', '의', '로', '으로', '에', '도', '만', '까지', '부터'];
        let q = text;
        stopWords.forEach(sw => { q = q.replace(new RegExp(sw, 'g'), ' '); });
        return q.replace(/\s+/g, ' ').trim().slice(0, 60);
      };
      const searchQuery = guideQuery ? extractSearchQuery(userMessage) : userMessage;

try {
        const [sr, mr] = await Promise.all([
          guideQuery
            ? API.Docs_SearchDocuments({ query: searchQuery, limit: 8, type: 'ARTICLE' })
            : Promise.resolve({ results: [] }),
          API.Site_GetMenuItems(),
        ]);
        searchResult = sr || { results: [] };
        menuResult = mr || { items: [] };
      } catch (apiErr) {
        console.warn('RAG API 호출 실패 (폴백 사용):', apiErr);
      }

const siteInfo = [
        'サイト名: PlanitAI (一緒にAI サイトビルダー)',
        '説明: 企業のデータを学習し、顧客と対話しながら、自律的にビジネスを遂行するAIエージェントホームページビルダー',
        '主な機能: AIチャットボット、ドキュメントベースの知識学習、ページエディター、ウィジェットシステム、ユーザー認証、ドメイン接続',
      ].join('\n');

const publicPages = (menuResult.items || []).filter(p => !p.requiredAuthLevel || p.requiredAuthLevel === 0);
      const menuInfo = publicPages.length > 0
        ? '主なページ:\n' + publicPages.map(p => `  - ${p.title} (${p.path})`).join('\n')
        : '';

const DISTANCE_THRESHOLD = 0.65;
      const results = searchResult.results || [];
      const filteredDocs = results.filter(doc => typeof doc._distance !== 'number' || doc._distance <= DISTANCE_THRESHOLD);
      // 벡터 검색 결과가 없을 경우, 제목 키워드 매칭으로 보완
      const queryWords = userMessage.replace(/[^\w가-힣\s]/g, '').split(/\s+/).filter(w => w.length >= 2);
      const titleMatchDocs = filteredDocs.length === 0 && queryWords.length > 0
        ? results.filter(doc => queryWords.some(w => (doc.title || '').includes(w)))
        : [];
      // 벡터 검색 결과가 없을 경우 하드코딩된 fallback 문서로 보완
      const FALLBACK_DOCS = [
        { id: 'b509d3dba9594de08d7b', title: '이미지 올리기', thumbUrl: null, excerpt: 'PlanitAI에서 이미지를 업로드하고 관리하는 방법을 안내합니다.' },
      ];
      const imageKeywords = ['이미지', '사진', '업로드', '올리기', '파일', 'image', 'upload', 'assets', '자산'];
      const needsImageGuide = imageKeywords.some(k => userMessage.toLowerCase().includes(k));

const systemPrompt = [
        'あなたはPlanitAIの公式AIアシスタントです。',
        '以下のサイト情報および関連ドキュメントをもとに、訪問者のご質問に丁寧かつ正確に日本語でお答えください。',
        'ご不明な点は推測せず、担当者へのお問い合わせをご案内ください。',
        '',
        '=== 사이트 정보 ===',
        siteInfo,
        menuInfo,
      ].filter(Boolean).join('\n');

const docsSection = relevantDocs
        ? `\n\n=== 関連ドキュメント ===\n${relevantDocs}`
        : '';

return { prompt: `${systemPrompt}${docsSection}\n\n=== ユーザーの質問 ===\n${userMessage}`, relatedDocs };
    } catch (e) {
      console.error('RAG context build failed (전체 폴백):', e);
      return { prompt: userMessage, relatedDocs: [] };
    }
  };

const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
  };

const startNewConversation = () => {
    setMessages([]); setConversationId(null); setError(null);
    setLastSentAt(0); setUserMsgCount(0);
  };

const SITE_PAGES = [
    { title: '製品詳細', path: '/speipication', keywords: ['製品', '詳細', '機能', 'スペック', '仕様', 'どのように動作', 'どんな機能', '何の機能'] },
    { title: 'ビジネス提案', path: '/business-inquiry', keywords: ['ビジネス', '提案', 'パートナー', '協業', '連携', '提携', '事業'] },
    { title: '料金', path: '/price', keywords: ['料金', '価格', 'プラン', 'サブスクリプション', 'コスト', 'いくら', '課金', '無料', '有料', '月額', '年額'] },
    { title: '活用事例', path: '/traction', keywords: ['活用事例', '事例', '導入事例', '成功事例', 'リファレンス', '実際に'] },
    { title: 'ユーザーガイド', path: '/guide', keywords: ['ガイド', '使い方', 'チュートリアル', 'ヘルプ', 'マニュアル', '説明書', '使用方法'] },
    { title: 'アップデート', path: '/update', keywords: ['アップデート', '新機能', 'リリース', '変更点', 'パッチ', '最新'] },
  ];

const detectRelatedPages = (text) => {
    if (!text) return [];
    const lower = text.toLowerCase();
    return SITE_PAGES.filter(page =>
      page.keywords.some(kw => lower.includes(kw.toLowerCase())) ||
      lower.includes(page.path.toLowerCase())
    );
  };

const SUGGESTED = [
    '当社に適したAI導入方法を教えてください。',
    'AIソリューションはどこまで対応していますか？',
    '導入前にはどのような相談ができますか？',
    'PlanitAI お問い合わせ >',
  ];

const DUMMY_ANSWERS = {
    '当社に適したAI導入方法を教えてください。': `企業ごとの業務内容や課題、導入目的に応じて、最適なAI導入プランをご提案いたします。

一般的には、現状の業務分析から課題の整理、優先順位の設定、PoC（概念実証）による効果検証を経て、段階的に導入・展開していきます。

AIソリューションの導入だけでなく、AI研修や業務プロセスの自動化なども組み合わせながら、無理のない実践的なロードマップをご提案いたします。

まずはお気軽にご相談ください。貴社の状況に合わせた最適な進め方をご案内いたします。`,
    'AIソリューションはどこまで対応していますか？': `企画から運用・改善まで、一貫してサポートしております。

具体的には、要件整理、技術設計、システム開発・既存システムとの連携、テスト、導入、運用・改善まで幅広く対応可能です。

また、社内システムとの連携やセキュリティ・権限管理の設計、ユーザー向けの教育・定着支援まで含め、AIを実際の業務で継続的に活用できる環境づくりをサポートいたします。`,
    '導入前にはどのような相談ができますか？': `導入前のご相談では、まず現在の業務課題や導入目的について詳しくお伺いします。

そのうえで、活用可能なAIの導入イメージ、期待できる効果、優先的に取り組むべき範囲、概算のスケジュールやご予算の目安をご案内いたします。

ご相談後には、PoC（概念実証）やパイロット導入を含めた実現可能な初期提案をご用意いたしますので、社内でのご検討資料としてもご活用いただけます。`,
  };

const isOrangeBtn = (q) => q === 'PlanitAI お問い合わせ >';

const baseWave = Math.sin(motionPhase + scrollYPos / 220);
  const detailWave = Math.sin(motionPhase * 1.7 + scrollYPos / 310);
  const fabFloatY = -Math.min(20, scrollEnergy * 0.22) + baseWave * 2.6 + detailWave * 1.1;
  const fabScale = 1 + Math.min(0.12, scrollEnergy / 300) + detailWave * 0.01;
  const fabRotate = Math.sin(motionPhase * 1.2 + scrollYPos / 180) * (1.4 + Math.min(2.8, scrollEnergy / 30));
  const fabShadow = 0.28 + Math.min(0.28, scrollEnergy / 260);

return (
    <>
      <style>{`
        @media (max-width: 480px) {
          .chat-window {
            bottom: 0 !important; right: 0 !important;
            left: 0 !important; top: 0 !important;
            width: 100% !important; height: 100dvh !important;
            border-radius: 0 !important;
          }
          .fab-mobile-hide { display: none !important; }
          .close-mobile-btn { display: flex !important; }
        }
        @keyframes fadeSlideUp {
          from { opacity: 0; transform: translateY(16px) scale(0.97); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes dotBounce {
          0%, 80%, 100% { transform: translateY(0); }
          40%            { transform: translateY(-5px); }
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes msgIn {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes waterFabMorph {
          0%, 100% { border-radius: 52% 48% 44% 56% / 58% 42% 56% 44%; }
          33% { border-radius: 60% 40% 56% 44% / 44% 56% 40% 60%; }
          66% { border-radius: 42% 58% 48% 52% / 60% 40% 58% 42%; }
        }
        @keyframes dropletRise {
          0% { transform: translate3d(0, 0, 0) scale(0.72); opacity: 0; }
          20% { opacity: 0.55; }
          100% { transform: translate3d(0, -24px, 0) scale(1.08); opacity: 0; }
        }
        .chat-window { animation: fadeSlideUp 0.25s cubic-bezier(0.16,1,0.3,1) both; }
        .namo-water-fab {
          animation: waterFabMorph 3.1s ease-in-out infinite;
          background: radial-gradient(circle at 30% 24%, #8ea2e1 0%, #6f84cf 24%, var(--color-brand, #465daa) 62%, #33457f 100%) !important;
          filter: saturate(1.08);
          will-change: border-radius;
        }
        .dot1 { animation: dotBounce 1.2s ease-in-out infinite; animation-delay: 0ms; }
        .dot2 { animation: dotBounce 1.2s ease-in-out infinite; animation-delay: 160ms; }
        .dot3 { animation: dotBounce 1.2s ease-in-out infinite; animation-delay: 320ms; }
        .msg-scroll::-webkit-scrollbar { width: 4px; }
        .msg-scroll::-webkit-scrollbar-track { background: transparent; }
        .msg-scroll::-webkit-scrollbar-thumb { background: rgba(70,93,170,0.24); border-radius: 99px; }
        .chat-input::placeholder { color: #94a3b8; }
        .chat-input:focus { outline: none; }
        .msg-bubble { animation: msgIn 0.2s ease both; }
        .namo-suggest-btn:hover { border-color: rgba(70,93,170,0.4) !important; background: rgba(70,93,170,0.05) !important; color: var(--color-brand, #465daa) !important; }
        .namo-suggest-btn-orange:hover { border-color: rgba(70,93,170,0.55) !important; background: rgba(70,93,170,0.08) !important; color: var(--color-brand, #465daa) !important; }
        .namo-new-chat-btn:hover { background: rgba(255,255,255,0.25) !important; }
      `}</style>

{isOpen && (
        <div className="chat-window" style={{
          position: 'fixed',
          bottom: 'var(--chat-bottom, 96px)',
          right: 'var(--chat-right, 24px)',
          width: 'min(440px, 100vw)',
          height: 'min(640px, 100dvh)',
          background: '#ffffff',
          borderRadius: '20px',
          boxShadow: '0 24px 64px rgba(0,0,0,0.12), 0 0 0 1px rgba(70,93,170,0.14), 0 4px 16px rgba(70,93,170,0.10)',
          display: 'flex', flexDirection: 'column', overflow: 'hidden',
          zIndex: 9999,
        }}>
          {/* Header */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '14px 16px',
            background: 'var(--color-brand, #465daa)',
            flexShrink: 0,
          }}>
            <div style={{ fontSize: '18px', fontWeight: 800, color: '#ffffff', letterSpacing: '-0.5px', lineHeight: 1.2 }}>PlanitAI</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
              <button className="namo-new-chat-btn" onClick={startNewConversation}
                style={{
                  display: 'flex', alignItems: 'center', gap: '5px',
                  padding: '5px 11px', borderRadius: '8px',
                  border: '1px solid rgba(255,255,255,0.3)', background: 'rgba(255,255,255,0.15)',
                  color: '#ffffff', fontSize: '12px', fontWeight: 600,
                  cursor: 'pointer', transition: 'all 0.15s',
                }}>
                <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M12 4v16m8-8H4" />
                </svg>
                新しいチャット
              </button>
              <button className="close-mobile-btn" onClick={() => setIsOpen(false)}
                style={{
                  display: 'none', alignItems: 'center', justifyContent: 'center',
                  width: '32px', height: '32px', borderRadius: '8px',
                  border: '1px solid rgba(255,255,255,0.3)', background: 'rgba(255,255,255,0.15)',
                  color: '#ffffff', cursor: 'pointer', transition: 'all 0.15s',
                }}>
                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>

{/* Messages */}
          <div ref={messagesContainerRef} className="msg-scroll"
            style={{ flex: 1, overflowY: 'auto', padding: '16px', display: 'flex', flexDirection: 'column', gap: '10px', background: '#fafafa' }}>

<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', textAlign: 'center', paddingBottom: messages.length > 0 ? '4px' : '0', marginBottom: messages.length > 0 ? '4px' : '0' }}>
              {messages.length === 0 && (
                <>
                  <div style={{
                    width: '56px', height: '56px', borderRadius: '16px',
                    background: 'var(--color-brand, #465daa)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    boxShadow: '0 8px 24px rgba(70,93,170,0.3)',
                  }}>
                    <svg width="26" height="26" fill="none" stroke="white" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                    </svg>
                  </div>
                  <div>
                    <p style={{ fontSize: '15px', fontWeight: 700, color: '#0f172a', marginBottom: '4px' }}>何でもお気軽にご質問ください</p>
                    <p style={{ fontSize: '12px', color: '#94a3b8' }}>下記にメッセージを入力して会話を開始してください。</p>
                  </div>
                </>
              )}
              <div style={{ display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }}>
                {SUGGESTED.map((q, i) => (
                  <button key={i}
                    className={isOrangeBtn(q) ? 'namo-suggest-btn-orange' : 'namo-suggest-btn'}
                    onClick={() => sendMessageWithText(q)} disabled={loading}
                    style={{
                      width: '100%', padding: '8px 13px', borderRadius: '10px',
                      border: isOrangeBtn(q) ? '1.5px solid rgba(70,93,170,0.36)' : '1px solid rgba(0,0,0,0.08)',
                      background: '#ffffff',
                      color: isOrangeBtn(q) ? 'var(--color-brand, #465daa)' : '#64748b',
                      fontSize: '13px', fontWeight: isOrangeBtn(q) ? 700 : 500,
                      textAlign: 'left', cursor: loading ? 'not-allowed' : 'pointer',
                      opacity: loading ? 0.5 : 1,
                      transition: 'all 0.15s', lineHeight: 1.4,
                      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
                    }}>
                    {q}
                  </button>
                ))}
              </div>
              {messages.length > 0 && (
                <div style={{ width: '100%', height: '1px', background: 'rgba(0,0,0,0.06)', margin: '2px 0 6px' }} />
              )}
            </div>

{messages.map((msg, index) => {
              const isContactForm = msg.role === 'assistant' && (msg.content === '__CONTACT_FORM__' || msg.content === '__CONTACT_FORM_WITH_PLAN__');
              const isWithPlan = msg.content === '__CONTACT_FORM_WITH_PLAN__';
              return (
                <div key={index} className="msg-bubble"
                  style={{ display: 'flex', justifyContent: msg.role === 'user' ? 'flex-end' : 'flex-start', alignItems: 'flex-end', gap: '7px' }}>
                  {msg.role === 'assistant' && (
                    <div style={{
                      width: '26px', height: '26px', borderRadius: '8px', flexShrink: 0,
                      background: 'var(--color-brand, #465daa)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <svg width="13" height="13" fill="none" stroke="white" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                      </svg>
                    </div>
                  )}
                  {isContactForm ? (
                    <div style={{
                      maxWidth: '88%', width: '100%',
                      background: '#ffffff',
                      border: '1px solid rgba(70,93,170,0.2)',
                      borderRadius: '16px 16px 16px 4px',
                      padding: '14px',
                      boxShadow: '0 4px 20px rgba(0,0,0,0.06)',
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
                        <div style={{
                          width: '22px', height: '22px', borderRadius: '6px',
                          background: 'var(--color-brand, #465daa)',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                        }}>
                          <svg width="11" height="11" fill="none" stroke="white" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                          </svg>
                        </div>
                        <span style={{ fontSize: '14px', fontWeight: 800, color: 'var(--color-brand, #465daa)' }}>{isWithPlan ? 'PlanitAI お申し込みはこちら' : 'PlanitAI お問い合わせ'}</span>
                      </div>
                      <InlineContactForm conversationId={conversationId} setConversationId={setConversationId} initialShowPlan={isWithPlan} onSwitchForm={(withPlan) => openContactForm(withPlan)} />
                    </div>
                  ) : (
                    <div style={{ maxWidth: '75%', display: 'flex', flexDirection: 'column', gap: '8px' }}>
                      <div style={{
                        padding: '9px 13px',
                        borderRadius: msg.role === 'user' ? '16px 16px 4px 16px' : '16px 16px 16px 4px',
                        background: msg.role === 'user'
                          ? 'var(--color-brand, #465daa)'
                          : '#ffffff',
                        color: msg.role === 'user' ? '#ffffff' : '#0f172a',
                        fontSize: '14px', lineHeight: '1.6',
                        boxShadow: msg.role === 'user'
                          ? '0 4px 16px rgba(70,93,170,0.35)'
                          : '0 2px 8px rgba(0,0,0,0.06)',
                        border: msg.role === 'user' ? 'none' : '1px solid rgba(0,0,0,0.07)',
                        wordBreak: 'break-word',
                      }}>
                        <span style={{ whiteSpace: 'pre-wrap' }}>{msg.content}</span>
                      </div>

</div>
                  )}
                </div>
              );
            })}

{loading && (
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: '7px' }}>
                <div style={{ width: '26px', height: '26px', borderRadius: '8px', flexShrink: 0, background: 'var(--color-brand, #465daa)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="13" height="13" fill="none" stroke="white" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                  </svg>
                </div>
                <div style={{ background: '#ffffff', border: '1px solid rgba(0,0,0,0.07)', borderRadius: '16px 16px 16px 4px', padding: '10px 14px', display: 'flex', gap: '4px', alignItems: 'center', boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
                  <span className="dot1" style={{ width: '6px', height: '6px', background: '#465daa', borderRadius: '50%', display: 'inline-block' }}></span>
                  <span className="dot2" style={{ width: '6px', height: '6px', background: '#5a72bd', borderRadius: '50%', display: 'inline-block' }}></span>
                  <span className="dot3" style={{ width: '6px', height: '6px', background: '#7f93d0', borderRadius: '50%', display: 'inline-block' }}></span>
                </div>
              </div>
            )}
          </div>

{error && (
            <div style={{ padding: '8px 16px', background: 'rgba(239,68,68,0.06)', borderTop: '1px solid rgba(239,68,68,0.15)', color: '#dc2626', fontSize: '12px', flexShrink: 0 }}>
              ⚠ {error}
            </div>
          )}

{/* Input */}
          <div style={{ padding: '12px 14px', background: '#ffffff', borderTop: '1px solid rgba(0,0,0,0.07)', flexShrink: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', background: '#f8fafc', border: '1px solid rgba(0,0,0,0.1)', borderRadius: '12px', padding: '6px 6px 6px 14px', transition: 'border-color 0.15s' }}
              onFocusCapture={e => e.currentTarget.style.borderColor = 'rgba(70,93,170,0.55)'}
              onBlurCapture={e => e.currentTarget.style.borderColor = 'rgba(0,0,0,0.1)'}>
              <input ref={inputRef} type="text" value={input}
                onChange={e => setInput(e.target.value)}
                onKeyPress={handleKeyPress}
                placeholder="メッセージを入力してください..."
                readOnly={loading}
                className="chat-input"
                style={{ flex: 1, background: 'transparent', border: 'none', fontSize: '14px', color: '#0f172a', outline: 'none', boxShadow: 'none' }}
              />
              <button onClick={loading ? stopLoading : sendMessage}
                disabled={!loading && !input.trim()}
                style={{
                  width: '34px', height: '34px', borderRadius: '9px', border: 'none',
                  background: loading ? 'rgba(239,68,68,0.8)' : (!input.trim() ? 'rgba(0,0,0,0.06)' : 'var(--color-brand, #465daa)'),
                  color: !loading && !input.trim() ? '#94a3b8' : '#ffffff',
                  cursor: !loading && !input.trim() ? 'not-allowed' : 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, transition: 'all 0.15s',
                  boxShadow: (!loading && input.trim()) ? '0 4px 12px rgba(70,93,170,0.35)' : 'none',
                }}>
                {loading ? (
                  <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <rect x="6" y="6" width="12" height="12" rx="2" strokeWidth="2" fill="currentColor" />
                  </svg>
                ) : (
                  <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                  </svg>
                )}
              </button>
            </div>
            {API.user?.email && (
              <p style={{ fontSize: '11px', color: '#94a3b8', marginTop: '6px', textAlign: 'right' }}>
                {API.user.email}
              </p>
            )}
          </div>
        </div>
      )}

{/* FAB Button */}
      <button onClick={() => setIsOpen(prev => !prev)}
        className={`${!isOpen ? 'namo-water-fab' : ''} ${isOpen ? 'fab-mobile-hide' : ''}`}
        style={{
          position: 'fixed', bottom: '24px', right: '24px',
          width: '56px', height: '56px', borderRadius: '50%',
          background: 'var(--color-brand, #465daa)',
          border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          zIndex: 10000, overflow: 'visible',
          transform: `translate3d(0, ${fabFloatY}px, 0) scale(${fabScale}) rotate(${fabRotate}deg)`,
          transition: 'transform 120ms cubic-bezier(0.22,1,0.36,1), box-shadow 180ms ease-out',
          boxShadow: `0 12px 28px rgba(70,93,170,${fabShadow})`,
          willChange: 'transform, box-shadow',
        }}>
        {hasUnread && !isOpen && (
          <span style={{ position: 'absolute', top: '4px', right: '4px', width: '10px', height: '10px', background: '#22D3EE', borderRadius: '50%', border: '2px solid #ffffff', boxShadow: '0 0 8px #22D3EE' }} />
        )}
        {isOpen ? (
          <svg width="22" height="22" fill="none" stroke="white" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        ) : (
          <svg width="22" height="22" fill="none" stroke="white" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        )}
      </button>
    </>
  );
}
</article></body></html>