<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Add Months identifies the single change most likely to extend your lifespan. Private, local-first, no tracking.">
    <link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/assets/images/favicon.png">
    <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/assets/images/apple-touch-icon.png">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <h1>Identify the single change most likely to extend your life.</h1>
                    <p class="subheadline">Add Months analyzes your lifestyle and shows your Dominant Challenge — the factor with the greatest potential impact on your lifespan.</p>
                    <div class="hero-ctas">
                        <button class="btn btn-primary" onclick="openModal('ios')">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                            </svg>
                            Join iOS Beta
                        </button>
                        <button class="btn btn-primary" onclick="openModal('android')">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24c-1.44-.59-3.01-.9-4.47-.9s-3.03.31-4.47.9L5.65 5.67c-.19-.29-.51-.38-.79-.22-.3.16-.42.54-.26.85L6.4 9.48C3.3 11.25 1.28 14.44 1 18h22c-.28-3.56-2.3-6.75-5.4-8.52zM7 15.25c-.69 0-1.25-.56-1.25-1.25S6.31 12.75 7 12.75 8.25 13.31 8.25 14 7.69 15.25 7 15.25zm10 0c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/>
                            </svg>
                            Join Android Beta
                        </button>
                        <a href="#how-it-works" class="btn btn-secondary">How It Works</a>
                    </div>
                </div>
                <div class="hero-mockup">
                    <div class="phone-mockup" onclick="openModal('ios')">
                        <div class="mockup-placeholder">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
                            </svg>
                            <div>App Screenshot</div>
                            <div style="font-size: 0.75rem; margin-top: 4px;">Click to join beta</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section id="how-it-works" class="how-it-works">
        <div class="container">
            <div class="section-header">
                <h2>How It Works</h2>
            </div>
            <div class="steps">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3>Enter your baseline.</h3>
                    <p>Age, health status, and core lifestyle factors.</p>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <h3>Analyze your exposures.</h3>
                    <p>The app models conservative lifespan impacts using established population data.</p>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <h3>See your Dominant Challenge.</h3>
                    <p>The single change with the largest potential gain — right now.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- What It Is -->
    <section class="what-it-is">
        <div class="container">
            <div class="is-column">
                <h2>Add Months is:</h2>
                <ul class="is-list">
                    <li>A clarity tool.</li>
                    <li>Private and local.</li>
                    <li>Based on population-level risk modeling.</li>
                    <li>Designed for re-evaluation over time.</li>
                </ul>
            </div>
            <div class="isnt-column">
                <h2>Add Months is not:</h2>
                <ul class="isnt-list">
                    <li>Medical advice.</li>
                    <li>A habit tracker.</li>
                    <li>A social network.</li>
                    <li>A coaching app.</li>
                    <li>A data collection platform.</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Privacy -->
    <section class="privacy-section">
        <div class="container">
            <div class="privacy-content">
                <h2>Your data never leaves your device.</h2>
                <div class="privacy-bullets">
                    <span class="privacy-bullet">No accounts required</span>
                    <span class="privacy-bullet">No analytics</span>
                    <span class="privacy-bullet">No ads, ever</span>
                    <span class="privacy-bullet">Encrypted local storage</span>
                    <span class="privacy-bullet">Hard delete = permanent</span>
                </div>
                <p class="privacy-statement">We cannot see your inputs. We do not collect or sell behavioral data.</p>
            </div>
        </div>
    </section>

    <!-- Clarity -->
    <section class="clarity">
        <div class="container">
            <div class="clarity-content">
                <h2>Built for Clarity</h2>
                <p>Most health apps try to optimize everything. Add Months identifies the one lever that matters most — so you can focus your effort where it counts.</p>
                <p class="clarity-subtle">Re-run whenever your life changes.</p>
            </div>
        </div>
    </section>

    <!-- Download -->
    <section class="download-section">
        <div class="container">
            <div class="download-content">
                <h2>Get Early Access</h2>
                <p>Join the beta to be among the first to try Add Months.</p>
                <div class="app-badges">
                    <div class="app-badge" onclick="openModal('ios')">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                        </svg>
                        <div class="app-badge-text">
                            <div class="app-badge-small">Join the</div>
                            <div class="app-badge-big">iOS Beta</div>
                        </div>
                    </div>
                    <div class="app-badge" onclick="openModal('android')">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24c-1.44-.59-3.01-.9-4.47-.9s-3.03.31-4.47.9L5.65 5.67c-.19-.29-.51-.38-.79-.22-.3.16-.42.54-.26.85L6.4 9.48C3.3 11.25 1.28 14.44 1 18h22c-.28-3.56-2.3-6.75-5.4-8.52zM7 15.25c-.69 0-1.25-.56-1.25-1.25S6.31 12.75 7 12.75 8.25 13.31 8.25 14 7.69 15.25 7 15.25zm10 0c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/>
                        </svg>
                        <div class="app-badge-text">
                            <div class="app-badge-small">Join the</div>
                            <div class="app-badge-big">Android Beta</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-links">
                    <a href="<?php echo home_url('/privacy/'); ?>">Privacy</a>
                    <a href="<?php echo home_url('/terms/'); ?>">Terms</a>
                    <a href="<?php echo home_url('/disclaimer/'); ?>">Disclaimer</a>
                    <a href="https://help.addmonths.com">Help</a>
                </div>
                <div class="footer-copyright">
                    &copy; <?php echo date('Y'); ?> Add Months
                </div>
            </div>
        </div>
    </footer>

    <!-- Beta Signup Modal -->
    <div class="modal-overlay" id="signup-modal">
        <div class="modal">
            <button class="modal-close" onclick="closeModal()">&times;</button>

            <div class="signup-form" id="signup-form">
                <h2>Join the Beta</h2>
                <p>Enter your email to get early access when we launch.</p>

                <form id="beta-form">
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" name="email" required placeholder="you@example.com">
                    </div>
                    <div class="form-group">
                        <label for="platform">Platform</label>
                        <select id="platform" name="platform" required>
                            <option value="ios">iOS (TestFlight)</option>
                            <option value="android">Android</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary form-submit">Join Beta</button>
                </form>
            </div>

            <div class="form-success" id="form-success">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                </svg>
                <h3>You're on the list!</h3>
                <p>We'll email you when the beta is ready.</p>
            </div>
        </div>
    </div>

    <script>
    function openModal(platform) {
        document.getElementById('platform').value = platform;
        document.getElementById('signup-modal').classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        document.getElementById('signup-modal').classList.remove('active');
        document.body.style.overflow = '';
    }

    // Close modal on overlay click
    document.getElementById('signup-modal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });

    // Close modal on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeModal();
        }
    });

    // Handle form submission
    document.getElementById('beta-form').addEventListener('submit', function(e) {
        e.preventDefault();

        var email = document.getElementById('email').value;
        var platform = document.getElementById('platform').value;

        var formData = new FormData();
        formData.append('action', 'beta_signup');
        formData.append('email', email);
        formData.append('platform', platform);
        formData.append('nonce', '<?php echo wp_create_nonce("beta_signup_nonce"); ?>');

        fetch('<?php echo admin_url("admin-ajax.php"); ?>', {
            method: 'POST',
            body: formData
        })
        .then(function(response) { return response.json(); })
        .then(function(data) {
            document.getElementById('signup-form').classList.add('hidden');
            document.getElementById('form-success').classList.add('active');
        })
        .catch(function(error) {
            alert('Something went wrong. Please try again.');
        });
    });
    </script>

    <?php wp_footer(); ?>
</body>
</html>
