// components/PlanosCards.jsx — 4 cards de preço (USD only)
// Layout-stable scaffold (id, price, icon, featured/custom flags, CTA target).
// Copy comes from i18n via t('planos.cards.plans.N.*').
const PLAN_KEYS = [
  {
    id: 'basic',
    priceUSD: 20,
    featured: false,
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
        <rect x="4" y="6" width="16" height="12" rx="2" /><path d="M4 10h16" />
      </svg>
    ),
    fromPrev: null,
    custom: false,
    priceFrom: false,
    href: 'https://app.memberai.pro/signup',
    ctaKey: 'cta_trial',
  },
  {
    id: 'expert',
    priceUSD: 50,
    featured: true,
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
        <path d="M12 3l8 5v8l-8 5-8-5V8z" /><path d="M4 8l8 5 8-5M12 13v10" />
      </svg>
    ),
    fromPrev: 0,
    custom: false,
    priceFrom: false,
    href: 'https://app.memberai.pro/signup',
    ctaKey: 'cta_trial',
  },
  {
    id: 'business',
    priceUSD: 200,
    featured: false,
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
        <path d="M3 21V9l9-6 9 6v12" /><path d="M9 21v-6h6v6M3 21h18" />
      </svg>
    ),
    fromPrev: 1,
    custom: false,
    priceFrom: false,
    href: 'https://app.memberai.pro/signup',
    ctaKey: 'cta_trial',
  },
  {
    id: 'businessplus',
    priceUSD: 500,
    featured: false,
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
        <circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a13 13 0 0 1 0 18M12 3a13 13 0 0 0 0 18" />
      </svg>
    ),
    fromPrev: 2,
    custom: true,
    priceFrom: true,
    href: 'mailto:vendas@memberai.pro',
    ctaKey: 'cta_contact',
  },
];

const PlanosCards = () => {
  const plans = PLAN_KEYS.map((k, i) => ({
    ...k,
    name: t('planos.cards.plans.' + i + '.name'),
    tag: t('planos.cards.plans.' + i + '.tag'),
    tagline: t('planos.cards.plans.' + i + '.tagline'),
    note: t('planos.cards.plans.' + i + '.note'),
    cta: t('planos.cards.' + k.ctaKey),
    features: [0,1,2,3,4,5,6,7].map(j => ({
      label: t('planos.cards.plans.' + i + '.features.' + j),
      hi: j === 0,
    })),
    fromPrevName: k.fromPrev !== null ? t('planos.cards.plans.' + k.fromPrev + '.name') : null,
  }));

  return (
    <section className="p-cards" id="cards">
      <div className="container">
        <div className="p-cards-head">
          <span className="t-eyebrow">{t('planos.cards.eyebrow')}</span>
          <h2 className="p-cards-title">
            {t('planos.cards.title_a')} <em>{t('planos.cards.title_em')}</em>{t('planos.cards.title_b')}
          </h2>
          <p className="p-cards-sub">
            {t('planos.cards.sub')}
          </p>
        </div>

        <div className="p-cards-grid">
          {plans.map((plan) => (
            <PlanCard key={plan.id} plan={plan} />
          ))}
        </div>

        <div className="p-trial-line">
          <span className="p-trial-dot" />
          <p>
            <strong>{t('planos.cards.trial_line_a')}</strong> {t('planos.cards.trial_line_b')}
          </p>
        </div>
      </div>
    </section>
  );
};

const PlanCard = ({ plan }) => {
  return (
    <article className={"p-card " + (plan.featured ? "is-featured " : "") + (plan.custom ? "is-custom" : "")}>
      {plan.featured && <span className="p-card-ribbon mono">{plan.tag}</span>}

      <header className="p-card-head">
        <span className="p-card-badge">
          <span className="p-card-badge-icon">{plan.icon}</span>
          <span className="p-card-badge-name">{plan.name}</span>
        </span>
        <p className="p-card-tagline">{plan.tagline}</p>
      </header>

      <div className="p-card-price">
        {plan.priceFrom && <span className="p-card-price-prefix mono">{t('planos.cards.from')}</span>}
        <div className="p-card-price-row">
          <span className="p-card-price-sym">$</span>
          <span className="p-card-price-val">{plan.priceUSD}</span>
          <span className="p-card-price-per">{t('planos.cards.per_month')}</span>
        </div>
        <span className="p-card-price-alt mono">{t('planos.cards.billed')}</span>
      </div>

      <div className="p-card-feat-head mono">
        {plan.fromPrevName ? (<>{t('planos.cards.all_of_a')} <strong>{plan.fromPrevName}</strong>{t('planos.cards.all_of_b')}</>) : t('planos.cards.you_get')}
      </div>
      <ul className="p-card-feat">
        {plan.features.map((f, i) => (
          <li key={i} className={f.hi ? 'is-hi' : ''}>
            <span className="p-card-check">
              <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M2 6.5l2.5 2.5L10 3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </span>
            <span>{f.label}</span>
          </li>
        ))}
      </ul>

      <p className="p-card-note">{plan.note}</p>

      <a
        className={"p-card-cta " + (plan.featured ? 'is-featured' : '') + " " + (plan.custom ? 'is-custom' : '')}
        href={plan.href}
        target={plan.custom ? undefined : "_blank"}
        rel={plan.custom ? undefined : "noopener"}>
        <span>{plan.cta}</span>
        <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </a>
    </article>
  );
};