blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-Contact/Component.tsx

@@ -1,435 +1,433 @@
-'use client'
-import React, { type FormEvent, useMemo, useState } from 'react'
-import * as LucideIcons from 'lucide-react'
-import { Check, Loader2, Send } from 'lucide-react'
-import { Input } from '@/components/ui/input'
-import { getClientSideURL } from '@/utilities/getURL'
-
-type Status = 'idle' | 'submitting' | 'success' | 'error'
-export type DDContactProps = {
-  eyebrow?: string | null
-  headlineMain?: string | null
-  headlineAccent?: string | null
-  description?: string | null
-  infoItems?: Array<{
-    iconName?: string | null
-    title: string
-    description: string
-  }> | null
-  availabilityActive?: boolean | null
-  availabilityLabel?: string | null
-  availabilitySubtext?: string | null
-  form?: string | number | { id?: string | number } | null
-  serviceOptions?: Array<{ label: string }> | null
-  budgetOptions?: Array<{ label: string }> | null
-  timelineOptions?: Array<{ label: string }> | null
-  sectionId?: string | null
-  customCSS?: string | null
-}
-function DynamicIcon({
-  name,
-  size = 16,
-  ...props
-}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
-  if (!name) return null
-  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
-  if (!Icon) return null
-  return <Icon size={size} {...props} />
-}
-
-export const DDContact: React.FC<DDContactProps> = ({
-  eyebrow,
-  headlineMain,
-  headlineAccent,
-  description,
-  infoItems,
-  availabilityActive,
-  availabilityLabel,
-  availabilitySubtext,
-  form,
-  serviceOptions,
-  budgetOptions,
-  timelineOptions,
-  sectionId,
-  customCSS,
-}) => {
-  const [status, setStatus] = useState<Status>('idle')
-  const [charCount, setCharCount] = useState(0)
-
-  const formID = typeof form === 'object' && form !== null ? form.id : form
-
-  const formIdentifier = useMemo(() => {
-    const safeSection = (sectionId || 'contact').toLowerCase().replace(/[^a-z0-9-_]/g, '-')
-
-    return `studio-contact-${String(formID || 'unknown')}-${safeSection}`
-  }, [formID, sectionId])
-
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    const formElement = e.currentTarget
-    const data = new FormData(formElement)
-
-    const message = data.get('message') as string
-    if (message && message.length > 500) return
-
-    setStatus('submitting')
-
-    const submissionData = [
-      { field: 'name', value: data.get('name') },
-      { field: 'email', value: data.get('email') },
-      { field: 'company', value: data.get('company') },
-      { field: 'service', value: data.get('service') },
-      { field: 'budget', value: data.get('budget') },
-      { field: 'timeline', value: data.get('timeline') },
-      { field: 'message', value: data.get('message') },
-    ]
-
-    if (!formID) {
-      setStatus('success')
-      formElement.reset()
-      setCharCount(0)
-      return
-    }
-
-    try {
-      const res = await fetch(`${getClientSideURL()}/api/form-submissions`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          form: formID,
-          submissionData,
-        }),
-      })
-
-      if (res.ok) {
-        setStatus('success')
-        formElement.reset()
-        setCharCount(0)
-      } else {
-        setStatus('error')
-      }
-    } catch {
-      setStatus('error')
-    }
-  }
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div id={sectionId ?? 'contact'} className="py-24">
-        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          #BlockName-DDContact
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
-            <div>
-              {eyebrow && (
-                <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
-                  {eyebrow}
-                </p>
-              )}
-
-              <h2 className="text-4xl md:text-5xl font-semibold text-stone-900 dark:text-stone-50 leading-tight mb-6">
-                {headlineMain}
-                <br />
-                <span className="text-stone-400">{headlineAccent}</span>
-              </h2>
-
-              {description && (
-                <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed mb-10">
-                  {description}
-                </p>
-              )}
-
-              {infoItems && infoItems.length > 0 && (
-                <div className="space-y-4 mb-10">
-                  {infoItems.map((item, i) => (
-                    <div key={i} className="flex gap-4">
-                      <div className="w-9 h-9 flex items-center justify-center rounded-lg lime-glass border border-indigo-400 bg-stone-100/50 dark:bg-stone-900/80 shrink-0 mt-0.5">
-                        <DynamicIcon
-                          className="text-indigo-500 dark:text-lime-500"
-                          name={item.iconName}
-                          size={15}
-                        />
-                      </div>
-                      <div>
-                        <div className="text-sm font-semibold text-stone-800 dark:text-stone-50 mb-0.5">
-                          {item.title}
-                        </div>
-                        <div className="text-xs text-stone-600 dark:text-stone-300">
-                          {item.description}
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {availabilityActive && (
-                <div
-                  className="flex items-center gap-3 p-4 bg-indigo-50 dark:bg-indigo-950/80 border border-indigo-200 dark:border-indigo-500 shadow-sm dark:shadow-xl backdrop-blur-sm rounded-2xl pressable relative z-10 h-full w-full text-[32px] font-medium tracking-[.001em] transition-all duration-300"
-                  style={{ cornerShape: 'squircle' } as React.CSSProperties}
-                >
-                  <div className="w-3.5 h-3.5 rounded-full bg-lime-700 border-2 border-lime-500 animate-pulse shrink-0 shadow-2xl" />
-                  <div>
-                    {availabilityLabel && (
-                      <div className="text-md font-semibold text-indigo-900 dark:text-stone-50">
-                        {availabilityLabel}
-                      </div>
-                    )}
-
-                    {availabilitySubtext && (
-                      <div className="text-xs font-normal! text-stone-600 dark:text-stone-300 pt-1">
-                        {availabilitySubtext}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-
-            <div className="rounded-2xl bg-stone-100 dark:bg-stone-950 border border-stone-100 dark:border-stone-800 dark:hover:border-indigo-800 px-3 md:px-8 py-8 shadow-sm hover:shadow-2xl transition-all duration-300">
-              {status === 'success' ? (
-                <div className="flex flex-col items-center justify-center text-center py-12">
-                  <div className="w-16 h-16 flex items-center justify-center rounded-full bg-lime-400/10 border border-emerald-400/30 mb-5">
-                    <Check size={28} className="text-lime-400" />
-                  </div>
-
-                  <h3 className="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-2">
-                    Message sent!
-                  </h3>
-
-                  <p className="text-sm text-stone-600 dark:text-stone-400 max-w-xs">
-                    Thanks for reaching out. We'll review your project details and get back to you
-                    within one business day.
-                  </p>
-
-                  <button
-                    onClick={() => setStatus('idle')}
-                    className="mt-6 px-5 py-2.5 rounded-lg bg-stone-900 text-stone-50 dark:bg-stone-700 dark:text-stone-200 text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-600 transition-colors cursor-pointer"
-                  >
-                    Send another message
-                  </button>
-                </div>
-              ) : (
-                <form
-                  id={formIdentifier}
-                  name={formIdentifier}
-                  data-form-id={String(formID || '')}
-                  onSubmit={handleSubmit}
-                  className="space-y-5"
-                >
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    <div>
-                      <label
-                        htmlFor={`${formIdentifier}-name`}
-                        className="block text-xs font-medium text-stone-400 mb-1.5"
-                      >
-                        Your Name *
-                      </label>
-
-                      <Input
-                        id={`${formIdentifier}-name`}
-                        type="text"
-                        name="name"
-                        autoComplete="name"
-                        required
-                        placeholder="Marcus Holt"
-                        className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
-                      />
-                    </div>
-
-                    <div>
-                      <label
-                        htmlFor={`${formIdentifier}-email`}
-                        className="block text-xs font-medium text-stone-400 mb-1.5"
-                      >
-                        Email Address *
-                      </label>
-
-                      <Input
-                        id={`${formIdentifier}-email`}
-                        type="email"
-                        name="email"
-                        autoComplete="email"
-                        required
-                        placeholder="you@company.com"
-                        className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
-                      />
-                    </div>
-                  </div>
-
-                  <div>
-                    <label
-                      htmlFor={`${formIdentifier}-company`}
-                      className="block text-xs font-medium text-stone-400 mb-1.5"
-                    >
-                      Company / Project Name
-                    </label>
-
-                    <Input
-                      id={`${formIdentifier}-company`}
-                      type="text"
-                      name="company"
-                      autoComplete="organization"
-                      placeholder="Acme Inc."
-                      className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
-                    />
-                  </div>
-
-                  {serviceOptions && serviceOptions.length > 0 && (
-                    <div>
-                      <label
-                        htmlFor={`${formIdentifier}-service`}
-                        className="block text-xs font-medium text-stone-400 mb-1.5"
-                      >
-                        Service Needed *
-                      </label>
-
-                      <select
-                        id={`${formIdentifier}-service`}
-                        name="service"
-                        autoComplete="off"
-                        required
-                        defaultValue=""
-                        className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
-                      >
-                        <option value="" disabled>
-                          Select a service...
-                        </option>
-
-                        {serviceOptions.map((s, i) => (
-                          <option key={i} value={s.label}>
-                            {s.label}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  )}
-
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    {budgetOptions && budgetOptions.length > 0 && (
-                      <div>
-                        <label
-                          htmlFor={`${formIdentifier}-budget`}
-                          className="block text-xs font-medium text-stone-400 mb-1.5"
-                        >
-                          Budget Range *
-                        </label>
-
-                        <select
-                          id={`${formIdentifier}-budget`}
-                          name="budget"
-                          autoComplete="off"
-                          required
-                          defaultValue=""
-                          className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
-                        >
-                          <option value="" disabled>
-                            Select budget...
-                          </option>
-
-                          {budgetOptions.map((b, i) => (
-                            <option key={i} value={b.label}>
-                              {b.label}
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-                    )}
-
-                    {timelineOptions && timelineOptions.length > 0 && (
-                      <div>
-                        <label
-                          htmlFor={`${formIdentifier}-timeline`}
-                          className="block text-xs font-medium text-stone-400 mb-1.5"
-                        >
-                          Timeline
-                        </label>
-
-                        <select
-                          id={`${formIdentifier}-timeline`}
-                          name="timeline"
-                          autoComplete="off"
-                          defaultValue=""
-                          className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
-                        >
-                          <option value="" disabled>
-                            Select timeline...
-                          </option>
-
-                          {timelineOptions.map((t, i) => (
-                            <option key={i} value={t.label}>
-                              {t.label}
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-                    )}
-                  </div>
-
-                  <div>
-                    <label
-                      htmlFor={`${formIdentifier}-message`}
-                      className="block text-xs font-medium text-stone-400 mb-1.5"
-                    >
-                      Project Description *
-                      <span
-                        className={`ml-2 font-normal ${charCount > 500 ? 'text-red-400' : 'text-stone-400'}`}
-                      >
-                        {charCount}/500
-                      </span>
-                    </label>
-
-                    <textarea
-                      id={`${formIdentifier}-message`}
-                      name="message"
-                      autoComplete="off"
-                      required
-                      rows={4}
-                      maxLength={500}
-                      placeholder="Tell us about your project — what you're building, what problem it solves, and any technical constraints..."
-                      onChange={(e) => setCharCount(e.target.value.length)}
-                      className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
-                    />
-                  </div>
-
-                  {status === 'error' && (
-                    <p className="text-xs text-red-400">Something went wrong. Please try again.</p>
-                  )}
-
-                  <button
-                    type="submit"
-                    disabled={status === 'submitting' || charCount > 500}
-                    className="glass-button-white group relative isolate flex w-full cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-4xl! border border-stone-300 dark:border-white bg-stone-950/90 dark:bg-stone-100/80 px-6 py-3 text-sm font-semibold text-stone-50 dark:text-stone-900 outline-offset-0 hover:bg-stone-900 dark:hover:bg-stone-100 hover:shadow-2xl hover:-translate-y-0.5 hover:outline-4 hover:outline-indigo-500 hover:-outline-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-300"
-                    style={{ cornerShape: 'squircle' } as React.CSSProperties}
-                  >
-                    <span className="relative z-2 flex items-center gap-2">
-                      {status === 'submitting' ? (
-                        <>
-                          <Loader2 size={15} className="animate-spin" />
-                          Sending...
-                        </>
-                      ) : (
-                        <>
-                          <Send size={15} />
-                          Send Project Brief
-                        </>
-                      )}
-                    </span>
-                  </button>
-
-                  <p className="text-xs  text-stone-700 dark:text-stone-400 text-center">
-                    We'll respond within 1 business day. No spam, ever.
-                  </p>
-                </form>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
+'use client'
+import React, { type FormEvent, useMemo, useState } from 'react'
+import * as LucideIcons from 'lucide-react'
+import { Check, Loader2, Send } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { getClientSideURL } from '@/utilities/getURL'
+
+type Status = 'idle' | 'submitting' | 'success' | 'error'
+export type DDContactProps = {
+  eyebrow?: string | null
+  headlineMain?: string | null
+  headlineAccent?: string | null
+  description?: string | null
+  infoItems?: Array<{
+    iconName?: string | null
+    title: string
+    description: string
+  }> | null
+  availabilityActive?: boolean | null
+  availabilityLabel?: string | null
+  availabilitySubtext?: string | null
+  form?: string | number | { id?: string | number } | null
+  serviceOptions?: Array<{ label: string }> | null
+  budgetOptions?: Array<{ label: string }> | null
+  timelineOptions?: Array<{ label: string }> | null
+  sectionId?: string | null
+  customCSS?: string | null
+}
+function DynamicIcon({
+  name,
+  size = 16,
+  ...props
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
+  if (!name) return null
+  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
+  if (!Icon) return null
+  return <Icon size={size} {...props} />
+}
+
+export const DDContact: React.FC<DDContactProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  description,
+  infoItems,
+  availabilityActive,
+  availabilityLabel,
+  availabilitySubtext,
+  form,
+  serviceOptions,
+  budgetOptions,
+  timelineOptions,
+  sectionId,
+  customCSS,
+}) => {
+  const [status, setStatus] = useState<Status>('idle')
+  const [charCount, setCharCount] = useState(0)
+
+  const formID = typeof form === 'object' && form !== null ? form.id : form
+
+  const formIdentifier = useMemo(() => {
+    const safeSection = (sectionId || 'contact').toLowerCase().replace(/[^a-z0-9-_]/g, '-')
+
+    return `studio-contact-${String(formID || 'unknown')}-${safeSection}`
+  }, [formID, sectionId])
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formElement = e.currentTarget
+    const data = new FormData(formElement)
+
+    const message = data.get('message') as string
+    if (message && message.length > 500) return
+
+    setStatus('submitting')
+
+    const submissionData = [
+      { field: 'name', value: data.get('name') },
+      { field: 'email', value: data.get('email') },
+      { field: 'company', value: data.get('company') },
+      { field: 'service', value: data.get('service') },
+      { field: 'budget', value: data.get('budget') },
+      { field: 'timeline', value: data.get('timeline') },
+      { field: 'message', value: data.get('message') },
+    ]
+
+    if (!formID) {
+      setStatus('success')
+      formElement.reset()
+      setCharCount(0)
+      return
+    }
+
+    try {
+      const res = await fetch(`${getClientSideURL()}/api/form-submissions`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          form: formID,
+          submissionData,
+        }),
+      })
+
+      if (res.ok) {
+        setStatus('success')
+        formElement.reset()
+        setCharCount(0)
+      } else {
+        setStatus('error')
+      }
+    } catch {
+      setStatus('error')
+    }
+  }
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? 'contact'} className="py-4">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
+            <div>
+              {eyebrow && (
+                <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
+                  {eyebrow}
+                </p>
+              )}
+
+              <h2 className="text-4xl md:text-5xl font-semibold text-stone-900 dark:text-stone-50 leading-tight mb-6">
+                {headlineMain}
+                <br />
+                <span className="text-stone-400">{headlineAccent}</span>
+              </h2>
+
+              {description && (
+                <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed mb-10">
+                  {description}
+                </p>
+              )}
+
+              {infoItems && infoItems.length > 0 && (
+                <div className="space-y-4 mb-10">
+                  {infoItems.map((item, i) => (
+                    <div key={i} className="flex gap-4">
+                      <div className="w-9 h-9 flex items-center justify-center rounded-lg lime-glass border border-indigo-400 bg-stone-100/50 dark:bg-stone-900/80 shrink-0 mt-0.5">
+                        <DynamicIcon
+                          className="text-indigo-500 dark:text-lime-500"
+                          name={item.iconName}
+                          size={15}
+                        />
+                      </div>
+                      <div>
+                        <div className="text-sm font-semibold text-stone-800 dark:text-stone-50 mb-0.5">
+                          {item.title}
+                        </div>
+                        <div className="text-xs text-stone-600 dark:text-stone-300">
+                          {item.description}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {availabilityActive && (
+                <div
+                  className="flex items-center gap-3 p-4 bg-indigo-50 dark:bg-indigo-950/80 border border-indigo-200 dark:border-indigo-500 shadow-sm dark:shadow-xl backdrop-blur-sm rounded-2xl pressable relative z-10 h-full w-full text-[32px] font-medium tracking-[.001em] transition-all duration-300"
+                  style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                >
+                  <div className="w-3.5 h-3.5 rounded-full bg-lime-700 border-2 border-lime-500 animate-pulse shrink-0 shadow-2xl" />
+                  <div>
+                    {availabilityLabel && (
+                      <div className="text-md font-semibold text-indigo-900 dark:text-stone-50">
+                        {availabilityLabel}
+                      </div>
+                    )}
+
+                    {availabilitySubtext && (
+                      <div className="text-xs font-normal! text-stone-600 dark:text-stone-300 pt-1">
+                        {availabilitySubtext}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="rounded-2xl bg-stone-100 dark:bg-stone-950 border border-stone-100 dark:border-stone-800 dark:hover:border-indigo-800 px-3 md:px-8 py-8 shadow-sm hover:shadow-2xl transition-all duration-300">
+              {status === 'success' ? (
+                <div className="flex flex-col items-center justify-center text-center py-12">
+                  <div className="w-16 h-16 flex items-center justify-center rounded-full bg-lime-400/10 border border-emerald-400/30 mb-5">
+                    <Check size={28} className="text-lime-400" />
+                  </div>
+
+                  <h3 className="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-2">
+                    Message sent!
+                  </h3>
+
+                  <p className="text-sm text-stone-600 dark:text-stone-400 max-w-xs">
+                    Thanks for reaching out. We'll review your project details and get back to you
+                    within one business day.
+                  </p>
+
+                  <button
+                    onClick={() => setStatus('idle')}
+                    className="mt-6 px-5 py-2.5 rounded-lg bg-stone-900 text-stone-50 dark:bg-stone-700 dark:text-stone-200 text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-600 transition-colors cursor-pointer"
+                  >
+                    Send another message
+                  </button>
+                </div>
+              ) : (
+                <form
+                  id={formIdentifier}
+                  name={formIdentifier}
+                  data-form-id={String(formID || '')}
+                  onSubmit={handleSubmit}
+                  className="space-y-5"
+                >
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div>
+                      <label
+                        htmlFor={`${formIdentifier}-name`}
+                        className="block text-xs font-medium text-stone-400 mb-1.5"
+                      >
+                        Your Name *
+                      </label>
+
+                      <Input
+                        id={`${formIdentifier}-name`}
+                        type="text"
+                        name="name"
+                        autoComplete="name"
+                        required
+                        placeholder="Marcus Holt"
+                        className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                      />
+                    </div>
+
+                    <div>
+                      <label
+                        htmlFor={`${formIdentifier}-email`}
+                        className="block text-xs font-medium text-stone-400 mb-1.5"
+                      >
+                        Email Address *
+                      </label>
+
+                      <Input
+                        id={`${formIdentifier}-email`}
+                        type="email"
+                        name="email"
+                        autoComplete="email"
+                        required
+                        placeholder="you@company.com"
+                        className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor={`${formIdentifier}-company`}
+                      className="block text-xs font-medium text-stone-400 mb-1.5"
+                    >
+                      Company / Project Name
+                    </label>
+
+                    <Input
+                      id={`${formIdentifier}-company`}
+                      type="text"
+                      name="company"
+                      autoComplete="organization"
+                      placeholder="Acme Inc."
+                      className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                    />
+                  </div>
+
+                  {serviceOptions && serviceOptions.length > 0 && (
+                    <div>
+                      <label
+                        htmlFor={`${formIdentifier}-service`}
+                        className="block text-xs font-medium text-stone-400 mb-1.5"
+                      >
+                        Service Needed *
+                      </label>
+
+                      <select
+                        id={`${formIdentifier}-service`}
+                        name="service"
+                        autoComplete="off"
+                        required
+                        defaultValue=""
+                        className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                      >
+                        <option value="" disabled>
+                          Select a service...
+                        </option>
+
+                        {serviceOptions.map((s, i) => (
+                          <option key={i} value={s.label}>
+                            {s.label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  )}
+
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    {budgetOptions && budgetOptions.length > 0 && (
+                      <div>
+                        <label
+                          htmlFor={`${formIdentifier}-budget`}
+                          className="block text-xs font-medium text-stone-400 mb-1.5"
+                        >
+                          Budget Range *
+                        </label>
+
+                        <select
+                          id={`${formIdentifier}-budget`}
+                          name="budget"
+                          autoComplete="off"
+                          required
+                          defaultValue=""
+                          className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                        >
+                          <option value="" disabled>
+                            Select budget...
+                          </option>
+
+                          {budgetOptions.map((b, i) => (
+                            <option key={i} value={b.label}>
+                              {b.label}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    )}
+
+                    {timelineOptions && timelineOptions.length > 0 && (
+                      <div>
+                        <label
+                          htmlFor={`${formIdentifier}-timeline`}
+                          className="block text-xs font-medium text-stone-400 mb-1.5"
+                        >
+                          Timeline
+                        </label>
+
+                        <select
+                          id={`${formIdentifier}-timeline`}
+                          name="timeline"
+                          autoComplete="off"
+                          defaultValue=""
+                          className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                        >
+                          <option value="" disabled>
+                            Select timeline...
+                          </option>
+
+                          {timelineOptions.map((t, i) => (
+                            <option key={i} value={t.label}>
+                              {t.label}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    )}
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor={`${formIdentifier}-message`}
+                      className="block text-xs font-medium text-stone-400 mb-1.5"
+                    >
+                      Project Description *
+                      <span
+                        className={`ml-2 font-normal ${charCount > 500 ? 'text-red-400' : 'text-stone-400'}`}
+                      >
+                        {charCount}/500
+                      </span>
+                    </label>
+
+                    <textarea
+                      id={`${formIdentifier}-message`}
+                      name="message"
+                      autoComplete="off"
+                      required
+                      rows={4}
+                      maxLength={500}
+                      placeholder="Tell us about your project — what you're building, what problem it solves, and any technical constraints..."
+                      onChange={(e) => setCharCount(e.target.value.length)}
+                      className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                    />
+                  </div>
+
+                  {status === 'error' && (
+                    <p className="text-xs text-red-400">Something went wrong. Please try again.</p>
+                  )}
+
+                  <button
+                    type="submit"
+                    disabled={status === 'submitting' || charCount > 500}
+                    className="glass-button-white group relative isolate flex w-full cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-4xl! border border-stone-300 dark:border-white bg-stone-950/90 dark:bg-stone-100/80 px-6 py-3 text-sm font-semibold text-stone-50 dark:text-stone-900 outline-offset-0 hover:bg-stone-900 dark:hover:bg-stone-100 hover:shadow-2xl hover:-translate-y-0.5 hover:outline-4 hover:outline-indigo-500 hover:-outline-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-300"
+                    style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                  >
+                    <span className="relative z-2 flex items-center gap-2">
+                      {status === 'submitting' ? (
+                        <>
+                          <Loader2 size={15} className="animate-spin" />
+                          Sending...
+                        </>
+                      ) : (
+                        <>
+                          <Send size={15} />
+                          Send Project Brief
+                        </>
+                      )}
+                    </span>
+                  </button>
+
+                  <p className="text-xs  text-stone-700 dark:text-stone-400 text-center">
+                    We'll respond within 1 business day. No spam, ever.
+                  </p>
+                </form>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}