// Landing Page — Direction A "Editorial Warm"
// Soft, magazine-style. Generous whitespace, big imagery, calm typography.

const PhotoSlot = ({ ratio = '4/5', label = 'photo', round = 28, tone = 'warm', src, style = {} }) => {
  const tones = {
    warm: ['#F4DBA8', '#E8B97A'],
    peach: ['#F8CFB8', '#EBA689'],
    sage: ['#CBE0CC', '#9CC2A4'],
    cream: ['#F5E7CC', '#E0CFA8'],
  };
  // ラベルに応じて Unsplash 写真を自動選択
  const photos = (typeof window !== 'undefined' && window.PALPET_PHOTOS) || {};
  const labelMap = {
    'hero — sitter & dog': photos.hero,
    'cat & sitter': photos.pets?.cat,
    'walk in park': photos.walk,
    'rabbit care': photos.pets?.rabbit,
    '犬 care': photos.pets?.dog,
    '猫 care': photos.pets?.cat,
    'うさぎ care': photos.pets?.rabbit,
  };
  const photoUrl = src || labelMap[label];

  const [a, b] = tones[tone] || tones.warm;
  return (
    <div style={{
      aspectRatio: ratio, borderRadius: round,
      background: photoUrl
        ? `url("${photoUrl}") center/cover no-repeat`
        : `repeating-linear-gradient(135deg, ${a} 0 14px, ${b} 14px 28px)`,
      display: 'flex', alignItems: 'flex-end', padding: 14, color: '#fff',
      fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11, letterSpacing: '.04em',
      overflow: 'hidden', position: 'relative',
      ...style,
    }}>
      {!photoUrl && (
        <div style={{background:'rgba(255,255,255,.72)', borderRadius: 8, padding: '4px 8px', color:'#5b4326'}}>📷 {label}</div>
      )}
    </div>
  );
};

const Pill = ({ children, tone = 'soft' }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '6px 12px', borderRadius: 999, fontSize: 13,
    background: tone === 'soft' ? 'var(--c-primary-soft)' : '#fff',
    color: 'var(--c-primary-deep)',
    border: tone === 'ghost' ? '1px solid rgba(0,0,0,.08)' : 'none',
    fontWeight: 500,
  }}>{children}</span>
);

function LandingA({ heroLayout = 'split', illustrations = true, density = 'cozy' }) {
  const isMobile = window.useMobile ? window.useMobile() : false;
  const pad = isMobile ? 16 : (density === 'compact' ? 56 : 80);
  return (
    <div data-page="landing-a" style={{
      width: '100%', minHeight: '100%',
      background: 'var(--c-bg)',
      color: '#2E2418',
      fontFamily: 'var(--font-jp)',
      paddingBottom: 60,
    }}>
      {/* Nav */}
      <nav style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: isMobile ? '14px 16px' : '22px 56px',
        position: 'sticky', top: 0, zIndex: 10,
        background: 'color-mix(in oklab, var(--c-bg) 90%, transparent)',
        backdropFilter: 'blur(8px)',
      }}>
        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <img src="assets/logo-horizontal.png" alt="palpet" style={{height: isMobile?40:54,width:'auto',display:'block'}}/>
        </div>
        {!isMobile && (
          <div style={{display:'flex',gap:32,fontSize:14,color:'#5d4d3a'}}>
            <a href="#/search" style={{cursor:'pointer'}}>シッターを探す</a>
            <a href="#/owner-register" style={{cursor:'pointer'}}>初めての方</a>
            <a href="#/company" style={{cursor:'pointer'}}>料金</a>
            <a href="#/company" style={{cursor:'pointer'}}>安心の取り組み</a>
          </div>
        )}
        <div style={{display:'flex',gap:isMobile?6:10,alignItems:'center'}}>
          {!isMobile && (
            <a href="#/login" style={{background:'transparent',border:'none',fontSize:14,color:'#5d4d3a',cursor:'pointer',textDecoration:'none'}}>ログイン</a>
          )}
          <a href="#/sitter-register" style={{
            background:'var(--c-primary)', color:'#fff', border:'none',
            padding: isMobile ? '8px 14px' : '10px 18px',
            borderRadius: 999, fontSize: isMobile ? 12 : 14, fontWeight: 600, cursor:'pointer',
            fontFamily:'inherit', textDecoration:'none', display:'inline-block',
          }}>シッター登録</a>
        </div>
      </nav>

      {/* HERO */}
      {heroLayout === 'split' && (
        <section style={{
          display:'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.05fr .95fr',
          gap: isMobile ? 24 : 48,
          padding: isMobile ? `16px ${pad}px 40px` : `24px ${pad}px 72px`,
          alignItems:'center',
        }}>
          <div>
            <Pill>🐾 全国 約3,200名のシッターが在籍</Pill>
            <h1 style={{
              fontSize: isMobile ? 32 : 64, lineHeight: 1.12, letterSpacing: '-.01em',
              fontWeight: 700, margin: '20px 0 16px',
            }}>うちの子のおうち、<br/>
              <span style={{
                background:'linear-gradient(180deg, transparent 60%, var(--c-primary-soft) 60%)',
              }}>留守の日も、いつも通り。</span>
            </h1>
            <p style={{fontSize: isMobile?15:17, lineHeight: 1.85, color:'#5d4d3a', maxWidth: 480}}>
              旅行も出張も、急な残業も。本人確認と実技審査をクリアした
              プロのペットシッターが、お家までおうかがいします。
            </p>
            <div style={{display:'flex',gap:12,marginTop:28,flexWrap:'wrap'}}>
              <a href="#/search" style={{
                background:'var(--c-primary-deep)', color:'#fff', border:'none',
                padding:'16px 28px', borderRadius:18, fontSize:16, fontWeight:600, cursor:'pointer',
                fontFamily:'inherit', display:'inline-flex',gap:8,alignItems:'center',
                textDecoration:'none',
              }}>シッターを探す <Icons.Arrow size={18}/></a>
              <a href="#/sitter-register" style={{
                background:'#fff', color:'#3c2f1e', border:'1.5px solid rgba(0,0,0,.08)',
                padding:'16px 28px', borderRadius:18, fontSize:16, fontWeight:600, cursor:'pointer',
                fontFamily:'inherit', textDecoration:'none', display:'inline-block',
              }}>シッターとして登録</a>
            </div>
            <div style={{display:'flex',gap:24,marginTop:36,fontSize:13,color:'#7a6a55'}}>
              <span style={{display:'inline-flex',gap:6,alignItems:'center'}}><Icons.Shield size={16}/> 損害補償付き</span>
              <span style={{display:'inline-flex',gap:6,alignItems:'center'}}><Icons.Check size={16}/> 本人確認済み</span>
              <span style={{display:'inline-flex',gap:6,alignItems:'center'}}><Icons.Star size={16}/> 平均 4.9 / 5.0</span>
            </div>
          </div>
          <div style={{position:'relative'}}>
            <PhotoSlot ratio="4/5" label="hero — sitter & dog" tone="warm" round={32}/>
            <div style={{
              position:'absolute', left:-24, bottom:32, background:'#fff',
              padding:'14px 18px', borderRadius:18, boxShadow:'0 18px 48px rgba(80,50,0,.12)',
              display:'flex',gap:12,alignItems:'center',maxWidth:240,
            }}>
              <div style={{width:44,height:44,borderRadius:12,background:'#F8CFB8',display:'grid',placeItems:'center'}}>
                <PetGlyph.Dog size={28} color="#9b5d3a"/>
              </div>
              <div>
                <div style={{fontSize:13,fontWeight:600}}>ココちゃんの散歩中 🐕</div>
                <div style={{fontSize:11,color:'#9c8a72'}}>14:22 / 港区南青山</div>
              </div>
            </div>
            <div style={{
              position:'absolute', right:-20, top:24, background:'#fff',
              padding:'12px 16px', borderRadius:16, boxShadow:'0 18px 48px rgba(80,50,0,.10)',
              fontSize:13, display:'flex',alignItems:'center',gap:10,
            }}>
              <span style={{color:'var(--c-primary-deep)'}}><Icons.Star size={16}/></span>
              <div>
                <div style={{fontWeight:600,fontSize:12}}>みかさん</div>
                <div style={{fontSize:11,color:'#9c8a72'}}>「とても丁寧で安心」</div>
              </div>
            </div>
          </div>
        </section>
      )}

      {heroLayout === 'centered' && (
        <section style={{padding:`24px ${pad}px 60px`,textAlign:'center'}}>
          <Pill>🐾 全国 約3,200名のシッターが在籍</Pill>
          <h1 style={{fontSize:72,lineHeight:1.1,letterSpacing:'-.02em',fontWeight:700,margin:'20px auto 18px',maxWidth:980}}>
            うちの子のおうち、留守の日も、<br/>
            <span style={{background:'linear-gradient(180deg, transparent 62%, var(--c-primary-soft) 62%)'}}>いつも通り。</span>
          </h1>
          <p style={{fontSize:18,lineHeight:1.8,color:'#5d4d3a',maxWidth:620,margin:'0 auto 28px'}}>
            審査を通過したプロのペットシッターが、お家までおうかがい。
            お留守番じゃなく、いつもの暮らしを。
          </p>
          <div style={{display:'flex',gap:12,justifyContent:'center'}}>
            <a href="#/search" style={{background:'var(--c-primary-deep)',color:'#fff',border:'none',padding:'16px 28px',borderRadius:18,fontSize:16,fontWeight:600,cursor:'pointer',fontFamily:'inherit',textDecoration:'none',display:'inline-block'}}>シッターを探す</a>
            <a href="#/sitter-register" style={{background:'#fff',border:'1.5px solid rgba(0,0,0,.08)',padding:'16px 28px',borderRadius:18,fontSize:16,fontWeight:600,cursor:'pointer',fontFamily:'inherit',textDecoration:'none',display:'inline-block'}}>シッターとして登録</a>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18,marginTop:60}}>
            <PhotoSlot ratio="4/3" label="cat & sitter" tone="cream"/>
            <PhotoSlot ratio="4/3" label="walk in park" tone="warm"/>
            <PhotoSlot ratio="4/3" label="rabbit care" tone="sage"/>
          </div>
        </section>
      )}

      {/* TRUST STRIP */}
      <section style={{
        padding:`28px ${pad}px`, margin:`0 ${pad}px`, borderRadius: 28,
        background:'var(--c-bg-alt)',
        display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:24,
      }}>
        {[
          ['累計依頼数','128,500件+'],
          ['登録シッター','3,200名'],
          ['平均評価','★ 4.92'],
          ['対応エリア','全国 47都道府県'],
        ].map(([k,v],i)=>(
          <div key={i} style={{textAlign:'center'}}>
            <div style={{fontSize:13,color:'#7a6a55'}}>{k}</div>
            <div style={{fontSize:28,fontWeight:700,marginTop:4,letterSpacing:'-.01em'}}>{v}</div>
          </div>
        ))}
      </section>

      {/* HOW IT WORKS */}
      <section style={{padding:`100px ${pad}px 24px`}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:40}}>
          <div>
            <Pill tone="ghost">使い方</Pill>
            <h2 style={{fontSize:42,fontWeight:700,letterSpacing:'-.01em',margin:'14px 0 8px'}}>3ステップで、安心のお留守番。</h2>
          </div>
          <a style={{fontSize:14,color:'var(--c-primary-deep)'}}>詳しい流れを見る →</a>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
          {[
            ['01','条件で探す','エリア・対応ペット・料金・空き状況から、ぴったりのシッターを見つけます。',Icons.Search,'warm'],
            ['02','メッセージで相談','ご家族のこと、ペットの性格や好物まで、しっかりすり合わせ。',Icons.Msg,'peach'],
            ['03','当日、お任せ','活動中のお写真とレポートが届きます。ご帰宅まで安心。',Icons.Heart,'sage'],
          ].map(([n,t,d,Ic,tone],i)=>(
            <div key={i} style={{
              background:'#fff', borderRadius:24, padding:28,
              display:'flex',flexDirection:'column',gap:14,
              boxShadow:'0 1px 0 rgba(0,0,0,.04), 0 18px 36px rgba(80,50,0,.04)',
            }}>
              {illustrations && (
                <div style={{
                  alignSelf:'flex-start',
                  width:64,height:64,borderRadius:20,
                  background: tone==='warm'?'#FBE9B8':tone==='peach'?'#FBD9C8':'#D9ECDC',
                  color: tone==='warm'?'#C8973A':tone==='peach'?'#C77459':'#5E9C6C',
                  display:'grid',placeItems:'center',
                }}><Ic size={28} stroke={2}/></div>
              )}
              <div style={{fontFamily:'ui-monospace',fontSize:12,color:'#b0a08a'}}>{n}</div>
              <div style={{fontSize:22,fontWeight:700}}>{t}</div>
              <div style={{fontSize:14,lineHeight:1.8,color:'#6a5a45'}}>{d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* PETS */}
      <section style={{padding:`80px ${pad}px 0`}}>
        <h2 style={{fontSize:36,fontWeight:700,letterSpacing:'-.01em'}}>
          犬も猫も、うさぎも。
          <span style={{color:'#a3917a',fontWeight:400,fontSize:24,marginLeft:14}}>家族みんなにシッターを。</span>
        </h2>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18,marginTop:28}}>
          {[
            ['犬', PetGlyph.Dog, 'warm', '散歩・食事・お留守番'],
            ['猫', PetGlyph.Cat, 'cream', '訪問ケア・トイレ掃除'],
            ['うさぎ・小動物', PetGlyph.Rabbit, 'sage', '繊細なケアにも対応'],
          ].map(([n,G,t,sub],i)=>(
            <div key={i} style={{position:'relative',borderRadius:24,overflow:'hidden'}}>
              <PhotoSlot ratio="5/4" label={`${n} care`} tone={t} round={24}/>
              <div style={{
                position:'absolute',inset:'auto 18px 18px 18px',
                background:'rgba(255,255,255,.92)', borderRadius:16, padding:'12px 14px',
                display:'flex',alignItems:'center',gap:12,
              }}>
                <G size={32} color="var(--c-primary-deep)"/>
                <div>
                  <div style={{fontWeight:700}}>{n}</div>
                  <div style={{fontSize:12,color:'#7a6a55'}}>{sub}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ソプラアカデミー — シッターになりたい方へ */}
      <section style={{padding:`100px ${pad}px 0`}}>
        <div style={{
          background:'linear-gradient(135deg, #2E2418 0%, #3c2f1e 100%)',
          borderRadius:36, padding:`56px ${pad-20}px`,
          color:'#fff',
        }}>
          <div style={{display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:48,alignItems:'center'}}>
            <div>
              <div style={{
                display:'inline-flex',gap:8,alignItems:'center',
                padding:'6px 14px',borderRadius:999,fontSize:12,fontWeight:700,letterSpacing:'.04em',
                background:'rgba(255,255,255,.12)',color:'#fff',marginBottom:14,
              }}>🎓 SOPRA ACADEMY</div>
              <h2 style={{fontSize:38,fontWeight:700,letterSpacing:'-.01em',lineHeight:1.3,marginBottom:14}}>
                シッターになりたい方へ。<br/>
                <span style={{color:'var(--c-primary)'}}>資格取得から始められます。</span>
              </h2>
              <p style={{fontSize:15,lineHeight:1.9,color:'rgba(255,255,255,.78)',maxWidth:480,marginBottom:18}}>
                未経験でも大丈夫。ソプラアカデミーの<strong style={{color:'#fff'}}>「ペットシッター（初級）」</strong>講座は、
                在宅・通信制・最短2ヶ月で取得できる<strong style={{color:'#fff'}}>JPLC認定資格</strong>です。
                修了後はそのままパルペットのシッターとして登録できます。
              </p>
              <div style={{display:'flex',gap:10,flexWrap:'wrap',marginBottom:24}}>
                {['在宅で受講','最短2ヶ月','JPLC認定','副業に最適'].map(t=>(
                  <span key={t} style={{
                    fontSize:12,padding:'6px 12px',borderRadius:999,fontWeight:600,
                    background:'rgba(255,255,255,.1)',color:'#fff',
                  }}>{t}</span>
                ))}
              </div>
              <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
                <a href={(typeof window !== 'undefined' && window.SOPRA_ACADEMY?.url) || '#'}
                   target="_blank" rel="noopener"
                   style={{
                     background:'var(--c-primary)',color:'#fff',border:'none',
                     padding:'16px 26px',borderRadius:16,fontSize:15,fontWeight:700,
                     textDecoration:'none',display:'inline-flex',gap:6,alignItems:'center',
                   }}>講座詳細を見る ↗</a>
                <button style={{
                  background:'transparent',color:'#fff',border:'1.5px solid rgba(255,255,255,.3)',
                  padding:'16px 26px',borderRadius:16,fontSize:15,fontWeight:700,cursor:'pointer',
                  fontFamily:'inherit',
                }}>資料を請求する</button>
              </div>
            </div>

            <div style={{
              background:'#fff',color:'#3c2f1e',borderRadius:24,padding:'24px 24px',
            }}>
              <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,letterSpacing:'.04em',marginBottom:14}}>
                受講料（JPLC認定資格）
              </div>
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                {(typeof window !== 'undefined' && window.SOPRA_ACADEMY?.courses || []).map((c,i)=>(
                  <div key={c.key} style={{
                    padding:'14px 14px',borderRadius:12,
                    background: c.badge ? 'var(--c-primary-soft)' : 'var(--c-bg)',
                    border: c.badge ? '1.5px solid var(--c-primary)' : '1px solid rgba(0,0,0,.04)',
                    position:'relative',
                  }}>
                    {c.badge && (
                      <span style={{
                        position:'absolute',top:-8,right:12,
                        fontSize:10,padding:'2px 9px',borderRadius:999,fontWeight:700,
                        background:'var(--c-primary-deep)',color:'#fff',
                      }}>{c.badge}</span>
                    )}
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:4}}>
                      <strong style={{fontSize:14}}>{c.name}</strong>
                      <span style={{fontSize:17,fontWeight:700,fontVariantNumeric:'tabular-nums'}}>
                        ¥{c.price.toLocaleString()}<span style={{fontSize:10,color:'#9c8a72',marginLeft:2,fontWeight:500}}>税込</span>
                      </span>
                    </div>
                    <div style={{fontSize:11,color:'#7a6a55',lineHeight:1.5}}>{c.desc}</div>
                  </div>
                ))}
              </div>
              <div style={{fontSize:11,color:'#7a6a55',marginTop:14,lineHeight:1.7,textAlign:'center'}}>
                修了後パルペット登録で<strong>登録料無料</strong>の特典あり
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SOPRA 19年の信頼 */}
      <section style={{padding:`100px ${pad}px 0`}}>
        <div style={{
          background:'#fff', borderRadius:36,
          padding:`48px ${pad-20}px`,
          border:'1px solid rgba(0,0,0,.05)',
          display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48, alignItems:'center',
        }}>
          <div>
            <Pill tone="white">運営会社</Pill>
            <h2 style={{fontSize:38,fontWeight:700,margin:'14px 0 12px',lineHeight:1.3}}>
              19年のペットケア実績。<br/>
              <span style={{color:'var(--c-primary-deep)'}}>ソプラ銀座が運営しています。</span>
            </h2>
            <p style={{fontSize:15,lineHeight:1.9,color:'#5d4d3a',maxWidth:480}}>
              トリミング・ペットホテル・犬の幼稚園・出張トリミング — 銀座本店から始まった
              ペットケアサービスは、創業から19年。
              現場で培ったノウハウと、厳しい採用基準でシッター品質を担保しているため、
              <strong style={{color:'#3c2f1e'}}>パルペットの料金は全シッター統一</strong>です。
            </p>
            <div style={{display:'flex',gap:10,marginTop:18,flexWrap:'wrap'}}>
              <Pill tone="soft">創業 2008年</Pill>
              <Pill tone="soft">動物取扱業 第24東京都保第008449号</Pill>
              <Pill tone="soft">最大1,000万円ペット保険</Pill>
            </div>
          </div>

          <div style={{
            background:'linear-gradient(135deg, var(--c-primary-soft), var(--c-bg-alt))',
            borderRadius:24,padding:'28px 28px',
          }}>
            <div style={{fontSize:11,color:'var(--c-primary-deep)',fontWeight:700,letterSpacing:'.04em',marginBottom:6}}>
              全シッター 統一料金
            </div>
            <div style={{fontSize:18,fontWeight:700,marginBottom:14}}>
              基本ペットシッタープラン
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {(typeof window !== 'undefined' && window.PALPET_PRICING?.plans?.standard?.tiers || []).map((tier)=>{
                const label = `${tier.minutes}分`;
                return (
                  <div key={tier.minutes} style={{
                    display:'flex',justifyContent:'space-between',alignItems:'baseline',
                    padding:'8px 14px',background:'#fff',borderRadius:10,
                  }}>
                    <span style={{fontSize:13,color:'#5d4d3a'}}>{label}</span>
                    <span style={{fontSize:17,fontWeight:700,fontVariantNumeric:'tabular-nums'}}>
                      ¥{tier.price.toLocaleString()}<span style={{fontSize:10,color:'#9c8a72',marginLeft:2,fontWeight:500}}>税込</span>
                    </span>
                  </div>
                );
              })}
              <div style={{
                display:'flex',justifyContent:'space-between',alignItems:'baseline',
                padding:'6px 14px',fontSize:12,color:'#7a6a55',
              }}>
                <span>延長 30分毎</span>
                <span>+ ¥3,000</span>
              </div>
            </div>
            <div style={{
              display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginTop:12,
            }}>
              <div style={{padding:'10px',background:'#fff',borderRadius:10,fontSize:12,textAlign:'center'}}>
                <div style={{color:'#9c8a72'}}>ロングプラン</div>
                <div style={{fontWeight:700,marginTop:2}}>6時間 ¥33,000〜</div>
              </div>
              <div style={{padding:'10px',background:'#fff',borderRadius:10,fontSize:12,textAlign:'center'}}>
                <div style={{color:'#9c8a72'}}>初回カウンセリング</div>
                <div style={{fontWeight:700,marginTop:2}}>30分 ¥2,000</div>
              </div>
            </div>
            <div style={{fontSize:11,color:'#7a6a55',marginTop:12,lineHeight:1.7}}>
              ※ 表示価格は税込・<strong>別途交通費</strong>（同区内 ¥500目安）。
              旅行モード（連続日）・1日2回（朝晩）にも対応。
              <a style={{color:'var(--c-primary-deep)',textDecoration:'underline',marginLeft:4}}>料金表すべて見る →</a>
            </div>
          </div>
        </div>
      </section>

      {/* SAFETY */}
      <section style={{padding:`100px ${pad}px 0`}}>
        <div style={{
          background:'linear-gradient(135deg, var(--c-primary-soft), var(--c-bg-alt))',
          borderRadius:36, padding:`56px ${pad}px`,
          display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,alignItems:'center',
        }}>
          <div>
            <Pill>あんしんの取り組み</Pill>
            <h2 style={{fontSize:38,fontWeight:700,margin:'14px 0 12px'}}>4つの審査と<br/>ペット保険、込みで。</h2>
            <p style={{fontSize:15,lineHeight:1.9,color:'#5d4d3a',maxWidth:440}}>
              登録には本人確認・適性検査・実技審査・反社チェックを設けています。
              施術中の事故も、最大1,000万円のペット保険でカバー。
            </p>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            {[
              ['本人確認','政府発行のID提出'],
              ['適性検査','ペット行動学テスト'],
              ['実技審査','現役獣医師が確認'],
              ['保険適用','最大1,000万円'],
            ].map(([t,s],i)=>(
              <div key={i} style={{background:'#fff',borderRadius:18,padding:'18px 18px'}}>
                <div style={{
                  width:34,height:34,borderRadius:10,background:'var(--c-primary-soft)',
                  color:'var(--c-primary-deep)',display:'grid',placeItems:'center',marginBottom:10,
                }}><Icons.Shield size={18}/></div>
                <div style={{fontWeight:700,fontSize:15}}>{t}</div>
                <div style={{fontSize:12,color:'#7a6a55',marginTop:2}}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIAL */}
      <section style={{padding:`100px ${pad}px 0`}}>
        <h2 style={{fontSize:36,fontWeight:700,marginBottom:32}}>うちの子も、わたしも、ホッとできた話。</h2>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:22}}>
          {[
            ['結婚式の3日間、心から楽しめました。','大谷 さくらさん','チワワのモカちゃん'],
            ['出張のたびに同じシッターさんに来てもらえる安心感。','森 拓郎さん','保護猫のたまちゃん'],
            ['うさぎのお世話、苦手な人が多くて諦めていたのに。','宮本 玲奈さん','ホーランドロップのうーちゃん'],
          ].map(([q,n,p],i)=>(
            <div key={i} style={{background:'#fff',borderRadius:22,padding:24,display:'flex',flexDirection:'column',gap:18}}>
              <div style={{color:'var(--c-primary)',display:'flex',gap:2}}>
                {[...Array(5)].map((_,k)=><Icons.Star key={k} size={16}/>)}
              </div>
              <div style={{fontSize:17,lineHeight:1.7,fontWeight:500}}>“{q}”</div>
              <div style={{display:'flex',gap:10,alignItems:'center',marginTop:'auto'}}>
                <div style={{width:38,height:38,borderRadius:'50%',background:'var(--c-primary-soft)'}}/>
                <div>
                  <div style={{fontSize:13,fontWeight:600}}>{n}</div>
                  <div style={{fontSize:11,color:'#9c8a72'}}>{p}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{padding:`110px ${pad}px 0`}}>
        <div style={{
          background:'var(--c-primary-deep)', color:'#fff',
          borderRadius:36, padding:'64px 56px',
          display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:32,alignItems:'center',
        }}>
          <div>
            <h2 style={{fontSize:42,fontWeight:700,letterSpacing:'-.01em',lineHeight:1.2}}>
              次のお出かけまでに、<br/>
              <span style={{color:'var(--c-primary-soft)'}}>シッターを見つけよう。</span>
            </h2>
            <p style={{fontSize:16,marginTop:16,opacity:.86,maxWidth:420,lineHeight:1.7}}>
              はじめての方は会員登録から。1分で完了します。
            </p>
          </div>
          <div style={{display:'flex',gap:12,justifyContent:'flex-end',flexWrap:'wrap'}}>
            <a href="#/search" style={{background:'#fff',color:'var(--c-primary-deep)',border:'none',padding:'18px 28px',borderRadius:18,fontSize:16,fontWeight:700,cursor:'pointer',fontFamily:'inherit',textDecoration:'none',display:'inline-block'}}>シッターを探す</a>
            <a href="#/sitter-register" style={{background:'transparent',color:'#fff',border:'1.5px solid rgba(255,255,255,.4)',padding:'18px 28px',borderRadius:18,fontSize:16,fontWeight:700,cursor:'pointer',fontFamily:'inherit',textDecoration:'none',display:'inline-block'}}>シッターとして登録</a>
          </div>
        </div>
      </section>

      {/* FOOTER — 運営会社情報＋管理画面リンク */}
      <PalpetFooter pad={pad}/>
    </div>
  );
}

window.LandingA = LandingA;