blocks-dusted 0.1.0

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

@@ -0,0 +1,573 @@
+"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-[length:60px_60px]"
+        />
+
+        <div className="relative max-w-6xl lg:max-w-7xl 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 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>
+    </>
+  );
+};