{% extends "base.html" %}
{% set page_title = "Member Benefits - Five Cities Orchid Society" %}

{% block content %}
<div class="container-fluid px-4">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="text-center mb-5">
                <img src="https://images.squarespace-cdn.com/content/v1/5d5995eb100bdf0001a87d2a/88b92b6f-736d-4547-bd8d-ab0fd05d2630/Five+Cities+Orchid+Society-FF-01.png?format=1500w" 
                     alt="Five Cities Orchid Society" class="img-fluid mb-4" style="max-height: 200px;">
                <h1 class="display-4 text-primary mb-3">Member Benefits</h1>
                <p class="lead text-muted">Join our community of orchid enthusiasts and grow better orchids!</p>
            </div>

            <div class="row">
                <div class="col-lg-8 mx-auto">
                    
                    <!-- Main Benefits -->
                    <div class="card mb-5 border-success">
                        <div class="card-header bg-success text-white">
                            <h3 class="mb-0"><i class="fas fa-heart"></i> Why Join FCOS?</h3>
                        </div>
                        <div class="card-body">
                            <p class="lead">"Entertaining and informative speakers at our meetings and help from our more experienced members means everyone's thumb can turn a little greener with membership in Five Cities Orchid Society"</p>
                        </div>
                    </div>

                    <!-- Benefit Categories -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="text-primary mb-0"><i class="fas fa-video"></i> Monthly Meetings</h4>
                                </div>
                                <div class="card-body">
                                    <ul class="list-unstyled">
                                        <li><i class="fas fa-check text-success"></i> <strong>Free Access</strong> to monthly Zoom presentations</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Expert Speakers</strong> from around the world</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Q&A Sessions</strong> with experienced growers</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Global Community</strong> - connect worldwide</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Recording Access</strong> to past presentations</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="text-primary mb-0"><i class="fas fa-ticket-alt"></i> Event Access</h4>
                                </div>
                                <div class="card-body">
                                    <ul class="list-unstyled">
                                        <li><i class="fas fa-check text-success"></i> <strong>FREE OrchidFest</strong> admission (save $5)</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Special Events</strong> - BBQs, holiday parties</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Field Trips</strong> to nurseries and gardens</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Priority Access</strong> to limited events</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Silent Auctions</strong> with rare orchids</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="text-primary mb-0"><i class="fas fa-newspaper"></i> Newsletter & Resources</h4>
                                </div>
                                <div class="card-body">
                                    <ul class="list-unstyled">
                                        <li><i class="fas fa-check text-success"></i> <strong>Monthly Newsletter</strong> with care tips</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Zoom Links</strong> delivered automatically</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Event Updates</strong> and announcements</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Growing Guides</strong> and articles</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Member Spotlights</strong> and success stories</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="text-primary mb-0"><i class="fas fa-users"></i> Community Support</h4>
                                </div>
                                <div class="card-body">
                                    <ul class="list-unstyled">
                                        <li><i class="fas fa-check text-success"></i> <strong>Expert Help</strong> from experienced members</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Problem Solving</strong> for sick orchids</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Growing Advice</strong> for coastal climate</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Species ID</strong> assistance</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Friendly Environment</strong> for beginners</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Special Perks -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-gift"></i> Exclusive Member Perks</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 text-center mb-3">
                                    <i class="fas fa-handshake fa-3x text-success mb-2"></i>
                                    <h6>Vendor Discounts</h6>
                                    <p class="small">Special pricing from supporting orchid vendors and nurseries</p>
                                </div>
                                <div class="col-md-4 text-center mb-3">
                                    <i class="fas fa-exchange-alt fa-3x text-success mb-2"></i>
                                    <h6>Plant Swaps</h6>
                                    <p class="small">Trade orchids with other members, share divisions and keikis</p>
                                </div>
                                <div class="col-md-4 text-center mb-3">
                                    <i class="fas fa-certificate fa-3x text-success mb-2"></i>
                                    <h6>Volunteer Recognition</h6>
                                    <p class="small">Help with OrchidFest and other events, build lasting friendships</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Success Stories -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-trophy"></i> Member Success</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="border-start border-success border-4 ps-3 mb-3">
                                        <h6 class="text-success">YouTube Creators</h6>
                                        <p class="small mb-1">Our members produce educational videos sharing their expertise:</p>
                                        <ul class="small">
                                            <li>Ed Lysek's greenhouse tours</li>
                                            <li>Eric Holenda's species profiles</li>
                                            <li>Jeff Parham's growing techniques</li>
                                            <li>Chris Erhler's specialized setups</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="border-start border-success border-4 ps-3 mb-3">
                                        <h6 class="text-success">Award Winners</h6>
                                        <p class="small mb-1">Members regularly win awards at orchid shows:</p>
                                        <ul class="small">
                                            <li>Best in Show at OrchidFest</li>
                                            <li>AOS recognition and awards</li>
                                            <li>Published in Orchids magazine</li>
                                            <li>Speaking at national conferences</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Climate Advantage -->
                    <div class="card mb-4 bg-light">
                        <div class="card-header bg-info text-white">
                            <h3 class="mb-0"><i class="fas fa-sun"></i> Coastal California Advantage</h3>
                        </div>
                        <div class="card-body">
                            <p class="lead">Our Mediterranean climate is perfect for orchids!</p>
                            <div class="row">
                                <div class="col-md-4">
                                    <h6 class="text-success">Temperature Range</h6>
                                    <ul class="small">
                                        <li>Winter: Low 40s°F minimum</li>
                                        <li>Summer: Rarely above 90°F</li>
                                        <li>Cool nights: 60-68°F</li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <h6 class="text-success">Outdoor Growing</h6>
                                    <ul class="small">
                                        <li>Many orchids thrive outside</li>
                                        <li>Frost-free locations ideal</li>
                                        <li>Natural humidity from ocean</li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <h6 class="text-success">Member Expertise</h6>
                                    <ul class="small">
                                        <li>Decades of local experience</li>
                                        <li>Proven techniques for our area</li>
                                        <li>Species selection guidance</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Testimonial -->
                    <div class="card mb-5 border-primary">
                        <div class="card-body text-center">
                            <blockquote class="blockquote">
                                <p class="mb-3">"We serve not only our local orchid community of FCOS members but through our monthly Zoom meetings and monthly newsletter we now reach a global audience."</p>
                                <footer class="blockquote-footer">Five Cities Orchid Society <cite title="Mission">Mission Statement</cite></footer>
                            </blockquote>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Call to Action -->
            <div class="text-center mb-5">
                <div class="card d-inline-block bg-success text-white">
                    <div class="card-body">
                        <h4 class="mb-3"><i class="fas fa-star"></i> Ready to Join?</h4>
                        <p class="mb-3">Start enjoying these benefits today!</p>
                        <a href="/fcos/how-to-join" class="btn btn-light btn-lg me-3">
                            <i class="fas fa-user-plus"></i> Become a Member
                        </a>
                        <a href="https://lp.constantcontactpages.com/sl/2eiSzYb" target="_blank" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-envelope"></i> Newsletter First
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}