// Main app — Hash router for the live site + Design Canvas at #/canvas

const { useState, useEffect } = React;

// ===== ハッシュルータ =====
// 利用方法：<a href="#/search"> または location.hash = '#/search'
// パスを取得：getRoute() → 'search' / 'sitter-register' / ...

function getRoute() {
  const h = (window.location.hash || '').replace(/^#\/?/, '');
  return h.split('?')[0].replace(/\/$/, '');
}

function navigate(path) {
  // 先頭 / は省略可
  const p = path.replace(/^\/?/, '');
  window.location.hash = '#/' + p;
  window.scrollTo({top:0, behavior:'instant'});
}

// グローバルにエクスポート（他コンポーネントから navigate('search') と呼べる）
window.palpetNavigate = navigate;
window.palpetGetRoute = getRoute;

// 各画面の最小ラッパー（既存コンポーネントはそのまま使う）
function Page({ children }) {
  return <div style={{minHeight:'100vh', background:'var(--c-bg)'}}>{children}</div>;
}

// ===== 画面定義 =====
const ROUTES = {
  '':                () => <Page><LandingA heroLayout="split" illustrations={true} density="cozy"/></Page>,
  'landing-b':       () => <Page><LandingB density="cozy" illustrations={true}/></Page>,
  'search':          () => <Page><SearchPage initialMode="list"/></Page>,
  'search/detail':   () => <Page><SearchPage initialMode="detail"/></Page>,
  'sitter-register': () => <Page><SitterRegister initialStep={0}/></Page>,
  'owner-register':  () => <Page><OwnerRegister initialStep={0}/></Page>,
  'booking':         () => <Page><BookingConfirm/></Page>,
  'booking/complete':() => <Page><BookingComplete/></Page>,
  'mypage':          () => <Page><MyBookings initialTab="overview"/></Page>,
  'mypage/history':  () => <Page><MyBookings initialTab="history"/></Page>,
  'mypage/counseling':()=> <Page><MyBookings initialTab="counseling"/></Page>,
  'mypage/reviews':  () => <Page><MyBookings initialTab="reviews"/></Page>,
  'mypage-sitter':   () => <Page><SitterMypage initialTab="home"/></Page>,
  'mypage-sitter/requests':  () => <Page><SitterMypage initialTab="requests"/></Page>,
  'mypage-sitter/schedule':  () => <Page><SitterMypage initialTab="schedule"/></Page>,
  'mypage-sitter/clients':   () => <Page><SitterMypage initialTab="clients"/></Page>,
  'mypage-sitter/earnings':  () => <Page><SitterMypage initialTab="earnings"/></Page>,
  'login':           () => <Page><LoginPage/></Page>,
  'messages':        () => <Page><MessagesPage mode="thread"/></Page>,
  'company':         () => <Page><CompanyInfo/></Page>,
  'privacy':         () => <Page><PrivacyPolicy/></Page>,
  'terms':           () => <Page><Terms/></Page>,
  'law':             () => <Page><Tokushou/></Page>,
};

// ===== ルートアプリ =====
function App() {
  const TWEAKS = /*EDITMODE-BEGIN*/{
    "direction": "A",
    "palette": "palpet",
    "fontJP": "maru",
    "heroLayout": "split",
    "cardDensity": "cozy",
    "illustrations": true
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAKS);
  const [route, setRoute] = useState(getRoute());

  // テーマ適用
  useEffect(() => {
    applyPalpetTheme(document.documentElement, t);
  }, [t.palette, t.fontJP, t.cardDensity]);

  // hashchange を監視してルート更新
  useEffect(() => {
    const onHash = () => setRoute(getRoute());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // デザインキャンバスは別物として扱う
  if (route === 'canvas') {
    return <DesignCanvasView t={t} setTweak={setTweak}/>;
  }

  // 通常ルート
  const renderer = ROUTES[route] || ROUTES[''];
  return (
    <>
      {renderer()}
      {/* ?honbu モード（または ?dev）のときだけ運営/プレビュー用ナビ */}
      {(() => {
        try {
          const params = new URLSearchParams(window.location.search);
          if (params.get('dev') === '1' || params.get('honbu') !== null ||
              (typeof localStorage !== 'undefined' && localStorage.getItem('palpet_ops_mode') === '1')) {
            return <DevNav route={route}/>;
          }
        } catch (e) {}
        return null;
      })()}
    </>
  );
}

// ===== 開発用ミニナビ（右下フローティング） =====
function DevNav({ route }) {
  const [open, setOpen] = useState(false);
  const items = [
    ['', 'トップ（ランディングA）'],
    ['landing-b', 'ランディングB'],
    ['search', 'シッターを探す'],
    ['search/detail', '└ シッター詳細'],
    ['owner-register', '飼い主登録'],
    ['sitter-register', 'シッター登録'],
    ['booking', '予約確定'],
    ['booking/complete', '└ 予約送信完了'],
    ['mypage', '飼い主マイページ'],
    ['mypage/history', '└ 予約履歴'],
    ['mypage/counseling', '└ 初回カウンセリング'],
    ['mypage/reviews', '└ レビュー'],
    ['mypage-sitter', 'シッターマイページ'],
    ['mypage-sitter/requests', '└ 依頼受付'],
    ['mypage-sitter/schedule', '└ スケジュール'],
    ['mypage-sitter/clients', '└ 顧客一覧'],
    ['mypage-sitter/earnings', '└ 報酬・支払い'],
    ['messages', 'メッセージ'],
    ['company', '運営会社情報'],
    ['law', '特定商取引法'],
    ['privacy', 'プライバシーポリシー'],
    ['terms', '利用規約'],
    ['canvas', '🎨 デザインキャンバス（全画面プレビュー）'],
  ];
  return (
    <div style={{
      position:'fixed', right:16, bottom:16, zIndex:9999,
      fontFamily:'var(--font-jp)',
    }}>
      <button onClick={()=>setOpen(o=>!o)} style={{
        background:'#2E2418', color:'#fff', border:'none',
        padding:'10px 16px', borderRadius:999, cursor:'pointer',
        fontFamily:'inherit', fontSize:12, fontWeight:700,
        boxShadow:'0 6px 24px rgba(0,0,0,.18)',
        display:'inline-flex', gap:8, alignItems:'center',
      }}>
        <span>📋</span> {open ? '閉じる' : '画面ナビ'}
      </button>
      {open && (
        <div style={{
          position:'absolute', right:0, bottom:'calc(100% + 8px)',
          width:280, maxHeight:'70vh', overflowY:'auto',
          background:'#fff', borderRadius:14,
          boxShadow:'0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06)',
          padding:'8px 4px',
        }}>
          <div style={{
            padding:'8px 14px 12px',fontSize:10,color:'#9c8a72',
            fontWeight:700,letterSpacing:'.06em',
          }}>運営用 画面ナビ</div>
          {items.map(([path,label]) => {
            const active = path === route;
            return (
              <a key={path}
                 href={'#/'+path}
                 onClick={()=>{ setTimeout(()=>setOpen(false),100); }}
                 style={{
                   display:'block',padding:'8px 14px',
                   fontSize:13,color:active?'var(--c-primary-deep)':'#3c2f1e',
                   background:active?'var(--c-primary-soft)':'transparent',
                   borderRadius:8, textDecoration:'none',
                   fontWeight:active?700:500,
                 }}>{label}</a>
            );
          })}
          <div style={{
            padding:'10px 14px 6px',marginTop:6,
            borderTop:'1px solid rgba(0,0,0,.06)',
            fontSize:10,color:'#9c8a72',lineHeight:1.6,
          }}>
            ※ 運営スタッフ用の全画面ナビ。<br/>
            一般ユーザーには表示されません。
          </div>
        </div>
      )}
    </div>
  );
}

// ===== デザインキャンバス（既存のレビュー用画面） =====
function DesignCanvasView({ t, setTweak }) {
  return (
    <>
      <DesignCanvas>
        <DCSection id="brand" title="ブランド / デザインシステム" subtitle="ロゴ、配色、タイポグラフィ、設計の基本方針">
          <DCArtboard id="brand-overview" label="01 · ブランド" width={1100} height={620}>
            <BrandOverview t={t}/>
          </DCArtboard>
          <DCArtboard id="palette" label="02 · パレット" width={560} height={620}>
            <PaletteBoard/>
          </DCArtboard>
        </DCSection>

        <DCSection id="landing" title="ランディングページ" subtitle="2方向性 × デスクトップ / モバイル">
          <DCArtboard id="lp-a-dt" label="A · Editorial Warm + ソプラアカデミー導線" width={1280} height={4900}>
            <LandingA heroLayout={t.heroLayout} illustrations={t.illustrations} density={t.cardDensity}/>
          </DCArtboard>
          <DCArtboard id="lp-a-mb" label="A · Mobile" width={390} height={1800}>
            <MobileLanding direction="A"/>
          </DCArtboard>
          <DCArtboard id="lp-b-dt" label="B · Playful Card · Desktop" width={1280} height={2400}>
            <LandingB density={t.cardDensity} illustrations={t.illustrations}/>
          </DCArtboard>
          <DCArtboard id="lp-b-mb" label="B · Mobile" width={390} height={1800}>
            <MobileLanding direction="B"/>
          </DCArtboard>
        </DCSection>

        <DCSection id="register" title="シッター登録オンボーディング" subtitle="7ステップ・本人確認まで含めた登録フロー">
          <DCArtboard id="reg-step1" label="登録 · STEP 01 基本情報＋駅" width={1400} height={1400}>
            <SitterRegister initialStep={0}/>
          </DCArtboard>
          <DCArtboard id="reg-step2" label="登録 · STEP 02 対応ペット" width={1400} height={920}>
            <SitterRegister initialStep={1}/>
          </DCArtboard>
          <DCArtboard id="reg-step3" label="登録 · STEP 03 経験・資格＋動物取扱責任者" width={1400} height={1500}>
            <SitterRegister initialStep={2}/>
          </DCArtboard>
          <DCArtboard id="reg-step5" label="登録 · STEP 05 料金・空き" width={1400} height={920}>
            <SitterRegister initialStep={4}/>
          </DCArtboard>
          <DCArtboard id="reg-step7" label="登録 · STEP 07 本人確認" width={1400} height={920}>
            <SitterRegister initialStep={6}/>
          </DCArtboard>
          <DCArtboard id="reg-mb" label="登録 · Mobile" width={390} height={900}>
            <MobileRegister/>
          </DCArtboard>
        </DCSection>

        <DCSection id="mypage" title="飼い主マイページ" subtitle="予約履歴・再予約・初回カウンセリング・レビュー投稿を集約">
          <DCArtboard id="my-overview" label="飼い主 · ホーム" width={1400} height={1200}>
            <MyBookings initialTab="overview"/>
          </DCArtboard>
          <DCArtboard id="my-history" label="予約履歴 · 同条件で再予約" width={1400} height={1100}>
            <MyBookings initialTab="history"/>
          </DCArtboard>
          <DCArtboard id="my-counseling" label="初回カウンセリング予約（無料・30分）" width={1400} height={1200}>
            <MyBookings initialTab="counseling"/>
          </DCArtboard>
          <DCArtboard id="my-reviews" label="レビュー · 未投稿/投稿済" width={1400} height={920}>
            <MyBookings initialTab="reviews"/>
          </DCArtboard>
        </DCSection>

        <DCSection id="sitter-mypage" title="シッターマイページ" subtitle="本日のスケジュール・依頼受付・カレンダー・顧客・報酬を集約">
          <DCArtboard id="sm-home" label="シッター · ホーム" width={1400} height={1100}>
            <SitterMypage initialTab="home"/>
          </DCArtboard>
          <DCArtboard id="sm-requests" label="シッター · 依頼受付（承諾/辞退）" width={1400} height={1000}>
            <SitterMypage initialTab="requests"/>
          </DCArtboard>
          <DCArtboard id="sm-schedule" label="シッター · スケジュール（カレンダー＋空き設定）" width={1400} height={900}>
            <SitterMypage initialTab="schedule"/>
          </DCArtboard>
          <DCArtboard id="sm-clients" label="シッター · 顧客一覧" width={1400} height={900}>
            <SitterMypage initialTab="clients"/>
          </DCArtboard>
          <DCArtboard id="sm-earnings" label="シッター · 報酬・支払い" width={1400} height={1000}>
            <SitterMypage initialTab="earnings"/>
          </DCArtboard>
        </DCSection>

        <DCSection id="search" title="マッチング検索" subtitle="飼い主が条件で探し、シッターを選ぶフロー">
          <DCArtboard id="search-list" label="検索 · 一覧" width={1400} height={920}>
            <SearchPage initialMode="list"/>
          </DCArtboard>
          <DCArtboard id="search-detail" label="検索 · 詳細表示" width={1400} height={920}>
            <SearchPage initialMode="detail"/>
          </DCArtboard>
          <DCArtboard id="search-mb" label="検索 · Mobile" width={390} height={900}>
            <MobileSearch/>
          </DCArtboard>
        </DCSection>

        <DCSection id="owner" title="飼い主オンボーディング" subtitle="初回登録 — ペットのことを教えてもらうフロー">
          <DCArtboard id="own-step1" label="飼い主登録 · STEP 01 ようこそ" width={1400} height={920}>
            <OwnerRegister initialStep={0}/>
          </DCArtboard>
          <DCArtboard id="own-step2" label="飼い主登録 · STEP 02 ペット情報" width={1400} height={920}>
            <OwnerRegister initialStep={1}/>
          </DCArtboard>
          <DCArtboard id="own-step3" label="飼い主登録 · STEP 03 性格・健康" width={1400} height={920}>
            <OwnerRegister initialStep={2}/>
          </DCArtboard>
          <DCArtboard id="own-step5" label="飼い主登録 · STEP 05 お留守番の希望" width={1400} height={920}>
            <OwnerRegister initialStep={4}/>
          </DCArtboard>
        </DCSection>

        <DCSection id="booking" title="予約確定" subtitle="シッターへの依頼内容を確認し、支払いを設定して送信するフロー">
          <DCArtboard id="bk-review" label="予約 · プラン＋期間（旅行モード）＋朝晩2回＋交通費" width={1400} height={2900}>
            <BookingConfirm/>
          </DCArtboard>
          <DCArtboard id="bk-done" label="予約 · 送信完了" width={1400} height={920}>
            <BookingComplete/>
          </DCArtboard>
        </DCSection>

        <DCSection id="messages" title="メッセージ / 活動レポート" subtitle="シッターと飼い主のチャット — 訪問中はリアルタイムのレポートが届く">
          <DCArtboard id="msg-thread" label="メッセージ · 訪問中" width={1400} height={920}>
            <MessagesPage mode="thread"/>
          </DCArtboard>
        </DCSection>

        <DCSection id="legal" title="規約・運営情報" subtitle="フッターの「運営会社／特定商取引法／利用規約／プライバシーポリシー」リンクから遷移するページ">
          <DCArtboard id="legal-company" label="運営会社情報" width={1280} height={1100}>
            <CompanyInfo/>
          </DCArtboard>
          <DCArtboard id="legal-tokushou" label="特定商取引法に基づく表記" width={1280} height={1500}>
            <Tokushou/>
          </DCArtboard>
          <DCArtboard id="legal-privacy" label="プライバシーポリシー（sopraginza.com 転記）" width={1280} height={1400}>
            <PrivacyPolicy/>
          </DCArtboard>
          <DCArtboard id="legal-terms" label="利用規約" width={1280} height={1900}>
            <Terms/>
          </DCArtboard>
        </DCSection>

        <DCPostIt top={20} left={40} width={280} rotate={-2}>
          <strong>パルペット リニューアル案</strong><br/>
          3つのコア体験（LP / シッター登録 / マッチング検索）を再設計しました。<br/>
          A案 = 編集的で落ち着いた印象、B案 = 親しみと活発さ。右下のTweaksで配色やレイアウトを切り替えられます。
        </DCPostIt>
      </DesignCanvas>

      <TweaksPanel title="Tweaks · パルペット">
        <TweakSection label="ビジュアル">
          <TweakSelect label="カラーパレット" value={t.palette} onChange={v=>setTweak('palette',v)}
            options={[
              {value:'palpet', label:'palpet（ブランド・桜色）'},
              {value:'sunbutter', label:'sunbutter（やわらか黄色）'},
              {value:'sage', label:'sage（若葉グリーン）'},
              {value:'cocoa', label:'cocoa（落ち着いた焦茶）'},
            ]}/>
          <TweakSelect label="日本語フォント" value={t.fontJP} onChange={v=>setTweak('fontJP',v)}
            options={[
              {value:'maru', label:'Zen Maru Gothic（丸み）'},
              {value:'mincho', label:'Shippori Mincho（明朝）'},
              {value:'sans', label:'Noto Sans JP（標準）'},
            ]}/>
          <TweakToggle label="イラスト・グリフ" value={t.illustrations} onChange={v=>setTweak('illustrations',v)}/>
        </TweakSection>

        <TweakSection label="レイアウト">
          <TweakRadio label="A案ヒーロー" value={t.heroLayout} onChange={v=>setTweak('heroLayout',v)}
            options={[{value:'split', label:'分割'},{value:'centered', label:'中央'}]}/>
          <TweakRadio label="カード密度" value={t.cardDensity} onChange={v=>setTweak('cardDensity',v)}
            options={[{value:'cozy', label:'ゆったり'},{value:'compact', label:'コンパクト'}]}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// -------------- Brand overview board --------------
function BrandOverview({t}) {
  return (
    <div style={{
      width:'100%',height:'100%',background:'#FDF7F6',
      padding:'48px 56px',fontFamily:'var(--font-jp)',color:'#3c2f1e',
      display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,
    }}>
      <div>
        <div style={{fontSize:12,color:'#9c8a72',fontWeight:600,letterSpacing:'.04em'}}>BRAND</div>
        <img src="assets/logo-horizontal.png" alt="palpet" style={{height:120,margin:'18px 0',display:'block'}}/>
        <h2 style={{fontSize:30,fontWeight:700,letterSpacing:'-.01em',marginBottom:12,lineHeight:1.3}}>
          暮らしに寄り添う、<br/>ペットシッター。
        </h2>
        <p style={{fontSize:14,lineHeight:1.9,color:'#5d4d3a',maxWidth:380}}>
          一筆書きの肉球と中央のハートが、ロゴの核。「やさしさ」「つながり」「家族としての温度」が同居しています。
          リニューアル全体でその核 — <strong>柔らかさ・親しみ・安心</strong> — をデジタル体験に翻訳しました。
        </p>
        <div style={{display:'flex',gap:8,marginTop:18}}>
          <Tag>柔らかいピンク</Tag>
          <Tag>丸みのある書体</Tag>
          <Tag>余白を活かす</Tag>
          <Tag>等身大の写真</Tag>
        </div>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:14}}>
        <div style={{
          background:'#fff',borderRadius:20,padding:'22px 24px',border:'1px solid rgba(0,0,0,.05)',
        }}>
          <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,letterSpacing:'.04em',marginBottom:10}}>VOICE</div>
          <div style={{fontFamily:t.fontJP==='mincho'?"'Shippori Mincho',serif":'inherit',fontSize:22,lineHeight:1.6,fontWeight:600}}>
            「うちの子のおうち、留守の日も、いつも通り。」
          </div>
          <div style={{fontSize:12,color:'#7a6a55',marginTop:8,lineHeight:1.7}}>
            敬語は使わず、丁寧でやさしいトーン。利用者の不安に寄り添う一人称で。
          </div>
        </div>
        <div style={{
          background:'#fff',borderRadius:20,padding:'22px 24px',border:'1px solid rgba(0,0,0,.05)',
          display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,
        }}>
          <div>
            <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,marginBottom:6}}>TYPE</div>
            <div style={{fontFamily:"'Zen Maru Gothic',sans-serif",fontSize:24,fontWeight:700}}>あおぞら</div>
            <div style={{fontSize:11,color:'#7a6a55',marginTop:2}}>Zen Maru Gothic / 見出し</div>
          </div>
          <div>
            <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,marginBottom:6}}>TYPE</div>
            <div style={{fontFamily:"'Noto Sans JP',sans-serif",fontSize:13,lineHeight:1.8}}>本文はNoto Sans JP。<br/>無理なく読み続けられる字面に。</div>
          </div>
        </div>
        <div style={{
          background:'#fff',borderRadius:20,padding:'22px 24px',border:'1px solid rgba(0,0,0,.05)',
        }}>
          <div style={{fontSize:11,color:'#9c8a72',fontWeight:700,marginBottom:10}}>PRINCIPLES</div>
          <ol style={{margin:0,paddingLeft:18,fontSize:13,lineHeight:1.9,color:'#3c2f1e'}}>
            <li>不安を取り除く：審査と保険を、最初に伝える。</li>
            <li>その子のため：ペット側の視点で言葉を選ぶ。</li>
            <li>余白を惜しまない：情報密度より、呼吸を優先。</li>
          </ol>
        </div>
      </div>
    </div>
  );
}

const Tag = ({children}) => (
  <span style={{
    padding:'5px 11px',borderRadius:999,background:'#FBDDE0',color:'#D87883',
    fontSize:12,fontWeight:600,
  }}>{children}</span>
);

// -------------- Palette board --------------
function PaletteBoard() {
  const palettes = [
    ['palpet (Brand)', ['#F4A0A8','#FBDDE0','#D87883','#FDF7F6','#F8E8E8']],
    ['sunbutter',     ['#F1C76C','#FBE9B8','#C8973A','#FDF8EE','#F6EEDD']],
    ['sage',          ['#9BCFA4','#D9ECDC','#5E9C6C','#F4F8F2','#E5EFE3']],
    ['cocoa',         ['#C49B7A','#EBD9C5','#8B6240','#FAF5EE','#EFE3D2']],
  ];
  return (
    <div style={{
      width:'100%',height:'100%',background:'#FDF7F6',
      padding:'40px 36px',fontFamily:'var(--font-jp)',color:'#3c2f1e',
    }}>
      <div style={{fontSize:12,color:'#9c8a72',fontWeight:600,letterSpacing:'.04em',marginBottom:6}}>COLOR</div>
      <h2 style={{fontSize:24,fontWeight:700,marginBottom:18,letterSpacing:'-.01em'}}>パレット</h2>
      <div style={{display:'flex',flexDirection:'column',gap:14}}>
        {palettes.map(([name, colors])=>(
          <div key={name}>
            <div style={{fontSize:12,color:'#7a6a55',marginBottom:6,fontWeight:600}}>{name}</div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:6}}>
              {colors.map((c,i)=>(
                <div key={i} style={{
                  height:84,borderRadius:14,background:c,
                  display:'flex',alignItems:'flex-end',padding:8,
                  fontFamily:'ui-monospace',fontSize:10,
                  color: i<3?'#fff':'#7a6a55',
                  border: i>=3 ? '1px solid rgba(0,0,0,.06)' : 'none',
                }}>{c}</div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);