// SitterMypage — シッター（受託側）のマイページ。
// 飼い主側 my-bookings.jsx の対になる位置づけ。
// タブ：ホーム / 依頼受付 / スケジュール / 顧客 / 報酬

const TODAY_VISITS = [
  { id:'V-9001', time:'09:30–11:00', owner:'佐藤ご家族', pet:'ココ（柴犬・3歳）',
    address:'港区南青山3-◯-◯', service:'訪問ケア・散歩', status:'next', distance:'1.2km' },
  { id:'V-9002', time:'14:00–15:30', owner:'田中ご家族', pet:'ミーシャ（ラグドール・5歳）',
    address:'港区赤坂6-◯-◯', service:'訪問ケア', status:'upcoming', distance:'2.4km' },
  { id:'V-9003', time:'18:00–19:00', owner:'伊藤ご家族', pet:'モカ（ミニチュアダックス・8歳）',
    address:'渋谷区広尾2-◯-◯', service:'訪問ケア・投薬', status:'upcoming', distance:'3.1km' },
];

const PENDING_REQUESTS = [
  { id:'R-2401', owner:'山口さん', pet:'ハル（トイプードル・1歳）',
    when:'5/26（月）10:00–12:00', service:'訪問ケア・散歩', station:'表参道',
    note:'初対面でも人懐っこい子です。30分散歩できる方を探しています。',
    rate:3200, total:6400, deadlineHours:18 },
  { id:'R-2402', owner:'鈴木さん', pet:'ノア（雑種・2歳）',
    when:'5/28（水）09:00–11:30', service:'訪問ケア・投薬', station:'外苑前',
    note:'1日2回の点眼が必要です。経験があると安心です。',
    rate:3200, total:8000, deadlineHours:42 },
  { id:'R-2403', owner:'高橋さん', pet:'ベル（柴犬・10歳）',
    when:'6/1（日）13:00–16:00', service:'訪問ケア・散歩', station:'青山一丁目',
    note:'シニア犬なのでゆっくり目で。お薬は不要です。',
    rate:3200, total:9600, deadlineHours:96 },
];

const CLIENTS = [
  { name:'佐藤ご家族', species:'dog', photo:'peach', pet:'ココ（柴犬・3歳）', visits:8, lastVisit:'2026-05-19', rating:5.0, station:'表参道' },
  { name:'田中ご家族', species:'cat', photo:'warm', pet:'ミーシャ（ラグドール・5歳）', visits:4, lastVisit:'2026-05-12', rating:4.8, station:'赤坂' },
  { name:'伊藤ご家族', species:'dog', photo:'cream', pet:'モカ（ミニチュアダックス・8歳）', visits:12, lastVisit:'2026-05-18', rating:5.0, station:'広尾' },
  { name:'渡辺ご家族', species:'rabbit', photo:'sage', pet:'クー（ホーランドロップ・4歳）', visits:2, lastVisit:'2026-04-20', rating:4.5, station:'恵比寿' },
];

const PAYOUTS = [
  { month:'2026-05', visits:14, gross:84600, fee:12690, net:71910, status:'進行中' },
  { month:'2026-04', visits:18, gross:108000, fee:16200, net:91800, status:'振込済' },
  { month:'2026-03', visits:16, gross:96000, fee:14400, net:81600, status:'振込済' },
];

function SitterMypage({ initialTab = 'home' }) {
  const [tab, setTab] = React.useState(initialTab);  // home | requests | schedule | clients | earnings

  return (
    <div data-page="mypage-sitter" style={{
      width:'100%',minHeight:'100%',background:'var(--c-bg)',
      color:'#2E2418',fontFamily:'var(--font-jp)',display:'flex',flexDirection:'column',
    }}>
      {/* Header */}
      <header style={{
        display:'flex',alignItems:'center',justifyContent:'space-between',
        padding:'18px 32px',background:'#fff',borderBottom:'1px solid rgba(0,0,0,.04)',
      }}>
        <div style={{display:'flex',alignItems:'center',gap:16}}>
          <img src="assets/logo-horizontal.png" alt="palpet" style={{height:44}}/>
          <span style={{
            fontSize:11,padding:'3px 10px',borderRadius:999,fontWeight:700,
            background:'#3c2f1e',color:'#fff',letterSpacing:'.04em',
          }}>SITTER</span>
        </div>
        <nav style={{display:'flex',gap:24,fontSize:13}}>
          <a style={{fontWeight:700,color:'var(--c-primary-deep)'}}>マイページ</a>
          <a style={{color:'#7a6a55'}}>プロフィール編集</a>
          <a style={{color:'#7a6a55'}}>メッセージ</a>
          <a style={{color:'#7a6a55'}}>ヘルプ</a>
        </nav>
        <div style={{display:'flex',gap:10,alignItems:'center'}}>
          <span style={{
            fontSize:11,padding:'4px 10px',borderRadius:999,
            background:'#E8F5E0',color:'#3a7a2a',fontWeight:700,
          }}>● 受付中</span>
          <button style={{
            width:38,height:38,borderRadius:12,border:'none',background:'transparent',
            cursor:'pointer',display:'grid',placeItems:'center',position:'relative',
          }}>
            <Icons.Bell size={18}/>
            <span style={{
              position:'absolute',top:6,right:6,
              width:8,height:8,borderRadius:'50%',background:'var(--c-primary-deep)',
            }}/>
          </button>
          <div style={{
            width:38,height:38,borderRadius:'50%',background:'var(--c-primary-soft)',
            color:'var(--c-primary-deep)',display:'grid',placeItems:'center',fontWeight:700,
          }}>み</div>
        </div>
      </header>

      {/* Sub-nav tabs */}
      <div style={{
        background:'#fff',padding:'0 32px',borderBottom:'1px solid rgba(0,0,0,.04)',
        display:'flex',gap:4,
      }}>
        {[
          ['home','ホーム'],
          ['requests','依頼受付', PENDING_REQUESTS.length],
          ['schedule','スケジュール'],
          ['clients','顧客一覧'],
          ['earnings','報酬・支払い'],
        ].map(([k,n,badge])=>(
          <button key={k} onClick={()=>setTab(k)} style={{
            padding:'16px 20px',background:'transparent',border:'none',cursor:'pointer',
            fontFamily:'inherit',fontSize:14,fontWeight:tab===k?700:500,
            color:tab===k?'var(--c-primary-deep)':'#7a6a55',
            borderBottom:'3px solid '+(tab===k?'var(--c-primary)':'transparent'),
            marginBottom:-1,display:'inline-flex',gap:8,alignItems:'center',
          }}>
            {n}
            {badge ? (
              <span style={{
                fontSize:10,padding:'1px 7px',borderRadius:999,fontWeight:700,
                background:'var(--c-primary-deep)',color:'#fff',
              }}>{badge}</span>
            ) : null}
          </button>
        ))}
      </div>

      <main style={{padding:'32px 32px 48px',flex:1}}>
        {tab === 'home'      && <SitterHome/>}
        {tab === 'requests'  && <SitterRequests/>}
        {tab === 'schedule'  && <SitterSchedule/>}
        {tab === 'clients'   && <SitterClients/>}
        {tab === 'earnings'  && <SitterEarnings/>}
      </main>
    </div>
  );
}

// ---------- ホーム ----------
function SitterHome() {
  return (
    <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:24,maxWidth:1240,margin:'0 auto'}}>
      <div>
        <SmCard>
          <SCardHead label="本日のスケジュール" right={<a style={{fontSize:12,color:'var(--c-primary-deep)'}}>地図でルートを見る</a>}/>
          <div style={{fontSize:13,color:'#7a6a55',marginBottom:12}}>
            5/20（水）・3件の訪問予定 ・ 移動距離 約6.7km
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            {TODAY_VISITS.map(v => <VisitRow key={v.id} visit={v}/>)}
          </div>
        </SmCard>

        <SmCard style={{marginTop:18}}>
          <SCardHead label="新着の依頼" right={<a style={{fontSize:12,color:'var(--c-primary-deep)'}}>すべて見る →</a>}/>
          <div style={{fontSize:13,color:'#7a6a55',marginBottom:12}}>
            {PENDING_REQUESTS.length}件の依頼が承認待ちです。24時間以内の返答をお願いします。
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            {PENDING_REQUESTS.slice(0,2).map(r => <RequestRow key={r.id} req={r} compact/>)}
          </div>
        </SmCard>
      </div>

      <div>
        <SmCard>
          <SCardHead label="今月の状況"/>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <SStat n={14} l="訪問件数" hint="目標 20件"/>
            <SStat n="¥84,600" l="売上"/>
            <SStat n="4.96" l="評価平均"/>
            <SStat n={3} l="新規顧客"/>
          </div>
          <div style={{marginTop:14,height:6,background:'rgba(0,0,0,.06)',borderRadius:999}}>
            <div style={{width:`${(14/20)*100}%`,height:'100%',background:'var(--c-primary)',borderRadius:999}}/>
          </div>
          <div style={{fontSize:11,color:'#7a6a55',marginTop:6,textAlign:'right'}}>あと 6件で月間目標達成</div>
        </SmCard>

        <SmCard style={{marginTop:18}}>
          <SCardHead label="あなたへのおしらせ"/>
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            <Notice icon="⭐" title="新しいレビューが3件" body="今月は5★が2件、4★が1件です。"/>
            <Notice icon="🎓" title="シニア犬講座のご案内" body="6/5（木）19:00〜 オンライン研修。"/>
            <Notice icon="💴" title="4月分の振込が完了しました" body="¥91,800（手数料控除後）"/>
          </div>
        </SmCard>

        <SmCard style={{marginTop:18}}>
          <SCardHead label="プロフィール公開設定"/>
          <Toggle label="検索結果に表示" on={true}/>
          <Toggle label="新規顧客からの依頼を受ける" on={true}/>
          <Toggle label="お試し無料カウンセリング対応" on={false}/>
        </SmCard>
      </div>
    </div>
  );
}

// ---------- 依頼受付 ----------
function SitterRequests() {
  return (
    <div style={{maxWidth:1240,margin:'0 auto'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:18}}>
        <div>
          <h2 style={{fontSize:24,fontWeight:700,letterSpacing:'-.01em'}}>新着の依頼</h2>
          <div style={{fontSize:13,color:'#7a6a55',marginTop:4}}>
            {PENDING_REQUESTS.length}件 ・ 24時間以内に承諾／辞退をお願いします
          </div>
        </div>
        <div style={{display:'flex',gap:6}}>
          {[['all','すべて'],['urgent','緊急（24h以内）']].map(([k,n],i)=>(
            <button key={k} style={{
              padding:'8px 14px',borderRadius:999,fontFamily:'inherit',cursor:'pointer',
              border:'1.5px solid '+(i===0?'var(--c-primary)':'rgba(0,0,0,.08)'),
              background:i===0?'var(--c-primary-soft)':'#fff',
              color:i===0?'var(--c-primary-deep)':'#5d4d3a',
              fontWeight:i===0?700:500,fontSize:13,
            }}>{n}</button>
          ))}
        </div>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        {PENDING_REQUESTS.map(r => <RequestRow key={r.id} req={r}/>)}
      </div>
    </div>
  );
}

// ---------- スケジュール ----------
function SitterSchedule() {
  const days = ['日','月','火','水','木','金','土'];
  const today = 3; // 0=Sun ... 6=Sat; 水曜日とする
  const weeks = [
    [null,null,null, 20, 21, 22, 23],
    [24, 25, 26, 27, 28, 29, 30],
    [31, '6/1', '6/2', '6/3', '6/4', '6/5', '6/6'],
  ];
  const bookedDays = new Set([20, 22, 24, 26, 27, 28, '6/1', '6/3']);
  const fullDays = new Set([21, 25, '6/2']);
  return (
    <div style={{maxWidth:1240,margin:'0 auto',display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:24}}>
      <div>
        <SmCard>
          <SCardHead label="今週・来週のカレンダー" right={<a style={{fontSize:12,color:'var(--c-primary-deep)'}}>← 5月 ・ 6月 →</a>}/>
          <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:4,fontSize:11,color:'#9c8a72',marginBottom:8}}>
            {days.map((d,i)=>(
              <div key={i} style={{textAlign:'center',padding:4,color: i===0?'#d87883':i===6?'#5d8db5':'#9c8a72'}}>{d}</div>
            ))}
          </div>
          {weeks.map((week,wi)=>(
            <div key={wi} style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:4,marginBottom:4}}>
              {week.map((d,di)=>{
                if (d == null) return <div key={di} style={{height:62}}/>;
                const isToday = d === today + 17;
                const isBooked = bookedDays.has(d);
                const isFull = fullDays.has(d);
                return (
                  <div key={di} style={{
                    height:62,borderRadius:10,padding:6,
                    background:isFull?'rgba(0,0,0,.04)':isBooked?'var(--c-primary-soft)':'#fff',
                    border:isToday?'2px solid var(--c-primary)':'1px solid rgba(0,0,0,.05)',
                    fontSize:12,color:isFull?'#9c8a72':'#3c2f1e',
                    display:'flex',flexDirection:'column',justifyContent:'space-between',
                  }}>
                    <span style={{fontWeight:isToday?700:500}}>{d}</span>
                    {isBooked && (
                      <span style={{
                        fontSize:9,padding:'1px 5px',borderRadius:4,
                        background:'var(--c-primary-deep)',color:'#fff',alignSelf:'flex-start',fontWeight:700,
                      }}>予定</span>
                    )}
                    {isFull && (
                      <span style={{fontSize:9,color:'#9c8a72'}}>満員</span>
                    )}
                  </div>
                );
              })}
            </div>
          ))}
          <div style={{display:'flex',gap:14,marginTop:14,fontSize:11,color:'#7a6a55'}}>
            <span><span style={{display:'inline-block',width:10,height:10,borderRadius:3,background:'var(--c-primary-soft)',marginRight:4,verticalAlign:'middle'}}/>予定あり</span>
            <span><span style={{display:'inline-block',width:10,height:10,borderRadius:3,background:'rgba(0,0,0,.04)',marginRight:4,verticalAlign:'middle'}}/>満員/休み</span>
            <span><span style={{display:'inline-block',width:10,height:10,borderRadius:3,background:'#fff',border:'1px solid rgba(0,0,0,.1)',marginRight:4,verticalAlign:'middle'}}/>受付可</span>
          </div>
        </SmCard>
      </div>

      <div>
        <SmCard>
          <SCardHead label="活動可能な曜日 / 時間"/>
          <div style={{fontSize:12,color:'#7a6a55',marginBottom:12}}>
            登録時の設定が反映されます。変更したい場合は「プロフィール編集」から。
          </div>
          <div style={{display:'flex',gap:6,marginBottom:14}}>
            {['月','火','水','木','金','土','日'].map((d,i)=>(
              <div key={i} style={{
                flex:1,padding:'14px 0',borderRadius:12,textAlign:'center',
                background: i<5 ? 'var(--c-primary-soft)' : '#fff',
                border:'1.5px solid ' + (i<5 ? 'var(--c-primary)' : 'rgba(0,0,0,.08)'),
                color: i<5 ? 'var(--c-primary-deep)' : '#9c8a72',
                fontWeight:i<5?700:500,fontSize:14,
              }}>{d}</div>
            ))}
          </div>
          <div style={{display:'flex',gap:8,marginBottom:8,alignItems:'center'}}>
            <Icons.Calendar size={14}/>
            <span style={{fontSize:13}}>受付時間：08:00 〜 20:00</span>
          </div>
          <div style={{display:'flex',gap:8,marginBottom:14,alignItems:'center'}}>
            <Icons.Pin size={14}/>
            <span style={{fontSize:13}}>対応エリア：港区南青山 ／ 半径5km</span>
          </div>
          <button style={{
            width:'100%',background:'#fff',color:'var(--c-primary-deep)',
            border:'1.5px solid var(--c-primary)',padding:'10px',borderRadius:10,
            fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:13,
          }}>休みを登録する</button>
        </SmCard>

        <SmCard style={{marginTop:18}}>
          <SCardHead label="本日"/>
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            {TODAY_VISITS.map(v=>(
              <div key={v.id} style={{padding:'10px 12px',background:'var(--c-bg)',borderRadius:10,fontSize:13}}>
                <div style={{fontWeight:700}}>{v.time}</div>
                <div style={{color:'#7a6a55',fontSize:12,marginTop:2}}>{v.owner} ・ {v.pet}</div>
              </div>
            ))}
          </div>
        </SmCard>
      </div>
    </div>
  );
}

// ---------- 顧客一覧 ----------
function SitterClients() {
  return (
    <div style={{maxWidth:1240,margin:'0 auto'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:18}}>
        <div>
          <h2 style={{fontSize:24,fontWeight:700,letterSpacing:'-.01em'}}>顧客一覧</h2>
          <div style={{fontSize:13,color:'#7a6a55',marginTop:4}}>
            {CLIENTS.length}名のご家族 ・ 累計訪問 {CLIENTS.reduce((s,c)=>s+c.visits,0)}件
          </div>
        </div>
        <div style={{display:'flex',gap:8}}>
          <input placeholder="ご家族名・ペット名で検索" style={{
            padding:'10px 14px',borderRadius:10,border:'1.5px solid rgba(0,0,0,.08)',
            background:'#fff',fontSize:13,fontFamily:'inherit',width:240,outline:'none',
          }}/>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:14}}>
        {CLIENTS.map((c,i)=>(
          <div key={i} style={{
            background:'#fff',borderRadius:18,padding:'18px 20px',
            border:'1px solid rgba(0,0,0,.04)',
          }}>
            <div style={{display:'flex',gap:14,alignItems:'center',marginBottom:12}}>
              <div style={{
                width:64,height:64,borderRadius:16,flex:'0 0 auto',
                background: window.palpetPetPhoto && window.palpetPetPhoto(c.species)
                  ? `url("${window.palpetPetPhoto(c.species)}") center/cover no-repeat`
                  : (window.photoBG ? window.photoBG(c.photo) : 'var(--c-bg)'),
              }}/>
              <div style={{flex:1}}>
                <div style={{display:'flex',gap:8,alignItems:'center'}}>
                  <strong style={{fontSize:16}}>{c.name}</strong>
                  <span style={{
                    fontSize:10,padding:'2px 7px',borderRadius:999,
                    background:c.visits>=10?'#E8F5E0':'var(--c-primary-soft)',
                    color:c.visits>=10?'#3a7a2a':'var(--c-primary-deep)',
                    fontWeight:700,
                  }}>{c.visits>=10?'リピーター':'継続顧客'}</span>
                </div>
                <div style={{fontSize:12,color:'#5d4d3a',marginTop:4}}>{c.pet}</div>
                <div style={{fontSize:11,color:'#7a6a55',marginTop:2,display:'flex',gap:8,alignItems:'center'}}>
                  <Icons.Pin size={11}/>{c.station} ・ 累計{c.visits}回 ・ 最終 {c.lastVisit}
                </div>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{color:'var(--c-primary-deep)',fontSize:11,fontWeight:700,display:'flex',gap:3,alignItems:'center',justifyContent:'flex-end'}}>
                  <Icons.Star size={11}/> {c.rating.toFixed(1)}
                </div>
                <div style={{fontSize:10,color:'#9c8a72',marginTop:2}}>頂いた評価</div>
              </div>
            </div>
            <div style={{display:'flex',gap:8}}>
              <button style={{
                flex:1,background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
                border:'none',padding:'9px',borderRadius:10,fontWeight:700,
                cursor:'pointer',fontFamily:'inherit',fontSize:12,
              }}>メッセージ</button>
              <button style={{
                flex:1,background:'#fff',color:'#5d4d3a',
                border:'1.5px solid rgba(0,0,0,.08)',padding:'9px',borderRadius:10,
                fontWeight:600,cursor:'pointer',fontFamily:'inherit',fontSize:12,
              }}>訪問履歴</button>
              <button style={{
                flex:1,background:'#fff',color:'#5d4d3a',
                border:'1.5px solid rgba(0,0,0,.08)',padding:'9px',borderRadius:10,
                fontWeight:600,cursor:'pointer',fontFamily:'inherit',fontSize:12,
              }}>ペットメモ</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- 報酬・支払い ----------
function SitterEarnings() {
  const ytd = PAYOUTS.reduce((s,p)=>s+p.net,0);
  return (
    <div style={{maxWidth:1240,margin:'0 auto',display:'grid',gridTemplateColumns:'2fr 1fr',gap:24}}>
      <div>
        <SmCard>
          <SCardHead label="月別の振込履歴"/>
          <div style={{
            display:'grid',gridTemplateColumns:'120px 1fr 1fr 1fr 1fr 120px',gap:0,
            fontSize:11,color:'#9c8a72',padding:'8px 14px',borderBottom:'1px solid rgba(0,0,0,.06)',fontWeight:700,
          }}>
            <span>月</span><span>訪問件数</span><span>売上</span><span>手数料(15%)</span><span>振込額</span><span>状態</span>
          </div>
          {PAYOUTS.map(p=>(
            <div key={p.month} style={{
              display:'grid',gridTemplateColumns:'120px 1fr 1fr 1fr 1fr 120px',gap:0,alignItems:'center',
              fontSize:14,padding:'14px',borderBottom:'1px solid rgba(0,0,0,.04)',
            }}>
              <span style={{fontWeight:700}}>{p.month}</span>
              <span>{p.visits}件</span>
              <span style={{color:'#7a6a55'}}>¥{p.gross.toLocaleString()}</span>
              <span style={{color:'#7a6a55'}}>−¥{p.fee.toLocaleString()}</span>
              <span style={{fontWeight:700}}>¥{p.net.toLocaleString()}</span>
              <span style={{
                fontSize:11,padding:'3px 9px',borderRadius:999,fontWeight:700,
                background: p.status==='振込済' ? '#E8F5E0' : 'var(--c-primary-soft)',
                color: p.status==='振込済' ? '#3a7a2a' : 'var(--c-primary-deep)',
                justifySelf:'flex-start',
              }}>{p.status}</span>
            </div>
          ))}
          <div style={{
            padding:'14px',display:'flex',justifyContent:'space-between',alignItems:'baseline',
            background:'var(--c-bg-alt)',borderRadius:'0 0 14px 14px',marginTop:4,
          }}>
            <span style={{fontSize:13,color:'#5d4d3a'}}>今期累計（手数料控除後）</span>
            <span style={{fontSize:24,fontWeight:700,letterSpacing:'-.01em'}}>¥{ytd.toLocaleString()}</span>
          </div>
        </SmCard>

        <SmCard style={{marginTop:18}}>
          <SCardHead label="次回振込予定" right={<a style={{fontSize:12,color:'var(--c-primary-deep)'}}>振込履歴をダウンロード</a>}/>
          <div style={{
            padding:'18px 20px',background:'var(--c-primary-soft)',borderRadius:14,
            display:'flex',justifyContent:'space-between',alignItems:'center',
          }}>
            <div>
              <div style={{fontSize:12,color:'var(--c-primary-deep)',fontWeight:700}}>2026-06-10（火）に振込予定</div>
              <div style={{fontSize:11,color:'#7a6a55',marginTop:4}}>5月分の確定額 ・ 三菱UFJ銀行 ●●●●1234</div>
            </div>
            <div style={{fontSize:22,fontWeight:700,color:'var(--c-primary-deep)'}}>¥71,910</div>
          </div>
        </SmCard>
      </div>

      <div>
        <SmCard>
          <SCardHead label="支払い設定"/>
          <div style={{display:'flex',flexDirection:'column',gap:10,fontSize:13}}>
            <Row k="振込先" v={<>三菱UFJ銀行<br/><span style={{fontSize:11,color:'#9c8a72'}}>銀座支店 普通 ●●●●1234</span></>}/>
            <Row k="振込サイクル" v="月末締・翌月10日振込"/>
            <Row k="手数料" v="売上の15%（保険・決済手数料込み）"/>
            <Row k="源泉徴収" v="個人事業主登録あり"/>
            <Row k="インボイス番号" v="T1234567890123"/>
          </div>
          <button style={{
            marginTop:14,width:'100%',background:'#fff',color:'#5d4d3a',
            border:'1.5px solid rgba(0,0,0,.1)',padding:'10px',borderRadius:10,
            fontWeight:600,cursor:'pointer',fontFamily:'inherit',fontSize:13,
          }}>振込先を変更</button>
        </SmCard>

        <SmCard style={{marginTop:18}}>
          <SCardHead label="ボーナス対象"/>
          <div style={{fontSize:12,color:'#5d4d3a',lineHeight:1.8,marginBottom:10}}>
            月間20件以上で <strong>手数料が13%</strong> に下がります。
          </div>
          <div style={{height:6,background:'rgba(0,0,0,.06)',borderRadius:999}}>
            <div style={{width:`${(14/20)*100}%`,height:'100%',background:'var(--c-accent)',borderRadius:999}}/>
          </div>
          <div style={{fontSize:11,color:'#9c8a72',marginTop:6,textAlign:'right'}}>あと6件で割引適用</div>
        </SmCard>
      </div>
    </div>
  );
}

// ---------- 共通パーツ ----------
function SmCard({ children, style }) {
  return (
    <div style={{
      background:'#fff',borderRadius:20,padding:'22px 24px',
      border:'1px solid rgba(0,0,0,.04)',...style,
    }}>{children}</div>
  );
}
function SCardHead({ label, right }) {
  return (
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
      <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,letterSpacing:'.06em'}}>{label}</div>
      <div>{right}</div>
    </div>
  );
}
function SStat({n,l,hint}) {
  return (
    <div style={{padding:'12px 14px',background:'var(--c-bg)',borderRadius:12}}>
      <div style={{fontSize:20,fontWeight:700,letterSpacing:'-.01em'}}>{n}</div>
      <div style={{fontSize:11,color:'#7a6a55',marginTop:2}}>{l}</div>
      {hint && <div style={{fontSize:10,color:'#9c8a72',marginTop:2}}>{hint}</div>}
    </div>
  );
}
function VisitRow({ visit }) {
  const v = visit;
  return (
    <div style={{
      padding:'14px 16px',borderRadius:14,
      background: v.status === 'next' ? 'var(--c-primary-soft)' : 'var(--c-bg)',
      border: v.status === 'next' ? '1.5px solid var(--c-primary)' : '1px solid rgba(0,0,0,.04)',
      display:'grid',gridTemplateColumns:'auto 1fr auto',gap:14,alignItems:'center',
    }}>
      <div style={{
        width:60,textAlign:'center',
        color: v.status === 'next' ? 'var(--c-primary-deep)' : '#3c2f1e',
      }}>
        <div style={{fontSize:11,fontWeight:700,fontFamily:'ui-monospace'}}>{v.time.split('–')[0]}</div>
        <div style={{fontSize:10,color:'#9c8a72',marginTop:2,fontFamily:'ui-monospace'}}>{v.time.split('–')[1]}</div>
      </div>
      <div>
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          {v.status === 'next' && (
            <span style={{fontSize:10,padding:'2px 8px',borderRadius:999,background:'var(--c-primary-deep)',color:'#fff',fontWeight:700}}>次の訪問</span>
          )}
          <strong style={{fontSize:15}}>{v.owner}</strong>
          <span style={{fontSize:12,color:'#7a6a55'}}>・ {v.pet}</span>
        </div>
        <div style={{fontSize:12,color:'#5d4d3a',marginTop:4}}>{v.service}</div>
        <div style={{fontSize:11,color:'#7a6a55',marginTop:4,display:'flex',gap:8,alignItems:'center'}}>
          <Icons.Pin size={10}/>{v.address} ・ {v.distance}
        </div>
      </div>
      <div style={{display:'flex',gap:6}}>
        {v.status === 'next' ? (
          <button style={{
            background:'var(--c-primary-deep)',color:'#fff',border:'none',
            padding:'9px 14px',borderRadius:10,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:12,
          }}>出発する</button>
        ) : (
          <button style={{
            background:'#fff',color:'#5d4d3a',border:'1.5px solid rgba(0,0,0,.08)',
            padding:'9px 12px',borderRadius:10,fontWeight:600,cursor:'pointer',fontFamily:'inherit',fontSize:12,
          }}>詳細</button>
        )}
      </div>
    </div>
  );
}
function RequestRow({ req, compact }) {
  const r = req;
  const urgent = r.deadlineHours <= 24;
  return (
    <div style={{
      padding:'16px 18px',borderRadius:14,background:'#fff',
      border:'1.5px solid '+(urgent?'var(--c-primary)':'rgba(0,0,0,.06)'),
      display:'grid',gridTemplateColumns: compact ? '1fr auto' : '1fr auto auto',gap:14,
    }}>
      <div>
        <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:4,flexWrap:'wrap'}}>
          <span style={{
            fontSize:11,padding:'2px 9px',borderRadius:999,fontWeight:700,
            background: urgent ? 'var(--c-primary-deep)' : 'rgba(0,0,0,.06)',
            color: urgent ? '#fff' : '#7a6a55',
          }}>{urgent ? `あと${r.deadlineHours}時間` : `${Math.floor(r.deadlineHours/24)}日以内`}</span>
          <span style={{fontSize:11,color:'#9c8a72',fontFamily:'ui-monospace'}}>{r.id}</span>
          <span style={{fontSize:11,color:'#7a6a55',display:'inline-flex',gap:3,alignItems:'center'}}>
            <Icons.Pin size={10}/>{r.station}駅
          </span>
        </div>
        <div style={{fontSize:15,fontWeight:700,marginTop:2}}>
          {r.owner} ・ <span style={{fontWeight:500,color:'#5d4d3a'}}>{r.pet}</span>
        </div>
        <div style={{fontSize:13,color:'#5d4d3a',marginTop:6}}>
          <Icons.Calendar size={12}/> {r.when} ・ {r.service}
        </div>
        {!compact && (
          <div style={{
            marginTop:10,padding:'10px 14px',background:'var(--c-bg)',borderRadius:10,
            fontSize:12,color:'#5d4d3a',lineHeight:1.7,
          }}>“{r.note}”</div>
        )}
      </div>
      {!compact && (
        <div style={{textAlign:'right',alignSelf:'flex-start'}}>
          <div style={{fontSize:11,color:'#9c8a72'}}>想定報酬</div>
          <div style={{fontSize:18,fontWeight:700,marginTop:2}}>¥{r.total.toLocaleString()}</div>
          <div style={{fontSize:10,color:'#9c8a72'}}>手数料込み</div>
        </div>
      )}
      <div style={{display:'flex',flexDirection:'column',gap:6,alignSelf:'flex-start'}}>
        <button style={{
          background:'var(--c-primary-deep)',color:'#fff',border:'none',
          padding:'10px 18px',borderRadius:10,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:13,
          whiteSpace:'nowrap',
        }}>承諾する</button>
        <button style={{
          background:'#fff',color:'#7a6a55',border:'1.5px solid rgba(0,0,0,.1)',
          padding:'8px 18px',borderRadius:10,fontWeight:600,cursor:'pointer',fontFamily:'inherit',fontSize:12,
        }}>{compact ? '詳細' : '辞退'}</button>
      </div>
    </div>
  );
}
function Notice({ icon, title, body }) {
  return (
    <div style={{
      padding:'10px 12px',borderRadius:10,background:'var(--c-bg)',
      display:'flex',gap:10,alignItems:'flex-start',
    }}>
      <span style={{fontSize:16}}>{icon}</span>
      <div style={{flex:1}}>
        <div style={{fontWeight:700,fontSize:13}}>{title}</div>
        <div style={{fontSize:11,color:'#7a6a55',marginTop:2,lineHeight:1.6}}>{body}</div>
      </div>
    </div>
  );
}
function Toggle({ label, on }) {
  return (
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 0',fontSize:13}}>
      <span>{label}</span>
      <span style={{
        width:36,height:20,borderRadius:999,padding:2,
        background:on?'var(--c-primary)':'rgba(0,0,0,.12)',
        display:'flex',alignItems:'center',
      }}>
        <span style={{
          width:16,height:16,borderRadius:'50%',background:'#fff',
          transform:on?'translateX(14px)':'translateX(0)',transition:'.2s',
        }}/>
      </span>
    </div>
  );
}
function Row({ k, v }) {
  return (
    <div style={{display:'flex',justifyContent:'space-between',gap:10,padding:'6px 0',borderBottom:'1px solid rgba(0,0,0,.04)',fontSize:13}}>
      <span style={{color:'#9c8a72'}}>{k}</span>
      <span style={{textAlign:'right',lineHeight:1.6}}>{v}</span>
    </div>
  );
}

window.SitterMypage = SitterMypage;