// Mobile views — condensed adaptations of the three flows for iOS-sized artboards.

const photoBG = window.photoBG;
const SITTERS = window.SITTERS;

function MobileLanding({direction = 'A'}) {
  return (
    <div style={{
      width:'100%',minHeight:'100%',background: direction==='B' ? '#fff' : 'var(--c-bg)',
      color:'#2E2418',fontFamily:'var(--font-jp)',
    }}>
      <header style={{
        display:'flex',alignItems:'center',justifyContent:'space-between',
        padding:'14px 18px',
      }}>
        <img src="assets/logo-horizontal.png" alt="palpet" style={{height:36}}/>
        <button style={{background:'transparent',border:'none',padding:6,cursor:'pointer'}}><Icons.Menu size={22}/></button>
      </header>

      <section style={{padding:'8px 18px 22px'}}>
        {direction === 'B' ? (
          <div style={{
            background:'var(--c-primary)',color:'#fff',borderRadius:28,padding:'26px 22px',
            position:'relative',overflow:'hidden',
          }}>
            <div style={{
              display:'inline-block',background:'rgba(255,255,255,.25)',
              padding:'4px 12px',borderRadius:999,fontSize:11,fontWeight:600,marginBottom:12,
            }}>🐾 累計128,500件</div>
            <div style={{fontSize:32,lineHeight:1.15,fontWeight:700,letterSpacing:'-.01em'}}>
              うちの子の<br/>毎日に、もうひとり、<br/>家族。
            </div>
            <div style={{position:'absolute',right:-20,bottom:-20,opacity:.18}}>
              <PetGlyph.Paw size={140} color="#fff"/>
            </div>
          </div>
        ) : (
          <>
            <span style={{display:'inline-block',padding:'4px 12px',background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',borderRadius:999,fontSize:11,fontWeight:600}}>🐾 全国3,200名</span>
            <h1 style={{fontSize:34,fontWeight:700,lineHeight:1.2,marginTop:14}}>うちの子のおうち、<br/>留守の日も、<br/><span style={{background:'linear-gradient(180deg,transparent 60%,var(--c-primary-soft) 60%)'}}>いつも通り。</span></h1>
            <p style={{fontSize:13,lineHeight:1.85,color:'#5d4d3a',marginTop:12}}>
              本人確認と実技審査を通過したプロが、お家までおうかがいします。
            </p>
          </>
        )}
        <button style={{
          width:'100%',marginTop:16,background:'var(--c-primary-deep)',color:'#fff',border:'none',
          padding:'16px',borderRadius:14,fontSize:15,fontWeight:700,cursor:'pointer',fontFamily:'inherit',
          display:'inline-flex',gap:8,justifyContent:'center',alignItems:'center',
        }}>シッターを探す <Icons.Arrow size={16}/></button>
        <button style={{
          width:'100%',marginTop:8,background:'#fff',border:'1.5px solid rgba(0,0,0,.08)',
          padding:'16px',borderRadius:14,fontSize:15,fontWeight:700,cursor:'pointer',fontFamily:'inherit',
        }}>シッター登録</button>
      </section>

      {/* Quick search */}
      <section style={{padding:'0 18px 22px'}}>
        <div style={{background:'#fff',borderRadius:18,padding:14,border:'1px solid rgba(0,0,0,.04)'}}>
          <div style={{fontSize:11,color:'#9c8a72',fontWeight:600,marginBottom:10}}>1分で探す</div>
          {[['エリア','港区南青山',Icons.Pin],['ペット','柴犬・3歳',PetGlyph.Paw],['日時','5/24（土）10時〜',Icons.Calendar]].map(([l,v,I],i)=>(
            <div key={i} style={{
              padding:'10px 12px',marginBottom:i<2?6:10,borderRadius:12,background:'var(--c-bg)',
              display:'flex',alignItems:'center',gap:10,fontSize:13,
            }}>
              <span style={{color:'var(--c-primary-deep)'}}><I size={16}/></span>
              <span style={{color:'#7a6a55',fontSize:11,width:48}}>{l}</span>
              <strong style={{flex:1}}>{v}</strong>
            </div>
          ))}
          <button style={{
            width:'100%',background:'var(--c-primary)',color:'#fff',border:'none',
            padding:'12px',borderRadius:12,fontSize:14,fontWeight:700,cursor:'pointer',fontFamily:'inherit',
          }}>検索する</button>
        </div>
      </section>

      <section style={{padding:'12px 18px'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:10}}>
          <div style={{fontWeight:700,fontSize:17}}>おすすめシッター</div>
          <a style={{fontSize:12,color:'var(--c-primary-deep)'}}>すべて見る →</a>
        </div>
        <div style={{display:'flex',gap:12,overflowX:'auto',padding:'4px 0 14px',margin:'0 -18px',paddingLeft:18}}>
          {[['みかこ','peach','¥3,200','4.98'],['たくみ','warm','¥2,800','4.96'],['ゆり','sage','¥3,500','4.94']].map(([n,t,p,r],i)=>(
            <div key={i} style={{flex:'0 0 160px',background:'#fff',borderRadius:18,padding:10,border:'1px solid rgba(0,0,0,.04)'}}>
              <div style={{aspectRatio:'1/1',borderRadius:12,background:photoBG(t),marginBottom:10}}/>
              <div style={{fontWeight:700,fontSize:14}}>{n}さん</div>
              <div style={{fontSize:11,color:'#7a6a55',marginTop:2,display:'flex',gap:4,alignItems:'center'}}>
                <span style={{color:'var(--c-primary-deep)'}}><Icons.Star size={11}/></span>{r}
              </div>
              <div style={{fontSize:13,fontWeight:700,marginTop:6}}>{p}<span style={{fontSize:10,color:'#9c8a72'}}>/30分</span></div>
            </div>
          ))}
        </div>
      </section>

      <section style={{padding:'22px 18px'}}>
        <h2 style={{fontSize:20,fontWeight:700,marginBottom:14}}>3ステップで安心。</h2>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {[['01','条件で探す','エリア・対応ペット・予算で絞り込み'],['02','メッセージで相談','ご家族のこと、丁寧に擦り合わせ'],['03','当日お任せ','写真とレポートが届きます']].map(([n,t,d],i)=>(
            <div key={i} style={{background:'#fff',borderRadius:16,padding:'16px 18px',display:'flex',gap:14,alignItems:'center'}}>
              <div style={{
                width:38,height:38,borderRadius:12,background:'var(--c-primary-soft)',
                color:'var(--c-primary-deep)',display:'grid',placeItems:'center',fontWeight:700,fontSize:13,flex:'0 0 auto',
                fontFamily:'ui-monospace',
              }}>{n}</div>
              <div>
                <div style={{fontWeight:700,fontSize:14}}>{t}</div>
                <div style={{fontSize:12,color:'#7a6a55',marginTop:2}}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Trust strip */}
      <section style={{padding:'0 18px 22px'}}>
        <div style={{background:'var(--c-bg-alt)',borderRadius:20,padding:20,display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          {[['累計依頼','128,500件'],['シッター','3,200名'],['平均評価','★4.92'],['補償','最大1,000万']].map(([k,v],i)=>(
            <div key={i}>
              <div style={{fontSize:11,color:'#7a6a55'}}>{k}</div>
              <div style={{fontSize:18,fontWeight:700,letterSpacing:'-.01em',marginTop:2}}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{padding:'10px 18px 100px'}}>
        <div style={{
          background:'var(--c-primary-deep)',color:'#fff',borderRadius:24,padding:'30px 22px',
        }}>
          <h2 style={{fontSize:24,fontWeight:700,lineHeight:1.3}}>
            次のお出かけまでに、<br/>シッターを見つけよう。
          </h2>
          <button style={{
            marginTop:16,background:'#fff',color:'var(--c-primary-deep)',border:'none',
            padding:'14px 22px',borderRadius:14,fontWeight:700,cursor:'pointer',fontFamily:'inherit',fontSize:14,
          }}>はじめる →</button>
        </div>
      </section>

      <nav style={{
        position:'sticky',bottom:0,padding:'10px 12px 26px',background:'rgba(255,255,255,.95)',
        backdropFilter:'blur(10px)',borderTop:'1px solid rgba(0,0,0,.04)',
        display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,
      }}>
        {[['Home',Icons.Heart,true],['探す',Icons.Search,false],['予約',Icons.Calendar,false],['アカウント',Icons.User,false]].map(([n,I,act],i)=>(
          <div key={i} style={{
            display:'flex',flexDirection:'column',alignItems:'center',gap:3,padding:'8px 0',
            color: act?'var(--c-primary-deep)':'#9c8a72',
          }}>
            <I size={20}/>
            <div style={{fontSize:10,fontWeight:act?700:500}}>{n}</div>
          </div>
        ))}
      </nav>
    </div>
  );
}

function MobileSearch() {
  return (
    <div style={{
      width:'100%',minHeight:'100%',background:'var(--c-bg)',
      color:'#2E2418',fontFamily:'var(--font-jp)',
    }}>
      <header style={{padding:'14px 16px 8px',background:'#fff'}}>
        <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:10}}>
          <button style={{background:'transparent',border:'none',padding:0,cursor:'pointer'}}><Icons.ChevL size={22}/></button>
          <div style={{flex:1,fontWeight:700,fontSize:16}}>シッターを探す</div>
          <button style={{background:'transparent',border:'none',padding:0,cursor:'pointer'}}><Icons.Sliders size={22}/></button>
        </div>
        <div style={{
          background:'var(--c-bg)',borderRadius:12,padding:'10px 14px',
          fontSize:13,display:'flex',gap:8,alignItems:'center',
        }}>
          <Icons.Search size={16}/>
          <span><strong>港区</strong> · 柴犬 · 5/24（土）</span>
        </div>
        <div style={{display:'flex',gap:6,overflowX:'auto',padding:'12px 0 4px',marginRight:-16}}>
          {['絞り込み','犬','5km以内','¥3,500以下','★4.8〜','土曜OK'].map((c,i)=>(
            <button key={i} style={{
              padding:'7px 14px',borderRadius:999,fontFamily:'inherit',whiteSpace:'nowrap',
              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)':'#3c2f1e',
              fontWeight:600,fontSize:12,
              display:'inline-flex',gap:4,alignItems:'center',
            }}>{i===0 && <Icons.Filter size={12}/>}{c}</button>
          ))}
        </div>
      </header>

      <div style={{padding:'14px 16px 100px'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12,fontSize:12}}>
          <span style={{color:'#7a6a55'}}>6件のシッター</span>
          <span style={{color:'var(--c-primary-deep)',fontWeight:600}}>おすすめ順 ▾</span>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          {SITTERS.slice(0,4).map(s=>(
            <div key={s.id} style={{
              background:'#fff',borderRadius:18,padding:12,display:'flex',gap:12,
              border:'1px solid rgba(0,0,0,.04)',
            }}>
              <div style={{
                width:90,height:90,borderRadius:14,flex:'0 0 auto',
                background:photoBG(s.id),
              }}/>
              <div style={{flex:1,minWidth:0}}>
                <div style={{display:'flex',alignItems:'center',gap:6}}>
                  <strong style={{fontSize:14}}>{s.name}</strong>
                  <span style={{fontSize:10,color:'#7a6a55'}}>{s.age}歳</span>
                  <span style={{marginLeft:'auto',fontSize:9,background:'var(--c-primary-soft)',color:'var(--c-primary-deep)',padding:'2px 6px',borderRadius:999,fontWeight:700}}>✓</span>
                </div>
                <div style={{fontSize:11,color:'#7a6a55',marginTop:3,display:'flex',gap:6}}>
                  <Icons.Pin size={11}/> {s.area} ・ {s.dist}km
                </div>
                <div style={{fontSize:12,marginTop:6,lineHeight:1.5,display:'-webkit-box',WebkitLineClamp:1,WebkitBoxOrient:'vertical',overflow:'hidden'}}>{s.headline}</div>
                <div style={{display:'flex',gap:8,marginTop:8,alignItems:'center',justifyContent:'space-between'}}>
                  <span style={{fontSize:11,color:'var(--c-primary-deep)',display:'flex',gap:2,alignItems:'center'}}>
                    <Icons.Star size={11}/><strong style={{color:'#3c2f1e'}}>{s.rating}</strong>
                    <span style={{color:'#9c8a72',marginLeft:2}}>({s.reviews})</span>
                  </span>
                  <span style={{
                    fontSize:9,padding:'2px 7px',borderRadius:999,fontWeight:700,
                    background:'var(--c-bg-alt)',color:'#7a6a55',
                  }}>統一料金</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <nav style={{
        position:'sticky',bottom:0,padding:'10px 12px 26px',background:'rgba(255,255,255,.95)',
        backdropFilter:'blur(10px)',borderTop:'1px solid rgba(0,0,0,.04)',
        display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,
      }}>
        {[['Home',Icons.Heart,false],['探す',Icons.Search,true],['予約',Icons.Calendar,false],['アカウント',Icons.User,false]].map(([n,I,act],i)=>(
          <div key={i} style={{
            display:'flex',flexDirection:'column',alignItems:'center',gap:3,padding:'8px 0',
            color: act?'var(--c-primary-deep)':'#9c8a72',
          }}>
            <I size={20}/>
            <div style={{fontSize:10,fontWeight:act?700:500}}>{n}</div>
          </div>
        ))}
      </nav>
    </div>
  );
}

function MobileRegister() {
  return (
    <div style={{width:'100%',minHeight:'100%',background:'var(--c-bg)',color:'#2E2418',fontFamily:'var(--font-jp)'}}>
      <header style={{padding:'14px 18px',background:'#fff',display:'flex',alignItems:'center',gap:12}}>
        <button style={{background:'transparent',border:'none',padding:0,cursor:'pointer'}}><Icons.ChevL size={22}/></button>
        <div style={{flex:1,fontWeight:700,fontSize:15}}>シッター登録 <span style={{fontSize:11,color:'#9c8a72',fontWeight:500,marginLeft:4}}>2 / 7</span></div>
      </header>
      <div style={{padding:'4px 18px 0',background:'#fff'}}>
        <div style={{height:5,background:'rgba(0,0,0,.06)',borderRadius:999}}>
          <div style={{width:'28%',height:'100%',background:'var(--c-primary)',borderRadius:999}}/>
        </div>
      </div>

      <div style={{padding:'22px 18px 100px'}}>
        <div style={{fontSize:12,color:'var(--c-primary-deep)',fontWeight:700,fontFamily:'ui-monospace',marginBottom:6}}>STEP 02</div>
        <h2 style={{fontSize:24,fontWeight:700,letterSpacing:'-.01em',marginBottom:6}}>対応できるペットは？</h2>
        <p style={{fontSize:13,color:'#7a6a55',lineHeight:1.7,marginBottom:20}}>複数選択できます。</p>

        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {[['犬',PetGlyph.Dog,'小型〜大型',true],['猫',PetGlyph.Cat,'室内・外猫',true],['うさぎ',PetGlyph.Rabbit,'小動物全般',false],['鳥','🐦','小鳥・インコ',false],['爬虫類','🦎','カメ・トカゲ',false]].map(([n,G,d,sel],i)=>(
            <div key={i} style={{
              padding:'18px 18px',borderRadius:18,
              border: '2px solid '+(sel?'var(--c-primary)':'rgba(0,0,0,.08)'),
              background:sel?'var(--c-primary-soft)':'#fff',
              display:'flex',gap:14,alignItems:'center',
            }}>
              <div style={{
                width:48,height:48,borderRadius:14,flex:'0 0 auto',
                background:sel?'#fff':'var(--c-bg-alt)',
                color:sel?'var(--c-primary-deep)':'#9c8a72',
                display:'grid',placeItems:'center',fontSize:24,
              }}>{typeof G === 'string' ? G : <G size={28}/>}</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:700,fontSize:15}}>{n}</div>
                <div style={{fontSize:11,color:'#7a6a55',marginTop:2}}>{d}</div>
              </div>
              <div style={{
                width:24,height:24,borderRadius:'50%',
                border:'2px solid '+(sel?'var(--c-primary-deep)':'rgba(0,0,0,.12)'),
                background:sel?'var(--c-primary-deep)':'transparent',
                color:'#fff',display:'grid',placeItems:'center',
              }}>{sel && <Icons.Check size={12} stroke={3}/>}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        position:'sticky',bottom:0,padding:'14px 18px 26px',background:'#fff',
        borderTop:'1px solid rgba(0,0,0,.04)',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:14,fontWeight:700,cursor:'pointer',fontFamily:'inherit'}}>次へ →</button>
      </div>
    </div>
  );
}

window.MobileLanding = MobileLanding;
window.MobileSearch = MobileSearch;
window.MobileRegister = MobileRegister;