/**
 * PricingPlans.jsx — 月/年切换 + 三档套餐卡（React island）。
 * 迁自原型 .price-toggle + .price-grid + site.js __setCycle。
 * 铁律 10：CTA 为「获取激活码 / 免费下载」，不含任何支付表单；价格对齐 design/CLAUDE.md §7。
 */
import { useState } from 'react';
import { Check } from 'lucide-react';

export default function PricingPlans({ data }) {
  const [cycle, setCycle] = useState('monthly');
  const i = cycle === 'monthly' ? 0 : 1;

  return (
    <>
      <div class="wrap center">
        <div class="price-toggle">
          <button
            class={cycle === 'monthly' ? 'on' : undefined}
            data-cycle="monthly"
            onClick={() => setCycle('monthly')}
          >
            {data.monthly}
          </button>
          <button
            class={cycle === 'yearly' ? 'on' : undefined}
            data-cycle="yearly"
            onClick={() => setCycle('yearly')}
          >
            <span>{data.yearly}</span>
            <span class="save">{data.save}</span>
          </button>
        </div>
      </div>
      <div class="wrap">
        <div class="price-grid">
          {data.plans.map((p) => (
            <div key={p.key} class={p.highlight ? 'plan feat-plan' : 'plan'}>
              {p.highlight && <div class="pop">{data.popular}</div>}
              <div class="pname">{p.name}</div>
              <div class="price">
                {p.price[i]}
                <small>{data.permo}</small>
              </div>
              <div class="pdesc">{p.desc}</div>
              <ul class="feats">
                {p.feats.map((f, fi) => (
                  <li key={fi}>
                    <Check />
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <button class={`pcta ${p.ctaClass}`}>{p.cta}</button>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}