{% extends "main.html" %}

{% block extrahead %}
  {{ super() }}
  <script>
    // Add data attribute for CSS targeting
    document.body.setAttribute('data-md-template', 'home');
  </script>
{% endblock %}

{% block content %}
<div class="md-content--home">

<!-- Hero Grid Section -->
<section class="hero-grid">
    <div class="grid-container">
        <!-- Main Hero Block -->
        <div class="hero-main grid-card">
            <div class="meta-badge">🤯 This Site Runs On Changemaker Lite</div>
            <h1>The Only FOSS Political Campaign Stack</h1>
            <p>Stop paying $1,200/month to corporate platforms. Run your entire political campaign on $200 hardware with fewer corporate dependencies every day.</p>
            
            <div class="hero-ctas">
                <a href="#solution" class="btn btn-primary">See The Solution</a>
                <a href="#get-started" class="btn btn-secondary">Get Started $200</a>
            </div>
        </div>
        
        <!-- Problem Statement Block -->
        <div class="hero-problem grid-card">
            <h3>The Problem</h3>
            <div class="problem-list">
                <div class="problem-item">💸 NGP VAN: $1,000+/mo</div>
                <div class="problem-item">📧 Mailchimp: $200+/mo</div>
                <div class="problem-item">🔒 Your data: Their servers</div>
                <div class="problem-item">👁️ Surveillance: Always on</div>
            </div>
        </div>
        
        <!-- Solution Stats Block -->
        <div class="hero-stats grid-card">
            <h3>The Solution</h3>
            <div class="stat-grid">
                <div class="stat-item">
                    <div class="stat-number">$200</div>
                    <div class="stat-label">One-time cost</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">11</div>
                    <div class="stat-label">Campaign tools</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">100%</div>
                    <div class="stat-label">Your data</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">↓</div>
                    <div class="stat-label">Fewer corporate deps every day</div>
                </div>
            </div>
        </div>
        
        <!-- Trust Indicators -->
        <div class="hero-trust grid-card">
            <h3>Proven By</h3>
            <div class="trust-items">
                <div class="trust-item">
                    <span class="trust-icon">⚡</span>
                    <span class="trust-text">Powers BNKops.com</span>
                </div>
                <div class="trust-item">
                    <span class="trust-icon">🏳️‍⚧️</span>
                    <span class="trust-text">Trans liberation tech</span>
                </div>
                <div class="trust-item">
                    <span class="trust-icon">🛡️</span>
                    <span class="trust-text">Zero surveillance</span>
                </div>
                <div class="trust-item">
                    <span class="trust-icon">🚀</span>
                    <span class="trust-text">30-min setup</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Solution Grid -->
<section class="solution-grid" id="solution">
    <div class="grid-container">
        <div class="section-header">
            <h2>Everything Your Campaign Needs</h2>
            <p>Replace your entire SaaS stack with open source alternatives. <b>First free and open source canvassing solution included.</b></p>
        </div>
        
        <div class="services-grid">
            <!-- Code Server -->
            <div class="service-card grid-card">
                <div class="service-icon">💻</div>
                <h3>Code Server</h3>
                <div class="service-replaces">Replaces: VS Code</div>
                <ul class="service-features">
                    <li>Browser-based IDE</li>
                    <li>Customizable workspace</li>
                    <li>Live collaboration</li>
                </ul>
                <div class="service-tool">Code Server</div>
            </div>

            <!-- MkDocs -->
            <div class="service-card grid-card">
                <div class="service-icon">📖</div>
                <h3>Documentation</h3>
                <div class="service-replaces">Replaces: Confluence</div>
                <ul class="service-features">
                    <li>Markdown-based</li>
                    <li>Live preview</li>
                    <li>Static site generation</li>
                </ul>
                <div class="service-tool">MkDocs</div>
            </div>

            <!-- Listmonk -->
            <div class="service-card grid-card">
                <div class="service-icon">📧</div>
                <h3>Email Campaigns</h3>
                <div class="service-replaces">Replaces: Mailchimp</div>
                <ul class="service-features">
                    <li>Unlimited subscribers</li>
                    <li>A/B testing</li>
                    <li>Analytics</li>
                </ul>
                <div class="service-tool">Listmonk</div>
            </div>

            <!-- NocoDB -->
            <div class="service-card grid-card">
                <div class="service-icon">📊</div>
                <h3>Database & Canvassing</h3>
                <div class="service-replaces">Replaces: Airtable</div>
                <ul class="service-features">
                    <li>Contact management</li>
                    <li>Custom fields</li>
                    <li>Canvassing support</li>
                </ul>
                <div class="service-tool">NocoDB</div>
            </div>

            <!-- Map Viewer -->
            <div class="service-card grid-card">
                <div class="service-icon">🗺️</div>
                <h3>Interactive Maps</h3>
                <div class="service-replaces">Replaces: Google Maps</div>
                <ul class="service-features">
                    <li>Real-time geolocation</li>
                    <li>Custom map layers</li>
                    <li>Location management</li>
                </ul>
                <div class="service-tool">Map Viewer</div>
            </div>

            <!-- Automation -->
            <div class="service-card grid-card">
                <div class="service-icon">🔄</div>
                <h3>Workflow Automation</h3>
                <div class="service-replaces">Replaces: Zapier</div>
                <ul class="service-features">
                    <li>Workflow builder</li>
                    <li>API connections</li>
                    <li>Event triggers</li>
                </ul>
                <div class="service-tool">n8n</div>
            </div>

            <!-- QR Code Generator -->
            <div class="service-card grid-card">
                <div class="service-icon">📱</div>
                <h3>QR Code Generator</h3>
                <div class="service-replaces">Replaces: QR Code SaaS</div>
                <ul class="service-features">
                    <li>Customizable codes</li>
                    <li>Batch generation</li>
                    <li>Static and dynamic codes</li>
                </ul>
                <div class="service-tool">Mini QR</div>
            </div>

            <!-- Gitea -->
            <div class="service-card grid-card">
                <div class="service-icon">🔧</div>
                <h3>Version Control</h3>
                <div class="service-replaces">Replaces: GitHub</div>
                <ul class="service-features">
                    <li>Self-hosted Git</li>
                    <li>Collaborative development</li>
                    <li>Issue tracking</li>
                </ul>
                <div class="service-tool">Gitea</div>
            </div>
        </div>
    </div>
</section>

<!-- Comparison Grid -->
<section class="comparison-grid">
    <div class="grid-container">
        <div class="section-header">
            <h2>Corporate SaaS vs Changemaker Lite</h2>
            <p>Why campaigns are switching to self-hosted FOSS</p>
        </div>
        
        <div class="comparison-table">
            <div class="comparison-header grid-card">
                <div></div>
                <div class="compare-col">Corporate SaaS</div>
                <div class="compare-col highlight">Changemaker Lite</div>
            </div>
            
            <div class="comparison-row grid-card">
                <div class="compare-label">Monthly Cost</div>
                <div class="compare-value bad">$1,200+</div>
                <div class="compare-value good">$50 hosting</div>
            </div>
            
            <div class="comparison-row grid-card">
                <div class="compare-label">Data Ownership</div>
                <div class="compare-value bad">Their servers</div>
                <div class="compare-value good">100% yours</div>
            </div>
            
            <div class="comparison-row grid-card">
                <div class="compare-label">Surveillance</div>
                <div class="compare-value bad">Always tracked</div>
                <div class="compare-value good">Zero tracking</div>
            </div>
            
            <div class="comparison-row grid-card">
                <div class="compare-label">Vendor Lock-in</div>
                <div class="compare-value bad">Trapped forever</div>
                <div class="compare-value good">Export anytime</div>
            </div>
            
            <div class="comparison-row grid-card">
                <div class="compare-label">Customization</div>
                <div class="compare-value bad">Limited options</div>
                <div class="compare-value good">Full control</div>
            </div>
        </div>
    </div>
</section>

<!-- Get Started Grid -->
<section class="get-started-grid" id="get-started">
    <div class="grid-container">
        <div class="section-header">
            <h2>Start Your Digital Liberation</h2>
            <p>Three ways to break free from corporate campaign tech</p>
        </div>
        
        <div class="options-grid">
            <!-- Plug & Play -->
            <div class="option-card grid-card featured">
                <div class="option-badge">Most Popular</div>
                <div class="option-icon">🚀</div>
                <h3>Plug & Play</h3>
                <div class="option-price">$200</div>
                <div class="option-features">
                    <div class="feature">✓ Pre-configured hardware</div>
                    <div class="feature">✓ 30-minute setup</div>
                    <div class="feature">✓ All 11 services ready</div>
                    <div class="feature">✓ Priority support</div>
                    <div class="feature">✓ Ships on request</div>
                </div>
                <a href="https://bnkops.com/hardware" class="btn btn-primary">Order Hardware</a>
            </div>
            
            <!-- DIY -->
            <div class="option-card grid-card">
                <div class="option-icon">🛠️</div>
                <h3>DIY Install</h3>
                <div class="option-price">Free</div>
                <div class="option-features">
                    <div class="feature">✓ Use your hardware</div>
                    <div class="feature">✓ Docker compose</div>
                    <div class="feature">✓ Full documentation</div>
                    <div class="feature">✓ Community support</div>
                    <div class="feature">✓ Learn the system</div>
                </div>
                <a href="/getting-started/" class="btn btn-secondary">Install Guide</a>
            </div>
            
            <!-- Managed -->
            <div class="option-card grid-card">
                <div class="option-icon">☁️</div>
                <h3>Managed Hosting</h3>
                <div class="option-price">$???/mo</div>
                <div class="option-features">
                    <div class="feature">✓ We manage everything</div>
                    <div class="feature">✓ Your domain</div>
                    <div class="feature">✓ Daily backups</div>
                    <div class="feature">✓ 24/7 monitoring</div>
                    <div class="feature">✓ Still your data</div>
                </div>
                <a href="https://bnkops.com/hosting" class="btn btn-secondary">Learn More</a>
            </div>
        </div>
        
        <!-- Final CTA -->
        <div class="final-cta grid-card">
            <h3>Join the Movement</h3>
            <p>Some of the biggest players in local politics are already using it; maybe give it a try?</p>
            <div class="cta-buttons">
                <a href="https://bnkops.com/newsletter" class="btn btn-primary">Get Campaign Tips</a>
                <a href="https://docs.bnkops.com" class="btn btn-secondary">Read Documentation</a>
            </div>
        </div>
        <!-- Subscribe Card -->
        <div class="subscribe-card grid-card">
          <h3>Subscribe</h3>
          <form action="https://newsletter.bnkops.com/subscription/form" method="POST" target="_blank" autocomplete="off">
            <input type="hidden" name="nonce">
            <p>
              <input type="email" name="email" required placeholder="E-mail">
            </p>
            <p>
              <input type="text" name="name" placeholder="Name (optional)">
            </p>
            <p>
              <input id="48b84" type="checkbox" name="l" checked value="48b841e7-841b-458b-95f8-63903a1c0912">
              <label for="48b84">~ Weekly Updates</label>
            </p>
            <input type="submit" value="Subscribe" class="action-btn primary">
          </form>
        </div>
    </div>
</section>

</div>
{% endblock %}