Curatorack | Register

{STEPS.map((s, i) => (

s.id ? T.accent : step === s.id ? T.accentGlow : "transparent", border: `2px solid ${step >= s.id ? T.accent : T.border}`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: step > s.id ? 14 : 16, color: step > s.id ? "#000" : step === s.id ? T.accent : T.textDim, fontWeight: 700, transition: "all 0.3s ease", boxShadow: step === s.id ? `0 0 16px ${T.accentGlow}` : "none", }}> {step > s.id ? "✓" : s.icon}

= s.id ? T.accent : T.textDim, fontFamily: "monospace", fontWeight: step === s.id ? 700 : 400, }}>{s.label}

{i < STEPS.length - 1 && (

s.id ? `linear-gradient(90deg, ${T.accent}, ${T.accentDim})` : T.border, transition: "background 0.4s ease", }} /> )}

))}

); } function StepLabel({ number, title, subtitle }) { return (

STEP {number} / {STEPS.length}

{title}

{subtitle &&

{subtitle}

}

); } function Input({ label, placeholder, value, onChange, type = "text", error }) { const [focused, setFocused] = useState(false); return (

{label} onChange(e.target.value)} placeholder={placeholder} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} style={{ width: "100%", padding: "13px 16px", boxSizing: "border-box", background: T.surface, border: `1px solid ${error ? T.error : focused ? T.accent : T.border}`, borderRadius: 8, color: T.textPrimary, fontSize: 15, outline: "none", fontFamily: "inherit", boxShadow: focused ? `0 0 0 3px ${T.accentGlow}` : "none", transition: "all 0.2s ease", }} /> {error &&

{error}

}

); } function Textarea({ label, placeholder, value, onChange, maxLength = 500 }) { const [focused, setFocused] = useState(false); return (

{label}

onChange(e.target.value)}
        placeholder={placeholder}
        maxLength={maxLength}
        rows={5}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        style={{
          width: "100%", padding: "13px 16px", boxSizing: "border-box",
          background: T.surface,
          border: `1px solid ${focused ? T.accent : T.border}`,
          borderRadius: 8, color: T.textPrimary, fontSize: 14,
          outline: "none", fontFamily: "inherit", resize: "vertical",
          boxShadow: focused ? `0 0 0 3px ${T.accentGlow}` : "none",
          transition: "all 0.2s ease",
        }}
      />
      <div style={{ textAlign: "right", fontSize: 11, color: T.textDim, marginTop: 4 }}>
        {value.length} / {maxLength}
      </div>
    </div>
  );
}

function PlaylistCard({ playlist, selected, onToggle }) {
  return (
    <div
      onClick={() => onToggle(playlist.id)}
      style={{
        padding: "16px", borderRadius: 10,
        border: `1px solid ${selected ? T.accent : T.border}`,
        background: selected ? T.accentGlow : T.surface,
        cursor: "pointer", transition: "all 0.2s ease",
        display: "flex", gap: 14, alignItems: "flex-start",
        boxShadow: selected ? `0 0 16px ${T.accentGlow}` : "none",
      }}
    >
      <div style={{
        width: 48, height: 48, borderRadius: 8,
        background: "#1C1C1C", display: "flex", alignItems: "center",
        justifyContent: "center", fontSize: 24, flexShrink: 0,
        border: `1px solid ${T.border}`,
      }}>{playlist.img}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600, color: T.textPrimary, fontSize: 14, marginBottom: 2 }}>
          {playlist.curator}
        </div>
        <div style={{ fontSize: 12, color: T.textMuted, marginBottom: 6 }}>{playlist.genre}</div>
        <div style={{ display: "flex", gap: 12 }}>
          <span style={{ fontSize: 11, color: T.accentDim, fontFamily: "monospace" }}>
            ♫ {playlist.followers} followers
          </span>
          <span style={{ fontSize: 11, color: T.spotifyGreen, fontFamily: "monospace" }}>
            {playlist.slots} open slots
          </span>
        </div>
      </div>
      <div style={{
        width: 20, height: 20, borderRadius: "50%",
        border: `2px solid ${selected ? T.accent : T.border}`,
        background: selected ? T.accent : "transparent",
        display: "flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0, marginTop: 2,
      }}>
        {selected && <span style={{ fontSize: 11, color: "#000", fontWeight: 700 }}>✓</span>}
      </div>
    </div>
  );
}

function ReviewRow({ label, value }) {
  return (
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "flex-start",
      padding: "12px 0", borderBottom: `1px solid ${T.border}`,
    }}>
      <span style={{ fontSize: 12, color: T.textMuted, fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.08em", flexShrink: 0, marginRight: 16 }}>{label}</span>
      <span style={{ fontSize: 14, color: T.textPrimary, textAlign: "right", wordBreak: "break-word" }}>{value || "—"}</span>
    </div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────
export default function CuratorackPortal() {
  const [step, setStep] = useState(1);
  const [submitted, setSubmitted] = useState(false);
  const [errors, setErrors] = useState({});

const [form, setForm] = useState({
    // Step 1
    spotifyUrl: "",
    trackName: "",
    artistName: "",
    // Step 2
    genres: [],
    moods: [],
    explicit: false,
    language: "English",
    // Step 3
    selectedPlaylists: [],
    // Step 4
    pitch: "",
    instagram: "",
    pressLink: "",
    agreed: false,
  });

const selectedPlaylistNames = PLAYLISTS
    .filter(p => form.selectedPlaylists.includes(p.id))
    .map(p => p.curator)
    .join(", ");

// ── SUBMITTED STATE ──────────────────────────────────────────────────────
  if (submitted) {
    return (
      <div style={{ minHeight: "100vh", background: T.bg, display: "flex", alignItems: "center", justifyContent: "center", padding: 24, fontFamily: "'Inter', 'Segoe UI', sans-serif" }}>
        <div style={{ textAlign: "center", maxWidth: 480 }}>
          <div style={{
            width: 80, height: 80, borderRadius: "50%",
            background: `rgba(77,175,124,0.15)`, border: `2px solid ${T.success}`,
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 36, margin: "0 auto 24px",
            boxShadow: "0 0 40px rgba(77,175,124,0.2)",
          }}>✓</div>
          <h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 30, color: T.textPrimary, margin: "0 0 12px" }}>
            Submission Received
          </h1>
          <p style={{ color: T.textMuted, lineHeight: 1.7, fontSize: 15, marginBottom: 32 }}>
            <strong style={{ color: T.accent }}>"{form.trackName}"</strong> by {form.artistName} is now in the queue. Curators typically review within <strong style={{ color: T.textPrimary }}>5–7 business days</strong>.
          </p>
          <div style={{
            background: T.surface, border: `1px solid ${T.border}`,
            borderRadius: 12, padding: 20, textAlign: "left", marginBottom: 28,
          }}>
            <p style={{ margin: "0 0 4px", fontSize: 12, color: T.textMuted, fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.08em" }}>Submitted to</p>
            <p style={{ margin: 0, color: T.textPrimary, fontSize: 14 }}>{selectedPlaylistNames}</p>
          </div>
          <div style={{
            padding: "12px 20px", background: `rgba(29,185,84,0.08)`,
            border: `1px solid rgba(29,185,84,0.3)`, borderRadius: 8,
            fontSize: 13, color: T.spotifyGreen, marginBottom: 32,
          }}>
            Track verified on Spotify ✓
          </div>
          <button
            onClick={() => { setStep(1); setSubmitted(false); setForm({ spotifyUrl:"",trackName:"",artistName:"",genres:[],moods:[],explicit:false,language:"English",selectedPlaylists:[],pitch:"",instagram:"",pressLink:"",agreed:false }); }}
            style={{
              padding: "12px 28px", borderRadius: 8, border: `1px solid ${T.border}`,
              background: "transparent", color: T.textMuted, cursor: "pointer",
              fontFamily: "inherit", fontSize: 14,
            }}
          >Submit Another Track</button>
        </div>
      </div>
    );
  }

// ── PORTAL LAYOUT ────────────────────────────────────────────────────────
  return (
    <div style={{ minHeight: "100vh", background: T.bg, fontFamily: "'Inter', 'Segoe UI', sans-serif", color: T.textPrimary }}>
      {/* Top bar */}
      <div style={{
        padding: "16px 24px", borderBottom: `1px solid ${T.border}`,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        background: T.surface,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ fontSize: 20 }}>⬡</span>
          <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 17, letterSpacing: "-0.02em" }}>
            Curator<span style={{ color: T.accent }}>ack</span>
          </span>
        </div>
        <span style={{ fontSize: 12, color: T.textDim, fontFamily: "monospace" }}>PLAYLIST SUBMISSION</span>
      </div>

{/* Content */}
      <div style={{ maxWidth: 620, margin: "0 auto", padding: "40px 24px 80px" }}>
        <ProgressBar step={step} />

{/* ── STEP 1: Track Details ─────────────────────────── */}
        {step === 1 && (
          <div>
            <StepLabel number={1} title="Your Track" subtitle="Paste your Spotify link and we'll do the rest." />
            <div style={{
              padding: "14px 16px", background: `rgba(29,185,84,0.07)`,
              border: `1px solid rgba(29,185,84,0.25)`, borderRadius: 8,
              display: "flex", alignItems: "center", gap: 10, marginBottom: 24,
            }}>
              <span style={{ fontSize: 18 }}>🎵</span>
              <span style={{ fontSize: 13, color: T.textMuted }}>
                Only tracks live on <strong style={{ color: T.spotifyGreen }}>Spotify</strong> are accepted.
              </span>
            </div>
            <Input label="Spotify Track URL" placeholder="https://open.spotify.com/track/..." value={form.spotifyUrl} onChange={v => set("spotifyUrl", v)} error={errors.spotifyUrl} />
            <Input label="Track Name" placeholder="e.g. Melanina" value={form.trackName} onChange={v => set("trackName", v)} error={errors.trackName} />
            <Input label="Artist / Stage Name" placeholder="e.g. Shan Joe" value={form.artistName} onChange={v => set("artistName", v)} error={errors.artistName} />
          </div>
        )}

{/* ── STEP 2: Sound Profile ─────────────────────────── */}
        {step === 2 && (
          <div>
            <StepLabel number={2} title="Sound Profile" subtitle="Help curators understand your music before they press play." />
            <TagPicker label="Genre" options={GENRES} selected={form.genres} onToggle={v => toggleArr("genres", v)} max={3} />
            {errors.genres && <p style={{ color: T.error, fontSize: 12, marginTop: -12, marginBottom: 12 }}>{errors.genres}</p>}
            <TagPicker label="Mood" options={MOODS} selected={form.moods} onToggle={v => toggleArr("moods", v)} max={3} />
            {errors.moods && <p style={{ color: T.error, fontSize: 12, marginTop: -12, marginBottom: 12 }}>{errors.moods}</p>}
            <div style={{ marginBottom: 20 }}>
              <label style={{ fontSize: 12, color: T.textMuted, letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "monospace", display: "block", marginBottom: 8 }}>Language</label>
              <select value={form.language} onChange={e => set("language", e.target.value)} style={{
                padding: "13px 16px", background: T.surface, border: `1px solid ${T.border}`,
                borderRadius: 8, color: T.textPrimary, fontSize: 15, outline: "none",
                fontFamily: "inherit", width: "100%", cursor: "pointer",
              }}>
                {["English","Luganda","Swahili","French","Spanish","Portuguese","Arabic","Other"].map(l => (
                  <option key={l} value={l}>{l}</option>
                ))}
              </select>
            </div>
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "13px 16px", background: T.surface, border: `1px solid ${T.border}`,
              borderRadius: 8, cursor: "pointer",
            }} onClick={() => set("explicit", !form.explicit)}>
              <div style={{
                width: 18, height: 18, borderRadius: 4,
                border: `2px solid ${form.explicit ? T.accent : T.border}`,
                background: form.explicit ? T.accent : "transparent",
                display: "flex", alignItems: "center", justifyContent: "center",
                flexShrink: 0,
              }}>
                {form.explicit && <span style={{ fontSize: 11, color: "#000", fontWeight: 700 }}>✓</span>}
              </div>
              <span style={{ fontSize: 14, color: T.textPrimary }}>Track contains explicit content</span>
            </div>
          </div>
        )}

{/* ── STEP 3: Select Playlists ──────────────────────── */}
        {step === 3 && (
          <div>
            <StepLabel number={3} title="Choose Playlists" subtitle="Select curators whose audience fits your sound. You can pick multiple." />
            {errors.playlists && (
              <p style={{ color: T.error, fontSize: 13, marginBottom: 16, padding: "10px 14px", background: "rgba(224,82,82,0.08)", borderRadius: 8, border: `1px solid rgba(224,82,82,0.2)` }}>{errors.playlists}</p>
            )}
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {PLAYLISTS.map(p => (
                <PlaylistCard
                  key={p.id} playlist={p}
                  selected={form.selectedPlaylists.includes(p.id)}
                  onToggle={id => toggleArr("selectedPlaylists", id)}
                />
              ))}
            </div>
            {form.selectedPlaylists.length > 0 && (
              <div style={{
                marginTop: 16, padding: "10px 14px",
                background: T.accentGlow, border: `1px solid ${T.accentDim}`,
                borderRadius: 8, fontSize: 13, color: T.accent,
              }}>
                {form.selectedPlaylists.length} playlist{form.selectedPlaylists.length > 1 ? "s" : ""} selected
              </div>
            )}
          </div>
        )}

{/* ── STEP 4: Pitch ─────────────────────────────────── */}
        {step === 4 && (
          <div>
            <StepLabel number={4} title="Your Pitch" subtitle="Curators read this first. Make it count — be real, not promotional." />
            <Textarea
              label="Pitch to curators"
              placeholder={`Tell curators what this track is about, the story behind it, why it fits their playlist, and anything that makes it stand out. Keep it honest.`}
              value={form.pitch}
              onChange={v => set("pitch", v)}
              maxLength={500}
            />
            {errors.pitch && <p style={{ color: T.error, fontSize: 12, marginTop: -10, marginBottom: 12 }}>{errors.pitch}</p>}
            <Input label="Instagram Handle (optional)" placeholder="@yourhandle" value={form.instagram} onChange={v => set("instagram", v)} />
            <Input label="Press Kit / EPK Link (optional)" placeholder="https://..." value={form.pressLink} onChange={v => set("pressLink", v)} />
            <div style={{
              marginTop: 8, padding: "16px", background: T.surface,
              border: `1px solid ${errors.agreed ? T.error : T.border}`, borderRadius: 8,
              cursor: "pointer", display: "flex", gap: 12, alignItems: "flex-start",
            }} onClick={() => set("agreed", !form.agreed)}>
              <div style={{
                width: 18, height: 18, borderRadius: 4, flexShrink: 0, marginTop: 1,
                border: `2px solid ${form.agreed ? T.accent : T.border}`,
                background: form.agreed ? T.accent : "transparent",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                {form.agreed && <span style={{ fontSize: 11, color: "#000", fontWeight: 700 }}>✓</span>}
              </div>
              <span style={{ fontSize: 13, color: T.textMuted, lineHeight: 1.6 }}>
                I confirm this track is original, properly distributed on Spotify, and I agree to Curatorack's <span style={{ color: T.accent }}>submission terms</span>. I understand placement is not guaranteed.
              </span>
            </div>
            {errors.agreed && <p style={{ color: T.error, fontSize: 12, marginTop: 6 }}>{errors.agreed}</p>}
          </div>
        )}

{/* ── STEP 5: Review & Confirm ──────────────────────── */}
        {step === 5 && (
          <div>
            <StepLabel number={5} title="Review & Confirm" subtitle="Check everything before your submission goes live." />
            <div style={{
              background: T.surface, border: `1px solid ${T.border}`,
              borderRadius: 12, padding: "8px 20px", marginBottom: 24,
            }}>
              <ReviewRow label="Track" value={form.trackName} />
              <ReviewRow label="Artist" value={form.artistName} />
              <ReviewRow label="Spotify URL" value={form.spotifyUrl.length > 40 ? form.spotifyUrl.slice(0, 40) + "..." : form.spotifyUrl} />
              <ReviewRow label="Genres" value={form.genres.join(", ")} />
              <ReviewRow label="Moods" value={form.moods.join(", ")} />
              <ReviewRow label="Language" value={form.language} />
              <ReviewRow label="Explicit" value={form.explicit ? "Yes" : "No"} />
              <ReviewRow label="Playlists" value={selectedPlaylistNames} />
              <ReviewRow label="Pitch" value={form.pitch.length > 80 ? form.pitch.slice(0, 80) + "..." : form.pitch} />
              {form.instagram && <ReviewRow label="Instagram" value={form.instagram} />}
              {form.pressLink && <ReviewRow label="Press Kit" value={form.pressLink.length > 40 ? form.pressLink.slice(0, 40) + "..." : form.pressLink} />}
            </div>
            <div style={{
              padding: "16px 20px", background: T.accentGlow,
              border: `1px solid ${T.accentDim}`, borderRadius: 10,
              fontSize: 14, color: T.textMuted, lineHeight: 1.6,
            }}>
              <span style={{ color: T.accent, fontWeight: 600 }}>One final check:</span>{" "}
              Your track is being submitted to <strong style={{ color: T.textPrimary }}>{form.selectedPlaylists.length} playlist{form.selectedPlaylists.length !== 1 ? "s" : ""}</strong>. Curators will review within 5–7 business days and you'll hear back by email.
            </div>
          </div>
        )}

{/* ── Navigation ──────────────────────────────────────── */}
        <div style={{
          display: "flex", gap: 12, marginTop: 36,
          justifyContent: step === 1 ? "flex-end" : "space-between",
        }}>
          {step > 1 && (
            <button onClick={back} style={{
              padding: "13px 24px", borderRadius: 8,
              border: `1px solid ${T.border}`, background: "transparent",
              color: T.textMuted, cursor: "pointer", fontFamily: "inherit", fontSize: 15,
              transition: "all 0.2s ease",
            }}>← Back</button>
          )}
          <button onClick={next} style={{
            padding: "13px 32px", borderRadius: 8,
            background: step === 5 ? T.spotifyGreen : T.accent,
            border: "none", color: step === 5 ? "#fff" : "#000",
            fontWeight: 700, cursor: "pointer", fontFamily: "inherit", fontSize: 15,
            boxShadow: `0 4px 20px ${step === 5 ? "rgba(29,185,84,0.3)" : T.accentGlow}`,
            transition: "all 0.2s ease",
          }}>
            {step === 5 ? "Confirm & Submit →" : step === 4 ? "Review Submission →" : "Next →"}
          </button>
        </div>
      </div>

{/* Google Fonts */}
      <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
    </div>
  );
}

</head>

<body
    data-theme="default"
    class="group/body bg-background font-body text-xs text-foreground antialiased transition-bg page-register is-not-auth is-auth-page"
>
        
                
    <script>
    (() => {
        const lqdDarkMode = localStorage.getItem("lqdDarkMode");
        const navbarIsShrinked = localStorage.getItem("lqdNavbarShrinked");

document.body.classList.toggle("theme-dark", lqdDarkMode == "true");
        document.body.classList.toggle("theme-light", lqdDarkMode != "true");

if (navbarIsShrinked === "true") {
            document.body.classList.add("navbar-shrinked");
        }
    })();
</script>

<div
    class="lqd-input-container relative"
            >
    
            <label
            class="lqd-input-label flex cursor-pointer items-center gap-2 text-2xs font-medium leading-none text-label mb-3"
            for=email_register
        >
            
            
            <span class="lqd-input-label-txt">
                				Email Address
            </span>

</label>
    
    
    
    
            <input
            id="email_register"
            required="required" class="lqd-input block peer w-full px-4 py-2 border border-input-border bg-input-background text-input-foreground text-base ring-offset-0 transition-colors focus:border-secondary focus:outline-0 focus:ring focus:ring-secondary dark:focus:ring-foreground/10 sm:text-2xs lqd-input-lg h-11"
            name=""
            value=""
                        type=email
            placeholder="your@email.com"
            required="required"
                                                        />

</div>

<div
    class="lqd-input-container relative"
         x-data='{
		type: "password",
		get inputValueVisible() { return this.type !== "password" },
		toggleType() {
			this.type = this.type === "text" ? "password" : "text";
		}
    }'     >
    
            <label
            class="lqd-input-label flex cursor-pointer items-center gap-2 text-2xs font-medium leading-none text-label mb-3"
            for=password_register
        >
            
            
            <span class="lqd-input-label-txt">
                				Password
            </span>

</label>
    
    
            <div class="relative">
    
    
            <input
            id="password_register"
            required="required" class="lqd-input block peer w-full px-4 py-2 border border-input-border bg-input-background text-input-foreground text-base ring-offset-0 transition-colors focus:border-secondary focus:outline-0 focus:ring focus:ring-secondary dark:focus:ring-foreground/10 sm:text-2xs lqd-input-lg h-11"
            name=""
            value=""
             :type="type"             type=password
            placeholder="Your password"
            required="required"
                                                        />

<div
    class="lqd-input-container relative"
         x-data='{
		type: "password",
		get inputValueVisible() { return this.type !== "password" },
		toggleType() {
			this.type = this.type === "text" ? "password" : "text";
		}
    }'     >
    
            <label
            class="lqd-input-label flex cursor-pointer items-center gap-2 text-2xs font-medium leading-none text-label mb-3"
            for=password_confirmation_register
        >
            
            
            <span class="lqd-input-label-txt">
                				Confirm Your Password
            </span>

</label>
    
    
            <div class="relative">
    
    
            <input
            id="password_confirmation_register"
            required="required" class="lqd-input block peer w-full px-4 py-2 border border-input-border bg-input-background text-input-foreground text-base ring-offset-0 transition-colors focus:border-secondary focus:outline-0 focus:ring focus:ring-secondary dark:focus:ring-foreground/10 sm:text-2xs lqd-input-lg h-11"
            name=""
            value=""
             :type="type"             type=password
            placeholder="Password confirmation"
            required="required"
                                                        />

<input
						class="hidden"
						id="recaptcha"
						value="0"
					>
				
				<button
        type="submit"
        class="lqd-btn group inline-flex items-center justify-center gap-1.5 font-medium rounded-button transition-all hover:-translate-y-0.5 hover:shadow-xl disabled:bg-foreground/10 disabled:text-foreground/35 disabled:pointer-events-none lqd-btn-primary bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-primary/10 focus-visible:bg-primary/90 focus-visible:shadow-primary/10 lqd-btn-md py-2 px-4 lqd-btn-hover-none text-sm" id="RegisterFormButton"
    >
        Sign up
    </button>
							</form>
		</div>
		<div class="lqd-auth-form-foot-text mt-10">
		Have an account?
		<a
			class="font-medium text-indigo-600 underline"
			href="https://curatorack.com/login"
		>
			Sign in
		</a>
	</div>
            </div>
        </div>

</div>
                
                            </div>
        </div>
    </div>

<div
    class="lqd-chatbot start-10 bottom-20 lg:bottom-16 fixed z-50"
    data-name="dashboard_chatbot_icon"
>
    
    <button
        class="lqd-chatbot-trigger group relative size-14 cursor-pointer overflow-hidden rounded-full border-none bg-white p-0 text-black shadow-lg dark:!bg-[#1a1d23] dark:!text-white"
        id="chatbot-trigger"
        data-chatbot=""
        type="button"
    >
        <img
            class="h-full w-full overflow-hidden rounded-full object-cover object-center transition-all group-[&.lqd-is-active]:-translate-y-2 group-[&.lqd-is-active]:scale-90 group-[&.lqd-is-active]:opacity-0"
            src="https://curatorack.com/themes/default/assets/img/chatbot-default.png"
            alt=""
        >
        <span
            class="absolute start-0 top-0 inline-flex h-full w-full translate-y-2 scale-90 items-center justify-center opacity-0 transition-all group-[&.lqd-is-active]:translate-y-0 group-[&.lqd-is-active]:scale-100 group-[&.lqd-is-active]:!opacity-100"
        >
            <svg class="size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 9l6 6l6 -6" />
</svg>        </span>
    </button>
    
    <div
        class="lqd-chatbot-chats-wrap start-0 bottom-full invisible absolute !mb-4 flex h-[clamp(50vh,720px,75vh)] w-96 max-w-[85vw] origin-bottom translate-y-2 scale-[0.95] flex-col overflow-hidden !rounded-2xl bg-white/90 text-base font-medium text-black opacity-0 shadow-[0_3px_12px_rgba(0,0,0,0.08)] backdrop-blur-md backdrop-brightness-125 transition-all before:absolute before:inset-x-0 before:-bottom-4 before:h-4 dark:bg-[#1a1d23]/90 dark:!text-white [&.lqd-is-active]:!visible [&.lqd-is-active]:translate-y-0 [&.lqd-is-active]:scale-100 [&.lqd-is-active]:!opacity-100"
        id="chatbot-wrapper"
        style=""
    >
        <div class="flex items-center justify-between gap-3 bg-accent !px-7 !py-5 shadow-[0_4px_28px_rgba(0,0,0,0.3)]">
            <div>
                <h5 class="m-0 text-[18px] font-semibold text-white opacity-70">Default</h5>
                <p class="m-0 text-[13px] leading-tight text-white opacity-70">Support</p>
            </div>
            <div class="ms-auto">
                <button
                    class="inline-flex size-7 items-center justify-center border-none bg-transparent p-0 text-white transition-all hover:scale-110 hover:!opacity-70"
                    id="chatbot-close"
                >
                    <svg class="size-7" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6l-12 12" />
  <path d="M6 6l12 12" />
</svg>                </button>
            </div>
        </div>
        <div
            class="flex grow flex-col"
            id="chatbot-messages"
        >
            <div
                class="chats-container h-60 grow overflow-y-auto !px-6 !py-8 text-xs font-normal leading-5 [&_.chat-content-container]:rounded-2xl [&_.lqd-chat-avatar]:hidden [&_.lqd-chat-user-bubble_.chat-content-container]:bg-accent [&_.lqd-chat-user-bubble_.chat-content-container]:text-accent-foreground">
            </div>
            <form
                class="sticky bottom-0 z-10 flex w-full items-end !gap-2 self-end bg-white/15 !px-5 !py-3 shadow-[0_4px_34px_rgba(0,0,0,0.05)] dark:bg-black/15"
                id="chatbot_form"
            >
                <input
                    id="chatbot_category_id"
                    type="hidden"
                    value=""
                >
                <input
                    id="chatbot_chat_id"
                    type="hidden"
                    value=""
                >
                <input
                    id="chatbot"
                    type="hidden"
                    value="1"
                >