import React, { useState, useEffect } from 'react'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { useToast } from '@/hooks/use-toast'; import { Mail, User, Phone, MapPin, Globe } from 'lucide-react'; interface GeoData { country: string; countryCode: string; dialingCode: string; } const Index = () => { const [geoData, setGeoData] = useState(null); const [loading, setLoading] = useState(true); const [formData, setFormData] = useState({ fullName: '', email: '', telephone: '' }); const { toast } = useToast(); useEffect(() => { fetchGeoData(); }, []); const fetchGeoData = async () => { try { // Using ipapi.co for free IP geolocation const response = await fetch('https://ipapi.co/json/'); const data = await response.json(); setGeoData({ country: data.country_name || 'Unknown', countryCode: data.country_code || 'XX', dialingCode: data.country_calling_code || '+1' }); // Auto-populate dialing code in phone field setFormData(prev => ({ ...prev, telephone: data.country_calling_code || '+1' })); } catch (error) { console.error('Failed to fetch geo data:', error); // Fallback data setGeoData({ country: 'United States', countryCode: 'US', dialingCode: '+1' }); setFormData(prev => ({ ...prev, telephone: '+1' })); } finally { setLoading(false); } }; const handleInputChange = (field: string, value: string) => { setFormData(prev => ({ ...prev, [field]: value })); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!formData.fullName || !formData.email || !formData.telephone) { toast({ title: "Missing Information", description: "Please fill in all fields to continue.", variant: "destructive" }); return; } toast({ title: "Success! 🎉", description: "Your information has been submitted successfully.", }); console.log('Form submitted:', formData); }; return (

{/* Header */}

Welcome

Join our global community

{/* Location Card */} {geoData && (

{geoData.country}

Auto-detected location

{geoData.dialingCode}

)} {/* Form Card */} Get Started

{/* Full Name Field */}

Full Name handleInputChange('fullName', e.target.value)} className="h-12 text-lg border-2 border-gray-200 focus:border-blue-500 rounded-lg transition-colors" />

{/* Email Field */}

Email Address handleInputChange('email', e.target.value)} className="h-12 text-lg border-2 border-gray-200 focus:border-blue-500 rounded-lg transition-colors" />

{/* Telephone Field */}

Phone Number handleInputChange('telephone', e.target.value)} className="h-12 text-lg border-2 border-gray-200 focus:border-blue-500 rounded-lg transition-colors" /> {geoData && (

International code for {geoData.country}: {geoData.dialingCode}

)}

{/* Submit Button */}

{/* Footer */}

Secure and encrypted • Your data is protected

); }; export default Index;