"use client"; import { useState } from "react"; import { Box, Button, CloseButton, Dialog, Field, Flex, HStack, Heading, Input, Portal, SimpleGrid, Stack, Text, Textarea } from "@chakra-ui/react"; import { Icon } from "@obelisk/blocks"; const STEPS = [ { key: "site", label: "Je site", description: "Naam en type site" }, { key: "goal", label: "Doel", description: "Wat de site moet bereiken" }, { key: "style", label: "Stijl", description: "Sfeer en kleuren" }, { key: "contact", label: "Contact", description: "Waar je de link ontvangt" }, ]; const INDUSTRIES = [ { value: "Bedrijfswebsite", label: "Bedrijfswebsite", icon: "fa-solid fa-building" }, { value: "Webshop", label: "Webshop", icon: "fa-solid fa-cart-shopping" }, { value: "Portfolio", label: "Portfolio", icon: "fa-solid fa-briefcase" }, { value: "Blog of magazine", label: "Blog of magazine", icon: "fa-solid fa-newspaper" }, { value: "Vereniging of stichting", label: "Vereniging", icon: "fa-solid fa-people-group" }, { value: "Horeca", label: "Horeca", icon: "fa-solid fa-utensils" }, { value: "Zorg & wellness", label: "Zorg & wellness", icon: "fa-solid fa-heart-pulse" }, { value: "Vastgoed", label: "Vastgoed", icon: "fa-solid fa-house" }, { value: "Anders", label: "Anders", icon: "fa-solid fa-ellipsis" }, ]; const STYLES = [ { value: "premium-frontend-ui", label: "Premium & luxe", hint: "Zachte schaduwen, ruime witruimte, hoogwaardig gevoel", bg: "#18130f", fg: "#f3ead9", swatches: ["#c9a24c", "#f3ead9", "#18130f"], fontFamily: "'PP Editorial New', Georgia, serif", fontWeight: "400", }, { value: "minimalist-ui", label: "Minimalistisch & clean", hint: "Rustig, redactioneel, veel focus op inhoud", bg: "#fafafa", fg: "#111111", swatches: ["#111111", "#9c9c9c", "#ffffff"], fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontWeight: "300", }, { value: "industrial-brutalist-ui", label: "Robuust & industrieel", hint: "Strak, hoekig, krachtige typografie", bg: "#232323", fg: "#f2f2f2", swatches: ["#ff4d1c", "#f2f2f2", "#6b6b6b"], fontFamily: "'Geist Mono', 'Courier New', monospace", fontWeight: "700", }, { value: "", label: "Geen voorkeur", hint: "Laat de AI-assistent kiezen wat past", bg: null, fg: null, swatches: [], fontFamily: null, fontWeight: null, }, ]; export default function DemoAanvraag({ title = "Probeer Obelisk zelf met je eigen site", subtitle = "Beantwoord een paar korte vragen, de AI-assistent zet je site op en daarna ga je er zelf mee aan de slag.", dialog = false, triggerLabel = "Probeer het zelf", triggerVariant = "solid", triggerSize = "md", }) { const [step, setStep] = useState(0); const [form, setForm] = useState({ name: "", industry: "", goal: "", audience: "", style: "premium-frontend-ui", colors: "", color_scheme: "light", email: "", }); const [hp, setHp] = useState(""); const [submitting, setSubmitting] = useState(false); const [errors, setErrors] = useState({}); const [result, setResult] = useState(null); const patch = (fields) => setForm((f) => ({ ...f, ...fields })); function validateStep(index) { const stepErrors = {}; if (index === 0 && !form.name.trim()) { stepErrors.name = "Vul een bedrijfs- of sitenaam in."; } if (index === 1 && !form.goal.trim()) { stepErrors.goal = "Vertel kort wat de site moet bereiken."; } if (index === 3) { if (!form.email.trim()) { stepErrors.email = "Vul een e-mailadres in."; } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) { stepErrors.email = "Vul een geldig e-mailadres in."; } } setErrors(stepErrors); return Object.keys(stepErrors).length === 0; } function next() { if (validateStep(step)) setStep((s) => Math.min(s + 1, STEPS.length - 1)); } function prev() { setErrors({}); setStep((s) => Math.max(s - 1, 0)); } async function handleSubmit(event) { event.preventDefault(); if (submitting) return; if (!validateStep(step)) return; setSubmitting(true); try { const res = await fetch("/api/cms/demo/request/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...form, _hp: hp }), }); const body = await res.json().catch(() => null); if (res.ok && body?.success) { setResult(body); } else if (body?.errors) { setErrors(body.errors); if (body.errors.name || body.errors.industry) setStep(0); else if (body.errors.goal || body.errors.audience) setStep(1); else if (body.errors.colors) setStep(2); } else { setErrors({ form: "Er ging iets mis bij het versturen. Probeer het over een moment opnieuw." }); } } catch { setErrors({ form: "We konden je gegevens niet versturen. Controleer je verbinding en probeer het opnieuw." }); } finally { setSubmitting(false); } } const isLast = step === STEPS.length - 1; const stepFields = step === 0 ? ( Bedrijfs- of sitenaam patch({ name: e.target.value })} placeholder="Bakkerij Jansen" autoComplete="organization" /> {errors.name ? {errors.name} : null} Wat voor site wordt het? {INDUSTRIES.map((option) => { const selected = form.industry === option.value; return ( patch({ industry: option.value })} display="flex" flexDirection="column" alignItems="center" justifyContent="center" gap="2" textAlign="center" h="120px" px="2" borderRadius="l3" borderWidth="2px" borderColor={selected ? "theme.accent" : "theme.border"} bg={selected ? "theme.bg.subtle" : "theme.bg"} color={selected ? "theme.accent" : "theme.fg.muted"} transition="all 0.2s cubic-bezier(0.32, 0.72, 0, 1)" cursor="pointer" > {option.label} ); })} ) : step === 1 ? ( Wat moet de site bereiken?

patch({ goal: e.target.value })}
          placeholder="Bijv. meer bestellingen, nieuwe leden werven, ons werk laten zien..."
        />
        {errors.goal ? <Field.ErrorText>{errors.goal}</Field.ErrorText> : null}
      </Field.Root>
      <Field.Root>
        <Field.Label>Voor wie is de site bedoeld?</Field.Label>
        <Input
          size="lg"
          value={form.audience}
          onChange={(e) => patch({ audience: e.target.value })}
          placeholder="Bijv. buurtbewoners, jonge gezinnen, zakelijke klanten"
        />
      </Field.Root>
    </Stack>
  ) : step === 2 ? (
    <Stack gap="5">
      <Field.Root>
        <Field.Label>Welke stijl past bij jullie?</Field.Label>
        <SimpleGrid columns={{ base: 1, md: 2 }} gap="3" w="full">
          {STYLES.map((option) => (
            <Box
              key={option.value || "none"}
              as="button"
              type="button"
              onClick={() => patch({ style: option.value })}
              textAlign="left"
              overflow="hidden"
              borderRadius="l3"
              borderWidth="2px"
              borderColor={form.style === option.value ? "theme.accent" : "theme.border"}
              bg={form.style === option.value ? "theme.bg.subtle" : "theme.bg"}
              transition="border-color 0.3s cubic-bezier(0.32, 0.72, 0, 1)"
              cursor="pointer"
            >
              {option.bg ? (
                <Flex h="28" direction="column" align="center" justify="center" gap="3" bg={option.bg}>
                  <Text
                    fontFamily={option.fontFamily}
                    fontWeight={option.fontWeight}
                    fontSize="4xl"
                    lineHeight="1"
                    color={option.fg}
                  >
                    Aa
                  </Text>
                  <HStack gap="1.5">
                    {option.swatches.map((c) => (
                      <Box key={c} boxSize="4" borderRadius="full" bg={c} borderWidth="1px" borderColor="whiteAlpha.400" />
                    ))}
                  </HStack>
                </Flex>
              ) : (
                <Flex h="28" align="center" justify="center" bg="theme.bg.subtle" color="theme.fg.muted">
                  <Icon icon="fa-solid fa-wand-magic-sparkles" />
                </Flex>
              )}
              <Box p="4">
                <Text fontWeight="semibold">{option.label}</Text>
                <Text fontSize="sm" color="theme.fg.muted">{option.hint}</Text>
              </Box>
            </Box>
          ))}
        </SimpleGrid>
      </Field.Root>
      <Field.Root invalid={Boolean(errors.colors)}>
        <Field.Label>Kleurvoorkeur</Field.Label>
        <Input
          size="lg"
          value={form.colors}
          onChange={(e) => patch({ colors: e.target.value })}
          placeholder="Bijv. diep groen met goud, of onze huisstijlkleuren"
        />
        {errors.colors ? <Field.ErrorText>{errors.colors}</Field.ErrorText> : null}
      </Field.Root>
      <Field.Root>
        <Field.Label>Licht of donker?</Field.Label>
        <HStack gap="2">
          <Button
            type="button"
            size="sm"
            variant={form.color_scheme === "light" ? "solid" : "outline"}
            onClick={() => patch({ color_scheme: "light" })}
          >
            <Icon icon="fa-solid fa-sun" /> Licht
          </Button>
          <Button
            type="button"
            size="sm"
            variant={form.color_scheme === "dark" ? "solid" : "outline"}
            onClick={() => patch({ color_scheme: "dark" })}
          >
            <Icon icon="fa-solid fa-moon" /> Donker
          </Button>
        </HStack>
      </Field.Root>
    </Stack>
  ) : (
    <Stack gap="4">
      <Field.Root invalid={Boolean(errors.email)} required>
        <Field.Label>E-mailadres</Field.Label>
        <Input
          size="lg"
          type="email"
          value={form.email}
          onChange={(e) => patch({ email: e.target.value })}
          placeholder="naam@bedrijf.nl"
          autoComplete="email"
        />
        {errors.email ? <Field.ErrorText>{errors.email}</Field.ErrorText> : null}
      </Field.Root>
      <Text fontSize="sm" color="theme.fg.muted">
        De AI-assistent zet je site op basis van je antwoorden op. Zodra
        die klaar is, krijg je een e-mail met de link en ga je er zelf mee
        aan de slag — gratis en zonder verplichtingen.
      </Text>
      <Box position="absolute" left="-9999px" aria-hidden="true">
        <Input
          tabIndex={-1}
          autoComplete="off"
          value={hp}
          onChange={(e) => setHp(e.target.value)}
          name="_hp"
        />
      </Box>
    </Stack>
  );

const body = result ? (
    <MotionBox
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }}
      maxW="xl"
      mx="auto"
    >
      <Stack gap="5" align="center" textAlign="center">
        <Flex w="12" h="12" align="center" justify="center" borderRadius="full" bg="theme.accent" color="theme.accent.fg">
          <Icon icon="fa-solid fa-wand-magic-sparkles" />
        </Flex>
        <Heading as="h3" size="xl" lineHeight="1.2" textWrap="balance">
          Je site wordt opgezet
        </Heading>
        <Text color="theme.fg.muted" maxW="48ch">
          {result.message}
        </Text>
        <HStack
          color="theme.fg.muted"
          fontSize="sm"
          borderWidth="1px"
          borderColor="theme.border"
          borderRadius="full"
          px="4"
          py="2"
        >
          <Icon icon="fa-solid fa-envelope" />
          <Text>De link komt naar {form.email}</Text>
        </HStack>
      </Stack>
    </MotionBox>
  ) : (
    <Box
      as="form"
      onSubmit={handleSubmit}
      display="grid"
      gridTemplateColumns={{ base: "1fr", lg: "300px 1fr" }}
      gap={{ base: 10, lg: 16 }}
      w="full"
    >
      <Stack gap="8">
        <Stack gap="3">
          <HStack gap="2" color="theme.accent">
            <Box w="1.5" h="1.5" borderRadius="full" bg="theme.accent" />
            <Text fontSize="xs" fontWeight="semibold" textTransform="uppercase" letterSpacing="0.2em">
              Gratis · zelf proberen
            </Text>
          </HStack>
          <Heading as="h2" size="3xl" lineHeight="1.2" letterSpacing="-0.02em" textWrap="balance">
            {title}
          </Heading>
          <Text color="theme.fg.muted">
            {subtitle}
          </Text>
        </Stack>

<Stack gap="0" display={{ base: "none", lg: "flex" }}>
          {STEPS.map((s, i) => {
            const done = i < step;
            const active = i === step;
            return (
              <HStack key={s.key} align="stretch" gap="4">
                <Stack align="center" gap="0">
                  <Flex
                    flexShrink="0"
                    w="9"
                    h="9"
                    align="center"
                    justify="center"
                    borderRadius="full"
                    borderWidth="2px"
                    borderColor={done || active ? "theme.accent" : "theme.border"}
                    bg={done ? "theme.accent" : "theme.bg"}
                    color={done ? "theme.accent.fg" : active ? "theme.accent" : "theme.fg.muted"}
                    fontSize="xs"
                    fontWeight="semibold"
                    transition="all 0.3s cubic-bezier(0.32, 0.72, 0, 1)"
                  >
                    {done ? <Icon icon="fa-solid fa-check" /> : `0${i + 1}`}
                  </Flex>
                  {i < STEPS.length - 1 ? (
                    <Box w="2px" flex="1" minH="8" bg={done ? "theme.accent" : "theme.border"} transition="background 0.3s" />
                  ) : null}
                </Stack>
                <Stack gap="0" pb="6">
                  <Text fontWeight="semibold" color={active ? "theme.fg" : "theme.fg.muted"}>
                    {s.label}
                  </Text>
                  <Text fontSize="sm" color="theme.fg.muted">
                    {s.description}
                  </Text>
                </Stack>
              </HStack>
            );
          })}
        </Stack>

<Stack gap="2" display={{ base: "flex", lg: "none" }}>
          <Text fontSize="xs" fontWeight="semibold" textTransform="uppercase" letterSpacing="0.15em" color="theme.fg.muted">
            Stap {step + 1} van {STEPS.length} — {STEPS[step].label}
          </Text>
          <HStack gap="1.5">
            {STEPS.map((s, i) => (
              <Box
                key={s.key}
                flex="1"
                h="1"
                borderRadius="full"
                bg={i <= step ? "theme.accent" : "theme.border"}
                transition="background 0.4s cubic-bezier(0.32, 0.72, 0, 1)"
              />
            ))}
          </HStack>
        </Stack>
      </Stack>

<Stack gap="8">
        <AnimatePresence mode="wait">
          <MotionBox
            key={step}
            initial={{ opacity: 0, x: 16 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -16 }}
            transition={{ duration: 0.35, ease: [0.32, 0.72, 0, 1] }}
          >
            {stepFields}
          </MotionBox>
        </AnimatePresence>

{errors.form ? (
          <Text color="red.500" fontSize="sm">
            {errors.form}
          </Text>
        ) : null}

<Flex justify="space-between" align="center" pt="6" borderTopWidth="1px" borderColor="theme.border">
          {step > 0 ? (
            <Button type="button" variant="ghost" onClick={prev}>
              <Icon icon="fa-solid fa-arrow-left" /> Vorige
            </Button>
          ) : (
            <Box />
          )}
          {isLast ? (
            <Button type="submit" size="lg" px="8" loading={submitting} _active={{ transform: "scale(0.98)" }}>
              Mijn site opzetten
              <Icon icon="fa-solid fa-wand-magic-sparkles" />
            </Button>
          ) : (
            <Button type="button" size="lg" px="8" onClick={next} _active={{ transform: "scale(0.98)" }}>
              Volgende
              <Icon icon="fa-solid fa-arrow-right" />
            </Button>
          )}
        </Flex>
      </Stack>
    </Box>
  );

if (!dialog) {
    return body;
  }

return (
    <Dialog.Root size="cover" motionPreset="slide-in-bottom">
      <Dialog.Trigger asChild>
        <Button variant={triggerVariant} size={triggerSize}>
          {triggerLabel}
        </Button>
      </Dialog.Trigger>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content bg="theme.bg">
            <Dialog.CloseTrigger asChild>
              <CloseButton size="lg" />
            </Dialog.CloseTrigger>
            <Dialog.Body
              display="flex"
              alignItems="center"
              justifyContent="center"
              overflowY="auto"
              py={{ base: 8, md: 12 }}
              px={{ base: 4, md: 8 }}
            >
              <Box w="full" maxW="4xl">
                {body}
              </Box>
            </Dialog.Body>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  );
}

export function Preview() {
  return <DemoAanvraag />;
}</article></body></html>

Isabelle de Castel

Try Obelisk yourself