---
interface ContactInfo {
    email?: string;
    phone?: string;
    address?: string;
    whatsapp?: string;
    instagram?: string;
    linkedin?: string;
}

interface Props {
    title: string;
    data: ContactInfo;
}

const { title, data } = Astro.props;
---

                    <div>
                        <label class="block text-sm font-bold mb-1">Email</label>
                        <input type="email" class="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[var(--color-primary)] outline-none" placeholder="john@example.com" />
                    </div>
                    <div>
                        <label class="block text-sm font-bold mb-1">Message</label>
                        <textarea rows="4" class="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-[var(--color-primary)] outline-none" placeholder="How can I help you?"></textarea>
                    </div>
                    <button type="button" class="w-full py-3 bg-[var(--color-primary)] text-white font-bold rounded hover:bg-opacity-90 transition-opacity">
                        Send Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>