feat: integrate Cal.com popup booking via @calcom/embed-react

- CalButton component: loads Cal.com embed script, triggers popup on click
- Configured for scheduling.letsbe.solutions (self-hosted)
- Wired into configurator completion step (Book a Call)
- Wired into footer Book a Call button
- Brand colors: #006494 light, #5BA4D9 dark

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/configurator/StepComplete.tsx

@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 import { Calendar, Mail } from 'lucide-react';
 import AnimatedCheckmark from '@/components/icons/AnimatedCheckmark';
 import Button from '@/components/ui/Button';
+import CalButton from '@/components/ui/CalButton';
 import type { WizardFormData } from './WizardContainer';
 
 // ─── Brief Renderer ───────────────────────────────────────────────────────────
@@ -70,26 +71,8 @@ function renderBrief(brief: string) {
 // ─── Cal.com Embed / Booking ──────────────────────────────────────────────────
 
 function BookingSection() {
-  const calcomUrl = process.env.NEXT_PUBLIC_CALCOM_URL;
-
-  if (calcomUrl) {
-    return (
-      <div className="rounded-xl overflow-hidden border border-outline-variant/40 bg-surface-high">
-        <iframe
-          src={calcomUrl}
-          width="100%"
-          height="480"
-          frameBorder="0"
-          title="Book a consultation"
-          className="block"
-          loading="lazy"
-        />
-      </div>
-    );
-  }
-
   return (
-    <div className="rounded-xl border border-outline-variant/40 bg-surface-low px-5 py-5 text-center">
+    <div className="rounded-xl bg-surface-low px-5 py-5 text-center">
       <div className="flex justify-center mb-3">
         <span className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
           <Calendar size={18} strokeWidth={1.5} className="text-primary-dark" />
@@ -97,16 +80,13 @@ function BookingSection() {
       </div>
       <p className="text-sm font-semibold text-on-surface mb-1">Book a Consultation</p>
       <p className="text-xs text-outline mb-4">30 minutes to discuss your brief with our team</p>
-      <Button
-        variant="primary"
-        href="https://cal.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        size="sm"
-        arrow
+      <CalButton
+        className="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-medium text-white transition-all hover:-translate-y-px active:translate-y-0"
+        style={{ background: 'linear-gradient(135deg, #006494, #5BA4D9)' }}
       >
+        <Calendar size={16} />
         Book a Call
-      </Button>
+      </CalButton>
     </div>
   );
 }