@contractspec/bundle.marketing 1.12.0 → 1.14.0

package/dist/node/components/marketing/ContactClient.js

@@ -0,0 +1,1374 @@
+import { createRequire } from "node:module";
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/libs/email/client.ts
+import { createClient, Temv1alpha1 } from "@scaleway/sdk";
+import { Logger } from "@contractspec/lib.logger";
+var DEFAULT_FROM = {
+  email: "noreply@transactional.contractspec.io",
+  name: "ContractSpec"
+};
+var DEFAULT_TEAM_INBOX = {
+  email: "contact@contractspec.io",
+  name: "ContractSpec Team"
+};
+var DEFAULT_REGION = "fr-par";
+var cachedConfig = null;
+var cachedClient = null;
+var apiFactory = (client) => new Temv1alpha1.API(client);
+var mapRegion = (value) => {
+  const normalized = value?.trim().toLowerCase();
+  if (normalized === "par" || normalized === "fr-par")
+    return "fr-par";
+  if (normalized === "ams" || normalized === "nl-ams")
+    return "nl-ams";
+  if (normalized === "waw" || normalized === "pl-waw")
+    return "pl-waw";
+  return DEFAULT_REGION;
+};
+var getEmailConfig = () => {
+  if (cachedConfig) {
+    return { ok: true, config: cachedConfig };
+  }
+  const accessKey = process.env.SCALEWAY_ACCESS_KEY || process.env.SCALEWAY_ACCESS_KEY_QUEUE;
+  const secretKey = process.env.SCALEWAY_SECRET_KEY || process.env.SCALEWAY_SECRET_KEY_QUEUE;
+  const projectId = process.env.SCALEWAY_PROJECT_ID;
+  if (!accessKey || !secretKey || !projectId) {
+    return {
+      ok: false,
+      errorMessage: "Email service is not configured. Please contact us directly at contact@contractspec.io."
+    };
+  }
+  const region = mapRegion(process.env.SCALEWAY_REGION);
+  cachedConfig = {
+    accessKey,
+    secretKey,
+    projectId,
+    region,
+    defaultZone: `${region}-1`,
+    from: {
+      email: process.env.SCALEWAY_EMAIL_FROM_EMAIL ?? DEFAULT_FROM.email,
+      name: process.env.SCALEWAY_EMAIL_FROM_NAME ?? DEFAULT_FROM.name
+    },
+    teamInbox: {
+      email: process.env.SCALEWAY_EMAIL_TEAM_EMAIL ?? DEFAULT_TEAM_INBOX.email,
+      name: process.env.SCALEWAY_EMAIL_TEAM_NAME ?? DEFAULT_TEAM_INBOX.name
+    }
+  };
+  return { ok: true, config: cachedConfig };
+};
+var getTemClient = (config) => {
+  if (cachedClient) {
+    return cachedClient;
+  }
+  const client = createClient({
+    accessKey: config.accessKey,
+    secretKey: config.secretKey,
+    defaultProjectId: config.projectId,
+    defaultRegion: config.region,
+    defaultZone: config.defaultZone
+  });
+  cachedClient = apiFactory(client);
+  return cachedClient;
+};
+var sendEmail = async (config, request) => {
+  try {
+    const client = getTemClient(config);
+    await client.createEmail({
+      region: config.region,
+      projectId: config.projectId,
+      from: config.from,
+      to: request.to,
+      subject: request.subject,
+      text: request.text,
+      html: request.html || request.text,
+      additionalHeaders: request.replyTo ? [{ key: "Reply-To", value: request.replyTo }] : undefined
+    });
+    return { success: true };
+  } catch (error) {
+    new Logger().error("scaleway_tem_email_send_failed", {
+      context: request.context ?? "email",
+      error: error instanceof Error ? error.message : error
+    });
+    return {
+      success: false,
+      error,
+      errorMessage: "Failed to send email via Scaleway."
+    };
+  }
+};
+var __internal = {
+  resetCaches() {
+    cachedClient = null;
+    cachedConfig = null;
+    apiFactory = (client) => new Temv1alpha1.API(client);
+  },
+  setApiFactory(factory) {
+    apiFactory = factory;
+  },
+  setClient(client) {
+    cachedClient = client;
+  }
+};
+
+// src/libs/email/utils.ts
+var escapeHtml = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+var formatMultilineHtml = (value) => escapeHtml(value).replaceAll(`
+`, "<br />");
+
+// src/libs/email/contact.ts
+"use server";
+var CONTACT_MISSING_CONFIG = "Email service is not configured. Please contact us directly at contact@contractspec.io.";
+var CONTACT_SEND_ERROR = "Failed to send message. Please contact us directly at contact@contractspec.io.";
+var submitContactForm = async (formData) => {
+  const name = (formData.get("name") ?? "").toString().trim();
+  const email = (formData.get("email") ?? "").toString().trim();
+  const message = (formData.get("message") ?? "").toString().trim();
+  if (!email) {
+    return {
+      success: false,
+      text: "Please fill in all required fields."
+    };
+  }
+  const configResult = getEmailConfig();
+  if (!configResult.ok || !configResult.config) {
+    return {
+      success: false,
+      text: configResult.errorMessage ?? CONTACT_MISSING_CONFIG
+    };
+  }
+  const senderName = name || email;
+  const emailContentText = `
+New contact form submission from ${senderName}
+
+Contact Information:
+- Name: ${name || "Not provided"}
+- Email: ${email}
+
+Message:
+${message || "No message provided"}
+
+---
+Submitted via ContractSpec contact form
+  `.trim();
+  const emailContentHtml = `
+    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
+      <h1 style="color: #8b5cf6; margin-bottom: 12px;">New contact form submission</h1>
+      <p style="margin: 0 0 12px;">From ${escapeHtml(senderName)}</p>
+      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Contact Information</h2>
+      <ul style="padding-left: 16px; line-height: 1.6; margin: 0 0 16px;">
+        <li>Name: ${escapeHtml(name || "Not provided")}</li>
+        <li>Email: ${escapeHtml(email)}</li>
+      </ul>
+      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Message</h2>
+      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; white-space: pre-wrap; line-height: 1.6;">
+        ${message ? formatMultilineHtml(message) : "No message provided"}
+      </div>
+      <p style="color: #6b7280; font-size: 12px; margin-top: 20px;">Submitted via ContractSpec contact form</p>
+    </div>
+  `;
+  const sendResult = await sendEmail(configResult.config, {
+    to: [configResult.config.teamInbox],
+    subject: `New Contact Form Message from ${senderName}`,
+    text: emailContentText,
+    html: emailContentHtml,
+    replyTo: email,
+    context: "contact-form"
+  });
+  if (!sendResult.success) {
+    return { success: false, text: CONTACT_SEND_ERROR };
+  }
+  return { success: true, text: "Message sent successfully!" };
+};
+
+// src/libs/email/waitlist.ts
+"use server";
+var WAITLIST_MISSING_CONFIG = "Waitlist service is not configured. Please try again later.";
+var WAITLIST_SEND_ERROR = "Failed to join waitlist. Please try again later or contact us directly.";
+var joinWaitlist = async (formData) => {
+  const email = (formData.get("email") ?? "").toString().trim();
+  if (!email || !email.includes("@")) {
+    return {
+      success: false,
+      text: "Please enter a valid email address."
+    };
+  }
+  const configResult = getEmailConfig();
+  if (!configResult.ok || !configResult.config) {
+    return {
+      success: false,
+      text: configResult.errorMessage ?? WAITLIST_MISSING_CONFIG
+    };
+  }
+  const waitlistText = `
+You're on the waitlist!
+
+Thanks for joining the ContractSpec waitlist. You're now in line for early access to:
+
+• Stabilize your AI-generated code with ContractSpec
+• Multi-surface consistency (API, DB, UI, events)
+• Safe regeneration without breaking changes
+• AI governance and contract enforcement
+
+We'll notify you as soon as early access is available. In the meantime, you can:
+
+• Check out our docs: https://contractspec.io/docs
+• Follow our progress on GitHub
+• Book a demo call to see ContractSpec in action
+
+We're excited to have you on board!
+
+---
+ContractSpec Team
+https://contractspec.io
+
+To remove yourself from the waitlist, reply to this email with "remove"
+  `.trim();
+  const waitlistHtml = `
+    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
+      <h1 style="color: #8b5cf6;">You're on the waitlist!</h1>
+      <p>Thanks for joining the ContractSpec waitlist. You're now in line for early access to:</p>
+      <ul style="line-height: 1.8;">
+        <li>Stabilize your AI-generated code with ContractSpec</li>
+        <li>Multi-surface consistency (API, DB, UI, events)</li>
+        <li>Safe regeneration without breaking changes</li>
+        <li>AI governance and contract enforcement</li>
+      </ul>
+      <p>We'll notify you as soon as early access is available. In the meantime, you can:</p>
+      <ul style="line-height: 1.8;">
+        <li>Check out our <a href="https://contractspec.io/docs" style="color: #8b5cf6;">docs</a></li>
+        <li>Follow our progress on GitHub</li>
+        <li>Book a demo call to see ContractSpec in action</li>
+      </ul>
+      <p>We're excited to have you on board!</p>
+      <hr style="margin: 30px 0; border: none; border-top: 1px solid #e5e7eb;" />
+      <p style="color: #6b7280; font-size: 14px;">
+        ContractSpec Team<br />
+        <a href="https://contractspec.io" style="color: #8b5cf6;">contractspec.io</a>
+      </p>
+      <p style="color: #9ca3af; font-size: 12px;">
+        To remove yourself from the waitlist, reply to this email with "remove"
+      </p>
+    </div>
+  `;
+  const userSend = await sendEmail(configResult.config, {
+    to: [{ email }],
+    subject: "You're on the ContractSpec waitlist!",
+    text: waitlistText,
+    html: waitlistHtml,
+    context: "waitlist-welcome"
+  });
+  if (!userSend.success) {
+    return { success: false, text: WAITLIST_SEND_ERROR };
+  }
+  const teamNotificationText = `New waitlist signup from: ${email}`;
+  const teamNotificationHtml = `
+    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
+      <p style="margin: 0 0 8px;">New waitlist signup</p>
+      <p style="margin: 0;"><strong>Email:</strong> ${formatMultilineHtml(email)}</p>
+    </div>
+  `;
+  const teamSend = await sendEmail(configResult.config, {
+    to: [configResult.config.teamInbox],
+    subject: `New Waitlist Signup: ${email}`,
+    text: teamNotificationText,
+    html: teamNotificationHtml,
+    context: "waitlist-team-notification"
+  });
+  if (!teamSend.success) {
+    return { success: false, text: WAITLIST_SEND_ERROR };
+  }
+  return { success: true, text: "Successfully joined waitlist!" };
+};
+
+// src/libs/email/waitlist-application.ts
+"use server";
+var APPLICATION_MISSING_CONFIG = "Waitlist application service is not configured. Please try again later.";
+var APPLICATION_SEND_ERROR = "Failed to submit application. Please try again later or contact us directly.";
+var submitWaitlistApplication = async (formData) => {
+  const email = (formData.get("email") ?? "").toString().trim();
+  const name = (formData.get("name") ?? "").toString().trim();
+  const company = (formData.get("company") ?? "").toString().trim();
+  const role = (formData.get("role") ?? "").toString().trim();
+  const useCase = (formData.get("useCase") ?? "").toString().trim();
+  const currentStack = (formData.get("currentStack") ?? "").toString().trim();
+  const whatBuilding = (formData.get("whatBuilding") ?? "").toString().trim();
+  const whatSolving = (formData.get("whatSolving") ?? "").toString().trim();
+  const teamSize = (formData.get("teamSize") ?? "").toString().trim();
+  const timeline = (formData.get("timeline") ?? "").toString().trim();
+  const openToSessions = formData.get("openToSessions") === "on";
+  const okayWithCaseStudies = formData.get("okayWithCaseStudies") === "on";
+  if (!email || !email.includes("@")) {
+    return {
+      success: false,
+      text: "Please enter a valid email address."
+    };
+  }
+  if (!name || !whatBuilding || !whatSolving) {
+    return {
+      success: false,
+      text: "Please fill in all required fields."
+    };
+  }
+  const configResult = getEmailConfig();
+  if (!configResult.ok || !configResult.config) {
+    return {
+      success: false,
+      text: configResult.errorMessage ?? APPLICATION_MISSING_CONFIG
+    };
+  }
+  const applicantText = `
+You're on the list.
+
+Thanks for applying to the ContractSpec design partner program. We're slowly onboarding design partners in waves. If your use case is a good fit, we'll reach out personally.
+
+What happens next:
+• We review applications weekly
+• If selected, we'll reach out via email to schedule an intro call
+• During early access, you'll get hands-on support and influence over the roadmap
+
+In the meantime:
+• Check out our docs: https://contractspec.io/docs
+• Book a demo call: https://contractspec.io/contact
+
+We're excited about the possibility of working together!
+
+---
+ContractSpec Team
+https://contractspec.io
+  `.trim();
+  const applicantHtml = `
+    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
+      <h1 style="color: #8b5cf6;">You're on the list.</h1>
+      <p>Thanks for applying to the ContractSpec design partner program. We're slowly onboarding design partners in waves. If your use case is a good fit, we'll reach out personally.</p>
+      <h2 style="color: #8b5cf6; margin-top: 24px;">What happens next:</h2>
+      <ul style="line-height: 1.8;">
+        <li>We review applications weekly</li>
+        <li>If selected, we'll reach out via email to schedule an intro call</li>
+        <li>During early access, you'll get hands-on support and influence over the roadmap</li>
+      </ul>
+      <h2 style="color: #8b5cf6; margin-top: 24px;">In the meantime:</h2>
+      <ul style="line-height: 1.8;">
+        <li>Check out our <a href="https://contractspec.io/docs" style="color: #8b5cf6;">docs</a></li>
+        <li>Book a demo call: <a href="https://contractspec.io/contact" style="color: #8b5cf6;">contractspec.io/contact</a></li>
+      </ul>
+      <p>We're excited about the possibility of working together!</p>
+      <hr style="margin: 30px 0; border: none; border-top: 1px solid #e5e7eb;" />
+      <p style="color: #6b7280; font-size: 14px;">
+        ContractSpec Team<br />
+        <a href="https://contractspec.io" style="color: #8b5cf6;">contractspec.io</a>
+      </p>
+    </div>
+  `;
+  const applicantSend = await sendEmail(configResult.config, {
+    to: [{ email }],
+    subject: "You're on the ContractSpec design partner waitlist!",
+    text: applicantText,
+    html: applicantHtml,
+    context: "waitlist-application-welcome"
+  });
+  if (!applicantSend.success) {
+    return { success: false, text: APPLICATION_SEND_ERROR };
+  }
+  const preferencesText = `
+Open to 1:1 product/design sessions: ${openToSessions ? "Yes" : "No"}
+Okay with anonymized case studies: ${okayWithCaseStudies ? "Yes" : "No"}
+  `.trim();
+  const teamEmailText = `
+New Design Partner Waitlist Application
+
+Contact Information:
+- Name: ${name}
+- Email: ${email}
+${company ? `- Company/Project: ${company}` : ""}
+${role ? `- Role: ${role}` : ""}
+
+Application Details:
+- What are you building with AI today?
+${whatBuilding}
+
+- What do you hope ContractSpec will solve for you?
+${whatSolving}
+
+- Primary use case: ${useCase || "Not specified"}
+- Current stack: ${currentStack || "Not specified"}
+- Team Size: ${teamSize || "Not specified"}
+- Timeline: ${timeline || "Not specified"}
+
+Preferences:
+- Open to 1:1 product/design sessions: ${openToSessions ? "Yes" : "No"}
+- Okay with anonymized case studies: ${okayWithCaseStudies ? "Yes" : "No"}
+
+---
+Submitted via ContractSpec waitlist application form
+  `.trim();
+  const teamEmailHtml = `
+    <div style="font-family: sans-serif; max-width: 720px; margin: 0 auto;">
+      <h1 style="color: #8b5cf6;">New Design Partner Waitlist Application</h1>
+      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Contact Information</h2>
+      <ul style="padding-left: 16px; line-height: 1.6; margin: 0 0 16px;">
+        <li>Name: ${escapeHtml(name)}</li>
+        <li>Email: ${escapeHtml(email)}</li>
+        ${company ? `<li>Company/Project: ${escapeHtml(company)}</li>` : ""}
+        ${role ? `<li>Role: ${escapeHtml(role)}</li>` : ""}
+      </ul>
+      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Application Details</h2>
+      <p style="margin: 0 0 8px; font-weight: 600;">What are you building with AI today?</p>
+      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; white-space: pre-wrap; line-height: 1.6;">
+        ${formatMultilineHtml(whatBuilding)}
+      </div>
+      <p style="margin: 16px 0 8px; font-weight: 600;">What do you hope ContractSpec will solve for you?</p>
+      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; white-space: pre-wrap; line-height: 1.6;">
+        ${formatMultilineHtml(whatSolving)}
+      </div>
+      <ul style="padding-left: 16px; line-height: 1.6; margin: 16px 0;">
+        <li>Primary use case: ${escapeHtml(useCase || "Not specified")}</li>
+        <li>Current stack: ${escapeHtml(currentStack || "Not specified")}</li>
+        <li>Team Size: ${escapeHtml(teamSize || "Not specified")}</li>
+        <li>Timeline: ${escapeHtml(timeline || "Not specified")}</li>
+      </ul>
+      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Preferences</h2>
+      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; line-height: 1.6;">
+        ${formatMultilineHtml(preferencesText)}
+      </div>
+      <p style="color: #6b7280; font-size: 12px; margin-top: 20px;">Submitted via ContractSpec waitlist application form</p>
+    </div>
+  `;
+  const teamSend = await sendEmail(configResult.config, {
+    to: [configResult.config.teamInbox],
+    subject: `New Design Partner Application: ${name} (${email})`,
+    text: teamEmailText,
+    html: teamEmailHtml,
+    replyTo: email,
+    context: "waitlist-application-team-notification"
+  });
+  if (!teamSend.success) {
+    return { success: false, text: APPLICATION_SEND_ERROR };
+  }
+  return {
+    success: true,
+    text: "Application submitted successfully!"
+  };
+};
+
+// src/components/marketing/waitlist-section.tsx
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+import { AlertCircle, CheckCircle } from "lucide-react";
+import { Button } from "@contractspec/lib.design-system";
+import { Textarea } from "@contractspec/lib.design-system";
+import { Label } from "@contractspec/lib.ui-kit-web/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@contractspec/lib.ui-kit-web/ui/select";
+import { Checkbox } from "@contractspec/lib.ui-kit-web/ui/checkbox";
+import { Switch } from "@contractspec/lib.ui-kit-web/ui/switch";
+import { Input } from "@contractspec/lib.design-system";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+var simpleWaitlistSchema = z.object({
+  email: z.email("Please enter a valid email address")
+});
+var designPartnerSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  email: z.email("Please enter a valid email address"),
+  company: z.string().optional(),
+  role: z.string().optional(),
+  useCase: z.string().optional(),
+  currentStack: z.string().optional(),
+  whatBuilding: z.string().min(1, "Please tell us what you are building"),
+  whatSolving: z.string().min(1, "Please tell us what ContractSpec will solve for you"),
+  teamSize: z.string().optional(),
+  timeline: z.string().optional(),
+  openToSessions: z.boolean().default(false),
+  okayWithCaseStudies: z.boolean().default(false)
+});
+function WaitlistSection({
+  variant = "default",
+  context = "pricing"
+}) {
+  const [isDesignPartner, setIsDesignPartner] = useState(false);
+  const [submitResult, setSubmitResult] = useState(null);
+  const [isPending, setIsPending] = useState(false);
+  const simpleForm = useForm({
+    resolver: zodResolver(simpleWaitlistSchema),
+    defaultValues: {
+      email: ""
+    }
+  });
+  const designPartnerForm = useForm({
+    resolver: zodResolver(designPartnerSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      company: "",
+      role: "",
+      useCase: "",
+      currentStack: "",
+      whatBuilding: "",
+      whatSolving: "",
+      teamSize: "",
+      timeline: "",
+      openToSessions: false,
+      okayWithCaseStudies: false
+    }
+  });
+  const simpleEmail = simpleForm.watch("email");
+  const designPartnerEmail = designPartnerForm.watch("email");
+  useEffect(() => {
+    const currentDesignPartnerEmail = designPartnerForm.getValues("email");
+    if (simpleEmail && simpleEmail !== currentDesignPartnerEmail) {
+      designPartnerForm.setValue("email", simpleEmail, { shouldDirty: false });
+    }
+  }, [simpleEmail, designPartnerForm]);
+  useEffect(() => {
+    const currentSimpleEmail = simpleForm.getValues("email");
+    if (designPartnerEmail && designPartnerEmail !== currentSimpleEmail) {
+      simpleForm.setValue("email", designPartnerEmail, { shouldDirty: false });
+    }
+  }, [designPartnerEmail, simpleForm]);
+  const handleSimpleSubmit = async (data) => {
+    setIsPending(true);
+    setSubmitResult(null);
+    try {
+      const formData = new FormData;
+      formData.set("email", data.email);
+      const result = await joinWaitlist(formData);
+      if (result.success) {
+        setSubmitResult({
+          success: true,
+          text: "Thanks for joining the waitlist! Check your inbox for a confirmation."
+        });
+        simpleForm.reset();
+      } else {
+        setSubmitResult({
+          success: false,
+          text: result.text || "Failed to join waitlist. Please try again."
+        });
+      }
+    } catch (_error) {
+      setSubmitResult({
+        success: false,
+        text: "Failed to join waitlist. Please try again."
+      });
+    } finally {
+      setIsPending(false);
+    }
+  };
+  const handleDesignPartnerSubmit = async (data) => {
+    setIsPending(true);
+    setSubmitResult(null);
+    try {
+      const formData = new FormData;
+      formData.set("email", data.email);
+      formData.set("name", data.name);
+      if (data.company)
+        formData.set("company", data.company);
+      if (data.role)
+        formData.set("role", data.role);
+      if (data.useCase)
+        formData.set("useCase", data.useCase);
+      if (data.currentStack)
+        formData.set("currentStack", data.currentStack);
+      formData.set("whatBuilding", data.whatBuilding);
+      formData.set("whatSolving", data.whatSolving);
+      if (data.teamSize)
+        formData.set("teamSize", data.teamSize);
+      if (data.timeline)
+        formData.set("timeline", data.timeline);
+      if (data.openToSessions)
+        formData.set("openToSessions", "on");
+      if (data.okayWithCaseStudies)
+        formData.set("okayWithCaseStudies", "on");
+      const result = await submitWaitlistApplication(formData);
+      if (result.success) {
+        setSubmitResult({
+          success: true,
+          text: "You're on the list. Thanks for applying. We're slowly onboarding design partners in waves. If your use case is a good fit, we'll reach out personally."
+        });
+        designPartnerForm.reset();
+      } else {
+        setSubmitResult({
+          success: false,
+          text: result.text || "Failed to submit application. Please try again."
+        });
+      }
+    } catch (_error) {
+      setSubmitResult({
+        success: false,
+        text: "Failed to submit application. Please try again."
+      });
+    } finally {
+      setIsPending(false);
+    }
+  };
+  const onSubmit = isDesignPartner ? designPartnerForm.handleSubmit(handleDesignPartnerSubmit) : simpleForm.handleSubmit(handleSimpleSubmit);
+  const isCompact = variant === "compact";
+  return /* @__PURE__ */ jsxDEV("div", {
+    id: "waitlist",
+    className: isCompact ? "space-y-4" : "card-subtle space-y-6 p-8",
+    children: [
+      !isCompact && /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "inline-flex items-center gap-2 rounded-full border border-violet-500/20 bg-violet-500/10 px-3 py-1",
+            children: /* @__PURE__ */ jsxDEV("span", {
+              className: "text-sm font-medium text-violet-300",
+              children: isDesignPartner ? "Design Partner Waitlist" : "Join the Waitlist"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: isDesignPartner ? "Apply for early access to ContractSpec" : "Get early access to ContractSpec"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-sm",
+            children: isDesignPartner ? "Tell us what you're building. We'll prioritize teams where ContractSpec can have a big impact, and where we can learn the most." : "Join the waitlist to be notified when ContractSpec becomes available."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      !isCompact && /* @__PURE__ */ jsxDEV("div", {
+        className: "border-border bg-muted/20 flex items-center justify-between gap-4 rounded-lg border p-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-1",
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                htmlFor: "design-partner-toggle",
+                className: "text-sm font-medium",
+                children: "Apply as a design partner"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-xs",
+                children: isDesignPartner ? "Get hands-on support, influence the roadmap, and founding discount" : "Get priority access, 1:1 onboarding, and help shape ContractSpec"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Switch, {
+            id: "design-partner-toggle",
+            checked: isDesignPartner,
+            onCheckedChange: setIsDesignPartner,
+            disabled: isPending || submitResult?.success
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      !isCompact && isDesignPartner && /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-sm font-medium",
+            children: "Benefits:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground space-y-1 text-sm",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "• Early access to ContractSpec Studio"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "• 1:1 onboarding and architecture sessions"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "• Priority support via direct channels"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "• Influence over roadmap and features"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "• Founding discount when paid plans launch"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("form", {
+        onSubmit,
+        className: "space-y-4",
+        children: [
+          isDesignPartner ? /* @__PURE__ */ jsxDEV(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "grid gap-4 md:grid-cols-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        htmlFor: "waitlist-name",
+                        className: "text-sm font-medium",
+                        children: [
+                          "Name ",
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "text-red-400",
+                            children: "*"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Input, {
+                        id: "waitlist-name",
+                        ...designPartnerForm.register("name"),
+                        type: "text",
+                        placeholder: "Your name",
+                        disabled: isPending || submitResult?.success
+                      }, undefined, false, undefined, this),
+                      designPartnerForm.formState.errors.name && /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-xs text-red-400",
+                        children: designPartnerForm.formState.errors.name.message
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        htmlFor: "waitlist-email",
+                        className: "text-sm font-medium",
+                        children: [
+                          "Email ",
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "text-red-400",
+                            children: "*"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Input, {
+                        id: "waitlist-email",
+                        ...designPartnerForm.register("email"),
+                        type: "email",
+                        placeholder: "your@email.com",
+                        disabled: isPending || submitResult?.success
+                      }, undefined, false, undefined, this),
+                      designPartnerForm.formState.errors.email && /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-xs text-red-400",
+                        children: designPartnerForm.formState.errors.email.message
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "grid gap-4 md:grid-cols-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        htmlFor: "waitlist-company",
+                        className: "text-sm font-medium",
+                        children: "Company / Project Name"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Input, {
+                        id: "waitlist-company",
+                        ...designPartnerForm.register("company"),
+                        type: "text",
+                        placeholder: "Your company or project",
+                        disabled: isPending || submitResult?.success
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        htmlFor: "waitlist-role",
+                        className: "text-sm font-medium",
+                        children: "Role"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Select, {
+                        value: designPartnerForm.watch("role") || "",
+                        onValueChange: (value) => designPartnerForm.setValue("role", value),
+                        disabled: isPending || submitResult?.success,
+                        children: [
+                          /* @__PURE__ */ jsxDEV(SelectTrigger, {
+                            id: "waitlist-role",
+                            className: "w-full",
+                            children: /* @__PURE__ */ jsxDEV(SelectValue, {
+                              placeholder: "Select your role"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV(SelectContent, {
+                            children: [
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "founder",
+                                children: "Founder"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "cto",
+                                children: "CTO"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "lead-engineer",
+                                children: "Lead Engineer"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "engineer",
+                                children: "Engineer"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "product-manager",
+                                children: "Product Manager"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "other",
+                                children: "Other"
+                              }, undefined, false, undefined, this)
+                            ]
+                          }, undefined, true, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "grid gap-4 md:grid-cols-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        htmlFor: "waitlist-use-case",
+                        className: "text-sm font-medium",
+                        children: "Primary use case"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Select, {
+                        value: designPartnerForm.watch("useCase") || "",
+                        onValueChange: (value) => designPartnerForm.setValue("useCase", value),
+                        disabled: isPending || submitResult?.success,
+                        children: [
+                          /* @__PURE__ */ jsxDEV(SelectTrigger, {
+                            id: "waitlist-use-case",
+                            className: "w-full",
+                            children: /* @__PURE__ */ jsxDEV(SelectValue, {
+                              placeholder: "Select a use case"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV(SelectContent, {
+                            children: [
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "api-platform",
+                                children: "API platform"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "ai-ops",
+                                children: "AI operations"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "integration-hub",
+                                children: "Integration hub"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "internal-tools",
+                                children: "Internal tools"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "data-pipelines",
+                                children: "Data pipelines"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "other",
+                                children: "Other"
+                              }, undefined, false, undefined, this)
+                            ]
+                          }, undefined, true, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        htmlFor: "waitlist-current-stack",
+                        className: "text-sm font-medium",
+                        children: "Current stack"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Input, {
+                        id: "waitlist-current-stack",
+                        ...designPartnerForm.register("currentStack"),
+                        type: "text",
+                        placeholder: "e.g. Next.js, Postgres, OpenAPI",
+                        disabled: isPending || submitResult?.success
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Label, {
+                    htmlFor: "waitlist-what-building",
+                    className: "text-sm font-medium",
+                    children: [
+                      "What are you building with AI today?",
+                      " ",
+                      /* @__PURE__ */ jsxDEV("span", {
+                        className: "text-red-400",
+                        children: "*"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Textarea, {
+                    id: "waitlist-what-building",
+                    ...designPartnerForm.register("whatBuilding"),
+                    placeholder: "Tell us about your project...",
+                    disabled: isPending || submitResult?.success,
+                    rows: 4
+                  }, undefined, false, undefined, this),
+                  designPartnerForm.formState.errors.whatBuilding && /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-xs text-red-400",
+                    children: designPartnerForm.formState.errors.whatBuilding.message
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Label, {
+                    htmlFor: "waitlist-what-solving",
+                    className: "text-sm font-medium",
+                    children: [
+                      "What do you hope ContractSpec will solve for you?",
+                      " ",
+                      /* @__PURE__ */ jsxDEV("span", {
+                        className: "text-red-400",
+                        children: "*"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Textarea, {
+                    id: "waitlist-what-solving",
+                    ...designPartnerForm.register("whatSolving"),
+                    placeholder: "What problems are you trying to solve?",
+                    disabled: isPending || submitResult?.success,
+                    rows: 4
+                  }, undefined, false, undefined, this),
+                  designPartnerForm.formState.errors.whatSolving && /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-xs text-red-400",
+                    children: designPartnerForm.formState.errors.whatSolving.message
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "grid gap-4 md:grid-cols-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        htmlFor: "waitlist-team-size",
+                        className: "text-sm font-medium",
+                        children: "Team Size"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Select, {
+                        value: designPartnerForm.watch("teamSize") || "",
+                        onValueChange: (value) => designPartnerForm.setValue("teamSize", value),
+                        disabled: isPending || submitResult?.success,
+                        children: [
+                          /* @__PURE__ */ jsxDEV(SelectTrigger, {
+                            id: "waitlist-team-size",
+                            className: "w-full",
+                            children: /* @__PURE__ */ jsxDEV(SelectValue, {
+                              placeholder: "Select team size"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV(SelectContent, {
+                            children: [
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "solo",
+                                children: "Solo"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "2-5",
+                                children: "2-5"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "6-20",
+                                children: "6-20"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "20+",
+                                children: "20+"
+                              }, undefined, false, undefined, this)
+                            ]
+                          }, undefined, true, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        htmlFor: "waitlist-timeline",
+                        className: "text-sm font-medium",
+                        children: "Timeline"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Select, {
+                        value: designPartnerForm.watch("timeline") || "",
+                        onValueChange: (value) => designPartnerForm.setValue("timeline", value),
+                        disabled: isPending || submitResult?.success,
+                        children: [
+                          /* @__PURE__ */ jsxDEV(SelectTrigger, {
+                            id: "waitlist-timeline",
+                            className: "w-full",
+                            children: /* @__PURE__ */ jsxDEV(SelectValue, {
+                              placeholder: "Select timeline"
+                            }, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV(SelectContent, {
+                            children: [
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "now",
+                                children: "Now"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "1-3-months",
+                                children: "1-3 months"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "3-6-months",
+                                children: "3-6 months"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV(SelectItem, {
+                                value: "exploring",
+                                children: "Exploring"
+                              }, undefined, false, undefined, this)
+                            ]
+                          }, undefined, true, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-3",
+                children: [
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "flex items-start gap-3",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Checkbox, {
+                        id: "waitlist-open-to-sessions",
+                        checked: designPartnerForm.watch("openToSessions"),
+                        onCheckedChange: (checked) => designPartnerForm.setValue("openToSessions", checked === true),
+                        disabled: isPending || submitResult?.success
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        htmlFor: "waitlist-open-to-sessions",
+                        className: "cursor-pointer text-sm leading-relaxed",
+                        children: "I'm open to 1:1 product/design sessions"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "flex items-start gap-3",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Checkbox, {
+                        id: "waitlist-case-studies",
+                        checked: designPartnerForm.watch("okayWithCaseStudies"),
+                        onCheckedChange: (checked) => designPartnerForm.setValue("okayWithCaseStudies", checked === true),
+                        disabled: isPending || submitResult?.success
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Label, {
+                        htmlFor: "waitlist-case-studies",
+                        className: "cursor-pointer text-sm leading-relaxed",
+                        children: "I'm okay with anonymized case studies about our usage"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV(Label, {
+                htmlFor: "waitlist-email",
+                className: "text-sm font-medium",
+                children: [
+                  "Email ",
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-red-400",
+                    children: "*"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV(Input, {
+                id: "waitlist-email",
+                ...simpleForm.register("email"),
+                type: "email",
+                placeholder: "your@email.com",
+                disabled: isPending || submitResult?.success
+              }, undefined, false, undefined, this),
+              simpleForm.formState.errors.email && /* @__PURE__ */ jsxDEV("p", {
+                className: "text-xs text-red-400",
+                children: simpleForm.formState.errors.email.message
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          submitResult && !isPending && /* @__PURE__ */ jsxDEV("div", {
+            className: `flex items-start gap-2 rounded-lg p-4 text-sm ${submitResult.success ? "border border-green-500/20 bg-green-500/10 text-green-400" : "border border-red-500/20 bg-red-500/10 text-red-400"}`,
+            children: [
+              submitResult.success ? /* @__PURE__ */ jsxDEV(CheckCircle, {
+                size: 20,
+                className: "mt-0.5 shrink-0"
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(AlertCircle, {
+                size: 20,
+                className: "mt-0.5 shrink-0"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex-1",
+                children: submitResult.success ? /* @__PURE__ */ jsxDEV(Fragment, {
+                  children: [
+                    /* @__PURE__ */ jsxDEV("p", {
+                      className: "mb-1 font-semibold",
+                      children: "You're on the list."
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("p", {
+                      className: "text-sm",
+                      children: submitResult.text
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV("p", {
+                  children: submitResult.text
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Button, {
+            type: "submit",
+            disabled: isPending || submitResult?.success,
+            className: "w-full",
+            children: isPending ? "Submitting..." : isDesignPartner ? "Apply to the waitlist" : "Join waitlist"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-center text-xs",
+            children: "No spam. We'll only email you about ContractSpec and your application."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/marketing/ContactClient.tsx
+import { useActionState } from "react";
+import {
+  Calendar,
+  MessageSquare,
+  CheckCircle as CheckCircle2,
+  AlertCircle as AlertCircle2
+} from "lucide-react";
+import {
+  ActionForm,
+  Button as Button2,
+  Input as Input2,
+  Textarea as Textarea2
+} from "@contractspec/lib.design-system";
+import { VStack, HStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import {
+  H2,
+  H1,
+  Small,
+  Muted
+} from "@contractspec/lib.ui-kit-web/ui/typography";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function ContactClient() {
+  const handleContactSubmit = async (_prevState, formData) => {
+    const result = await submitContactForm(formData);
+    if (result.success) {
+      return {
+        success: true,
+        text: "Message sent successfully! We'll get back to you soon."
+      };
+    } else {
+      return {
+        success: false,
+        text: result.text || "Failed to send message. Please try again."
+      };
+    }
+  };
+  const [contactResult, contactAction, contactPending] = useActionState(handleContactSubmit, null);
+  return /* @__PURE__ */ jsxDEV2("section", {
+    className: "section-padding hero-gradient w-full",
+    children: /* @__PURE__ */ jsxDEV2(VStack, {
+      className: "mx-auto max-w-4xl gap-16",
+      children: [
+        /* @__PURE__ */ jsxDEV2(VStack, {
+          className: "gap-4 text-center",
+          children: [
+            /* @__PURE__ */ jsxDEV2(H1, {
+              className: "text-5xl font-bold",
+              children: "Get in touch"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2(Muted, {
+              className: "text-lg",
+              children: "Choose how you'd like to connect with us"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(WaitlistSection, {
+          context: "contact"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV2(VStack, {
+          className: "card-subtle gap-6 p-8",
+          id: "call",
+          children: [
+            /* @__PURE__ */ jsxDEV2(HStack, {
+              className: "items-center gap-3",
+              children: [
+                /* @__PURE__ */ jsxDEV2(Calendar, {
+                  className: "text-blue-400",
+                  size: 24
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV2(VStack, {
+                  className: "items-start gap-1",
+                  children: [
+                    /* @__PURE__ */ jsxDEV2(H2, {
+                      className: "text-2xl font-bold",
+                      children: "Book a 20-min call"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV2(Muted, {
+                      className: "text-sm",
+                      children: "Schedule a walkthrough with our team to see ContractSpec in action"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV2("div", {
+              className: "border-border overflow-hidden rounded-lg border",
+              children: /* @__PURE__ */ jsxDEV2("object", {
+                data: "https://meet.reclaimai.com/e/f863cb29-caac-44b6-972b-1407dd9545a3",
+                width: "100%",
+                height: "700px",
+                style: { outline: "none" },
+                "aria-label": "Calendar booking widget"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(VStack, {
+          className: "card-subtle gap-6 p-8",
+          id: "message",
+          children: [
+            /* @__PURE__ */ jsxDEV2(HStack, {
+              className: "items-center gap-3",
+              children: [
+                /* @__PURE__ */ jsxDEV2(MessageSquare, {
+                  className: "text-emerald-400",
+                  size: 24
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV2(VStack, {
+                  className: "items-start gap-1",
+                  children: [
+                    /* @__PURE__ */ jsxDEV2(H2, {
+                      className: "text-2xl font-bold",
+                      children: "Send us a message"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV2(Muted, {
+                      className: "text-sm",
+                      children: "Have questions or feedback? We'd love to hear from you"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV2(ActionForm, {
+              action: contactAction,
+              children: /* @__PURE__ */ jsxDEV2(VStack, {
+                className: "gap-4",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(VStack, {
+                    className: "gap-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Small, {
+                        className: "text-sm font-medium",
+                        children: "Name"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Input2, {
+                        id: "contact-name",
+                        name: "name",
+                        type: "text",
+                        placeholder: "Your name",
+                        disabled: contactPending || contactResult?.success,
+                        required: true
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(VStack, {
+                    className: "gap-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Small, {
+                        className: "text-sm font-medium",
+                        children: "Email"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Input2, {
+                        id: "contact-email",
+                        name: "email",
+                        type: "email",
+                        keyboard: { kind: "email" },
+                        placeholder: "your@email.com",
+                        disabled: contactPending || contactResult?.success,
+                        required: true
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(VStack, {
+                    className: "gap-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Small, {
+                        className: "text-sm font-medium",
+                        children: "Message"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Textarea2, {
+                        id: "contact-message",
+                        name: "message",
+                        placeholder: "Tell us what's on your mind...",
+                        disabled: contactPending || contactResult?.success,
+                        rows: 6,
+                        required: true
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  contactResult && !contactPending && /* @__PURE__ */ jsxDEV2(HStack, {
+                    className: `items-center gap-2 rounded-lg p-3 text-sm ${contactResult.success ? "border border-green-500/20 bg-green-500/10 text-green-400" : "border border-red-500/20 bg-red-500/10 text-red-400"}`,
+                    children: [
+                      contactResult.success ? /* @__PURE__ */ jsxDEV2(CheckCircle2, {
+                        size: 16
+                      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2(AlertCircle2, {
+                        size: 16
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Small, {
+                        children: contactResult.text
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    type: "submit",
+                    disabled: contactPending || contactResult?.success,
+                    className: "w-full",
+                    children: contactPending ? "Sending..." : "Send message"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  ContactClient
+};