/* Surgr Landing — Pricing Card (Pro upgrade) */

const { GlassCard: PCGlassCard, SectionHead: PCSectionHead, Icons: PCIcons } = window.SurgrLandingKit;

function PricingCard({ tier, price, period, features, ctaText, accent, badge }) {
  const isPro = accent === '#FFB800';
  return (
    <div style={{
      position: 'relative',
      background: isPro ? 'rgba(255,184,0,0.03)' : 'rgba(255,255,255,0.02)',
      backdropFilter: 'blur(24px)',
      WebkitBackdropFilter: 'blur(24px)',
      border: `1px solid ${isPro ? 'rgba(255,184,0,0.18)' : 'rgba(255,255,255,0.08)'}`,
      borderRadius: 24,
      padding: 36,
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        height: 4,
        background: `linear-gradient(90deg, ${accent}, transparent)`,
      }}/>
      {badge && (
        <span style={{
          position: 'absolute', top: 22, right: 24,
          background: accent, color: '#000',
          padding: '4px 10px',
          borderRadius: 100,
          fontSize: 10, fontWeight: 800, letterSpacing: 1.5,
          textTransform: 'uppercase',
          fontFamily: 'var(--surgr-font-body)',
        }}>{badge}</span>
      )}

      <p style={{
        fontFamily: 'var(--surgr-font-body)',
        fontSize: 11, fontWeight: 800, letterSpacing: 2.5,
        textTransform: 'uppercase',
        color: accent,
        margin: '0 0 16px',
      }}>{tier}</p>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span style={{
          fontFamily: 'var(--surgr-font-heading)',
          fontWeight: 800, fontSize: 56,
          color: '#FFF', lineHeight: 1,
          letterSpacing: -1,
        }}>{price}</span>
        <span style={{ color: '#8888A0', fontSize: 14, fontFamily: 'var(--surgr-font-body)' }}>{period}</span>
      </div>

      <ul style={{
        listStyle: 'none', padding: 0, margin: '32px 0 28px',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        {features.map((f, i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: 12,
            fontSize: 14, color: '#CCC',
            fontFamily: 'var(--surgr-font-body)',
            lineHeight: 1.5,
          }}>
            <span style={{ color: accent, flexShrink: 0, marginTop: 2 }}><PCIcons.Check size={16}/></span>
            {f}
          </li>
        ))}
      </ul>

      <button style={{
        width: '100%',
        background: accent,
        color: '#000',
        fontFamily: 'var(--surgr-font-body)',
        fontWeight: 800, fontSize: 14, letterSpacing: 1,
        textTransform: 'uppercase',
        padding: '16px 24px',
        borderRadius: 12, border: 'none',
        cursor: 'pointer',
        boxShadow: `0 4px 20px ${accent}33`,
      }}>{ctaText}</button>
    </div>
  );
}

function PricingSection() {
  return (
    <section style={{
      padding: '120px 24px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <PCSectionHead
          kicker="PLANOS"
          title="ESCOLHE COMO TREINAR."
          subtitle="Comece grátis. Vire Pro quando quiser destravar o treinador."
        />
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 20,
        }}>
          <PricingCard
            tier="FREE"
            price="R$0"
            period="/ sempre"
            accent="#C8FF00"
            features={[
              'Plano de treino gerado por IA',
              'Histórico e progressão',
              '5 perguntas/dia ao Treinador',
              'Acesso completo ao app',
            ]}
            ctaText="COMEÇAR GRÁTIS"
          />
          <PricingCard
            tier="SURGR PRO"
            price="R$19,90"
            period="/ mês"
            accent="#FFB800"
            badge="POPULAR"
            features={[
              'Tudo do Free, e mais:',
              'Treinador IA ilimitado',
              'Análise de imagem (forma, refeição)',
              'Periodização avançada e deload',
              'Suporte prioritário',
            ]}
            ctaText="ASSINAR SURGR PRO"
          />
        </div>
      </div>
    </section>
  );
}

window.SurgrLandingKit.PricingCard = PricingCard;
window.SurgrLandingKit.PricingSection = PricingSection;