PermaData Captcha

// app/contact/page.tsx
'use client'

import { useState } from 'react'
import { CaptchaCheckbox } from '@permadata/captcha'
import { submitContactForm } from '@/app/actions/contact-form'

export default function ContactPage() {
  const [isCaptchaValid, setIsCaptchaValid] = useState(false)
  const [captchaToken, setCaptchaToken] = useState<string | undefined>(undefined)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [formResponse, setFormResponse] = useState<{ success: boolean; message?: string; error?: string } | null>(null)

  const handleCaptchaValidityChange = (isValid: boolean, token?: string) => {
    setIsCaptchaValid(isValid)
    setCaptchaToken(token)
  }

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    if (!isCaptchaValid || !captchaToken) {
      setFormResponse({
        success: false,
        error: "Please complete the captcha verification",
      })
      return
    }

    setIsSubmitting(true)
    setFormResponse(null)

    try {
      // Get form data
      const formData = new FormData(e.currentTarget)

      // Add captcha token to form data
      formData.append("captcha-token", captchaToken)

      // Submit the form
      const response = await submitContactForm(formData)
      setFormResponse(response)

      // Reset form on success
      if (response.success) {
        e.currentTarget.reset()
        setIsCaptchaValid(false)
        setCaptchaToken(undefined)
      }
    } catch (error) {
      setFormResponse({
        success: false,
        error: "An unexpected error occurred",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className="max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-6">Contact Us</h1>
      
      {formResponse?.success ? (
        <div className="bg-green-50 p-6 rounded-md">
          <h3 className="text-xl font-semibold text-green-800 mb-2">Message Sent!</h3>
          <p className="text-green-700">{formResponse.message}</p>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-6">
          {formResponse?.error && (
            <div className="bg-red-50 p-4 rounded-md">
              <span className="text-red-700">{formResponse.error}</span>
            </div>
          )}

          <div>
            <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
            <input 
              id="name" 
              name="name" 
              type="text" 
              required 
              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
            />
          </div>

          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
            <input 
              id="email" 
              name="email" 
              type="email" 
              required 
              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
            />
          </div>

          <div>
            <label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</label>
            <textarea 
              id="message" 
              name="message" 
              rows={4} 
              required 
              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
            ></textarea>
          </div>

          <div>
            <CaptchaCheckbox onValidityChange={handleCaptchaValidityChange} />
          </div>

          <button
            type="submit"
            className="w-full bg-blue-600 text-white py-2 px-4 rounded-md"
            disabled={isSubmitting || !isCaptchaValid}
          >
            {isSubmitting ? "Sending..." : "Send Message"}
          </button>
        </form>
      )}
    </div>
  )
}

// app/actions/contact-form.ts
'use server'

import { verifyCaptchaToken } from '@permadata/captcha-verify'

export async function submitContactForm(formData: FormData) {
  // Extract the captcha token
  const captchaToken = formData.get("captcha-token") as string

  if (!captchaToken) {
    return { success: false, error: "Captcha verification required" }
  }

  // Verify the captcha token
  try {
    const verifyResult = await verifyCaptchaToken(captchaToken, {
      apiKey: process.env.PERMADATA_API_KEY // Your PermaData API key
    })

    if (!verifyResult.valid) {
      return { success: false, error: verifyResult.error || "Captcha verification failed" }
    }

    // Extract form data
    const name = formData.get("name") as string
    const email = formData.get("email") as string
    const message = formData.get("message") as string

    // Validate form data
    if (!name || !email || !message) {
      return { success: false, error: "All fields are required" }
    }

    // Process the form data (e.g., send email, save to database)
    // This is just a placeholder for your actual implementation
    console.log("Form submission:", { name, email, message })

    // Return success response
    return {
      success: true,
      message: "Thank you for your message! We will get back to you soon.",
    }
  } catch (error) {
    console.error("Error processing form:", error)
    return { success: false, error: "An error occurred while processing your request" }
  }
}