<?php
/**
 * Template Name: Giao diện Liên hệ
 * Template Post Type: page
 *
 * @package Theme_An_Phat
 */

get_header(); ?>

<div class="page-hero text-center py-5">
    <div class="container">
        <h1 class="page-title font-heading fw-bold text-white mb-2"><?php the_title(); ?></h1>
        <div class="accent-line mx-auto bg-accent"></div>
        <div class="breadcrumbs mt-3 text-sm text-white-70">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="text-white-70 hover-white text-decoration-none"><?php esc_html_e( 'Trang chủ', 'theme-anphat' ); ?></a>
            <span class="mx-2">/</span>
            <span class="text-white"><?php esc_html_e( 'Liên hệ', 'theme-anphat' ); ?></span>
        </div>
    </div>
</div>

<main id="primary" class="site-main py-5 bg-light text-dark">
    <div class="container">
        <div class="row g-5">
            <!-- Left Side: Contact Information & Google Maps Placeholder -->
            <div class="col-lg-6 scroll-reveal">
                <h3 class="font-heading fw-bold text-primary mb-4"><i class="fa-solid fa-map-location-dot me-2 text-accent"></i><?php esc_html_e( 'THÔNG TIN LIÊN HỆ', 'theme-anphat' ); ?></h3>

                <div class="d-flex flex-column gap-3 mb-4">
                    <!-- Trụ sở chính HCMC -->
                    <div class="bg-white p-4 rounded-4 shadow-sm border">
                        <h4 class="font-heading fw-bold text-primary mb-2"><i class="fa-solid fa-building me-2 text-accent"></i><?php esc_html_e( 'Trụ sở chính (TP.HCM)', 'theme-anphat' ); ?></h4>
                        <p class="text-sm text-muted mb-0">
                            <strong><?php esc_html_e( 'Địa chỉ:', 'theme-anphat' ); ?></strong> <?php echo esc_html( __( 'Số 51 Đường số 24A, P. An Phú, Quận 2, TP. Thủ Đức, TP. Hồ Chí Minh.', 'theme-anphat' ) ); ?><br>
                            <strong><?php esc_html_e( 'Điện thoại:', 'theme-anphat' ); ?></strong> <?php echo esc_html( __( '028 2211 855', 'theme-anphat' ) ); ?><br>
                            <strong><?php esc_html_e( 'Email:', 'theme-anphat' ); ?></strong> <?php echo esc_html( __( 'info@anphatpharma.com', 'theme-anphat' ) ); ?>
                        </p>
                    </div>

                    <!-- Chi nhánh HN -->
                    <div class="bg-white p-4 rounded-4 shadow-sm border">
                        <h4 class="font-heading fw-bold text-primary mb-2"><i class="fa-solid fa-building-flag me-2 text-accent"></i><?php esc_html_e( 'Chi nhánh phía Bắc (Hà Nội)', 'theme-anphat' ); ?></h4>
                        <p class="text-sm text-muted mb-0">
                            <strong><?php esc_html_e( 'Địa chỉ:', 'theme-anphat' ); ?></strong> <?php echo esc_html( __( 'Số 20 Ngõ 29 Mạc Thái Tổ, P. Yên Hòa, Q. Cầu Giấy, TP. Hà Nội.', 'theme-anphat' ) ); ?><br>
                            <strong><?php esc_html_e( 'Điện thoại:', 'theme-anphat' ); ?></strong> <?php echo esc_html( __( '024 6688 999', 'theme-anphat' ) ); ?><br>
                            <strong><?php esc_html_e( 'Email:', 'theme-anphat' ); ?></strong> <?php echo esc_html( __( 'hanoi@anphatpharma.com', 'theme-anphat' ) ); ?>
                        </p>
                    </div>
                </div>

                <!-- Styled Google Maps Placeholder using clean CSS layout -->
                <div class="map-placeholder bg-primary-dark text-white rounded-4 overflow-hidden shadow-sm d-flex flex-column justify-content-center align-items-center p-5 position-relative" style="height: 250px;">
                    <div class="text-center z-index-2">
                        <span class="fs-1 text-accent mb-3 d-block"><i class="fa-solid fa-map-location-dot"></i></span>
                        <h4 class="font-heading fw-bold"><?php esc_html_e( 'BẢN ĐỒ VỊ TRÍ CHI NHÁNH', 'theme-anphat' ); ?></h4>
                        <p class="text-xs text-white-70 mt-1"><?php esc_html_e( 'Trụ sở An Phát Pharma được tích hợp trực quan trên Google Maps vệ tinh.', 'theme-anphat' ); ?></p>
                        <a href="<?php echo esc_url( __( 'https://maps.google.com/?q=51+Duong+so+24A,+An+Phu,+Quan+2,+Thủ+Đức,+Hồ+Chí+Minh', 'theme-anphat' ) ); ?>" target="_blank" class="btn btn-accent btn-sm mt-3 px-4 fw-bold"><?php esc_html_e( 'Mở Google Maps', 'theme-anphat' ); ?><i class="fa-solid fa-up-right-from-square ms-2"></i></a>
                    </div>
                    <div class="position-absolute top-0 start-0 w-100 h-100 opacity-10 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=600&q=80');"></div>
                </div>
            </div>

            <!-- Right Side: AJAX Contact Form -->
            <div class="col-lg-6 scroll-reveal-right">
                <div class="bg-white p-4 p-md-5 rounded-4 shadow border">
                    <h3 class="font-heading fw-bold text-primary text-center mb-3"><?php esc_html_e( 'GỬI TIN NHẮN CHO CHÚNG TÔI', 'theme-anphat' ); ?></h3>
                    <p class="text-xs text-muted text-center mb-4"><?php esc_html_e( 'Mọi thắc mắc của bạn về sản phẩm và phân phối sẽ được chúng tôi giải đáp sớm nhất.', 'theme-anphat' ); ?></p>

                    <form id="contact-form">
                        <div class="form-group">
                            <label class="form-label" for="fullname"><?php esc_html_e( 'Họ và tên', 'theme-anphat' ); ?> *</label>
                            <input type="text" id="fullname" name="fullname" class="form-control" required placeholder="<?php esc_attr_e( 'Nguyễn Văn A', 'theme-anphat' ); ?>">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="email"><?php esc_html_e( 'Địa chỉ Email', 'theme-anphat' ); ?> *</label>
                            <input type="email" id="email" name="email" class="form-control" required placeholder="a@gmail.com">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="phone"><?php esc_html_e( 'Số điện thoại', 'theme-anphat' ); ?></label>
                            <input type="tel" id="phone" name="phone" class="form-control" placeholder="0901234567">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="subject"><?php esc_html_e( 'Tiêu đề tin nhắn', 'theme-anphat' ); ?></label>
                            <input type="text" id="subject" name="subject" class="form-control" placeholder="<?php esc_attr_e( 'Hợp tác kinh doanh, báo giá sản phẩm...', 'theme-anphat' ); ?>">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="message"><?php esc_html_e( 'Nội dung thông điệp', 'theme-anphat' ); ?> *</label>
                            <textarea id="message" name="message" class="form-control" rows="4" required placeholder="<?php esc_attr_e( 'Nhập câu hỏi hoặc yêu cầu chi tiết của bạn tại đây...', 'theme-anphat' ); ?>"></textarea>
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg w-100 fw-bold shadow mt-3"><i class="fa-solid fa-paper-plane me-2"></i><?php esc_html_e( 'Gửi Thông Điệp Liên Hệ', 'theme-anphat' ); ?></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>
