<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BeanPool — Community Exchange for Local Neighborhoods</title>
    <meta name="description" content="BeanPool is a decentralized exchange platform that lets communities trade services, share resources, and fund local projects — peer-to-peer, no middlemen.">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='28' font-size='28'>🫘</text></svg>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Navigation Bar -->
    <nav id="navbar">
        <div class="nav-inner">
            <a href="#" class="logo">🫘 <span>BeanPool</span></a>
            <div class="nav-links">
                <a href="#how-it-works">How It Works</a>
                <a href="#features">Features</a>
                <a href="#live-nodes">Live Nodes</a>
                <a href="https://github.com/martyinspace/beanpool" target="_blank" rel="noopener" class="nav-github" title="View on GitHub">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
                </a>
                <a href="#get-started" class="nav-cta">Get Started</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="hero">
        <div class="hero-bg"></div>
        <div class="hero-content">
            <div class="hero-badge">📱 Native iOS & Android · Peer-to-Peer · Community-Owned</div>
            <h1>Exchange for <span class="gradient-text">Communities</span>,<br>Not Corporations</h1>
            <p class="hero-subtitle">BeanPool is a local exchange platform with a stunning native mobile application that lets neighborhoods trade services and share resources — peer-to-peer, no middlemen, no fees.</p>
            <div class="hero-actions">
                <a href="#get-started" class="btn btn-primary font-header">Start Your Node →</a>
                <a href="#how-it-works" class="btn btn-ghost">Learn More</a>
            </div>
            <div class="store-badges">
                <a href="https://apps.apple.com/au/app/bean-pool/id6761870086" target="_blank" rel="noopener" class="store-badge" title="Download on the App Store">
                    <svg width="135" height="40" viewBox="0 0 135 40" xmlns="http://www.w3.org/2000/svg">
                        <rect width="135" height="40" rx="7" fill="#000"/>
                        <rect x="0.5" y="0.5" width="134" height="39" rx="6.5" stroke="#A6A6A6" fill="none"/>
                        <text x="42" y="15" fill="#fff" font-family="Inter,sans-serif" font-size="8" font-weight="400">Download on the</text>
                        <text x="42" y="29" fill="#fff" font-family="Inter,sans-serif" font-size="16" font-weight="600">App Store</text>
                        <g transform="translate(10, 6) scale(0.58)">
                            <path d="M24.769 20.3c-.04-4.25 3.47-6.29 3.63-6.39-1.98-2.89-5.06-3.29-6.15-3.33-2.62-.27-5.11 1.54-6.44 1.54-1.33 0-3.38-1.5-5.56-1.46-2.86.04-5.5 1.66-6.97 4.22-2.97 5.16-.76 12.81 2.14 17 1.41 2.05 3.1 4.35 5.32 4.27 2.13-.09 2.94-1.38 5.52-1.38 2.58 0 3.3 1.38 5.56 1.34 2.3-.04 3.76-2.09 5.15-4.15 1.62-2.38 2.29-4.69 2.33-4.81-.05-.02-4.47-1.72-4.52-6.81z" fill="#fff"/>
                            <path d="M20.514 7.54c1.18-1.43 1.97-3.42 1.76-5.4-1.7.07-3.76 1.13-4.98 2.56-1.09 1.27-2.05 3.29-1.79 5.23 1.9.15 3.83-0.96 5.01-2.39z" fill="#fff"/>
                        </g>
                    </svg>
                </a>
                <a href="https://play.google.com/store/apps/details?id=org.beanpool.pillar&hl=en" target="_blank" rel="noopener" class="store-badge" title="Get it on Google Play">
                    <svg width="135" height="40" viewBox="0 0 135 40" xmlns="http://www.w3.org/2000/svg">
                        <rect width="135" height="40" rx="7" fill="#000"/>
                        <rect x="0.5" y="0.5" width="134" height="39" rx="6.5" stroke="#A6A6A6" fill="none"/>
                        <text x="47" y="15" fill="#fff" font-family="Inter,sans-serif" font-size="8" font-weight="400">GET IT ON</text>
                        <text x="47" y="29" fill="#fff" font-family="Inter,sans-serif" font-size="14" font-weight="600">Google Play</text>
                        <g transform="translate(10, 7)">
                            <path d="M4 1.5L17 13 4 24.5V1.5z" fill="#4285F4"/>
                            <path d="M4 1.5L17 13l4.5-4L8 1.5H4z" fill="#34A853"/>
                            <path d="M4 24.5l4.5 0 13-8L17 13 4 24.5z" fill="#EA4335"/>
                            <path d="M8 1.5l13.5 7.5L24 7.5 8 0v1.5z" fill="#FBBC04"/>
                            <path d="M21.5 18.5L8 26v-1.5l13.5-7.5L24 18.5z" fill="#EA4335"/>
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    <!-- Live Nodes Map Section -->
    <section id="live-nodes">
        <div class="container">
            <div class="section-header">
                <h2>Find Your Local Exchange</h2>
                <p>Discover active local communities running BeanPool connecting people near you.</p>
            </div>
            <div class="map-wrapper">
                <div id="nodes-map"></div>
            </div>
            <div class="map-stats">
                <div class="map-stat">
                    <span class="map-stat-value" id="stat-nodes">—</span>
                    <span class="map-stat-label">Live Nodes</span>
                </div>
                <div class="map-stat-divider"></div>
                <div class="map-stat">
                    <span class="map-stat-value" id="stat-members">—</span>
                    <span class="map-stat-label">Community Members</span>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section id="how-it-works">
        <div class="container">
            <div class="section-header">
                <h2>How BeanPool Works</h2>
                <p>A community exchange where everyone starts at zero. Value flows from real services exchanged between real people — no money changes hands.</p>
            </div>
            <div class="steps-grid">
                <div class="step-card glass-panel">
                    <div class="step-icon">🏡</div>
                    <div class="step-number">01</div>
                    <h3>Start a Node</h3>
                    <p>Deploy a BeanPool node for your neighborhood, town, or community. It runs on any server — even a Raspberry Pi.</p>
                </div>
                <div class="step-card glass-panel">
                    <div class="step-icon">🤝</div>
                    <div class="step-number">02</div>
                    <h3>Invite Members</h3>
                    <p>Members join through a web-of-trust invitation tree. Each person is vouched for by someone already in the network.</p>
                </div>
                <div class="step-card glass-panel">
                    <div class="step-icon">🔄</div>
                    <div class="step-number">03</div>
                    <h3>Trade Services</h3>
                    <p>Post what you need or offer on the marketplace. When services are exchanged, your balance adjusts — positive for providers, negative for receivers.</p>
                </div>
                <div class="step-card glass-panel">
                    <div class="step-icon">🏛️</div>
                    <div class="step-number">04</div>
                    <h3>Fund Projects</h3>
                    <p>Demurrage (a tiny daily fee on idle balances) flows into a Community Commons pool. Members vote to fund local projects.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- App Preview Section -->
    <section id="app-preview">
        <div class="container">
            <img src="assets/screenshots/mockup_composite.png" alt="BeanPool native mobile app — Map and Marketplace views" class="mockup-img">
        </div>
    </section>

    <!-- Features Section -->
    <section id="features">
        <div class="container">
            <div class="section-header">
                <h2>Built Different</h2>
                <p>Not a blockchain. Not a startup. A platform owned by the communities that run it.</p>
            </div>
            <div class="features-grid">
                <div class="feature-card feature-highlight glass-panel">
                    <div class="feature-icon">🫘</div>
                    <div class="feature-content">
                        <h3>Balanced Exchange</h3>
                        <p>No money changes hands. When you provide a service, your balance goes up. When you receive one, it goes down. The community always balances to zero.</p>
                    </div>
                </div>
                <div class="feature-card glass-panel">
                    <div class="feature-icon">🗺️</div>
                    <h3>Local-First Marketplace</h3>
                    <p>An integrated marketplace with map pins, category tags, and the ability to browse needs and offers from connected nodes.</p>
                </div>
                <div class="feature-card glass-panel">
                    <div class="feature-icon">🌳</div>
                    <h3>Web of Trust</h3>
                    <p>Membership is managed through an invitation tree — not anonymous sign-ups. This keeps communities accountable and Sybil-resistant.</p>
                </div>
                <div class="feature-card glass-panel">
                    <div class="feature-icon">🛡️</div>
                    <h3>4-Tier Location Privacy</h3>
                    <p>Protect your private address. Automatically obscure your location at the Regional, Postal Code, or Neighborhood level while remaining mathematically verified.</p>
                </div>
                <div class="feature-card glass-panel">
                    <div class="feature-icon">🏛️</div>
                    <h3>Community Commons</h3>
                    <p>Demurrage (a small daily tax on idle balances) feeds a commons pool. Members propose and vote on projects to fund.</p>
                </div>
                <div class="feature-card glass-panel">
                    <div class="feature-icon">⭐</div>
                    <h3>Rating System</h3>
                    <p>Provider and receiver ratings build after each transaction, creating trust signals that are visible across the network.</p>
                </div>
                <div class="feature-card glass-panel">
                    <div class="feature-icon">💬</div>
                    <h3>Encrypted Messaging</h3>
                    <p>Communicate securely with other members to negotiate trades, share details, and organize community events using end-to-end encryption.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Get Started Section -->
    <section id="get-started">
        <div class="container">
            <div class="cta-card">
                <h2>Start Your Community Node</h2>
                <p>BeanPool runs anywhere Docker runs. Grab the source, configure your node identity, and bootstrap your community instantly.</p>
                
                <!-- macOS Style Terminal Window -->
                <div class="terminal-window">
                    <div class="terminal-header">
                        <div class="terminal-dots">
                            <span class="terminal-dot red"></span>
                            <span class="terminal-dot yellow"></span>
                            <span class="terminal-dot green"></span>
                        </div>
                        <div class="terminal-title">bash — setup-node</div>
                    </div>
                    <div class="terminal-body">
                        <div class="cta-step">
                            <span class="cta-step-label">Step 1: Clone Repository</span>
                            <code>git clone https://github.com/martyinspace/beanpool.git</code>
                            <button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
                            </button>
                        </div>
                        <div class="cta-step">
                            <span class="cta-step-label">Step 2: Configure Environment</span>
                            <code>cp .env.example .env  # Set community name & domain</code>
                            <button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
                            </button>
                        </div>
                        <div class="cta-step">
                            <span class="cta-step-label">Step 3: Launch Node Service</span>
                            <code>docker compose up -d</code>
                            <button class="copy-btn" onclick="copyCode(this)" title="Copy to clipboard">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
                            </button>
                        </div>
                    </div>
                </div>
                
                <a href="https://github.com/martyinspace/beanpool" class="btn btn-primary" target="_blank" rel="noopener">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="margin-right:0.4rem;"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
                    View on GitHub →
                </a>
            </div>
        </div>
    </section>

    <!-- Newsletter Section -->
    <section id="newsletter">
        <div class="container">
            <div class="newsletter-card glass-panel">
                <div class="newsletter-content">
                    <h3>🫘 Stay in the Loop</h3>
                    <p>Get notified about new releases, community events, and network milestones.</p>
                </div>
                <div class="newsletter-form-container">
                    <form id="newsletter-form" class="newsletter-form">
                        <input type="email" id="newsletter-email" placeholder="you@example.com" required>
                        <button type="submit" class="btn btn-primary btn-subscribe">Subscribe</button>
                    </form>
                    <div id="newsletter-status" class="newsletter-status"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer Module -->
    <footer>
        <div class="container">
            <div class="footer-inner">
                <div class="footer-brand">
                    <span class="logo">🫘 BeanPool</span>
                    <p>Community exchange for local neighborhoods.</p>
                </div>
                <div class="footer-links">
                    <a href="https://github.com/martyinspace/beanpool" target="_blank" rel="noopener">GitHub</a>
                    <a href="#how-it-works">How It Works</a>
                    <a href="#features">Features</a>
                    <a href="privacy.html">Privacy Policy</a>
                    <a href="terms.html">Terms of Service</a>
                </div>
            </div>
            <div class="footer-bottom">
                <p>Open source under MIT license. Made with 🫘 by communities, for communities.</p>
            </div>
        </div>
    </footer>

    <script src="main.js"></script>
</body>
</html>
