<?php
/**
 * Template Name: Giới thiệu Đa năng
 * 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( 'Giới thiệu', 'theme-anphat' ); ?></span>
        </div>
    </div>
</div>

<main id="primary" class="site-main py-5 bg-white text-dark">
    <div class="container">
        <div class="row g-5 gioi-thieu-layout">
            <!-- Sidebar Navigation Links for Giới thiệu sub-pages -->
            <div class="col-md-4 col-xl-3 scroll-reveal">
                <div class="gioi-thieu-sidebar bg-light p-4 rounded-4 shadow-sm border">
                    <h3 class="font-heading fw-bold text-primary fs-5 mb-3 pb-2 border-bottom"><i class="fa-solid fa-list-check me-2 text-accent"></i><?php esc_html_e( 'CHUYÊN MỤC', 'theme-anphat' ); ?></h3>
                    <ul class="gioi-thieu-sidebar-list d-flex flex-column gap-2 list-unstyled mb-0 font-heading fw-semibold">
                        <?php
                        $gioi_thieu_parent = get_page_by_path('gioi-thieu');
                        if ( $gioi_thieu_parent ) {
                            $subpages = get_pages( array(
                                'child_of' => $gioi_thieu_parent->ID,
                                'sort_column' => 'menu_order'
                            ) );

                            // Parent item link
                            $active_class = is_page('gioi-thieu') ? 'text-primary bg-primary-light border-start border-primary border-4' : 'text-dark hover-primary';
                            echo '<li><a href="' . esc_url( get_permalink( $gioi_thieu_parent->ID ) ) . '" class="d-block p-2 rounded text-decoration-none ' . $active_class . '">' . __( 'Tổng Quan', 'theme-anphat' ) . '</a></li>';

                            foreach ( $subpages as $subpage ) {
                                $active_class = is_page( $subpage->ID ) ? 'text-primary bg-primary-light border-start border-primary border-4' : 'text-dark hover-primary';
                                echo '<li><a href="' . esc_url( get_permalink( $subpage->ID ) ) . '" class="d-block p-2 rounded text-decoration-none ' . $active_class . '">' . esc_html( $subpage->post_title ) . '</a></li>';
                            }
                        }
                        ?>
                    </ul>
                </div>
            </div>

            <!-- Main Content Area -->
            <div class="col-md-8 col-xl-9 scroll-reveal-right">
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <div class="entry-content lh-lg">
                        
                        <?php the_content(); ?>

                        <!-- Sub-page specific rendering -->
                        <?php
                        global $post;
                        $slug = $post->post_name;

                        // 1. TIMELINE - Hình thành và Phát triển
                        if ( $slug === 'hinh-thanh-va-phat-trien' ) :
                            ?>
                            <div class="timeline-wrapper mt-5 pt-4 border-top">
                                <h3 class="font-heading fw-bold text-primary mb-4"><i class="fa-solid fa-timeline me-2 text-accent"></i><?php esc_html_e( 'CÁC CỘT MỐC LỊCH SỬ', 'theme-anphat' ); ?></h3>
                                <div class="timeline">
                                    <div class="timeline-item">
                                        <span class="timeline-dot"></span>
                                        <div class="timeline-content bg-light p-3 rounded shadow-sm">
                                            <h4 class="font-heading fw-bold text-primary"><?php esc_html_e( 'Năm 2016: Khởi nghiệp & Xác lập nền móng', 'theme-anphat' ); ?></h4>
                                            <p class="text-sm text-muted mb-0"><?php esc_html_e( 'Công ty Cổ Phần Dược Phẩm An Phát chính thức được thành lập với mục tiêu cung cấp dòng sản phẩm y tế ngoại nhập tốt nhất.', 'theme-anphat' ); ?></p>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <span class="timeline-dot"></span>
                                        <div class="timeline-content bg-light p-3 rounded shadow-sm">
                                            <h4 class="font-heading fw-bold text-primary"><?php esc_html_e( 'Năm 2019: Đạt chuẩn GSP & GDP quốc gia', 'theme-anphat' ); ?></h4>
                                            <p class="text-sm text-muted mb-0"><?php esc_html_e( 'Đầu tư hệ thống kho bãi hiện đại chuẩn quốc tế GDP & GSP, thành lập chi nhánh giao vận chuyên nghiệp tại miền Bắc (Hà Nội).', 'theme-anphat' ); ?></p>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <span class="timeline-dot"></span>
                                        <div class="timeline-content bg-light p-3 rounded shadow-sm">
                                            <h4 class="font-heading fw-bold text-primary"><?php esc_html_e( 'Năm 2022: Top 10 Thương hiệu Dược Phẩm Việt Nam', 'theme-anphat' ); ?></h4>
                                            <p class="text-sm text-muted mb-0"><?php esc_html_e( 'Liên kết toàn diện với tập đoàn Getz Pharma quốc tế phân phối độc quyền dòng thuốc tim mạch chuyên sâu, đạt doanh thu và mạng lưới kỷ lục.', 'theme-anphat' ); ?></p>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <span class="timeline-dot"></span>
                                        <div class="timeline-content bg-light p-3 rounded shadow-sm">
                                            <h4 class="font-heading fw-bold text-primary"><?php esc_html_e( 'Năm 2026: Nâng tầm chuỗi cung ứng vắc xin lạnh', 'theme-anphat' ); ?></h4>
                                            <p class="text-sm text-muted mb-0"><?php esc_html_e( 'Hiện đại hóa quy trình chuyển phát vắc xin sinh phẩm lạnh chuẩn GMP-WHO toàn diện trên toàn lãnh thổ Việt Nam.', 'theme-anphat' ); ?></p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row g-4 mt-5 pt-4 border-top">
                                <div class="col-md-4">
                                    <div class="about-card bg-light p-4 rounded-4 shadow-sm h-100 border text-center">
                                        <span class="fs-1 text-primary"><i class="fa-solid fa-eye"></i></span>
                                        <h4 class="font-heading fw-bold text-primary mt-3"><?php esc_html_e( 'TẦM NHÌN', 'theme-anphat' ); ?></h4>
                                        <p class="text-sm text-muted mt-2"><?php esc_html_e( 'Trở thành công ty phân phối và cung ứng dược phẩm, thiết bị y tế chuyên nghiệp hàng đầu tại Việt Nam, mang tiêu chuẩn y tế quốc tế phục vụ người bệnh.', 'theme-anphat' ); ?></p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="about-card bg-light p-4 rounded-4 shadow-sm h-100 border text-center">
                                        <span class="fs-1 text-primary"><i class="fa-solid fa-heart-pulse"></i></span>
                                        <h4 class="font-heading fw-bold text-primary mt-3"><?php esc_html_e( 'SỨ MỆNH', 'theme-anphat' ); ?></h4>
                                        <p class="text-sm text-muted mt-2"><?php esc_html_e( 'Đem lại cuộc sống khỏe mạnh và hạnh phúc hơn cho cộng đồng thông qua những sản phẩm dược phẩm chất lượng an toàn tuyệt đối với chi phí hợp lý nhất.', 'theme-anphat' ); ?></p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="about-card bg-light p-4 rounded-4 shadow-sm h-100 border text-center">
                                        <span class="fs-1 text-primary"><i class="fa-solid fa-shield-halved"></i></span>
                                        <h4 class="font-heading fw-bold text-primary mt-3"><?php esc_html_e( 'GIÁ TRỊ CỐT LÕI', 'theme-anphat' ); ?></h4>
                                        <p class="text-sm text-muted mt-2"><?php esc_html_e( 'Chất lượng hàng đầu (Quality), Uy tín tối thượng (Trust), Hợp tác bền vững (Partnership) và Trách nhiệm xã hội (Responsibility).', 'theme-anphat' ); ?></p>
                                    </div>
                                </div>
                            </div>

                            <div class="org-chart-wrapper mt-5 pt-4 border-top">
                                <h3 class="font-heading fw-bold text-primary mb-4"><i class="fa-solid fa-sitemap me-2 text-accent"></i><?php esc_html_e( 'SƠ ĐỒ TỔ CHỨC CÔNG TY', 'theme-anphat' ); ?></h3>
                                <div class="d-flex flex-column gap-3">
                                    <div class="org-card mx-auto text-center" style="max-width: 300px;">
                                        <h5 class="fw-bold text-primary mb-1"><?php esc_html_e( 'ĐẠI HỘI ĐỒNG CỔ ĐÔNG', 'theme-anphat' ); ?></h5>
                                        <span class="text-xs text-muted"><?php esc_html_e( 'Cơ quan quyết định tối cao', 'theme-anphat' ); ?></span>
                                    </div>
                                    <div class="text-center"><i class="fa-solid fa-arrow-down text-primary"></i></div>
                                    <div class="org-card mx-auto text-center" style="max-width: 300px;">
                                        <h5 class="fw-bold text-primary mb-1"><?php esc_html_e( 'HỘI ĐỒNG QUẢN TRỊ', 'theme-anphat' ); ?></h5>
                                        <span class="text-xs text-muted"><?php esc_html_e( 'Giám sát & Quản trị chiến lược', 'theme-anphat' ); ?></span>
                                    </div>
                                    <div class="text-center"><i class="fa-solid fa-arrow-down text-primary"></i></div>
                                    <div class="org-card mx-auto text-center" style="max-width: 300px;">
                                        <h5 class="fw-bold text-primary mb-1"><?php esc_html_e( 'BAN GIÁM ĐỐC (CEO)', 'theme-anphat' ); ?></h5>
                                        <span class="text-xs text-muted"><?php esc_html_e( 'Điều hành hoạt động trực tiếp', 'theme-anphat' ); ?></span>
                                    </div>
                                    <div class="text-center"><i class="fa-solid fa-arrow-down text-primary"></i></div>
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <div class="org-card text-center">
                                                <h6 class="fw-bold text-primary mb-1"><?php esc_html_e( 'Phòng Đăng ký & QA', 'theme-anphat' ); ?></h6>
                                                <span class="text-xs text-muted"><?php esc_html_e( 'Kiểm soát chất lượng', 'theme-anphat' ); ?></span>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="org-card text-center">
                                                <h6 class="fw-bold text-primary mb-1"><?php esc_html_e( 'Phòng Phân Phối', 'theme-anphat' ); ?></h6>
                                                <span class="text-xs text-muted"><?php esc_html_e( 'Kênh bán hàng, ETC/OTC', 'theme-anphat' ); ?></span>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="org-card text-center">
                                                <h6 class="fw-bold text-primary mb-1"><?php esc_html_e( 'Phòng Chuỗi Cung Ứng', 'theme-anphat' ); ?></h6>
                                                <span class="text-xs text-muted"><?php esc_html_e( 'Quản lý Kho & Logistics', 'theme-anphat' ); ?></span>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="org-card text-center">
                                                <h6 class="fw-bold text-primary mb-1"><?php esc_html_e( 'Phòng Nhân Sự - KT', 'theme-anphat' ); ?></h6>
                                                <span class="text-xs text-muted"><?php esc_html_e( 'Hành chính & Tài chính', 'theme-anphat' ); ?></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="distribution-wrapper mt-5 pt-4 border-top">
                                <h3 class="font-heading fw-bold text-primary mb-4"><i class="fa-solid fa-truck-ramp-box me-2 text-accent"></i><?php esc_html_e( 'MẠNG LƯỚI CHI NHÁNH & KHO VẬN', 'theme-anphat' ); ?></h3>
                                <div class="row g-4">
                                    <div class="col-md-4">
                                        <div class="bg-light p-4 rounded-4 shadow-sm h-100 border">
                                            <h5 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ở miền Nam (TP.HCM)', 'theme-anphat' ); ?></h5>
                                            <p class="text-sm 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( 'Quy mô:', 'theme-anphat' ); ?></strong> <?php esc_html_e( 'Tổng kho trung tâm đạt chuẩn GSP & GDP diện tích 2,500m2, quản lý toàn bộ phân phối khu vực Nam Bộ và Nam Trung Bộ.', 'theme-anphat' ); ?>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="bg-light p-4 rounded-4 shadow-sm h-100 border">
                                            <h5 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 miền Bắc (Hà Nội)', 'theme-anphat' ); ?></h5>
                                            <p class="text-sm 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( 'Quy mô:', 'theme-anphat' ); ?></strong> <?php esc_html_e( 'Kho trung chuyển đạt chuẩn GDP/GSP diện tích 1,200m2, phục vụ giao hàng thần tốc cho toàn bộ các bệnh viện và nhà thuốc khu vực phía Bắc.', 'theme-anphat' ); ?>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="bg-light p-4 rounded-4 shadow-sm h-100 border">
                                            <h5 class="font-heading fw-bold text-primary mb-2"><i class="fa-solid fa-warehouse me-2 text-accent"></i><?php esc_html_e( 'Trạm trung chuyển miền Trung', 'theme-anphat' ); ?></h5>
                                            <p class="text-sm mb-0">
                                                <strong><?php esc_html_e( 'Địa chỉ:', 'theme-anphat' ); ?></strong> <?php esc_html_e( 'Khu Công Nghiệp Hòa Cầm, Q. Cẩm Lệ, TP. Đà Nẵng.', 'theme-anphat' ); ?><br>
                                                <strong><?php esc_html_e( 'Nhiệm vụ:', 'theme-anphat' ); ?></strong> <?php esc_html_e( 'Điều phối và liên kết kho bãi lạnh đảm bảo phân phát thuốc và thiết bị y tế kịp thời cho khu vực các tỉnh miền Trung và Tây Nguyên.', 'theme-anphat' ); ?>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>

                    </div>
                </article>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>
