Pricing Page

'use client';

import { useExperiment } from '@testlyjs/react';

const plans = [
  {
    id: 'free',
    name: 'Free',
    price: 'R$ 0',
    description: 'Para começar',
    features: ['1 experimento ativo', '10k impressões/mês', 'Suporte via comunidade'],
    cta: 'Começar Grátis',
  },
  {
    id: 'pro',
    name: 'Pro',
    price: 'R$ 79',
    description: 'Para times em crescimento',
    features: ['Experimentos ilimitados', '100k impressões/mês', 'Suporte prioritário'],
    cta: 'Assinar Pro',
  },
];

export function PricingSection() {
  const { variant, loading, convert } = useExperiment('pricing-highlighted-plan');

  if (loading) return <PricingSkeleton />;

  const highlightedPlan = variant === 'variant-b' ? 'pro' : 'free';

  const handlePlanSelect = (planId: string) => {
    convert(`plan_selected_${planId}`);
    window.location.href = `/checkout?plan=${planId}`;
  };

  return (
    <section className="py-20 bg-gray-50">
      <div className="container mx-auto px-4">
        <h2 className="text-4xl font-bold text-center text-gray-900 mb-12">
          Planos e Preços
        </h2>
        <div className="grid md:grid-cols-2 gap-8 max-w-3xl mx-auto">
          {plans.map((plan) => {
            const isHighlighted = plan.id === highlightedPlan;
            return (
              <div
                key={plan.id}
                className={`rounded-2xl p-8 ${
                  isHighlighted
                    ? 'bg-blue-600 text-white shadow-2xl scale-105'
                    : 'bg-white text-gray-900 shadow-md'
                }`}
              >
                {isHighlighted && (
                  <span className="text-xs font-semibold uppercase tracking-wide bg-blue-500 text-white px-3 py-1 rounded-full mb-4 inline-block">
                    Mais Popular
                  </span>
                )}
                <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
                <p className={`text-sm mb-4 ${isHighlighted ? 'text-blue-100' : 'text-gray-500'}`}>
                  {plan.description}
                </p>
                <div className="text-4xl font-bold mb-6">
                  {plan.price}
                  <span className={`text-sm font-normal ${isHighlighted ? 'text-blue-100' : 'text-gray-500'}`}>
                    /mês
                  </span>
                </div>
                <ul className="space-y-3 mb-8">
                  {plan.features.map((feature) => (
                    <li key={feature} className="flex items-center gap-2 text-sm">
                      <span>✓</span>
                      {feature}
                    </li>
                  ))}
                </ul>
                <button
                  onClick={() => handlePlanSelect(plan.id)}
                  className={`w-full py-3 rounded-lg font-semibold transition-colors ${
                    isHighlighted
                      ? 'bg-white text-blue-600 hover:bg-blue-50'
                      : 'bg-blue-600 text-white hover:bg-blue-700'
                  }`}
                >
                  {plan.cta}
                </button>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

'use client';

import { useState } from 'react';
import { useExperiment } from '@testlyjs/react';

export function PricingToggle() {
  const { variant, convert } = useExperiment('pricing-default-billing-cycle');

  // Controle: mensal. Variante B: anual por padrão
  const [isAnnual, setIsAnnual] = useState(variant === 'variant-b');

  const monthlyPrice = 79;
  const annualPrice = Math.round(monthlyPrice * 12 * 0.8); // 20% de desconto

  const handleToggle = (annual: boolean) => {
    setIsAnnual(annual);
    convert(annual ? 'billing_switched_to_annual' : 'billing_switched_to_monthly');
  };

  const handleSubscribe = () => {
    convert(`subscribed_${isAnnual ? 'annual' : 'monthly'}`);
    window.location.href = `/checkout?billing=${isAnnual ? 'annual' : 'monthly'}`;
  };

  return (
    <div className="text-center">
      {/* Toggle */}
      <div className="inline-flex items-center gap-4 bg-gray-100 rounded-full p-1 mb-8">
        <button
          onClick={() => handleToggle(false)}
          className={`px-6 py-2 rounded-full text-sm font-medium transition-colors ${
            !isAnnual ? 'bg-white text-gray-900 shadow' : 'text-gray-500'
          }`}
        >
          Mensal
        </button>
        <button
          onClick={() => handleToggle(true)}
          className={`px-6 py-2 rounded-full text-sm font-medium transition-colors ${
            isAnnual ? 'bg-white text-gray-900 shadow' : 'text-gray-500'
          }`}
        >
          Anual
          <span className="ml-2 text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">
            -20%
          </span>
        </button>
      </div>

      {/* Preço */}
      <div className="text-5xl font-bold text-gray-900 mb-2">
        {isAnnual
          ? `R$ ${Math.round(annualPrice / 12)}`
          : `R$ ${monthlyPrice}`}
        <span className="text-lg font-normal text-gray-500">/mês</span>
      </div>
      {isAnnual && (
        <p className="text-sm text-green-600 mb-6">
          Cobrado R$ {annualPrice}/ano — você economiza R$ {monthlyPrice * 12 - annualPrice}
        </p>
      )}

      <button
        onClick={handleSubscribe}
        className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold"
      >
        Assinar Pro
      </button>
    </div>
  );
}

'use client';

import { useExperiment } from '@testlyjs/react';

export function PricingCTA() {
  const { variant, convert } = useExperiment('pricing-cta-text');

  const ctaVariants = {
    'control': 'Assinar Agora',
    'variant-b': 'Começar Grátis por 14 Dias',
    'variant-c': 'Experimente Sem Compromisso',
  };

  const handleClick = () => {
    convert('pricing_cta_clicked');
    window.location.href = '/checkout';
  };

  return (
    <button
      onClick={handleClick}
      className="w-full bg-blue-600 hover:bg-blue-700 text-white py-4 rounded-lg font-semibold text-lg"
    >
      {ctaVariants[variant as keyof typeof ctaVariants] || ctaVariants.control}
    </button>
  );
}