// Matching Search — filter sidebar + sitter cards grid + detail drawer
// Interactive: filters update result count, clicking a card opens detail.

// 全シッター統一料金（ds.js の PALPET_PRICING に集約） — 個別の rate は持たない
const SITTERS = [
  {id:1, name:'みかこ', age:29, area:'港区南青山', stations:['表参道','外苑前','青山一丁目'], dist:1.2, pets:['dog','cat','rabbit'], rating:4.98, reviews:312, exp:6, cert:true, verified:true, photo:'peach',
   tags:['散歩','投薬','シニア'], avail:'土曜 10:00〜', headline:'その子のペースに合わせて、まいにちを大切に。'},
  {id:2, name:'たくみ', age:34, area:'世田谷区池尻', stations:['池尻大橋','三軒茶屋','渋谷'], dist:3.8, pets:['dog'], rating:4.96, reviews:188, exp:8, cert:true, verified:true, photo:'warm',
   tags:['大型犬OK','長距離散歩'], avail:'平日のみ', headline:'体力勝負も任せてください。'},
  {id:3, name:'ゆり', age:41, area:'渋谷区代々木', stations:['代々木','参宮橋','明治神宮前','原宿'], dist:2.4, pets:['cat','rabbit'], rating:4.94, reviews:456, exp:12, cert:true, verified:true, photo:'sage',
   tags:['猫専門','投薬','長期'], avail:'毎日', headline:'臆病な子こそ、得意です。'},
  {id:4, name:'けんと', age:27, area:'中野区東中野', stations:['東中野','中野','落合'], dist:5.1, pets:['dog','cat'], rating:4.92, reviews:201, exp:3, cert:false, verified:true, photo:'cream',
   tags:['深夜OK','緊急対応'], avail:'24時間対応', headline:'夜勤明けの飼い主さんへ。'},
  {id:5, name:'あゆみ', age:33, area:'品川区五反田', stations:['五反田','大崎','目黒'], dist:4.0, pets:['dog','cat'], rating:4.89, reviews:142, exp:5, cert:true, verified:true, photo:'warm',
   tags:['ブラッシング','遊び好き'], avail:'週末メイン', headline:'たっぷり遊んで、ぐっすり眠れるように。'},
  {id:6, name:'なお', age:38, area:'目黒区中目黒', stations:['中目黒','代官山','恵比寿','祐天寺'], dist:2.9, pets:['dog','rabbit'], rating:4.97, reviews:289, exp:10, cert:true, verified:true, photo:'peach',
   tags:['うさぎ専門','看護師経験'], avail:'平日午前', headline:'看護師経験を活かしたケア。'},
];

// 統一料金は ds.js > window.PALPET_PRICING で管理
const PRICING = (typeof window !== 'undefined' && window.PALPET_PRICING) || { plans:{} };
// 「基本ペットシッタープラン」の最小料金（30分）を訴求用に取得
const STANDARD_TIERS = PRICING.plans?.standard?.tiers || [];
const STANDARD_MIN = STANDARD_TIERS[0]?.price || 3800;
const STANDARD_60 = STANDARD_TIERS.find(t => t.minutes === 60)?.price || 5300;

const NEARBY_STATIONS = ['表参道','外苑前','青山一丁目','広尾','六本木','乃木坂','恵比寿','渋谷','原宿','麻布十番'];

function SearchPage({ initialMode = 'list' }) {
  const [mode, setMode] = React.useState(initialMode); // 'list' | 'detail'
  const [selected, setSelected] = React.useState(SITTERS[0]);
  const [filters, setFilters] = React.useState({
    pets:['dog'], radius: 5, minExp: 0,
    minRating: 4.5, services:['visit'], certOnly:false,
    stations: [],
  });

  const filtered = SITTERS.filter(s =>
    filters.pets.some(p => s.pets.includes(p)) &&
    s.rating >= filters.minRating &&
    s.exp >= filters.minExp &&
    s.dist <= filters.radius &&
    (!filters.certOnly || s.cert) &&
    (filters.stations.length === 0 || filters.stations.some(st => (s.stations||[]).includes(st)))
  );

  const set = (k,v) => setFilters(f=>({...f,[k]:v}));
  const toggle = (k,v) => setFilters(f=>({...f, [k]: f[k].includes(v) ? f[k].filter(x=>x!==v) : [...f[k],v]}));

  return (
    <div data-page="search" style={{
      width:'100%',minHeight:'100%',background:'var(--c-bg)',
      color:'#2E2418',fontFamily:'var(--font-jp)',
    }}>
      {/* Header */}
      <header style={{
        display:'flex',alignItems:'center',gap:16,
        padding:'18px 32px',background:'#fff',borderBottom:'1px solid rgba(0,0,0,.04)',
      }}>
        <img src="assets/logo-horizontal.png" alt="palpet" style={{height:44,flex:'0 0 auto'}}/>
        <SearchBar/>
        <div style={{display:'flex',gap:10,alignItems:'center'}}>
          <button style={iconBtn}><Icons.Bell size={18}/></button>
          <button style={iconBtn}><Icons.Msg size={18}/></button>
          <div style={{
            width:36,height:36,borderRadius:'50%',
            background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
            display:'grid',placeItems:'center',fontWeight:700,fontSize:13,
          }}>S</div>
        </div>
      </header>

      <div style={{display:'grid',gridTemplateColumns: mode==='detail' ? '280px 1.1fr 1.3fr' : '280px 1fr',gap:0}}>
        {/* Filter sidebar */}
        <aside style={{padding:'24px 22px',borderRight:'1px solid rgba(0,0,0,.04)',background:'#fff'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:18}}>
            <div style={{fontSize:16,fontWeight:700,display:'flex',gap:8,alignItems:'center'}}><Icons.Filter size={18}/> 絞り込み</div>
            <a style={{fontSize:12,color:'var(--c-primary-deep)'}}>クリア</a>
          </div>

          <FilterGroup label="エリア">
            <div style={{padding:'12px 14px',borderRadius:12,background:'var(--c-bg)',fontSize:13,display:'flex',gap:8,alignItems:'center'}}>
              <Icons.Pin size={14}/> 東京都・港区南青山
            </div>
            <div style={{marginTop:10}}>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:12,marginBottom:6}}>
                <span style={{color:'#7a6a55'}}>距離</span>
                <span style={{fontWeight:700,color:'var(--c-primary-deep)'}}>{filters.radius} km 以内</span>
              </div>
              <input type="range" min="1" max="20" value={filters.radius} onChange={e=>set('radius',+e.target.value)}
                     style={{width:'100%',accentColor:'var(--c-primary)'}}/>
            </div>
          </FilterGroup>

          <FilterGroup label="駅から探す">
            <div style={{fontSize:11,color:'#7a6a55',marginBottom:8}}>
              選んだ駅に対応できるシッターだけを表示
            </div>
            <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
              {NEARBY_STATIONS.map(st => {
                const sel = filters.stations.includes(st);
                return (
                  <button key={st} onClick={()=>toggle('stations',st)} style={chip(sel)}>
                    {sel ? '✓ ' : ''}{st}
                  </button>
                );
              })}
            </div>
            {filters.stations.length > 0 && (
              <div style={{fontSize:11,marginTop:8,color:'var(--c-primary-deep)',fontWeight:700}}>
                {filters.stations.length}駅で絞り込み中
              </div>
            )}
          </FilterGroup>

          <FilterGroup label="ペットの種類">
            <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
              {[['dog','犬'],['cat','猫'],['rabbit','うさぎ'],['bird','鳥'],['reptile','爬虫類']].map(([k,n])=>{
                const sel = filters.pets.includes(k);
                return (
                  <button key={k} onClick={()=>toggle('pets',k)} style={chip(sel)}>{n}</button>
                );
              })}
            </div>
          </FilterGroup>

          {/* 料金フィルタは不要 — 全シッター統一料金のため */}
          <div style={{
            marginBottom:22,paddingBottom:22,borderBottom:'1px solid rgba(0,0,0,.06)',
            padding:'14px 16px',borderRadius:14,
            background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
          }}>
            <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:6}}>
              <Icons.Shield size={16}/>
              <strong style={{fontSize:13}}>料金は全シッター統一</strong>
            </div>
            <div style={{fontSize:11,lineHeight:1.7,color:'#5d4d3a'}}>
              1時間 ¥{STANDARD_60.toLocaleString()}〜（税込）。19年のソプラ銀座が運営し、人材の質を担保しているからこその統一料金です。
            </div>
          </div>

          <FilterGroup label="経験年数">
            <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
              {[[0,'指定なし'],[3,'3年〜'],[5,'5年〜'],[10,'10年〜']].map(([v,n])=>(
                <button key={v} onClick={()=>set('minExp',v)} style={chip(filters.minExp===v)}>{n}</button>
              ))}
            </div>
          </FilterGroup>

          <FilterGroup label="評価">
            <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
              {[4.0,4.5,4.8,4.9].map(v=>(
                <button key={v} onClick={()=>set('minRating',v)} style={chip(filters.minRating===v)}>★ {v}〜</button>
              ))}
            </div>
          </FilterGroup>

          <FilterGroup label="サービス">
            <div style={{display:'flex',flexDirection:'column',gap:4}}>
              {[['visit','訪問ケア'],['walk','散歩のみ'],['stay','お預かり'],['overnight','お泊まり']].map(([k,n])=>{
                const sel = filters.services.includes(k);
                return (
                  <label key={k} style={{display:'flex',gap:10,padding:'8px 0',fontSize:13,cursor:'pointer',alignItems:'center'}}
                         onClick={()=>toggle('services',k)}>
                    <span style={{
                      width:18,height:18,borderRadius:6,
                      background:sel?'var(--c-primary-deep)':'transparent',
                      border:'2px solid '+(sel?'var(--c-primary-deep)':'rgba(0,0,0,.15)'),
                      display:'grid',placeItems:'center',color:'#fff',
                    }}>{sel && <Icons.Check size={12} stroke={3}/>}</span>
                    {n}
                  </label>
                );
              })}
            </div>
          </FilterGroup>

          <FilterGroup label="その他">
            <label style={{display:'flex',gap:10,padding:'8px 0',fontSize:13,cursor:'pointer',alignItems:'center'}}
                   onClick={()=>set('certOnly',!filters.certOnly)}>
              <span style={{
                width:34,height:20,borderRadius:999,padding:2,
                background:filters.certOnly?'var(--c-primary)':'rgba(0,0,0,.12)',
                display:'flex',alignItems:'center',
              }}>
                <span style={{
                  width:16,height:16,borderRadius:'50%',background:'#fff',
                  transform:filters.certOnly?'translateX(14px)':'translateX(0)',transition:'.2s'
                }}/>
              </span>
              資格保有者のみ
            </label>
          </FilterGroup>
        </aside>

        {/* Results column */}
        <main style={{padding:'24px 32px'}}>
          <div style={{
            marginBottom:14,padding:'12px 16px',borderRadius:14,
            background:'color-mix(in oklab, var(--c-accent) 16%, #fff)',
            border:'1px solid color-mix(in oklab, var(--c-accent) 35%, #fff)',
            display:'flex',gap:10,alignItems:'center',
          }}>
            <span style={{fontSize:22}}>🏛️</span>
            <div style={{fontSize:12,color:'#5d4d3a',lineHeight:1.7}}>
              <strong>19年のペットケア実績を持つソプラ銀座が運営。</strong>厳しい審査・面接を経た有資格者のみが在籍するため、
              料金は全シッター統一です（1時間 ¥{STANDARD_60.toLocaleString()}〜・税込）。
            </div>
          </div>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:18}}>
            <div>
              <h1 style={{fontSize:24,fontWeight:700,letterSpacing:'-.01em'}}>港区周辺のシッター</h1>
              <div style={{fontSize:13,color:'#7a6a55',marginTop:4}}>
                {filtered.length}名のシッターが対応可能 ・ 5/24（土）以降
              </div>
            </div>
            <div style={{display:'flex',gap:8,alignItems:'center'}}>
              <span style={{fontSize:12,color:'#7a6a55'}}>並び替え</span>
              <select style={{...inputCss, padding:'10px 14px', width:'auto', fontSize:13}}>
                <option>おすすめ順</option>
                <option>近い順</option>
                <option>評価が高い順</option>
                <option>経験年数順</option>
              </select>
            </div>
          </div>

          <div style={{display:'grid',gridTemplateColumns:mode==='detail'?'1fr':'1fr 1fr',gap:14}}>
            {filtered.map(s => (
              <SitterCard key={s.id} sitter={s}
                          active={mode==='detail' && selected.id===s.id}
                          compact={mode==='detail'}
                          onClick={()=>{setSelected(s); setMode('detail');}}/>
            ))}
            {filtered.length===0 && (
              <div style={{
                gridColumn:'1 / -1',padding:'60px 20px',textAlign:'center',
                background:'#fff',borderRadius:18,color:'#7a6a55',
              }}>条件にあうシッターが見つかりませんでした。<br/>条件をゆるめてみてください。</div>
            )}
          </div>
        </main>

        {/* Detail drawer */}
        {mode === 'detail' && (
          <aside style={{padding:'24px 32px',borderLeft:'1px solid rgba(0,0,0,.04)',background:'#fff'}}>
            <SitterDetail sitter={selected} onClose={()=>setMode('list')}/>
          </aside>
        )}
      </div>
    </div>
  );
}

const iconBtn = {
  width:38,height:38,borderRadius:12,border:'none',background:'transparent',
  cursor:'pointer',display:'grid',placeItems:'center',color:'#5d4d3a',
};

const chip = (sel) => ({
  padding:'8px 14px',borderRadius:999,fontFamily:'inherit',fontSize:13,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: sel?700:500,
});

function FilterGroup({label, children}) {
  return (
    <div style={{marginBottom:22,paddingBottom:22,borderBottom:'1px solid rgba(0,0,0,.06)'}}>
      <div style={{fontSize:13,fontWeight:700,marginBottom:10,color:'#3c2f1e'}}>{label}</div>
      {children}
    </div>
  );
}

function SearchBar() {
  return (
    <div style={{
      flex:1,maxWidth:720,
      background:'var(--c-bg)',borderRadius:14,padding:'8px 8px 8px 18px',
      display:'flex',gap:10,alignItems:'center',
    }}>
      <Icons.Search size={18}/>
      <div style={{flex:1,display:'flex',gap:14,alignItems:'center',fontSize:13}}>
        <span><strong>港区南青山</strong></span>
        <span style={{color:'rgba(0,0,0,.1)'}}>·</span>
        <span><strong>柴犬・3歳</strong></span>
        <span style={{color:'rgba(0,0,0,.1)'}}>·</span>
        <span><strong>5/24（土）10:00〜</strong></span>
      </div>
      <button style={{
        background:'var(--c-primary)',color:'#fff',border:'none',
        padding:'10px 18px',borderRadius:10,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:13,
      }}>検索</button>
    </div>
  );
}

const photoTones = { peach:['#F8CFB8','#EBA689'], warm:['#F4DBA8','#E8B97A'], sage:['#CBE0CC','#9CC2A4'], cream:['#F5E7CC','#E0CFA8'] };
// photoBG は「シッターID」または「トーン名」を受け取る
// - 数値ID（1〜6）→ Unsplashのシッター写真を返す
// - 文字列 'peach'/'warm'/'sage'/'cream' → 斜線パターンを返す（後方互換）
const photoBG = (idOrTone) => {
  if (typeof idOrTone === 'number' && typeof window !== 'undefined' && window.PALPET_PHOTOS?.sitters?.[idOrTone]) {
    return `url("${window.PALPET_PHOTOS.sitters[idOrTone]}") center/cover no-repeat`;
  }
  const t = photoTones[idOrTone] ? idOrTone : 'warm';
  return `repeating-linear-gradient(135deg, ${photoTones[t][0]} 0 12px, ${photoTones[t][1]} 12px 24px)`;
};
const petLabelMap = {dog:'犬',cat:'猫',rabbit:'うさぎ',bird:'鳥',reptile:'爬虫類'};

function SitterCard({sitter, active, compact, onClick}) {
  const s = sitter;
  return (
    <div onClick={onClick} style={{
      background:'#fff', borderRadius:20, padding:14, cursor:'pointer',
      border: '2px solid '+(active?'var(--c-primary)':'transparent'),
      boxShadow: active ? '0 0 0 4px var(--c-primary-soft)' : '0 1px 0 rgba(0,0,0,.04)',
      transition:'.15s',
    }}>
      <div style={{display:'flex',gap:14}}>
        <div style={{
          width: compact?92:120, height: compact?92:120,
          borderRadius:16,flex:'0 0 auto',background:photoBG(s.id),
        }}/>
        <div style={{flex:1,minWidth:0}}>
          <div style={{display:'flex',alignItems:'center',gap:8}}>
            <div style={{fontWeight:700,fontSize:17}}>{s.name}<span style={{fontSize:11,color:'#7a6a55',marginLeft:6}}>{s.age}歳</span></div>
            {s.verified && <Badge>✓ 本人確認</Badge>}
            {s.cert && <Badge tone="accent">資格あり</Badge>}
          </div>
          <div style={{fontSize:12,color:'#7a6a55',marginTop:4,display:'flex',gap:10,flexWrap:'wrap'}}>
            <span><Icons.Pin size={12}/> {s.area}・{s.dist}km</span>
            <span>経験 {s.exp}年</span>
          </div>
          {s.stations && s.stations.length > 0 && (
            <div style={{display:'flex',gap:4,marginTop:6,flexWrap:'wrap'}}>
              {s.stations.slice(0,4).map((st,i)=>(
                <span key={i} style={{
                  fontSize:10,padding:'2px 8px',borderRadius:999,
                  background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',
                  fontWeight:700,display:'inline-flex',alignItems:'center',gap:3,
                }}><Icons.Pin size={9}/>{st}</span>
              ))}
            </div>
          )}
          <div style={{fontSize:13,marginTop:8,lineHeight:1.6,color:'#3c2f1e'}}>{s.headline}</div>
          {!compact && (
            <div style={{display:'flex',gap:6,marginTop:10,flexWrap:'wrap'}}>
              {s.tags.map((t,i)=>(
                <span key={i} style={{fontSize:11,padding:'3px 10px',borderRadius:999,background:'var(--c-bg)',color:'#5d4d3a'}}>{t}</span>
              ))}
            </div>
          )}
        </div>
      </div>
      <div style={{
        display:'flex',justifyContent:'space-between',alignItems:'baseline',
        marginTop:14,paddingTop:12,borderTop:'1px solid rgba(0,0,0,.06)',
      }}>
        <div style={{display:'flex',gap:14,fontSize:13,alignItems:'center'}}>
          <span style={{color:'var(--c-primary-deep)',display:'inline-flex',alignItems:'center',gap:4}}>
            <Icons.Star size={14}/><strong style={{color:'#3c2f1e'}}>{s.rating}</strong>
            <span style={{color:'#9c8a72'}}>({s.reviews})</span>
          </span>
          <span style={{color:'#7a6a55',fontSize:12,display:'inline-flex',gap:4,alignItems:'center'}}>
            <Icons.Calendar size={12}/> {s.avail}
          </span>
        </div>
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <span style={{
            fontSize:10,padding:'3px 8px',borderRadius:999,fontWeight:700,
            background:'var(--c-bg)',color:'#7a6a55',
          }}>全国共通料金</span>
          <a style={{
            fontSize:13,fontWeight:700,color:'var(--c-primary-deep)',
            display:'inline-flex',alignItems:'center',gap:4,
          }}>このシッターに依頼 <Icons.ChevR size={14}/></a>
        </div>
      </div>
    </div>
  );
}

const Badge = ({children, tone}) => (
  <span style={{
    fontSize:10,padding:'2px 8px',borderRadius:999,fontWeight:700,
    background: tone==='accent' ? 'color-mix(in oklab, var(--c-accent) 25%, #fff)' : 'var(--c-primary-soft)',
    color: tone==='accent' ? '#8b6a14' : 'var(--c-primary-deep)',
  }}>{children}</span>
);

function SitterDetail({sitter, onClose}) {
  const s = sitter;
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:18}}>
        <div style={{fontSize:12,color:'#9c8a72',fontWeight:600}}>シッター詳細</div>
        <button onClick={onClose} style={{background:'transparent',border:'none',cursor:'pointer',color:'#7a6a55'}}>
          <Icons.Close size={20}/>
        </button>
      </div>
      <div style={{borderRadius:20,background:photoBG(s.id),aspectRatio:'5/3',marginBottom:18}}/>
      <div style={{display:'flex',alignItems:'flex-start',gap:14}}>
        <div style={{flex:1}}>
          <h2 style={{fontSize:24,fontWeight:700}}>{s.name}<span style={{fontSize:14,color:'#7a6a55',marginLeft:8}}>{s.age}歳</span></h2>
          <div style={{fontSize:13,color:'#7a6a55',marginTop:4,display:'flex',gap:12,flexWrap:'wrap'}}>
            <span><Icons.Pin size={13}/> {s.area} ・ {s.dist}km</span>
            <span><Icons.Calendar size={13}/> {s.avail}</span>
          </div>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{fontSize:11,color:'#9c8a72'}}>全シッター統一料金</div>
          <div style={{fontSize:20,fontWeight:700}}>¥{STANDARD_60.toLocaleString()}<span style={{fontSize:12,color:'#9c8a72',marginLeft:2}}>/1時間〜</span></div>
          <a style={{fontSize:11,color:'var(--c-primary-deep)',textDecoration:'underline'}}>料金表を見る</a>
        </div>
      </div>
      <div style={{display:'flex',gap:6,marginTop:10,flexWrap:'wrap'}}>
        {s.verified && <Badge>✓ 本人確認</Badge>}
        {s.cert && <Badge tone="accent">資格保有</Badge>}
        <Badge>保険適用</Badge>
        <Badge>{s.exp}年の経験</Badge>
        <Badge tone="accent">ソプラ銀座 認定</Badge>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8,marginTop:18,padding:16,background:'var(--c-bg)',borderRadius:16}}>
        <Stat n={s.rating} l="平均評価" hint="★★★★★"/>
        <Stat n={s.reviews} l="レビュー数"/>
        <Stat n={`${s.exp}年`} l="経験"/>
      </div>

      <H3>はじめまして</H3>
      <p style={{fontSize:14,lineHeight:1.9,color:'#3c2f1e'}}>
        {s.headline}<br/>
        ペットケアアドバイザー2級を保有しています。実家で犬・猫・うさぎを飼っていた経験があり、
        どの子のお世話も大切にお引き受けします。
      </p>

      <H3>対応できるペット</H3>
      <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
        {s.pets.map(p=>(
          <div key={p} style={{padding:'10px 14px',background:'var(--c-bg)',borderRadius:12,display:'inline-flex',gap:8,alignItems:'center'}}>
            <span style={{color:'var(--c-primary-deep)'}}>
              {p==='dog'&&<PetGlyph.Dog size={22}/>}{p==='cat'&&<PetGlyph.Cat size={22}/>}{p==='rabbit'&&<PetGlyph.Rabbit size={22}/>}
            </span>
            <strong style={{fontSize:13}}>{petLabelMap[p]}</strong>
          </div>
        ))}
      </div>

      <H3>得意なお世話</H3>
      <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
        {s.tags.map((t,i)=>(
          <span key={i} style={{fontSize:13,padding:'7px 14px',borderRadius:999,background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',fontWeight:600}}>{t}</span>
        ))}
      </div>

      <H3>レビュー</H3>
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        {[
          ['出張中、毎日の写真と動画が届いてホッとしました。','ゆうこさん','5/12'],
          ['シニアの猫の投薬もばっちり。安心してまかせられます。','けんすけさん','4/28'],
        ].map(([q,n,d],i)=>(
          <div key={i} style={{padding:14,background:'var(--c-bg)',borderRadius:14}}>
            <div style={{display:'flex',justifyContent:'space-between',marginBottom:6,fontSize:12}}>
              <div style={{display:'flex',gap:6,alignItems:'center'}}>
                <span style={{color:'var(--c-primary-deep)'}}><Icons.Star size={12}/></span>
                <strong>5.0</strong>
                <span style={{color:'#9c8a72'}}>· {n}</span>
              </div>
              <span style={{color:'#9c8a72'}}>{d}</span>
            </div>
            <div style={{fontSize:13,lineHeight:1.8}}>{q}</div>
          </div>
        ))}
      </div>

      <div style={{
        position:'sticky',bottom:0,marginTop:24,padding:'16px 0',background:'#fff',
        display:'flex',gap:10,
      }}>
        <button style={{
          flex:1,background:'#fff',border:'1.5px solid rgba(0,0,0,.1)',
          padding:'14px',borderRadius:14,fontSize:14,fontWeight:700,cursor:'pointer',
          fontFamily:'inherit',
        }}>メッセージ</button>
        <button style={{
          flex:2,background:'var(--c-primary-deep)',color:'#fff',border:'none',
          padding:'14px',borderRadius:14,fontSize:15,fontWeight:700,cursor:'pointer',
          fontFamily:'inherit',
        }}>このシッターに依頼する</button>
      </div>
    </div>
  );
}

const H3 = ({children}) => <h3 style={{fontSize:15,fontWeight:700,margin:'22px 0 10px'}}>{children}</h3>;
const Stat = ({n,l,hint}) => (
  <div style={{textAlign:'center'}}>
    <div style={{fontSize:22,fontWeight:700,letterSpacing:'-.01em'}}>{n}</div>
    <div style={{fontSize:11,color:'#7a6a55'}}>{l}</div>
  </div>
);

window.SearchPage = SearchPage;
window.photoBG = photoBG;
window.photoTones = photoTones;
window.SitterBadge = Badge;
window.SITTERS = SITTERS;