<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/config.php';
include BASE_PATH . '/include/header.php';

// Load team members grouped by category slug for dynamic rendering
$team_members_by_slug = [];
$conn = get_db_connection();
if ($conn && !$conn->connect_error) {
    $sql = "SELECT m.*, c.slug AS category_slug, c.name AS category_name
            FROM team_members m 
            JOIN team_categories c ON m.category_id = c.id 
            ORDER BY c.display_order ASC, m.display_order ASC, m.id ASC";
    if ($result = $conn->query($sql)) {
        while ($row = $result->fetch_assoc()) {
            $slug = $row['category_slug'];
            if (!isset($team_members_by_slug[$slug])) {
                $team_members_by_slug[$slug] = [
                    'name' => $row['category_name'],
                    'members' => []
                ];
            }
            $team_members_by_slug[$slug]['members'][] = $row;
        }
        $result->free();
    }
}
?>

<main id="content">
    <!-- Hero Section -->
    <section class="subpage-hero">
        <div class="container">
            <h1>Our <span>Team</span></h1>
            <p>Meet the dedicated professionals who make <?php echo get_website_name(); ?> the region's most trusted
                chimney service provider. Our team is passionate about safety, quality, and exceptional service.</p>
        </div>
    </section>

    <!-- Breadcrumbs -->
    <div class="breadcrumb-container">
        <div class="container">
            <a href="/"><i class="fas fa-home"></i> Home</a> / <a href="/about-us/">About Us</a> / <span>Our Team</span>
        </div>
    </div>

    <!-- Intro Section -->
    <section class="section-padding">
        <div class="container">
            <div class="row justify-content-center text-center mb-5">
                <div class="col-lg-8">
                    <h2 class="section-title">Meet the Experts</h2>
                    <p class="lead">At <?php echo get_website_name(); ?>, we’re more than just a team—we’re a family
                        dedicated to keeping your home safe, warm, and cozy. With years of expertise and a passion for
                        quality service, our skilled professionals are here to deliver top-notch chimney care.</p>
                </div>
            </div>

            <?php foreach ($team_members_by_slug as $slug => $category): ?>
                <div class="team-category-section mb-5">
                    <h3 class="text-center mb-4"
                        style="font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--primary);">
                        <?php echo htmlspecialchars($category['name']); ?>
                    </h3>
                    <div class="row g-4 justify-content-center">
                        <?php foreach ($category['members'] as $member):
                            $img = !empty($member['image']) ? $member['image'] : '/wp-content/uploads/2025/09/Crest-Chimney-Employee-1.png';
                            ?>
                            <div class="col-lg-3 col-md-4 col-sm-6">
                                <div class="pro-card text-center h-100 p-0 overflow-hidden border-0 shadow-sm hover-up">
                                    <div class="team-img-wrapper" style="aspect-ratio: 1/1; overflow: hidden;">
                                        <img src="<?php echo htmlspecialchars($img); ?>"
                                            alt="<?php echo htmlspecialchars($member['name']); ?>"
                                            class="img-fluid w-100 h-100 object-fit-cover">
                                    </div>
                                    <div class="p-4">
                                        <h4 class="mb-1" style="font-weight: 700; font-size: 1.1rem;">
                                            <?php echo htmlspecialchars($member['name']); ?>
                                        </h4>
                                        <p class="text-primary mb-0"
                                            style="font-weight: 600; font-size: 0.9rem; text-transform: uppercase;">
                                            <?php echo htmlspecialchars($member['role_title']); ?>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </section>

    <!-- Join Our Team Section -->
    <section class="section-padding bg-light">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-lg-6">
                    <h2 class="section-title">Join Our Team</h2>
                    <p class="lead mb-4">Are you looking for a rewarding career with a company that values expertise and
                        dedication?</p>
                    <p>We are always looking for passionate individuals to join our growing family. Whether you're an
                        experienced technician or looking to start a career in the chimney industry, we provide the
                        training and support you need to succeed.</p>
                    <div class="mt-4">
                        <a href="/about-us/careers/" class="btn-pro">View Open Positions</a>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="pro-card text-center p-4">
                                <i class="fas fa-tools fa-2x text-primary mb-3"></i>
                                <h5 class="mb-0">Technicians</h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="pro-card text-center p-4">
                                <i class="fas fa-headset fa-2x text-primary mb-3"></i>
                                <h5 class="mb-0">Support</h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="pro-card text-center p-4">
                                <i class="fas fa-chart-line fa-2x text-primary mb-3"></i>
                                <h5 class="mb-0">Marketing</h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="pro-card text-center p-4">
                                <i class="fas fa-user-tie fa-2x text-primary mb-3"></i>
                                <h5 class="mb-0">Management</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact CTA -->
    <section class="section-padding bg-dark text-white text-center">
        <div class="container">
            <h2 class="text-white mb-4">Ready to Work with the <span>Best?</span></h2>
            <p class="lead mb-5 opacity-75">Contact us today to schedule your service with our expert team.</p>
            <a href="tel:<?php echo get_phone_number_tel(); ?>" class="btn-pro"><?php echo get_phone_number(); ?></a>
        </div>
    </section>
</main>

<style>
    .hover-up {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-up:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
    }

    .object-fit-cover {
        object-fit: cover;
    }
</style>

<?php include BASE_PATH . '/include/footer.php'; ?>