// ─────────────────────────────────────────────────────────────────────────
//  screens-visitor.jsx — 来訪者用UI（受付端末）
//  V-01 待受 / V-03 情報入力 / V-05 確認・通知 / V-06 待機 / V-07 案内
// ─────────────────────────────────────────────────────────────────────────

const VIS = {
  bg: '#F4F6F8', surface: '#FFFFFF', line: '#E3E7EC',
  text: '#1F2A33', sub: '#5C6B76', faint: '#94A2AC',
  green: '#0B7A6B', greenDk: '#085F54', blue: '#1F6FB2', amber: '#C77700',
};

function VisHeader({ lang, setLang, onCall }) {
  const now = useClock();
  return (
    <div style={{ display: 'flex', alignItems: 'center', padding: '0 40px', height: 76,
      borderBottom: `1px solid ${VIS.line}`, flexShrink: 0, background: VIS.surface }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{ width: 40, height: 40, borderRadius: 10, background: VIS.green, display: 'grid', placeItems: 'center' }}>
          <Icon name="robot" size={24} color="#fff" />
        </div>
        <div>
          <div style={{ color: VIS.text, fontSize: 18, fontWeight: 700, letterSpacing: '0.01em' }}>Deloitte Office</div>
          <div style={{ color: VIS.faint, fontSize: 13 }}>受付 / Reception</div>
        </div>
      </div>
      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 20 }}>
        <span style={{ color: VIS.sub, fontSize: 17, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{fmtTime(now)}</span>
        <div style={{ display: 'flex', background: VIS.bg, borderRadius: 999, padding: 4, border: `1px solid ${VIS.line}` }}>
          {['日本語', 'English'].map(l => (
            <button key={l} onClick={() => setLang(l)} style={{ border: 'none', cursor: 'pointer', padding: '8px 18px',
              borderRadius: 999, fontSize: 15, fontWeight: 700, background: lang === l ? VIS.green : 'transparent',
              color: lang === l ? '#fff' : VIS.sub }}>{l}</button>
          ))}
        </div>
        <button onClick={onCall} style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer',
          padding: '11px 18px', borderRadius: 12, background: VIS.surface, border: `1px solid ${VIS.line}`,
          color: VIS.text, fontSize: 15, fontWeight: 600 }}>
          <Icon name="bell" size={19} color={VIS.green} />受付担当を呼ぶ</button>
      </div>
    </div>
  );
}

// ── V-01 待受・言語選択 ─────────────────────────────────────────────────────
function V01_Welcome({ nav }) {
  const [lang, setLang] = useState('日本語');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: VIS.bg }}>
      <VisHeader lang={lang} setLang={setLang} onCall={() => nav('V-09')} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 48 }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <div style={{ color: VIS.green, fontSize: 17, fontWeight: 700, letterSpacing: '0.14em', marginBottom: 14 }}>WELCOME / ようこそ</div>
          <h1 style={{ color: VIS.text, fontSize: 46, fontWeight: 800, lineHeight: 1.2, margin: 0 }}>ご来訪ありがとうございます</h1>
          <p style={{ color: VIS.sub, fontSize: 20, marginTop: 16 }}>下のボタンから受付を開始してください</p>
        </div>
        {/* main CTA */}
        <button onClick={() => nav('V-02')} style={{ cursor: 'pointer', border: 'none', borderRadius: 24,
          background: VIS.green, color: '#fff', width: 560, height: 132, display: 'flex', alignItems: 'center',
          justifyContent: 'center', gap: 18, boxShadow: '0 16px 44px rgba(11,122,107,0.34)', marginBottom: 22 }}>
          <Icon name="person" size={46} stroke={2.2} />
          <span style={{ fontSize: 36, fontWeight: 800 }}>受付を開始</span>
        </button>
        {/* secondary */}
        <div style={{ display: 'flex', gap: 16 }}>
          {[['qr', 'QRコードを読み取る', 'V-05'], ['search', '担当者を探す', 'V-04']].map(([ic, l, to]) => (
            <button key={l} onClick={() => nav(to)} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 13,
              padding: '20px 30px', borderRadius: 18, background: VIS.surface, border: `1.5px solid ${VIS.line}`,
              color: VIS.text, fontSize: 21, fontWeight: 700 }}>
              <Icon name={ic} size={30} color={VIS.green} />{l}</button>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 28, padding: '0 0 22px', color: VIS.faint, fontSize: 15 }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="volume" size={18} />音量</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="globe" size={18} />言語</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="help" size={18} />お困りの方は「受付担当を呼ぶ」</span>
      </div>
    </div>
  );
}

function VisBack({ title, sub, back, step }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '24px 40px 18px' }}>
      <button onClick={back} style={{ width: 52, height: 52, borderRadius: 14, cursor: 'pointer',
        border: `1.5px solid ${VIS.line}`, background: VIS.surface, color: VIS.text, display: 'grid', placeItems: 'center' }}>
        <Icon name="arrowLeft" size={24} /></button>
      <div style={{ flex: 1 }}>
        <h2 style={{ color: VIS.text, fontSize: 28, fontWeight: 800, margin: 0 }}>{title}</h2>
        {sub && <div style={{ color: VIS.sub, fontSize: 16, marginTop: 3 }}>{sub}</div>}
      </div>
      {step && <div style={{ display: 'flex', gap: 7 }}>
        {[1, 2, 3].map(n => <div key={n} style={{ width: n === step ? 30 : 10, height: 10, borderRadius: 99, background: n <= step ? VIS.green : VIS.line }}></div>)}
      </div>}
    </div>
  );
}

// ── V-02 受付方法選択 ───────────────────────────────────────────────────────
function V02_Method({ nav, back }) {
  const opts = [
    { ic: 'qr', t: 'QRコードをお持ちの方', d: '予約完了メールのQRをかざしてください', to: 'V-05', tone: VIS.green },
    { ic: 'person', t: '担当者を訪問', d: 'お名前・会社名を入力して受付します', to: 'V-03', tone: VIS.blue },
    { ic: 'search', t: '担当者名で探す', d: '訪問先のお名前から検索します', to: 'V-04', tone: VIS.amber },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: VIS.bg }}>
      <VisBack title="受付方法をお選びください" sub="ご予約の有無に応じてお選びください" back={back} step={1} />
      <div style={{ flex: 1, display: 'flex', gap: 20, padding: '20px 40px 40px' }}>
        {opts.map(o => (
          <button key={o.t} onClick={() => nav(o.to)} style={{ flex: 1, cursor: 'pointer', borderRadius: 22,
            background: VIS.surface, border: `1.5px solid ${VIS.line}`, padding: 36, display: 'flex',
            flexDirection: 'column', alignItems: 'flex-start', gap: 18, textAlign: 'left',
            boxShadow: '0 4px 20px rgba(31,42,51,0.04)' }}>
            <div style={{ width: 76, height: 76, borderRadius: 20, background: `${o.tone}18`, display: 'grid', placeItems: 'center' }}>
              <Icon name={o.ic} size={42} color={o.tone} stroke={2.1} /></div>
            <div style={{ color: VIS.text, fontSize: 25, fontWeight: 800 }}>{o.t}</div>
            <div style={{ color: VIS.sub, fontSize: 16, lineHeight: 1.6 }}>{o.d}</div>
            <div style={{ flex: 1 }}></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: o.tone, fontSize: 17, fontWeight: 700 }}>進む<Icon name="arrowRight" size={22} /></div>
          </button>
        ))}
      </div>
    </div>
  );
}

// ── V-03 訪問情報入力 ───────────────────────────────────────────────────────
function V03_Info({ nav, back }) {
  const [f, setF] = useState({ name: '', company: '', count: '1名', purpose: '打ち合わせ' });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '⌫'];
  const ok = f.name && f.company;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: VIS.bg }}>
      <VisBack title="ご訪問情報の入力" sub="受付に必要な情報をご入力ください" back={back} step={2} />
      <div style={{ flex: 1, display: 'flex', gap: 24, padding: '12px 40px 36px', minHeight: 0 }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <Field label="お名前" required value={f.name} placeholder="例）山田 花子" onChange={v => set('name', v)} />
          <Field label="会社名" required value={f.company} placeholder="例）株式会社サンプル" onChange={v => set('company', v)} />
          <div style={{ display: 'flex', gap: 18 }}>
            <div style={{ flex: 1 }}>
              <FieldLabel>人数</FieldLabel>
              <div style={{ display: 'flex', gap: 10 }}>
                {['1名', '2名', '3名', '4名+'].map(c => (
                  <button key={c} onClick={() => set('count', c)} style={{ flex: 1, height: 58, cursor: 'pointer', borderRadius: 13,
                    fontSize: 17, fontWeight: 700, background: f.count === c ? VIS.green : VIS.surface,
                    color: f.count === c ? '#fff' : VIS.text, border: `1.5px solid ${f.count === c ? VIS.green : VIS.line}` }}>{c}</button>
                ))}
              </div>
            </div>
          </div>
          <div>
            <FieldLabel>訪問目的</FieldLabel>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              {['打ち合わせ', '面接', '納品・集荷', '採用', 'その他'].map(p => (
                <button key={p} onClick={() => set('purpose', p)} style={{ cursor: 'pointer', padding: '13px 22px', borderRadius: 12,
                  fontSize: 16, fontWeight: 600, background: f.purpose === p ? `${VIS.green}15` : VIS.surface,
                  color: f.purpose === p ? VIS.greenDk : VIS.sub, border: `1.5px solid ${f.purpose === p ? VIS.green : VIS.line}` }}>{p}</button>
              ))}
            </div>
          </div>
        </div>
        {/* simple keypad / next */}
        <div style={{ width: 340, display: 'flex', flexDirection: 'column' }}>
          <div style={{ background: VIS.surface, border: `1px solid ${VIS.line}`, borderRadius: 18, padding: 18, flex: 1, display: 'flex', flexDirection: 'column' }}>
            <div style={{ color: VIS.faint, fontSize: 13, fontWeight: 700, letterSpacing: '0.06em', marginBottom: 14 }}>入力内容</div>
            {[['お名前', f.name || '—'], ['会社名', f.company || '—'], ['人数', f.count], ['目的', f.purpose]].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: `1px solid ${VIS.line}` }}>
                <span style={{ color: VIS.faint, fontSize: 15 }}>{k}</span>
                <span style={{ color: VIS.text, fontSize: 16, fontWeight: 700, maxWidth: 200, textAlign: 'right' }}>{v}</span>
              </div>
            ))}
            <div style={{ flex: 1 }}></div>
            <button disabled={!ok} onClick={() => nav('V-04')} style={{ height: 66, border: 'none', cursor: ok ? 'pointer' : 'not-allowed',
              borderRadius: 16, background: ok ? VIS.green : VIS.line, color: '#fff', fontSize: 21, fontWeight: 800,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              boxShadow: ok ? '0 10px 30px rgba(11,122,107,0.3)' : 'none' }}>
              訪問先を選ぶ<Icon name="arrowRight" size={24} /></button>
          </div>
        </div>
      </div>
    </div>
  );
}

function FieldLabel({ children }) {
  return <div style={{ color: VIS.sub, fontSize: 16, fontWeight: 700, marginBottom: 9, display: 'flex', alignItems: 'center', gap: 7 }}>{children}</div>;
}
function Field({ label, required, value, placeholder, onChange }) {
  return (
    <div>
      <FieldLabel>{label}{required && <span style={{ color: '#D14343', fontSize: 14 }}>必須</span>}</FieldLabel>
      <input value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)}
        style={{ width: '100%', height: 64, borderRadius: 14, border: `1.5px solid ${VIS.line}`, background: VIS.surface,
          padding: '0 20px', fontSize: 19, color: VIS.text, outline: 'none' }} />
    </div>
  );
}

// ── V-04 訪問先検索 ─────────────────────────────────────────────────────────
function V04_Search({ nav, back }) {
  const [sel, setSel] = useState(null);
  const cands = [
    { name: '田中 太郎', dept: '戦略コンサルティング部', hint: 't.tanaka@…' },
    { name: '鈴木 一郎', dept: 'テクノロジー部', hint: 'i.suzuki@…' },
    { name: '高橋 三郎', dept: 'リスクアドバイザリー部', hint: 's.takahashi@…' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: VIS.bg }}>
      <VisBack title="訪問先の担当者を選択" sub="お名前・部署・メールのいずれかで検索できます" back={back} step={2} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '12px 40px 36px', maxWidth: 760, width: '100%', margin: '0 auto', minHeight: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: VIS.surface, border: `1.5px solid ${VIS.line}`,
          borderRadius: 16, padding: '0 22px', height: 66, marginBottom: 16 }}>
          <Icon name="search" size={24} color={VIS.faint} />
          <input defaultValue="田中" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 20, color: VIS.text }} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: VIS.amber, fontSize: 14, marginBottom: 14 }}>
          <Icon name="shield" size={16} />訪問先の詳細な座席情報は表示されません
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, overflowY: 'auto' }}>
          {cands.map((c, i) => (
            <button key={i} onClick={() => setSel(i)} style={{ textAlign: 'left', cursor: 'pointer',
              background: i === sel ? `${VIS.green}10` : VIS.surface, border: `1.5px solid ${i === sel ? VIS.green : VIS.line}`,
              borderRadius: 16, padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 18 }}>
              <div style={{ width: 56, height: 56, borderRadius: 14, background: VIS.bg, display: 'grid', placeItems: 'center', fontSize: 22, fontWeight: 800, color: VIS.text }}>{c.name[0]}</div>
              <div style={{ flex: 1 }}>
                <div style={{ color: VIS.text, fontSize: 21, fontWeight: 800 }}>{c.name}</div>
                <div style={{ color: VIS.sub, fontSize: 15, marginTop: 2 }}>{c.dept}・{c.hint}</div>
              </div>
              {i === sel && <Icon name="checkCircle" size={28} color={VIS.green} />}
            </button>
          ))}
        </div>
        <div style={{ flex: 1 }}></div>
        <button disabled={sel === null} onClick={() => nav('V-05', { person: cands[sel] })}
          style={{ height: 70, border: 'none', cursor: sel === null ? 'not-allowed' : 'pointer', borderRadius: 16,
            background: sel === null ? VIS.line : VIS.green, color: '#fff', fontSize: 22, fontWeight: 800, marginTop: 18,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
          この方に通知する<Icon name="arrowRight" size={24} /></button>
      </div>
    </div>
  );
}

// ── V-05 確認・通知 ─────────────────────────────────────────────────────────
function V05_Confirm({ nav, back, ctx }) {
  const person = ctx?.person || { name: '田中 太郎', dept: '戦略コンサルティング部' };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: VIS.bg }}>
      <VisBack title="受付内容のご確認" sub="この内容で担当者に通知します" back={back} step={3} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 32 }}>
        <div style={{ width: '100%', maxWidth: 620, background: VIS.surface, border: `1px solid ${VIS.line}`, borderRadius: 24,
          padding: 36, boxShadow: '0 12px 40px rgba(31,42,51,0.07)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, paddingBottom: 24, borderBottom: `1px solid ${VIS.line}`, marginBottom: 24 }}>
            <div style={{ width: 64, height: 64, borderRadius: 16, background: `${VIS.green}14`, display: 'grid', placeItems: 'center', fontSize: 26, fontWeight: 800, color: VIS.green }}>{person.name[0]}</div>
            <div>
              <div style={{ color: VIS.faint, fontSize: 14 }}>訪問先</div>
              <div style={{ color: VIS.text, fontSize: 26, fontWeight: 800 }}>{person.name} 様</div>
              <div style={{ color: VIS.sub, fontSize: 15 }}>{person.dept}</div>
            </div>
          </div>
          {[['お名前', '山田 花子 様'], ['会社名', '株式会社サンプル'], ['人数', '2名'], ['訪問目的', '打ち合わせ']].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '15px 0', borderBottom: `1px solid ${VIS.line}` }}>
              <span style={{ color: VIS.sub, fontSize: 17 }}>{k}</span>
              <span style={{ color: VIS.text, fontSize: 18, fontWeight: 700 }}>{v}</span>
            </div>
          ))}
          <button onClick={() => nav('V-06', { person })} style={{ width: '100%', height: 74, border: 'none', cursor: 'pointer',
            borderRadius: 16, background: VIS.green, color: '#fff', fontSize: 23, fontWeight: 800, marginTop: 28,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, boxShadow: '0 12px 32px rgba(11,122,107,0.3)' }}>
            <Icon name="send" size={26} />担当者へ通知する</button>
          <div style={{ display: 'flex', gap: 14, marginTop: 14 }}>
            <button onClick={back} style={{ flex: 1, height: 56, cursor: 'pointer', borderRadius: 14, background: VIS.surface, border: `1.5px solid ${VIS.line}`, color: VIS.text, fontSize: 17, fontWeight: 700 }}>修正する</button>
            <button onClick={() => nav('V-01')} style={{ flex: 1, height: 56, cursor: 'pointer', borderRadius: 14, background: 'transparent', border: `1.5px solid ${VIS.line}`, color: VIS.sub, fontSize: 17, fontWeight: 700 }}>キャンセル</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── V-06 待機案内 ───────────────────────────────────────────────────────────
function V06_Waiting({ nav, ctx }) {
  const person = ctx?.person || { name: '田中 太郎' };
  const [pattern, setPattern] = useState('pickup'); // 'pickup' | 'guide'
  const [sec, setSec] = useState(0);
  const [state, setState] = useState(0); // 0 通知, 1 確認中, 2 応答確定
  useEffect(() => {
    setState(0); setSec(0);
    const id = setInterval(() => setSec(s => s + 1), 1000);
    const t1 = setTimeout(() => setState(1), 2500);
    const t2 = setTimeout(() => setState(2), 6000);
    return () => { clearInterval(id); clearTimeout(t1); clearTimeout(t2); };
  }, [pattern]);

  const resp = pattern === 'pickup'
    ? { label: `${person.name}さんが受付までお迎えに向かっています`, sub: '担当者が到着するまで、こちらでお待ちください。ご案内は不要です。', tone: 'green', icon: 'person', accent: VIS.green }
    : { label: `${person.name}さんが会議室 14-A でお待ちです`, sub: '会議室までの経路を地図でご案内します。準備ができたら道順をご確認ください。', tone: 'blue', icon: 'mapPin', accent: VIS.blue };
  const cur = [
    { label: '担当者に通知しました', sub: '少々お待ちください。担当者が応答します。', tone: 'blue', icon: 'send', accent: VIS.green },
    { label: `${person.name}さんが確認中です`, sub: '担当者が対応方法を確認しています。', tone: 'amber', icon: 'clock', accent: VIS.amber },
    resp,
  ][state];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: VIS.bg }}>
      <VisHeader lang="日本語" setLang={() => {}} onCall={() => nav('V-09')} />
      <div style={{ flex: 1, display: 'flex', gap: 28, padding: 40 }}>
        {/* status */}
        <div style={{ flex: 1.3, background: VIS.surface, border: `1px solid ${VIS.line}`, borderRadius: 24, padding: '32px 44px 40px',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', boxShadow: '0 12px 40px rgba(31,42,51,0.06)', position: 'relative' }}>
          {/* demo pattern toggle */}
          <div style={{ position: 'absolute', top: 18, left: '50%', transform: 'translateX(-50%)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ color: VIS.faint, fontSize: 12 }}>担当者の対応（デモ）</span>
            <div style={{ display: 'flex', background: VIS.bg, borderRadius: 999, padding: 3, border: `1px solid ${VIS.line}` }}>
              {[['pickup', 'お迎えに来る'], ['guide', '会議室へ案内']].map(([k, l]) => (
                <button key={k} onClick={() => setPattern(k)} style={{ border: 'none', cursor: 'pointer', padding: '6px 13px', borderRadius: 999,
                  fontSize: 12.5, fontWeight: 700, background: pattern === k ? (k === 'pickup' ? VIS.green : VIS.blue) : 'transparent',
                  color: pattern === k ? '#fff' : VIS.sub }}>{l}</button>
              ))}
            </div>
          </div>

          <div style={{ position: 'relative', marginBottom: 26, marginTop: 14 }}>
            <span style={{ position: 'absolute', inset: -14, borderRadius: 99, border: `3px solid ${cur.accent}`, opacity: 0.3, animation: 'ripple 1.8s ease-out infinite' }}></span>
            <div style={{ width: 112, height: 112, borderRadius: 99, background: `${cur.accent}14`, display: 'grid', placeItems: 'center' }}>
              <Icon name={cur.icon} size={56} color={cur.accent} stroke={2} />
            </div>
          </div>
          <Pill tone={cur.tone} style={{ fontSize: 16, marginBottom: 16 }}>経過 {Math.floor(sec / 60)}:{String(sec % 60).padStart(2, '0')}</Pill>
          <div style={{ color: VIS.text, fontSize: 28, fontWeight: 800, textAlign: 'center', marginBottom: 10, lineHeight: 1.3 }}>{cur.label}</div>
          <div style={{ color: VIS.sub, fontSize: 17, textAlign: 'center', maxWidth: 460, lineHeight: 1.6 }}>{cur.sub}</div>

          {state === 2 && pattern === 'guide' && (
            <button onClick={() => nav('V-07', { person })} style={{ marginTop: 28, height: 62, padding: '0 36px', border: 'none', cursor: 'pointer',
              borderRadius: 15, background: VIS.blue, color: '#fff', fontSize: 19, fontWeight: 800, display: 'flex', alignItems: 'center', gap: 10,
              boxShadow: '0 10px 28px rgba(31,111,178,0.3)' }}>
              <Icon name="mapPin" size={24} />地図で道順を見る<Icon name="arrowRight" size={22} /></button>
          )}
          {state === 2 && pattern === 'pickup' && (
            <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: VIS.green, fontSize: 15, fontWeight: 700 }}>
                <Icon name="checkCircle" size={20} />このまま受付前でお待ちください（案内は不要です）</div>
              <button onClick={() => nav('V-08')} style={{ height: 56, padding: '0 32px', cursor: 'pointer', borderRadius: 14,
                background: VIS.surface, border: `1.5px solid ${VIS.line}`, color: VIS.text, fontSize: 17, fontWeight: 700 }}>担当者と合流・受付を終了</button>
            </div>
          )}
        </div>
        {/* info */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <InfoCard icon="mapPin" title="待機場所" body="こちらの受付前ソファでお待ちください。" />
          <InfoCard icon="wifi" title="ゲスト Wi-Fi" body="SSID: Office-Guest / PW: welcome2026" />
          <InfoCard icon="shield" title="入館ルール" body="入館証は担当者よりお渡しします。執務エリアへは担当者の同行が必要です。" />
          <div style={{ flex: 1 }}></div>
          <div style={{ display: 'flex', gap: 12 }}>
            <VBtn icon="refresh" label="通知を再送する" onClick={() => { setState(0); setSec(0); }} />
            <VBtn icon="bell" label="受付担当を呼ぶ" onClick={() => nav('V-09')} />
          </div>
        </div>
      </div>
    </div>
  );
}

function InfoCard({ icon, title, body }) {
  return (
    <div style={{ background: VIS.surface, border: `1px solid ${VIS.line}`, borderRadius: 18, padding: 22, display: 'flex', gap: 16 }}>
      <div style={{ width: 48, height: 48, borderRadius: 13, background: `${VIS.green}12`, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
        <Icon name={icon} size={26} color={VIS.green} /></div>
      <div>
        <div style={{ color: VIS.text, fontSize: 18, fontWeight: 700, marginBottom: 4 }}>{title}</div>
        <div style={{ color: VIS.sub, fontSize: 15, lineHeight: 1.6 }}>{body}</div>
      </div>
    </div>
  );
}
function VBtn({ icon, label, onClick }) {
  return (
    <button onClick={onClick} style={{ flex: 1, height: 56, cursor: 'pointer', borderRadius: 14, background: VIS.surface,
      border: `1.5px solid ${VIS.line}`, color: VIS.text, fontSize: 16, fontWeight: 700, display: 'flex',
      alignItems: 'center', justifyContent: 'center', gap: 9 }}>
      <Icon name={icon} size={20} color={VIS.green} />{label}</button>
  );
}

// ── V-07 案内開始 ───────────────────────────────────────────────────────────
function V07_Guide({ nav, ctx }) {
  const route = [[101, 305], [140, 300], [610, 300], [610, 276]];
  const steps = [
    { n: '1', t: '正面のエレベーターで 14F へ', sub: 'EVホール' },
    { n: '2', t: '降りて通路をまっすぐ進む', sub: '約30m' },
    { n: '3', t: '突き当りを右へ', sub: '右折' },
    { n: '4', t: '左手の 会議室 14-A に到着', sub: '目的地' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: VIS.bg }}>
      <VisBack title="会議室 14-A へのご案内" sub="ロボットはここで失礼します。地図に沿ってお進みください" back={() => nav('V-06')} />
      <div style={{ flex: 1, display: 'flex', gap: 24, padding: '8px 40px 36px', minHeight: 0 }}>
        {/* map */}
        <div style={{ flex: 1.7, background: VIS.surface, border: `1px solid ${VIS.line}`, borderRadius: 22, overflow: 'hidden', position: 'relative' }}>
          <div style={{ position: 'absolute', top: 16, left: 18, zIndex: 2, background: 'rgba(255,255,255,0.9)', borderRadius: 10,
            padding: '8px 14px', color: VIS.text, fontSize: 14, fontWeight: 700, boxShadow: '0 2px 10px rgba(0,0,0,0.06)' }}>14F フロアマップ</div>
          <svg viewBox="0 0 720 430" style={{ width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid meet">
            <rect x="20" y="20" width="680" height="390" rx="16" fill="#F8FAFB" stroke={VIS.line} strokeWidth="1.5" />
            {/* corridor */}
            <rect x="120" y="288" width="500" height="26" rx="8" fill="#EAEFF2" />
            <rect x="597" y="180" width="26" height="120" rx="8" fill="#EAEFF2" />
            {/* EV hall (現在地) */}
            <rect x="36" y="244" width="130" height="120" rx="11" fill="#EEF3F5" stroke={VIS.line} />
            <text x="101" y="330" textAnchor="middle" fill={VIS.faint} fontSize="13" fontWeight="600">EVホール</text>
            {/* rooms */}
            {[{ x: 150, w: 150, t: '会議室 14-B' }, { x: 322, w: 130, t: '休憩スペース' }, { x: 474, w: 100, t: 'Focus' }].map((r, i) => (
              <g key={i}>
                <rect x={r.x} y="52" width={r.w} height="150" rx="10" fill="#fff" stroke={VIS.line} />
                <text x={r.x + r.w / 2} y="132" textAnchor="middle" fill={VIS.faint} fontSize="13.5" fontWeight="600">{r.t}</text>
              </g>
            ))}
            {/* target room 14-A */}
            <rect x="540" y="52" width="140" height="150" rx="10" fill={`${VIS.green}12`} stroke={VIS.green} strokeWidth="2" />
            <text x="610" y="120" textAnchor="middle" fill={VIS.greenDk} fontSize="16" fontWeight="800">会議室</text>
            <text x="610" y="142" textAnchor="middle" fill={VIS.greenDk} fontSize="16" fontWeight="800">14-A</text>
            {/* route */}
            <polyline points={route.map(p => p.join(',')).join(' ')} fill="none" stroke={`${VIS.green}33`} strokeWidth="9" strokeLinecap="round" strokeLinejoin="round" />
            <polyline points={route.map(p => p.join(',')).join(' ')} fill="none" stroke={VIS.green} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="2 16">
              <animate attributeName="stroke-dashoffset" from="36" to="0" dur="1s" repeatCount="indefinite" />
            </polyline>
            {/* current location */}
            <g transform="translate(101,305)">
              <circle r="16" fill={`${VIS.green}22`}><animate attributeName="r" values="11;20;11" dur="1.8s" repeatCount="indefinite" /><animate attributeName="opacity" values="0.7;0;0.7" dur="1.8s" repeatCount="indefinite" /></circle>
              <circle r="9" fill={VIS.green} stroke="#fff" strokeWidth="2.5" />
            </g>
            <text x="101" y="358" textAnchor="middle" fill={VIS.green} fontSize="12.5" fontWeight="700">現在地</text>
            {/* destination flag */}
            <g transform="translate(610,250)">
              <circle r="13" fill={VIS.green} /><path d="M-2,-6 L6,-2 L-2,2 Z" fill="#fff" />
            </g>
          </svg>
        </div>
        {/* steps */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'flex', gap: 12 }}>
            <div style={{ flex: 1, background: VIS.surface, border: `1px solid ${VIS.line}`, borderRadius: 16, padding: '16px 18px' }}>
              <div style={{ color: VIS.faint, fontSize: 13 }}>距離</div>
              <div style={{ color: VIS.text, fontSize: 24, fontWeight: 800 }}>約45m</div>
            </div>
            <div style={{ flex: 1, background: VIS.surface, border: `1px solid ${VIS.line}`, borderRadius: 16, padding: '16px 18px' }}>
              <div style={{ color: VIS.faint, fontSize: 13 }}>所要時間</div>
              <div style={{ color: VIS.text, fontSize: 24, fontWeight: 800 }}>約1分</div>
            </div>
          </div>
          <div style={{ flex: 1, background: VIS.surface, border: `1px solid ${VIS.line}`, borderRadius: 18, padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 4, overflowY: 'auto' }}>
            {steps.map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '11px 4px', borderBottom: i < steps.length - 1 ? `1px solid ${VIS.line}` : 'none' }}>
                <div style={{ width: 30, height: 30, borderRadius: 99, background: i === steps.length - 1 ? VIS.green : `${VIS.green}16`,
                  color: i === steps.length - 1 ? '#fff' : VIS.greenDk, display: 'grid', placeItems: 'center', fontSize: 14, fontWeight: 800, flexShrink: 0 }}>{s.n}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ color: VIS.text, fontSize: 16, fontWeight: 700 }}>{s.t}</div>
                </div>
                <span style={{ color: VIS.faint, fontSize: 13 }}>{s.sub}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, background: `${VIS.amber}12`, border: `1px solid ${VIS.amber}40`, borderRadius: 12, padding: '12px 15px' }}>
            <Icon name="shield" size={19} color={VIS.amber} />
            <span style={{ color: '#8A5A00', fontSize: 13.5, lineHeight: 1.5 }}>セキュリティドアは担当者の同行が必要です</span>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <button onClick={() => nav('V-08')} style={{ flex: 1, height: 58, border: 'none', cursor: 'pointer', borderRadius: 14, background: VIS.green, color: '#fff', fontSize: 17, fontWeight: 800 }}>到着しました</button>
            <button onClick={() => nav('V-09')} style={{ height: 58, padding: '0 22px', cursor: 'pointer', borderRadius: 14, background: VIS.surface, border: `1.5px solid ${VIS.line}`, color: VIS.text, fontSize: 16, fontWeight: 700 }}>受付担当を呼ぶ</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── V-08 到着・完了 ─────────────────────────────────────────────────────────
function V08_Done({ nav }) {
  useEffect(() => { const t = setTimeout(() => nav('V-01'), 6000); return () => clearTimeout(t); }, []);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: VIS.bg, alignItems: 'center', justifyContent: 'center', padding: 48 }}>
      <div style={{ width: 110, height: 110, borderRadius: 99, background: `${VIS.green}16`, display: 'grid', placeItems: 'center', marginBottom: 28, animation: 'pop .4s ease' }}>
        <Icon name="checkCircle" size={62} color={VIS.green} stroke={2.2} /></div>
      <h1 style={{ color: VIS.text, fontSize: 40, fontWeight: 800, margin: 0, textAlign: 'center' }}>ご案内は以上です</h1>
      <p style={{ color: VIS.sub, fontSize: 20, marginTop: 14, textAlign: 'center' }}>本日はお越しいただきありがとうございます</p>
      <button onClick={() => nav('V-01')} style={{ marginTop: 36, height: 60, padding: '0 40px', border: 'none', cursor: 'pointer',
        borderRadius: 15, background: VIS.green, color: '#fff', fontSize: 19, fontWeight: 800 }}>ホームへ戻る</button>
      <div style={{ color: VIS.faint, fontSize: 14, marginTop: 16 }}>6秒後に自動で待受画面に戻ります</div>
    </div>
  );
}

// ── V-09 例外対応 ───────────────────────────────────────────────────────────
function V09_Exception({ nav, back }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: VIS.bg, alignItems: 'center', justifyContent: 'center', padding: 48 }}>
      <div style={{ width: 96, height: 96, borderRadius: 24, background: `${VIS.amber}18`, display: 'grid', placeItems: 'center', marginBottom: 26 }}>
        <Icon name="bell" size={52} color={VIS.amber} /></div>
      <h1 style={{ color: VIS.text, fontSize: 34, fontWeight: 800, margin: 0, textAlign: 'center' }}>受付担当をお呼びしています</h1>
      <p style={{ color: VIS.sub, fontSize: 19, marginTop: 14, textAlign: 'center', maxWidth: 520, lineHeight: 1.6 }}>
        まもなく担当者がまいります。そのままお待ちください。お急ぎの場合は内線 0 番へおかけください。</p>
      <div style={{ display: 'flex', gap: 14, marginTop: 34 }}>
        <button onClick={back} style={{ height: 58, padding: '0 30px', cursor: 'pointer', borderRadius: 14, background: VIS.surface, border: `1.5px solid ${VIS.line}`, color: VIS.text, fontSize: 17, fontWeight: 700 }}>戻る</button>
        <button onClick={() => nav('V-01')} style={{ height: 58, padding: '0 30px', border: 'none', cursor: 'pointer', borderRadius: 14, background: VIS.green, color: '#fff', fontSize: 17, fontWeight: 800 }}>ホームへ戻る</button>
      </div>
    </div>
  );
}

Object.assign(window, { V01_Welcome, V02_Method, V03_Info, V04_Search, V05_Confirm, V06_Waiting, V07_Guide, V08_Done, V09_Exception, VIS });