// Section 3 public pages: Host Profile, About, Privacy, EmptyStates, NotFound

// === 3.4 主揪公開 Profile ===
const HostProfilePage = ({ onNav }) => {
  const c = useTokens();
  const isMobile = useIsMobile();
  const D = window.HAOLIN_DATA;
  const h = D.hostProfile;
  const myGroups = h.myGroups.map(id => D.groups.find(g => g.id === id)).filter(Boolean);
  const myArticles = h.relatedArticles.map(id => D.articles.find(a => a.id === id)).filter(Boolean);

  return (
    <div style={{background:c.bg}}>
      {/* Banner */}
      <div style={{position:'relative', height: isMobile ? 160 : 280, background:`linear-gradient(135deg, ${c.primarySoft}, ${c.accentSoft})`, overflow:'hidden'}}>
        <svg viewBox="0 0 1400 280" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{position:'absolute', inset:0}}>
          <circle cx="200" cy="80" r="120" fill={c.primary} opacity="0.15"/>
          <circle cx="1200" cy="220" r="160" fill={c.accent} opacity="0.18"/>
          <path d="M0,220 Q350,140 700,220 T1400,220 L1400,280 L0,280 Z" fill={c.warm} opacity="0.4"/>
          <circle cx="900" cy="60" r="50" fill={c.gold} opacity="0.25"/>
        </svg>
      </div>

      <div style={{maxWidth:980, margin:'0 auto', padding: isMobile ? '0 16px' : '0 32px'}}>
        {/* Avatar overlay + header */}
        <div style={{
          marginTop: isMobile ? -50 : -64,
          display:'flex',
          flexDirection: isMobile ? 'column' : 'row',
          gap: isMobile ? 14 : 24,
          alignItems: isMobile ? 'flex-start' : 'flex-end',
          marginBottom: isMobile ? 24 : 32,
        }}>
          <div style={{width: isMobile ? 100 : 140, height: isMobile ? 100 : 140, borderRadius:'50%', overflow:'hidden', border:`6px solid ${c.bg}`, boxShadow:'0 8px 24px rgba(80,50,25,0.15)', background:c.paper, flexShrink:0}}>
            <AvatarGeo size={isMobile ? 88 : 128} seed={h.avatarSeed}/>
          </div>
          <div style={{flex:1, paddingBottom: isMobile ? 0 : 12, width:'100%'}}>
            <div style={{fontSize:13, color:c.primary, fontWeight:600, letterSpacing:'0.08em', marginBottom:6}}>好鄰居 · 育兒共學</div>
            <h1 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 26 : 38, color:c.ink, margin:'0 0 10px', fontWeight:500, lineHeight:1.3}}>{h.name}</h1>
            <p style={{fontSize: isMobile ? 14 : 15, color:c.inkSoft, margin:'0 0 14px', lineHeight:1.7, maxWidth:560}}>{h.tagline}</p>
            <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
              {h.tags.map(t => (
                <span key={t} style={{fontSize:12, padding:'4px 12px', background:c.paper, border:`1px solid ${c.line}`, color:c.inkSoft, borderRadius:999}}>{t}</span>
              ))}
            </div>
          </div>
        </div>

        {/* Quick stats */}
        <div style={{display:'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap:0, marginBottom: isMobile ? 40 : 56, background:c.paper, border:`1px solid ${c.line}`, borderRadius:'var(--hl-radius-xl)', overflow:'hidden'}}>
          {[['好鄰居團', h.stats.groups+' 個'], ['辦過活動', h.stats.events+' 場'], ['走了多久', h.stats.years+' 年'], ['團員', h.stats.members+' 位']].map(([l,v], i) => {
            const isLastCol = isMobile ? (i % 2 === 1) : (i === 3);
            const isLastRow = isMobile ? (i >= 2) : true;
            return (
            <div key={l} style={{
              padding: isMobile ? '16px 14px' : '22px 24px',
              borderRight: !isLastCol ? `1px solid ${c.line}` : 'none',
              borderBottom: isMobile && !isLastRow ? `1px solid ${c.line}` : 'none',
              textAlign:'center',
            }}>
              <div style={{fontSize:12, color:c.inkMuted, marginBottom:6}}>{l}</div>
              <div style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 20 : 26, color:c.ink, fontWeight:500}}>{v}</div>
            </div>
            );
          })}
        </div>

        {/* Story */}
        <section style={{marginBottom: isMobile ? 48 : 72}}>
          <div style={{fontSize:13, color:c.primary, fontWeight:600, letterSpacing:'0.1em', marginBottom:8}}>我為什麼想成為好鄰居</div>
          <h2 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 22 : 32, color:c.ink, margin: isMobile ? '0 0 24px' : '0 0 40px', fontWeight:500, lineHeight:1.35}}>一個人散步，變成一個社區的故事。</h2>

          {h.story.map((s, i) => (
            <div key={i} style={{
              display:'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
              gap: isMobile ? 16 : 40,
              marginBottom: isMobile ? 32 : 56,
              alignItems:'center',
            }}>
              {(isMobile || i%2===0) ? (
                <>
                  <div>
                    <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 18 : 22, color:c.ink, margin:'0 0 12px', fontWeight:500, lineHeight:1.45}}>{s.h}</h3>
                    <p style={{fontSize: isMobile ? 14 : 15, color:c.inkSoft, lineHeight: isMobile ? 1.85 : 2, margin:0, textWrap:'pretty'}}>{s.p}</p>
                  </div>
                  <div style={{borderRadius:'var(--hl-radius-xl)', overflow:'hidden', aspectRatio:'4/3'}}>
                    <PhotoPlaceholder width={400} height={300} label={`故事 ${i+1}`}/>
                  </div>
                </>
              ) : (
                <>
                  <div style={{borderRadius:'var(--hl-radius-xl)', overflow:'hidden', aspectRatio:'4/3'}}>
                    <PhotoPlaceholder width={400} height={300} label={`故事 ${i+1}`}/>
                  </div>
                  <div>
                    <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize:22, color:c.ink, margin:'0 0 16px', fontWeight:500, lineHeight:1.4}}>{s.h}</h3>
                    <p style={{fontSize:15, color:c.inkSoft, lineHeight:2, margin:0, textWrap:'pretty'}}>{s.p}</p>
                  </div>
                </>
              )}
            </div>
          ))}
        </section>

        {/* My groups */}
        <section style={{marginBottom: isMobile ? 48 : 72}}>
          <SectionTitle eyebrow="我目前在做的團" title="有空來看看我們？"/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(1, 1fr)', gap: isMobile ? 14 : 20, marginTop: isMobile ? 22 : 32}}>
            {myGroups.map(g => <GroupCard key={g.id} group={g} onClick={()=>onNav('group-detail', g.id)}/>)}
          </div>
        </section>

        {/* Articles */}
        {myArticles.length > 0 && (
          <section style={{marginBottom: isMobile ? 48 : 72}}>
            <SectionTitle eyebrow="相關報導" title="特派員來過的那幾次"/>
            <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 14 : 20, marginTop: isMobile ? 22 : 32}}>
              {myArticles.map(a => <ArticleCard key={a.id} article={a} onClick={()=>onNav('article', a.id)}/>)}
            </div>
          </section>
        )}

        {/* Public timeline */}
        <section style={{marginBottom: isMobile ? 48 : 72}}>
          <SectionTitle eyebrow="這條路上的幾個節點" title="我走到這裡的樣子" subtitle="以下是我選擇公開分享的片段。" />
          <Card padding={false} style={{marginTop: isMobile ? 22 : 32}}>
            <div style={{padding: isMobile ? '18px 20px' : '28px 36px'}}>
              {h.publicTimeline.map((ev, i) => {
                const last = i === h.publicTimeline.length - 1;
                return (
                  <div key={i} style={{display:'flex', gap: isMobile ? 12 : 20, padding:'14px 0'}}>
                    <div style={{width: isMobile ? 70 : 90, flexShrink:0, fontSize: isMobile ? 12 : 13, color:c.inkMuted, fontWeight:500, paddingTop:2}}>{ev.date}</div>
                    <div style={{position:'relative', width:10, flexShrink:0}}>
                      <div style={{width:10, height:10, borderRadius:'50%', background:c.primary, marginTop:6}}/>
                      {!last && <div style={{position:'absolute', left:4, top:20, bottom:-14, width:2, background:c.lineSoft}}/>}
                    </div>
                    <div style={{flex:1, fontSize: isMobile ? 13 : 14, color:c.ink, lineHeight:1.8, paddingBottom:16, borderBottom: last ? 'none' : `1px dashed ${c.lineSoft}`}}>
                      {ev.text}
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>
        </section>

        {/* CTA */}
        <section style={{marginBottom: isMobile ? 40 : 72}}>
          <Card style={{
            padding: isMobile ? '28px 24px' : '48px 56px',
            background:c.ink, color:'#fff', border:'none',
            display:'flex',
            flexDirection: isMobile ? 'column' : 'row',
            gap: isMobile ? 20 : 32,
            alignItems: isMobile ? 'flex-start' : 'center',
          }}>
            <div style={{flex:1, minWidth:0}}>
              <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 20 : 26, color:'#fff', margin:'0 0 10px', fontWeight:500, lineHeight:1.45}}>想跟 {h.name} 聊聊？</h3>
              <p style={{fontSize: isMobile ? 13 : 14, color:'#C8B9A8', margin:0, lineHeight:1.8}}>不用客氣，先打個招呼就好。也可以先看看她的團適不適合你。</p>
            </div>
            <div style={{display:'flex', gap:10, flexShrink:0, flexWrap:'wrap'}}>
              <Button variant="accent" size={isMobile ? 'md' : 'lg'} icon={<IconChat size={16}/>}>聯絡 {h.name}</Button>
              <Button variant="ghost" size={isMobile ? 'md' : 'lg'} style={{color:'#C8B9A8'}} onClick={()=>onNav('groups','parenting')}>找類似的好鄰居</Button>
            </div>
          </Card>
        </section>
      </div>
    </div>
  );
};

// === 3.5 About 協會緣起 ===
const AboutPage = ({ onNav }) => {
  const c = useTokens();
  const isMobile = useIsMobile();
  const D = window.HAOLIN_DATA;
  return (
    <div style={{background:c.bg}}>
      {/* Hero */}
      <section style={{padding: isMobile ? '40px 20px 32px' : '80px 32px 60px', position:'relative'}}>
        <div style={{maxWidth:980, margin:'0 auto', textAlign:'center'}}>
          <div style={{fontSize:13, color:c.primary, fontWeight:600, letterSpacing:'0.15em', marginBottom:14}}>關於我們</div>
          <h1 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 30 : 52, color:c.ink, margin:'0 0 18px', fontWeight:500, lineHeight:1.3, textWrap:'balance'}}>
            我們相信，鄰居可以是選擇的。
          </h1>
          <p style={{fontSize: isMobile ? 14 : 17, color:c.inkSoft, lineHeight: isMobile ? 1.85 : 2, margin:'0 auto', maxWidth:640, textWrap:'pretty'}}>
            好好生活協進會，相信陪伴不是少數人的專業，也不該只靠運氣。<br/>
            我們想把願意陪伴別人的人，跟需要陪伴的人，好好地連在一起。
          </p>
          <div style={{marginTop: isMobile ? 28 : 48, display:'flex', justifyContent:'center'}}>
            <HandsOverlap size={isMobile ? 140 : 200}/>
          </div>
        </div>
      </section>

      {/* Mission */}
      <section style={{padding: isMobile ? '40px 20px' : '60px 32px', background:c.paper}}>
        <div style={{maxWidth:1040, margin:'0 auto', display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 28 : 32}}>
          {[
            { illo:<HandsCircle size={isMobile ? 80 : 100}/>, title:'陪伴可以被設計', desc:'一個人要長成「能陪別人的人」，需要被接住六次、被啟發五次、再練習七次。這不是魔法，是設計。' },
            { illo:<HomePlate size={isMobile ? 80 : 100}/>, title:'社群是實體的', desc:'線上互動再多，都補不了一次真正面對面的共食、共散步、共傾聽。我們只做碰得到面的社群。' },
            { illo:<ChatBubbles size={isMobile ? 80 : 100}/>, title:'每個人都能成為主揪', desc:'不需要是專業工作者、不需要有資源。你有一點想陪別人的心，我們就有一整套方法陪你走。' },
          ].map((m, i) => (
            <div key={i} style={{textAlign:'center'}}>
              <div style={{display:'flex', justifyContent:'center', marginBottom: isMobile ? 14 : 20}}>{m.illo}</div>
              <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 18 : 20, color:c.ink, margin:'0 0 10px', fontWeight:500}}>{m.title}</h3>
              <p style={{fontSize: isMobile ? 13 : 14, color:c.inkSoft, lineHeight: isMobile ? 1.8 : 1.9, margin:0, textWrap:'pretty'}}>{m.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Timeline */}
      <section style={{padding: isMobile ? '40px 20px' : '80px 32px'}}>
        <div style={{maxWidth:880, margin:'0 auto'}}>
          <SectionTitle eyebrow="創辦故事" title="我們怎麼走到這裡的" align="center"/>
          <div style={{marginTop: isMobile ? 28 : 56}}>
            {D.about.timeline.map((ev, i) => {
              const last = i === D.about.timeline.length - 1;
              return (
                <div key={i} style={{display:'grid', gridTemplateColumns: isMobile ? '70px 18px 1fr' : '120px 24px 1fr', gap: isMobile ? 12 : 20, padding: isMobile ? '12px 0' : '18px 0'}}>
                  <div style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 20 : 28, fontWeight:500, color:c.primary, lineHeight:1}}>{ev.y}</div>
                  <div style={{position:'relative', width: isMobile ? 18 : 24, display:'flex', justifyContent:'center'}}>
                    <div style={{width: isMobile ? 11 : 14, height: isMobile ? 11 : 14, borderRadius:'50%', background:c.primary, marginTop: isMobile ? 6 : 8, boxShadow:`0 0 0 4px ${c.primarySoft}`}}/>
                    {!last && <div style={{position:'absolute', top: isMobile ? 18 : 24, bottom: isMobile ? -14 : -20, width:2, background:c.lineSoft}}/>}
                  </div>
                  <div style={{fontSize: isMobile ? 14 : 16, color:c.inkSoft, lineHeight:1.85, paddingTop:2, paddingBottom: isMobile ? 14 : 20, borderBottom: last ? 'none' : `1px dashed ${c.lineSoft}`}}>
                    {ev.t}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Team */}
      <section style={{padding: isMobile ? '40px 20px' : '80px 32px', background:c.bgAlt}}>
        <div style={{maxWidth:1100, margin:'0 auto'}}>
          <SectionTitle eyebrow="團隊" title="在這裡工作的人" align="center"/>
          <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 14 : 24, marginTop: isMobile ? 28 : 48}}>
            {D.about.team.map(p => (
              <div key={p.name} style={{background:c.paper, border:`1px solid ${c.line}`, borderRadius:'var(--hl-radius-xl)', padding: isMobile ? '22px 22px' : '28px 26px', textAlign:'center'}}>
                <div style={{display:'flex', justifyContent:'center', marginBottom:14}}>
                  <AvatarGeo size={isMobile ? 60 : 72} seed={p.seed}/>
                </div>
                <div style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 17 : 18, color:c.ink, fontWeight:500, marginBottom:4}}>{p.name}</div>
                <div style={{fontSize:12, color:c.primary, fontWeight:600, letterSpacing:'0.05em', marginBottom:10}}>{p.role}</div>
                <div style={{fontSize:13, color:c.inkSoft, lineHeight:1.8, textWrap:'pretty'}}>{p.bio}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact + Donate */}
      <section style={{padding: isMobile ? '40px 20px' : '80px 32px'}}>
        <div style={{maxWidth:1040, margin:'0 auto', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 14 : 24}}>
          {/* Contact */}
          <Card style={{padding: isMobile ? '28px 26px' : '40px 44px'}}>
            <div style={{fontSize:13, color:c.primary, fontWeight:600, letterSpacing:'0.1em', marginBottom:8}}>聯絡協會</div>
            <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 20 : 24, color:c.ink, margin:'0 0 18px', fontWeight:500}}>我們在這裡等你</h3>
            <div style={{display:'flex', flexDirection:'column', gap:12, fontSize: isMobile ? 13 : 14, color:c.inkSoft, lineHeight:1.8}}>
              <div><b style={{color:c.ink, fontWeight:600}}>Email</b>　hello@haolin.tw</div>
              <div><b style={{color:c.ink, fontWeight:600}}>電話</b>　02-2351-XXXX（週一至週五 10–18 時）</div>
              <div><b style={{color:c.ink, fontWeight:600}}>地址</b>　台北市中正區仁愛路二段 56 巷 4 號</div>
            </div>
            <Button variant="secondary" size="md" style={{marginTop:22}}><IconChat size={14}/> 填寫聯絡表單</Button>
          </Card>

          {/* Donate */}
          <Card style={{padding: isMobile ? '28px 26px' : '40px 44px', background:c.ink, color:'#fff', border:'none'}}>
            <div style={{fontSize:13, color:'#D9A84A', fontWeight:600, letterSpacing:'0.1em', marginBottom:8}}>支持我們</div>
            <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 20 : 24, color:'#fff', margin:'0 0 18px', fontWeight:500, lineHeight:1.4}}>讓下一位好鄰居也能被接住</h3>
            <p style={{fontSize: isMobile ? 13 : 14, color:'#C8B9A8', lineHeight:1.9, margin:'0 0 22px', textWrap:'pretty'}}>
              協會全年運作靠小額穩定捐款。一個月 300 元，可以支持一位好鄰居被陪伴六個月的基本運作成本。
            </p>
            <Button variant="accent" size={isMobile ? 'md' : 'lg'} iconRight={<IconArrow size={18}/>}>我想支持好鄰居</Button>
          </Card>
        </div>
      </section>
    </div>
  );
};

// === 3.6 隱私政策 / 服務條款 ===
const LegalPage = ({ kind = 'privacy' }) => {
  const c = useTokens();
  const isMobile = useIsMobile();
  const content = kind === 'terms' ? termsContent : privacyContent;
  return (
    <div style={{background:c.bg, padding: isMobile ? '40px 20px' : '80px 32px'}}>
      <div style={{maxWidth:720, margin:'0 auto'}}>
        <div style={{fontSize:13, color:c.primary, fontWeight:600, letterSpacing:'0.15em', marginBottom:12}}>{kind === 'terms' ? '服務條款' : '隱私政策'}</div>
        <h1 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 26 : 36, color:c.ink, margin:'0 0 10px', fontWeight:500, lineHeight:1.35}}>{content.title}</h1>
        <p style={{fontSize:13, color:c.inkMuted, margin: isMobile ? '0 0 28px' : '0 0 40px'}}>最後更新：2026 年 3 月 12 日</p>

        {content.sections.map((s, i) => (
          <section key={i} style={{marginBottom: isMobile ? 24 : 36}}>
            <h2 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 17 : 20, color:c.ink, margin:'0 0 12px', fontWeight:500}}>{s.h}</h2>
            {s.p.map((p, j) => (
              <p key={j} style={{fontSize: isMobile ? 14 : 15, color:c.inkSoft, lineHeight: isMobile ? 1.85 : 2, margin:'0 0 12px', textWrap:'pretty'}}>{p}</p>
            ))}
          </section>
        ))}

        <div style={{marginTop: isMobile ? 32 : 48, padding: isMobile ? '16px 18px' : '20px 24px', background:c.paper, border:`1px dashed ${c.line}`, borderRadius:'var(--hl-radius-md)', fontSize: isMobile ? 13 : 14, color:c.inkSoft, lineHeight:1.9}}>
          如對本{kind === 'terms' ? '條款' : '政策'}有任何疑問，歡迎來信 <b style={{color:c.primary}}>hello@haolin.tw</b>，我們會盡快回覆。
        </div>
      </div>
    </div>
  );
};

const privacyContent = {
  title: '我們怎麼保護你留下的資料',
  sections: [
    { h:'我們收集什麼', p:[
      '當你使用好鄰居系統，我們會收集你主動提供的資訊：姓名、聯絡方式、想參加的主題、所在地區，以及你在訊息中告訴我們的內容。',
      '我們也會自動記錄：你使用的裝置類型、瀏覽器版本、以及你在站內點擊的頁面，用來改善系統體驗。',
    ]},
    { h:'我們怎麼使用這些資料', p:[
      '最主要的用途是幫你媒合到合適的好鄰居團體。我們會用你的需求描述與地緣資訊，透過 AI 推薦最可能適合你的三個選項。',
      '我們不會把你的個資賣給任何第三方。所有合作夥伴（含 AI 模型供應商）都有保密義務，且僅能存取完成任務所必需的最小資料。',
      '協會會用你的 Email 寄送月報、活動提醒與關懷訊息。你可以隨時在信件底部取消訂閱。',
    ]},
    { h:'資料保存多久', p:[
      '媒合紀錄保存 2 年後自動匿名化。訊息往來保留 5 年。主揪的公開 Profile 會在主揪明確要求下移除，移除後 30 天內完成清除作業。',
    ]},
    { h:'你的權利', p:[
      '你隨時可以向協會要求查閱、修改或刪除我們保存的你的個資。請來信 hello@haolin.tw 並附上能證明你身份的資訊，我們會在 7 個工作日內處理。',
    ]},
    { h:'Cookie 與追蹤', p:[
      '好鄰居網站只使用必要的功能性 Cookie（例如：記住你上次看到的頁面）。我們不使用第三方廣告追蹤。',
    ]},
  ],
};

const termsContent = {
  title: '使用好鄰居系統的相互約定',
  sections: [
    { h:'關於這份條款', p:[
      '這份條款是你跟好好生活協進會之間的約定。當你使用本系統，表示你同意這些內容。我們會儘量把話說白，不耍法律遊戲。',
    ]},
    { h:'你可以做的事', p:[
      '瀏覽所有公開頁面、使用 AI 媒合、聯絡好鄰居主揪、申請成為好鄰居。只要你是真人、誠實提供資訊，這些都免費。',
    ]},
    { h:'你不可以做的事', p:[
      '不可以把 AI 媒合拿來當交友軟體或商業推銷；不可以盜用別人的身份參加活動；不可以在平台上發布涉及歧視、暴力、詐騙的內容。',
      '一旦發現違反，協會有權移除相關內容並中止你的帳號。',
    ]},
    { h:'關於活動安全', p:[
      '好鄰居團由主揪自行組織。協會提供培育與支持，但不是活動的主辦方。參加活動時請自行評估安全與健康狀況。',
    ]},
    { h:'條款變更', p:[
      '如果我們修改條款，會透過站內通知與 Email 告知至少 30 天。你不同意新版本的話，可以隨時停止使用並要求刪除帳號。',
    ]},
  ],
};

// === 3.8 空狀態 + 404 ===
const EmptyStatesPage = ({ onNav }) => {
  const c = useTokens();
  const isMobile = useIsMobile();
  return (
    <div style={{background:c.bg, padding: isMobile ? '40px 20px 60px' : '80px 32px 100px'}}>
      <div style={{maxWidth:1100, margin:'0 auto'}}>
        <SectionTitle
          eyebrow="空狀態頁展示"
          title="還沒發生的事，也可以好好安放。"
          subtitle="以下是協會系統三種常見的空狀態設計。"
          align="center"
        />
        <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 14 : 24, marginTop: isMobile ? 32 : 56}}>
          <EmptyCard
            illo={<SketchNotebook/>}
            title="還沒有活動紀錄"
            desc="第一個活動，等著被你記下來。上傳幾張照片，AI 會陪你把它變成一篇報導。"
            ctaLabel="上傳第一個活動"
            onCta={()=>onNav('neighbor-upload')}
          />
          <EmptyCard
            illo={<SketchMailbox/>}
            title="還沒有人找上門"
            desc="沒有人找你媒合很正常。先把你的 Profile 寫完整，讓對的人能看到你。"
            ctaLabel="填寫 Profile"
            onCta={()=>onNav('neighbor-settings')}
          />
          <EmptyCard
            illo={<SketchSprout/>}
            title="還沒有同行者"
            desc="一個人走也行，但有伴會走得更遠。Landing 頁的 CTA 能把人帶來。"
            ctaLabel="看 Landing 範例"
            onCta={()=>onNav('home')}
          />
        </div>

        <div style={{marginTop: isMobile ? 32 : 72, padding: isMobile ? '18px 20px' : '24px 28px', background:c.paper, border:`1px dashed ${c.line}`, borderRadius:'var(--hl-radius-xl)', fontSize: isMobile ? 13 : 14, color:c.inkSoft, lineHeight:1.85, textAlign:'center'}}>
          空狀態的用意不是「告知你沒東西」，而是幫你找到下一步。每一個空狀態都要給使用者一個<b style={{color:c.primary}}>明確的出口</b>。
        </div>
      </div>
    </div>
  );
};

const EmptyCard = ({ illo, title, desc, ctaLabel, onCta }) => {
  const c = useTokens();
  return (
    <div style={{
      background:c.paper, border:`1px solid ${c.line}`, borderRadius:'var(--hl-radius-xl)',
      padding:'44px 36px 36px', textAlign:'center',
    }}>
      <div style={{display:'flex', justifyContent:'center', marginBottom:24}}>{illo}</div>
      <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize:20, color:c.ink, margin:'0 0 12px', fontWeight:500}}>{title}</h3>
      <p style={{fontSize:14, color:c.inkSoft, lineHeight:1.85, margin:'0 0 24px', textWrap:'pretty'}}>{desc}</p>
      <Button variant="primary" size="sm" onClick={onCta} iconRight={<IconArrow size={14}/>}>{ctaLabel}</Button>
    </div>
  );
};

const NotFoundPage = ({ onNav }) => {
  const c = useTokens();
  const isMobile = useIsMobile();
  return (
    <div style={{background:c.bg, padding: isMobile ? '60px 20px 80px' : '100px 32px 120px'}}>
      <div style={{maxWidth:640, margin:'0 auto', textAlign:'center'}}>
        <div style={{display:'flex', justifyContent:'center', marginBottom: isMobile ? 28 : 40}}>
          <SketchLostDoor/>
        </div>
        <div style={{fontSize:13, color:c.primary, fontWeight:600, letterSpacing:'0.15em', marginBottom:14}}>404</div>
        <h1 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 24 : 40, color:c.ink, margin:'0 0 18px', fontWeight:500, lineHeight:1.4, textWrap:'balance'}}>
          嗯⋯這裡好像沒有你要找的好鄰居。
        </h1>
        <p style={{fontSize: isMobile ? 14 : 16, color:c.inkSoft, lineHeight: isMobile ? 1.85 : 2, margin: isMobile ? '0 auto 24px' : '0 auto 36px', maxWidth:480}}>
          可能是連結過期了，也可能是網址打錯了。<br/>
          要不要讓我們帶你回主要的路上？
        </p>
        <div style={{display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap'}}>
          <Button variant="primary" size={isMobile ? 'md' : 'lg'} onClick={()=>onNav('home')}>回首頁</Button>
          <Button variant="secondary" size={isMobile ? 'md' : 'lg'} onClick={()=>onNav('match')} icon={<IconSparkle size={15}/>}>讓 AI 幫你找好鄰居</Button>
        </div>
      </div>
    </div>
  );
};

// Hand-drawn style empty-state SVG illustrations (延用 HandsOverlap 等的幾何 + 手感線條)
const SketchNotebook = () => {
  const c = window.HAOLIN_TOKENS.colors;
  return (
    <svg width="140" height="140" viewBox="0 0 140 140">
      <rect x="30" y="26" width="82" height="100" rx="6" fill={c.warm} stroke={c.ink} strokeWidth="2"/>
      <rect x="38" y="22" width="66" height="108" rx="4" fill={c.paper} stroke={c.ink} strokeWidth="2"/>
      <line x1="48" y1="44" x2="92" y2="44" stroke={c.lineSoft} strokeWidth="1.5"/>
      <line x1="48" y1="56" x2="88" y2="56" stroke={c.lineSoft} strokeWidth="1.5"/>
      <line x1="48" y1="68" x2="82" y2="68" stroke={c.lineSoft} strokeWidth="1.5"/>
      <circle cx="42" cy="44" r="2" fill={c.primary}/>
      <circle cx="42" cy="56" r="2" fill={c.primary}/>
      <circle cx="42" cy="68" r="2" fill={c.primary}/>
      <path d="M60 100 Q70 94 80 100" stroke={c.accent} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
    </svg>
  );
};

const SketchMailbox = () => {
  const c = window.HAOLIN_TOKENS.colors;
  return (
    <svg width="140" height="140" viewBox="0 0 140 140">
      <rect x="38" y="56" width="64" height="50" rx="6" fill={c.primary} stroke={c.ink} strokeWidth="2"/>
      <path d="M38 62 L70 80 L102 62" fill="none" stroke={c.ink} strokeWidth="2"/>
      <rect x="64" y="88" width="12" height="18" fill={c.bg} stroke={c.ink} strokeWidth="1.5"/>
      <line x1="70" y1="56" x2="70" y2="126" stroke={c.ink} strokeWidth="2"/>
      <circle cx="70" cy="32" r="8" fill={c.warm} stroke={c.ink} strokeWidth="1.5"/>
      <path d="M68 30 L70 32 L72 28" stroke={c.primary} strokeWidth="1.5" fill="none" strokeLinecap="round"/>
    </svg>
  );
};

const SketchSprout = () => {
  const c = window.HAOLIN_TOKENS.colors;
  return (
    <svg width="140" height="140" viewBox="0 0 140 140">
      <rect x="40" y="88" width="60" height="32" rx="4" fill={c.warm} stroke={c.ink} strokeWidth="2"/>
      <path d="M70 90 Q70 70 70 52" stroke={c.accent} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <path d="M70 70 Q56 66 50 52 Q64 52 70 66" fill={c.accent} stroke={c.ink} strokeWidth="1.5"/>
      <path d="M70 60 Q84 56 90 42 Q76 42 70 56" fill={c.accent} stroke={c.ink} strokeWidth="1.5"/>
      <ellipse cx="55" cy="98" rx="3" ry="1.5" fill={c.ink} opacity="0.3"/>
      <ellipse cx="85" cy="104" rx="3" ry="1.5" fill={c.ink} opacity="0.3"/>
    </svg>
  );
};

const SketchLostDoor = () => {
  const c = window.HAOLIN_TOKENS.colors;
  return (
    <svg width="200" height="200" viewBox="0 0 200 200">
      {/* Ground */}
      <path d="M20 160 Q100 150 180 160" stroke={c.ink} strokeWidth="2" fill="none" opacity="0.4"/>
      {/* Door frame on nothing */}
      <rect x="70" y="60" width="60" height="100" rx="2" fill={c.primary} stroke={c.ink} strokeWidth="2.5"/>
      <rect x="76" y="68" width="48" height="86" rx="1" fill={c.warm} stroke={c.ink} strokeWidth="1.5"/>
      <circle cx="114" cy="112" r="2.5" fill={c.ink}/>
      {/* Door number */}
      <text x="100" y="96" textAnchor="middle" fontFamily="var(--hl-font-heading)" fontSize="16" fill={c.ink} fontWeight="500">?</text>
      {/* Question marks floating */}
      <text x="38" y="50" fontFamily="var(--hl-font-heading)" fontSize="22" fill={c.primary} opacity="0.5" fontWeight="500">?</text>
      <text x="150" y="40" fontFamily="var(--hl-font-heading)" fontSize="18" fill={c.accent} opacity="0.6" fontWeight="500">?</text>
      <text x="160" y="120" fontFamily="var(--hl-font-heading)" fontSize="14" fill={c.gold} opacity="0.6" fontWeight="500">?</text>
      {/* Little figure walking */}
      <circle cx="30" cy="130" r="6" fill={c.ink}/>
      <path d="M30 136 L30 150 M26 144 L34 144 M26 158 L30 150 L34 158" stroke={c.ink} strokeWidth="2" fill="none" strokeLinecap="round"/>
    </svg>
  );
};

Object.assign(window, { HostProfilePage, AboutPage, LegalPage, EmptyStatesPage, NotFoundPage });