{% extends "base.html" %}
{% set page_title = "FCOS Merchandise - 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">FCOS Merchandise</h1>
                <p class="lead text-muted">Support Five Cities Orchid Society with official merchandise</p>
            </div>

            <div class="row">
                <div class="col-lg-8 mx-auto">
                    
                    <!-- Coming Soon Notice -->
                    <div class="card mb-5 border-info">
                        <div class="card-header bg-info text-white">
                            <h3 class="mb-0 text-center"><i class="fas fa-shopping-cart"></i> FCOS Store Coming Soon!</h3>
                        </div>
                        <div class="card-body text-center">
                            <p class="lead">We're working on bringing you official FCOS merchandise to show your orchid pride!</p>
                            <p>Items planned include t-shirts, hats, mugs, and orchid care accessories featuring our logo and orchid-themed designs.</p>
                        </div>
                    </div>

                    <!-- Planned Merchandise -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-tshirt"></i> Planned Merchandise</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="text-success">Apparel</h5>
                                    <ul>
                                        <li><i class="fas fa-check text-success"></i> <strong>FCOS T-Shirts</strong> - Cotton and moisture-wicking options</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Logo Polo Shirts</strong> - Perfect for gardening</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Baseball Caps</strong> - Sun protection while orchid hunting</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Orchid-themed Aprons</strong> - For potting and greenhouse work</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="text-success">Accessories</h5>
                                    <ul>
                                        <li><i class="fas fa-check text-success"></i> <strong>Coffee Mugs</strong> - Start your day with FCOS pride</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Water Bottles</strong> - Stay hydrated while caring for orchids</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Tote Bags</strong> - Perfect for orchid shows and markets</li>
                                        <li><i class="fas fa-check text-success"></i> <strong>Bumper Stickers</strong> - Spread the orchid love</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Orchid Care Items -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-leaf"></i> Orchid Care Accessories</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="text-success">Growing Supplies</h5>
                                    <ul>
                                        <li><strong>FCOS Plant Labels</strong> - Professional identification</li>
                                        <li><strong>Orchid Care Cards</strong> - Quick reference guides</li>
                                        <li><strong>Humidity Trays</strong> - FCOS-recommended sizes</li>
                                        <li><strong>Spray Bottles</strong> - Perfect misting tools</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="text-success">Educational Materials</h5>
                                    <ul>
                                        <li><strong>Growing Guides</strong> - Coastal California specific</li>
                                        <li><strong>Species ID Wheels</strong> - Quick identification</li>
                                        <li><strong>Care Calendars</strong> - Monthly to-do guides</li>
                                        <li><strong>Member Video Collections</strong> - DVD/digital access</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Special Collections -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-star"></i> Special Collections</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 text-center mb-3">
                                    <i class="fas fa-trophy fa-3x text-success mb-2"></i>
                                    <h6>OrchidFest Collection</h6>
                                    <p class="small">Limited edition items commemorating our annual show</p>
                                </div>
                                <div class="col-md-4 text-center mb-3">
                                    <i class="fas fa-calendar fa-3x text-success mb-2"></i>
                                    <h6>33rd Anniversary</h6>
                                    <p class="small">Celebrate over three decades of orchid education</p>
                                </div>
                                <div class="col-md-4 text-center mb-3">
                                    <i class="fas fa-map-marker-alt fa-3x text-success mb-2"></i>
                                    <h6>Central Coast Collection</h6>
                                    <p class="small">Items featuring our beautiful coastal location</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Design Themes -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-palette"></i> Design Themes</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-success"><i class="fas fa-image"></i> Featured Orchid Photos</h6>
                                    <p class="small">Merchandise featuring stunning photos from our member collection, including:</p>
                                    <ul class="small">
                                        <li>Vanda Pachong Blue (temperature tolerant)</li>
                                        <li>Laelia tenebrosa (Best in Show winner)</li>
                                        <li>Member greenhouse highlights</li>
                                        <li>OrchidFest award winners</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-success"><i class="fas fa-quote-left"></i> Inspiring Messages</h6>
                                    <p class="small">Merchandise featuring our favorite orchid quotes:</p>
                                    <ul class="small">
                                        <li>"We Help Our Members Grow Better Orchids"</li>
                                        <li>"Everyone's Thumb Can Turn Greener"</li>
                                        <li>"Five Cities Orchid Society - Since 1992"</li>
                                        <li>"Growing Together on the Central Coast"</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- How Purchases Help -->
                    <div class="card mb-4 bg-light">
                        <div class="card-header bg-success text-white">
                            <h3 class="mb-0"><i class="fas fa-heart"></i> How Your Purchase Helps</h3>
                        </div>
                        <div class="card-body">
                            <p class="lead">Every merchandise purchase directly supports FCOS activities:</p>
                            <div class="row">
                                <div class="col-md-4">
                                    <h6 class="text-success">• OrchidFest Support</h6>
                                    <p class="small">Help fund our annual orchid show and sale</p>
                                </div>
                                <div class="col-md-4">
                                    <h6 class="text-success">• Educational Programs</h6>
                                    <p class="small">Support guest speakers and educational materials</p>
                                </div>
                                <div class="col-md-4">
                                    <h6 class="text-success">• Community Outreach</h6>
                                    <p class="small">Fund garden talks and public education</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Current Alternatives -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-shopping-bag"></i> Meanwhile, Support FCOS</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="text-success">Become a Member</h5>
                                    <p>The best way to support FCOS is by becoming a member and joining our community of orchid enthusiasts.</p>
                                    <a href="/fcos/how-to-join" class="btn btn-success">
                                        <i class="fas fa-user-plus"></i> Join FCOS
                                    </a>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="text-success">Attend OrchidFest</h5>
                                    <p>Support our vendors and enjoy our annual orchid show and sale. Admission helps fund future events.</p>
                                    <a href="/fcos/orchid-fest-2025" class="btn btn-outline-success">
                                        <i class="fas fa-star"></i> OrchidFest Info
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Stay Updated -->
                    <div class="card mb-5">
                        <div class="card-header">
                            <h3 class="text-primary mb-0"><i class="fas fa-bell"></i> Get Store Updates</h3>
                        </div>
                        <div class="card-body">
                            <p>Be the first to know when our merchandise store launches!</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Newsletter Subscribers</h6>
                                    <p class="small">Current newsletter subscribers will receive advance notice of store opening and special member discounts.</p>
                                </div>
                                <div class="col-md-6">
                                    <h6>Members Get Priority</h6>
                                    <p class="small">FCOS members will get early access to new merchandise and exclusive member pricing.</p>
                                </div>
                            </div>
                            <div class="text-center mt-3">
                                <a href="https://lp.constantcontactpages.com/sl/2eiSzYb" target="_blank" class="btn btn-primary me-2">
                                    <i class="fas fa-envelope"></i> Subscribe for Updates
                                </a>
                                <a href="/contact" class="btn btn-outline-primary">
                                    <i class="fas fa-question-circle"></i> Suggest Merchandise Ideas
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Thank You Message -->
            <div class="text-center mb-5">
                <div class="card d-inline-block">
                    <div class="card-body">
                        <h4 class="text-success mb-3"><i class="fas fa-seedling"></i> Thank You for Your Interest!</h4>
                        <p class="mb-0">Your enthusiasm for FCOS merchandise shows the strength of our orchid community.</p>
                    </div>
                </div>
            </div>

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