import React, { useState, useCallback } from 'react'; import { motion } from 'framer-motion'; import { assetUrl } from '../lib/assetUrl'; import { Mail, Phone, Clock, ArrowUpRight, Check, ShieldCheck } from 'lucide-react'; import TurnstileCaptcha from './TurnstileCaptcha'; export default function ContactSection({ isMobile, onOpenStrategy }) { const [formData, setFormData] = useState({ name: '', email: '', phone: '', 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(''); }; const handleSubmit = async (e) => { e.preventDefault(); if (!formData.name.trim() || !formData.email.trim() || !formData.message.trim()) { setErrorMsg('Please fill in your Name, Email, and Message.'); return; } if (!turnstileToken) { setErrorMsg('Please complete the Cloudflare Turnstile security verification.'); return; } setIsSubmitting(true); setErrorMsg(''); try { let response = await fetch('/api/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ type: 'contact', name: formData.name, email: formData.email, phone: formData.phone, subject: formData.subject, message: formData.message, turnstileToken }) }); if (!response.ok) { response = await fetch('/api/send', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ type: 'contact', name: formData.name, email: formData.email, phone: formData.phone, subject: formData.subject, message: formData.message, turnstileToken }) }); } const resData = await response.json().catch(() => ({})); if (response.ok && resData.success) { setSubmitted(true); setFormData({ name: '', email: '', phone: '', subject: '', message: '' }); setTurnstileToken(''); } else { 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); } }; const sectionPadding = isMobile ? '3rem 1.25rem' : '5rem 4rem'; return (
{/* Background World Map Vector Pattern */} {/* Top Ambient Glow Effects */}
{/* HERO HEADER AREA */}
Contact{' '} Us We'd love to hear from you. Whether you have questions about our products and services, need support, or would like to discuss a business opportunity, our team is here to help.
{/* SECTION: LET'S START THE CONVERSATION */}
{/* Wave Form Background Overlay behind Contact Us Form Card */}

Let's Start The Conversation

Tell Us About Your Goals, Challenges, Or Project Requirements. Our Team Will Get Back To You Within 24 Hours.

{/* MAIN CONTACT CARD CONTAINER */} {/* Background SVG mesh overlay inside card */}
{/* LEFT SIDE: "How We Can Help?" */}
{/* Blur asset overlay on left section */}

How We Can Help?

    {[ 'Product Demonstrations', 'Technical Support', 'Partnership Opportunities', 'Project Consultations' ].map((item, idx) => (
  • ✓ {item}
    • ))}
{/* RIGHT SIDE: Contact Form */}
{submitted ? (

Message Sent Successfully!

Thank you for reaching out to Cavin Infotech. Our experts will review your details and respond within 24 hours.

) : (
{errorMsg && (
{errorMsg}
)} {/* Row 1: Name & Email */}
e.target.style.borderBottomColor = '#38bdf8'} onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} />
e.target.style.borderBottomColor = '#38bdf8'} onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} />
{/* Row 2: Phone No. (Optional) */}
e.target.style.borderBottomColor = '#38bdf8'} onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} />
{/* Row 3: Subject */}
e.target.style.borderBottomColor = '#38bdf8'} onBlur={(e) => e.target.style.borderBottomColor = 'rgba(255, 255, 255, 0.25)'} />
{/* Row 4: Message */}