// Booking Confirmation — review trip, price breakdown, payment, confirm.
// Interactive: date/duration adjust, add-ons toggle, payment method, total recalcs.

const Field = window.RegField;
const inputCss = window.regInputCss;
const photoBG = window.photoBG;
const Badge = window.SitterBadge;

function BookingConfirm() {
  // プラン（ds.js の PALPET_PRICING.plans のキー）
  const [planKey, setPlanKey] = React.useState('standard');
  // 日付モード — 'single'：複数希望日（旧来）、'range'：期間（旅行など）
  const [dateMode, setDateMode] = React.useState('single');
  // 1日あたりの訪問パターン
  // 'single' = 1日1回 / 'twice' = 1日2回（朝晩） / 'custom' = 自由（各日でカスタマイズ可）
  const [pattern, setPattern] = React.useState('single');
  // 単日モードのスロット
  const [slots, setSlots] = React.useState([
    { id:1, date:'5/24', weekday:'土',
      visits:[{ startTime:'10:00', duration:60, label:'' }] },
    { id:2, date:'5/26', weekday:'月',
      visits:[{ startTime:'14:00', duration:60, label:'' }] },
  ]);
  // 期間モード — 旅行などで「○月△日〜○月□日」の毎日訪問
  const [range, setRange] = React.useState({
    start:'5/24', startWeekday:'土',
    end:'5/30',   endWeekday:'金',
    // 1日の訪問テンプレート — pattern に応じて自動セット
    visits:[{ startTime:'10:00', duration:60, label:'' }],
  });
  const [uniformTime, setUniformTime] = React.useState(false);
  const [addons, setAddons] = React.useState(['photo-report']);
  const [payment, setPayment] = React.useState('card-1234');
  const [note, setNote] = React.useState('モカは初対面の方を怖がるので、最初の5分はしゃがんでゆっくり話しかけていただけると嬉しいです。');
  const [agree, setAgree] = React.useState(true);

  const sitter = {
    id: 1, name:'みかこ', age:29, rating:4.98, reviews:312,
    area:'港区南青山', verified:true, photo:'peach', distance: 1.2,
  };

  // 統一料金（ds.js の PALPET_PRICING を参照）
  const pricing = (typeof window !== 'undefined' && window.PALPET_PRICING) || { plans:{}, options:{}, insurance:110, transit:{default:500} };
  const calcVisitFee = window.palpetCalcVisitFee || (() => 5300);
  const calcTransit = window.palpetCalcTransitFee || (() => 500);

  // 期間モードの日数を算出（同月内の単純差分）
  const calcDaysInRange = () => {
    const [sm, sd] = range.start.split('/').map(Number);
    const [em, ed] = range.end.split('/').map(Number);
    // 単純化：同月想定で日数を差分（月またぎは別途処理）
    if (sm === em) return Math.max(1, ed - sd + 1);
    // 月またぎ簡易：5月→6月の差分（5月は31日と仮定）
    const daysInPrevMonth = 31;
    return Math.max(1, (daysInPrevMonth - sd + 1) + ed);
  };
  const rangeDays = dateMode === 'range' ? calcDaysInRange() : 1;

  // 概算 — 第1希望の1日のすべての訪問料金を合算
  const primary = dateMode === 'range' ? range : (slots[0] || { visits:[{duration:60}] });
  const primaryDayDuration = primary.visits.reduce((s,v)=>s+v.duration, 0);
  const visitsPerDay = primary.visits.length;
  // 各訪問ごとに料金計算（合算）
  const baseOneDay = primary.visits.reduce((sum, v) => sum + calcVisitFee(v.duration, planKey), 0);
  const base = baseOneDay * rangeDays;
  const addonsCost = addons.reduce((s,a)=>{
    const o = (pricing.options || {})[a];
    return s + (o ? o.price : 0) * visitsPerDay * rangeDays;
  }, 0);
  const insurance = (pricing.insurance || 110) * visitsPerDay * rangeDays;
  // 交通費 — 訪問回数 × 距離ベースの目安
  const transitPerVisit = calcTransit(sitter.distance);
  const transit = transitPerVisit * visitsPerDay * rangeDays;
  const total = base + addonsCost + insurance + transit;

  const candidateDates = [
    ['5/24','土'],['5/25','日'],['5/26','月'],['5/27','火'],
    ['5/28','水'],['5/29','木'],['5/30','金'],['5/31','土'],
  ];

  // パターン切替：既存の slots および range.visits を新しいパターンに合わせて変換
  const setPatternAndReshape = (next) => {
    setPattern(next);
    const newVisits =
      next === 'twice' ? [
        { startTime:'08:00', duration:60, label:'朝' },
        { startTime:'19:00', duration:60, label:'夜' },
      ] :
      next === 'single' ? [
        { startTime:'10:00', duration:60, label:'' },
      ] :
      // custom: 既存を維持、なければデフォルト
      (range.visits.length > 0 ? range.visits : [{ startTime:'10:00', duration:60, label:'' }]);

    setSlots(slots.map(s => ({ ...s, visits: newVisits.map(v=>({...v})) })));
    setRange(r => ({ ...r, visits: newVisits.map(v=>({...v})) }));
  };

  // 期間モード — visit を更新
  const updateRangeVisit = (visitIdx, patch) => {
    setRange(r => ({ ...r, visits: r.visits.map((v,i) => i === visitIdx ? { ...v, ...patch } : v) }));
  };
  const addRangeVisit = () => {
    if (range.visits.length >= 3) return;
    const last = range.visits[range.visits.length - 1];
    const [lh, lm] = (last?.startTime || '10:00').split(':').map(Number);
    const newH = Math.min(23, lh + Math.max(2, Math.floor((last?.duration || 60) / 60) + 1));
    const startTime = `${String(newH).padStart(2,'0')}:${String(lm).padStart(2,'0')}`;
    setRange(r => ({ ...r, visits: [...r.visits, { startTime, duration:60, label:'' }] }));
  };
  const removeRangeVisit = (visitIdx) => {
    if (range.visits.length <= 1) return;
    setRange(r => ({ ...r, visits: r.visits.filter((_,i) => i !== visitIdx) }));
  };

  const addSlot = () => {
    if (slots.length >= 3) return;
    const used = new Set(slots.map(s => s.date));
    const next = candidateDates.find(([d]) => !used.has(d)) || candidateDates[0];
    const newVisits = pattern === 'twice'
      ? [{ startTime:'08:00', duration:60, label:'朝' }, { startTime:'19:00', duration:60, label:'夜' }]
      : [{ startTime: uniformTime ? primary.visits[0].startTime : '10:00',
           duration: uniformTime ? primary.visits[0].duration : 120, label:'' }];
    setSlots([...slots, { id: Date.now(), date: next[0], weekday: next[1], visits: newVisits }]);
  };
  const removeSlot = (id) => {
    if (slots.length <= 1) return;
    setSlots(slots.filter(s => s.id !== id));
  };
  const updateSlot = (id, patch) => {
    setSlots(slots.map(s => s.id === id ? { ...s, ...patch } : s));
  };
  const updateVisit = (slotId, visitIdx, patch) => {
    setSlots(slots.map(s => {
      if (s.id !== slotId) return s;
      const visits = s.visits.map((v,i) => i === visitIdx ? { ...v, ...patch } : v);
      return { ...s, visits };
    }));
  };
  const addVisitToSlot = (slotId) => {
    setSlots(slots.map(s => {
      if (s.id !== slotId) return s;
      if (s.visits.length >= 3) return s;
      // 既存の最終時刻の数時間後を初期値に
      const last = s.visits[s.visits.length - 1];
      const [lh,lm] = (last?.startTime || '10:00').split(':').map(Number);
      const newH = Math.min(23, lh + Math.max(2, Math.floor((last?.duration || 60) / 60) + 1));
      const startTime = `${String(newH).padStart(2,'0')}:${String(lm).padStart(2,'0')}`;
      return { ...s, visits: [...s.visits, { startTime, duration: 60, label:'' }] };
    }));
  };
  const removeVisitFromSlot = (slotId, visitIdx) => {
    setSlots(slots.map(s => {
      if (s.id !== slotId) return s;
      if (s.visits.length <= 1) return s;
      return { ...s, visits: s.visits.filter((_,i) => i !== visitIdx) };
    }));
  };
  const setDate = (id, date, weekday) => updateSlot(id, { date, weekday });

  return (
    <div data-page="booking" style={{
      width:'100%',minHeight:'100%',background:'var(--c-bg)',
      color:'#2E2418',fontFamily:'var(--font-jp)',
    }}>
      <header style={{
        display:'flex',alignItems:'center',gap:16,
        padding:'18px 32px',background:'#fff',borderBottom:'1px solid rgba(0,0,0,.04)',
      }}>
        <button style={{background:'transparent',border:'none',padding:0,cursor:'pointer',display:'flex',alignItems:'center',gap:6,color:'#5d4d3a',fontFamily:'inherit',fontSize:14}}>
          <Icons.ChevL size={18}/> 戻る
        </button>
        <img src="assets/logo-horizontal.png" alt="palpet" style={{height:40,marginLeft:'auto'}}/>
      </header>

      <div style={{display:'grid',gridTemplateColumns:'1fr 420px',gap:32,padding:'40px 56px'}}>
        {/* Main */}
        <main>
          <div style={{fontSize:13,color:'#9c8a72',fontWeight:600,marginBottom:6}}>ご予約内容の確認</div>
          <h1 style={{fontSize:32,fontWeight:700,letterSpacing:'-.01em',marginBottom:6}}>
            みかこさんに依頼を送ります
          </h1>
          <p style={{fontSize:14,color:'#7a6a55',marginBottom:32,lineHeight:1.7}}>
            送信するとシッターに通知が届きます。24時間以内に返事がない場合は自動的にキャンセルになります。
          </p>

          {/* Sitter snippet */}
          <Block title="シッター">
            <div style={{display:'flex',gap:16,alignItems:'center'}}>
              <div style={{
                width:64,height:64,borderRadius:16,flex:'0 0 auto',
                background:photoBG(sitter.id),
              }}/>
              <div style={{flex:1}}>
                <div style={{display:'flex',alignItems:'center',gap:6}}>
                  <strong style={{fontSize:16}}>{sitter.name}</strong>
                  <span style={{fontSize:11,color:'#7a6a55'}}>{sitter.age}歳</span>
                  <Badge>✓ 本人確認</Badge>
                </div>
                <div style={{fontSize:12,color:'#7a6a55',marginTop:4}}>
                  <Icons.Pin size={11}/> {sitter.area} ・ <Icons.Star size={11}/> {sitter.rating} ({sitter.reviews})
                </div>
              </div>
              <a style={{color:'var(--c-primary-deep)',fontSize:13,fontWeight:600}}>変更</a>
            </div>
          </Block>

          {/* プラン選択 */}
          <Block title="プラン">
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
              {[
                ['standard','基本ペットシッター','30分〜2時間の訪問ケア', pricing.plans.standard],
                ['long','ロングシッター','旅行・出張の長時間お留守番', pricing.plans.long],
                ['midnight','深夜シッティング','22:00〜翌6:00の深夜帯', pricing.plans.midnight],
                ['subscription','定額利用','毎週・毎月の定期訪問', pricing.plans.subscription],
              ].map(([k,n,d,plan])=>{
                const sel = planKey === k;
                const minPrice = plan?.tiers?.[0]?.price;
                return (
                  <button key={k} onClick={()=>setPlanKey(k)} style={{
                    padding:'14px 16px',borderRadius:14,fontFamily:'inherit',cursor:'pointer',textAlign:'left',
                    border:'1.5px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
                    background:sel?'var(--c-primary-soft)':'#fff',
                  }}>
                    <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:6}}>
                      <span style={{
                        width:16,height:16,borderRadius:'50%',flex:'0 0 auto',
                        background:sel?'var(--c-primary-deep)':'transparent',
                        border:'2px solid '+(sel?'var(--c-primary-deep)':'rgba(0,0,0,.18)'),
                      }}/>
                      <strong style={{fontSize:14,color:sel?'var(--c-primary-deep)':'#3c2f1e'}}>{n}</strong>
                      {minPrice && (
                        <span style={{
                          marginLeft:'auto',fontSize:11,color:'#7a6a55',
                        }}>¥{minPrice.toLocaleString()}〜</span>
                      )}
                    </div>
                    <div style={{fontSize:11,color:'#7a6a55',marginLeft:24,lineHeight:1.5}}>{d}</div>
                  </button>
                );
              })}
            </div>
          </Block>

          {/* Date & duration — multi-slot or range */}
          <Block title="希望日時">
            <div style={{
              marginBottom:14,padding:'12px 14px',borderRadius:12,
              background:'var(--c-bg)',fontSize:12,color:'#5d4d3a',lineHeight:1.7,
              display:'flex',gap:10,alignItems:'flex-start',
            }}>
              <Icons.Sparkle size={16}/>
              <div>
                単日（候補日を複数）または期間（旅行・出張の連続日）を選べます。
                <strong>1日に複数回お世話が必要な場合は「朝晩2回」「カスタム」</strong>もお選びいただけます。
              </div>
            </div>

            {/* 単日 / 期間 モード切替 */}
            <div style={{
              display:'grid',gridTemplateColumns:'1fr 1fr',gap:6,
              padding:4,marginBottom:14,background:'var(--c-bg-alt)',borderRadius:12,
            }}>
              {[
                ['single','📅 単日（候補を複数）','日付を最大3つ送信、シッターが1つ選択'],
                ['range','✈️ 期間（旅行モード）','○月△日〜○月□日の連続日'],
              ].map(([k,n,d])=>{
                const sel = dateMode === k;
                return (
                  <button key={k} onClick={()=>setDateMode(k)} style={{
                    padding:'10px 12px',borderRadius:10,border:'none',fontFamily:'inherit',
                    cursor:'pointer',textAlign:'left',
                    background: sel ? '#fff' : 'transparent',
                    color: sel ? 'var(--c-primary-deep)' : '#7a6a55',
                    boxShadow: sel ? '0 1px 3px rgba(0,0,0,.06)' : 'none',
                  }}>
                    <div style={{fontSize:13,fontWeight:sel?700:600}}>{n}</div>
                    <div style={{fontSize:10,color:'#9c8a72',marginTop:2,lineHeight:1.5}}>{d}</div>
                  </button>
                );
              })}
            </div>

            {/* 訪問パターン */}
            <div style={{marginBottom:14}}>
              <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,letterSpacing:'.04em',marginBottom:8}}>訪問パターン</div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8}}>
                {[
                  ['single','1日1回','犬の散歩・短時間ケアに'],
                  ['twice','1日2回（朝晩）','猫の餌やり・朝晩のお薬に最適'],
                  ['custom','カスタム','日ごとに自由に組み合わせ'],
                ].map(([k,n,d])=>{
                  const sel = pattern === k;
                  return (
                    <button key={k} onClick={()=>setPatternAndReshape(k)} style={{
                      padding:'12px 14px',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',
                      textAlign:'left',
                    }}>
                      <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:4}}>
                        <span style={{
                          width:16,height:16,borderRadius:'50%',flex:'0 0 auto',
                          background:sel?'var(--c-primary-deep)':'transparent',
                          border:'2px solid '+(sel?'var(--c-primary-deep)':'rgba(0,0,0,.18)'),
                        }}/>
                        <strong style={{fontSize:14}}>{n}</strong>
                      </div>
                      <div style={{fontSize:11,color:'#7a6a55',marginLeft:24,lineHeight:1.5}}>{d}</div>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* 共通時間モード切替 — custom 以外で有効 */}
            {pattern !== 'custom' && (
              <label style={{
                display:'flex',gap:10,alignItems:'center',cursor:'pointer',
                padding:'10px 14px',borderRadius:12,background:'#fff',
                border:'1px solid rgba(0,0,0,.06)',marginBottom:14,fontSize:13,
              }} onClick={()=>{
                const next = !uniformTime;
                setUniformTime(next);
                if (next) {
                  // 全スロットを第1希望の visits に揃える
                  setSlots(slots.map(s => ({ ...s, visits: primary.visits.map(v=>({...v})) })));
                }
              }}>
                <span style={{
                  width:18,height:18,borderRadius:6,flex:'0 0 auto',
                  background:uniformTime?'var(--c-primary-deep)':'transparent',
                  border:'2px solid '+(uniformTime?'var(--c-primary-deep)':'rgba(0,0,0,.15)'),
                  display:'grid',placeItems:'center',color:'#fff',
                }}>{uniformTime && <Icons.Check size={11} stroke={3}/>}</span>
                <span style={{flex:1}}>すべての希望日で同じ時間を使う（日ごとに変えたい場合はオフ）</span>
              </label>
            )}

            {/* 単日モード：希望スロット一覧 */}
            {dateMode === 'single' && (
              <>
                <div style={{display:'flex',flexDirection:'column',gap:12,marginBottom:14}}>
                  {slots.map((slot, idx) => (
                    <SlotRow key={slot.id}
                             slot={slot} idx={idx}
                             pattern={pattern}
                             candidateDates={candidateDates}
                             usedDates={new Set(slots.filter(s=>s.id!==slot.id).map(s=>s.date))}
                             uniformTime={uniformTime}
                             primary={primary}
                             canRemove={slots.length > 1}
                             onSetDate={(d,w)=>setDate(slot.id, d, w)}
                             onVisitChange={(visitIdx, patch)=>{
                               updateVisit(slot.id, visitIdx, patch);
                               if (uniformTime && idx === 0) {
                                 setSlots(prev => prev.map(s => ({
                                   ...s,
                                   visits: s.visits.map((v,i) => i === visitIdx ? { ...v, ...patch } : v),
                                 })));
                               }
                             }}
                             onAddVisit={()=>addVisitToSlot(slot.id)}
                             onRemoveVisit={(vi)=>removeVisitFromSlot(slot.id, vi)}
                             onRemove={()=>removeSlot(slot.id)}/>
                  ))}
                </div>

                {slots.length < 3 ? (
                  <button onClick={addSlot} style={{
                    width:'100%',padding:'14px',borderRadius:14,
                    background:'#fff',border:'1.5px dashed rgba(0,0,0,.18)',
                    cursor:'pointer',fontFamily:'inherit',fontSize:14,fontWeight:600,
                    color:'var(--c-primary-deep)',
                    display:'inline-flex',gap:6,alignItems:'center',justifyContent:'center',
                  }}>＋ 希望日を追加（あと{3 - slots.length}日）</button>
                ) : (
                  <div style={{
                    padding:'12px',borderRadius:12,background:'var(--c-bg-alt)',
                    fontSize:12,color:'#7a6a55',textAlign:'center',
                  }}>希望日は最大3日まで追加できます</div>
                )}
              </>
            )}

            {/* 期間モード：開始日〜終了日 + 1日のテンプレート */}
            {dateMode === 'range' && (
              <RangePicker
                range={range}
                pattern={pattern}
                candidateDates={candidateDates}
                days={rangeDays}
                onSetStart={(d,w)=>setRange(r=>({...r,start:d,startWeekday:w}))}
                onSetEnd={(d,w)=>setRange(r=>({...r,end:d,endWeekday:w}))}
                onVisitChange={updateRangeVisit}
                onAddVisit={addRangeVisit}
                onRemoveVisit={removeRangeVisit}
              />
            )}
          </Block>

          {/* Pet */}
          <Block title="お世話するペット">
            <div style={{
              padding:14,background:'var(--c-bg)',borderRadius:16,
              display:'flex',gap:12,alignItems:'center',
            }}>
              <div style={{
                width:56,height:56,borderRadius:14,flex:'0 0 auto',
                background:'repeating-linear-gradient(135deg,#F8CFB8 0 12px,#EBA689 12px 24px)',
              }}/>
              <div style={{flex:1}}>
                <div style={{display:'flex',alignItems:'center',gap:6}}>
                  <strong>モカ</strong>
                  <span style={{fontSize:11,color:'#7a6a55'}}>柴犬・3歳・♀</span>
                </div>
                <div style={{fontSize:12,color:'#7a6a55',marginTop:4}}>人見知り・食いしん坊 ・ 小麦アレルギー</div>
              </div>
              <a style={{color:'var(--c-primary-deep)',fontSize:13,fontWeight:600}}>プロフィール</a>
            </div>
          </Block>

          {/* Service */}
          <Block title="サービス内容">
            <div style={{
              padding:'14px 18px',borderRadius:14,background:'var(--c-primary-soft)',
              color:'var(--c-primary-deep)',fontSize:14,fontWeight:600,
              display:'flex',gap:10,alignItems:'center',
            }}>
              <Icons.Pin size={16}/> 訪問ケア ・ 港区南青山X-X-X
            </div>

            <div style={{marginTop:14,fontSize:13,fontWeight:600,marginBottom:8,color:'#3c2f1e'}}>追加のお願い <span style={{fontSize:11,fontWeight:500,color:'#9c8a72',marginLeft:6}}>※ 1回の訪問ごとの金額</span></div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {[
                ['photo-report','活動レポート（写真5枚以上）'],
                ['gps','散歩のGPSログ'],
                ['meal-prep','手作りごはんの準備'],
                ['video-call','ビデオ通話で様子報告'],
              ].map(([k,n])=>{
                const opt = (pricing.options || {})[k] || { price: 0 };
                const price = opt.price;
                const sel = addons.includes(k);
                return (
                  <button key={k} onClick={()=>setAddons(a=>a.includes(k)?a.filter(x=>x!==k):[...a,k])} style={{
                    padding:'14px 18px',borderRadius:14,fontFamily:'inherit',textAlign:'left',cursor:'pointer',
                    border:'1.5px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
                    background:sel?'var(--c-primary-soft)':'#fff',
                    display:'flex',gap:12,alignItems:'center',
                  }}>
                    <span style={{
                      width:18,height:18,borderRadius:6,flex:'0 0 auto',
                      border:'2px solid '+(sel?'var(--c-primary-deep)':'rgba(0,0,0,.15)'),
                      background:sel?'var(--c-primary-deep)':'transparent',
                      color:'#fff',display:'grid',placeItems:'center',
                    }}>{sel && <Icons.Check size={11} stroke={3}/>}</span>
                    <span style={{flex:1,fontWeight:600,fontSize:14,color:'#3c2f1e'}}>{n}</span>
                    <span style={{color:price===0?'#9c8a72':'var(--c-primary-deep)',fontWeight:700,fontSize:13}}>
                      {price===0?'追加料金なし':`+ ¥${price.toLocaleString()}`}
                    </span>
                  </button>
                );
              })}
            </div>
          </Block>

          {/* Note */}
          <Block title="シッターへのメッセージ">
            <textarea value={note} onChange={e=>setNote(e.target.value)}
                      style={{...inputCss,minHeight:120,resize:'vertical',lineHeight:1.8}}
                      placeholder="お留守番中に気をつけて欲しいことなどあれば..."/>
            <div style={{fontSize:11,color:'#9c8a72',marginTop:6}}>{note.length} / 500文字</div>
          </Block>

          {/* Payment */}
          <Block title="お支払い方法（事前精算）">
            <div style={{
              marginBottom:12,padding:'12px 14px',borderRadius:12,
              background:'color-mix(in oklab, var(--c-accent) 14%, #fff)',
              border:'1px solid color-mix(in oklab, var(--c-accent) 35%, #fff)',
              display:'flex',gap:10,alignItems:'flex-start',
            }}>
              <Icons.Shield size={16}/>
              <div style={{fontSize:12,color:'#5d4d3a',lineHeight:1.7}}>
                <strong>予約確定時に事前精算します。</strong> ご訪問前日まではキャンセル無料・全額返金、当日キャンセルは50%、無断キャンセルのみ全額の対象です。お支払い完了までシッターには金額情報は共有されません。
              </div>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {[
                ['card-1234','クレジットカード','VISA ・ **** 1234','/'],
                ['card-add','+ カードを追加',null,'+'],
                ['paypay','PayPay','残高 ¥12,400','P'],
                ['konbini','コンビニ払い','3日以内にお支払い','C'],
              ].map(([k,n,d,gl])=>{
                const sel = payment === k;
                return (
                  <button key={k} onClick={()=>setPayment(k)} style={{
                    padding:'14px 18px',borderRadius:14,fontFamily:'inherit',textAlign:'left',cursor:'pointer',
                    border:'1.5px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
                    background:sel?'var(--c-primary-soft)':'#fff',
                    display:'flex',gap:14,alignItems:'center',
                  }}>
                    <span style={{
                      width:18,height:18,borderRadius:'50%',flex:'0 0 auto',
                      border:'2px solid '+(sel?'var(--c-primary-deep)':'rgba(0,0,0,.15)'),
                      background:sel?'var(--c-primary-deep)':'transparent',
                    }}/>
                    <div style={{flex:1}}>
                      <strong style={{fontSize:14}}>{n}</strong>
                      {d && <div style={{fontSize:12,color:'#7a6a55',marginTop:2}}>{d}</div>}
                    </div>
                    <span style={{
                      fontFamily:'ui-monospace',fontSize:14,color:'#9c8a72',fontWeight:700,
                      width:34,height:34,background:'#fff',borderRadius:8,border:'1px solid rgba(0,0,0,.06)',
                      display:'grid',placeItems:'center',
                    }}>{gl}</span>
                  </button>
                );
              })}
            </div>
          </Block>
        </main>

        {/* Sidebar summary */}
        <aside style={{position:'sticky',top:80,alignSelf:'flex-start'}}>
          <div style={{
            background:'#fff',borderRadius:24,padding:28,
            border:'1.5px solid rgba(0,0,0,.06)',
          }}>
            {/* 希望日時サマリー */}
            <div style={{marginBottom:18}}>
              <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,letterSpacing:'.04em',marginBottom:8}}>送信する希望日時</div>

              {dateMode === 'range' ? (
                <div style={{padding:'10px 12px',borderRadius:10,background:'var(--c-primary-soft)'}}>
                  <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:6}}>
                    <span style={{
                      fontSize:9,padding:'1px 6px',borderRadius:999,fontWeight:700,
                      background:'var(--c-primary-deep)',color:'#fff',whiteSpace:'nowrap',
                    }}>✈️ 期間</span>
                    <strong style={{fontSize:13,color:'#3c2f1e'}}>
                      {range.start}（{range.startWeekday}）〜 {range.end}（{range.endWeekday}）
                    </strong>
                    <span style={{fontSize:10,color:'var(--c-primary-deep)',fontWeight:700,marginLeft:'auto'}}>
                      {rangeDays}日間
                    </span>
                  </div>
                  {range.visits.map((v,vi)=>(
                    <div key={vi} style={{fontSize:11,color:'#5d4d3a',lineHeight:1.6,paddingLeft: range.visits.length>1?14:0}}>
                      {v.label && <span style={{marginRight:6}}>{v.label === '朝' ? '🌅' : v.label === '夜' ? '🌙' : '・'}{v.label}</span>}
                      {v.startTime}〜 / {Math.floor(v.duration/60)}h{v.duration%60?(v.duration%60)+'m':''}
                      <span style={{color:'#9c8a72',marginLeft:6}}>× {rangeDays}日</span>
                    </div>
                  ))}
                </div>
              ) : (
                <div style={{display:'flex',flexDirection:'column',gap:6}}>
                  {slots.map((s, i) => (
                    <div key={s.id} style={{
                      padding:'8px 10px',borderRadius:10,
                      background: i===0 ? 'var(--c-primary-soft)' : 'var(--c-bg)',
                    }}>
                      <div style={{display:'flex',gap:8,alignItems:'center',marginBottom: s.visits.length > 1 ? 4 : 0}}>
                        <span style={{
                          fontSize:9,padding:'1px 6px',borderRadius:999,fontWeight:700,
                          background: i===0 ? 'var(--c-primary-deep)' : 'rgba(0,0,0,.1)',
                          color: i===0 ? '#fff' : '#5d4d3a',whiteSpace:'nowrap',
                        }}>第{i+1}希望</span>
                        <strong style={{fontSize:13,color:'#3c2f1e'}}>{s.date}({s.weekday})</strong>
                        {s.visits.length > 1 && (
                          <span style={{fontSize:10,color:'var(--c-primary-deep)',fontWeight:700,marginLeft:'auto'}}>
                            1日{s.visits.length}回
                          </span>
                        )}
                      </div>
                      {s.visits.map((v, vi) => (
                        <div key={vi} style={{
                          fontSize:11,color:'#5d4d3a',lineHeight:1.6,
                          paddingLeft: s.visits.length > 1 ? 14 : 0,
                        }}>
                          {v.label && <span style={{marginRight:6}}>{v.label === '朝' ? '🌅' : v.label === '夜' ? '🌙' : '・'}{v.label}</span>}
                          {v.startTime}〜 / {Math.floor(v.duration/60)}h{v.duration%60?(v.duration%60)+'m':''}
                        </div>
                      ))}
                    </div>
                  ))}
                </div>
              )}
              <div style={{fontSize:11,color:'#7a6a55',marginTop:6,lineHeight:1.6}}>
                {dateMode === 'range'
                  ? '期間中の毎日、同じ時間に訪問します。'
                  : 'シッターはこの中から1日を選んで返信します。'}
              </div>
            </div>

            <h3 style={{fontSize:18,fontWeight:700,marginBottom:4}}>料金（概算）</h3>
            <div style={{fontSize:11,color:'#9c8a72',marginBottom:14}}>
              {pricing.plans?.[planKey]?.name} / {visitsPerDay}回×{rangeDays}日 = 計 {visitsPerDay * rangeDays}回訪問
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:10,fontSize:14,paddingBottom:14,borderBottom:'1px solid rgba(0,0,0,.06)'}}>
              <Row k={`基本料金 ・ 1日 ${Math.floor(primaryDayDuration/60)}時間${primaryDayDuration%60?(primaryDayDuration%60)+'分':''}${rangeDays>1?` × ${rangeDays}日`:''}`} v={`¥${base.toLocaleString()}`}/>
              {addons.map(a => {
                const opt = (pricing.options || {})[a] || { name:a, price:0 };
                const count = visitsPerDay * rangeDays;
                return (
                  <Row key={a} k={`+ ${opt.name}${count>1?` ×${count}回`:''}`}
                       v={`¥${(opt.price * count).toLocaleString()}`} muted={opt.price===0}/>
                );
              })}
              <Row k={`ペット保険${visitsPerDay*rangeDays>1?` ×${visitsPerDay*rangeDays}回`:'（自動付帯）'}`} v={`¥${insurance.toLocaleString()}`}/>
              <Row k={`交通費${visitsPerDay*rangeDays>1?` ×${visitsPerDay*rangeDays}回`:''} ・ ¥${transitPerVisit}/回`} v={`¥${transit.toLocaleString()}`}/>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginTop:14,marginBottom:10}}>
              <span style={{fontSize:14,color:'#5d4d3a'}}>お支払い合計 <span style={{fontSize:11,color:'#9c8a72'}}>（概算・事前精算）</span></span>
              <span style={{fontSize:30,fontWeight:700,letterSpacing:'-.01em'}}>¥{total.toLocaleString()}<span style={{fontSize:12,color:'#9c8a72',marginLeft:2}}>税込</span></span>
            </div>
            <div style={{
              padding:'10px 12px',marginBottom:18,borderRadius:10,
              background:'var(--c-bg)',fontSize:11,color:'#7a6a55',lineHeight:1.7,
            }}>
              希望日時のうちシッターが選んだ日時で<strong>金額が確定</strong>します。事前精算は確定後の処理で、訪問完了まで<strong>運営会社が一時お預かり</strong>し、シッターへの送金は訪問完了の翌日以降です。
            </div>

            <label style={{display:'flex',gap:10,padding:'12px 0',fontSize:12,lineHeight:1.7,color:'#5d4d3a',cursor:'pointer'}}
                   onClick={()=>setAgree(!agree)}>
              <span style={{
                width:18,height:18,borderRadius:6,flex:'0 0 auto',marginTop:2,
                background:agree?'var(--c-primary-deep)':'transparent',
                border:'2px solid '+(agree?'var(--c-primary-deep)':'rgba(0,0,0,.15)'),
                display:'grid',placeItems:'center',color:'#fff',
              }}>{agree && <Icons.Check size={11} stroke={3}/>}</span>
              <span><a style={{color:'var(--c-primary-deep)'}}>利用規約</a> と <a style={{color:'var(--c-primary-deep)'}}>キャンセルポリシー</a> に同意します</span>
            </label>

            <button disabled={!agree} style={{
              width:'100%',marginTop:6,background:agree?'var(--c-primary-deep)':'#e6dcd0',
              color:'#fff',border:'none',padding:'18px',borderRadius:14,
              fontSize:15,fontWeight:700,cursor:agree?'pointer':'not-allowed',fontFamily:'inherit',
              transition:'.15s',
            }}>シッターに依頼を送る</button>

            <div style={{
              marginTop:14,padding:'12px 14px',background:'var(--c-bg)',borderRadius:12,
              fontSize:11,color:'#7a6a55',lineHeight:1.7,display:'flex',gap:8,
            }}>
              <Icons.Shield size={14}/>
              <span><strong>パルペット安心保証</strong>：施術中の事故は最大1,000万円まで補償。24時間サポート対応。</span>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

const Block = ({title, children}) => (
  <section style={{marginBottom:28}}>
    <h2 style={{fontSize:15,fontWeight:700,marginBottom:12,color:'#3c2f1e'}}>{title}</h2>
    {children}
  </section>
);

const Row = ({k,v,muted}) => (
  <div style={{display:'flex',justifyContent:'space-between',color:muted?'#9c8a72':'#3c2f1e'}}>
    <span>{k}</span>
    <span style={{fontVariantNumeric:'tabular-nums'}}>{muted?'無料':v}</span>
  </div>
);

// ----------------- 期間モードのピッカー（旅行・出張） -----------------
function RangePicker({ range, pattern, candidateDates, days, onSetStart, onSetEnd, onVisitChange, onAddVisit, onRemoveVisit }) {
  const dayTotalMin = range.visits.reduce((s,v)=>s+v.duration, 0);
  return (
    <div style={{
      padding:'16px 18px',borderRadius:18,background:'#fff',
      border:'1.5px solid var(--c-primary)',
    }}>
      {/* 期間バナー */}
      <div style={{
        display:'flex',gap:10,alignItems:'center',marginBottom:14,
        padding:'10px 12px',borderRadius:10,
        background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
      }}>
        <span style={{fontSize:18}}>✈️</span>
        <div style={{flex:1,fontSize:13,lineHeight:1.6}}>
          <strong>{range.start}（{range.startWeekday}） 〜 {range.end}（{range.endWeekday}）</strong>
          <span style={{marginLeft:8,fontWeight:600}}>連続 {days}日間</span>
          <span style={{color:'#5d4d3a',marginLeft:8,fontSize:11}}>毎日 {range.visits.length}回訪問・1日 計 {Math.floor(dayTotalMin/60)}時間{dayTotalMin%60?(dayTotalMin%60)+'分':''}</span>
        </div>
      </div>

      {/* 開始日 */}
      <div style={{marginBottom:12}}>
        <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,letterSpacing:'.04em',marginBottom:6}}>開始日</div>
        <div style={{display:'flex',gap:6,overflowX:'auto',paddingBottom:4}}>
          {candidateDates.map(([d,w]) => {
            const sel = range.start === d;
            return (
              <button key={'s-'+d} onClick={()=>onSetStart(d,w)} style={{
                flex:'0 0 auto',width:68,padding:'8px 0',borderRadius:10,
                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',textAlign:'center',
              }}>
                <div style={{fontSize:10,fontWeight:600}}>{w}</div>
                <div style={{fontSize:14,fontWeight:700,marginTop:2}}>{d}</div>
              </button>
            );
          })}
        </div>
      </div>

      {/* 終了日 */}
      <div style={{marginBottom:14}}>
        <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,letterSpacing:'.04em',marginBottom:6}}>終了日</div>
        <div style={{display:'flex',gap:6,overflowX:'auto',paddingBottom:4}}>
          {candidateDates.map(([d,w]) => {
            const sel = range.end === d;
            return (
              <button key={'e-'+d} onClick={()=>onSetEnd(d,w)} style={{
                flex:'0 0 auto',width:68,padding:'8px 0',borderRadius:10,
                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',textAlign:'center',
              }}>
                <div style={{fontSize:10,fontWeight:600}}>{w}</div>
                <div style={{fontSize:14,fontWeight:700,marginTop:2}}>{d}</div>
              </button>
            );
          })}
        </div>
      </div>

      {/* 1日のテンプレート */}
      <div>
        <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,letterSpacing:'.04em',marginBottom:6}}>
          毎日の訪問時間（{days}日間すべて同じ時間）
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:8}}>
          {range.visits.map((v, vi)=>(
            <VisitEditor key={vi}
                         visit={v} visitIdx={vi}
                         showLabel={pattern==='twice' || range.visits.length>1}
                         canRemove={range.visits.length>1}
                         onChange={(patch)=>onVisitChange(vi,patch)}
                         onRemove={()=>onRemoveVisit(vi)}/>
          ))}
          {pattern === 'custom' && range.visits.length < 3 && (
            <button onClick={onAddVisit} style={{
              alignSelf:'flex-start',
              padding:'6px 12px',borderRadius:10,
              background:'transparent',border:'1.5px dashed rgba(0,0,0,.15)',
              fontFamily:'inherit',fontSize:12,fontWeight:600,
              color:'var(--c-primary-deep)',cursor:'pointer',
            }}>＋ もう1回訪問を追加</button>
          )}
        </div>
      </div>
    </div>
  );
}

// ----------------- Slot row（複数希望日 ＋ 1日複数回） -----------------
function SlotRow({ slot, idx, pattern, candidateDates, usedDates, uniformTime, primary, canRemove, onSetDate, onVisitChange, onAddVisit, onRemoveVisit, onRemove }) {
  const priorityLabels = ['第1希望', '第2希望', '第3希望'];
  const priorityColors = [
    { bg:'var(--c-primary)', fg:'#fff' },
    { bg:'var(--c-primary-soft)', fg:'var(--c-primary-deep)' },
    { bg:'var(--c-bg-alt)', fg:'#7a6a55' },
  ];
  const pc = priorityColors[idx] || priorityColors[2];

  // 1日合計時間
  const dayTotalMin = slot.visits.reduce((s,v)=>s+v.duration, 0);
  const dayTotalLabel = `${Math.floor(dayTotalMin/60)}時間${dayTotalMin%60?(dayTotalMin%60)+'分':''}`;

  const lockedTime = uniformTime && idx > 0;
  const canAddVisit = pattern === 'custom' && slot.visits.length < 3 && !lockedTime;
  const canRemoveVisit = slot.visits.length > 1 && !lockedTime;

  return (
    <div style={{
      padding:'14px 16px',borderRadius:16,background:'#fff',
      border:'1.5px solid '+(idx===0?'var(--c-primary)':'rgba(0,0,0,.08)'),
    }}>
      {/* 優先度ヘッダー */}
      <div style={{display:'flex',alignItems:'center',marginBottom:12,gap:10,flexWrap:'wrap'}}>
        <span style={{
          padding:'3px 10px',borderRadius:999,fontSize:11,fontWeight:700,
          background:pc.bg,color:pc.fg,whiteSpace:'nowrap',
        }}>{priorityLabels[idx]}</span>
        <span style={{fontSize:12,color:'#7a6a55',flex:1,minWidth:0}}>
          <strong style={{color:'#3c2f1e'}}>{slot.date}（{slot.weekday}）</strong>
          <span style={{marginLeft:8}}>{slot.visits.length}回訪問 ・ 計 {dayTotalLabel}</span>
        </span>
        {canRemove && (
          <button onClick={onRemove} style={{
            background:'transparent',border:'none',color:'#9c8a72',cursor:'pointer',
            padding:6,borderRadius:6,fontSize:13,
          }}>この日を削除</button>
        )}
      </div>

      {/* 候補日（横スクロール） */}
      <div style={{
        display:'flex',gap:6,marginBottom:12,overflowX:'auto',paddingBottom:4,
      }}>
        {candidateDates.map(([d,w]) => {
          const isUsed = usedDates.has(d);
          const isSel = slot.date === d;
          return (
            <button key={d} disabled={isUsed && !isSel} onClick={()=>onSetDate(d,w)} style={{
              flex:'0 0 auto',width:72,padding:'10px 0',borderRadius:12,
              fontFamily:'inherit',cursor:(isUsed && !isSel)?'not-allowed':'pointer',
              border:'1.5px solid '+(isSel?'var(--c-primary)':(isUsed?'rgba(0,0,0,.04)':'rgba(0,0,0,.08)')),
              background:isSel?'var(--c-primary-soft)':isUsed?'rgba(0,0,0,.02)':'#fff',
              color:isSel?'var(--c-primary-deep)':isUsed?'#bbb':'#5d4d3a',
              textAlign:'center',opacity:isUsed && !isSel?0.5:1,
            }}>
              <div style={{fontSize:10,fontWeight:600}}>{w}</div>
              <div style={{fontSize:15,fontWeight:700,marginTop:2}}>{d}</div>
              {isUsed && !isSel && (
                <div style={{fontSize:9,color:'#bbb',marginTop:1}}>使用中</div>
              )}
            </button>
          );
        })}
      </div>

      {/* 訪問時間（複数対応） */}
      {lockedTime ? (
        <div style={{
          fontSize:11,color:'#9c8a72',padding:'10px 12px',
          background:'var(--c-bg)',borderRadius:10,
          display:'flex',gap:8,alignItems:'center',flexWrap:'wrap',
        }}>
          <Icons.Lock size={12}/>
          <span>第1希望と同じ訪問時間を使用：</span>
          {slot.visits.map((v,i)=>(
            <span key={i} style={{
              padding:'2px 8px',borderRadius:999,background:'#fff',
              fontSize:11,color:'#5d4d3a',fontWeight:600,
            }}>{v.label && `${v.label} `}{v.startTime}〜 / {Math.floor(v.duration/60)}h{v.duration%60?(v.duration%60)+'m':''}</span>
          ))}
        </div>
      ) : (
        <div style={{display:'flex',flexDirection:'column',gap:8}}>
          {slot.visits.map((v, vi) => (
            <VisitEditor key={vi}
                         visit={v}
                         visitIdx={vi}
                         showLabel={pattern === 'twice' || (pattern === 'custom' && slot.visits.length > 1)}
                         canRemove={canRemoveVisit}
                         onChange={(patch)=>onVisitChange(vi, patch)}
                         onRemove={()=>onRemoveVisit(vi)}/>
          ))}
          {canAddVisit && (
            <button onClick={onAddVisit} style={{
              alignSelf:'flex-start',
              padding:'6px 12px',borderRadius:10,
              background:'transparent',border:'1.5px dashed rgba(0,0,0,.15)',
              fontFamily:'inherit',fontSize:12,fontWeight:600,
              color:'var(--c-primary-deep)',cursor:'pointer',
            }}>＋ この日にもう1回訪問を追加</button>
          )}
        </div>
      )}
    </div>
  );
}

function VisitEditor({ visit, visitIdx, showLabel, canRemove, onChange, onRemove }) {
  const v = visit;
  const endTime = (() => {
    const [h, m] = v.startTime.split(':').map(Number);
    const total = h * 60 + m + v.duration;
    return `${String(Math.floor(total/60)%24).padStart(2,'0')}:${String(total%60).padStart(2,'0')}`;
  })();
  const labelText = v.label || (showLabel ? `訪問 ${visitIdx + 1}` : '');
  return (
    <div style={{
      padding:'10px 12px',borderRadius:12,background:'var(--c-bg)',
      display:'grid',gridTemplateColumns:'70px 1fr 1.4fr auto',gap:10,alignItems:'center',
    }}>
      <div style={{
        fontSize:12,fontWeight:700,color:'var(--c-primary-deep)',
        display:'flex',alignItems:'center',gap:4,
      }}>
        {v.label === '朝' && '🌅'}
        {v.label === '夜' && '🌙'}
        {labelText}
      </div>
      <div>
        <div style={{fontSize:10,color:'#9c8a72',fontWeight:600,marginBottom:2}}>開始</div>
        <input type="time" value={v.startTime}
               onChange={e=>onChange({ startTime: e.target.value })}
               style={{
                 width:'100%',padding:'8px 10px',borderRadius:8,
                 border:'1.5px solid rgba(0,0,0,.08)',background:'#fff',
                 fontSize:13,fontFamily:'inherit',outline:'none',
               }}/>
      </div>
      <div>
        <div style={{display:'flex',justifyContent:'space-between',fontSize:10,marginBottom:2}}>
          <span style={{color:'#9c8a72',fontWeight:600}}>お世話時間</span>
          <span style={{color:'var(--c-primary-deep)',fontWeight:700}}>
            {Math.floor(v.duration/60)}h{v.duration%60?(v.duration%60)+'m':''}（〜{endTime}）
          </span>
        </div>
        <input type="range" min="30" max="180" step="30"
               value={v.duration}
               onChange={e=>onChange({ duration: +e.target.value })}
               style={{width:'100%',accentColor:'var(--c-primary)'}}/>
      </div>
      <button onClick={onRemove} disabled={!canRemove}
              style={{
                background:'transparent',border:'none',
                color: canRemove?'#9c8a72':'transparent',cursor: canRemove?'pointer':'default',
                padding:6,borderRadius:6,fontSize:18,lineHeight:1,
              }} aria-label="この訪問を削除">×</button>
    </div>
  );
}

// ----------------- Booking complete (success screen) -----------------

function BookingComplete() {
  return (
    <div style={{width:'100%',minHeight:'100%',background:'var(--c-bg)',color:'#2E2418',fontFamily:'var(--font-jp)',display:'flex',flexDirection:'column'}}>
      <header style={{padding:'18px 32px',background:'#fff',borderBottom:'1px solid rgba(0,0,0,.04)',display:'flex',alignItems:'center'}}>
        <img src="assets/logo-horizontal.png" alt="palpet" style={{height:40}}/>
      </header>
      <div style={{padding:'60px 80px',display:'grid',gridTemplateColumns:'1fr 1fr',gap:60,alignItems:'center',flex:1}}>
        <div>
          <div style={{
            width:80,height:80,borderRadius:24,background:'var(--c-primary)',
            color:'#fff',display:'grid',placeItems:'center',marginBottom:24,
          }}><Icons.Check size={44} stroke={2.4}/></div>
          <div style={{fontSize:13,color:'var(--c-primary-deep)',fontWeight:700,marginBottom:6}}>RESERVATION SENT</div>
          <h1 style={{fontSize:44,fontWeight:700,letterSpacing:'-.02em',lineHeight:1.2,marginBottom:14}}>
            みかこさんへ、<br/>
            ご依頼をお送りしました。
          </h1>
          <p style={{fontSize:15,color:'#5d4d3a',lineHeight:1.85,maxWidth:480}}>
            24時間以内にお返事が届きます。承諾されると、ご登録のメールアドレスとプッシュ通知でお知らせします。
          </p>

          <div style={{display:'flex',gap:12,marginTop:32}}>
            <button style={{background:'var(--c-primary-deep)',color:'#fff',border:'none',padding:'16px 24px',borderRadius:14,fontSize:15,fontWeight:700,cursor:'pointer',fontFamily:'inherit'}}>みかこさんとチャット</button>
            <button style={{background:'#fff',border:'1.5px solid rgba(0,0,0,.1)',padding:'16px 24px',borderRadius:14,fontSize:15,fontWeight:700,cursor:'pointer',fontFamily:'inherit'}}>予約一覧へ</button>
          </div>
        </div>
        <div style={{
          background:'#fff',borderRadius:24,padding:32,border:'1.5px solid rgba(0,0,0,.06)',
        }}>
          <div style={{display:'flex',alignItems:'center',gap:16,paddingBottom:20,borderBottom:'1px solid rgba(0,0,0,.06)'}}>
            <div style={{width:60,height:60,borderRadius:16,background:photoBG('peach')}}/>
            <div>
              <strong style={{fontSize:17}}>みかこさんへの依頼</strong>
              <div style={{fontSize:12,color:'#7a6a55',marginTop:4}}>予約ID #PLP-20260524-301</div>
            </div>
          </div>
          <div style={{paddingTop:18,paddingBottom:18,borderBottom:'1px solid rgba(0,0,0,.06)'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
              <div style={{fontSize:12,color:'#9c8a72',fontWeight:600}}>送信した希望日時</div>
              <span style={{
                fontSize:10,padding:'2px 8px',borderRadius:999,fontWeight:700,
                background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
              }}>朝晩2回プラン</span>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:6,marginBottom:14}}>
              {[
                ['第1希望','5/24（土）',['🌅 朝 08:00〜09:00 / 1h','🌙 夜 19:00〜20:00 / 1h'],'primary'],
                ['第2希望','5/26（月）',['🌅 朝 08:00〜09:00 / 1h','🌙 夜 19:00〜20:00 / 1h'],'soft'],
              ].map(([p,d,visits,tone],i)=>(
                <div key={i} style={{
                  padding:'10px 12px',borderRadius:10,
                  background: tone==='primary' ? 'var(--c-primary-soft)' : 'var(--c-bg)',
                }}>
                  <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:4}}>
                    <span style={{
                      fontSize:10,padding:'2px 8px',borderRadius:999,fontWeight:700,
                      background: tone==='primary' ? 'var(--c-primary-deep)' : 'rgba(0,0,0,.08)',
                      color: tone==='primary' ? '#fff' : '#5d4d3a',
                    }}>{p}</span>
                    <span style={{fontSize:13,fontWeight:600}}>{d}</span>
                    <span style={{fontSize:10,color:'var(--c-primary-deep)',fontWeight:700,marginLeft:'auto'}}>1日2回</span>
                  </div>
                  {visits.map((v,vi)=>(
                    <div key={vi} style={{fontSize:12,color:'#5d4d3a',paddingLeft:8,lineHeight:1.7}}>
                      {v}
                    </div>
                  ))}
                </div>
              ))}
            </div>
            <div style={{
              padding:'10px 12px',borderRadius:10,background:'#fff',
              border:'1px dashed rgba(0,0,0,.1)',
              fontSize:12,color:'#7a6a55',lineHeight:1.7,
            }}>
              <Icons.Sparkle size={12}/> シッターはこの中から1日を選んで返信します。
              選ばれた日のすべての訪問（朝＋夜）が確定し、お支払いが処理されます。
            </div>
            <div style={{marginTop:14}}>
              <Row k="場所" v="港区南青山X-X-X"/>
              <Row k="お世話" v="ココ（茶トラ猫・5歳）の訪問ケア（餌やり・トイレ・遊び）"/>
              <Row k="サービス" v="基本 + 活動レポート"/>
            </div>
          </div>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',paddingTop:18}}>
            <span style={{fontSize:14,color:'#5d4d3a'}}>合計（概算・1日分）</span>
            <span style={{fontSize:24,fontWeight:700}}>¥6,600</span>
          </div>
          <div style={{fontSize:11,color:'#9c8a72',marginTop:4,textAlign:'right'}}>朝1h ¥3,200 + 夜1h ¥3,200 + 保険 ¥100 + 活動レポート ¥0</div>
        </div>
      </div>
    </div>
  );
}

window.BookingConfirm = BookingConfirm;
window.BookingComplete = BookingComplete;
