Add TurnstileCaptcha component and update send API handler

src/components/ContactSection.jsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { assetUrl } from '../lib/assetUrl';
-import { Mail, Phone, Clock, ArrowUpRight, Check } from 'lucide-react';
+import { Mail, Phone, Clock, ArrowUpRight, Check, ShieldCheck } from 'lucide-react';
+import TurnstileCaptcha from './TurnstileCaptcha';
 
 export default function ContactSection({ isMobile, onOpenStrategy }) {
   const [formData, setFormData] = useState({
@@ -11,10 +12,21 @@ export default function ContactSection({ isMobile, onOpenStrategy }) {
     subject: '',
     message: ''
   });
+
+  const [turnstileToken, setTurnstileToken] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const [errorMsg, setErrorMsg] = useState('');
 
+  const handleTurnstileVerify = useCallback((token) => {
+    setTurnstileToken(token);
+    if (errorMsg) setErrorMsg('');
+  }, [errorMsg]);
+
+  const handleTurnstileExpire = useCallback(() => {
+    setTurnstileToken('');
+  }, []);
+
   const handleChange = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
     if (errorMsg) setErrorMsg('');
@@ -27,6 +39,11 @@ export default function ContactSection({ isMobile, onOpenStrategy }) {
       return;
     }
 
+    if (!turnstileToken) {
+      setErrorMsg('Please complete the Cloudflare Turnstile security verification.');
+      return;
+    }
+
     setIsSubmitting(true);
     setErrorMsg('');
 
@@ -40,7 +57,8 @@ export default function ContactSection({ isMobile, onOpenStrategy }) {
           email: formData.email,
           phone: formData.phone,
           subject: formData.subject,
-          message: formData.message
+          message: formData.message,
+          turnstileToken
         })
       });
 
@@ -54,7 +72,8 @@ export default function ContactSection({ isMobile, onOpenStrategy }) {
             email: formData.email,
             phone: formData.phone,
             subject: formData.subject,
-            message: formData.message
+            message: formData.message,
+            turnstileToken
           })
         });
       }
@@ -64,13 +83,15 @@ export default function ContactSection({ isMobile, onOpenStrategy }) {
       if (response.ok && resData.success) {
         setSubmitted(true);
         setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
+        setTurnstileToken('');
       } else {
-        setErrorMsg(resData.error || resData.smtpError || 'Failed to send message. Please check SMTP configuration.');
+        setErrorMsg(resData.error || resData.smtpError || 'Cloudflare Turnstile verification failed. Please try again.');
       }
     } catch (err) {
       console.error('Contact submit error:', err);
       setSubmitted(true);
       setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
+      setTurnstileToken('');
     } finally {
       setIsSubmitting(false);
     }
@@ -543,6 +564,12 @@ export default function ContactSection({ isMobile, onOpenStrategy }) {
                     />
                   </div>
 
+                  {/* Cloudflare Turnstile Security Verification */}
+                  <TurnstileCaptcha 
+                    onVerify={handleTurnstileVerify}
+                    onExpire={handleTurnstileExpire}
+                  />
+
                   {/* Submit Button */}
                   <button
                     type="submit"