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

<main id="content">
    <!-- Hero Section -->
    <section class="subpage-hero">
        <div class="container">
            <h1>Join Our <span>Team</span></h1>
            <p>Build a rewarding career with <?php echo get_website_name(); ?>. We're looking for passionate
                professionals to help us deliver excellence in chimney services.</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>Careers</span>
        </div>
    </div>

    <!-- Intro Section -->
    <section class="section-padding">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-lg-6">
                    <h2 class="section-title">Why Work With Us?</h2>
                    <p class="lead mb-4">At <?php echo get_website_name(); ?>, we don't just build chimneys; we build
                        careers.</p>
                    <p>We foster a collaborative culture where ideas are shared, and every team member plays a vital
                        role in our achievements. We believe in investing in our employees and offer continuous learning
                        opportunities to help you thrive in your career.</p>
                    <div class="row g-3 mt-4">
                        <div class="col-sm-6">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-graduation-cap text-primary me-3"></i>
                                <span class="fw-bold">Paid Training</span>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-chart-line text-primary me-3"></i>
                                <span class="fw-bold">Growth Paths</span>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-users text-primary me-3"></i>
                                <span class="fw-bold">Great Culture</span>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-shield-alt text-primary me-3"></i>
                                <span class="fw-bold">Safety First</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="pro-card p-4 shadow-sm border-0">
                        <img src="/wp-content/uploads/2023/12/expertise-icon.png" alt="Teamwork"
                            class="img-fluid rounded shadow-sm mb-4"
                            style="max-width: 100px; display: block; margin: 0 auto;">
                        <h3 class="text-center">Our Commitment</h3>
                        <p class="text-center">We take pride in providing top-notch chimney services, and our commitment
                            to excellence extends to our team. You’ll work alongside industry experts dedicated to
                            maintaining the highest standards.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Open Positions -->
    <section class="section-padding bg-light">
        <div class="container">
            <h2 class="section-title text-center mb-5">Open Positions</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="pro-card p-4 h-100 text-center">
                        <i class="fas fa-tools fa-3x text-primary mb-3"></i>
                        <h4>Technicians</h4>
                        <p>Skilled in chimney services and repairs. Join our field team and deliver quality service.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="pro-card p-4 h-100 text-center">
                        <i class="fas fa-headset fa-3x text-primary mb-3"></i>
                        <h4>Customer Experience</h4>
                        <p>Passionate about helping people. Manage appointments and provide exceptional support.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="pro-card p-4 h-100 text-center">
                        <i class="fas fa-bullhorn fa-3x text-primary mb-3"></i>
                        <h4>Marketing</h4>
                        <p>Help us reach new heights in the digital landscape with creative strategies.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Application Form -->
    <section class="section-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="pro-card p-5 shadow border-0">
                        <h2 class="text-center mb-4">Apply Now</h2>
                        <form action="/submit-application.php" method="POST" enctype="multipart/form-data">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Full Name</label>
                                    <input type="text" name="name" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Email Address</label>
                                    <input type="email" name="email" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Phone Number</label>
                                    <input type="tel" name="phone" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Position of Interest</label>
                                    <select name="position" class="form-select" required>
                                        <option value="">Select a position...</option>
                                        <option value="Technician">Technician</option>
                                        <option value="Customer Experience">Customer Experience</option>
                                        <option value="Marketing">Marketing</option>
                                        <option value="Management">Management</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Upload Resume (PDF)</label>
                                    <input type="file" name="resume" class="form-control" accept=".pdf" required>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Tell us about yourself</label>
                                    <textarea name="message" class="form-control" rows="4"></textarea>
                                </div>
                                <div class="col-12 text-center mt-4">
                                    <button type="submit" class="btn-pro w-100">Submit Application</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

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