blocks-dusted 0.1.11 → 0.1.12

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

@@ -1,534 +1,535 @@
-'use client'
-import React, { type FormEvent, useMemo, useState } from 'react'
-import * as LucideIcons from 'lucide-react'
-import {
-  Check,
-  Loader2,
-  CalendarDays,
-  Globe,
-  Clock,
-  AlertCircle,
-  CalendarCheck
-} from 'lucide-react'
-import { getClientSideURL } from '@/utilities/getURL'
-
-type Status = 'idle' | 'submitting' | 'success' | 'error'
-export type DDBookCallProps = {
-  eyebrow?: string | null
-  headlineMain?: string | null
-  headlineAccent?: string | null
-  description?: string | null
-  callTypes?: Array<{
-    value: string
-    label: string
-    duration: string
-    iconName?: string | null
-    desc?: string | null
-  }> | null
-  features?: Array<{
-    iconName?: string | null
-    text: string
-  }> | null
-  form?: string | number | { id?: string | number } | null
-  timeSlots?: Array<{ slot?: string | null }> | null
-  footerNote?: 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} />
-}
-
-function getMinDate() {
-  const d = new Date()
-  d.setDate(d.getDate() + 1)
-  return d.toISOString().split('T')[0]
-}
-
-function getMaxDate() {
-  const d = new Date()
-  d.setDate(d.getDate() + 60)
-  return d.toISOString().split('T')[0]
-}
-
-export const DDBookCall: React.FC<DDBookCallProps> = ({
-  eyebrow,
-  headlineMain,
-  headlineAccent,
-  description,
-  callTypes,
-  features,
-  form,
-  timeSlots,
-  footerNote,
-  sectionId,
-  customCSS
-}) => {
-  const [status, setStatus] = useState<Status>('idle')
-  const [selectedType, setSelectedType] = useState<string>(callTypes?.[0]?.value ?? 'discovery')
-  const [selectedSlot, setSelectedSlot] = useState('')
-  const [selectedDate, setSelectedDate] = useState('')
-  const [charCount, setCharCount] = useState(0)
-
-  const formID = typeof form === 'object' && form !== null ? form.id : form
-
-  const formIdentifier = useMemo(() => {
-    const safeSection = (sectionId || 'book-call').toLowerCase().replace(/[^a-z0-9-_]/g, '-')
-    return `studio-book-call-${String(formID || 'unknown')}-${safeSection}`
-  }, [formID, sectionId])
-
-  const selectedCallType = callTypes?.find((t) => t.value === selectedType) ?? callTypes?.[0]
-  const slots = timeSlots?.map((t) => t.slot).filter(Boolean) as string[]
-
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    const formElement = e.currentTarget
-
-    if (!selectedDate || !selectedSlot) return
-
-    const notes = formElement.querySelector<HTMLTextAreaElement>('[name="notes"]')?.value ?? ''
-    if (notes.length > 500) return
-
-    setStatus('submitting')
-
-    const data = new FormData(formElement)
-
-    const submissionData = [
-      { field: 'name', value: data.get('name') },
-      { field: 'email', value: data.get('email') },
-      { field: 'company', value: data.get('company') },
-      { field: 'call_type', value: selectedType },
-      { field: 'preferred_date', value: selectedDate },
-      { field: 'preferred_time', value: selectedSlot },
-      { field: 'notes', value: data.get('notes') }
-    ]
-
-    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()
-        setSelectedSlot('')
-        setSelectedDate('')
-        setCharCount(0)
-      } else {
-        setStatus('error')
-      }
-    } catch {
-      setStatus('error')
-    }
-  }
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <section
-        id={sectionId ?? 'book-call'}
-        className="container-fluid mx-auto py-28 relative overflow-hidden"
-      >
-        {/* Background gradients – light & dark variants */}
-        <div
-          className="absolute inset-0 pointer-events-none opacity-30
-      bg-[radial-gradient(circle_at_20%_50%,rgba(0,0,0,0.06)_0%,transparent_50%),
-          radial-gradient(circle_at_80%_20%,rgba(0,0,0,0.03)_0%,transparent_40%)]
-      dark:bg-[radial-gradient(circle_at_20%_50%,rgba(110,231,183,0.06)_0%,transparent_50%),
-          radial-gradient(circle_at_80%_20%,rgba(255,255,255,0.03)_0%,transparent_40%)]"
-        />
-        <div
-          className="absolute inset-0 pointer-events-none
-      bg-[linear-gradient(rgba(0,0,0,0.06)_1px,transparent_1px),
-          linear-gradient(90deg,rgba(0,0,0,0.06)_1px,transparent_1px)]
-      dark:bg-[linear-gradient(rgba(255,255,255,0.012)_1px,transparent_1px),
-          linear-gradient(90deg,rgba(255,255,255,0.012)_1px,transparent_1px)]
-      bg-size-[60px_60px]"
-        />
-
-        <div className="relative max-w-7xl lg:max-w-8xl mx-auto px-4 md:px-6">
-          {/* Header */}
-          <div className="text-center mb-16">
-            {eyebrow && (
-              <div className="inline-flex items-center gap-2 mb-4">
-                <span className="w-1.5 h-1.5 rounded-full bg-lime-400 animate-pulse" />
-                <span className="text-xs font-semibold tracking-widest uppercase text-stone-500 dark:text-stone-500">
-                  {eyebrow}
-                </span>
-              </div>
-            )}
-            <h2 className="text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-4">
-              {headlineMain}
-              <br />
-              <span className="text-stone-600 dark:text-stone-400">{headlineAccent}</span>
-            </h2>
-            {description && (
-              <p className="text-stone-600 dark:text-stone-500 text-base max-w-md mx-auto">
-                {description}
-              </p>
-            )}
-          </div>
-          <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
-            {/* Left sidebar */}
-            <div className="lg:col-span-2 space-y-6">
-              {/* Call type selector */}
-              {callTypes && callTypes.length > 0 && (
-                <div>
-                  <p className="text-xs font-semibold text-stone-500 dark:text-stone-500 uppercase tracking-widest mb-3">
-                    Select Session Type
-                  </p>
-                  <div className="space-y-2.5">
-                    {callTypes.map((type) => (
-                      <button
-                        key={type.value}
-                        type="button"
-                        onClick={() => setSelectedType(type.value)}
-                        className={`w-full flex items-center gap-4 p-4 rounded-xl border transition-all cursor-pointer text-left ${
-                          selectedType === type.value
-                            ? 'bg-stone-50/80 dark:bg-stone-50/[0.08] border-stone-300 dark:border-white/20 text-stone-900 dark:text-stone-50'
-                            : 'bg-stone-100/60 dark:bg-stone-900/50 border-stone-200 dark:border-stone-800 text-stone-600 dark:text-stone-400 hover:border-stone-300 dark:hover:border-stone-700 hover:text-stone-900 dark:hover:text-stone-300'
-                        }`}
-                      >
-                        <div
-                          className={`w-9 h-9 flex items-center justify-center rounded-lg shrink-0 transition-colors ${
-                            selectedType === type.value
-                              ? 'bg-lime-400/15 text-emerald-400'
-                              : 'bg-stone-200 dark:bg-stone-800 text-stone-500 dark:text-stone-500'
-                          }`}
-                        >
-                          <DynamicIcon
-                            className="transition-colors duration-300"
-                            name={type.iconName}
-                            size={15}
-                          />
-                        </div>
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center justify-between gap-2">
-                            <span className="text-sm font-semibold">{type.label}</span>
-                            <span
-                              className={`text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap ${
-                                selectedType === type.value
-                                  ? 'bg-lime-400/15 text-emerald-400'
-                                  : 'bg-stone-200 dark:bg-stone-800 text-stone-500 dark:text-stone-500'
-                              }`}
-                            >
-                              {type.duration}
-                            </span>
-                          </div>
-                          {type.desc && <p className="text-xs mt-0.5 opacity-70">{type.desc}</p>}
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* What to expect */}
-              {features && features.length > 0 && (
-                <div className="rounded-xl bg-stone-100/60 dark:bg-stone-900/50 border border-stone-200 dark:border-stone-800 p-5">
-                  <p className="text-xs font-semibold text-stone-500 dark:text-stone-500 uppercase tracking-widest mb-4">
-                    What to expect
-                  </p>
-                  <div className="space-y-3">
-                    {features.map((f, i) => (
-                      <div key={i} className="flex items-center gap-3">
-                        <div className="w-9 h-9 flex items-center justify-center rounded-lg bg-stone-200 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 text-stone-500 dark:text-stone-400 shrink-0">
-                          <DynamicIcon
-                            className="dark:text-indigo-400 text-indigo-700 group-hover:dark:text-lime-400 duration-300 transition-all"
-                            name={f.iconName}
-                            size={14}
-                          />
-                        </div>
-                        <span className="text-xs text-stone-600 dark:text-stone-400">{f.text}</span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Timezone note */}
-              <div className="flex items-center gap-2.5 px-4 py-3 rounded-xl bg-stone-100/60 dark:bg-stone-900/40 border border-stone-200 dark:border-stone-800">
-                <Globe size={14} className="text-stone-500 dark:text-stone-500 shrink-0" />
-                <span className="text-xs text-stone-500 dark:text-stone-500">
-                  All times shown in{' '}
-                  <span className="text-stone-700 dark:text-stone-400 font-medium">
-                    {Intl.DateTimeFormat().resolvedOptions().timeZone}
-                  </span>
-                </span>
-              </div>
-            </div>
-
-            {/* Right — booking form */}
-            <div className="lg:col-span-3">
-              {status === 'success' ? (
-                <div className="rounded-2xl bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 p-12 flex flex-col items-center justify-center text-center">
-                  <div className="relative mb-6">
-                    <div className="w-16 h-16 flex items-center justify-center rounded-full bg-lime-400/10 border border-emerald-400/30">
-                      <CalendarCheck size={28} className="text-emerald-400" />
-                    </div>
-                    <div className="absolute -top-1 -right-1 w-6 h-6 flex items-center justify-center rounded-full bg-lime-400 text-stone-50 dark:text-stone-900">
-                      <Check size={12} strokeWidth={3} />
-                    </div>
-                  </div>
-                  <h3 className="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">
-                    You’re booked!
-                  </h3>
-                  <p className="text-stone-600 dark:text-stone-400 text-sm max-w-xs mb-2">
-                    A calendar invite will be in your inbox shortly. We’re looking forward to
-                    chatting.
-                  </p>
-                  {selectedCallType && selectedDate && selectedSlot && (
-                    <div className="flex items-center gap-2 mt-2 px-4 py-2.5 rounded-xl bg-stone-100 dark:bg-stone-800/60 border border-stone-200 dark:border-stone-700">
-                      <Clock size={14} className="text-emerald-400" />
-                      <span className="text-sm text-stone-700 dark:text-stone-300 font-medium">
-                        {selectedCallType.label} · {selectedDate} · {selectedSlot}
-                      </span>
-                    </div>
-                  )}
-                  <button
-                    onClick={() => setStatus('idle')}
-                    className="mt-8 px-5 py-2.5 rounded-lg bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 text-sm font-medium hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors cursor-pointer whitespace-nowrap"
-                  >
-                    Book another call
-                  </button>
-                </div>
-              ) : (
-                <form
-                  id={formIdentifier}
-                  name={formIdentifier}
-                  data-form-id={String(formID || '')}
-                  onSubmit={handleSubmit}
-                  className="rounded-2xl bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 px-3 md:px-8 py-8 space-y-6"
-                >
-                  {/* Name + Email */}
-                  <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-600 dark:text-stone-400 mb-1.5"
-                      >
-                        Your Name <span className="text-stone-400 dark:text-stone-600">*</span>
-                      </label>
-                      <input
-                        id={`${formIdentifier}-name`}
-                        type="text"
-                        name="name"
-                        autoComplete="name"
-                        required
-                        placeholder="Alex Rivera"
-                        className="w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 text-sm text-stone-900 dark:text-stone-200 placeholder:text-stone-400 dark:placeholder:text-stone-500 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-stone-500 focus:ring-2 focus:ring-ring focus:ring-offset-2"
-                      />
-                    </div>
-                    <div>
-                      <label
-                        htmlFor={`${formIdentifier}-email`}
-                        className="block text-xs font-medium text-stone-600 dark:text-stone-400 mb-1.5"
-                      >
-                        Email <span className="text-stone-400 dark:text-stone-600">*</span>
-                      </label>
-                      <input
-                        id={`${formIdentifier}-email`}
-                        type="email"
-                        name="email"
-                        autoComplete="email"
-                        required
-                        placeholder="you@company.com"
-                        className="w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 text-sm text-stone-900 dark:text-stone-200 placeholder:text-stone-400 dark:placeholder:text-stone-500 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-stone-500 focus:ring-2 focus:ring-ring focus:ring-offset-2"
-                      />
-                    </div>
-                  </div>
-
-                  {/* Company */}
-                  <div>
-                    <label
-                      htmlFor={`${formIdentifier}-company`}
-                      className="block text-xs font-medium text-stone-600 dark:text-stone-400 mb-1.5"
-                    >
-                      Company / Project
-                    </label>
-                    <input
-                      id={`${formIdentifier}-company`}
-                      type="text"
-                      name="company"
-                      autoComplete="organization"
-                      placeholder="Acme Inc."
-                      className="w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 text-sm text-stone-900 dark:text-stone-200 placeholder:text-stone-400 dark:placeholder:text-stone-500 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-stone-500 focus:ring-2 focus:ring-ring focus:ring-offset-2"
-                    />
-                  </div>
-
-                  {/* Date + Time */}
-                  <div>
-                    <p className="text-xs font-medium text-stone-600 dark:text-stone-400 mb-3">
-                      Preferred Date &amp; Time{' '}
-                      <span className="text-stone-400 dark:text-stone-600">*</span>
-                    </p>
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                      {/* Date picker */}
-                      <div>
-                        <label
-                          htmlFor={`${formIdentifier}-date`}
-                          className="block text-xs text-stone-500 dark:text-stone-500 mb-1.5"
-                        >
-                          Date
-                        </label>
-                        <div className="relative">
-                          <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-stone-400 dark:text-stone-500">
-                            <CalendarDays size={14} />
-                          </div>
-                          <input
-                            id={`${formIdentifier}-date`}
-                            type="date"
-                            name="preferred_date"
-                            required
-                            min={getMinDate()}
-                            max={getMaxDate()}
-                            value={selectedDate}
-                            onChange={(e) => setSelectedDate(e.target.value)}
-                            className="w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 pl-9 pr-3 py-2 text-sm text-stone-900 dark:text-stone-200 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-stone-500 cursor-pointer"
-                            style={{ colorScheme: 'light dark' }}
-                          />
-                        </div>
-                      </div>
-
-                      {/* Timezone */}
-                      <div>
-                        <label className="block text-xs text-stone-500 dark:text-stone-500 mb-1.5">
-                          Time Zone
-                        </label>
-                        <div className="flex h-10 w-full items-center gap-2.5 rounded-2xl squircle border border-stone-300 bg-stone-50/80 px-3 py-2 text-sm text-stone-900 outline-none backdrop-blur-[22px] transition-all duration-300 dark:border-stone-600 dark:bg-[#0e0e13] dark:text-stone-200">
-                          <Globe
-                            size={14}
-                            className="text-stone-400 dark:text-stone-500 shrink-0"
-                          />
-                          <span className="truncate text-sm text-stone-900 dark:text-stone-200">
-                            {Intl.DateTimeFormat().resolvedOptions().timeZone}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Time slot grid */}
-                    {slots && slots.length > 0 && (
-                      <div className="mt-4">
-                        <label className="block text-xs text-stone-500 dark:text-stone-500 mb-2.5">
-                          Available Times
-                        </label>
-                        <div className="grid grid-cols-4 sm:grid-cols-5 gap-2">
-                          {slots.map((slot) => (
-                            <button
-                              key={slot}
-                              type="button"
-                              onClick={() => setSelectedSlot(slot)}
-                              className={`py-2 rounded-lg text-xs font-medium border transition-all cursor-pointer whitespace-nowrap ${
-                                selectedSlot === slot
-                                  ? 'bg-stone-900 dark:!bg-lime-950/50 text-stone-50 dark:text-lime-500 border-stone-900 dark:border-lime-500'
-                                  : 'bg-stone-100 dark:bg-stone-950 border-stone-200 dark:border-stone-700 text-stone-600 dark:text-stone-400 hover:border-stone-300 dark:hover:border-stone-500 hover:text-stone-900 dark:hover:text-stone-200'
-                              }`}
-                            >
-                              {slot}
-                            </button>
-                          ))}
-                        </div>
-                        {!selectedSlot && (
-                          <p className="text-xs  text-stone-700 dark:text-stone-400 mt-2">
-                            Select a time slot above
-                          </p>
-                        )}
-                        {selectedSlot && selectedCallType && (
-                          <div className="mt-2 flex items-center gap-2">
-                            <span className="w-1.5 h-1.5 rounded-full bg-lime-400 shrink-0" />
-                            <p className="text-xs text-emerald-400 font-medium">
-                              {selectedSlot} selected · {selectedCallType.duration} session
-                            </p>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Notes */}
-                  <div>
-                    <label
-                      htmlFor={`${formIdentifier}-notes`}
-                      className="block text-xs font-medium text-stone-600 dark:text-stone-400 mb-1.5"
-                    >
-                      Notes{' '}
-                      <span
-                        className={`font-normal ml-1 ${
-                          charCount > 500 ? 'text-red-400' : 'text-stone-400 dark:text-stone-600'
-                        }`}
-                      >
-                        {charCount}/500
-                      </span>
-                    </label>
-                    <textarea
-                      id={`${formIdentifier}-notes`}
-                      name="notes"
-                      rows={3}
-                      maxLength={500}
-                      placeholder="Anything you'd like us to know before the call — project overview, specific questions, technical context..."
-                      onChange={(e) => setCharCount(e.target.value.length)}
-                      className="w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 text-sm text-stone-900 dark:text-stone-200 placeholder:text-stone-400 dark:placeholder:text-stone-500 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-stone-500 resize-none"
-                    />
-                  </div>
-
-                  {/* Error */}
-                  {status === 'error' && (
-                    <p className="text-xs text-red-400 flex items-center gap-1.5">
-                      <AlertCircle size={13} />
-                      Something went wrong. Please try again.
-                    </p>
-                  )}
-
-                  {/* Submit */}
-                  <button
-                    type="submit"
-                    disabled={
-                      status === 'submitting' || !selectedSlot || !selectedDate || charCount > 500
-                    }
-                    className="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/30 bg-stone-50/90 dark:bg-[linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.68)_24%,rgba(255,255,255,.7)_58%,rgba(255,255,255,.7)),linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,.8)_38%,rgba(0,0,0,.12)),rgba(255,255,255,.4)] px-6 py-3 text-sm font-semibold text-stone-900 dark:text-stone-900 disabled:opacity-40 disabled:cursor-not-allowed"
-                  >
-                    <span className="relative z-2 flex items-center gap-2">
-                      {status === 'submitting' ? (
-                        <>
-                          <Loader2 size={15} className="animate-spin" />
-                          Booking your call...
-                        </>
-                      ) : (
-                        <>
-                          <CalendarDays size={15} />
-                          Confirm Booking
-                          {selectedSlot && selectedDate && (
-                            <span className="text-stone-500 dark:text-stone-500 font-normal text-xs ml-1">
-                              · {selectedDate}, {selectedSlot}
-                            </span>
-                          )}
-                        </>
-                      )}
-                    </span>
-                  </button>
-
-                  {footerNote && (
-                    <p className="text-xs  text-stone-700 dark:text-stone-400 text-center">
-                      {footerNote}
-                    </p>
-                  )}
-                </form>
-              )}
-            </div>
-          </div>
-        </div>
-      </section>
-    </>
-  )
-}
+'use client'
+import React, { type FormEvent, useMemo, useState } from 'react'
+import * as LucideIcons from 'lucide-react'
+import {
+  Check,
+  Loader2,
+  CalendarDays,
+  Globe,
+  Clock,
+  AlertCircle,
+  CalendarCheck,
+} from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { getClientSideURL } from '@/utilities/getURL'
+
+type Status = 'idle' | 'submitting' | 'success' | 'error'
+export type DDBookCallProps = {
+  eyebrow?: string | null
+  headlineMain?: string | null
+  headlineAccent?: string | null
+  description?: string | null
+  callTypes?: Array<{
+    value: string
+    label: string
+    duration: string
+    iconName?: string | null
+    desc?: string | null
+  }> | null
+  features?: Array<{
+    iconName?: string | null
+    text: string
+  }> | null
+  form?: string | number | { id?: string | number } | null
+  timeSlots?: Array<{ slot?: string | null }> | null
+  footerNote?: 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} />
+}
+
+function getMinDate() {
+  const d = new Date()
+  d.setDate(d.getDate() + 1)
+  return d.toISOString().split('T')[0]
+}
+
+function getMaxDate() {
+  const d = new Date()
+  d.setDate(d.getDate() + 60)
+  return d.toISOString().split('T')[0]
+}
+
+export const DDBookCall: React.FC<DDBookCallProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  description,
+  callTypes,
+  features,
+  form,
+  timeSlots,
+  footerNote,
+  sectionId,
+  customCSS,
+}) => {
+  const [status, setStatus] = useState<Status>('idle')
+  const [selectedType, setSelectedType] = useState<string>(callTypes?.[0]?.value ?? 'discovery')
+  const [selectedSlot, setSelectedSlot] = useState('')
+  const [selectedDate, setSelectedDate] = useState('')
+  const [charCount, setCharCount] = useState(0)
+
+  const formID = typeof form === 'object' && form !== null ? form.id : form
+
+  const formIdentifier = useMemo(() => {
+    const safeSection = (sectionId || 'book-call').toLowerCase().replace(/[^a-z0-9-_]/g, '-')
+    return `studio-book-call-${String(formID || 'unknown')}-${safeSection}`
+  }, [formID, sectionId])
+
+  const selectedCallType = callTypes?.find((t) => t.value === selectedType) ?? callTypes?.[0]
+  const slots = timeSlots?.map((t) => t.slot).filter(Boolean) as string[]
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formElement = e.currentTarget
+
+    if (!selectedDate || !selectedSlot) return
+
+    const notes = formElement.querySelector<HTMLTextAreaElement>('[name="notes"]')?.value ?? ''
+    if (notes.length > 500) return
+
+    setStatus('submitting')
+
+    const data = new FormData(formElement)
+
+    const submissionData = [
+      { field: 'name', value: data.get('name') },
+      { field: 'email', value: data.get('email') },
+      { field: 'company', value: data.get('company') },
+      { field: 'call_type', value: selectedType },
+      { field: 'preferred_date', value: selectedDate },
+      { field: 'preferred_time', value: selectedSlot },
+      { field: 'notes', value: data.get('notes') },
+    ]
+
+    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()
+        setSelectedSlot('')
+        setSelectedDate('')
+        setCharCount(0)
+      } else {
+        setStatus('error')
+      }
+    } catch {
+      setStatus('error')
+    }
+  }
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <section
+        id={sectionId ?? 'book-call'}
+        className="py-28 bg-stone-50 dark:bg-stone-950 relative overflow-hidden"
+      >
+        {/* Background gradients – light & dark variants */}
+        <div
+          className="absolute inset-0 pointer-events-none opacity-30
+      bg-[radial-gradient(circle_at_20%_50%,rgba(0,0,0,0.06)_0%,transparent_50%),
+          radial-gradient(circle_at_80%_20%,rgba(0,0,0,0.03)_0%,transparent_40%)]
+      dark:bg-[radial-gradient(circle_at_20%_50%,rgba(110,231,183,0.06)_0%,transparent_50%),
+          radial-gradient(circle_at_80%_20%,rgba(255,255,255,0.03)_0%,transparent_40%)]"
+        />
+        <div
+          className="absolute inset-0 pointer-events-none
+      bg-[linear-gradient(rgba(0,0,0,0.06)_1px,transparent_1px),
+          linear-gradient(90deg,rgba(0,0,0,0.06)_1px,transparent_1px)]
+      dark:bg-[linear-gradient(rgba(255,255,255,0.012)_1px,transparent_1px),
+          linear-gradient(90deg,rgba(255,255,255,0.012)_1px,transparent_1px)]
+      bg-size-[60px_60px]"
+        />
+
+        <div className="relative max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}#BlockName-DDBookCall
+          <div className="text-center mb-16">
+            {eyebrow && (
+              <div className="inline-flex items-center gap-2 mb-4">
+                <span className="w-1.5 h-1.5 rounded-full bg-lime-400 animate-pulse" />
+                <span className="text-xs font-semibold tracking-widest uppercase text-stone-500 dark:text-stone-500">
+                  {eyebrow}
+                </span>
+              </div>
+            )}
+            <h2 className="text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-4">
+              {headlineMain}
+              <br />
+              <span className="text-stone-600 dark:text-stone-400">{headlineAccent}</span>
+            </h2>
+            {description && (
+              <p className="text-stone-600 dark:text-stone-500 text-base max-w-md mx-auto">
+                {description}
+              </p>
+            )}
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
+            {/* Left sidebar */}
+            <div className="lg:col-span-2 space-y-6">
+              {/* Call type selector */}
+              {callTypes && callTypes.length > 0 && (
+                <div>
+                  <p className="text-xs font-semibold text-stone-500 dark:text-stone-500 uppercase tracking-widest mb-3">
+                    Select Session Type
+                  </p>
+                  <div className="space-y-2.5">
+                    {callTypes.map((type) => (
+                      <button
+                        key={type.value}
+                        type="button"
+                        onClick={() => setSelectedType(type.value)}
+                        className={`w-full flex items-center gap-4 p-4 rounded-xl border transition-all cursor-pointer text-left ${
+                          selectedType === type.value
+                            ? 'bg-stone-50/80 dark:bg-stone-50/[0.08] border-stone-300 dark:border-white/20 text-stone-900 dark:text-stone-50'
+                            : 'bg-stone-100/60 dark:bg-stone-900/50 border-stone-200 dark:border-stone-800 text-stone-600 dark:text-stone-400 hover:border-stone-300 dark:hover:border-stone-700 hover:text-stone-900 dark:hover:text-stone-300'
+                        }`}
+                      >
+                        <div
+                          className={`w-9 h-9 flex items-center justify-center rounded-lg shrink-0 transition-colors ${
+                            selectedType === type.value
+                              ? 'bg-lime-400/15 text-emerald-400'
+                              : 'bg-stone-200 dark:bg-stone-800 text-stone-500 dark:text-stone-500'
+                          }`}
+                        >
+                          <DynamicIcon
+                            className="transition-colors duration-300"
+                            name={type.iconName}
+                            size={15}
+                          />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center justify-between gap-2">
+                            <span className="text-sm font-semibold">{type.label}</span>
+                            <span
+                              className={`text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap ${
+                                selectedType === type.value
+                                  ? 'bg-lime-400/15 text-emerald-400'
+                                  : 'bg-stone-200 dark:bg-stone-800 text-stone-500 dark:text-stone-500'
+                              }`}
+                            >
+                              {type.duration}
+                            </span>
+                          </div>
+                          {type.desc && <p className="text-xs mt-0.5 opacity-70">{type.desc}</p>}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* What to expect */}
+              {features && features.length > 0 && (
+                <div className="rounded-xl bg-stone-100/60 dark:bg-stone-900/50 border border-stone-200 dark:border-stone-800 p-5">
+                  <p className="text-xs font-semibold text-stone-500 dark:text-stone-500 uppercase tracking-widest mb-4">
+                    What to expect
+                  </p>
+                  <div className="space-y-3">
+                    {features.map((f, i) => (
+                      <div key={i} className="flex items-center gap-3">
+                        <div className="w-9 h-9 flex items-center justify-center rounded-lg bg-stone-200 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 text-stone-500 dark:text-stone-400 shrink-0">
+                          <DynamicIcon
+                            className="dark:text-indigo-400 text-indigo-700 group-hover:dark:text-lime-400 duration-300 transition-all"
+                            name={f.iconName}
+                            size={14}
+                          />
+                        </div>
+                        <span className="text-xs text-stone-600 dark:text-stone-400">{f.text}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Timezone note */}
+              <div className="flex items-center gap-2.5 px-4 py-3 rounded-xl bg-stone-100/60 dark:bg-stone-900/40 border border-stone-200 dark:border-stone-800">
+                <Globe size={14} className="text-stone-500 dark:text-stone-500 shrink-0" />
+                <span className="text-xs text-stone-500 dark:text-stone-500">
+                  All times shown in{' '}
+                  <span className="text-stone-700 dark:text-stone-400 font-medium">
+                    {Intl.DateTimeFormat().resolvedOptions().timeZone}
+                  </span>
+                </span>
+              </div>
+            </div>
+
+            {/* Right — booking form */}
+            <div className="lg:col-span-3">
+              {status === 'success' ? (
+                <div className="rounded-2xl bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-700 p-12 flex flex-col items-center justify-center text-center">
+                  <div className="relative mb-6">
+                    <div className="w-16 h-16 flex items-center justify-center rounded-full bg-lime-400/10 border border-emerald-400/30">
+                      <CalendarCheck size={28} className="text-emerald-400" />
+                    </div>
+                    <div className="absolute -top-1 -right-1 w-6 h-6 flex items-center justify-center rounded-full bg-lime-400 text-stone-50 dark:text-stone-900">
+                      <Check size={12} strokeWidth={3} />
+                    </div>
+                  </div>
+                  <h3 className="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">
+                    You’re booked!
+                  </h3>
+                  <p className="text-stone-600 dark:text-stone-400 text-sm max-w-xs mb-2">
+                    A calendar invite will be in your inbox shortly. We’re looking forward to
+                    chatting.
+                  </p>
+                  {selectedCallType && selectedDate && selectedSlot && (
+                    <div className="flex items-center gap-2 mt-2 px-4 py-2.5 rounded-xl bg-stone-100 dark:bg-stone-800/60 border border-stone-200 dark:border-stone-700">
+                      <Clock size={14} className="text-emerald-400" />
+                      <span className="text-sm text-stone-700 dark:text-stone-300 font-medium">
+                        {selectedCallType.label} · {selectedDate} · {selectedSlot}
+                      </span>
+                    </div>
+                  )}
+                  <button
+                    onClick={() => setStatus('idle')}
+                    className="mt-8 px-5 py-2.5 rounded-lg bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 text-sm font-medium hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors cursor-pointer whitespace-nowrap"
+                  >
+                    Book another call
+                  </button>
+                </div>
+              ) : (
+                <form
+                  id={formIdentifier}
+                  name={formIdentifier}
+                  data-form-id={String(formID || '')}
+                  onSubmit={handleSubmit}
+                  className="rounded-2xl bg-stone-50 dark:bg-stone-900 border border-stone-200 dark:border-stone-800 px-3 md:px-8 py-8 space-y-6"
+                >
+                  {/* Name + Email */}
+                  <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-600 dark:text-stone-400 mb-1.5"
+                      >
+                        Your Name <span className="text-stone-400 dark:text-stone-600">*</span>
+                      </label>
+                      <input
+                        id={`${formIdentifier}-name`}
+                        type="text"
+                        name="name"
+                        autoComplete="name"
+                        required
+                        placeholder="Alex Rivera"
+                        className="w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 text-sm text-stone-900 dark:text-stone-200 placeholder:text-stone-400 dark:placeholder:text-stone-500 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-stone-500 focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                      />
+                    </div>
+                    <div>
+                      <label
+                        htmlFor={`${formIdentifier}-email`}
+                        className="block text-xs font-medium text-stone-600 dark:text-stone-400 mb-1.5"
+                      >
+                        Email <span className="text-stone-400 dark:text-stone-600">*</span>
+                      </label>
+                      <input
+                        id={`${formIdentifier}-email`}
+                        type="email"
+                        name="email"
+                        autoComplete="email"
+                        required
+                        placeholder="you@company.com"
+                        className="w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 text-sm text-stone-900 dark:text-stone-200 placeholder:text-stone-400 dark:placeholder:text-stone-500 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-stone-500 focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Company */}
+                  <div>
+                    <label
+                      htmlFor={`${formIdentifier}-company`}
+                      className="block text-xs font-medium text-stone-600 dark:text-stone-400 mb-1.5"
+                    >
+                      Company / Project
+                    </label>
+                    <input
+                      id={`${formIdentifier}-company`}
+                      type="text"
+                      name="company"
+                      autoComplete="organization"
+                      placeholder="Acme Inc."
+                      className="w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 text-sm text-stone-900 dark:text-stone-200 placeholder:text-stone-400 dark:placeholder:text-stone-500 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-stone-500 focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                    />
+                  </div>
+
+                  {/* Date + Time */}
+                  <div>
+                    <p className="text-xs font-medium text-stone-600 dark:text-stone-400 mb-3">
+                      Preferred Date &amp; Time{' '}
+                      <span className="text-stone-400 dark:text-stone-600">*</span>
+                    </p>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      {/* Date picker */}
+                      <div>
+                        <label
+                          htmlFor={`${formIdentifier}-date`}
+                          className="block text-xs text-stone-500 dark:text-stone-500 mb-1.5"
+                        >
+                          Date
+                        </label>
+                        <div className="relative">
+                          <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-stone-400 dark:text-stone-500">
+                            <CalendarDays size={14} />
+                          </div>
+                          <input
+                            id={`${formIdentifier}-date`}
+                            type="date"
+                            name="preferred_date"
+                            required
+                            min={getMinDate()}
+                            max={getMaxDate()}
+                            value={selectedDate}
+                            onChange={(e) => setSelectedDate(e.target.value)}
+                            className="w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 pl-9 pr-3 py-2 text-sm text-stone-900 dark:text-stone-200 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-stone-500 cursor-pointer"
+                            style={{ colorScheme: 'light dark' }}
+                          />
+                        </div>
+                      </div>
+
+                      {/* Timezone */}
+                      <div>
+                        <label className="block text-xs text-stone-500 dark:text-stone-500 mb-1.5">
+                          Time Zone
+                        </label>
+                        <div className="flex items-center gap-2.5 w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 backdrop-blur-[22px]">
+                          <Globe
+                            size={14}
+                            className="text-stone-400 dark:text-stone-500 shrink-0"
+                          />
+                          <span className="text-sm text-stone-700 dark:text-stone-400 truncate">
+                            {Intl.DateTimeFormat().resolvedOptions().timeZone}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Time slot grid */}
+                    {slots && slots.length > 0 && (
+                      <div className="mt-4">
+                        <label className="block text-xs text-stone-500 dark:text-stone-500 mb-2.5">
+                          Available Times
+                        </label>
+                        <div className="grid grid-cols-4 sm:grid-cols-5 gap-2">
+                          {slots.map((slot) => (
+                            <button
+                              key={slot}
+                              type="button"
+                              onClick={() => setSelectedSlot(slot)}
+                              className={`py-2 rounded-lg text-xs font-medium border transition-all cursor-pointer whitespace-nowrap ${
+                                selectedSlot === slot
+                                  ? 'bg-stone-900 dark:bg-stone-50 text-stone-50 dark:text-stone-900 border-stone-900 dark:border-white'
+                                  : 'bg-stone-100 dark:bg-stone-950 border-stone-200 dark:border-stone-700 text-stone-600 dark:text-stone-400 hover:border-stone-300 dark:hover:border-stone-500 hover:text-stone-900 dark:hover:text-stone-200'
+                              }`}
+                            >
+                              {slot}
+                            </button>
+                          ))}
+                        </div>
+                        {!selectedSlot && (
+                          <p className="text-xs  text-stone-700 dark:text-stone-400 mt-2">
+                            Select a time slot above
+                          </p>
+                        )}
+                        {selectedSlot && selectedCallType && (
+                          <div className="mt-2 flex items-center gap-2">
+                            <span className="w-1.5 h-1.5 rounded-full bg-lime-400 shrink-0" />
+                            <p className="text-xs text-emerald-400 font-medium">
+                              {selectedSlot} selected · {selectedCallType.duration} session
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Notes */}
+                  <div>
+                    <label
+                      htmlFor={`${formIdentifier}-notes`}
+                      className="block text-xs font-medium text-stone-600 dark:text-stone-400 mb-1.5"
+                    >
+                      Notes{' '}
+                      <span
+                        className={`font-normal ml-1 ${
+                          charCount > 500 ? 'text-red-400' : 'text-stone-400 dark:text-stone-600'
+                        }`}
+                      >
+                        {charCount}/500
+                      </span>
+                    </label>
+                    <textarea
+                      id={`${formIdentifier}-notes`}
+                      name="notes"
+                      rows={3}
+                      maxLength={500}
+                      placeholder="Anything you'd like us to know before the call — project overview, specific questions, technical context..."
+                      onChange={(e) => setCharCount(e.target.value.length)}
+                      className="w-full rounded-sm  border border-stone-300 dark:border-stone-600 bg-stone-50/80 dark:bg-black/80 px-3 py-2 text-sm text-stone-900 dark:text-stone-200 placeholder:text-stone-400 dark:placeholder:text-stone-500 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-stone-500 resize-none"
+                    />
+                  </div>
+
+                  {/* Error */}
+                  {status === 'error' && (
+                    <p className="text-xs text-red-400 flex items-center gap-1.5">
+                      <AlertCircle size={13} />
+                      Something went wrong. Please try again.
+                    </p>
+                  )}
+
+                  {/* Submit */}
+                  <button
+                    type="submit"
+                    disabled={
+                      status === 'submitting' || !selectedSlot || !selectedDate || charCount > 500
+                    }
+                    className="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/30 bg-stone-50/90 dark:bg-[linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.68)_24%,rgba(255,255,255,.7)_58%,rgba(255,255,255,.7)),linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,.8)_38%,rgba(0,0,0,.12)),rgba(255,255,255,.4)] px-6 py-3 text-sm font-semibold text-stone-900 dark:text-stone-900 disabled:opacity-40 disabled:cursor-not-allowed"
+                  >
+                    <span className="relative z-2 flex items-center gap-2">
+                      {status === 'submitting' ? (
+                        <>
+                          <Loader2 size={15} className="animate-spin" />
+                          Booking your call...
+                        </>
+                      ) : (
+                        <>
+                          <CalendarDays size={15} />
+                          Confirm Booking
+                          {selectedSlot && selectedDate && (
+                            <span className="text-stone-500 dark:text-stone-500 font-normal text-xs ml-1">
+                              · {selectedDate}, {selectedSlot}
+                            </span>
+                          )}
+                        </>
+                      )}
+                    </span>
+                  </button>
+
+                  {footerNote && (
+                    <p className="text-xs  text-stone-700 dark:text-stone-400 text-center">
+                      {footerNote}
+                    </p>
+                  )}
+                </form>
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}