feat: dinamizar exibicao de planos na tela de assinatura a partir do banco de dados

src/components/Subscription.tsx

@@ -1,8 +1,8 @@
 'use client';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Check, Crown, Zap, Building2, Rocket, AlertTriangle, ShieldAlert, CreditCard, QrCode, FileText, CheckCircle2, ShieldCheck } from 'lucide-react';
 
-const plans = [
+const staticPlans = [
   {
     name: 'Starter', price: 49.90, icon: Zap, color: '#3b82f6',
     features: ['1 profissional', '10 serviços', '200 agendamentos/mês', 'Agendamento online', 'Página de reservas', 'Lembretes por e-mail', 'Relatórios básicos']
@@ -76,6 +76,46 @@ export default function Subscription({ currentPlan, onPlanChange, isLocked = fal
   const [loading, setLoading] = useState(false);
   const [successData, setSuccessData] = useState<any>(null);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [dbPlans, setDbPlans] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchSubscriptionData = async () => {
+      const slug = localStorage.getItem('agendapro_tenant_slug') || 'barbearia-premium';
+      try {
+        const res = await fetch(`/api/tenant/subscription?slug=${slug}`);
+        if (res.ok) {
+          const data = await res.json();
+          if (data.plans && data.plans.length > 0) {
+            setDbPlans(data.plans);
+          }
+        }
+      } catch (e) {
+        console.error('Erro ao buscar planos da API:', e);
+      }
+    };
+    fetchSubscriptionData();
+  }, []);
+
+  const iconMap: Record<string, any> = { Starter: Zap, Professional: Crown, Business: Building2, Enterprise: Rocket };
+  const colorMap: Record<string, string> = { Starter: '#3b82f6', Professional: '#6C63FF', Business: '#a855f7', Enterprise: '#f59e0b' };
+
+  const plans = dbPlans.length > 0 ? dbPlans.map(p => {
+    let featuresList: string[] = [];
+    try {
+      if (typeof p.features === 'string') featuresList = JSON.parse(p.features);
+      else if (Array.isArray(p.features)) featuresList = p.features;
+    } catch (e) {}
+
+    return {
+      id: p.id,
+      name: p.name,
+      price: Number(p.price || p.price_monthly || 0),
+      icon: iconMap[p.name] || Crown,
+      color: colorMap[p.name] || '#6C63FF',
+      featured: p.name === 'Professional',
+      features: featuresList.length > 0 ? featuresList : ['Agendamento online']
+    };
+  }) : staticPlans;
 
   // Form de cartão
   const [cardHolder, setCardHolder] = useState('');