<?php
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
/**
 * Template Name: Contact Page
 * 
 * The template for displaying the contact page.
 * Content should be added via the WordPress editor (use a contact form plugin).
 */

get_header(); ?>

<main id="primary-content" class="pawfect-main pawfect-bg-gray-50" tabindex="-1">
    <?php while (have_posts()): the_post(); 
        // Fetch Customizer Options
        $map_url = get_theme_mod('pawfect_contact_map_url', '');
        $form_shortcode = get_theme_mod('pawfect_contact_form_shortcode', '');
        $address = get_theme_mod('pawfect_contact_address', '');
        $phone = get_theme_mod('pawfect_contact_phone', '');
        $email = get_theme_mod('pawfect_contact_email', '');
        $working_hours = get_theme_mod('pawfect_contact_working_hours', '');
    ?>
        
        <!-- Page Header -->
        <?php get_template_part('template-parts/page-header'); ?>
        
        <!-- Contact Content -->
        <div class="pawfect-py-20">
            <div class="pawfect-container pawfect-mx-auto pawfect-px-4">
                
                <?php if ( get_the_content() ) : ?>
                <div class="pawfect-max-w-4xl pawfect-mx-auto pawfect-mb-12">
                    <div class="pawfect-text-pawfect-text pawfect-space-y-6 pawfect-text-lg pawfect-leading-relaxed pawfect-text-gray-600 pawfect-bg-white pawfect-p-8 pawfect-rounded-2xl pawfect-shadow-sm pawfect-border pawfect-border-gray-100">
                        <?php the_content(); ?>
                    </div>
                </div>
                <?php endif; ?>

                <div class="pawfect-grid pawfect-grid-cols-1 lg:pawfect-grid-cols-3 pawfect-gap-12">
                    
                    <!-- Contact Info Sidebar -->
                    <div class="lg:pawfect-col-span-1 pawfect-space-y-8">
                        <?php if ( $address || $phone || $email || $working_hours ) : ?>
                            <div class="pawfect-bg-white pawfect-p-8 pawfect-rounded-2xl pawfect-shadow-lg pawfect-border pawfect-border-gray-100 pawfect-relative pawfect-overflow-hidden">
                                <div class="pawfect-absolute pawfect-top-0 pawfect-right-0 pawfect-w-32 pawfect-h-32 pawfect-bg-pawfect-primary pawfect-opacity-5 pawfect-rounded-bl-full"></div>
                                
                                <h3 class="pawfect-text-2xl pawfect-font-bold pawfect-mb-8 pawfect-text-gray-900"><?php esc_html_e('Get In Touch', 'pawfect'); ?></h3>
                                
                                <ul class="pawfect-space-y-6 pawfect-relative pawfect-z-10">
                                    <?php if ( $address ) : ?>
                                        <li class="pawfect-flex pawfect-items-start">
                                            <div class="pawfect-flex-shrink-0 pawfect-w-12 pawfect-h-12 pawfect-bg-pawfect-primary pawfect-bg-opacity-10 pawfect-text-pawfect-primary pawfect-rounded-full pawfect-flex pawfect-items-center pawfect-justify-center pawfect-mr-4 pawfect-transition-transform pawfect-duration-300 hover:pawfect-scale-110">
                                                <i class="fa fa-map-marker pawfect-text-xl"></i>
                                            </div>
                                            <div>
                                                <h4 class="pawfect-font-semibold pawfect-text-gray-900 pawfect-mb-1"><?php esc_html_e('Address', 'pawfect'); ?></h4>
                                                <p class="pawfect-text-gray-600 pawfect-text-sm pawfect-leading-relaxed"><?php echo nl2br(esc_html($address)); ?></p>
                                            </div>
                                        </li>
                                    <?php endif; ?>

                                    <?php if ( $phone ) : ?>
                                        <li class="pawfect-flex pawfect-items-start">
                                            <div class="pawfect-flex-shrink-0 pawfect-w-12 pawfect-h-12 pawfect-bg-pawfect-primary pawfect-bg-opacity-10 pawfect-text-pawfect-primary pawfect-rounded-full pawfect-flex pawfect-items-center pawfect-justify-center pawfect-mr-4 pawfect-transition-transform pawfect-duration-300 hover:pawfect-scale-110">
                                                <i class="fa fa-phone pawfect-text-xl"></i>
                                            </div>
                                            <div>
                                                <h4 class="pawfect-font-semibold pawfect-text-gray-900 pawfect-mb-1"><?php esc_html_e('Phone', 'pawfect'); ?></h4>
                                                <p class="pawfect-text-gray-600 pawfect-text-sm"><a href="tel:<?php echo esc_attr(preg_replace('/[^0-9+]/', '', $phone)); ?>" class="hover:pawfect-text-pawfect-primary pawfect-transition-colors"><?php echo esc_html($phone); ?></a></p>
                                            </div>
                                        </li>
                                    <?php endif; ?>

                                    <?php if ( $email ) : ?>
                                        <li class="pawfect-flex pawfect-items-start">
                                            <div class="pawfect-flex-shrink-0 pawfect-w-12 pawfect-h-12 pawfect-bg-pawfect-primary pawfect-bg-opacity-10 pawfect-text-pawfect-primary pawfect-rounded-full pawfect-flex pawfect-items-center pawfect-justify-center pawfect-mr-4 pawfect-transition-transform pawfect-duration-300 hover:pawfect-scale-110">
                                                <i class="fa fa-envelope pawfect-text-xl"></i>
                                            </div>
                                            <div>
                                                <h4 class="pawfect-font-semibold pawfect-text-gray-900 pawfect-mb-1"><?php esc_html_e('Email', 'pawfect'); ?></h4>
                                                <p class="pawfect-text-gray-600 pawfect-text-sm"><a href="mailto:<?php echo esc_attr($email); ?>" class="hover:pawfect-text-pawfect-primary pawfect-transition-colors"><?php echo esc_html($email); ?></a></p>
                                            </div>
                                        </li>
                                    <?php endif; ?>

                                    <?php if ( $working_hours ) : ?>
                                        <li class="pawfect-flex pawfect-items-start">
                                            <div class="pawfect-flex-shrink-0 pawfect-w-12 pawfect-h-12 pawfect-bg-pawfect-primary pawfect-bg-opacity-10 pawfect-text-pawfect-primary pawfect-rounded-full pawfect-flex pawfect-items-center pawfect-justify-center pawfect-mr-4 pawfect-transition-transform pawfect-duration-300 hover:pawfect-scale-110">
                                                <i class="fa fa-clock-o pawfect-text-xl"></i>
                                            </div>
                                            <div>
                                                <h4 class="pawfect-font-semibold pawfect-text-gray-900 pawfect-mb-1"><?php esc_html_e('Working Hours', 'pawfect'); ?></h4>
                                                <p class="pawfect-text-gray-600 pawfect-text-sm pawfect-leading-relaxed"><?php echo nl2br(esc_html($working_hours)); ?></p>
                                            </div>
                                        </li>
                                    <?php endif; ?>
                                </ul>
                            </div>
                        <?php endif; ?>
                    </div>

                    <!-- Contact Form Area -->
                    <div class="lg:pawfect-col-span-2">
                        <?php if ( $form_shortcode ) : ?>
                            <div class="pawfect-bg-white pawfect-p-8 sm:pawfect-p-10 pawfect-rounded-2xl pawfect-shadow-xl pawfect-border pawfect-border-gray-50 pawfect-h-full">
                                <h3 class="pawfect-text-2xl pawfect-font-bold pawfect-mb-6 pawfect-text-gray-900"><?php esc_html_e('Send Us a Message', 'pawfect'); ?></h3>
                                <div class="pawfect-contact-form-wrapper">
                                    <?php echo do_shortcode($form_shortcode); ?>
                                </div>
                            </div>
                        <?php else : ?>
                            <div class="pawfect-bg-white pawfect-p-10 pawfect-rounded-2xl pawfect-shadow-md pawfect-border pawfect-border-gray-100 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-h-full">
                                <p class="pawfect-text-gray-500 pawfect-text-center">
                                    <?php esc_html_e('Please configure the contact form shortcode in the Customizer.', 'pawfect'); ?>
                                </p>
                            </div>
                        <?php endif; ?>
                    </div>

                </div>
            </div>
        </div>

        <!-- Full Width Map -->
        <?php if ( $map_url ) : ?>
            <div class="pawfect-contact-map pawfect-w-full pawfect-h-[400px] sm:pawfect-h-[500px] pawfect-filter pawfect-grayscale hover:pawfect-grayscale-0 pawfect-transition-all pawfect-duration-700">
                <iframe src="<?php echo esc_url($map_url); ?>" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        <?php endif; ?>

    <?php endwhile; ?>
</main>

<?php get_footer(); ?>
