Playful modal

import { ContactPlayful, ContactPlayfulModal } from '@/components/blocks/contact-03'


// A button that opens the form in a modal
<ContactPlayfulModal triggerLabel="Contact us" />


// Control it yourself
<ContactPlayfulModal open={open} onOpenChange={setOpen} />


// Or place the card inline and handle closing yourself
<ContactPlayful onClose={() => setOpen(false)} />


// Swap in your own studio, copy and fields
<ContactPlayful
  title="Let’s talk"
  description="Tell us about your project and we’ll get back to you within a day."
  email="studio@pinwheel.example"
  phone="+44 20 7946 0714"
  fields={[
    { type: 'text', name: 'name', label: 'Your name', autoComplete: 'name' },
    { type: 'email', name: 'email', label: 'Email', autoComplete: 'email' },
    { type: 'tel', name: 'phone', label: 'Phone', autoComplete: 'tel', required: false },
    { type: 'textarea', name: 'message', label: 'Message', minLength: 10 },
  ]}
  onSubmit={async (values) => {
    await fetch('/api/contact', { method: 'POST', body: JSON.stringify(values) })
  }}
  onClose={() => setOpen(false)}
/>