"use client";

import { useSiteSettings } from "@/contexts/SiteSettingsContext";
import { SectionHeader } from "@/components/shared/SectionHeader";

export function ContactSection() {
    const { settings } = useSiteSettings();

    const email   = settings.org_email   || "";
    const phone   = settings.org_phone   || "";
    const address = settings.org_address || "";

    if (!email && !phone && !address) return null;

    return (
        <section id="contact" className="bg-gray-100 py-12 px-4 text-center">
            <SectionHeader title="Contact Us" />
            {email && (
                <p className="text-gray-700 mb-2">
                    📧{" "}
                    <a href={`mailto:${email}`} className="hover:underline">
                        {email}
                    </a>
                </p>
            )}
            {phone && (
                <p className="text-gray-700 mb-2">
                    📞{" "}
                    <a href={`tel:${phone}`} className="hover:underline">
                        {phone}
                    </a>
                </p>
            )}
            {address && (
                <p className="text-gray-700">
                    📍 {address}
                </p>
            )}
        </section>
    );
}