// Claimmee 帮助中心 / 联系客服。合成演示。
const H = window.ClaimmeeDesignSystem_e4fda8;
const MktH = window.ClaimmeeMkt;
const RevealH = window.ClaimmeeReveal;
const SecTitleH = window.ClaimmeeSectionTitle;

function Help() {
  const wrap = { width: 'min(1000px, calc(100vw - 32px))', margin: '0 auto' };
  const [q, setQ] = React.useState('');
  const help = MktH.HELP;

  return (
    <div style={{ background: 'var(--bg-page)', paddingBottom: 90 }}>
      <section style={{ background: 'var(--grad-hero)', paddingTop: 56, paddingBottom: 56 }}>
        <div style={{ ...wrap, textAlign: 'center' }}>
          <div style={{ color: 'var(--teal-100)', fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>帮助中心</div>
          <h1 style={{ margin: '14px 0 22px', color: '#fff', fontSize: 'clamp(2rem,4vw,3rem)', fontWeight: 950, letterSpacing: '-0.03em' }}>有什么可以帮你？</h1>
          <div style={{ maxWidth: 520, margin: '0 auto', position: 'relative' }}>
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="搜索问题，例如「延误多久能赔」" style={{ width: '100%', border: 0, borderRadius: 'var(--radius-pill)', padding: '1rem 1.4rem', fontSize: '1rem', fontFamily: 'var(--font-sans)', boxShadow: 'var(--shadow-card)', boxSizing: 'border-box' }} />
          </div>
        </div>
      </section>

      {/* 分类 */}
      <section style={{ ...wrap, paddingTop: 56 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }} className="two-col">
          {help.categories.map((cat, i) => (
            <RevealH key={cat.title} delay={i * 70}>
              <H.Panel style={{ height: '100%' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                  <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--teal-100)', color: 'var(--teal-700)', display: 'grid', placeItems: 'center', fontWeight: 900, fontSize: '1.1rem' }}>{cat.icon}</span>
                  <h3 style={{ margin: 0, fontSize: '1.2rem', fontWeight: 800, color: 'var(--slate-900)' }}>{cat.title}</h3>
                </div>
                <div style={{ display: 'grid', gap: 2 }}>
                  {cat.items.map((it) => (
                    <a key={it} href="#" onClick={(e) => e.preventDefault()} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 4px', color: 'var(--slate-700)', textDecoration: 'none', borderBottom: '1px solid var(--border-subtle)', fontWeight: 600 }}>
                      <span>{it}</span><span style={{ color: 'var(--teal-700)', fontWeight: 900 }}>›</span>
                    </a>
                  ))}
                </div>
              </H.Panel>
            </RevealH>
          ))}
        </div>
      </section>

      {/* 联系渠道 */}
      <section style={{ ...wrap, paddingTop: 72 }}>
        <SecTitleH eyebrow="联系我们" title="还没找到答案？" sub="中文客服随时为你解答。" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="three-col">
          {help.channels.map((ch, i) => (
            <RevealH key={ch.name} delay={i * 70}>
              <H.Panel style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <h3 style={{ margin: 0, fontSize: '1.15rem', fontWeight: 800, color: 'var(--slate-900)' }}>{ch.name}</h3>
                <p style={{ margin: 0, color: 'var(--text-muted)', lineHeight: 1.6, flex: 1 }}>{ch.detail}</p>
                <H.Button variant="secondary" size="sm">{ch.action}</H.Button>
              </H.Panel>
            </RevealH>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ ...wrap, paddingTop: 72 }}>
        <H.Panel variant="tint" style={{ textAlign: 'center', padding: '44px 32px' }}>
          <h2 style={{ margin: '0 0 10px', fontSize: 'clamp(1.5rem,3vw,2.2rem)', fontWeight: 900, color: 'var(--slate-900)' }}>先看看你的航班能赔多少</h2>
          <p style={{ margin: '0 auto 22px', color: 'var(--text-body)', maxWidth: 420, lineHeight: 1.6 }}>免费初筛，3 分钟出结果。</p>
          <H.Button variant="primary" size="lg" onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('funnel')}>开始免费初筛 →</H.Button>
        </H.Panel>
        <H.Disclaimer style={{ marginTop: 16 }}>客服渠道与邮箱为演示占位，不提供真实人工服务。</H.Disclaimer>
      </section>
    </div>
  );
}

window.Help = Help;