// Page 1: Landing Page

const LandingPage = ({ onNav }) => {
  const c = useTokens();
  const isMobile = useIsMobile();
  const D = window.HAOLIN_DATA;

  return (
    <div style={{background: c.bg, minHeight:'100vh'}}>
      {/* HERO */}
      <section style={{padding: isMobile ? '40px 20px 56px' : '80px 32px 100px'}}>
        <div style={{
          maxWidth:1240, margin:'0 auto',
          display:'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr',
          gap: isMobile ? 24 : 60,
          alignItems:'center',
        }}>
          <div>
            <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'6px 14px', background:c.primarySoft, borderRadius:'999px', marginBottom: isMobile ? 18 : 28, fontSize:13, color:c.primaryDark, fontWeight:600}}>
              <span style={{width:6, height:6, background:c.primary, borderRadius:'50%'}}/>
              籌備中・2026 春
            </div>
            <h1 style={{
              fontFamily:'var(--hl-font-heading)',
              fontSize: isMobile ? 34 : 'clamp(44px, 6vw, 76px)',
              fontWeight:500,
              lineHeight:1.2,
              color:c.ink, margin:0,
              letterSpacing:'0.01em',
            }}>
              找個好鄰居，<br/>
              一起過日子。
            </h1>
            <p style={{
              fontSize: isMobile ? 15 : 18, lineHeight:1.85, color:c.inkSoft,
              marginTop: isMobile ? 18 : 28,
              marginBottom: isMobile ? 26 : 40,
              maxWidth:520,
            }}>
              育兒、喘息、共學、共餐、靜心──當城市越來越擠，
              我們反而越來越寂寞。好鄰居是一個幫你找到「常常碰面的人」的地方。
            </p>
            <div style={{display:'flex', gap:14, flexWrap:'wrap'}}>
              <Button size={isMobile ? 'md' : 'lg'} onClick={()=>onNav('match')} iconRight={<IconArrow size={18}/>}>找一個好鄰居</Button>
              <Button size={isMobile ? 'md' : 'lg'} variant="secondary" onClick={()=>onNav('join')}>讓我們認識你</Button>
            </div>
            <div style={{display:'flex', gap: isMobile ? 20 : 32, marginTop: isMobile ? 32 : 48, paddingTop: isMobile ? 20 : 28, borderTop:`1px dashed ${c.line}`}}>
              <Stat n="142" label="活躍好鄰居團"/>
              <Stat n="1,284" label="累計媒合"/>
              <Stat n="86" label="本月活動"/>
            </div>
          </div>
          <div style={{display:'flex', justifyContent:'center', alignItems:'center', position:'relative'}}>
            <div style={{
              position:'absolute',
              width: isMobile ? 260 : 380,
              height: isMobile ? 260 : 380,
              borderRadius:'50%',
              background: `radial-gradient(circle, ${c.primarySoft} 0%, transparent 70%)`,
              zIndex:0,
            }}/>
            <div style={{position:'relative', zIndex:1}}>
              <PeopleGathering size={isMobile ? 280 : 440}/>
            </div>
          </div>
        </div>
      </section>

      {/* WARM INVITATION — removed, merged into 成為好鄰居的起點 section below */}

      {/* VALUE PROPS */}
      <section style={{padding: isMobile ? '48px 20px' : '80px 32px', background: c.bgAlt}}>
        <div style={{maxWidth:1240, margin:'0 auto'}}>
          <SectionTitle
            eyebrow="為什麼要有好鄰居"
            title="社群不是線上群組，是真的碰得到面的人。"
            subtitle="我們相信，陪伴不該是少數人的專業，也不該只靠運氣遇到。"
            align="center"
          />
          <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 16 : 24, marginTop: isMobile ? 32 : 56}}>
            <ValueCard illo={<HandsCircle size={140}/>} title="AI 幫你找對的人" desc="不用自己爬一堆粉專或 Line 群組。告訴我們你想要什麼，我們會用對話幫你媒合最適合的團體。"/>
            <ValueCard illo={<HomePlate size={140}/>} title="都在你家附近" desc="每個好鄰居團都是在地的、小規模的。一週或一個月固定碰面，不是加了就忘的陌生群組。"/>
            <ValueCard illo={<ChatBubbles size={140}/>} title="誠實的特派員報導" desc="每個團都有特派員實際採訪、寫成文章。你會看到真正發生了什麼，而不是官方介紹。"/>
          </div>
        </div>
      </section>

      {/* RECENT STORIES */}
      <section style={{padding: isMobile ? '48px 20px' : '90px 32px'}}>
        <div style={{maxWidth:1240, margin:'0 auto'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: isMobile ? 24 : 40, flexWrap:'wrap', gap:16}}>
            <SectionTitle eyebrow="特派員最新採訪" title="現場的人，現場的事。"/>
            <Button variant="ghost" onClick={()=>onNav('stories')} iconRight={<IconArrow size={16}/>}>所有報導</Button>
          </div>
          <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 16 : 20}}>
            {D.articles.slice(1, 4).map(a => <ArticleCard key={a.id} article={a} onClick={()=>onNav('article', a.id)}/>)}
          </div>
        </div>
      </section>

      {/* CATEGORY EXPLORE */}
      <section style={{padding: isMobile ? '48px 20px' : '80px 32px', background: c.bgAlt}}>
        <div style={{maxWidth:1240, margin:'0 auto'}}>
          <SectionTitle eyebrow="類型探索" title="你想要哪一種陪伴？" align="center"/>
          <div style={{display:'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(6, 1fr)', gap: isMobile ? 12 : 16, marginTop: isMobile ? 28 : 48}}>
            {D.categories.map(cat => {
              const Icon = window[cat.icon];
              return <CategoryPill key={cat.key} cat={cat} Icon={Icon} onClick={()=>onNav('groups', cat.key)}/>;
            })}
          </div>
        </div>
      </section>

      {/* ABOUT + RECRUITING */}
      <section style={{padding: isMobile ? '48px 20px' : '100px 32px'}}>
        <div style={{maxWidth:1100, margin:'0 auto'}}>
          <Card style={{padding:0, overflow:'hidden', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr'}}>
            <div style={{padding: isMobile ? '36px 24px' : '56px 56px', background: c.ink, color:'#fff'}}>
              <span style={{fontSize:13, color:c.warm, fontWeight:600, letterSpacing:'0.1em'}}>關於協會</span>
              <h2 style={{
                fontFamily:'var(--hl-font-heading)',
                fontSize: isMobile ? 24 : 34, fontWeight:500, margin:'14px 0 20px', lineHeight:1.35,
              }}>好好生活協進會，<br/>相信陪伴能被設計。</h2>
              <p style={{fontSize: isMobile ? 14 : 16, lineHeight:1.85, color:'#D8CAB8', margin:0}}>
                我們陪伴的不是志工，是一群願意穩定出現在某個地方、某一群人面前的人。
                如果你也想成為這樣的人，我們會陪著你慢慢長成「好鄰居」。
              </p>
              <Button variant="accent" size={isMobile ? 'md' : 'lg'} style={{marginTop: isMobile ? 22 : 32}} iconRight={<IconArrow size={18}/>}>加入同行計畫</Button>
            </div>
            <div style={{padding: isMobile ? '36px 24px' : '56px 48px', display:'flex', flexDirection:'column', justifyContent:'center', gap:24, background:c.bgAlt}}>
              <div style={{fontSize:13, color:c.primary, fontWeight:600, letterSpacing:'0.1em'}}>成為好鄰居的起點</div>
              <h3 style={{
                fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 21 : 26, fontWeight:500,
                color:c.ink, margin:0, lineHeight:1.35,
              }}>不用先準備好才能來。</h3>
              <ol style={{margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:14}}>
                {[
                  { n:'1', t:'告訴我們你是誰', d:'想陪伴誰、想做什麼，都可以先聊。' },
                  { n:'2', t:'專人陪你找支持', d:'從六個面向看看你目前缺什麼、該被接住的是哪一塊。' },
                  { n:'3', t:'被接住，再出發', d:'等你覺得被支持到位了，再成為下一個支持者也不遲。' },
                ].map(s => (
                  <li key={s.n} style={{display:'flex', gap:14, alignItems:'flex-start'}}>
                    <span style={{
                      width:30, height:30, borderRadius:'50%', background:c.primary, color:'#fff',
                      display:'flex', alignItems:'center', justifyContent:'center',
                      fontSize:14, fontWeight:600, flexShrink:0, fontFamily:'var(--hl-font-heading)',
                    }}>{s.n}</span>
                    <div>
                      <div style={{fontSize:15, fontWeight:600, color:c.ink, marginBottom:3}}>{s.t}</div>
                      <div style={{fontSize:13, color:c.inkSoft, lineHeight:1.7}}>{s.d}</div>
                    </div>
                  </li>
                ))}
              </ol>
              <Button variant="primary" size="md" iconRight={<IconArrow size={16}/>} onClick={()=>onNav('join')} style={{marginTop:4}}>讓我們認識你</Button>
            </div>
          </Card>
        </div>
      </section>
    </div>
  );
};

const Stat = ({ n, label }) => {
  const c = useTokens();
  return (
    <div style={{display:'flex', flexDirection:'column', gap:4}}>
      <span style={{fontFamily:'var(--hl-font-heading)', fontSize:32, fontWeight:500, color:c.ink}}>{n}</span>
      <span style={{fontSize:13, color:c.inkMuted}}>{label}</span>
    </div>
  );
};

const ValueCard = ({ illo, title, desc }) => {
  const c = useTokens();
  return (
    <div style={{
      background: c.paper, borderRadius:'var(--hl-radius-xl)',
      padding:'40px 32px 36px', border:`1px solid ${c.line}`,
      display:'flex', flexDirection:'column', gap:16,
    }}>
      <div style={{display:'flex', justifyContent:'flex-start'}}>{illo}</div>
      <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize:22, color:c.ink, margin:'8px 0 0', fontWeight:500}}>{title}</h3>
      <p style={{fontSize:15, lineHeight:1.75, color:c.inkSoft, margin:0}}>{desc}</p>
    </div>
  );
};

const ArticleCard = ({ article, onClick }) => {
  const c = useTokens();
  const [hover, setHover] = useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        background:c.paper, borderRadius:'var(--hl-radius-xl)',
        border:`1px solid ${c.line}`, overflow:'hidden',
        cursor:'pointer', transition:'transform 220ms ease, box-shadow 220ms ease',
        transform: hover ? 'translateY(-4px)' : 'none',
        boxShadow: hover ? '0 18px 40px rgba(80,50,25,0.12)' : 'none',
      }}
    >
      <div style={{height:180}}>
        <PhotoPlaceholder width={400} height={180} label={article.group} src={(window.HAOLIN_DATA.groups.find(g => g.name === article.group) || {}).cover}/>
      </div>
      <div style={{padding:'20px 22px 24px'}}>
        <div style={{display:'flex', gap:8, alignItems:'center', marginBottom:10}}>
          <Tag tone="primary">{article.cat}</Tag>
          <span style={{fontSize:12, color:c.inkMuted}}>{article.date}</span>
        </div>
        <h4 style={{fontFamily:'var(--hl-font-heading)', fontSize:19, fontWeight:500, color:c.ink, margin:'0 0 10px', lineHeight:1.4}}>{article.title}</h4>
        <p style={{fontSize:14, color:c.inkSoft, lineHeight:1.7, margin:0}}>{article.excerpt}</p>
      </div>
    </div>
  );
};

const Step = ({ n, label, desc }) => {
  const c = useTokens();
  return (
    <div style={{display:'flex', gap:14, alignItems:'flex-start'}}>
      <div style={{
        width:32, height:32, borderRadius:'50%',
        background: c.primarySoft, color: c.primaryDark,
        display:'flex', alignItems:'center', justifyContent:'center',
        fontWeight:600, fontSize:14, flexShrink:0,
      }}>{n}</div>
      <div>
        <div style={{fontSize:15, fontWeight:600, color:c.ink}}>{label}</div>
        <div style={{fontSize:14, color:c.inkSoft, marginTop:2}}>{desc}</div>
      </div>
    </div>
  );
};

Object.assign(window, { LandingPage, ArticleCard, Stat });