{% extends "base.html" %}
{% set page_title = "How to Join - 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-success mb-3">Join FCOS Today!</h1>
                <p class="lead text-muted">Become part of our global orchid community</p>
            </div>

            <div class="row">
                <div class="col-lg-8 mx-auto">
                    
                    <!-- Quick Join -->
                    <div class="card mb-5 border-success">
                        <div class="card-header bg-success text-white">
                            <h3 class="mb-0 text-center"><i class="fas fa-rocket"></i> Quick & Easy Signup</h3>
                        </div>
                        <div class="card-body text-center">
                            <p class="lead mb-4">Join FCOS and subscribe to our newsletter in one simple step!</p>
                            <a href="https://lp.constantcontactpages.com/sl/2eiSzYb" target="_blank" class="btn btn-success btn-lg">
                                <i class="fas fa-user-plus"></i> Join FCOS & Subscribe to Newsletter
                            </a>
                            <p class="text-muted mt-3 small">This form handles both membership signup and newsletter subscription</p>
                        </div>
                    </div>

                    <!-- Membership Benefits Reminder -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-gift"></i> What You'll Get</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-success"><i class="fas fa-check"></i> Free Event Access</h6>
                                    <ul class="small">
                                        <li>FREE OrchidFest admission (save $5)</li>
                                        <li>Monthly Zoom meetings with experts</li>
                                        <li>Social gatherings and BBQs</li>
                                        <li>Silent auctions with rare orchids</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-success"><i class="fas fa-check"></i> Expert Support</h6>
                                    <ul class="small">
                                        <li>Monthly newsletter with growing tips</li>
                                        <li>Help from experienced members</li>
                                        <li>Access to member videos and resources</li>
                                        <li>Global community of orchid lovers</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Getting Started -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-play-circle"></i> Getting Started</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 text-center mb-3">
                                    <div class="badge bg-success rounded-pill fs-4 mb-2">1</div>
                                    <h6>Sign Up</h6>
                                    <p class="small">Use the form above to join FCOS and subscribe to our newsletter</p>
                                </div>
                                <div class="col-md-4 text-center mb-3">
                                    <div class="badge bg-success rounded-pill fs-4 mb-2">2</div>
                                    <h6>Get Zoom Links</h6>
                                    <p class="small">You'll receive monthly Zoom meeting links and passwords via email</p>
                                </div>
                                <div class="col-md-4 text-center mb-3">
                                    <div class="badge bg-success rounded-pill fs-4 mb-2">3</div>
                                    <h6>Join Meetings</h6>
                                    <p class="small">Attend your first meeting (2nd Thursday, 7 PM Pacific) and meet the community!</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Meeting Schedule -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-calendar"></i> Meeting Schedule</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <h5 class="text-success">Monthly Zoom Meetings</h5>
                                    <ul class="list-unstyled">
                                        <li><strong>When:</strong> Second Thursday of each month</li>
                                        <li><strong>Time:</strong> 7:00 PM - 9:00 PM (Pacific Time)</li>
                                        <li><strong>Format:</strong> Zoom video conference</li>
                                        <li><strong>Access:</strong> Links emailed to members monthly</li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <div class="alert alert-info">
                                        <h6><i class="fas fa-globe"></i> Global Welcome!</h6>
                                        <p class="small mb-0">We attract participants from around the world - all time zones welcome!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Special Events -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-star"></i> Special Events for Members</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="border-start border-success border-3 ps-3 mb-3">
                                        <h6 class="text-success">OrchidFest (Annual)</h6>
                                        <p class="small mb-1">Our signature orchid show and sale</p>
                                        <ul class="small">
                                            <li>FREE admission for members</li>
                                            <li>Meet vendors and experts</li>
                                            <li>Hands-on demonstrations</li>
                                            <li>Awards competition</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="border-start border-success border-3 ps-3 mb-3">
                                        <h6 class="text-success">Social Gatherings</h6>
                                        <p class="small mb-1">In-person events twice per year</p>
                                        <ul class="small">
                                            <li>Summer BBQ with silent auction</li>
                                            <li>Holiday party with potluck</li>
                                            <li>Field trips to nurseries</li>
                                            <li>Garden center talks</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- FAQ -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-question-circle"></i> Frequently Asked Questions</h3>
                        </div>
                        <div class="card-body">
                            <div class="accordion" id="joinFAQ">
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                            Do I need to live in California to join?
                                        </button>
                                    </h2>
                                    <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#joinFAQ">
                                        <div class="accordion-body">
                                            <strong>Not at all!</strong> While we're based on the Central California Coast, our Zoom meetings attract members from around the world. Many of our growing techniques apply globally, and our community welcomes orchid enthusiasts everywhere.
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                            I'm a complete beginner - is this for me?
                                        </button>
                                    </h2>
                                    <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#joinFAQ">
                                        <div class="accordion-body">
                                            <strong>Absolutely!</strong> We specialize in helping beginners succeed. Our motto is "everyone's thumb can turn a little greener." Start with one orchid on your windowsill - we'll help you keep it alive and thriving.
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                            What if I miss a meeting?
                                        </button>
                                    </h2>
                                    <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#joinFAQ">
                                        <div class="accordion-body">
                                            <strong>No problem!</strong> We understand life happens. Many presentations are recorded and available to members. Plus, our monthly newsletter keeps you updated on what you missed.
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                            Are there membership fees?
                                        </button>
                                    </h2>
                                    <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#joinFAQ">
                                        <div class="accordion-body">
                                            Please use the membership signup form above for current pricing information. Your membership includes all the benefits listed, plus you save money on events like OrchidFest.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Contact Info -->
                    <div class="card mb-5">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-envelope"></i> Questions?</h3>
                        </div>
                        <div class="card-body">
                            <p>Have questions about membership or need help with the signup process?</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Contact Us</h6>
                                    <p class="small">Use our <a href="/contact">"Contact Us"</a> page to send questions about membership, meetings, or anything else.</p>
                                </div>
                                <div class="col-md-6">
                                    <h6>Try Before You Join</h6>
                                    <p class="small">Contact us to request a one-time Zoom meeting link and experience our community before joining!</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Final Call to Action -->
            <div class="text-center mb-5">
                <div class="card d-inline-block bg-light">
                    <div class="card-body">
                        <h4 class="text-success mb-3"><i class="fas fa-seedling"></i> Ready to Grow Better Orchids?</h4>
                        <p class="mb-3">Join our friendly community of orchid enthusiasts today!</p>
                        <a href="https://lp.constantcontactpages.com/sl/2eiSzYb" target="_blank" class="btn btn-success btn-lg">
                            <i class="fas fa-user-plus"></i> Join Five Cities Orchid Society
                        </a>
                        <p class="text-muted mt-3 small">Next meeting: Second Thursday of the month at 7 PM Pacific</p>
                    </div>
                </div>
            </div>

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