面向海外用户的落地页：首屏、信任和转化路径

// ❌ 坏做法：抽象口号，没有具体价值
export default function HeroSection() {
  return (
    <section className="hero">
      <h1>Empowering the future of development</h1>
      <p>Our platform leverages cutting-edge AI to transform your workflow</p>
      <button>Get Started</button>
    </section>
  )
}

// ✅ 好做法：具体价值 + 明确角色 + 低摩擦动作
export default function HeroSection() {
  return (
    <section className="hero">
      {/* 信任锚点前置：让用户先看到社会证明 */}
      <p className="trust-line">
        Trusted by 2,400+ teams · 4.8/5 on G2 · SOC 2 compliant
      </p>
      <h1>Cut your CI pipeline time by 40%</h1>
      <p className="subtitle">
        Drop-in replacement for GitHub Actions — no config files to rewrite.
      </p>
      <div className="cta-group">
        <button>Start free — no credit card</button>
        <a href="/demo">Watch 2-min demo →</a>
      </div>
    </section>
  )
}

// ❌ 坏做法：信任区域只放了空洞的「客户怎么说」
function TrustSection() {
  return (
    <section>
      <h2>What our customers say</h2>
      <blockquote>"This product is amazing!" — Happy User</blockquote>
      <blockquote>"Saved us so much time!" — Satisfied Team</blockquote>
    </section>
  )
}

// ✅ 好做法：可验证的真实评价 + 具体场景 + 多维信任
function TrustSection() {
  return (
    <section>
      {/* 评价必须包含真实姓名、职位、公司 */}
      <h2>How teams use Acme in production</h2>
      {testimonials.map((t) => (
        <figure key={t.id}>
          <blockquote>
            "We reduced our deploy failures from 12/week to 1/week
            after switching to Acme. The migration took 20 minutes."
          </blockquote>
          <figcaption>
            <img src={t.avatar} alt="" />
            <span>{t.name}, {t.role} at {t.company}</span>
            {/* 链接到真实 profile 增加可信度 */}
            <a href={t.linkedinUrl}>LinkedIn profile →</a>
          </figcaption>
        </figure>
      ))}
 
      {/* 透明运营信息 */}
      <div className="transparency">
        <a href="/changelog">Changelog</a>
        <a href="/roadmap">Public roadmap</a>
        <a href="/status">System status: All systems operational</a>
        <a href="/security">Security & compliance (SOC 2 Type II)</a>
      </div>
    </section>
  )
}

// ❌ 坏做法：定价页没有免费方案说明，也没有对比
function PricingSection() {
  return (
    <section>
      <h2>Pricing</h2>
      <div className="pricing-cards">
        <div>$29/mo</div>
        <div>$99/mo</div>
        <div>$299/mo</div>
      </div>
      <p>Contact us for enterprise pricing</p>
    </section>
  )
}

// ✅ 好做法：免费方案前置 + 功能对比清晰 + 年付优惠透明
function PricingSection() {
  return (
    <section>
      <h2>Simple pricing, no surprises</h2>
      <p>Start free. Upgrade when you need more.</p>
 
      <div className="pricing-toggle">
        <span>Monthly</span>
        <Toggle />
        <span>Yearly <Badge>Save 20%</Badge></span>
      </div>
 
      <div className="pricing-cards">
        {/* 免费方案永远第一个 */}
        <PricingCard
          name="Free"
          price="$0"
          cta="Start free — no credit card"
          features={[
            'Up to 3 projects',
            '1 team member',
            'Community support',
            'Basic analytics'
          ]}
        />
        <PricingCard
          name="Pro"
          price="$29"
          period="/month per seat"
          cta="Start 14-day free trial"
          features={[
            'Unlimited projects',
            'Up to 10 team members',
            'Priority support (< 4h response)',
            'Advanced analytics & exports',
            'Custom domains',
            'API access'
          ]}
        />
      </div>
 
      {/* FAQ 直接回答常见顾虑 */}
      <PricingFAQ items={[
        { q: 'Can I cancel anytime?', a: 'Yes, one click in settings.' },
        { q: 'What happens after free trial?', a: 'Downgrade to Free, no charge.' },
        { q: 'Do you offer refunds?', a: 'Full refund within 30 days.' }
      ]} />
    </section>
  )
}

/* ❌ 坏做法：固定宽度布局，多语言必崩 */
.pricing-card {
  width: 280px;
  height: 400px;
  font-size: 14px;
}
 
.pricing-card h3 {
  white-space: nowrap; /* 德语标题直接被截断 */
  overflow: hidden;
}

/* ✅ 好做法：弹性布局 + 相对单位 */
.pricing-card {
  width: 100%;
  max-width: 340px;
  min-height: 400px; /* 用 min-height 而非 height */
  padding: 1.5rem;
}
 
.pricing-card h3 {
  /* 允许换行，不截断 */
  line-height: 1.4;
  word-break: break-word;
}
 
/* 针对不同语言调整排版节奏 */
:lang(de) .pricing-card h3 {
  font-size: 0.95rem; /* 德语略小一点防止溢出 */
}
 
:lang(ja) .pricing-card {
  line-height: 1.8; /* 日语行高需要更大 */
}

// ❌ 坏做法：基于 IP 或浏览器语言自动跳转
export function LanguageRedirect() {
  const locale = detectLocaleFromIP() // 不可靠，且用户反感
  if (locale !== 'en') {
    router.push(`/${locale}`)
  }
}

// ✅ 好做法：用户手动选择 + 持久化偏好 + 提供语言切换器
export function LanguageSwitcher({ currentLocale, availableLocales }) {
  return (
    <div className="language-switcher">
      <select
        value={currentLocale}
        onChange={(e) => {
          const next = e.target.value
          // 存到 cookie，下次访问自动使用
          document.cookie = `preferred_locale=${next};path=/;max-age=31536000`
          router.push(`/${next}${pathname}`)
        }}
      >
        {availableLocales.map((l) => (
          <option key={l.code} value={l.code}>
            {/* 用原生语言名而非翻译名 */}
            {l.nativeName}
          </option>
        ))}
      </select>
    </div>
  )
}

<!-- ❌ 坏做法：没有 hreflang，或只指向自身 -->
<link rel="alternate" href="https://example.com/en" hreflang="en" />
<!-- 漏掉了其他语言版本 -->

<!-- ✅ 好做法：双向互相引用 + x-default -->
<link rel="alternate" hreflang="en" href="https://example.com/en" />
<link rel="alternate" hreflang="de" href="https://example.com/de" />
<link rel="alternate" hreflang="ja" href="https://example.com/ja" />
<link rel="alternate" hreflang="zh-Hans" href="https://example.com/zh" />
<!-- x-default 指向英文或默认版本 -->
<link rel="alternate" hreflang="x-default" href="https://example.com/en" />