feat: Enhance Pricing Page with Enterprise Plan and Billing Toggle

- Added Enterprise plan with features and pricing.
- Introduced billing toggle for monthly and yearly subscriptions.
- Updated feature list to include enterprise-specific features.
- Improved UI for plan cards and added new styles for better visual appeal.
- Adjusted SEO metadata to reflect new pricing structure.
- Enhanced global styles for marketing elements.

frontend/src/pages/PricingPage.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import SEOHead from '@/components/seo/SEOHead';
 import { generateWebPage, getSiteOrigin } from '@/utils/seo';
-import { ArrowRight, Check, Coins, Crown, Loader2, Scale, X, Zap } from 'lucide-react';
+import { ArrowRight, Check, Coins, Crown, Loader2, Scale, Shield, Zap } from 'lucide-react';
 import { useAuthStore } from '@/stores/authStore';
 import SocialProofStrip from '@/components/shared/SocialProofStrip';
 import { getApiClient } from '@/services/api';
@@ -15,35 +15,48 @@ interface PlanFeature {
   key: string;
   free: boolean | string;
   pro: boolean | string;
+  enterprise: boolean | string;
 }
 
 const FEATURES: PlanFeature[] = [
-  { key: 'credits', free: '50 credits/30 days', pro: '500 credits/30 days' },
-  { key: 'apiAccess', free: false, pro: true },
-  { key: 'apiRequests', free: '—', pro: '1,000/month' },
-  { key: 'maxFileSize', free: '50 MB', pro: '100 MB' },
-  { key: 'historyRetention', free: '25 files', pro: '250 files' },
-  { key: 'allTools', free: true, pro: true },
-  { key: 'aiTools', free: true, pro: true },
-  { key: 'priorityProcessing', free: false, pro: true },
-  { key: 'noAds', free: false, pro: true },
-  { key: 'emailSupport', free: false, pro: true },
+  { key: 'credits', free: '50 credits/30 days', pro: '500 credits/30 days', enterprise: 'Unlimited' },
+  { key: 'apiAccess', free: false, pro: true, enterprise: true },
+  { key: 'apiRequests', free: '—', pro: '1,000/month', enterprise: 'Unlimited' },
+  { key: 'maxFileSize', free: '50 MB', pro: '100 MB', enterprise: '500 MB' },
+  { key: 'historyRetention', free: '25 files', pro: '250 files', enterprise: 'Unlimited' },
+  { key: 'allTools', free: true, pro: true, enterprise: true },
+  { key: 'aiTools', free: true, pro: true, enterprise: true },
+  { key: 'priorityProcessing', free: false, pro: true, enterprise: true },
+  { key: 'noAds', free: false, pro: true, enterprise: true },
+  { key: 'emailSupport', free: false, pro: true, enterprise: true },
+  { key: 'customIntegrations', free: false, pro: false, enterprise: true },
+  { key: 'dedicatedSupport', free: false, pro: false, enterprise: true },
+  { key: 'userManagement', free: false, pro: false, enterprise: true },
 ];
 
+const MONTHLY_PRICES = { free: 0, pro: 9.99, enterprise: 29.99 };
+const YEARLY_PRICES = { free: 0, pro: 7.99, enterprise: 24.99 };
+
 export default function PricingPage() {
   const { t } = useTranslation();
   const siteOrigin = getSiteOrigin(typeof window !== 'undefined' ? window.location.origin : '');
   const user = useAuthStore((s) => s.user);
   const [loading, setLoading] = useState(false);
+  const [billing, setBilling] = useState<'monthly' | 'yearly'>('yearly');
 
-  async function handleUpgrade(billing: 'monthly' | 'yearly') {
+  async function handleUpgrade(plan: 'pro' | 'enterprise') {
     // Track interest in paid plan
     try {
-      await api.post('/internal/admin/plan-interest/record', { plan: 'pro', billing });
+      await api.post('/internal/admin/plan-interest/record', { plan, billing });
     } catch {
       // Non-critical — don't block the flow
     }
 
+    if (plan === 'enterprise') {
+      window.location.href = '/contact';
+      return;
+    }
+
     if (!user) {
       window.location.href = '/account?redirect=pricing';
       return;
@@ -53,42 +66,64 @@ export default function PricingPage() {
       const { data } = await api.post(`${API_BASE}/stripe/create-checkout-session`, { billing });
       if (data.url) window.location.href = data.url;
     } catch {
-      // Stripe not configured yet — show message
       alert(t('pages.pricing.stripeNotReady', 'Payment system is being set up. Please try again later.'));
     } finally {
       setLoading(false);
     }
   }
 
-  function renderValue(val: boolean | string) {
-    if (val === true) return <Check className="mx-auto h-5 w-5 text-green-500" />;
-    if (val === false) return <X className="mx-auto h-5 w-5 text-slate-300 dark:text-slate-600" />;
-    return <span className="text-sm font-medium text-slate-700 dark:text-slate-300">{val}</span>;
-  }
+  const prices = billing === 'yearly' ? YEARLY_PRICES : MONTHLY_PRICES;
 
   return (
     <>
       <SEOHead
         title={t('pages.pricing.title', 'Pricing')}
-        description={t('pages.pricing.metaDescription', 'Compare Free and Pro plans for Dociva. Get more file processing power, API access, and priority support.')}
+        description={t('pages.pricing.metaDescription', 'Compare Free, Pro, and Enterprise plans for Dociva. Get more file processing power, API access, and priority support.')}
         path="/pricing"
         jsonLd={generateWebPage({
           name: t('pages.pricing.title', 'Pricing'),
-          description: t('pages.pricing.metaDescription', 'Compare Free and Pro plans for Dociva.'),
+          description: t('pages.pricing.metaDescription', 'Compare plans for Dociva.'),
           url: `${siteOrigin}/pricing`,
         })}
       />
 
-      <div className="mx-auto max-w-5xl">
-        {/* Header */}
+      <div className="mx-auto max-w-6xl">
+        {/* Header + billing toggle */}
         <div className="mb-12 text-center">
-          <h1 className="mb-4 text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-4xl">
+          <h1 className="mb-4 text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-4xl lg:text-5xl">
             {t('pages.pricing.title', 'Simple, Transparent Pricing')}
           </h1>
           <p className="mx-auto max-w-2xl text-lg text-slate-600 dark:text-slate-400">
-            {t('pages.pricing.subtitle', 'Start free with all tools. Upgrade when you need more power.')}
+            {t('pages.pricing.subtitle', 'Unlock the power of your PDFs with flexible plans.')}
           </p>
 
+          {/* Billing toggle */}
+          <div className="mt-8 inline-flex items-center gap-3 rounded-full border border-slate-200 bg-white px-2 py-1.5 shadow-sm dark:border-slate-700 dark:bg-slate-800">
+            <button
+              type="button"
+              onClick={() => setBilling('monthly')}
+              className={`rounded-full px-5 py-2 text-sm font-semibold transition-colors ${
+                billing === 'monthly'
+                  ? 'bg-primary-600 text-white shadow-md'
+                  : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white'
+              }`}
+            >
+              {t('pages.pricing.monthly', 'Monthly')}
+            </button>
+            <button
+              type="button"
+              onClick={() => setBilling('yearly')}
+              className={`rounded-full px-5 py-2 text-sm font-semibold transition-colors ${
+                billing === 'yearly'
+                  ? 'bg-primary-600 text-white shadow-md'
+                  : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white'
+              }`}
+            >
+              {t('pages.pricing.yearly', 'Yearly')}
+            </button>
+          </div>
+
+          {/* Transparency callout */}
           <div className="mx-auto mt-6 max-w-3xl rounded-2xl border border-primary-200 bg-primary-50/80 p-5 text-start shadow-sm dark:border-primary-900/40 dark:bg-primary-900/20">
             <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
               <div className="flex gap-3">
@@ -120,88 +155,76 @@ export default function PricingPage() {
           <SocialProofStrip />
         </div>
 
-        {/* Plan Cards */}
-        <div className="mb-16 grid gap-8 md:grid-cols-2">
+        {/* 3-tier Plan Cards */}
+        <div className="mb-16 grid gap-8 md:grid-cols-3">
           {/* Free Plan */}
-          <div className="relative rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-800">
-            <div className="mb-6 flex items-center gap-3">
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-700">
-                <Zap className="h-6 w-6 text-slate-600 dark:text-slate-300" />
-              </div>
-              <div>
-                <h2 className="text-xl font-bold text-slate-900 dark:text-white">
-                  {t('pages.pricing.freePlan', 'Free')}
-                </h2>
-                <p className="text-sm text-slate-500 dark:text-slate-400">
-                  {t('pages.pricing.freeDesc', 'For personal use')}
-                </p>
-              </div>
+          <div className="relative flex flex-col rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-800">
+            <div className="mb-6 rounded-xl bg-gradient-to-r from-primary-100 to-primary-50 py-3 text-center dark:from-primary-900/30 dark:to-primary-900/10">
+              <h2 className="text-lg font-bold text-primary-700 dark:text-primary-300">
+                {t('pages.pricing.freePlan', 'Free')}
+              </h2>
             </div>
 
             <div className="mb-6">
-              <span className="text-4xl font-extrabold text-slate-900 dark:text-white">$0</span>
+              <span className="text-4xl font-extrabold text-slate-900 dark:text-white">${prices.free}</span>
               <span className="text-slate-500 dark:text-slate-400"> / {t('pages.pricing.month', 'month')}</span>
             </div>
 
-            <ul className="mb-8 space-y-3">
+            <ul className="mb-8 flex-1 space-y-3">
               {FEATURES.filter((f) => f.free !== false).map((f) => (
-                <li key={f.key} className="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
-                  <Check className="h-4 w-4 shrink-0 text-green-500" />
-                  {t(`pages.pricing.features.${f.key}`, f.key)}
-                  {typeof f.free === 'string' && (
-                    <span className="ml-auto text-xs font-medium text-slate-500">({f.free})</span>
-                  )}
+                <li key={f.key} className="flex items-start gap-3 text-sm text-slate-700 dark:text-slate-300">
+                  <Check className="mt-0.5 h-4 w-4 shrink-0 text-green-500" />
+                  <span>
+                    {t(`pages.pricing.features.${f.key}`, f.key)}
+                    {typeof f.free === 'string' && (
+                      <span className="ml-1 text-xs text-slate-500">({f.free})</span>
+                    )}
+                  </span>
                 </li>
               ))}
             </ul>
 
             <Link
               to="/"
-              className="block w-full rounded-xl border border-slate-300 bg-white py-3 text-center text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600"
+              className="block w-full rounded-xl border border-primary-300 bg-white py-3 text-center text-sm font-semibold text-primary-700 transition-colors hover:bg-primary-50 dark:border-primary-700 dark:bg-slate-700 dark:text-primary-300 dark:hover:bg-slate-600"
             >
-              {t('pages.pricing.getStarted', 'Get Started Free')}
+              {t('pages.pricing.getStarted', 'Get Started')}
             </Link>
           </div>
 
           {/* Pro Plan */}
-          <div className="relative rounded-2xl border-2 border-primary-500 bg-white p-8 shadow-lg dark:bg-slate-800">
-            <div className="absolute -top-3 right-6 rounded-full bg-primary-600 px-4 py-1 text-xs font-bold text-white">
+          <div className="relative flex flex-col rounded-2xl border-2 border-primary-500 bg-white p-8 shadow-lg dark:bg-slate-800">
+            <div className="absolute -top-3 right-6 rounded-full bg-slate-800 px-4 py-1 text-xs font-bold text-white dark:bg-white dark:text-slate-900">
               {t('pages.pricing.popular', 'MOST POPULAR')}
             </div>
 
-            <div className="mb-6 flex items-center gap-3">
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900/30">
-                <Crown className="h-6 w-6 text-primary-600 dark:text-primary-400" />
-              </div>
-              <div>
-                <h2 className="text-xl font-bold text-slate-900 dark:text-white">
-                  {t('pages.pricing.proPlan', 'Pro')}
-                </h2>
-                <p className="text-sm text-slate-500 dark:text-slate-400">
-                  {t('pages.pricing.proDesc', 'For professionals & teams')}
-                </p>
-              </div>
+            <div className="mb-6 rounded-xl bg-gradient-to-r from-primary-600 to-primary-500 py-3 text-center">
+              <h2 className="text-lg font-bold text-white">
+                {t('pages.pricing.proPlan', 'Pro')}
+              </h2>
             </div>
 
             <div className="mb-6">
-              <span className="text-4xl font-extrabold text-slate-900 dark:text-white">$9</span>
+              <span className="text-4xl font-extrabold text-slate-900 dark:text-white">${prices.pro}</span>
               <span className="text-slate-500 dark:text-slate-400"> / {t('pages.pricing.month', 'month')}</span>
             </div>
 
-            <ul className="mb-8 space-y-3">
-              {FEATURES.map((f) => (
-                <li key={f.key} className="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
-                  <Check className="h-4 w-4 shrink-0 text-primary-500" />
-                  {t(`pages.pricing.features.${f.key}`, f.key)}
-                  {typeof f.pro === 'string' && (
-                    <span className="ml-auto text-xs font-medium text-primary-600 dark:text-primary-400">({f.pro})</span>
-                  )}
+            <ul className="mb-8 flex-1 space-y-3">
+              {FEATURES.filter((f) => f.pro !== false).map((f) => (
+                <li key={f.key} className="flex items-start gap-3 text-sm text-slate-700 dark:text-slate-300">
+                  <Check className="mt-0.5 h-4 w-4 shrink-0 text-green-500" />
+                  <span>
+                    {t(`pages.pricing.features.${f.key}`, f.key)}
+                    {typeof f.pro === 'string' && (
+                      <span className="ml-1 text-xs text-primary-600 dark:text-primary-400">({f.pro})</span>
+                    )}
+                  </span>
                 </li>
               ))}
             </ul>
 
             <button
-              onClick={() => handleUpgrade('monthly')}
+              onClick={() => handleUpgrade('pro')}
               disabled={loading || user?.plan === 'pro'}
               className="block w-full rounded-xl bg-primary-600 py-3 text-center text-sm font-semibold text-white transition-colors hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60"
             >
@@ -210,15 +233,48 @@ export default function PricingPage() {
               ) : user?.plan === 'pro' ? (
                 t('pages.pricing.currentPlan', 'Current Plan')
               ) : (
-                t('pages.pricing.upgradeToPro', 'Upgrade to Pro')
+                t('pages.pricing.startFreeTrial', 'Start Your Free Trial')
               )}
             </button>
-            <p className="mt-2 text-center text-xs text-slate-500 dark:text-slate-400">
-              {t('pages.pricing.securePayment', 'Secure payment via Stripe')}
-            </p>
+          </div>
+
+          {/* Enterprise Plan */}
+          <div className="relative flex flex-col rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-800">
+            <div className="mb-6 rounded-xl bg-gradient-to-r from-violet-200 to-violet-100 py-3 text-center dark:from-violet-900/30 dark:to-violet-900/10">
+              <h2 className="text-lg font-bold text-violet-700 dark:text-violet-300">
+                {t('pages.pricing.enterprisePlan', 'Enterprise')}
+              </h2>
+            </div>
+
+            <div className="mb-6">
+              <span className="text-4xl font-extrabold text-slate-900 dark:text-white">${prices.enterprise}</span>
+              <span className="text-slate-500 dark:text-slate-400"> / {t('pages.pricing.month', 'month')}</span>
+            </div>
+
+            <ul className="mb-8 flex-1 space-y-3">
+              {FEATURES.filter((f) => f.enterprise !== false).map((f) => (
+                <li key={f.key} className="flex items-start gap-3 text-sm text-slate-700 dark:text-slate-300">
+                  <Check className="mt-0.5 h-4 w-4 shrink-0 text-green-500" />
+                  <span>
+                    {t(`pages.pricing.features.${f.key}`, f.key)}
+                    {typeof f.enterprise === 'string' && (
+                      <span className="ml-1 text-xs text-violet-600 dark:text-violet-400">({f.enterprise})</span>
+                    )}
+                  </span>
+                </li>
+              ))}
+            </ul>
+
+            <button
+              onClick={() => handleUpgrade('enterprise')}
+              className="block w-full rounded-xl border border-violet-300 bg-violet-50 py-3 text-center text-sm font-semibold text-violet-700 transition-colors hover:bg-violet-100 dark:border-violet-700 dark:bg-violet-900/20 dark:text-violet-300 dark:hover:bg-violet-900/40"
+            >
+              {t('pages.pricing.contactSales', 'Contact Sales')}
+            </button>
           </div>
         </div>
 
+        {/* Trust section */}
         <section className="deferred-section mb-16 rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-900/70">
           <div className="max-w-3xl">
             <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
@@ -244,39 +300,16 @@ export default function PricingPage() {
           </div>
         </section>
 
-        {/* Comparison Table */}
-        <div className="mb-16 overflow-hidden rounded-2xl border border-slate-200 dark:border-slate-700">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/50">
-                <th className="px-6 py-4 text-left font-semibold text-slate-700 dark:text-slate-200">
-                  {t('pages.pricing.feature', 'Feature')}
-                </th>
-                <th className="px-6 py-4 text-center font-semibold text-slate-700 dark:text-slate-200">
-                  {t('pages.pricing.freePlan', 'Free')}
-                </th>
-                <th className="px-6 py-4 text-center font-semibold text-primary-600 dark:text-primary-400">
-                  {t('pages.pricing.proPlan', 'Pro')}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {FEATURES.map((f, idx) => (
-                <tr
-                  key={f.key}
-                  className={`border-b border-slate-100 dark:border-slate-700/50 ${
-                    idx % 2 === 0 ? 'bg-white dark:bg-slate-800' : 'bg-slate-50/50 dark:bg-slate-800/30'
-                  }`}
-                >
-                  <td className="px-6 py-3 text-slate-700 dark:text-slate-300">
-                    {t(`pages.pricing.features.${f.key}`, f.key)}
-                  </td>
-                  <td className="px-6 py-3 text-center">{renderValue(f.free)}</td>
-                  <td className="px-6 py-3 text-center">{renderValue(f.pro)}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+        {/* Bottom trust badges */}
+        <div className="mb-16 flex flex-wrap items-center justify-center gap-8 text-sm text-slate-500 dark:text-slate-400">
+          <div className="flex items-center gap-2">
+            <Shield className="h-5 w-5" />
+            {t('pages.pricing.securePayment', 'Secure Payment')}
+          </div>
+          <div className="flex items-center gap-2">
+            <Zap className="h-5 w-5" />
+            {t('pages.pricing.moneyBack', '30-Day Money Back Guarantee')}
+          </div>
         </div>
 
         {/* FAQ */}