<?php
$default_image = PeepSo::get_asset('images/landing/register-bg.jpg');
?>
<div class="psa-gswizard">
<div class="progress-wrap">
    <div class="progress">
        <div class="progress-step" data-step="1"></div>
        <div class="progress-step" data-step="2"></div>
        <div class="progress-step" data-step="3"></div>
        <div class="progress-step" data-step="4"></div>
        <div class="progress-step" data-step="5"></div>
    </div>
    <div class="progress-labels">
        <span data-label="1">01 · Welcome</span>
        <span data-label="2">02 · Your community</span>
        <span data-label="3">03 · First impression</span>
        <span data-label="4">04 · Your path</span>
        <span data-label="5">05 · Go live</span>
    </div>
</div>

<div class="step-container">

<!-- STEP 1: WELCOME -->
<div class="step" id="step-1">
<div class="step-card">
    <div class="step-eyebrow">Welcome aboard</div>
    <h1 class="step-h1">You just chose to <em>own it</em>.</h1>
    <p class="step-lede">
        Your community lives on <strong>your site</strong>, in <strong>your database</strong>, under <strong>your domain</strong>. No platform between you and the people who care about what you're building. No algorithm deciding who sees what. No one can lock you out. This is the part most people don't think about until it's too late.
    </p>

    <div class="pillars">
        <div class="pillar">
            <span class="pillar-num">01</span>
            <h3 class="pillar-h">You keep <em>everything</em>.</h3>
            <p class="pillar-body">Members, posts, files, messages — all of it stays in your WordPress database. Export it, migrate it, back it up. It's yours. We don't spy, we don't mine, we don't sell.</p>
        </div>
        <div class="pillar">
            <span class="pillar-num">02</span>
            <h3 class="pillar-h">Members come <em>back to you</em>.</h3>
            <p class="pillar-body">Every visit is a visit to your site. Every session is attention your business captures — not Facebook's, not Circle's, not Skool's. Community traffic becomes return traffic becomes revenue.</p>
        </div>
        <div class="pillar">
            <span class="pillar-num">03</span>
            <h3 class="pillar-h">Built to <em>last</em>.</h3>
            <p class="pillar-body">We build the must-haves ourselves. You're not holding together a tower of 47 third-party add-ons from developers who may or may not still be around next year. Update PeepSo, it keeps working.</p>
        </div>
        <div class="pillar">
            <span class="pillar-num">04</span>
            <h3 class="pillar-h">Honest about <em>what works</em>.</h3>
            <p class="pillar-body">Communities thrive around real shared interest. Niche over vanity scale. We're here to help you build something that lasts — not sell you on being the next Facebook.</p>
        </div>
    </div>

    <div class="comparison-block">
        <div class="comparison-title">For the record</div>
        <div class="comparison-grid">
            <div class="comparison-col them">
                <h4>Renting a community on someone else's platform</h4>
                <ul>
                    <li>They own your members, your content, your relationship</li>
                    <li>Your competitor can target your people with ads</li>
                    <li>Rules change without warning</li>
                    <li>Ban, throttle, or shadowban with no appeal</li>
                    <li>When they pivot, you go with them</li>
                </ul>
            </div>
            <div class="comparison-col us">
                <h4>Running one on your own site with PeepSo</h4>
                <ul>
                    <li>You own every post, every member, every DM</li>
                    <li>Your community feeds your business directly</li>
                    <li>You set the rules. You change them. Or you don't.</li>
                    <li>No one can turn it off but you</li>
                    <li>When we add features, you get them. You stay put.</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="nav-gs">
        <div></div>
        <button class="button button-primary" onclick="nextStep()">Let's set it up →</button>
    </div>
</div>
</div>

<!-- STEP 2: COMMUNITY TYPE -->
<div class="step" id="step-2">
<div class="step-card">
    <div class="step-eyebrow">Tell us what you're building</div>
    <h1 class="step-h1">What kind of <em>community</em>?</h1>
    <p class="step-lede">
        This isn't small talk. Your answer shapes what we show you next — starter copy, example imagery, a realistic 90-day plan, and which integrations matter. Pick the closest fit. You can change it later.
    </p>

    <div class="type-grid">
        <button class="type-card" data-type="creator" onclick="selectType(this)">
            <span class="type-icon">🎓</span>
            <h3 class="type-h">Creator / Course</h3>
            <p class="type-desc">You teach, coach, or have an audience that wants to connect with each other and you.</p>
            <div class="type-examples">online courses, coaching, membership sites</div>
        </button>

        <button class="type-card" data-type="brand" onclick="selectType(this)">
            <span class="type-icon">🛍️</span>
            <h3 class="type-h">Brand / Store</h3>
            <p class="type-desc">You sell products. You want customers talking to each other on your site.</p>
            <div class="type-examples">bike shop, camera store, SaaS users</div>
        </button>

        <button class="type-card" data-type="professional" onclick="selectType(this)">
            <span class="type-icon">💼</span>
            <h3 class="type-h">Professional</h3>
            <p class="type-desc">Peers in your field. Jobs, knowledge sharing, real connections.</p>
            <div class="type-examples">designers, nurses, accountants</div>
        </button>

        <button class="type-card" data-type="hobby" onclick="selectType(this)">
            <span class="type-icon">🎯</span>
            <h3 class="type-h">Hobby / Interest</h3>
            <p class="type-desc">People who genuinely love the same specific thing. Deep, enthusiastic, long-lasting.</p>
            <div class="type-examples">mini painting, birding, homebrewing</div>
        </button>

        <button class="type-card" data-type="faith" onclick="selectType(this)">
            <span class="type-icon">🕊️</span>
            <h3 class="type-h">Faith / Spiritual</h3>
            <p class="type-desc">Your congregation, your seekers, your practice. Private, respectful, warm.</p>
            <div class="type-examples">parish, sangha, study circle</div>
        </button>

        <button class="type-card" data-type="support" onclick="selectType(this)">
            <span class="type-icon">🤝</span>
            <h3 class="type-h">Support / Recovery</h3>
            <p class="type-desc">People going through something together. Privacy and moderation matter more than scale.</p>
            <div class="type-examples">health, grief, recovery groups</div>
        </button>

        <button class="type-card" data-type="local" onclick="selectType(this)">
            <span class="type-icon">📍</span>
            <h3 class="type-h">Local / Geographic</h3>
            <p class="type-desc">Your neighborhood, your city, your region. Real-world anchor, online coordination.</p>
            <div class="type-examples">parents network, town forum</div>
        </button>

        <button class="type-card" data-type="other" onclick="selectType(this)">
            <span class="type-icon">✨</span>
            <h3 class="type-h">Something else</h3>
            <p class="type-desc">None of these quite fit. That's fine — we'll show you the general path.</p>
            <div class="type-examples">flexible, tune as you go</div>
        </button>
    </div>

    <div class="type-note">
        <strong>Honest note:</strong> niche communities with real shared interest outlast everything else. If you're unsure, pick the most specific option — that's usually the right answer.
    </div>

    <div class="nav-gs">
        <button class="button button-ghost" onclick="prevStep()">← Back</button>
        <button class="button button-primary" id="step-2-next" onclick="nextStep()" disabled>Continue →</button>
    </div>
</div>
</div>

<!-- STEP 3: FIRST IMPRESSION -->
<div class="step" id="step-3">
<div class="step-card">
    <div class="step-eyebrow">The front door</div>
    <h1 class="step-h1">What will new members <em>see</em>?</h1>
    <p class="step-lede">
        When someone lands on your community page for the first time, they decide in about 3 seconds whether this is for them. We've pre-filled some starter copy for your community type — edit freely, watch the preview update.
    </p>

    <div class="personalized-note" id="personalized-note">
        <strong>Pre-filled for your community type.</strong>
        We guessed based on what you picked. Tweak anything — or replace it entirely with your own words.
    </div>
    <div class="field-notice" id="step3-save-message"></div>

    <div class="split">
        <div class="form-stack">
            <div class="field-group">
                <label for="community-name">Community name</label>
                <input type="text" id="community-name" oninput="updatePreview()" placeholder="Your community's name">
                <div class="field-hint">Can be your brand, something descriptive, or something memorable. Change it anytime.</div>
            </div>

            <div class="field-group">
                <label for="community-tagline">One-sentence pitch</label>
                <textarea id="community-tagline" oninput="updatePreview()" placeholder="What's this community about, in one sentence?"></textarea>
                <div class="field-hint">The <strong>single most important line</strong> on this page. What does someone get by joining?</div>
            </div>

            <div class="field-group">
                <label for="community-cta">Join button text</label>
                <input type="text" id="community-cta" oninput="updatePreview()" placeholder="Get inside · Join us · Sign me up">
                <div class="field-hint">Specific is better than generic. A tailored CTA beats "Sign up" every time.</div>
            </div>

            <div class="field-group">
    <label>Background image</label>
    <div class="image-picker" id="image-picker">
        <!-- Populated by JS based on community type -->
    </div>
    <div class="field-notice" id="image-picker-empty"></div>
    <div class="image-actions">
        <button type="button" class="button button-ghost wp-media-button" id="image-upload-btn">Upload your own image</button>
        <button type="button" class="button button-invisible" id="image-remove-btn" style="display:none">Use default image</button>
        <span class="field-hint" id="image-source-note"></span>
    </div>
    <div class="field-hint">Pick one for now. Your selected preset will be copied to your own WordPress media library when you continue. You can also upload your own image instead.</div>
</div>
        </div>

        <div class="preview-wrap">
            <div class="preview-label">Live preview · What visitors see</div>
            <div class="preview-frame">
                <div class="preview-chrome">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="url">yoursite.com/community/</div>
                </div>
                <div class="preview-hero" id="preview-hero">
                    <div class="preview-name" id="preview-name"></div>
                    <div class="preview-tagline" id="preview-tagline"></div>
                    <div class="preview-cta" id="preview-cta"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="nav-gs">
        <button class="button button-ghost" onclick="prevStep()">← Back</button>
        <button class="button button-primary" id="step-3-next" onclick="nextStep()">Continue →</button>
    </div>
</div>
</div>

<!-- STEP 4: 90-DAY PATH -->
<div class="step" id="step-4">
<div class="step-card">
    <div class="step-eyebrow">The honest version</div>
    <h1 class="step-h1">Your first <em>90 days</em>.</h1>
    <p class="step-lede" id="path-lede">
        Here's what a realistic path looks like — not "launch to 10,000 members," but the actual milestones that separate communities that make it from the 70% that don't.
    </p>

    <div class="path-intro">
        <strong id="path-intro-title">Shared truth:</strong>
        <p id="path-intro-body">Every successful community starts with 5-10 real members who actually talk to each other. Do not try to launch to a crowd. Start small, keep it warm, let it grow.</p>
    </div>

    <div class="timeline" id="timeline"></div>

    <div class="nav-gs">
        <button class="button button-ghost" onclick="prevStep()">← Back</button>
        <button class="button button-primary" onclick="nextStep()">I'm ready →</button>
    </div>
</div>
</div>

<!-- STEP 5: GO LIVE -->
<div class="step" id="step-5">
<div class="step-card">
    <div class="celebrate">
        <div class="celebrate-mark">
            <svg viewBox="0 0 24 24"><polyline points="4 12 10 18 20 6"></polyline></svg>
        </div>
        <div class="step-eyebrow" style="justify-content: center; display: inline-flex;">You're set</div>
        <h1 class="step-h1" style="text-align: center;">Now — <em>go</em>.</h1>
        <p class="step-lede" style="margin-left: auto; margin-right: auto; text-align: center;">
            Your community is configured and ready. The technical part is done. The real work — the thing that actually matters — starts when you take one of the three actions below.
        </p>
    </div>

    <div class="actions-grid">
        <div class="action-card">
            <span class="action-num">01 — FIRST</span>
            <h3 class="action-h">Visit your community</h3>
            <p class="action-body">See what your members will see. Post something. Anything. The first post is always the hardest — get it out of the way.</p>
            <a href="<?php echo esc_url(PeepSo::get_page('activity')); ?>" class="action-link" target="_blank" rel="noopener noreferrer">Open community →</a>
        </div>

        <div class="action-card">
            <span class="action-num">02 — NEXT</span>
            <h3 class="action-h">Invite 5 people</h3>
            <p class="action-body">Not 500. Five. People who genuinely care about what you're building. Text them. Email them. Tell them why. They become your founding members.</p>
        </div>

        <div class="action-card">
            <span class="action-num">03 — LEARN</span>
            <h3 class="action-h">Read the playbook</h3>
            <p class="action-body">Practical guides from communities that actually made it. Short reads, no fluff — written by people who've done this, not generic community advice.</p>
            <a href="https://peepso.com/category/community-management/" class="action-link" target="_blank" rel="noopener noreferrer">Read more →</a>
        </div>
    </div>

    <div class="newsletter-box">
        <div class="newsletter-content">
            <strong>Get the PeepSo Community Playbook</strong>
            <p>Monthly notes from communities that outlasted the 70%. Tactical, honest, no spam.</p>
        </div>
        <div class="newsletter-form">
            <input type="email" placeholder="you@example.com" id="newsletter-email">
            <button onclick="subscribeNewsletter()">Sign me up</button>
        </div>
    </div>

    <div class="resources-block">
        <div class="resources-title">Need help? Here's where to look</div>
        <div class="resources-grid">
            <a href="https://peep.so/documentation" class="resource-link" target="_blank" rel="noopener noreferrer">
                <span class="resource-icon">📖</span>
                <span>
                    <strong>Documentation</strong>
                    Guides, setup walkthroughs, and FAQs
                </span>
            </a>
            <a href="https://www.youtube.com/c/peepso" class="resource-link" target="_blank" rel="noopener noreferrer">
                <span class="resource-icon">🎥</span>
                <span>
                    <strong>YouTube channel</strong>
                    Video walkthroughs for every major feature
                </span>
            </a>
            <a href="https://peepso.com/contact" class="resource-link" target="_blank" rel="noopener noreferrer">
                <span class="resource-icon">💬</span>
                <span>
                    <strong>Contact support</strong>
                    Real humans. Real answers. We're happy to help.
                </span>
            </a>
            <a href="https://peepso.com/community" class="resource-link" target="_blank" rel="noopener noreferrer">
                <span class="resource-icon">👥</span>
                <span>
                    <strong>The PeepSo community</strong>
                    Meet other builders. Available with any paid license.
                </span>
            </a>
            <a href="https://peep.so/helloworld" class="resource-link" target="_blank" rel="noopener noreferrer">
                <span class="resource-icon">⚙️</span>
                <span>
                    <strong>Developer resources</strong>
                    Hooks, filters, API docs for building custom integrations
                </span>
            </a>
        </div>
    </div>

    <div class="upgrade-soft">
        <div class="upgrade-soft-eyebrow">When you're ready — not before</div>
        <h3 class="upgrade-soft-h">PeepSo Free gets you started.</h3>
        <p class="upgrade-soft-body">
            Groups, Friends, Media. Enough to build a real community. When you hit the wall — File uploads, Chat, Photos, Email digests, premium integrations, 24/7 support, mobile apps — they're there. Until then, focus on your first 10 members.
        </p>
        <a href="https://peepso.com/pricing/" class="upgrade-soft-link" target="_blank" rel="noopener noreferrer">See what premium unlocks →</a>
    </div>

    <div class="nav-gs">
        <button class="button button-ghost" onclick="prevStep()">← Back</button>
        <a href="<?php echo esc_url(admin_url('admin.php?page=peepso-installer')); ?>" class="button button-primary">See PeepSo Installer</a>
    </div>
</div>
</div>

</div>
