import React, { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { mockAdBanners, mockApps } from '@/mock/data';
import type { AdBanner, MarketApp } from '@/types';
import './LandingPage.css';

/* ---------- 内联 Lucide 风格图标（满足"用 Lucide 图标、禁 emoji"铁律） ---------- */
const Icon: React.FC<{ d: React.ReactNode; size?: number }> = ({ d, size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);

/* ---------- 品牌同系渐变（仅靛蓝→青蓝，无第三色相） ---------- */
const appGradients: Record<string, string> = {
  a1: 'linear-gradient(135deg,#5B5FED 0%,#4F8DF9 100%)',
  a2: 'linear-gradient(135deg,#6366F1 0%,#60A5FA 100%)',
  a3: 'linear-gradient(135deg,#5B5FED 0%,#818CF8 100%)',
  a4: 'linear-gradient(135deg,#4F8DF9 0%,#38BDF8 100%)',
  a5: 'linear-gradient(135deg,#6366F1 0%,#7DD3FC 100%)',
  a6: 'linear-gradient(135deg,#5B5FED 0%,#8185F5 100%)',
  a7: 'linear-gradient(135deg,#4F8DF9 0%,#818CF8 100%)',
  a8: 'linear-gradient(135deg,#6366F1 0%,#4F8DF9 100%)',
};
const gradFor = (id: string) => appGradients[id] || 'linear-gradient(135deg,#5B5FED 0%,#4F8DF9 100%)';

const typeLabels: Record<string, string> = { skill: 'Skill', agent: 'Agent', mcp: 'MCP' };
const typeBadge: Record<string, string> = {
  skill: 'badge-skill', agent: 'badge-agent', mcp: 'badge-mcp',
};

/* ---------- 文案数据（来自用户原始需求提炼） ---------- */
const painPoints = [
  { d: <><path d="M12 1v22" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></>,
    title: '大模型 API 贵且复杂', desc: '多家模型计费规则不一、调用门槛高，个人与小企业难以低成本接入。' },
  { d: <><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" /></>,
    title: 'Prompt 难调试', desc: '缺乏可视化编排与复用，效果全靠手感，团队无法沉淀最佳实践。' },
  { d: <><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5" /><path d="M3 12c0 1.7 4 3 9 3s9-1.3 9-3" /></>,
    title: '数据孤岛', desc: '知识散落在文档、表格、聊天记录里，AI 答非所问，价值无法被激活。' },
  { d: <><path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" /></>,
    title: '个人开发者无变现渠道', desc: '做出好用的 AI 能力却找不到分发与交易场景，难以转化为收入。' },
];

const valueProps = [
  { d: <><path d="M12 1v22" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></>,
    title: '低价订阅 · 无限 Token', kw: '无限Token',
    desc: '一个低价会员即可放开使用，告别按次计费与额度焦虑，放心把 AI 用进日常。' },
  { d: <><rect x="3" y="3" width="7" height="7" rx="1.2" /><rect x="14" y="3" width="7" height="7" rx="1.2" /><rect x="3" y="14" width="7" height="7" rx="1.2" /><rect x="14" y="14" width="7" height="7" rx="1.2" /></>,
    title: '垂直可用办公模板', kw: '办公提效',
    desc: '写 PPT、出投标书、做运营、排版公众号——开箱即用的模板，把重复劳动交给 AI。' },
  { d: <><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><path d="M3 6h18" /><path d="M16 10a4 4 0 0 1-8 0" /></>,
    title: '可交易的技能市场', kw: 'AI变现',
    desc: '把自己打磨的技能上架交易，按订阅 / 下载获得收益，能力即资产。' },
  { d: <><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></>,
    title: 'AI 创作应用基地', kw: '',
    desc: '写小说、做漫剧、谱音乐——在 AI 试炼场低成本试错，让创作想法快速跑通。' },
  { d: <><path d="M3 12a9 9 0 1 0 9-9" /><path d="M3 3v6h6" /><path d="M12 7v5l3 3" /></>,
    title: '低成本养模型', kw: '',
    desc: '低成本微调 / 托管你的专属模型——养马、养龙虾、养螃蟹，把"养模型"变成可负担的日常。' },
];

const features = [
  { d: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></>,
    title: '多模型 AI 对话', desc: 'DeepSeek / Qwen / 国际模型自由切换，按需选用最优模型。' },
  { d: <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /></>,
    title: '私有知识库', desc: '上传文档构建专属知识库，AI 回答基于你的内容，更精准可靠。' },
  { d: <><rect x="3" y="3" width="7" height="7" rx="1.2" /><rect x="14" y="3" width="7" height="7" rx="1.2" /><rect x="3" y="14" width="7" height="7" rx="1.2" /><rect x="14" y="14" width="7" height="7" rx="1.2" /></>,
    title: '技能 / 应用中心', desc: '丰富的 Skills、Agent、MCP 应用，即装即用，一键接入工作流。' },
  { d: <><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>,
    title: 'Token 驾驶舱', desc: '实时监控 Token 消耗，费用透明可控，每一笔都有据可查。' },
  { d: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></>,
    title: 'AI 微信Bot', desc: '个人微信 AI 助手直接对接，消息自动回复，AI 融入你的日常沟通。' },
  { d: <><polyline points="16 3 21 3 21 8" /><line x1="4" y1="20" x2="21" y2="3" /><polyline points="21 16 21 21 16 21" /><line x1="15" y1="15" x2="21" y2="21" /><line x1="4" y1="4" x2="9" y2="9" /></>,
    title: '自动化任务编排', desc: '关键词触发、定时执行等自动化任务，让 AI 按你的节奏工作。' },
];

const LandingPage: React.FC = () => {
  const navigate = useNavigate();
  const [currentSlide, setCurrentSlide] = useState(0);
  const [isPaused, setIsPaused] = useState(false);
  const [mobileMenu, setMobileMenu] = useState(false);

  const [banners, setBanners] = useState<AdBanner[]>(
    mockAdBanners.filter(b => b.status === 'active')
  );
  const publishedApps = mockApps.filter(a => a.status === 'published');
  const topSkills = [...publishedApps].sort((a, b) => b.installCount - a.installCount).slice(0, 5);

  const nextSlide = useCallback(() => {
    if (banners.length === 0) return;
    setCurrentSlide(prev => (prev + 1) % banners.length);
  }, [banners.length]);

  useEffect(() => {
    if (banners.length <= 1 || isPaused) return;
    const timer = setInterval(nextSlide, 4500);
    return () => clearInterval(timer);
  }, [banners.length, isPaused, nextSlide]);

  // 精选推荐：对接平台「广告位」能力——拉取后台已上架(active)的真实广告轮播；
  // 无数据或接口异常时回退到内置示例，保证首屏不空。
  useEffect(() => {
    let alive = true;
    fetch('/app/api/market/ads')
      .then(r => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((rows: any[]) => {
        if (!alive || !Array.isArray(rows) || rows.length === 0) return;
        const mapped: AdBanner[] = rows.map(a => ({
          id: a.id,
          title: a.title,
          imageUrl: a.image_url || '',
          linkAppId: a.link_app_id || undefined,
          linkAppName: a.link_app_name || undefined,
          sortOrder: a.sort_order ?? 0,
          clickCount: a.click_count ?? 0,
          status: (a.status as 'active' | 'inactive') || 'active',
          createdAt: a.created_at || '',
        }));
        setBanners(mapped);
        setCurrentSlide(0);
      })
      .catch(() => { /* 静默失败，保留 mock 回退 */ });
    return () => { alive = false; };
  }, []);

  // SEO / GEO：动态写入标题与描述
  useEffect(() => {
    document.title = '七虎AI · 个人体验 AI、办公提效与 AI 创收的一站式平台';
    let meta = document.querySelector('meta[name="description"]');
    if (!meta) { meta = document.createElement('meta'); meta.setAttribute('name', 'description'); document.head.appendChild(meta); }
    meta.setAttribute('content', '七虎AI 是面向个人与职场用户的 AI 平台：低价订阅无限 Token、垂直办公模板、可交易技能市场、AI 创作试炼场与低成本养模型，让每个人用 AI 把事做成。');
  }, []);

  const goLogin = () => navigate('/login');

  // 点击 logo 回到首页顶部（.lp 是滚动容器，用 scrollTo 而非 window）
  const goTop = () => {
    const el = document.querySelector('.lp') as HTMLElement | null;
    if (el) el.scrollTo({ top: 0, behavior: 'smooth' });
    else window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  // 页内锚点导航：原生 <a href="#id"> 会触发路由跳转而非滚动，
  // 故改为编程式 scrollIntoView + preventDefault，仅在 LandingPage 内部滚动容器内跳转。
  const anchorClick = (id: string, after?: () => void) => (e: React.MouseEvent) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    after?.();
  };

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'SoftwareApplication',
    name: '七虎AI',
    applicationCategory: 'BusinessApplication',
    operatingSystem: 'Web',
    offers: { '@type': 'Offer', price: '0', priceCurrency: 'CNY' },
    aggregateRating: { '@type': 'AggregateRating', ratingValue: '4.8', reviewCount: '1000' },
  };

  return (
    <div className="lp">
      {/* JSON-LD 富媒体摘要（SEO / GEO） */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />

      {/* 浮层玻璃顶栏 */}
      <header className="lp-header glass">
        <div className="lp-header-inner">
          <div className="lp-brand" onClick={goTop} role="button" tabIndex={0}
               onKeyDown={e => e.key === 'Enter' && goTop()} aria-label="回到顶部">
            <svg width="30" height="30" viewBox="0 0 32 32" fill="none" aria-hidden>
              <rect width="32" height="32" rx="8" fill="#5B5FED" />
              <path d="M8 20V12l4 4 4-4v8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
              <path d="M6 22h20" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" opacity="0.5" />
            </svg>
            <span className="brand-name">七虎AI</span>
          </div>

          <nav className="lp-nav" aria-label="主导航">
            <a href="#positioning" onClick={anchorClick('positioning')}>平台定位</a>
            <a href="#value" onClick={anchorClick('value')}>平台价值</a>
            <a href="#top" onClick={anchorClick('top')}>热门技能</a>
            <a href="#market" onClick={anchorClick('market')}>应用中心</a>
            <a href="#features" onClick={anchorClick('features')}>平台能力</a>
          </nav>

          <div className="lp-header-actions">
            <button className="lp-btn lp-btn-ghost" onClick={goLogin}>登录</button>
            <button className="lp-btn lp-btn-primary" onClick={goLogin}>免费注册</button>
          </div>

          <button className="lp-menu-toggle" aria-label="菜单" onClick={() => setMobileMenu(v => !v)}>
            <Icon d={mobileMenu ? <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></> : <><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></>} size={22} />
          </button>
        </div>

        {mobileMenu && (
          <div className="lp-mobile-menu">
            <a href="#positioning" onClick={anchorClick('positioning', () => setMobileMenu(false))}>平台定位</a>
            <a href="#value" onClick={anchorClick('value', () => setMobileMenu(false))}>平台价值</a>
            <a href="#top" onClick={anchorClick('top', () => setMobileMenu(false))}>热门技能</a>
            <a href="#market" onClick={anchorClick('market', () => setMobileMenu(false))}>应用中心</a>
            <a href="#features" onClick={anchorClick('features', () => setMobileMenu(false))}>平台能力</a>
            <div className="lp-mobile-actions">
              <button className="lp-btn lp-btn-ghost" onClick={() => { setMobileMenu(false); goLogin(); }}>登录</button>
              <button className="lp-btn lp-btn-primary" onClick={() => { setMobileMenu(false); goLogin(); }}>免费注册</button>
            </div>
          </div>
        )}
      </header>

      <main>
        {/* Hero：左=标题文案(1/3)，右=精选推荐广告位(2/3) */}
        <section className="lp-hero">
          <div className="lp-hero-grid">
            <div className="lp-hero-text">
              <h1 className="lp-title">让每个人都能<br /><span className="lp-accent">用 AI 把事做成</span></h1>
              <p className="lp-desc">
                七虎AI 是个人体验 AI、办公提效、AI 创收与自我提升的一站式交互平台。
                提供垂直可用的办公模板、可交易的市场与低成本养模型能力，帮你把 AI 用进日常。
              </p>
              <div className="lp-actions">
                <button className="lp-btn lp-btn-primary lp-btn-lg" onClick={goLogin}>免费开始使用</button>
                <button className="lp-btn lp-btn-outline lp-btn-lg" onClick={anchorClick('market')}>浏览应用中心</button>
              </div>
              <div className="lp-stats">
                <div><span className="lp-stat-num">3,500+</span><span className="lp-stat-label">活跃用户</span></div>
                <div><span className="lp-stat-num">120+</span><span className="lp-stat-label">应用 / Skills</span></div>
                <div><span className="lp-stat-num">99.8%</span><span className="lp-stat-label">服务可用率</span></div>
              </div>
            </div>

            {/* Hero 右侧：精选推荐广告位（占 2/3） */}
            <div className="lp-hero-ad">
              {banners.length > 0 && (
                <div className="lp-ad-head">
                  <span className="lp-ad-title">精选推荐</span>
                </div>
              )}
              <div className="lp-carousel" onMouseEnter={() => setIsPaused(true)} onMouseLeave={() => setIsPaused(false)}>
                <div className="lp-track" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
                  {banners.map(b => (
                    <div key={b.id} className="lp-slide">
                      <div className="lp-carousel-card" style={{ background: gradFor(b.linkAppId || 'a1') }}>
                        {b.imageUrl && (<><img className="lp-cc-cover" src={b.imageUrl} alt={b.title} loading="lazy" /><span className="lp-cc-scrim" /></>)}
                        <div className="lp-cc-content">
                          <div className="lp-cc-badge">推荐</div>
                          <h3 className="lp-cc-title">{b.title}</h3>
                          {b.linkAppName && <p className="lp-cc-sub">立即体验 {b.linkAppName}</p>}
                          <button className="lp-cc-cta" onClick={goLogin}>查看详情 <Icon d={<polyline points="9 18 15 12 9 6" />} size={14} /></button>
                        </div>
                        {!b.imageUrl && <div className="lp-cc-visual"><span className="c1" /><span className="c2" /><span className="c3" /></div>}
                      </div>
                    </div>
                  ))}
                </div>
                {banners.length > 1 && (
                  <>
                    <button className="lp-arrow lp-arrow-l" onClick={() => setCurrentSlide(p => (p - 1 + banners.length) % banners.length)} aria-label="上一张"><Icon d={<polyline points="15 18 9 12 15 6" />} size={20} /></button>
                    <button className="lp-arrow lp-arrow-r" onClick={nextSlide} aria-label="下一张"><Icon d={<polyline points="9 18 15 12 9 6" />} size={20} /></button>
                    <div className="lp-dots">{banners.map((_, i) => (<button key={i} className={`lp-dot ${i === currentSlide ? 'on' : ''}`} onClick={() => setCurrentSlide(i)} aria-label={`第${i + 1}张`} />))}</div>
                  </>
                )}
              </div>
            </div>
          </div>
        </section>

        {/* 平台定位（痛点） */}
        <section className="lp-section" id="positioning">
          <div className="lp-inner">
            <div className="lp-section-head">
              <h2 className="lp-h2">我们解决什么</h2>
              <p className="lp-sub">七虎AI 帮你绕过个人与职场使用 AI 时最高频的痛点</p>
            </div>
            <div className="lp-grid lp-grid-4">
              {painPoints.map((p, i) => (
                <article key={i} className="lp-pain">
                  <div className="lp-pain-icon"><Icon d={p.d} size={24} /></div>
                  <h3 className="lp-pain-title">{p.title}</h3>
                  <p className="lp-pain-desc">{p.desc}</p>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* 平台价值 */}
        <section className="lp-section lp-section-alt" id="value">
          <div className="lp-inner">
            <div className="lp-section-head">
              <h2 className="lp-h2">在七虎AI 你能获得</h2>
              <p className="lp-sub">降低订阅成本、提供无限 Token、垂直模板与可交易市场</p>
            </div>
            <div className="lp-grid lp-grid-5">
              {valueProps.map((v, i) => (
                <article key={i} className="lp-value">
                  <div className="lp-value-icon"><Icon d={v.d} size={24} /></div>
                  <h3 className="lp-value-title">{v.kw ? <>{v.title.replace(v.kw, '')}<span className="kw"> {v.kw}</span></> : v.title}</h3>
                  <p className="lp-value-desc">{v.desc}</p>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* 热门技能榜 Top5 */}
        <section className="lp-section" id="top">
          <div className="lp-inner">
            <div className="lp-section-head">
              <h2 className="lp-h2">热门技能榜 · Top 5</h2>
              <p className="lp-sub">涵盖 Skills、Agent、MCP Client，按下载 / 安装量排行，看看大家都在用哪些能力</p>
            </div>
            <ol className="lp-rank">
              {topSkills.map((app, i) => (
                <li key={app.id} className="lp-rank-item" onClick={goLogin} role="button" tabIndex={0}
                    onKeyDown={e => e.key === 'Enter' && goLogin()}>
                  <span className={`lp-rank-no ${i === 0 ? 'top' : ''}`}>{i + 1}</span>
                  <span className="lp-rank-cover" style={{ background: gradFor(app.id) }}>
                    <span className={`lp-rank-badge ${typeBadge[app.type]}`}>{typeLabels[app.type]}</span>
                  </span>
                  <span className="lp-rank-main">
                    <span className="lp-rank-name">{app.name}</span>
                    <span className="lp-rank-desc">{app.description}</span>
                  </span>
                  <span className="lp-rank-meta">
                    <span className="lp-rank-installs"><Icon d={<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />} size={13} /> {app.installCount.toLocaleString()}</span>
                    <span className="lp-rank-rating">{(app.ratingAvg > 0 ? app.ratingAvg : '—')}</span>
                  </span>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {/* 应用中心预览 */}
        <section className="lp-section lp-section-alt" id="market">
          <div className="lp-inner">
            <div className="lp-section-head">
              <h2 className="lp-h2">应用中心</h2>
              <p className="lp-sub">平台为订阅会员提供的免费 AI 应用，帮你快速进入创作与工作场景</p>
            </div>
            <div className="lp-app-grid">
              {publishedApps.map(app => (
                <article key={app.id} className="lp-app-card" onClick={goLogin} role="button" tabIndex={0}
                         onKeyDown={e => e.key === 'Enter' && goLogin()}>
                  <div className="lp-app-cover" style={{ background: gradFor(app.id) }}>
                    <span className={`lp-app-badge ${typeBadge[app.type]}`}>{typeLabels[app.type]}</span>
                    <span className="lp-app-price">会员免费</span>
                  </div>
                  <div className="lp-app-body">
                    <h4 className="lp-app-name">{app.name}</h4>
                    <p className="lp-app-desc">{app.description}</p>
                    <div className="lp-app-meta">
                      <span><Icon d={<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />} size={12} /> {app.ratingAvg > 0 ? app.ratingAvg : '-'}</span>
                      <span>{app.installCount.toLocaleString()} 次安装</span>
                    </div>
                  </div>
                </article>
              ))}
            </div>
            <div className="lp-more">
              <button className="lp-btn lp-btn-outline" onClick={goLogin}>登录查看更多应用 <Icon d={<polyline points="9 18 15 12 9 6" />} size={14} /></button>
            </div>
          </div>
        </section>

        {/* 平台能力 */}
        <section className="lp-section" id="features">
          <div className="lp-inner">
            <div className="lp-section-head">
              <h2 className="lp-h2">平台核心能力</h2>
              <p className="lp-sub">从对话到自动化，七虎AI 提供完整的 AI 工作流解决方案</p>
            </div>
            <div className="lp-grid lp-grid-3">
              {features.map((f, i) => (
                <article key={i} className="lp-feature">
                  <div className="lp-feature-icon"><Icon d={f.d} size={26} /></div>
                  <h3 className="lp-feature-title">{f.title}</h3>
                  <p className="lp-feature-desc">{f.desc}</p>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="lp-cta">
          <div className="lp-inner">
            <h2 className="lp-cta-title">准备好开始了吗？</h2>
            <p className="lp-cta-desc">免费注册即可体验全部功能，无需任何技术背景</p>
            <button className="lp-btn lp-btn-primary lp-btn-lg" onClick={goLogin}>免费注册，立即体验</button>
          </div>
        </section>
      </main>

      {/* Footer（SEO 链接 + 富媒体） */}
      <footer className="lp-footer">
        <div className="lp-inner">
          <div className="lp-footer-grid">
            <div className="lp-footer-brand">
              <div className="lp-brand" onClick={goTop} role="button" tabIndex={0}
                   onKeyDown={e => e.key === 'Enter' && goTop()} aria-label="回到顶部">
                <svg width="26" height="26" viewBox="0 0 32 32" fill="none" aria-hidden>
                  <rect width="32" height="32" rx="8" fill="#5B5FED" />
                  <path d="M8 20V12l4 4 4-4v8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                </svg>
                <span className="brand-name">七虎AI</span>
              </div>
              <p>个人体验 AI、办公提效与 AI 创收的一站式平台。</p>
            </div>
            <div className="lp-footer-col"><h4>产品</h4><a href="#features" onClick={anchorClick('features')}>AI 聊天</a><a href="#market" onClick={anchorClick('market')}>应用中心</a><a href="#value" onClick={anchorClick('value')}>技能交易</a></div>
            <div className="lp-footer-col"><h4>资源</h4><a href="#top" onClick={anchorClick('top')}>热门技能</a><a href="#positioning" onClick={anchorClick('positioning')}>平台定位</a><a onClick={goLogin} role="button">帮助中心</a></div>
            <div className="lp-footer-col"><h4>公司</h4><a onClick={goLogin} role="button">关于我们</a><a onClick={goLogin} role="button">联系我们</a><a onClick={goLogin} role="button">加入我们</a></div>
          </div>
          <div className="lp-footer-bottom">© 2026 七虎AI · 让每个人都能用 AI 把事做成</div>
        </div>
      </footer>
    </div>
  );
};

export default LandingPage;