🔄 Subscriptions Module

import { PricingCard, PricingGrid } from '@/components/ui/pricing-card';
import { getPricingPlans } from '@/lib/pricing';

export default function PricingPage() {
  const monthlyPlans = getPricingPlans('month');
  const yearlyPlans = getPricingPlans('year');
  const [billingInterval, setBillingInterval] = useState('month');

  const currentPlans = billingInterval === 'month' ? monthlyPlans : yearlyPlans;

  return (
    <div className="max-w-6xl mx-auto p-6">
      <div className="text-center mb-8">
        <h1 className="text-3xl font-bold">Choose Your Plan</h1>
        <p className="text-muted-foreground">Select the perfect plan for your needs</p>

        {/* Billing toggle */}
        <div className="flex items-center justify-center mt-4">
          <button
            onClick={() => setBillingInterval('month')}
            className={`px-4 py-2 ${billingInterval === 'month' ? 'bg-blue-600 text-white' : 'bg-gray-200'}`}
          >
            Monthly
          </button>
          <button
            onClick={() => setBillingInterval('year')}
            className={`px-4 py-2 ${billingInterval === 'year' ? 'bg-blue-600 text-white' : 'bg-gray-200'}`}
          >
            Yearly (Save 20%)
          </button>
        </div>
      </div>

      <PricingGrid
        plans={currentPlans}
        columns={3}
        onSubscribe={(plan) => {
          console.log('Subscribing to:', plan.name);
        }}
      />
    </div>
  );
}

import { useCheckout } from '@/hooks/use-stripe';
import { useState } from 'react';

export default function SubscriptionCheckout() {
  const [selectedPlan, setSelectedPlan] = useState('pro-monthly');
  const { redirectToCheckout, loading, error } = useCheckout();

  const plans = {
    'starter-monthly': { priceId: 'price_starter_monthly', name: 'Starter Monthly' },
    'pro-monthly': { priceId: 'price_pro_monthly', name: 'Pro Monthly' },
    'enterprise-monthly': { priceId: 'price_enterprise_monthly', name: 'Enterprise Monthly' },
  };

  const handleSubscribe = async () => {
    const plan = plans[selectedPlan];

    try {
      await redirectToCheckout({
        priceId: plan.priceId,
        mode: 'subscription',
        successUrl: '/dashboard?subscription=success',
        cancelUrl: '/pricing',
        metadata: {
          plan: selectedPlan,
          source: 'pricing-page'
        }
      });
    } catch (err) {
      console.error('Subscription failed:', err);
    }
  };

  return (
    <div className="max-w-md mx-auto">
      <h2>Subscribe to {plans[selectedPlan].name}</h2>

      <div className="space-y-2 mb-4">
        {Object.entries(plans).map(([key, plan]) => (
          <label key={key} className="flex items-center space-x-2">
            <input
              type="radio"
              value={key}
              checked={selectedPlan === key}
              onChange={(e) => setSelectedPlan(e.target.value)}
            />
            <span>{plan.name}</span>
          </label>
        ))}
      </div>

      {error && (
        <div className="text-red-500 mb-4">
          Error: {error}
        </div>
      )}

      <button
        onClick={handleSubscribe}
        disabled={loading}
        className="w-full bg-blue-600 text-white py-2 px-4 rounded disabled:opacity-50"
      >
        {loading ? 'Processing...' : 'Subscribe Now'}
      </button>
    </div>
  );
}