<?php

$pageTitle = 'PET SPA — Chăm sóc thú cưng';

require_once BASE_PATH . '/app/helpers/MapEmbed.php';

$shop = $GLOBALS['shop_settings'] ?? [];
$socialLinks = $GLOBALS['social_links'] ?? [];

$shopName = trim((string) ($shop['shop_name'] ?? 'PET SPA'));

if ($shopName === '') {
    $shopName = 'PET SPA';
}

require BASE_PATH . '/app/views/layouts/header.php';
require BASE_PATH . '/app/views/layouts/navbar.php';

?>

<main class="pet-home">


    <!-- =========================================================
         HERO
    ========================================================== -->

    <section class="pet-home-hero">

        <div class="container">

            <div class="row align-items-center g-5">

                <!-- LEFT -->

                <div class="col-lg-7">

                    <span class="home-eyebrow">
                        🐾 Chăm sóc thú cưng tận tâm
                    </span>


                    <h1>

                        Chăm sóc bé yêu
                        <span>nhẹ nhàng hơn mỗi ngày</span>

                    </h1>


                    <p>

                        Đặt lịch Spa nhanh chóng,
                        lựa chọn dịch vụ phù hợp và
                        theo dõi lịch hẹn của thú cưng
                        ngay trên website.

                    </p>


                    <div class="d-flex flex-wrap gap-3">

                        <a
                            href="<?= BASE_URL ?>/?url=customer/booking/create"
                            class="btn btn-primary btn-lg px-4"
                        >
                            <i class="bi bi-calendar-heart me-2"></i>
                            Đặt lịch Spa
                        </a>


                        <a
                            href="<?= BASE_URL ?>/?url=services"
                            class="btn btn-outline-primary btn-lg px-4"
                        >
                            Xem dịch vụ
                        </a>

                    </div>


                    <div class="home-benefits">

                        <span>
                            <i class="bi bi-check-circle-fill"></i>
                            Đặt lịch dễ dàng
                        </span>

                        <span>
                            <i class="bi bi-check-circle-fill"></i>
                            Khung giờ rõ ràng
                        </span>

                        <span>
                            <i class="bi bi-check-circle-fill"></i>
                            Chăm sóc tận tâm
                        </span>

                    </div>

                </div>


                <!-- RIGHT -->

                <div class="col-lg-5 d-none d-lg-block">

                    <div class="home-hero-visual">

                        <div class="home-hero-pet home-hero-dog">
                            🐶
                        </div>

                        <div class="home-hero-pet home-hero-cat">
                            🐱
                        </div>


                        <a
                            href="<?= BASE_URL ?>/?url=services"
                            class="home-floating-card home-floating-card-one home-floating-card-link"
                        >

                            <span class="home-floating-icon">
                                <i class="bi bi-scissors"></i>
                            </span>

                            <div>
                                <strong>Spa chuyên nghiệp</strong>
                                <small>Dịch vụ phù hợp từng bé</small>
                            </div>

                        </a>


                        <a
                            href="<?= BASE_URL ?>/?url=customer/booking/create"
                            class="home-floating-card home-floating-card-two home-floating-card-link"
                        >

                            <span class="home-floating-icon">
                                <i class="bi bi-calendar-check"></i>
                            </span>

                            <div>
                                <strong>Đặt lịch nhanh</strong>
                                <small>Chọn ngày và giờ thuận tiện</small>
                            </div>

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </section>



    <!-- =========================================================
         SERVICES
    ========================================================== -->

    <section class="section home-services-section">

        <div class="container">


            <div class="home-section-header">

                <div>

                    <span>DỊCH VỤ</span>

                    <h2>
                        Dịch vụ nổi bật
                    </h2>

                    <p>
                        Lựa chọn dịch vụ phù hợp nhất cho thú cưng của bạn.
                    </p>

                </div>


                <a href="<?= BASE_URL ?>/?url=services">

                    Xem tất cả

                    <i class="bi bi-arrow-right"></i>

                </a>

            </div>



            <?php if (!empty($featuredServices)): ?>

                <div class="row g-4">


                    <?php foreach ($featuredServices as $item): ?>

                        <div class="col-lg-4 col-md-6">

                            <article class="home-service-card">


                                <!-- IMAGE -->

                                <a
                                    class="home-service-image"
                                    href="<?= BASE_URL ?>/?url=service&slug=<?= urlencode(
                                        $item['slug']
                                    ) ?>"
                                >

                                    <?php if (!empty($item['featured_image'])): ?>

                                        <img
                                            src="<?= BASE_URL ?>/<?= htmlspecialchars(
                                                ltrim(
                                                    $item['featured_image'],
                                                    '/'
                                                )
                                            ) ?>"
                                            alt="<?= htmlspecialchars(
                                                $item['name']
                                            ) ?>"
                                        >

                                    <?php else: ?>

                                        <div class="home-service-placeholder">
                                            🐾
                                        </div>

                                    <?php endif; ?>

                                </a>


                                <!-- BODY -->

                                <div class="home-service-body">


                                    <?php if (!empty($item['category_name'])): ?>

                                        <span class="home-service-category">

                                            <?= htmlspecialchars(
                                                $item['category_name']
                                            ) ?>

                                        </span>

                                    <?php endif; ?>


                                    <h3>

                                        <a
                                            href="<?= BASE_URL ?>/?url=service&slug=<?= urlencode(
                                                $item['slug']
                                            ) ?>"
                                        >

                                            <?= htmlspecialchars(
                                                $item['name']
                                            ) ?>

                                        </a>

                                    </h3>


                                    <p>

                                        <?= htmlspecialchars(
                                            $item['short_description']
                                            ?? 'Dịch vụ chăm sóc thú cưng tại Spa.'
                                        ) ?>

                                    </p>


                                    <div class="home-service-footer">

                                        <div>

                                            <strong>
                                                <?= number_format(
                                                    (float) $item['price'],
                                                    0,
                                                    ',',
                                                    '.'
                                                ) ?>đ
                                            </strong>

                                            <small>
                                                <?= (int) $item['duration_minutes'] ?>
                                                phút
                                            </small>

                                        </div>


                                        <a
                                            href="<?= BASE_URL ?>/?url=service&slug=<?= urlencode(
                                                $item['slug']
                                            ) ?>"
                                            class="home-service-arrow"
                                            aria-label="Xem dịch vụ"
                                        >

                                            <i class="bi bi-arrow-right"></i>

                                        </a>

                                    </div>

                                </div>

                            </article>

                        </div>

                    <?php endforeach; ?>


                </div>

            <?php else: ?>

                <div class="home-empty-state">

                    <div>🐾</div>

                    <h3>
                        Dịch vụ đang được cập nhật
                    </h3>

                    <p>
                        Chủ Spa đang chuẩn bị các dịch vụ chăm sóc dành cho thú cưng.
                    </p>

                </div>

            <?php endif; ?>


        </div>

    </section>



    <!-- =========================================================
         WHY CHOOSE US
    ========================================================== -->

    <section class="home-soft-section section">

        <div class="container">

            <div class="text-center home-center-heading">

                <span>VÌ SAO CHỌN CHÚNG TÔI?</span>

                <h2>
                    Một trải nghiệm chăm sóc nhẹ nhàng
                </h2>

                <p>
                    Quy trình đơn giản, dễ theo dõi và phù hợp với cả chủ nuôi lẫn thú cưng.
                </p>

            </div>


            <div class="row g-4 mt-2">


                <div class="col-md-4">

                    <div class="home-feature-card">

                        <div class="home-feature-icon">
                            <i class="bi bi-calendar2-check"></i>
                        </div>

                        <h3>
                            Đặt lịch tiện lợi
                        </h3>

                        <p>
                            Chọn dịch vụ, ngày và khung giờ phù hợp chỉ trong vài bước.
                        </p>

                    </div>

                </div>


                <div class="col-md-4">

                    <div class="home-feature-card">

                        <div class="home-feature-icon">
                            <i class="bi bi-heart-pulse"></i>
                        </div>

                        <h3>
                            Chăm sóc tận tâm
                        </h3>

                        <p>
                            Mỗi thú cưng đều được tiếp nhận và chăm sóc theo nhu cầu riêng.
                        </p>

                    </div>

                </div>


                <div class="col-md-4">

                    <div class="home-feature-card">

                        <div class="home-feature-icon">
                            <i class="bi bi-bell"></i>
                        </div>

                        <h3>
                            Theo dõi dễ dàng
                        </h3>

                        <p>
                            Quản lý lịch hẹn và nhận thông báo trực tiếp từ PET SPA.
                        </p>

                    </div>

                </div>


            </div>

        </div>

    </section>



    <!-- =========================================================
         BOOKING PROCESS
    ========================================================== -->

    <section class="section">

        <div class="container">


            <div class="home-section-header">

                <div>

                    <span>QUY TRÌNH</span>

                    <h2>
                        Đặt lịch chỉ với 3 bước
                    </h2>

                </div>

            </div>


            <div class="home-booking-steps">


                <div class="home-booking-step">

                    <span class="home-step-number">
                        01
                    </span>

                    <div class="home-step-icon">
                        <i class="bi bi-scissors"></i>
                    </div>

                    <h3>
                        Chọn dịch vụ
                    </h3>

                    <p>
                        Chọn dịch vụ Spa phù hợp với nhu cầu của thú cưng.
                    </p>

                </div>


                <div class="home-booking-step">

                    <span class="home-step-number">
                        02
                    </span>

                    <div class="home-step-icon">
                        <i class="bi bi-calendar3"></i>
                    </div>

                    <h3>
                        Chọn ngày và giờ
                    </h3>

                    <p>
                        Hệ thống hiển thị những khung giờ còn trống để bạn lựa chọn.
                    </p>

                </div>


                <div class="home-booking-step">

                    <span class="home-step-number">
                        03
                    </span>

                    <div class="home-step-icon">
                        <i class="bi bi-check2-circle"></i>
                    </div>

                    <h3>
                        Xác nhận lịch
                    </h3>

                    <p>
                        Gửi yêu cầu và theo dõi trạng thái lịch hẹn trong tài khoản.
                    </p>

                </div>


            </div>

        </div>

    </section>



    <!-- =========================================================
         POSTS
    ========================================================== -->

    <section class="home-soft-section section">

        <div class="container">


            <div class="home-section-header">

                <div>

                    <span>GÓC CHĂM SÓC</span>

                    <h2>
                        Bài viết mới
                    </h2>

                    <p>
                        Kiến thức và kinh nghiệm chăm sóc thú cưng từ PET SPA.
                    </p>

                </div>


                <a href="<?= BASE_URL ?>/?url=posts">

                    Xem tất cả

                    <i class="bi bi-arrow-right"></i>

                </a>

            </div>


            <?php if (!empty($latestPosts)): ?>

                <div class="row g-4">


                    <?php foreach ($latestPosts as $post): ?>

                        <div class="col-lg-4 col-md-6">


                            <article class="home-post-card">


                                <a
                                    class="home-post-image"
                                    href="<?= BASE_URL ?>/?url=post&slug=<?= urlencode(
                                        $post['slug']
                                    ) ?>"
                                >

                                    <?php if (!empty($post['featured_image'])): ?>

                                        <img
                                            src="<?= BASE_URL ?>/<?= htmlspecialchars(
                                                ltrim(
                                                    $post['featured_image'],
                                                    '/'
                                                )
                                            ) ?>"
                                            alt="<?= htmlspecialchars(
                                                $post['title']
                                            ) ?>"
                                        >

                                    <?php else: ?>

                                        <div class="home-post-placeholder">
                                            🐶
                                        </div>

                                    <?php endif; ?>

                                </a>


                                <div class="home-post-body">


                                    <?php if (!empty($post['category_name'])): ?>

                                        <small>

                                            <?= htmlspecialchars(
                                                $post['category_name']
                                            ) ?>

                                        </small>

                                    <?php endif; ?>


                                    <h3>

                                        <a
                                            href="<?= BASE_URL ?>/?url=post&slug=<?= urlencode(
                                                $post['slug']
                                            ) ?>"
                                        >

                                            <?= htmlspecialchars(
                                                $post['title']
                                            ) ?>

                                        </a>

                                    </h3>


                                    <?php if (!empty($post['excerpt'])): ?>

                                        <p>

                                            <?= htmlspecialchars(
                                                $post['excerpt']
                                            ) ?>

                                        </p>

                                    <?php endif; ?>


                                    <a
                                        href="<?= BASE_URL ?>/?url=post&slug=<?= urlencode(
                                            $post['slug']
                                        ) ?>"
                                        class="home-read-more"
                                    >

                                        Đọc bài viết

                                        <i class="bi bi-arrow-right"></i>

                                    </a>

                                </div>

                            </article>

                        </div>

                    <?php endforeach; ?>


                </div>

            <?php else: ?>

                <div class="home-empty-state">

                    <div>📖</div>

                    <h3>
                        Chưa có bài viết
                    </h3>

                    <p>
                        Các bài chia sẻ chăm sóc thú cưng sẽ sớm được cập nhật.
                    </p>

                </div>

            <?php endif; ?>


        </div>

    </section>



    <!-- =========================================================
         MAP + CONTACT
    ========================================================== -->

    <section class="section home-location-section">

        <div class="container">


            <div class="home-section-header">

                <div>

                    <span>LIÊN HỆ</span>

                    <h2>
                        Ghé thăm <?= htmlspecialchars($shopName) ?>
                    </h2>

                    <p>
                        Liên hệ hoặc tìm đường đến cửa hàng của chúng tôi.
                    </p>

                </div>

            </div>


            <div class="row g-4 align-items-stretch">


                <!-- CONTACT INFORMATION -->

                <div class="col-lg-4">

                    <div class="home-contact-card">


                        <div class="home-contact-icon">
                            <i class="bi bi-geo-alt"></i>
                        </div>


                        <h3>
                            <?= htmlspecialchars($shopName) ?>
                        </h3>


                        <?php if (!empty($shop['address'])): ?>

                            <div class="home-contact-row">

                                <i class="bi bi-geo-alt-fill"></i>

                                <div>

                                    <small>Địa chỉ</small>

                                    <span>
                                        <?= htmlspecialchars($shop['address']) ?>
                                    </span>

                                </div>

                            </div>

                        <?php endif; ?>


                        <?php if (!empty($shop['phone'])): ?>

                            <a
                                href="tel:<?= htmlspecialchars(
                                    preg_replace(
                                        '/[^0-9+]/',
                                        '',
                                        (string) $shop['phone']
                                    )
                                ) ?>"
                                class="home-contact-row"
                            >

                                <i class="bi bi-telephone-fill"></i>

                                <div>

                                    <small>Hotline</small>

                                    <span>
                                        <?= htmlspecialchars($shop['phone']) ?>
                                    </span>

                                </div>

                            </a>

                        <?php endif; ?>


                        <?php if (!empty($shop['email'])): ?>

                            <a
                                href="mailto:<?= htmlspecialchars(
                                    $shop['email']
                                ) ?>"
                                class="home-contact-row"
                            >

                                <i class="bi bi-envelope-fill"></i>

                                <div>

                                    <small>Email</small>

                                    <span>
                                        <?= htmlspecialchars($shop['email']) ?>
                                    </span>

                                </div>

                            </a>

                        <?php endif; ?>


                        <a
                            href="<?= BASE_URL ?>/?url=contact"
                            class="btn btn-primary w-100 mt-4"
                        >

                            <i class="bi bi-chat-dots me-2"></i>

                            Liên hệ với chúng tôi

                        </a>

                    </div>

                </div>


                <!-- GOOGLE MAP -->

                <div class="col-lg-8">

                    <div class="home-map-card">


                        <?php if (
                            is_valid_google_map_embed_url(
                                $shop['map_embed_url'] ?? null
                            )
                        ): ?>

                            <iframe
                                src="<?= htmlspecialchars(
                                    $shop['map_embed_url']
                                ) ?>"
                                title="Bản đồ <?= htmlspecialchars($shopName) ?>"
                                loading="lazy"
                                allowfullscreen
                                referrerpolicy="no-referrer-when-downgrade"
                            ></iframe>


                        <?php else: ?>

                            <div class="home-map-empty">

                                <i class="bi bi-map"></i>

                                <h3>
                                    Chưa thiết lập bản đồ
                                </h3>

                                <p>
                                    Chủ Spa có thể thêm Google Maps Embed
                                    trong phần Cài đặt Shop.
                                </p>

                            </div>

                        <?php endif; ?>


                    </div>

                </div>


            </div>

        </div>

    </section>


</main>


<?php

require BASE_PATH . '/app/views/layouts/footer.php';

?>
