// 訪前說明獨立頁面（內部預覽用）
window.JoinPage = function JoinPage({ onNav }) {
  const c = useTokens();
  const isMobile = useIsMobile();

  const stats = [
    { num: '50%',  label: '的人薪水不到 37,500 元' },
    { num: '23%',  label: '39 歲以下零存款' },
    { num: '20',   label: '個城市房價在世界前 50 名', small: true },
    { num: '#1',   label: '過勞指數全球第一', small: true },
    { num: '#1',   label: '生育率全世界最低', small: true },
    { num: '1/4',  label: '30~45 歲每 4 人就有 1 人有精神疾患' },
    { num: '1/5',  label: '婦女經歷過家暴' },
    { num: '#2',   label: '離婚率亞洲第二', small: true },
    { num: '65%',  label: '不相信婚姻會幸福' },
    { num: '7.9',  label: '長照平均要照顧 7.9 年（每年至少 50 萬）' },
  ];

  const scenarios = [
    { tag: '運動', emoji: '🏃', text: '揪社區運動團，或許孤獨的問題就能少一些。' },
    { tag: '照顧孩子', emoji: '👶', text: '幫忙帶孩子，讓父母能夠忙裡偷閒去約會相處，也許婚姻的問題就能少一些。' },
    { tag: '理財', emoji: '💰', text: '分享理財知識，或開放給人諮詢，也許就能幫到那些為零存款焦慮的人。' },
    { tag: '深聊', emoji: '🍵', text: '開放家庭請朋友來一起吃飯，或許能讓他覺得被接納、被理解，也就不這麼憂鬱了。' },
  ];

  const questions = [
    '請給我們一版簡短的自我介紹。',
    '描述一下您想做的事工？',
    '這個事工針對哪個族群的人？',
    '是什麼原因讓你想做這樣的事工？',
    '這個事工對人的幫助是什麼？',
    '您有沒有遇過類似的掙扎？',
    '假設您已經做這個事工一陣子，可不可以跟我們分享幾個讓你感動的故事？',
    '如果您想做的事情大眾比較不知道（例如：財務諮詢），請補充一下，一個人參與到您的事工裡面，您會跟他有哪些互動，大致上會怎麼進行？',
  ];

  const promptText =
`請你扮演一位正在經歷 [掙扎類型，例如：婚姻倦怠／育兒疲憊／
財務焦慮／孤獨憂鬱] 的人，年齡大約 [年齡]，目前的生活狀態
大致是 [簡述狀態]。

接下來我會提供一段「事工介紹」，這是某位志願者想做的服事內容。
請你以這個正在掙扎的人的角度，認真讀完之後告訴我：

1. 聽完之後的第一印象是什麼？
2. 哪幾句話讓你覺得「這個人好像懂我」？
3. 哪些地方讓你猶豫、退卻、或覺得不太放心？
4. 你會想踏出第一步聯繫對方嗎？為什麼會／為什麼不會？
5. 如果你是對方，有什麼地方可以調整，會讓像我這樣的人
   更願意走近？

請用真誠、不客套的方式回答，把真實感受直接講出來，不用美化。

---

事工介紹如下：

[在這裡貼上你針對上面 8 個問題的回答]`;

  const [copied, setCopied] = React.useState(false);
  const onCopyPrompt = () => {
    try {
      navigator.clipboard.writeText(promptText);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch (e) {}
  };

  return (
    <div style={{background: c.bg, minHeight: '100vh'}}>

      {/* HERO */}
      <section style={{
        padding: isMobile ? '48px 20px 32px' : '80px 24px 48px',
        background: `linear-gradient(180deg, ${c.primarySoft}55 0%, ${c.bg} 100%)`,
      }}>
        <div style={{maxWidth: 920, margin:'0 auto', textAlign:'center'}}>
          <div style={{
            display:'inline-block', padding:'6px 16px',
            background: c.paper, borderRadius: 999,
            border:`1px solid ${c.line}`, color: c.primaryDark,
            fontSize: 13, letterSpacing:'0.05em', marginBottom: 20,
            fontWeight: 500,
          }}>
            我們在尋找有愛的好鄰居
          </div>

          <h1 style={{
            fontFamily:'var(--hl-font-heading)',
            fontSize: isMobile ? 30 : 48, fontWeight: 600, color: c.ink,
            margin:'0 0 12px', letterSpacing:'0.02em', lineHeight: 1.3,
          }}>
            好好生活領袖協進會
          </h1>

          <div style={{
            fontSize: isMobile ? 15 : 18, color: c.inkSoft, fontWeight: 400,
            marginBottom: isMobile ? 24 : 36, letterSpacing:'0.04em',
          }}>
            事工夥伴 ‧ 訪前說明
          </div>

          <div style={{display:'flex', justifyContent:'center', marginTop: 8}}>
            <HandsOverlap size={isMobile ? 140 : 200}/>
          </div>
        </div>
      </section>

      {/* 開場文 */}
      <section style={{padding: '24px 24px 8px'}}>
        <div style={{maxWidth: 720, margin:'0 auto'}}>
          <p style={{
            fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 22 : 28,
            color: c.ink, lineHeight: 1.6, fontWeight: 500,
            margin:'0 0 20px', textAlign:'center',
          }}>
            其實，台灣人的日子，<br/>過得真的很辛苦。
          </p>
          <p style={{
            fontSize: isMobile ? 14 : 16, color: c.inkSoft, lineHeight: 1.9,
            margin:'0 0 8px', textAlign:'center',
          }}>
            或許你沒有太大的感覺，但有一些數字，我想跟大家分享：
          </p>
        </div>
      </section>

      {/* 數據 stat grid */}
      <section style={{padding: isMobile ? '20px 16px 28px' : '32px 24px 40px'}}>
        <div style={{
          maxWidth: 980, margin:'0 auto',
          display:'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(auto-fill, minmax(180px, 1fr))',
          gap: isMobile ? 10 : 16,
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              background: c.paper,
              border:`1px solid ${c.line}`,
              borderRadius: 'var(--hl-radius-lg, 18px)',
              padding: isMobile ? '14px 14px' : '22px 20px',
              textAlign:'left',
            }}>
              <div style={{
                fontFamily:'var(--hl-font-heading)',
                fontSize: isMobile ? (s.small ? 24 : 26) : (s.small ? 32 : 36),
                color: c.primary, fontWeight: 600,
                lineHeight: 1.1, marginBottom: isMobile ? 6 : 8,
                letterSpacing:'-0.02em',
              }}>{s.num}</div>
              <div style={{
                fontSize: isMobile ? 12 : 13, color: c.inkSoft,
                lineHeight: 1.5,
              }}>{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* 個人故事引言 */}
      <section style={{padding: isMobile ? '16px 16px 28px' : '24px 24px 40px'}}>
        <div style={{
          maxWidth: 720, margin:'0 auto',
          background: c.paper,
          borderLeft: `4px solid ${c.primary}`,
          borderRadius:'4px 12px 12px 4px',
          padding: isMobile ? '20px 22px' : '28px 32px',
          boxShadow:'0 4px 16px rgba(80,50,25,0.06)',
        }}>
          <div style={{
            fontFamily:'var(--hl-font-heading)',
            fontSize: isMobile ? 15 : 17, color: c.ink, lineHeight: 1.8,
          }}>
            就連我自己也是，跟哥哥拆分花費之後，還是必須要兼三份工作，才能勉強支持家人的醫藥費。
          </div>
          <div style={{
            marginTop: isMobile ? 18 : 24, paddingTop: isMobile ? 16 : 20,
            borderTop:`1px dashed ${c.line}`,
            fontSize: isMobile ? 14 : 16, color: c.inkSoft, lineHeight: 1.8,
          }}>
            講到這裡，我很懇切的請求大家——我們可不可以看看這些真實的掙扎，然後在自己力所能及的範圍，稍稍的給予一些愛與支持？
          </div>
        </div>
      </section>

      {/* 協會介紹 */}
      <section style={{padding: isMobile ? '24px 16px' : '40px 24px'}}>
        <div style={{maxWidth: 720, margin:'0 auto'}}>
          <SectionTitle
            eyebrow="關於協會"
            title="與你一起同行"
            subtitle="只要你想針對這個社會做出一些具體的行動，不管多大多小，協會都願意與你一起同行。"
            align="center"
          />
        </div>

        <div style={{
          maxWidth: 980, margin: isMobile ? '24px auto 0' : '32px auto 0',
          display:'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: isMobile ? 10 : 16,
        }}>
          {scenarios.map((s, i) => (
            <div key={i} style={{
              background: c.paper,
              border:`1px solid ${c.line}`,
              borderRadius: 'var(--hl-radius-xl, 22px)',
              padding: isMobile ? '16px 14px' : '24px 22px',
            }}>
              <div style={{fontSize: isMobile ? 24 : 32, marginBottom: isMobile ? 6 : 10}}>{s.emoji}</div>
              <div style={{
                fontFamily:'var(--hl-font-heading)',
                fontSize: isMobile ? 14 : 16, fontWeight: 600,
                color: c.primaryDark, marginBottom: isMobile ? 6 : 8,
              }}>如果你擅長 {s.tag}</div>
              <div style={{
                fontSize: isMobile ? 13 : 14, color: c.inkSoft, lineHeight: 1.65,
              }}>{s.text}</div>
            </div>
          ))}
        </div>

        <div style={{
          maxWidth: 720, margin:'32px auto 0',
          padding:'18px 22px',
          background: c.accentSoft,
          borderRadius: 'var(--hl-radius-md, 14px)',
          fontSize: 14, color: c.inkSoft, lineHeight: 1.75,
        }}>
          做這些事情，如果你覺得需要收取合理的費用，是完全 OK 的。只是協會仍然希望能夠提供一些名額，給真正無力負擔的族群。
        </div>
      </section>

      {/* 召喚 */}
      <section style={{padding: isMobile ? '24px 16px' : '40px 24px'}}>
        <div style={{
          maxWidth: 720, margin:'0 auto',
          textAlign:'center',
          padding: isMobile ? '32px 22px' : '48px 32px',
          background: c.paper,
          border:`1px solid ${c.line}`,
          borderRadius: 'var(--hl-radius-2xl, 28px)',
        }}>
          <div style={{
            fontFamily:'var(--hl-font-heading)',
            fontSize: 13, color: c.primary,
            letterSpacing:'0.15em', marginBottom: 16,
          }}>不用先準備好才能來</div>
          <div style={{
            fontFamily:'var(--hl-font-heading)',
            fontSize: isMobile ? 19 : 26, color: c.ink, fontWeight: 500,
            lineHeight: 1.6, marginBottom: 16,
          }}>
            你會不會願意用自己一點點的時間、心力、才幹、金錢，{isMobile ? ' ' : <br/>}來祝福身邊的人呢？
          </div>
          <div style={{
            fontSize: isMobile ? 14 : 15, color: c.inkSoft, lineHeight: 1.85,
          }}>
            假如你願意，協會想邀請你來一起接受訪談，錄製影片來介紹自己以及你想經營的事工，讓我們可以接觸到更多有需要的人。
          </div>
        </div>
      </section>

      {/* 8 題訪前提問 */}
      <section style={{padding: isMobile ? '20px 16px 16px' : '32px 24px 24px'}}>
        <div style={{maxWidth: 760, margin:'0 auto'}}>
          <SectionTitle
            eyebrow="STEP 1"
            title="訪前提問"
            subtitle="請先在腦中想想下方的問題，把回答整理給我們，再由協會專人約您錄製影片。日後若是開發「好鄰居系統」（暫名），這些影片也會成為系統上面大家的事工介紹，方便更多人來到我們當中體驗，也方便募集資源來支持各位的事工。"
            align="center"
          />

          <div style={{
            marginTop: isMobile ? 24 : 36,
            display:'grid', gap: isMobile ? 8 : 12,
          }}>
            {questions.map((q, i) => (
              <div key={i} style={{
                display:'flex', alignItems:'flex-start', gap: isMobile ? 12 : 16,
                background: c.paper,
                border:`1px solid ${c.line}`,
                borderRadius: 'var(--hl-radius-lg, 18px)',
                padding: isMobile ? '12px 14px' : '18px 22px',
              }}>
                <div style={{
                  flexShrink: 0,
                  width: isMobile ? 26 : 32, height: isMobile ? 26 : 32,
                  borderRadius: '50%',
                  background: c.primarySoft,
                  color: c.primaryDark,
                  display:'inline-flex',
                  alignItems:'center', justifyContent:'center',
                  fontFamily:'var(--hl-font-heading)',
                  fontSize: isMobile ? 13 : 15, fontWeight: 600,
                }}>{i + 1}</div>
                <div style={{
                  fontSize: isMobile ? 14 : 15, color: c.ink, lineHeight: 1.7,
                  paddingTop: isMobile ? 2 : 4,
                }}>{q}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* AI Prompt */}
      <section style={{padding: isMobile ? '24px 16px 16px' : '40px 24px 24px'}}>
        <div style={{maxWidth: 760, margin:'0 auto'}}>
          <SectionTitle
            eyebrow="STEP 2 ‧ 選用"
            title="用 AI 揣摩對方的感受"
            subtitle="想好回答之後，可以用 AI 工具揣摩看看：如果今天有一個正在掙扎、想被幫助的人出現，當他聽到你這些回答之後，可能會有什麼感受？"
            align="center"
          />

          <div style={{
            marginTop: 28,
            background: c.paper,
            border:`1px solid ${c.line}`,
            borderRadius: 'var(--hl-radius-lg, 18px)',
            overflow:'hidden',
          }}>
            <div style={{
              display:'flex', alignItems:'center', justifyContent:'space-between',
              padding:'14px 18px',
              borderBottom:`1px solid ${c.line}`,
              background: c.bgAlt,
            }}>
              <div style={{
                fontSize: 13, color: c.inkSoft,
                fontWeight: 500, letterSpacing:'0.05em',
              }}>Prompt 範例</div>
              <button onClick={onCopyPrompt} style={{
                padding:'6px 14px',
                background: copied ? c.accent : c.primary,
                color:'#fff', border:'none',
                borderRadius: 999, cursor:'pointer',
                fontSize: 12, fontWeight: 600,
                fontFamily:'var(--hl-font-body)',
                transition:'background 200ms',
              }}>{copied ? '已複製 ✓' : '複製 prompt'}</button>
            </div>
            <pre style={{
              margin: 0, padding:'24px 26px',
              fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace',
              fontSize: 13, lineHeight: 1.75,
              color: c.ink,
              whiteSpace: 'pre-wrap',
              wordBreak:'break-word',
            }}>{promptText}</pre>
          </div>

          <div style={{
            marginTop: 12,
            fontSize: 13, color: c.inkMuted,
            textAlign:'center',
          }}>
            可貼到 Claude / ChatGPT / Gemini 試試看它的回應
          </div>
        </div>
      </section>

      {/* 後續流程 */}
      <section style={{padding: isMobile ? '24px 16px' : '40px 24px'}}>
        <div style={{
          maxWidth: 720, margin:'0 auto',
          background: c.primarySoft,
          borderRadius: 'var(--hl-radius-2xl, 28px)',
          padding: isMobile ? '28px 22px' : '40px 36px',
          textAlign:'center',
        }}>
          <div style={{fontSize: 28, marginBottom: 16}}>💌</div>
          <div style={{
            fontFamily:'var(--hl-font-heading)',
            fontSize: isMobile ? 18 : 22, fontWeight: 500, color: c.ink,
            marginBottom: 16, lineHeight: 1.55,
          }}>
            想清楚之後，請在群組裡私訊鴻仁
          </div>
          <div style={{
            fontSize: isMobile ? 14 : 15, color: c.inkSoft, lineHeight: 1.85,
            maxWidth: 520, margin:'0 auto',
          }}>
            我會跟 Jennifer 討論之後，再跟大家喬錄影的時間。我們會配合一位攝影師進行，盡量讓攝影師排同一天，這樣內容的產出比較有效率，這點麻煩大家多幫忙了。
          </div>
        </div>
      </section>

      {/* 逛逛系統 */}
      <section style={{padding: '40px 24px 80px'}}>
        <div style={{
          maxWidth: 720, margin:'0 auto',
          textAlign:'center',
          paddingTop: 32,
          borderTop:`1px dashed ${c.line}`,
        }}>
          <div style={{
            fontSize: 14, color: c.inkMuted,
            letterSpacing:'0.05em', marginBottom: 12,
          }}>
            想看看未來的好鄰居系統長怎樣？
          </div>
          <Button variant="secondary" size="md" onClick={() => onNav('home')}>
            逛逛 prototype 預覽 →
          </Button>
          <div style={{
            marginTop: 24,
            fontSize: 12, color: c.inkMuted,
          }}>
            這是還在開發中的預覽版本，內容皆為示意。
          </div>
        </div>
      </section>

    </div>
  );
};