// Variant A · 「凝视」— 接 API 版本
// 增加：救助故事 / 实时看板 / 透明公示 / 关于我们 / Footer 五个 section
// 顶部导航全部可点击：滚动 to section / 打开对应弹窗

const VariantALive = () => {
  const { useState, useEffect, useRef, useMemo } = React;

  const PLACEHOLDER = "https://images.unsplash.com/photo-1574144611937-0df059b5ef3e?auto=format&fit=crop&w=900&q=80";

  // ----- state -----
  const [stats, setStats] = useState({
    rescued: 1247, adopted: 893, volunteers: 156, fund_efficiency_pct: 87,
    new_this_week: 23, urgent_now: 5,
  });
  const [animals,  setAnimals]  = useState([]);
  const [stories,  setStories]  = useState([]);
  const [cases,    setCases]    = useState([]);
  const [kpi,      setKpi]      = useState({ period: null, items: [] });
  const [fund,     setFund]     = useState({ period: null, items: [], total_amount_yuan: 0, fund_efficiency_pct: 87 });

  const [emergencyOpen, setEmergencyOpen] = useState(false);
  const [donateOpen,    setDonateOpen]    = useState(false);
  const [volunteerOpen, setVolunteerOpen] = useState(false);
  const [adoptOpen,     setAdoptOpen]     = useState(null);

  // refs for scrolling
  const refAdopt   = useRef(null);
  const refStories = useRef(null);
  const refDash    = useRef(null);
  const refAbout   = useRef(null);

  // ----- data -----
  useEffect(() => {
    (async () => {
      try {
        const [s, a, st, c, k, f] = await Promise.all([
          window.GP.stats()           .catch(() => null),
          window.GP.featuredAnimals() .catch(() => null),
          window.GP.stories({ limit: 3 }).catch(() => null),
          window.GP.liveCases()       .catch(() => null),
          window.GP.kpi()             .catch(() => null),
          window.GP.fundAllocation()  .catch(() => null),
        ]);
        if (s)  setStats(prev => ({ ...prev, ...s }));
        if (a)  setAnimals(a.slice(0, 4).map(x => ({
          id: x.id, name: x.name,
          tag: [x.breed, x.species === 'cat' ? '猫' : '狗',
                x.gender === 'female' ? '母' : '公',
                x.neutered ? '已绝育' : '未绝育',
                x.age_months ? '约' + Math.max(1, Math.round(x.age_months / 12)) + '岁' : null
               ].filter(Boolean).join('·'),
          note: x.medical_note, loc: x.location,
          img: x.image_url || PLACEHOLDER,
          urgent: !!x.urgent_medical, status: x.status, raw: x,
        })));
        if (st && st.items) setStories(st.items);
        if (c)  setCases(c);
        if (k)  setKpi(k);
        if (f)  setFund(f);
      } catch (e) { console.warn('[Variant A] fallback to mock:', e.message); }
    })();
  }, []);

  // ----- nav helpers -----
  const scrollTo = (ref) => ref.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  const NavItem = ({ label, onClick, active = false, dim = false }) => (
    <span style={{ cursor: 'pointer', opacity: dim ? 0.7 : 1, color: active ? 'var(--accent)' : 'inherit' }}
          onClick={onClick}>
      {label}
    </span>
  );

  // ----- stats display -----
  const statBoxes = [
    { n: stats.rescued.toLocaleString(),   label: '已救助生命', since: '自 2019' },
    { n: stats.adopted.toLocaleString(),   label: '已找到家庭', since: '领养成功' },
    { n: stats.volunteers.toLocaleString(),label: '在册志愿者', since: '覆盖 28 城' },
    { n: stats.fund_efficiency_pct + '%',  label: '善款落地率', since: '2024 审计' },
  ];

  // fallback 动物
  const R = (window.__resources || {});
  const fallbackAnimals = [
    { name: '欣欣', tag: '田园猫·母·已绝育·约2岁',  loc: '成都·武侯', img: R.catTabby  || 'assets/cat-tabby.jpg',  urgent: true  },
    { name: '妙妙', tag: '田园猫·公·已绝育·约10岁', loc: '北京·朝阳', img: R.catWhite  || 'assets/cat-white.jpg',  urgent: false },
    { name: '毛毛', tag: '田园猫·公·已绝育·约10岁', note: '车祸左后腿截肢', loc: '杭州·西湖', img: R.catOrange || 'assets/cat-orange.jpg', urgent: false },
    { name: 'Kiki', tag: '田园猫·公·已绝育·约4岁',  loc: '上海·浦东', img: R.catKiki   || 'assets/cat-kiki.jpg',   urgent: false },
  ];
  const featured = animals.length ? animals : fallbackAnimals;

  // ----- donut math for fund allocation -----
  const C_R = 56;
  const C_CIRC = 2 * Math.PI * C_R;
  const donutSegments = useMemo(() => {
    let off = 0;
    return (fund.items || []).map(seg => {
      const len = (seg.pct / 100) * C_CIRC;
      const res = { ...seg, len, off };
      off += len;
      return res;
    });
  }, [fund]);

  return (
    <div className="gp-root" style={{ width: '100%', background: '#fff' }}>
      {/* Top urgent ribbon */}
      <div style={{
        background: '#0F4C81', color: '#fff', padding: '12px 56px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 15, letterSpacing: 0.2,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ display: 'inline-block', width: 9, height: 9, borderRadius: 999, background: '#E76F51' }}></span>
          <span>本周新增 <b className="tabular">{stats.new_this_week}</b> 例待救助 · 当前有 <b className="tabular">{stats.urgent_now}</b> 例紧急</span>
        </div>
        <div style={{ display: 'flex', gap: 24, opacity: 0.85, fontSize: 14 }}>
          <span style={{ cursor: 'pointer' }} onClick={() => setEmergencyOpen(true)}>紧急上报</span>
          <span>简体中文</span>
        </div>
      </div>

      {/* HERO */}
      <section style={{ position: 'relative', height: 780, overflow: 'hidden', background: '#0a1a2a' }}>
        <img
          src={(window.__resources && window.__resources.dogVet) || 'assets/dog-vet.jpg'}
          alt="医院里一只被救助的土狗正在接受体检"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 55%' }}
        />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(10,20,30,0.35) 0%, rgba(10,20,30,0.05) 30%, rgba(10,20,30,0.15) 55%, rgba(10,20,30,0.85) 100%)',
        }}></div>

        <header style={{
          position: 'relative', zIndex: 2,
          padding: '24px 56px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          color: '#fff',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}
               onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
            <div style={{ width: 42, height: 42, borderRadius: 8, background: 'rgba(255,255,255,0.12)', border: '1.5px solid rgba(255,255,255,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg className="gp-icon" style={{ width: 22, height: 22 }} viewBox="0 0 24 24">
                <path d="M11 5.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z M17 5.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z M6 11.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z M22 11.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z M12 22c-3 0-5-2-5-4.5S9 13 12 13s5 2 5 4.5S15 22 12 22Z"/>
              </svg>
            </div>
            <div>
              <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: 1 }}>守望小生灵</div>
              <div style={{ fontSize: 11, letterSpacing: 2.5, opacity: 0.7, marginTop: 2 }}>GUARDIAN PAWS</div>
            </div>
          </div>
          <nav style={{ display: 'flex', gap: 32, fontSize: 16, fontWeight: 500 }}>
            <NavItem label="领养"     onClick={() => scrollTo(refAdopt)} />
            <NavItem label="捐赠"     onClick={() => setDonateOpen(true)} />
            <NavItem label="紧急救助" onClick={() => setEmergencyOpen(true)} />
            <NavItem label="救助故事" onClick={() => scrollTo(refStories)} />
            <NavItem label="志愿者"   onClick={() => setVolunteerOpen(true)} />
            <NavItem label="透明公示" onClick={() => scrollTo(refDash)} />
            <NavItem label="关于"     onClick={() => scrollTo(refAbout)} dim />
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <button className="gp-btn gp-btn-sm gp-btn-ghost-light" onClick={() => alert('登录功能演示中（API 已实现 /api/auth/login）')}>登录</button>
            <button className="gp-btn gp-btn-sm gp-btn-accent" onClick={() => setDonateOpen(true)}>立即捐赠</button>
          </div>
        </header>

        <div style={{
          position: 'absolute', left: 56, right: 56, bottom: 56, zIndex: 2,
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 48,
        }}>
          <div style={{ color: '#fff', maxWidth: 820 }}>
            <div style={{ fontSize: 15, letterSpacing: 3, fontWeight: 600, opacity: 0.9, marginBottom: 22, textTransform: 'uppercase' }}>
              第 {stats.rescued.toLocaleString()} 个故事 · 2026
            </div>
            <h1 style={{
              fontFamily: 'var(--font-serif)',
              fontSize: 88, lineHeight: 1.08, fontWeight: 700,
              letterSpacing: '-0.02em', marginBottom: 28,
            }}>
              每一个生命，<br/>都值得被看见。
            </h1>
            <p style={{ fontSize: 21, lineHeight: 1.6, opacity: 0.95, maxWidth: 620, fontWeight: 400 }}>
              我们记录每一只动物从街头到家庭的完整旅程 ——
              你的每一份支持，都会变成可被追溯的善意。
            </p>
            <div style={{ display: 'flex', gap: 16, marginTop: 40 }}>
              <button className="gp-btn gp-btn-lg gp-btn-accent" onClick={() => scrollTo(refAdopt)}>
                查看待领养的伙伴
                <svg className="gp-icon" viewBox="0 0 24 24"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </button>
              <button className="gp-btn gp-btn-lg gp-btn-ghost-light" onClick={() => scrollTo(refAbout)}>了解我们的工作</button>
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section style={{ padding: '88px 56px 80px', background: '#fff', borderBottom: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
          <div>
            <div style={{ fontSize: 14, letterSpacing: 3, fontWeight: 600, color: 'var(--accent)', marginBottom: 12, textTransform: 'uppercase' }}>
              · 截至 2026 年 5 月
            </div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 48, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em' }}>
              这是我们走过的路
            </h2>
          </div>
          <a style={{ fontSize: 16, color: 'var(--primary)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}
             onClick={() => scrollTo(refDash)}>
            查看完整年报 <svg className="gp-icon" viewBox="0 0 24 24"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {statBoxes.map((s, i) => (
            <div key={i} style={{
              padding: '24px 32px 8px 0',
              borderLeft: i === 0 ? 'none' : '1px solid var(--border)',
              paddingLeft: i === 0 ? 0 : 40,
            }}>
              <div className="tabular" style={{
                fontSize: 80, fontWeight: 800, color: 'var(--text)',
                letterSpacing: '-0.04em', lineHeight: 1, fontFamily: 'var(--font-num)',
              }}>{s.n}</div>
              <div style={{ fontSize: 19, fontWeight: 600, color: 'var(--text)', marginTop: 18 }}>{s.label}</div>
              <div style={{ fontSize: 15, color: 'var(--text-muted)', marginTop: 6 }}>{s.since}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Featured animals */}
      <section ref={refAdopt} style={{ padding: '80px 56px 96px', background: 'var(--neutral-bg)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40 }}>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 48, fontWeight: 700, letterSpacing: '-0.02em' }}>
            今天，他们在等你
          </h2>
          <div style={{ display: 'flex', gap: 12 }}>
            <button className="gp-btn gp-btn-sm gp-btn-ghost" onClick={() => alert('完整领养列表页 API 已就绪：/api/animals')}>所有 {animals.length || 247} 只</button>
            <button className="gp-btn gp-btn-sm gp-btn-primary" onClick={() => alert('筛选页（按城市/物种/紧急）API 已支持')}>高级筛选</button>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {featured.map((a, i) => (
            <article key={i} style={{ cursor: a.raw ? 'pointer' : 'default' }} onClick={() => a.raw && setAdoptOpen(a.raw)}>
              <div style={{ position: 'relative', aspectRatio: '4/5', borderRadius: 8, overflow: 'hidden', background: '#ddd' }}>
                <img src={a.img} alt={a.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                {a.urgent && (
                  <div style={{ position: 'absolute', top: 12, left: 12, padding: '5px 11px', background: 'var(--accent)', color: '#fff', fontSize: 13, fontWeight: 700, borderRadius: 4, letterSpacing: 0.5 }}>
                    医疗紧急
                  </div>
                )}
                <button style={{ position: 'absolute', top: 12, right: 12, width: 34, height: 34, borderRadius: 999, background: 'rgba(255,255,255,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                        onClick={async (e) => {
                          e.stopPropagation();
                          if (!a.raw) { window.GP.toast('登录后可收藏'); return; }
                          try { await window.GP.favorite(a.raw.id); window.GP.toast('已收藏'); }
                          catch { window.GP.toast('请先登录'); }
                        }}>
                  <svg className="gp-icon" style={{ width: 17, height: 17, stroke: '#333' }} viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                </button>
              </div>
              <div style={{ paddingTop: 18 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                  <h3 style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.01em' }}>{a.name}</h3>
                  <div style={{ fontSize: 14, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 4 }}>
                    <svg className="gp-icon" style={{ width: 13, height: 13 }} viewBox="0 0 24 24"><path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    {a.loc}
                  </div>
                </div>
                <div style={{ fontSize: 15, color: 'var(--text-muted)' }}>{a.tag}</div>
                {a.note && (
                  <div style={{ fontSize: 14, color: 'var(--accent)', marginTop: 4, fontWeight: 500 }}>{a.note}</div>
                )}
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* 救助故事 */}
      <section ref={refStories} style={{ padding: '88px 56px 96px', background: '#fff' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
          <div>
            <div style={{ fontSize: 14, letterSpacing: 3, fontWeight: 600, color: 'var(--secondary)', marginBottom: 12, textTransform: 'uppercase' }}>
              · 救助手记
            </div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 44, fontWeight: 700, letterSpacing: '-0.02em' }}>
              真实发生的，每一个不被翻篇的故事
            </h2>
          </div>
          <a style={{ fontSize: 16, color: 'var(--primary)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}
             onClick={() => alert('全部故事页 API 已就绪：/api/stories')}>
            全部故事 <svg className="gp-icon" viewBox="0 0 24 24"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {(stories.length ? stories : [
            { id: 'a', title: '在高架桥下，我们等了三天', excerpt: '那只警惕的橘猫终于走出了纸箱⋯⋯', tag: '救助手记', author: '志愿者 / 小满', published_at: '2026-04-28',
              image_url: 'https://images.unsplash.com/photo-1583337130417-3346a1be7dee?auto=format&fit=crop&w=900&q=80' },
            { id: 'b', title: '三年后的咖啡：豆豆的新生活', excerpt: '曾经怕人不敢靠近的小狗⋯⋯', tag: '领养回访', author: '回访员 / 阿茶', published_at: '2026-04-20',
              image_url: 'https://images.unsplash.com/photo-1450778869180-41d0601e046e?auto=format&fit=crop&w=900&q=80' },
            { id: 'c', title: '把一只 0.8 公斤的小猫救回来',  excerpt: '脱水、口炎、低血糖⋯⋯',         tag: '医疗档案', author: '驻站医师 / 老周', published_at: '2026-04-11',
              image_url: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?auto=format&fit=crop&w=900&q=80' },
          ]).map((s) => (
            <article key={s.id} style={{ background: '#fff', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border)', cursor: 'pointer' }}
                     onClick={() => alert('故事详情页待开发\n后端 API: /api/stories/' + (s.slug || s.id))}>
              <div style={{ aspectRatio: '4/3', overflow: 'hidden', background: '#ddd' }}>
                <img src={s.image_url} alt={s.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ padding: '20px 22px 22px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                  <span className="gp-chip gp-chip-secondary" style={{ fontSize: 11 }}>{s.tag}</span>
                  <span style={{ fontSize: 12, color: 'var(--text-muted)' }} className="tabular">{(s.published_at || '').slice(0, 10).replace(/-/g, '.')}</span>
                </div>
                <h3 style={{ fontSize: 19, fontWeight: 700, marginBottom: 10, lineHeight: 1.4 }}>{s.title}</h3>
                <p style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.65, marginBottom: 14 }}>{s.excerpt}</p>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 12, borderTop: '1px solid var(--border)' }}>
                  <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{s.author}</span>
                  <span style={{ fontSize: 13, color: 'var(--primary)', fontWeight: 600 }}>继续阅读 →</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* 透明公示 + 实时看板 */}
      <section ref={refDash} style={{ padding: '88px 56px 96px', background: 'var(--neutral-bg)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
          <div>
            <div style={{ fontSize: 14, letterSpacing: 3, fontWeight: 600, color: 'var(--primary)', marginBottom: 12, textTransform: 'uppercase' }}>
              · {kpi.period || '2026-05'} · 月度公示
            </div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 44, fontWeight: 700, letterSpacing: '-0.02em' }}>
              每一块钱都看得见
            </h2>
          </div>
          <a style={{ fontSize: 16, color: 'var(--primary)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}
             onClick={() => alert('完整对账 / 审计 PDF 上传后可见')}>
            查看完整对账 <svg className="gp-icon" viewBox="0 0 24 24"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 32, alignItems: 'start' }}>
          {/* KPI cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {(kpi.items || []).map((k, i) => (
              <div key={i} style={{ padding: 22, border: '1px solid var(--border)', borderRadius: 12, background: '#fff' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
                  <span style={{ fontSize: 13, color: 'var(--text-muted)', fontWeight: 500 }}>{k.label}</span>
                  <span className="tabular" style={{ fontSize: 11, color: 'var(--text-muted)' }}>目标 {k.goal}{k.unit}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
                  <span className="tabular" style={{ fontSize: 40, fontWeight: 800, letterSpacing: '-0.03em', color: 'var(--text)', lineHeight: 1 }}>{k.value}</span>
                  <span style={{ fontSize: 14, color: 'var(--text-muted)', fontWeight: 500 }}>{k.unit}</span>
                  <span className="tabular" style={{ marginLeft: 'auto', fontSize: 13, fontWeight: 700, color: k.color }}>{k.pct}%</span>
                </div>
                <div style={{ height: 6, background: 'var(--border)', borderRadius: 999, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${k.pct}%`, background: k.color, borderRadius: 999 }}></div>
                </div>
              </div>
            ))}
          </div>

          {/* Fund allocation donut */}
          <div style={{ padding: 24, border: '1px solid var(--border)', borderRadius: 12, background: '#fff' }}>
            <div style={{ fontSize: 13, color: 'var(--text-muted)', fontWeight: 500, marginBottom: 4 }}>
              {fund.period || '2026'} 年度善款流向
            </div>
            <h3 style={{ fontSize: 22, fontWeight: 800, marginBottom: 20 }}>
              ¥ {fund.total_amount_yuan ? (fund.total_amount_yuan / 10000).toFixed(1) : '64.8'} 万
            </h3>
            <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
              <svg width="140" height="140" viewBox="0 0 140 140" style={{ flex: '0 0 auto' }}>
                <circle cx="70" cy="70" r={C_R} fill="none" stroke="var(--border)" strokeWidth="16"/>
                {donutSegments.map((seg, i) => (
                  <circle key={i} cx="70" cy="70" r={C_R}
                    fill="none" stroke={seg.color} strokeWidth="16"
                    strokeDasharray={`${seg.len} ${C_CIRC - seg.len}`}
                    strokeDashoffset={-seg.off}
                    transform="rotate(-90 70 70)"/>
                ))}
                <text x="70" y="68" textAnchor="middle" fontFamily="var(--font-num)" fontSize="20" fontWeight="800" fill="var(--text)" className="tabular">{fund.fund_efficiency_pct}%</text>
                <text x="70" y="84" textAnchor="middle" fontSize="9" fill="var(--text-muted)">直接落地率</text>
              </svg>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                {(fund.items || []).map((seg, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                    <span style={{ width: 9, height: 9, borderRadius: 2, background: seg.color, flex: '0 0 auto' }}></span>
                    <span style={{ flex: 1, color: 'var(--text)' }}>{seg.label}</span>
                    <span className="tabular" style={{ fontWeight: 700, color: 'var(--text)' }}>{seg.pct}%</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ marginTop: 18, padding: '12px 14px', background: 'var(--neutral-bg)', borderRadius: 8, fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.55 }}>
              第三方会计师事务所审计 · 年报已上传至民政公示平台
            </div>
          </div>
        </div>

        {/* Live cases ticker */}
        {cases.length > 0 && (
          <div style={{ marginTop: 36, padding: 24, border: '1px solid var(--border)', borderRadius: 12, background: '#fff' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
              <div>
                <div style={{ fontSize: 11, letterSpacing: 2, fontWeight: 700, color: 'var(--accent)', marginBottom: 4 }}>LIVE · 实时工单</div>
                <h3 style={{ fontSize: 18, fontWeight: 700 }}>今天的救助行动</h3>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-muted)' }}>
                <span style={{ display: 'inline-block', width: 7, height: 7, borderRadius: 999, background: 'var(--secondary)', boxShadow: '0 0 0 4px rgba(42,157,143,0.2)' }}></span>
                指挥系统在线
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13 }}>
              {cases.slice(0, 5).map((c) => (
                <div key={c.id} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '10px 12px', borderRadius: 8,
                  background: c.urgent ? 'rgba(231,111,81,0.06)' : 'transparent',
                  border: c.urgent ? '1px solid rgba(231,111,81,0.2)' : '1px solid var(--border)',
                }}>
                  <span className="tabular" style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 600, minWidth: 110 }}>{c.case_no}</span>
                  <span style={{ fontSize: 13, color: 'var(--text)', fontWeight: 500, flex: 1 }}>{c.location} · {c.species}</span>
                  <span style={{
                    fontSize: 11, fontWeight: 600,
                    padding: '2px 8px', borderRadius: 4,
                    background: c.status === 'in_treatment' ? '#FCE7E0' :
                                c.status === 'closed'       ? '#DCF0EC' :
                                c.status === 'dispatched'   ? 'rgba(15,76,129,0.1)' :
                                                              'var(--neutral-bg)',
                    color:      c.status === 'in_treatment' ? 'var(--accent-hover)' :
                                c.status === 'closed'       ? 'var(--secondary-hover)' :
                                c.status === 'dispatched'   ? 'var(--primary)' :
                                                              'var(--text-muted)',
                  }}>{c.status_label || c.status}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </section>

      {/* 关于我们 */}
      <section ref={refAbout} style={{ padding: '88px 56px 96px', background: '#fff' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 14, letterSpacing: 3, fontWeight: 600, color: 'var(--accent)', marginBottom: 12, textTransform: 'uppercase' }}>· 关于我们</div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 44, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 28 }}>
              一群普通人，<br/>把救助做成一件认真的小事。
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--text-muted)', marginBottom: 16 }}>
              守望小生灵成立于 2019 年，由一群志愿者、动物医生与社工组成。我们坚持「救助、绝育、回访」三步走，
              每一只动物从街头被发现起，都会有一个工单号陪伴它，直到走进新家庭的那一天。
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--text-muted)', marginBottom: 28 }}>
              我们相信透明是信任的起点，每一笔捐赠都能在公示页查到去向；每一次救助都可以被回望。
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              {[
                { label: '成立时间', value: '2019' },
                { label: '覆盖城市', value: '28' },
                { label: '合作医院', value: '47' },
              ].map((it, i) => (
                <div key={i} style={{ padding: '14px 18px', background: 'var(--neutral-bg)', borderRadius: 10 }}>
                  <div className="tabular" style={{ fontSize: 30, fontWeight: 800, color: 'var(--text)', letterSpacing: '-0.02em' }}>{it.value}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 4 }}>{it.label}</div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
              <button className="gp-btn gp-btn-primary" onClick={() => setVolunteerOpen(true)}>加入志愿者</button>
              <button className="gp-btn gp-btn-ghost" onClick={() => setDonateOpen(true)}>支持我们</button>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{
              position: 'relative', borderRadius: 16, overflow: 'hidden',
              boxShadow: '0 24px 60px -20px rgba(15,76,129,0.35)', aspectRatio: '4/3', background: '#ddd',
            }}>
              <img src={(window.__resources && window.__resources.dogVet) || 'assets/dog-vet.jpg'}
                   alt="志愿者与被救助的动物" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{
              position: 'absolute', left: -24, bottom: 32, background: '#fff',
              padding: '14px 18px', borderRadius: 12, border: '1px solid var(--border)',
              boxShadow: '0 10px 30px -8px rgba(0,0,0,0.15)',
              display: 'flex', alignItems: 'center', gap: 12, fontSize: 13,
            }}>
              <span style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--secondary)' }}></span>
              <span style={{ fontWeight: 600 }}>4.9 / 5.0</span>
              <span style={{ color: 'var(--text-muted)' }}>领养家庭年度回访</span>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer style={{ background: '#0a1a2a', color: 'rgba(255,255,255,0.7)', padding: '56px 56px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(3, 1fr)', gap: 40, marginBottom: 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg className="gp-icon" style={{ width: 20, height: 20, stroke: '#fff' }} viewBox="0 0 24 24">
                  <path d="M11 5.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z M17 5.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z M6 11.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z M22 11.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z M12 22c-3 0-5-2-5-4.5S9 13 12 13s5 2 5 4.5S15 22 12 22Z"/>
                </svg>
              </div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 800, color: '#fff' }}>守望小生灵</div>
                <div style={{ fontSize: 11, letterSpacing: 2.5, opacity: 0.6 }}>GUARDIAN PAWS · 自 2019</div>
              </div>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.7, marginBottom: 16, maxWidth: 320 }}>
              一家专注城市流浪动物救助的非营利组织。
              每一次救助都有工单号，每一笔捐赠都能查去向。
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              <NewsletterInline />
            </div>
          </div>
          {[
            { title: '参与方式', items: [
              ['领养',     () => scrollTo(refAdopt)],
              ['捐赠',     () => setDonateOpen(true)],
              ['志愿者',   () => setVolunteerOpen(true)],
              ['紧急上报', () => setEmergencyOpen(true)]] },
            { title: '了解我们', items: [
              ['关于',     () => scrollTo(refAbout)],
              ['救助故事', () => scrollTo(refStories)],
              ['透明公示', () => scrollTo(refDash)],
              ['年报',     () => alert('年报 PDF 上传后可下载')]] },
            { title: '联系', items: [
              ['hello@guardian-paws.org', null],
              ['400-820-0001 (工作日)',   null],
              ['Cloudflare 演示环境',      null],
              ['北京 · 上海 · 成都 · 杭州',null]] },
          ].map((col, i) => (
            <div key={i}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 14, letterSpacing: 1 }}>{col.title}</div>
              {col.items.map(([txt, fn], j) => (
                <div key={j} style={{ fontSize: 13, marginBottom: 10, cursor: fn ? 'pointer' : 'default' }} onClick={fn || undefined}>
                  {txt}
                </div>
              ))}
            </div>
          ))}
        </div>
        <div style={{ paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', justifyContent: 'space-between', fontSize: 12, opacity: 0.6 }}>
          <div>© 2026 守望小生灵 · 演示站点</div>
          <div>由 Cloudflare Pages + Workers + D1 提供运行环境</div>
        </div>
      </footer>

      {/* Modals */}
      {emergencyOpen && <window.EmergencyModal onClose={() => setEmergencyOpen(false)} />}
      {donateOpen    && <window.DonateModal    onClose={() => setDonateOpen(false)} />}
      {volunteerOpen && <window.VolunteerModal onClose={() => setVolunteerOpen(false)} />}
      {adoptOpen     && <window.AdoptModal animal={adoptOpen} onClose={() => setAdoptOpen(null)} />}
    </div>
  );
};

// 邮件订阅小组件
const NewsletterInline = () => {
  const [email, setEmail] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const submit = async () => {
    if (!email.includes('@')) return window.GP.toast('邮箱无效');
    setBusy(true);
    try { await window.GP.subscribe(email); window.GP.toast('订阅成功，谢谢'); setEmail(''); }
    catch (e) { window.GP.toast('订阅失败：' + e.message); }
    finally { setBusy(false); }
  };
  return (
    <div style={{ display: 'flex', gap: 6 }}>
      <input type="email" placeholder="邮箱订阅月报" value={email} onChange={e => setEmail(e.target.value)}
             style={{ flex: 1, padding: '8px 12px', borderRadius: 6,
                      background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.2)',
                      color: '#fff', fontSize: 12, outline: 'none', minWidth: 180 }} />
      <button onClick={submit} disabled={busy}
              style={{ padding: '8px 14px', borderRadius: 6, background: 'var(--accent)',
                       color: '#fff', fontSize: 12, fontWeight: 600, border: 0, cursor: 'pointer' }}>
        {busy ? '…' : '订阅'}
      </button>
    </div>
  );
};

window.VariantALive = VariantALive;