@burdenoff/website-sdk 0.0.0-dev

package/dist/components/contact.js

@@ -0,0 +1,806 @@
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var ReCAPTCHA = require('react-google-recaptcha');
+var sonner = require('sonner');
+var jsxRuntime = require('react/jsx-runtime');
+var reactHelmetAsync = require('react-helmet-async');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var LabelPrimitive = require('@radix-ui/react-label');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ReCAPTCHA__default = /*#__PURE__*/_interopDefault(ReCAPTCHA);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/client/security.ts
+var LOOPBACK_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "::1"]);
+var RESERVED_HEADERS = /* @__PURE__ */ new Set([
+  "authorization",
+  "cookie",
+  "x-actor-id",
+  "x-actor-type",
+  "x-consent-granted-by",
+  "x-consent-scope",
+  "x-consent-granted-at",
+  "x-consent-expires-at"
+]);
+function validateGatewayUrl(value) {
+  let url;
+  try {
+    url = new URL(value);
+  } catch {
+    throw new Error("Gateway URL must be a valid absolute URL");
+  }
+  if (url.protocol === "https:") {
+    return url.toString();
+  }
+  if (url.protocol === "http:" && LOOPBACK_HOSTS.has(url.hostname.toLowerCase())) {
+    return url.toString();
+  }
+  throw new Error("Gateway URL must use HTTPS unless it targets localhost");
+}
+function sanitizeHeaders(headers) {
+  if (!headers) return void 0;
+  return Object.fromEntries(
+    Object.entries(headers).filter(
+      ([key]) => !RESERVED_HEADERS.has(key.toLowerCase())
+    )
+  );
+}
+
+// src/client/graphql-client.ts
+var _WebSDKClient = class _WebSDKClient {
+  constructor(config) {
+    __publicField(this, "config");
+    __publicField(this, "queryCache", /* @__PURE__ */ new Map());
+    __publicField(this, "inflight", /* @__PURE__ */ new Map());
+    this.config = {
+      ...config,
+      gatewayUrl: validateGatewayUrl(config.gatewayUrl),
+      headers: sanitizeHeaders(config.headers)
+    };
+  }
+  getConfig() {
+    return this.config;
+  }
+  /**
+   * Execute a GraphQL query (with deduplication and caching)
+   */
+  async query(query, variables) {
+    const cacheKey = JSON.stringify({ query, variables });
+    const cached = this.queryCache.get(cacheKey);
+    if (cached) {
+      if (Date.now() - cached.ts < _WebSDKClient.CACHE_TTL) {
+        return cached.data;
+      }
+      this.queryCache.delete(cacheKey);
+    }
+    const existing = this.inflight.get(cacheKey);
+    if (existing) {
+      return existing;
+    }
+    const promise = this.request(query, variables).then((result) => {
+      if (result.data && !result.errors?.length) {
+        if (this.queryCache.size >= _WebSDKClient.MAX_CACHE_ENTRIES) {
+          const oldestEntry = this.queryCache.keys().next().value;
+          if (oldestEntry) {
+            this.queryCache.delete(oldestEntry);
+          }
+        }
+        this.queryCache.set(cacheKey, { data: result, ts: Date.now() });
+      }
+      return result;
+    }).finally(() => {
+      this.inflight.delete(cacheKey);
+    });
+    this.inflight.set(cacheKey, promise);
+    return promise;
+  }
+  /**
+   * Execute a GraphQL mutation
+   */
+  async mutate(mutation, variables) {
+    return this.request(mutation, variables);
+  }
+  async request(query, variables) {
+    try {
+      const response = await fetch(this.config.gatewayUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-product-id": this.config.productId,
+          ...this.config.headers
+        },
+        body: JSON.stringify({ query, variables })
+      });
+      if (!response.ok) {
+        console.error(
+          "[WebSDK] GraphQL request failed",
+          response.status,
+          response.statusText
+        );
+        return {
+          errors: [
+            {
+              message: `HTTP ${response.status}: ${response.statusText}`,
+              extensions: { code: `HTTP_${response.status}` }
+            }
+          ]
+        };
+      }
+      return await response.json();
+    } catch (error) {
+      console.error(
+        "[WebSDK] Network error",
+        error instanceof Error ? error.message : "unknown error"
+      );
+      return {
+        errors: [
+          {
+            message: error instanceof Error ? error.message : "Network error",
+            extensions: { code: "NETWORK_ERROR" }
+          }
+        ]
+      };
+    }
+  }
+};
+__publicField(_WebSDKClient, "CACHE_TTL", 5 * 60 * 1e3);
+// 5 minutes
+__publicField(_WebSDKClient, "MAX_CACHE_ENTRIES", 100);
+var WebSDKContext = React.createContext(null);
+function useWebSDK() {
+  const client = React.useContext(WebSDKContext);
+  if (!client) {
+    throw new Error("useWebSDK must be used within a WebSDKProvider");
+  }
+  return client;
+}
+function useWebSDKConfig() {
+  const client = useWebSDK();
+  return client.getConfig();
+}
+var ProductContext = React.createContext({
+  product: null,
+  loading: true,
+  error: null,
+  hasProvider: false,
+  refetch: () => {
+  }
+});
+function useProduct() {
+  return React.useContext(ProductContext);
+}
+function PageHead({
+  title,
+  description,
+  productName,
+  keywords,
+  image,
+  url,
+  favicon,
+  robots = "index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",
+  locale = "en_US",
+  twitterHandle,
+  themeColor = "#000000",
+  structuredData,
+  additionalMeta
+}) {
+  const fullTitle = productName && !title.includes(productName) ? `${title} | ${productName}` : title;
+  const fullImageUrl = image && !image.startsWith("http") && url ? `${url.replace(/\/$/, "")}${image}` : image;
+  const structuredDataItems = structuredData ? Array.isArray(structuredData) ? structuredData : [structuredData] : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactHelmetAsync.Helmet, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("title", { children: fullTitle }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "title", content: fullTitle }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "description", content: description }),
+    keywords && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "keywords", content: keywords }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "author", content: "Burdenoff Consultancy Services Pvt Ltd" }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "robots", content: robots }),
+    url && /* @__PURE__ */ jsxRuntime.jsx("link", { rel: "canonical", href: url }),
+    favicon && /* @__PURE__ */ jsxRuntime.jsx("link", { rel: "icon", href: favicon }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:type", content: "website" }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:title", content: fullTitle }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:description", content: description }),
+    fullImageUrl && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:image", content: fullImageUrl }),
+    url && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:url", content: url }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:locale", content: locale }),
+    productName && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:site_name", content: productName }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:card", content: "summary_large_image" }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:title", content: fullTitle }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:description", content: description }),
+    fullImageUrl && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:image", content: fullImageUrl }),
+    twitterHandle && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:creator", content: twitterHandle }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "theme-color", content: themeColor }),
+    structuredDataItems.map((data, index) => /* @__PURE__ */ jsxRuntime.jsx("script", { type: "application/ld+json", children: JSON.stringify(data) }, `ld-${index}`)),
+    additionalMeta?.map((meta, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "meta",
+      {
+        ...meta.name ? { name: meta.name } : {},
+        ...meta.property ? { property: meta.property } : {},
+        content: meta.content
+      },
+      `meta-${index}`
+    ))
+  ] });
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = React__namespace.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var labelVariants = classVarianceAuthority.cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  LabelPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive__namespace.Root.displayName;
+var Select = React__namespace.forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      className: cn(
+        "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent bg-[length:1rem_1rem] bg-[right_0.75rem_center] bg-no-repeat px-3 py-1 pr-8 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        // Inline SVG chevron: SVG inside a `background-image: url(data:…)`
+        // does NOT inherit `currentColor` from the host element (the SVG is
+        // its own document with no parent CSS context), so the stroke is
+        // hardcoded to a muted slate-400 (#94a3b8). Matches the muted
+        // foreground token visually in both light and dark themes well
+        // enough for a passive chevron — addresses #9 review feedback.
+        `bg-[url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")]`,
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+Select.displayName = "Select";
+var Textarea = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+var DEFAULT_CONTACT_CATEGORIES = [
+  { value: "general", label: "General enquiry" },
+  { value: "sales", label: "Sales" },
+  { value: "support", label: "Support" },
+  { value: "partnership", label: "Partnership" },
+  { value: "press", label: "Press / media" },
+  { value: "careers", label: "Careers" },
+  { value: "security", label: "Security disclosure" }
+];
+var SUBMIT_CONTACT_INQUIRY_MUTATION = (
+  /* GraphQL */
+  `
+  mutation SubmitContactInquiry($input: SubmitContactInquiryInput!) {
+    submitContactInquiry(input: $input) {
+      success
+      message
+    }
+  }
+`
+);
+async function submitContactForm(client, data, productId) {
+  try {
+    const result = await client.mutate(SUBMIT_CONTACT_INQUIRY_MUTATION, {
+      input: {
+        name: `${data.firstName} ${data.lastName}`,
+        email: data.email.trim().toLowerCase(),
+        company: data.company || void 0,
+        subject: data.subject,
+        message: data.message,
+        productId,
+        // Send `category` only when the user actually picked one. Older
+        // backend deployments without the `category` field in the
+        // `SubmitContactInquiryInput` schema would reject any unknown
+        // field; spreading conditionally keeps the SDK forward-
+        // compatible.
+        ...data.category ? { category: data.category } : {},
+        ...data.recaptchaToken ? { recaptchaToken: data.recaptchaToken } : {}
+      }
+    });
+    if (result.errors?.length) {
+      const errorMsg = result.errors[0]?.message ?? "Failed to send message";
+      return { success: false, message: errorMsg };
+    }
+    const response = result.data?.submitContactInquiry;
+    if (response?.success) {
+      return {
+        success: true,
+        message: response.message || "Message sent successfully!"
+      };
+    }
+    return {
+      success: false,
+      message: response?.message || "Failed to send message"
+    };
+  } catch (error) {
+    console.error("Contact form submission error:", error);
+    return {
+      success: false,
+      message: "Network error. Please try again."
+    };
+  }
+}
+function replacePlaceholders(text, productName, email) {
+  return text.replace(/{productName}/g, productName).replace(/{email}/g, email);
+}
+function ContactPage({
+  productName,
+  recaptchaSiteKey,
+  contactEmail,
+  contactPhone,
+  officeAddress,
+  responseTime = "We typically respond within 24 hours",
+  heroTitle = "Get in Touch",
+  heroDescription = "Have questions about {productName}? We're here to help. Reach out to our team and we'll get back to you as soon as possible.",
+  headingLevel = 1,
+  // Backward-compatibility: default to `[]` so existing consumers
+  // (fluidgrids/burdenoff/algoshred websites) that don't pass
+  // `categories` continue to render with NO dropdown — same behavior
+  // they had before this SDK version. To opt in, pass an explicit
+  // `categories={…}` array (or the exported `DEFAULT_CONTACT_CATEGORIES`
+  // constant for the sane Burdenoff-generic vocabulary).
+  categories = [],
+  categoryLabel = "Category",
+  categoryPlaceholder = "Select a category",
+  categoryRequired = true,
+  additionalOptions = [
+    {
+      title: "Sales Inquiries",
+      description: "Ready to see {productName} in action? Our sales team is here to help.",
+      buttonText: "Contact Sales",
+      buttonLink: `mailto:${contactEmail}`
+    },
+    {
+      title: "Technical Support",
+      description: "Need help with your {productName} setup? Our support team is ready.",
+      buttonText: "Get Support",
+      buttonLink: `mailto:${contactEmail}`
+    },
+    {
+      title: "Partnership",
+      description: "Interested in partnering with {productName}? Let's explore opportunities.",
+      buttonText: "Partner With Us",
+      buttonLink: `mailto:${contactEmail}`
+    }
+  ],
+  seo
+}) {
+  const client = useWebSDK();
+  const config = useWebSDKConfig();
+  const { product } = useProduct();
+  const resolvedProductId = product?.id || config.productId;
+  const displayName = productName ?? product?.name ?? config.productId;
+  const effectiveRecaptchaSiteKey = recaptchaSiteKey ?? product?.recaptchaSiteKey ?? config.recaptchaSiteKey ?? "";
+  const recaptchaRef = React.useRef(null);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [submitStatus, setSubmitStatus] = React.useState("idle");
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const recaptchaToken = recaptchaRef.current?.getValue() ?? "";
+    if (effectiveRecaptchaSiteKey && !recaptchaToken) {
+      sonner.toast.error("Please complete the reCAPTCHA verification");
+      return;
+    }
+    setIsSubmitting(true);
+    setSubmitStatus("idle");
+    const form = e.currentTarget;
+    try {
+      const formData = new FormData(form);
+      const showCategory = categories.length > 0;
+      const rawCategory = showCategory ? (formData.get("category") ?? "").trim() : "";
+      if (showCategory && categoryRequired && !rawCategory) {
+        sonner.toast.error("Please select a category");
+        setIsSubmitting(false);
+        return;
+      }
+      const contactData = {
+        firstName: formData.get("firstName"),
+        lastName: formData.get("lastName"),
+        email: formData.get("email"),
+        company: formData.get("company"),
+        category: rawCategory || void 0,
+        subject: formData.get("subject"),
+        message: formData.get("message"),
+        recaptchaToken
+      };
+      const result = await submitContactForm(
+        client,
+        contactData,
+        resolvedProductId
+      );
+      if (result.success) {
+        setSubmitStatus("success");
+        sonner.toast.success(
+          result.message ?? `Thank you for contacting ${displayName}. We'll get back to you within 24 hours.`
+        );
+        if (form) {
+          form.reset();
+        }
+        recaptchaRef.current?.reset();
+      } else {
+        setSubmitStatus("error");
+        sonner.toast.error(
+          result.message ?? "Failed to send message. Please try again."
+        );
+        recaptchaRef.current?.reset();
+      }
+    } catch (error) {
+      console.error("Error submitting form:", error);
+      setSubmitStatus("error");
+      sonner.toast.error("Failed to send message. Please try again later.");
+      recaptchaRef.current?.reset();
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    seo && /* @__PURE__ */ jsxRuntime.jsx(
+      PageHead,
+      {
+        title: seo.title ?? `Contact ${displayName} - Get in Touch With Our Team`,
+        description: seo.description ?? `Ready to transform your business? Contact our team for sales inquiries, technical support, or partnership opportunities. We're here to help you succeed.`,
+        productName: displayName,
+        keywords: seo.keywords ?? `contact ${displayName.toLowerCase()}, sales inquiries, customer support, technical support, partnership opportunities, get in touch`,
+        image: seo.image ?? "/og-image-contact.png",
+        url: seo.url
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "section",
+      {
+        className: headingLevel === 2 ? "py-12 md:py-16" : "bg-gradient-to-b from-background to-muted/20 py-12 sm:py-16 md:py-20 lg:py-24",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-3xl mx-auto", children: [
+          headingLevel === 2 ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl md:text-3xl font-bold mb-3", children: heroTitle }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl sm:text-4xl md:text-5xl font-bold mb-4 sm:mb-6", children: heroTitle }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg sm:text-xl text-muted-foreground leading-relaxed", children: replacePlaceholders(heroDescription, displayName, contactEmail) })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-12 sm:py-16 md:py-20 lg:py-24", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid sm:grid-cols-1 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-1 order-2 lg:order-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl sm:text-2xl font-bold mb-4 sm:mb-6", children: "Contact Information" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-3 sm:space-x-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 sm:w-10 sm:h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { className: "h-4 w-4 sm:h-5 sm:w-5 text-primary" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold mb-1 text-sm sm:text-base", children: "Email" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm sm:text-base break-all", children: contactEmail })
+            ] })
+          ] }),
+          contactPhone && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-3 sm:space-x-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 sm:w-10 sm:h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { className: "h-4 w-4 sm:h-5 sm:w-5 text-primary" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold mb-1 text-sm sm:text-base", children: "Phone" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm sm:text-base", children: contactPhone })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-3 sm:space-x-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 sm:w-10 sm:h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-4 w-4 sm:h-5 sm:w-5 text-primary" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold mb-1 text-sm sm:text-base", children: "Office" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-sm sm:text-base leading-relaxed", children: [
+                officeAddress.line1,
+                /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                officeAddress.line2,
+                /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                officeAddress.line3,
+                /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                officeAddress.country
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-3 sm:space-x-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 sm:w-10 sm:h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4 sm:h-5 sm:w-5 text-primary" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold mb-1 text-sm sm:text-base", children: "Response Time" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm sm:text-base", children: responseTime })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-2 order-1 lg:order-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card border rounded-lg p-4 sm:p-6 md:p-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl sm:text-2xl font-bold mb-4 sm:mb-6", children: "Send us a Message" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            onSubmit: handleSubmit,
+            className: "space-y-4 sm:space-y-6",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid sm:grid-cols-2 gap-4 sm:gap-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Label,
+                    {
+                      htmlFor: "firstName",
+                      className: "text-sm sm:text-base",
+                      children: "First Name *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Input,
+                    {
+                      id: "firstName",
+                      name: "firstName",
+                      required: true,
+                      placeholder: "John",
+                      className: "text-sm sm:text-base"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Label,
+                    {
+                      htmlFor: "lastName",
+                      className: "text-sm sm:text-base",
+                      children: "Last Name *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Input,
+                    {
+                      id: "lastName",
+                      name: "lastName",
+                      required: true,
+                      placeholder: "Doe",
+                      className: "text-sm sm:text-base"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", className: "text-sm sm:text-base", children: "Email *" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Input,
+                  {
+                    id: "email",
+                    name: "email",
+                    type: "email",
+                    required: true,
+                    placeholder: "john@company.com",
+                    className: "text-sm sm:text-base"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "company", className: "text-sm sm:text-base", children: "Company" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Input,
+                  {
+                    id: "company",
+                    name: "company",
+                    placeholder: "Acme Inc.",
+                    className: "text-sm sm:text-base"
+                  }
+                )
+              ] }),
+              categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  Label,
+                  {
+                    htmlFor: "category",
+                    className: "text-sm sm:text-base",
+                    children: [
+                      categoryLabel,
+                      categoryRequired ? " *" : ""
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  Select,
+                  {
+                    id: "category",
+                    name: "category",
+                    required: categoryRequired,
+                    defaultValue: "",
+                    className: "text-sm sm:text-base",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: categoryRequired, children: categoryPlaceholder }),
+                      categories.map((c) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: c.value, children: c.label }, c.value))
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "subject", className: "text-sm sm:text-base", children: "Subject *" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Input,
+                  {
+                    id: "subject",
+                    name: "subject",
+                    required: true,
+                    placeholder: "How can we help you?",
+                    className: "text-sm sm:text-base"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", className: "text-sm sm:text-base", children: "Message *" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Textarea,
+                  {
+                    id: "message",
+                    name: "message",
+                    required: true,
+                    placeholder: "Tell us more about your needs...",
+                    rows: 5,
+                    className: "text-sm sm:text-base min-h-[120px] sm:min-h-[150px] resize-y"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                effectiveRecaptchaSiteKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center sm:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ReCAPTCHA__default.default,
+                  {
+                    ref: recaptchaRef,
+                    sitekey: effectiveRecaptchaSiteKey
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "submit",
+                    size: "lg",
+                    disabled: isSubmitting,
+                    className: "w-full sm:w-auto min-w-[200px]",
+                    children: isSubmitting ? "Sending..." : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      "Send Message ",
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "ml-2 h-4 w-4" })
+                    ] })
+                  }
+                )
+              ] }),
+              submitStatus === "success" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg text-green-800 mt-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-sm sm:text-base", children: "Message sent successfully!" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs sm:text-sm mt-1", children: [
+                  "Thank you for contacting ",
+                  displayName,
+                  ". We'll get back to you within 24 hours."
+                ] })
+              ] }),
+              submitStatus === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 mt-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-sm sm:text-base", children: "Failed to send message" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs sm:text-sm mt-1", children: [
+                  "Please try again later or contact us directly at",
+                  " ",
+                  contactEmail
+                ] })
+              ] })
+            ]
+          }
+        )
+      ] }) })
+    ] }) }) }),
+    additionalOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-12 sm:py-16 md:py-20 lg:py-24 bg-muted/30", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl sm:text-3xl font-bold text-center mb-8 sm:mb-12", children: "More Ways to Connect" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-5xl mx-auto", children: additionalOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "text-center p-4 sm:p-6 bg-card border rounded-lg",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-base sm:text-lg mb-2", children: option.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm sm:text-base mb-4 leading-relaxed", children: replacePlaceholders(
+              option.description,
+              displayName,
+              contactEmail
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                asChild: true,
+                className: "text-sm sm:text-base",
+                children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: option.buttonLink, children: option.buttonText })
+              }
+            )
+          ]
+        },
+        index
+      )) })
+    ] }) })
+  ] });
+}
+
+exports.ContactPage = ContactPage;
+exports.DEFAULT_CONTACT_CATEGORIES = DEFAULT_CONTACT_CATEGORIES;
+//# sourceMappingURL=contact.js.map
+//# sourceMappingURL=contact.js.map