troc: Add Cal.com scheduling integration

app/page.tsx

@@ -2,6 +2,7 @@ import { ArrowRight, ArrowUpRight } from "lucide-react";
 import { Footer } from "@/components/footer";
 import { Globe } from "@/components/globe";
 import { GithubBadge } from "@/components/github-badge";
+import { CalEmbed } from "@/components/cal-embed";
 
 const EVENTS = [
   { id: "01", title: "Lima #1", city: "Lima", country: "Peru", date: "Aug 2024" },
@@ -66,6 +67,12 @@ export default function HomePage() {
               >
                 Events
               </a>
+              <a
+                href="#schedule"
+                className="text-label hover:text-signal transition-colors hidden sm:block"
+              >
+                Schedule
+              </a>
               <GithubBadge />
               <a
                 href="https://crafters.chat/"
@@ -401,6 +408,44 @@ export default function HomePage() {
           </div>
         </section>
 
+        {/* ════════════════════════════════════════
+            SCHEDULE
+           ════════════════════════════════════════ */}
+        <section id="schedule" className="section-border relative overflow-hidden">
+          <div className="grid-overlay" style={{ opacity: 0.3 }} />
+
+          <div className="relative z-10 px-5 sm:px-8 py-8 sm:py-12">
+            {/* Section header */}
+            <div className="flex justify-center mb-6">
+              <div className="line-marker">
+                <span className="text-label">Schedule</span>
+              </div>
+            </div>
+
+            <h2 className="text-headline text-foreground text-center mb-4">
+              Book a Meeting
+            </h2>
+
+            <div className="flex justify-center mb-6">
+              <div className="line-signal-center w-48" />
+            </div>
+
+            <div className="max-w-md mx-auto mb-8 text-center">
+              <p className="text-xs text-muted-foreground font-mono leading-relaxed">
+                Want to chat about partnerships, sponsorships, or bringing Code
+                Brew to your city? Schedule a time to connect with our team.
+              </p>
+            </div>
+
+            {/* Cal.com embed */}
+            <div className="max-w-4xl mx-auto">
+              <div className="border border-border rounded-sm overflow-hidden bg-background/50 backdrop-blur-sm">
+                <CalEmbed calLink="team/codebrew/meet" className="w-full" />
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* ════════════════════════════════════════
             PARTNERS
            ════════════════════════════════════════ */}

components/cal-embed.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface CalEmbedProps {
+  calLink?: string;
+  className?: string;
+}
+
+export function CalEmbed({ 
+  calLink = "team/codebrew/meet", 
+  className = "" 
+}: CalEmbedProps) {
+  const calRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Load Cal.com embed script
+    const script = document.createElement("script");
+    script.src = "https://app.cal.com/embed/embed.js";
+    script.async = true;
+
+    script.onload = () => {
+      // Initialize Cal after script loads
+      if (typeof window !== "undefined" && "Cal" in window) {
+        const Cal = (window as Window & { Cal: (action: string, config: { origin: string }) => void }).Cal;
+        Cal("init", {origin: "https://app.cal.com"});
+      }
+    };
+
+    document.body.appendChild(script);
+
+    return () => {
+      // Cleanup script on unmount
+      const scripts = document.querySelectorAll('script[src="https://app.cal.com/embed/embed.js"]');
+      scripts.forEach(s => s.remove());
+    };
+  }, []);
+
+  return (
+    <div className={className}>
+      <div
+        ref={calRef}
+        data-cal-link={calLink}
+        data-cal-config='{"layout":"month_view","theme":"dark"}'
+        style={{ 
+          width: "100%", 
+          height: "100%", 
+          minHeight: "600px",
+          overflow: "scroll"
+        }}
+      />
+    </div>
+  );
+}