Add Stripe subscription system and n8n chat webhook

- Add Stripe SDK and subscription management
- Create checkout, webhook, and portal API routes
- Add pricing page with plan cards
- Create subscriptions table in Supabase
- Update database types for subscriptions
- Configure n8n webhook for AI chat responses

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/(marketing)/pricing/page.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Check, Loader2 } from 'lucide-react'
+import { PLANS, type PlanKey } from '@/lib/stripe/config'
+
+export default function PricingPage() {
+  const router = useRouter()
+  const [loading, setLoading] = useState<PlanKey | null>(null)
+
+  const handleSubscribe = async (plan: PlanKey) => {
+    if (plan === 'free') {
+      router.push('/auth/signup')
+      return
+    }
+
+    setLoading(plan)
+    try {
+      const res = await fetch('/api/stripe/checkout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ plan }),
+      })
+
+      const data = await res.json()
+
+      if (data.error === 'Unauthorized') {
+        router.push('/auth/login?redirect=/pricing')
+        return
+      }
+
+      if (data.url) {
+        window.location.href = data.url
+      }
+    } catch (error) {
+      console.error('Checkout error:', error)
+    } finally {
+      setLoading(null)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-zinc-50 to-white dark:from-zinc-950 dark:to-zinc-900">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+        <div className="text-center mb-16">
+          <h1 className="text-4xl font-bold tracking-tight mb-4">
+            Simple, transparent pricing
+          </h1>
+          <p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
+            Start free, upgrade when you need more. No hidden fees.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          {(Object.entries(PLANS) as [PlanKey, typeof PLANS[PlanKey]][]).map(([key, plan]) => (
+            <Card
+              key={key}
+              className={`relative ${
+                key === 'pro' ? 'border-brand shadow-lg scale-105' : ''
+              }`}
+            >
+              {key === 'pro' && (
+                <Badge className="absolute -top-3 left-1/2 -translate-x-1/2" variant="brand">
+                  Most Popular
+                </Badge>
+              )}
+              <CardHeader>
+                <CardTitle>{plan.name}</CardTitle>
+                <CardDescription>
+                  <span className="text-4xl font-bold text-foreground">
+                    ${plan.price}
+                  </span>
+                  {plan.price > 0 && (
+                    <span className="text-muted-foreground">/month</span>
+                  )}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3">
+                  {plan.features.map((feature) => (
+                    <li key={feature} className="flex items-start gap-2">
+                      <Check className="h-5 w-5 text-brand shrink-0 mt-0.5" />
+                      <span className="text-sm">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+              <CardFooter>
+                <Button
+                  className="w-full"
+                  variant={key === 'pro' ? 'brand' : 'outline'}
+                  onClick={() => handleSubscribe(key)}
+                  disabled={loading !== null}
+                >
+                  {loading === key ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : key === 'free' ? (
+                    'Get Started'
+                  ) : (
+                    'Subscribe'
+                  )}
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+
+        <div className="mt-16 text-center text-sm text-muted-foreground">
+          <p>All plans include SSL encryption and 99.9% uptime SLA.</p>
+          <p className="mt-2">Questions? Contact support@mylder.io</p>
+        </div>
+      </div>
+    </div>
+  )
+}