<?php
$page_title = 'Learn More';
$page_description = 'Our vision, membership criteria, and step-by-step on how to join Buy Local Lowveld.';
require 'includes/header.php';
?>

<!-- ═══════════════════════════════════════════
     Our Vision — image left, text right
 ═══════════════════════════════════════════ -->
<section class="lm-vision reveal">
    <div class="container">
        <div class="lm-vision-layout">
            <div class="lm-vision-image">
                <img src="assets/img/buylocal-learnmore.webp" alt="Buy Local Lowveld" loading="lazy">
            </div>
            <div class="lm-vision-text">
                <h2 class="lm-heading">Our Vision</h2>
                <p class="lm-pillars"><strong>EDUCATE</strong> · <strong>SUPPORT</strong> · <strong>IMPROVE</strong> · <strong>GROW</strong></p>

                <div class="lm-vision-grid">
                    <p>To <strong>STIMULATE, STRENGTHEN AND GROW</strong> the Lowveld economy through a strong consumer education programme (Social Media &amp; Networking Events).</p>

                    <p>To <strong>CREATE AN AWARENESS</strong> of which businesses are locally owned (our website directory and social media).</p>

                    <p>To <strong>ENCOURAGE CONSUMERS</strong> to support these locally owned businesses so that our spend remains in the Lowveld to fuel our economy. (Website, social media and storefront branding.)</p>

                    <p>To <strong>GROW LOCAL BUSINESS</strong> thereby creating further job opportunities and a flourishing region. (Stronger Local Economy = Flourishing Lowveld.)</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════
     Membership Criteria
 ═══════════════════════════════════════════ -->
<section class="lm-criteria reveal">
    <div class="container">
        <h2 class="lm-heading">Membership Criteria</h2>

        <div class="lm-criteria-grid">
            <div class="lm-criteria-card">
                <div class="lm-criteria-img">
                    <img src="assets/img/learnmore-criteria1.webp" alt="Locally owned" loading="lazy">
                </div>
                <h3>Locally owned.</h3>
                <p>We welcome locally owned franchises and private businesses to be part of our initiative.</p>
            </div>

            <div class="lm-criteria-card">
                <div class="lm-criteria-img">
                    <img src="assets/img/learnmore-criteria2.webp" alt="Passion" loading="lazy">
                </div>
                <h3>Passion.</h3>
                <p>Persons who have a passion for our local community and who work ethically.</p>
            </div>

            <div class="lm-criteria-card">
                <div class="lm-criteria-img">
                    <img src="assets/img/learnmore-criteria3.webp" alt="Support local" loading="lazy">
                </div>
                <h3>Support local.</h3>
                <p>Businesses who invest in our community by choosing to support local when possible.</p>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════
     How do I get involved?
 ═══════════════════════════════════════════ -->
<section class="lm-involved reveal">
    <div class="container">
        <h2 class="lm-heading">How Do I Get Involved?</h2>

        <div class="lm-steps">
            <div class="lm-step">
                <span class="lm-step-num">Step One</span>
                <h3>Become a Member &amp; Get Branded</h3>
                <p>
                    Starting at a minimum of R150 per month or a once-off annual fee.
                    Your membership fees are used to market "Buy Local" and the importance
                    of supporting local to consumers and businesses.
                </p>
                <p>
                    Brand your business with our Buy Local Badge and show the world that
                    you are a proud Lowveld business. We have a variety of branding options
                    to choose from.
                </p>
            </div>

            <div class="lm-step">
                <span class="lm-step-num">Step Two</span>
                <h3>Become an Ambassador</h3>
                <p>
                    Not only is it important as a Buy Local member to support local service
                    providers and suppliers wherever possible, but you should also talk to
                    your circle — friends, family, suppliers, and customers — about Buy Local Lowveld.
                </p>
                <p>
                    By becoming an Ambassador, you are helping us spread the word and bring
                    about the change we wish to see. Share the message and participate in
                    our campaigns to show your support.
                </p>
            </div>
        </div>

        <div style="text-align:center;margin-top:3rem;">
            <a href="become-member.php" class="btn">Become a Member</a>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════
     What's in it for you?
 ═══════════════════════════════════════════ -->
<section class="lm-benefits reveal">
    <div class="container">
        <h2 class="lm-heading">What's In It For You?</h2>

        <div class="lm-benefits-grid">
            <div class="lm-benefit">
                <h3>Contributing members will be listed on our directory</h3>
                <p>
                    Contributing members will be listed on our Buy Local Lowveld exclusive directory.
                    This listing will include a company logo, short overview of your company and its services,
                    meta tags (keyword links) to assist in Google findability of your listing.
                    Each listing will have a direct link to your website and an email link button.
                </p>
            </div>

            <div class="lm-benefit">
                <h3>Play a role in a flourishing economy</h3>
                <p>
                    You can play a role in creating an economy in which all Lowvelders can flourish,
                    for now and for the next generation. As your business grows, so are you able to
                    further support local schools and local initiatives — you become the very fabric of our society.
                </p>
            </div>

            <div class="lm-benefit">
                <h3>Join our networking events and workshops</h3>
                <p>
                    Join our networking events and workshops. Get to know other Buy Local members and brands.
                    Find and establish new connections within your area.
                    You become part of a community that is working together to grow the Lowveld.
                </p>
            </div>

            <div class="lm-benefit">
                <h3>Your contribution allows us to spread the message</h3>
                <p>
                    When your business grows, so does the community around you. Your monthly contribution
                    helps us spread and promote the message of supporting local through marketing campaigns
                    and events, and to get all the local businesses branded — to create a region where our
                    community, friends, and families can benefit and grow.
                </p>
            </div>

            <div class="lm-benefit">
                <h3>We encourage shoppers to support you</h3>
                <p>
                    We encourage shoppers to look out for the Buy Local Badge and to shop at local businesses.
                    By getting your business branded, shoppers will know you are a proud local business and
                    that their purchase will contribute towards sustaining and growing the Lowveld economy.
                </p>
            </div>
        </div>
    </div>
</section>

<script>
// Reveal-on-scroll using IntersectionObserver
(function () {
    if (!('IntersectionObserver' in window)) {
        document.querySelectorAll('.reveal').forEach(el => el.classList.add('visible'));
        return;
    }
    const io = new IntersectionObserver((entries) => {
        entries.forEach(e => {
            if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); }
        });
    }, { threshold: 0.12, rootMargin: '0px 0px -50px 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
})();
</script>

<?php require 'includes/footer.php'; ?>