// Sitter Onboarding — 6-step registration flow.
// Interactive: stepper at top, prev/next, fields editable.

function SitterRegister({ initialStep = 0 }) {
  const [step, setStep] = React.useState(initialStep);
  const [form, setForm] = React.useState({
    pets: ['dog'],
    exp: 3,
    skills: ['walk', 'med'],
    serviceTypes: ['visit'],
    rate: 3200,
    days: ['mon','tue','wed','thu','fri'],
    bio: '',
    idVerified: true,
    cert: 'pet-care-2',
    area: '107-0062 港区南青山',
    stations: ['表参道','外苑前'],
    // 動物取扱責任者
    licStatus: 'none',            // 'have' | 'none'
    licNumber: '',
    licCategory: 'hokan',         // 保管 / 訓練 / 展示
    licPrefecture: '',
    licHolderName: '',
    licAgree: false,              // ソプラ銀座との業務委託合意
    // 写真
    profilePhoto: null,           // File | null
    idDocument: null,             // File | null（身分証）
    selfie: null,                 // File | null
    // 規約系
    insAgree: false,
    tosAgree: false,
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggle = (k, v) => setForm(f => ({
    ...f, [k]: f[k].includes(v) ? f[k].filter(x => x !== v) : [...f[k], v]
  }));

  const steps = [
    ['基本情報','01'],
    ['対応ペット','02'],
    ['経験・資格','03'],
    ['サービス内容','04'],
    ['料金・空き状況','05'],
    ['プロフィール','06'],
    ['本人確認','07'],
  ];

  const next = () => setStep(s => Math.min(s + 1, steps.length - 1));
  const prev = () => setStep(s => Math.max(s - 1, 0));

  // 送信状態：idle / loading / success / error
  const [submitState, setSubmitState] = React.useState({ phase: 'idle', message: '' });
  const submit = async () => {
    setSubmitState({ phase: 'loading', message: '送信中…' });
    // form → webhook data 形式へ整形（File ではない値のみ）
    const data = {
      lastName: form.lastName || '', firstName: form.firstName || '',
      nickname: form.nickname || '',
      birthDate: form.birthDate || '', gender: form.gender || '',
      email: form.email || '', phone: form.phone || '',
      area: form.area || '', stations: form.stations || [],
      pets: form.pets || [], exp: form.exp || 0, cert: form.cert || '',
      skills: form.skills || [], serviceTypes: form.serviceTypes || [],
      rate: form.rate || 0, days: form.days || [], bio: form.bio || '',
      licStatus: form.licStatus || 'none', licNumber: form.licNumber || '',
      licCategory: form.licCategory || '', licPrefecture: form.licPrefecture || '',
      licHolderName: form.licHolderName || '',
      idVerified: !!(form.idDocument && form.selfie),
    };
    const res = await window.palpetSubmitRegistration({
      type: 'sitter',
      data,
      photos: [
        ['profilePhoto', form.profilePhoto],
        ['idDocument',   form.idDocument],
        ['selfie',       form.selfie],
      ],
    });
    if (res.ok) {
      setSubmitState({
        phase: 'success',
        message: res.demo
          ? 'デモ送信が完了しました（実際の通知は行われていません）。'
          : `送信完了。受付ID: ${res.row?.id || '—'}。1〜2営業日でご連絡します。`,
        res,
      });
    } else {
      setSubmitState({
        phase: 'error',
        message: res.message || res.error || '送信に失敗しました。',
        res,
      });
    }
  };

  return (
    <div data-page="register" style={{
      width:'100%',minHeight:'100%',background:'var(--c-bg)',
      color:'#2E2418',fontFamily:'var(--font-jp)',display:'flex',flexDirection:'column',
    }}>
      {/* Top nav */}
      <header style={{
        display:'flex',alignItems:'center',justifyContent:'space-between',
        padding:'20px 40px',background:'#fff',borderBottom:'1px solid rgba(0,0,0,.04)',
      }}>
        <img src="assets/logo-horizontal.png" alt="palpet" style={{height:48}}/>
        <div style={{fontSize:13,color:'#7a6a55'}}>シッター登録 ・ 進捗を保存しました</div>
        <div style={{display:'flex',gap:10,fontSize:13}}>
          <button style={{background:'transparent',border:'1.5px solid rgba(0,0,0,.08)',padding:'8px 14px',borderRadius:999,cursor:'pointer',fontFamily:'inherit'}}>下書き保存</button>
          <a style={{color:'#9c8a72',padding:'8px 0'}}>あとで再開</a>
        </div>
      </header>

      <div style={{display:'grid',gridTemplateColumns:'280px 1fr 320px',flex:1,minHeight:0}}>
        {/* Stepper rail */}
        <aside style={{padding:'40px 24px',background:'#fff',borderRight:'1px solid rgba(0,0,0,.04)'}}>
          <div style={{fontSize:12,color:'#9c8a72',fontWeight:600,letterSpacing:'.04em',marginBottom:14}}>STEP {step+1} / {steps.length}</div>
          <div style={{display:'flex',flexDirection:'column',gap:4}}>
            {steps.map(([n,k],i)=>{
              const done = i < step, active = i === step;
              return (
                <button key={i} onClick={()=>setStep(i)} style={{
                  display:'flex',gap:14,alignItems:'center',padding:'12px 12px',
                  borderRadius:14,border:'none',cursor:'pointer',
                  background: active ? 'var(--c-primary-soft)' : 'transparent',
                  color: active ? 'var(--c-primary-deep)' : done ? '#7a6a55' : '#9c8a72',
                  fontWeight: active ? 700 : 500, fontFamily:'inherit',fontSize:14,
                  textAlign:'left',
                }}>
                  <span style={{
                    width:28,height:28,borderRadius:'50%',
                    background: done ? 'var(--c-primary)' : active ? '#fff' : 'transparent',
                    border: active ? '1.5px solid var(--c-primary)' : '1.5px solid rgba(0,0,0,.08)',
                    color: done ? '#fff' : active ? 'var(--c-primary-deep)' : '#9c8a72',
                    display:'grid',placeItems:'center',fontSize:12,fontWeight:700,
                    fontFamily:'ui-monospace',flex:'0 0 auto',
                  }}>{done ? <Icons.Check size={14} stroke={2.4}/> : k}</span>
                  {n}
                </button>
              );
            })}
          </div>
          <div style={{
            marginTop:32,padding:18,borderRadius:18,background:'var(--c-primary-soft)',
            color:'var(--c-primary-deep)',fontSize:13,lineHeight:1.7,
          }}>
            <div style={{fontWeight:700,marginBottom:6,display:'flex',alignItems:'center',gap:6}}><Icons.Sparkle size={16}/> 登録のヒント</div>
            プロフィールが充実しているシッターは、依頼が <strong>2.4倍</strong> 多く受け取れます。
          </div>
        </aside>

        {/* Main form area */}
        <main style={{padding:'40px 48px',overflowY:'auto'}}>
          {/* Progress bar */}
          <div style={{height:6,background:'rgba(0,0,0,.06)',borderRadius:999,marginBottom:32}}>
            <div style={{width:`${((step+1)/steps.length)*100}%`,height:'100%',background:'var(--c-primary)',borderRadius:999,transition:'.4s'}}/>
          </div>

          {step === 0 && <Step0 form={form} set={set} toggle={toggle}/>}
          {step === 1 && <Step1 form={form} toggle={toggle}/>}
          {step === 2 && <Step2 form={form} set={set} toggle={toggle}/>}
          {step === 3 && <Step3 form={form} toggle={toggle}/>}
          {step === 4 && <Step4 form={form} set={set} toggle={toggle}/>}
          {step === 5 && <Step5 form={form} set={set}/>}
          {step === 6 && <Step6 form={form} set={set}/>}

          {/* 送信状態フィードバック */}
          {submitState.phase !== 'idle' && (
            <SubmitFeedback state={submitState} onReset={()=>setSubmitState({phase:'idle',message:''})}/>
          )}

          <div style={{display:'flex',gap:12,marginTop:40,justifyContent:'space-between'}}>
            <button onClick={prev} disabled={step===0 || submitState.phase==='loading'} style={{
              background:'#fff',border:'1.5px solid rgba(0,0,0,.1)',
              padding:'14px 22px',borderRadius:14,fontSize:15,fontWeight:600,
              cursor: (step===0||submitState.phase==='loading')?'not-allowed':'pointer',
              opacity:(step===0||submitState.phase==='loading')?.4:1,
              fontFamily:'inherit',display:'inline-flex',gap:6,alignItems:'center',
            }}><Icons.ChevL size={16}/> 戻る</button>
            <button
              onClick={step === steps.length-1 ? submit : next}
              disabled={submitState.phase==='loading' || submitState.phase==='success'}
              style={{
                background: submitState.phase==='success' ? '#a8c98a' : 'var(--c-primary-deep)',
                color:'#fff',border:'none',
                padding:'14px 28px',borderRadius:14,fontSize:15,fontWeight:700,
                cursor: (submitState.phase==='loading'||submitState.phase==='success')?'not-allowed':'pointer',
                opacity: submitState.phase==='loading'?.7:1,
                fontFamily:'inherit',display:'inline-flex',gap:6,alignItems:'center',
              }}>
              {submitState.phase==='loading' ? '送信中…' :
               submitState.phase==='success' ? '送信完了 ✓' :
               step === steps.length-1 ? '送信して審査へ' : '次へ進む'} <Icons.ChevR size={16}/>
            </button>
          </div>
        </main>

        {/* Preview rail */}
        <aside style={{padding:'40px 24px',background:'#fff',borderLeft:'1px solid rgba(0,0,0,.04)',overflowY:'auto'}}>
          <div style={{fontSize:12,color:'#9c8a72',fontWeight:600,letterSpacing:'.04em',marginBottom:10}}>PREVIEW</div>
          <div style={{fontSize:13,color:'#7a6a55',marginBottom:18}}>飼い主さんに、こう見えます。</div>
          <PreviewCard form={form}/>
        </aside>
      </div>
    </div>
  );
}

// ---------- Step bodies ----------

const SectionH = ({n, t, sub}) => (
  <div style={{marginBottom:24}}>
    <div style={{fontSize:13,color:'var(--c-primary-deep)',fontWeight:700,fontFamily:'ui-monospace',marginBottom:6}}>STEP {n}</div>
    <h2 style={{fontSize:30,fontWeight:700,letterSpacing:'-.01em',marginBottom:8}}>{t}</h2>
    {sub && <div style={{fontSize:14,color:'#7a6a55',lineHeight:1.7}}>{sub}</div>}
  </div>
);

const Field = ({label, hint, children, half}) => (
  <div style={{flex: half ? '1 1 calc(50% - 8px)' : '1 1 100%', minWidth: half ? 'calc(50% - 8px)' : 0}}>
    <div style={{fontSize:13,fontWeight:600,marginBottom:6,color:'#3c2f1e'}}>{label}</div>
    {children}
    {hint && <div style={{fontSize:11,color:'#9c8a72',marginTop:6}}>{hint}</div>}
  </div>
);

const inputCss = {
  width:'100%',padding:'14px 16px',borderRadius:14,
  border:'1.5px solid rgba(0,0,0,.08)',background:'#fff',
  fontSize:15,fontFamily:'inherit',color:'#2E2418',outline:'none',
};

function Step0({form, set, toggle}) {
  return (<>
    <SectionH n="01" t="基本情報を教えてください" sub="お名前と連絡先は審査用です。プロフィール上ではニックネームで表示されます。"/>
    <div style={{display:'flex',flexWrap:'wrap',gap:16}}>
      <Field label="姓" half><input style={inputCss} placeholder="例：田中"/></Field>
      <Field label="名" half><input style={inputCss} placeholder="例：美香"/></Field>
      <Field label="ニックネーム（公開）" hint="飼い主さんに表示される名前です"><input style={inputCss} placeholder="例：みかこ"/></Field>
      <Field label="生年月日" half><input style={inputCss} type="date"/></Field>
      <Field label="性別" half>
        <div style={{display:'flex',gap:6}}>
          {['女性','男性','その他'].map((g,i)=>(
            <button key={i} onClick={()=>set('gender',g)} style={{
              flex:1,padding:'14px 0',borderRadius:14,fontFamily:'inherit',
              border:'1.5px solid '+(form.gender===g?'var(--c-primary)':'rgba(0,0,0,.08)'),
              background:form.gender===g?'var(--c-primary-soft)':'#fff',
              color:form.gender===g?'var(--c-primary-deep)':'#5d4d3a',
              fontWeight:600,cursor:'pointer',fontSize:14,
            }}>{g}</button>
          ))}
        </div>
      </Field>
      <Field label="メールアドレス"><input style={inputCss} placeholder="例：mikako@example.com"/></Field>
      <Field label="電話番号" hint="ご依頼者との連絡には使われません"><input style={inputCss} placeholder="例：090-1234-5678"/></Field>
      <Field label="活動エリア（郵便番号）" hint="ここから半径◯kmで仕事を受けられます">
        <input style={inputCss} value={form.area} onChange={e=>set('area',e.target.value)}/>
      </Field>
      <Field label="対応可能な駅" hint="活動エリア内で実際に伺える駅を選んでください。1〜2駅先まで含めると、飼い主さんに見つかりやすくなります。">
        <StationPicker stations={form.stations} onToggle={s=>toggle('stations',s)}/>
      </Field>
    </div>
  </>);
}

// 駅選択 — エリアからのサジェスト + 自由入力で追加
function StationPicker({ stations, onToggle }) {
  const [q, setQ] = React.useState('');
  const suggestions = [
    '表参道','外苑前','青山一丁目','広尾','六本木','乃木坂',
    '赤坂','麻布十番','白金高輪','恵比寿','渋谷','原宿',
  ];
  const filtered = q.trim()
    ? suggestions.filter(s => s.includes(q.trim()) && !stations.includes(s))
    : suggestions.filter(s => !stations.includes(s));
  const addCustom = () => {
    const v = q.trim();
    if (!v) return;
    if (!stations.includes(v)) onToggle(v);
    setQ('');
  };

  return (
    <div style={{
      padding:'14px 14px 6px',borderRadius:14,border:'1.5px solid rgba(0,0,0,.08)',background:'#fff',
    }}>
      {/* 選択済みチップ */}
      <div style={{display:'flex',flexWrap:'wrap',gap:6,marginBottom: stations.length ? 12 : 4}}>
        {stations.length === 0 && (
          <span style={{fontSize:12,color:'#9c8a72',padding:'4px 2px'}}>まだ駅が選ばれていません</span>
        )}
        {stations.map(s => (
          <span key={s} style={{
            display:'inline-flex',alignItems:'center',gap:6,
            padding:'7px 10px 7px 12px',borderRadius:999,
            background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
            fontSize:13,fontWeight:700,
          }}>
            <Icons.Pin size={12}/>{s}駅
            <button onClick={()=>onToggle(s)} aria-label={`${s}を削除`} style={{
              border:'none',background:'transparent',color:'var(--c-primary-deep)',
              cursor:'pointer',padding:0,marginLeft:2,fontSize:14,lineHeight:1,opacity:.7,
              display:'inline-flex',alignItems:'center',
            }}>×</button>
          </span>
        ))}
      </div>

      {/* 検索 + 追加 */}
      <div style={{display:'flex',gap:8,marginBottom:10}}>
        <input
          value={q}
          onChange={e=>setQ(e.target.value)}
          onKeyDown={e=>{ if(e.key==='Enter'){ e.preventDefault(); addCustom(); }}}
          placeholder="駅名で検索／追加（例：表参道）"
          style={{
            flex:1,padding:'10px 14px',borderRadius:10,
            border:'1.5px solid rgba(0,0,0,.08)',background:'var(--c-bg)',
            fontSize:14,fontFamily:'inherit',color:'#2E2418',outline:'none',
          }}
        />
        <button onClick={addCustom} disabled={!q.trim()} style={{
          padding:'10px 16px',borderRadius:10,border:'none',fontFamily:'inherit',
          background:q.trim()?'var(--c-primary-deep)':'rgba(0,0,0,.06)',
          color:q.trim()?'#fff':'#9c8a72',
          fontWeight:700,fontSize:13,cursor:q.trim()?'pointer':'not-allowed',
        }}>追加</button>
      </div>

      {/* サジェスト */}
      <div style={{paddingTop:4,borderTop:'1px dashed rgba(0,0,0,.06)'}}>
        <div style={{fontSize:11,color:'#9c8a72',fontWeight:600,margin:'8px 0 6px',letterSpacing:'.04em'}}>
          このエリアの近隣駅
        </div>
        <div style={{display:'flex',flexWrap:'wrap',gap:6,paddingBottom:6}}>
          {filtered.length === 0 && (
            <span style={{fontSize:12,color:'#9c8a72'}}>候補がありません</span>
          )}
          {filtered.map(s => (
            <button key={s} onClick={()=>onToggle(s)} style={{
              padding:'6px 12px',borderRadius:999,fontFamily:'inherit',cursor:'pointer',
              border:'1.5px solid rgba(0,0,0,.08)',background:'#fff',
              color:'#5d4d3a',fontWeight:600,fontSize:13,
              display:'inline-flex',alignItems:'center',gap:4,
            }}>＋ {s}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

function Step1({form, toggle}) {
  const pets = [
    ['dog','犬',PetGlyph.Dog,'小型〜大型'],
    ['cat','猫',PetGlyph.Cat,'室内・外猫'],
    ['rabbit','うさぎ',PetGlyph.Rabbit,'小動物全般'],
    ['bird','鳥','🐦','小鳥・インコ'],
    ['reptile','爬虫類','🦎','カメ・トカゲ'],
    ['fish','魚','🐟','給餌・水替え'],
  ];
  return (<>
    <SectionH n="02" t="対応できるペットの種類" sub="お世話できる動物を選んでください（複数選択可）"/>
    <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14}}>
      {pets.map(([k,n,G,d])=>{
        const sel = form.pets.includes(k);
        return (
          <button key={k} onClick={()=>toggle('pets',k)} style={{
            padding:'22px 18px',borderRadius:20,fontFamily:'inherit',textAlign:'left',
            border: '2px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
            background: sel?'var(--c-primary-soft)':'#fff',cursor:'pointer',
            display:'flex',gap:14,alignItems:'center',
          }}>
            <div style={{
              width:56,height:56,borderRadius:16,
              background:sel?'#fff':'var(--c-bg-alt)',
              color:sel?'var(--c-primary-deep)':'#9c8a72',
              display:'grid',placeItems:'center',fontSize:30,flex:'0 0 auto',
            }}>{typeof G === 'string' ? G : <G size={36}/>}</div>
            <div style={{flex:1}}>
              <div style={{fontWeight:700,fontSize:16}}>{n}</div>
              <div style={{fontSize:12,color:'#7a6a55'}}>{d}</div>
            </div>
            <div style={{
              width:22,height:22,borderRadius:'50%',
              border: '2px solid '+(sel?'var(--c-primary-deep)':'rgba(0,0,0,.12)'),
              background: sel?'var(--c-primary-deep)':'transparent',
              color:'#fff',display:'grid',placeItems:'center',
            }}>{sel && <Icons.Check size={12} stroke={3}/>}</div>
          </button>
        );
      })}
    </div>
  </>);
}

function Step2({form, set, toggle}) {
  const skills = [
    ['walk','散歩経験','長距離・複数頭OK'],
    ['med','投薬','錠剤・注射対応'],
    ['groom','ブラッシング',null],
    ['behavior','問題行動への対応',null],
    ['senior','シニアペットケア',null],
    ['kitten','子犬・子猫ケア',null],
  ];
  return (<>
    <SectionH n="03" t="経験と資格" sub="ペットと関わってきた時間や、お持ちの資格を教えてください。"/>
    <div style={{display:'flex',flexWrap:'wrap',gap:16,marginBottom:8}}>
      <Field label="ペット飼育・お世話経験年数" half>
        <div style={{padding:'14px 16px',borderRadius:14,border:'1.5px solid rgba(0,0,0,.08)',background:'#fff'}}>
          <div style={{display:'flex',justifyContent:'space-between',marginBottom:8,fontSize:14}}>
            <span style={{color:'#7a6a55'}}>1年</span>
            <span style={{fontWeight:700,color:'var(--c-primary-deep)'}}>{form.exp}年</span>
            <span style={{color:'#7a6a55'}}>20年+</span>
          </div>
          <input type="range" min="1" max="20" value={form.exp} onChange={e=>set('exp',+e.target.value)}
                 style={{width:'100%',accentColor:'var(--c-primary)'}}/>
        </div>
      </Field>
      <Field label="主な保有資格" half>
        <select style={inputCss} value={form.cert} onChange={e=>set('cert',e.target.value)}>
          <option value="">選択してください</option>
          <option value="pet-care-2">ペットケアアドバイザー2級</option>
          <option value="pet-care-1">ペットケアアドバイザー1級</option>
          <option value="dog-trainer">家庭犬訓練士</option>
          <option value="vet-tech">愛玩動物看護師</option>
          <option value="sopra-basic">ペットシッター（初級）／JPLC認定 ・ ソプラアカデミー</option>
          <option value="sopra-adv">ペットシッター（上級）／JPLC認定 ・ ソプラアカデミー</option>
          <option value="none">資格はないが経験あり</option>
        </select>
      </Field>
    </div>

    {/* ソプラアカデミー CTA — 資格なし or 経験未確認の人向け */}
    {(form.cert === '' || form.cert === 'none') && (
      <AcademyCTA compact context="cert"/>
    )}

    <div style={{marginTop:14}}>
      <div style={{fontSize:13,fontWeight:600,marginBottom:10}}>得意なお世話（複数選択可）</div>
      <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
        {skills.map(([k,n,sub])=>{
          const sel = form.skills.includes(k);
          return (
            <button key={k} onClick={()=>toggle('skills',k)} style={{
              padding:'12px 18px',borderRadius:999,fontFamily:'inherit',cursor:'pointer',
              border: '1.5px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
              background: sel?'var(--c-primary-soft)':'#fff',
              color: sel?'var(--c-primary-deep)':'#3c2f1e',
              fontWeight:600,fontSize:14,display:'inline-flex',gap:6,alignItems:'center',
            }}>{sel && <Icons.Check size={14} stroke={2.6}/>}{n}</button>
          );
        })}
      </div>
    </div>

    {/* 動物取扱責任者 */}
    <div style={{
      marginTop:28,padding:'22px 22px 18px',borderRadius:20,
      background:'#fff',border:'1.5px solid rgba(0,0,0,.06)',
    }}>
      <div style={{display:'flex',gap:10,alignItems:'flex-start',marginBottom:12}}>
        <div style={{
          width:36,height:36,borderRadius:10,flex:'0 0 auto',
          background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
          display:'grid',placeItems:'center',
        }}><Icons.Shield size={18}/></div>
        <div>
          <div style={{fontWeight:700,fontSize:15}}>動物取扱責任者の資格</div>
          <div style={{fontSize:12,color:'#7a6a55',marginTop:2,lineHeight:1.7}}>
            ペットシッター業（保管）には動物取扱業の登録が必要です。お持ちかどうか教えてください。
          </div>
        </div>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
        {[
          ['have','登録あり','動物取扱責任者として登録済み'],
          ['none','登録なし','業務委託契約でカバーできます'],
        ].map(([k,n,d])=>{
          const sel = form.licStatus === k;
          return (
            <button key={k} onClick={()=>set('licStatus',k)} style={{
              padding:'14px 16px',borderRadius:14,fontFamily:'inherit',cursor:'pointer',textAlign:'left',
              border:'2px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
              background:sel?'var(--c-primary-soft)':'var(--c-bg)',
              display:'flex',alignItems:'center',gap:12,
            }}>
              <span style={{
                width:18,height:18,borderRadius:'50%',flex:'0 0 auto',
                border:'2px solid '+(sel?'var(--c-primary-deep)':'rgba(0,0,0,.18)'),
                background:sel?'var(--c-primary-deep)':'transparent',
                display:'grid',placeItems:'center',color:'#fff',
              }}>{sel && <Icons.Check size={10} stroke={3}/>}</span>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontWeight:700,fontSize:14,color:sel?'var(--c-primary-deep)':'#3c2f1e'}}>{n}</div>
                <div style={{fontSize:11,color:'#7a6a55',marginTop:2}}>{d}</div>
              </div>
            </button>
          );
        })}
      </div>

      {form.licStatus === 'have' && (
        <div style={{
          marginTop:16,padding:18,borderRadius:14,background:'var(--c-bg)',
          display:'flex',flexWrap:'wrap',gap:14,
        }}>
          <Field label="登録番号" half>
            <input style={inputCss} placeholder="例：13東京都動セ第000000号"
                   value={form.licNumber} onChange={e=>set('licNumber',e.target.value)}/>
          </Field>
          <Field label="登録自治体" half>
            <input style={inputCss} placeholder="例：東京都港区"
                   value={form.licPrefecture} onChange={e=>set('licPrefecture',e.target.value)}/>
          </Field>
          <Field label="動物取扱業の種別" half>
            <select style={inputCss} value={form.licCategory} onChange={e=>set('licCategory',e.target.value)}>
              <option value="hokan">保管（ペットシッター・ペットホテルなど）</option>
              <option value="kunren">訓練</option>
              <option value="tenji">展示</option>
              <option value="hanbai">販売</option>
              <option value="kashidashi">貸出し</option>
            </select>
          </Field>
          <Field label="動物取扱責任者の氏名" half>
            <input style={inputCss} placeholder="登録時のお名前"
                   value={form.licHolderName} onChange={e=>set('licHolderName',e.target.value)}/>
          </Field>
          <div style={{flex:'1 1 100%',fontSize:12,color:'#7a6a55',lineHeight:1.8,paddingTop:4}}>
            <Icons.Shield size={12}/> 登録証のコピーは「本人確認」ステップでアップロードしてください。
          </div>
        </div>
      )}

      {form.licStatus === 'none' && (
        <div style={{
          marginTop:16,padding:18,borderRadius:14,
          background:'color-mix(in oklab, var(--c-accent) 14%, #fff)',
          border:'1px solid color-mix(in oklab, var(--c-accent) 35%, #fff)',
        }}>
          <div style={{display:'flex',gap:10,alignItems:'flex-start',marginBottom:10}}>
            <Icons.Sparkle size={18}/>
            <div style={{flex:1}}>
              <div style={{fontWeight:700,fontSize:14}}>ソプラ銀座株式会社と業務委託契約を結びます</div>
              <div style={{fontSize:12,color:'#5d4d3a',marginTop:6,lineHeight:1.8}}>
                動物取扱責任者の資格をお持ちでないシッターは、運営元の
                <strong>ソプラ銀座株式会社（動物取扱業登録：13東京都動セ第◯◯号／保管）</strong>と
                業務委託契約を結ぶことで、合法的にお仕事ができます。手続きはオンラインで完結し、
                登録費・年会費は無料です。
              </div>
            </div>
          </div>
          <ul style={{
            margin:'8px 0 12px',paddingLeft:18,fontSize:12,color:'#5d4d3a',lineHeight:1.9,
          }}>
            <li>運営会社のスタッフとして、研修・サポートを受けられます</li>
            <li>事故・損害保険は運営会社の包括契約でカバーされます</li>
            <li>動物取扱責任者の資格取得を希望する場合、研修への参加もご案内します</li>
          </ul>
          <label style={{
            display:'flex',gap:10,alignItems:'flex-start',padding:'12px 14px',
            background:'#fff',borderRadius:12,border:'1.5px solid rgba(0,0,0,.06)',
            cursor:'pointer',
          }} onClick={()=>set('licAgree', !form.licAgree)}>
            <span style={{
              width:20,height:20,borderRadius:6,flex:'0 0 auto',marginTop:1,
              background:form.licAgree?'var(--c-primary-deep)':'transparent',
              border:'2px solid '+(form.licAgree?'var(--c-primary-deep)':'rgba(0,0,0,.2)'),
              display:'grid',placeItems:'center',color:'#fff',
            }}>{form.licAgree && <Icons.Check size={12} stroke={3}/>}</span>
            <span style={{fontSize:13,lineHeight:1.6}}>
              <strong>業務委託契約の内容を確認し、同意します</strong>
              <span style={{color:'#9c8a72',fontSize:11,marginLeft:6}}>
                <a style={{color:'var(--c-primary-deep)',textDecoration:'underline'}}>契約書を表示</a>
              </span>
            </span>
          </label>

          {/* ソプラアカデミー CTA — 業務委託で進む人にも将来の資格取得を案内 */}
          <AcademyCTA compact context="license"/>
        </div>
      )}
    </div>
  </>);
}

// ----------------- ソプラアカデミー CTA -----------------
function AcademyCTA({ compact, context }) {
  const academy = (typeof window !== 'undefined' && window.SOPRA_ACADEMY);
  if (!academy) return null;
  const headline = context === 'license'
    ? '将来的に資格を取得して責任者になりたい方は'
    : '資格がなくても、ソプラアカデミーで取得できます';
  const sub = context === 'license'
    ? '業務委託契約で活動しながら、ソプラアカデミーで動物取扱責任者の要件を満たす資格取得も可能です。'
    : 'JPLC認定の通信講座。在宅・最短2ヶ月で取得でき、副業からプロまで対応。';
  return (
    <div style={{
      marginTop: compact ? 14 : 24,
      padding:'16px 18px',borderRadius:14,
      background:'#fff',
      border:'1.5px dashed var(--c-primary)',
    }}>
      <div style={{display:'flex',gap:12,alignItems:'flex-start',marginBottom:12}}>
        <div style={{
          width:42,height:42,borderRadius:12,flex:'0 0 auto',
          background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
          display:'grid',placeItems:'center',fontSize:20,
        }}>🎓</div>
        <div style={{flex:1}}>
          <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,letterSpacing:'.04em'}}>SOPRA ACADEMY</div>
          <div style={{fontWeight:700,fontSize:14,color:'#3c2f1e',marginTop:2,lineHeight:1.5}}>{headline}</div>
          <div style={{fontSize:12,color:'#7a6a55',marginTop:4,lineHeight:1.7}}>{sub}</div>
        </div>
      </div>
      <div style={{
        display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8,marginBottom:12,
      }}>
        {academy.courses.map(c=>(
          <div key={c.key} style={{
            padding:'10px 12px',borderRadius:10,background:'var(--c-bg)',
            position:'relative',
          }}>
            {c.badge && (
              <span style={{
                position:'absolute',top:-6,right:8,
                fontSize:9,padding:'2px 7px',borderRadius:999,fontWeight:700,
                background:'var(--c-accent)',color:'#5d4d3a',
              }}>{c.badge}</span>
            )}
            <div style={{fontSize:11,color:'#7a6a55',fontWeight:600}}>{c.name.replace(/ペットシッター/,'').trim() || c.name}</div>
            <div style={{fontSize:14,fontWeight:700,marginTop:2,color:'#3c2f1e'}}>
              ¥{c.price.toLocaleString()}
              <span style={{fontSize:9,color:'#9c8a72',fontWeight:500,marginLeft:2}}>税込</span>
            </div>
          </div>
        ))}
      </div>
      <div style={{display:'flex',gap:8,alignItems:'center',flexWrap:'wrap'}}>
        <a href={academy.url} target="_blank" rel="noopener" style={{
          display:'inline-flex',gap:6,alignItems:'center',
          background:'var(--c-primary-deep)',color:'#fff',
          padding:'9px 16px',borderRadius:10,
          fontSize:13,fontWeight:700,textDecoration:'none',
        }}>資格講座を見る ↗</a>
        <span style={{fontSize:11,color:'#9c8a72'}}>
          在宅・最短2ヶ月・JPLC認定
        </span>
      </div>
    </div>
  );
}

function Step3({form, toggle}) {
  const types = [
    ['visit','訪問ケア','飼い主様のお宅にお伺いします',Icons.Pin],
    ['walk','お散歩のみ','お家までお迎えに行きます',Icons.Sparkle],
    ['stay','お預かり（自宅）','シッターの自宅でお預かり',Icons.Heart],
    ['overnight','お泊まり','宿泊を含む長時間のケア',Icons.Calendar],
  ];
  return (<>
    <SectionH n="04" t="提供できるサービス" sub="複数選んでいただけます。提供範囲はあとからも変更できます。"/>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
      {types.map(([k,n,d,I])=>{
        const sel = form.serviceTypes.includes(k);
        return (
          <button key={k} onClick={()=>toggle('serviceTypes',k)} style={{
            padding:'22px',borderRadius:18,fontFamily:'inherit',textAlign:'left',cursor:'pointer',
            border:'2px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
            background: sel?'var(--c-primary-soft)':'#fff',
            display:'flex',gap:16,alignItems:'center',
          }}>
            <div style={{
              width:48,height:48,borderRadius:14,
              background:sel?'#fff':'var(--c-bg-alt)',
              color:sel?'var(--c-primary-deep)':'#9c8a72',
              display:'grid',placeItems:'center',flex:'0 0 auto',
            }}><I size={22}/></div>
            <div style={{flex:1}}>
              <div style={{fontWeight:700,fontSize:16}}>{n}</div>
              <div style={{fontSize:12,color:'#7a6a55',marginTop:2}}>{d}</div>
            </div>
            <div style={{
              width:22,height:22,borderRadius:6,
              border:'2px solid '+(sel?'var(--c-primary-deep)':'rgba(0,0,0,.12)'),
              background:sel?'var(--c-primary-deep)':'transparent',
              color:'#fff',display:'grid',placeItems:'center',
            }}>{sel && <Icons.Check size={12} stroke={3}/>}</div>
          </button>
        );
      })}
    </div>
  </>);
}

function Step4({form, set, toggle}) {
  const days = [['mon','月'],['tue','火'],['wed','水'],['thu','木'],['fri','金'],['sat','土'],['sun','日']];
  const pricing = (typeof window !== 'undefined' && window.PALPET_PRICING) || { base:{ '60':3300 } };
  return (<>
    <SectionH n="05" t="空き状況" sub="活動できる曜日・時間を教えてください。料金はパルペットで統一されています。"/>

    {/* 統一料金の説明 */}
    <div style={{
      padding:'18px 22px',borderRadius:18,
      background:'var(--c-primary-soft)',
      border:'1.5px solid var(--c-primary)',
      marginBottom:24,
    }}>
      <div style={{display:'flex',gap:12,alignItems:'flex-start'}}>
        <div style={{
          width:36,height:36,borderRadius:10,flex:'0 0 auto',
          background:'#fff',color:'var(--c-primary-deep)',
          display:'grid',placeItems:'center',
        }}><Icons.Shield size={18}/></div>
        <div style={{flex:1}}>
          <div style={{fontWeight:700,fontSize:14,color:'var(--c-primary-deep)',marginBottom:4}}>
            料金はパルペットで統一されています
          </div>
          <div style={{fontSize:12,color:'#5d4d3a',lineHeight:1.8}}>
            19年のペットケア実績を持つソプラ銀座が運営するため、シッター間で料金を競わせる必要はありません。
            人材の質を担保しているからこそ、すべてのシッターに同じ料金が支払われます。
          </div>
        </div>
      </div>
      <div style={{
        display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8,
        marginTop:16,padding:'14px',background:'#fff',borderRadius:14,
      }}>
        {(pricing.plans?.standard?.tiers || []).map((tier)=>(
          <div key={tier.minutes} style={{textAlign:'center'}}>
            <div style={{fontSize:11,color:'#9c8a72'}}>{tier.minutes}分</div>
            <div style={{fontSize:17,fontWeight:700,marginTop:2,color:'#3c2f1e'}}>
              ¥{tier.price.toLocaleString()}
            </div>
          </div>
        ))}
      </div>
      <div style={{fontSize:11,color:'#7a6a55',marginTop:8,lineHeight:1.7}}>
        ※ 税込・1回の訪問あたり（基本ペットシッタープラン）。延長30分毎 ¥3,000。
        ロング・深夜・定額プランも別途あります。<br/>
        ※ <strong>別途交通費</strong>（同区内 ¥500目安）。シッターへの報酬は別の料金表で公開されています。
      </div>
    </div>
    <div style={{marginTop:20}}>
      <Field label="活動できる曜日">
        <div style={{display:'flex',gap:6}}>
          {days.map(([k,n])=>{
            const sel = form.days.includes(k);
            return (
              <button key={k} onClick={()=>toggle('days',k)} style={{
                flex:1,padding:'16px 0',borderRadius:14,fontFamily:'inherit',cursor:'pointer',
                border:'1.5px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
                background:sel?'var(--c-primary-soft)':'#fff',
                color:sel?'var(--c-primary-deep)':'#5d4d3a',
                fontWeight:700,fontSize:14,
              }}>{n}</button>
            );
          })}
        </div>
      </Field>
    </div>
    <div style={{marginTop:20,display:'flex',gap:16}}>
      <Field label="活動時間" half>
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <input style={inputCss} defaultValue="08:00" type="time"/>
          <span style={{color:'#7a6a55'}}>〜</span>
          <input style={inputCss} defaultValue="20:00" type="time"/>
        </div>
      </Field>
      <Field label="最低受注時間" half>
        <select style={inputCss} defaultValue="60">
          <option value="30">30分から</option>
          <option value="60">1時間から</option>
          <option value="120">2時間から</option>
        </select>
      </Field>
    </div>
  </>);
}

function Step5({form, set}) {
  return (<>
    <SectionH n="06" t="プロフィールを書いてみましょう" sub="飼い主さんが最初に読む部分です。安心してもらえるよう、ご自身の言葉で。"/>
    <Field label="プロフィール写真">
      <PhotoUpload kind="circle"
                   value={form.profilePhoto}
                   onChange={(f)=>set('profilePhoto', f)}
                   title="顔がはっきり写った写真を1枚"
                   hint="笑顔の写真、ペットと一緒の写真はよりおすすめ。サングラスは不可です（5MB以内・JPEG/PNG）。"
                   sampleTone="warm"/>
    </Field>
    <div style={{marginTop:20}}>
      <Field label="自己紹介" hint="200〜400文字目安。経験、好きなこと、ご家族のペットなど。">
        <textarea value={form.bio} onChange={e=>set('bio',e.target.value)}
                  placeholder="例：保護犬と暮らしてきた経験を活かして、その子のペースに寄り添ったお世話をします。"
                  style={{...inputCss,minHeight:140,resize:'vertical',lineHeight:1.8}}/>
      </Field>
    </div>
    <div style={{marginTop:20}}>
      <Field label="ひとことキャッチコピー" hint="一覧で表示されます。20文字程度">
        <input style={inputCss} placeholder="例：その子のペースに合わせて、まいにちを大切に。"/>
      </Field>
    </div>
  </>);
}

function Step6({form, set}) {
  return (<>
    <SectionH n="07" t="本人確認" sub="安全のため、登録時に本人確認をお願いしています。1〜2営業日で確認が完了します。"/>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
      <PhotoUpload kind="card"
                   value={form.idDocument}
                   onChange={(f)=>set('idDocument', f)}
                   title="身分証アップロード"
                   hint="運転免許証・マイナンバーカードなど（5MB以内）"
                   accept="image/*,.pdf"/>
      <PhotoUpload kind="card"
                   value={form.selfie}
                   onChange={(f)=>set('selfie', f)}
                   title="セルフィー撮影"
                   hint="身分証と同じ顔の写真（5MB以内）"
                   accept="image/*"/>
      {/* ペット保険同意 / 利用規約 — チェックボックス系（写真ではない） */}
      {[
        ['ペット保険同意','最大1,000万円の補償', Icons.Shield, 'insAgree'],
        ['利用規約への同意','プライバシーポリシー含む', Icons.Check, 'tosAgree'],
      ].map(([t,s,I,k],i)=>{
        const done = !!form[k];
        return (
          <button key={i} onClick={()=>set(k, !done)} style={{
            padding:'22px',borderRadius:18,background:'#fff',
            border:'1.5px solid '+(done?'var(--c-primary)':'rgba(0,0,0,.08)'),
            display:'flex',gap:16,alignItems:'center',cursor:'pointer',
            fontFamily:'inherit',textAlign:'left',width:'100%',
          }}>
            <div style={{
              width:44,height:44,borderRadius:12,flex:'0 0 auto',
              background:done?'var(--c-primary)':'var(--c-bg-alt)',
              color:done?'#fff':'#9c8a72',
              display:'grid',placeItems:'center',
            }}>{done ? <Icons.Check size={20} stroke={2.6}/> : <I size={20}/>}</div>
            <div style={{flex:1}}>
              <div style={{fontWeight:700,fontSize:14}}>{t}</div>
              <div style={{fontSize:12,color:'#7a6a55',marginTop:2}}>{s}</div>
            </div>
            <span style={{
              background:done?'transparent':'var(--c-primary-soft)',
              color:done?'#9c8a72':'var(--c-primary-deep)',
              padding:'8px 14px',borderRadius:10,
              fontWeight:700,fontSize:13,
            }}>{done?'同意済み ✓':'同意する'}</span>
          </button>
        );
      })}
    </div>
    <div style={{
      marginTop:24,padding:'20px 22px',borderRadius:16,background:'var(--c-primary-soft)',
      color:'var(--c-primary-deep)',fontSize:13,lineHeight:1.85,display:'flex',gap:12,
    }}>
      <Icons.Shield size={20}/>
      <div>
        <strong>審査基準について</strong><br/>
        本人確認・反社チェック・SNS確認・面接（ビデオ通話）を経て、登録の可否をお伝えします。
        審査期間は通常 3〜5営業日です。
      </div>
    </div>
    <div style={{
      marginTop:12,padding:'16px 20px',borderRadius:14,
      background:'#fff',border:'1px solid rgba(0,0,0,.06)',
      fontSize:12,color:'#5d4d3a',lineHeight:1.8,display:'flex',gap:12,alignItems:'flex-start',
    }}>
      <Icons.Sparkle size={16}/>
      <div>
        「送信して審査へ」を押すと、登録内容が運営の管理用スプレッドシートに記録され、Palpet運営にメール通知が届きます。
        審査結果のご連絡まで、しばらくお待ちください。
      </div>
    </div>
  </>);
}

// ---------- Right preview ----------
function PreviewCard({form}) {
  const petLabel = {dog:'犬',cat:'猫',rabbit:'うさぎ',bird:'鳥',reptile:'爬虫類',fish:'魚'};
  return (
    <div style={{background:'var(--c-bg)',borderRadius:18,padding:14,border:'1px solid rgba(0,0,0,.04)'}}>
      <div style={{
        aspectRatio:'4/3',borderRadius:12,
        background:'repeating-linear-gradient(135deg,#F4DBA8 0 12px,#E8B97A 12px 24px)',
        marginBottom:12,
      }}/>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
        <strong style={{fontSize:15}}>みかこ</strong>
        <span style={{fontSize:10,color:'#7a6a55'}}>29歳</span>
        {form.idVerified && (
          <span style={{marginLeft:'auto',fontSize:9,background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',padding:'2px 6px',borderRadius:999,fontWeight:700}}>本人確認済</span>
        )}
      </div>
      <div style={{fontSize:11,color:'#7a6a55',display:'flex',gap:6,alignItems:'center'}}>
        <Icons.Pin size={12}/>港区南青山 ・ 経験 {form.exp}年
      </div>
      {form.stations && form.stations.length > 0 && (
        <div style={{display:'flex',flexWrap:'wrap',gap:4,marginTop:8}}>
          {form.stations.slice(0,4).map((s,i)=>(
            <span key={i} style={{
              fontSize:10,padding:'3px 7px',borderRadius:999,
              background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
              fontWeight:700,display:'inline-flex',alignItems:'center',gap:3,
            }}><Icons.Pin size={10}/>{s}</span>
          ))}
          {form.stations.length > 4 && (
            <span style={{fontSize:10,color:'#9c8a72',padding:'3px 4px'}}>+{form.stations.length-4}</span>
          )}
        </div>
      )}
      <div style={{fontSize:11,color:'#5d4d3a',marginTop:8,lineHeight:1.7}}>
        対応：{form.pets.map(p=>petLabel[p]).join('・')}
      </div>
      <div style={{fontSize:11,color:'#5d4d3a',marginTop:4}}>
        サービス：{form.serviceTypes.map(s=>({visit:'訪問',walk:'散歩',stay:'お預かり',overnight:'お泊まり'})[s]).join('・')}
      </div>
      <div style={{
        display:'flex',gap:6,marginTop:10,flexWrap:'wrap',
      }}>
        {form.skills.slice(0,3).map((k,i)=>(
          <span key={i} style={{fontSize:10,padding:'3px 8px',borderRadius:999,background:'#fff',color:'#5d4d3a',border:'1px solid rgba(0,0,0,.06)'}}>
            {({walk:'散歩',med:'投薬',groom:'ブラッシング',behavior:'問題行動',senior:'シニア',kitten:'子犬・子猫'})[k]}
          </span>
        ))}
      </div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginTop:12,paddingTop:10,borderTop:'1px solid rgba(0,0,0,.06)'}}>
        <div style={{fontSize:11,color:'var(--c-primary-deep)',display:'flex',gap:4,alignItems:'center'}}><Icons.Star size={12}/> 新規</div>
        <div style={{fontSize:11,padding:'3px 9px',borderRadius:999,fontWeight:700,background:'var(--c-bg-alt)',color:'#7a6a55'}}>統一料金</div>
      </div>
    </div>
  );
}

// ===== 送信状態フィードバック（シッター登録 & 飼い主登録で共用） =====
function SubmitFeedback({ state, onReset }) {
  const { phase, message, res } = state;
  const palette = {
    loading: { bg:'var(--c-primary-soft)', fg:'var(--c-primary-deep)', icon:'⏳' },
    success: { bg:'#E8F5E0',                fg:'#3a7a2a',                icon:'✓' },
    error:   { bg:'color-mix(in oklab, var(--c-accent) 22%, #fff)',
               fg:'#8b6a14', icon:'⚠️' },
  }[phase] || { bg:'#fff', fg:'#3c2f1e', icon:'' };
  return (
    <div style={{
      marginTop:32,padding:'18px 22px',borderRadius:14,
      background: palette.bg, color: palette.fg,
      display:'flex',gap:12,alignItems:'flex-start',
    }}>
      <div style={{fontSize:20,lineHeight:1}}>{palette.icon}</div>
      <div style={{flex:1,fontSize:13,lineHeight:1.7}}>
        <strong>
          {phase==='loading' && '送信中…'}
          {phase==='success' && '送信完了'}
          {phase==='error'   && '送信エラー'}
        </strong>
        <div style={{marginTop:4}}>{message}</div>
        {phase==='success' && res?.demo && (
          <div style={{fontSize:11,marginTop:8,opacity:.8}}>
            ※ デモモード表示（送信は実行されていません）。本番モードで運用されます。
          </div>
        )}
      </div>
      {phase === 'error' && (
        <button onClick={onReset} style={{
          background:'transparent',border:'1px solid currentColor',
          padding:'6px 12px',borderRadius:8,cursor:'pointer',
          fontFamily:'inherit',fontSize:12,fontWeight:600,color:'inherit',
        }}>リトライ</button>
      )}
    </div>
  );
}
window.SitterRegister = SitterRegister;
window.SubmitFeedback = SubmitFeedback;
window.RegField = Field;
window.regInputCss = inputCss;