{{template "main.html" .}}

{{define "title"}}ReadySite — The AI-Native WordPress Alternative{{end}}

{{define "head_extra"}}
<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=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<style>
    .hero-headline { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
</style>
{{end}}

{{define "body_scripts"}}
<script src="/static/js/home.js"></script>
{{end}}

{{define "content"}}

<!-- ============================================
     SECTION 1: Hero
     ============================================ -->
<section class="relative min-h-[90vh] flex items-center overflow-hidden dot-grid pt-24">
    <!-- Background glow -->
    <div class="hero-glow" style="top: -200px; left: 50%; transform: translateX(-50%);"></div>

    <div class="max-w-6xl mx-auto px-6 py-24 w-full">
        <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
            <!-- Text -->
            <div class="flex-1 text-center lg:text-left">
                <div class="status-pill mb-8 inline-flex">
                    <span class="status-dot"></span>
                    <span>Open Source</span>
                </div>

                <h1 class="hero-headline text-5xl sm:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-6 leading-[1.1]">
                    <span class="gradient-text">ReadySite</span> is<br>
                    like WordPress<br>
                    but built for <span class="gradient-text">AI.</span>
                </h1>

                <p class="text-lg sm:text-xl text-[#888] mb-10 leading-relaxed max-w-lg mx-auto lg:mx-0">
                    The open-source CMS where AI builds your site &mdash; pages, data, content, all of it. Significantly faster. No plugins required.
                </p>

                {{if auth.IsAuthenticated}}
                <div class="flex flex-col sm:flex-row items-center gap-4 justify-center lg:justify-start">
                    <a href="/sites" class="w-full sm:w-auto px-10 py-4 bg-white text-black font-semibold rounded-xl hover:bg-[#e5e5e5] transition-colors text-lg text-center">
                        Go to Dashboard &rarr;
                    </a>
                    <a href="/git" class="w-full sm:w-auto px-8 py-3.5 border border-white/15 text-white font-medium rounded-lg hover:bg-white/5 hover:border-white/25 transition-all text-base text-center">
                        View Source
                    </a>
                </div>
                {{else}}
                <div id="hero-signup">
                    <form hx-post="/signup" hx-target="#hero-signup" hx-swap="innerHTML" class="flex flex-col sm:flex-row items-center gap-3 justify-center lg:justify-start max-w-md mx-auto lg:mx-0">
                        <input type="email" name="email" required placeholder="you@example.com"
                            class="w-full sm:flex-1 px-5 py-4 bg-white/[0.03] border border-white/10 text-white rounded-xl placeholder-[#555] focus:outline-none focus:border-violet-500/50 focus:bg-white/[0.05] transition-all text-base">
                        <button type="submit" class="w-full sm:w-auto px-10 py-4 bg-white text-black font-semibold rounded-xl hover:bg-[#e5e5e5] transition-colors text-lg whitespace-nowrap">
                            Start for Free &rarr;
                        </button>
                    </form>
                    <p class="text-[#555] text-xs mt-3 text-center lg:text-left">We'll send a magic link &mdash; no password needed. Your site goes live instantly.</p>
                    <div class="flex items-center justify-center lg:justify-start gap-3 mt-4">
                        <a href="#differentiators" class="px-6 py-2.5 border border-white/10 text-[#888] text-sm rounded-lg hover:bg-white/5 hover:border-white/20 hover:text-white transition-all">
                            See why teams switch &darr;
                        </a>
                        <a href="/docs/developers" class="inline-flex items-center gap-2 px-6 py-2.5 border border-white/10 text-[#888] text-sm rounded-lg hover:bg-white/5 hover:border-white/20 hover:text-white transition-all">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                            For Developers &rarr;
                        </a>
                    </div>
                </div>
                {{end}}
            </div>

            <!-- Rocket Gopher -->
            <div class="flex-shrink-0">
                <img src="/static/gophers/rocket.svg" alt="Go gopher launching a rocket" class="gopher gopher-float w-64 lg:w-80">
            </div>
        </div>
    </div>
</section>

<!-- ============================================
     SECTION 2: What Makes Us Different — Bento Grid
     ============================================ -->
<section id="differentiators" class="py-24 px-6">
    <div class="max-w-6xl mx-auto">
        <div class="text-center mb-16 reveal">
            <h2 class="hero-headline text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">Everything WordPress does. <span class="gradient-text">Without the baggage.</span></h2>
            <p class="text-[#888] text-lg max-w-xl mx-auto">A modern CMS that replaces the entire WordPress stack &mdash; plugins, database, and all.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            <!-- Card 1: AI Replaces Plugins (tall, spans 2 rows) -->
            <div class="bento-card md:row-span-2 reveal" data-delay="0">
                <div class="bento-card-accent bg-violet-500"></div>
                <div class="flex flex-col h-full">
                    <div class="mb-6">
                        <div class="w-14 h-14 rounded-xl bg-violet-500/10 flex items-center justify-center text-violet-400">
                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                        </div>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">AI replaces your plugins</h3>
                    <p class="text-[#888] text-sm leading-relaxed mb-6">WordPress needs 50 plugins. ReadySite's AI does it natively. 39 tools that create pages, write content, build collections, and deploy &mdash; no third-party code required.</p>
                    <p class="text-[#888] text-sm leading-relaxed mt-auto">Describe what you want, watch it happen. No plugin conflicts, no update hell, no security patches.</p>
                </div>
            </div>

            <!-- Card 2: Built-in Database -->
            <div class="bento-card reveal" data-delay="100">
                <div class="bento-card-accent bg-cyan-500"></div>
                <div class="flex items-start gap-4 mb-4">
                    <div class="w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center text-cyan-400 flex-shrink-0">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3" stroke-width="2"/><path stroke-width="2" d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path stroke-width="2" d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
                    </div>
                </div>
                <h3 class="text-lg font-semibold text-white mb-2">Built-in Database</h3>
                <p class="text-[#888] text-sm leading-relaxed">Typed collections for products, posts, events &mdash; like custom post types, but actually good. No MySQL, no phpMyAdmin, no config files.</p>
            </div>

            <!-- Card 3: Undo Everything -->
            <div class="bento-card reveal" data-delay="200">
                <div class="bento-card-accent bg-emerald-500"></div>
                <div class="flex items-start gap-4 mb-4">
                    <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 flex-shrink-0">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a5 5 0 015 5v2M3 10l4-4m-4 4l4 4"/></svg>
                    </div>
                </div>
                <h3 class="text-lg font-semibold text-white mb-2">Undo Everything</h3>
                <p class="text-[#888] text-sm leading-relaxed">Full version history on every page. Undo/redo any AI change. Nothing is permanent until you want it to be.</p>
            </div>

            <!-- Card 4: Open Source (wide, spans 2 cols) -->
            <a href="/git" class="bento-card bento-card-link lg:col-span-2 reveal" data-delay="300">
                <div class="bento-card-accent bg-violet-500" style="background: linear-gradient(135deg, #8b5cf6, #22d3ee);"></div>
                <div class="flex flex-col sm:flex-row items-center gap-6">
                    <img src="/static/gophers/power-to-the-masses.svg" alt="Go gopher sharing power" class="gopher gopher-xs flex-shrink-0">
                    <div>
                        <h3 class="text-xl font-semibold text-white mb-2">Open Source. No Lock-in. Ever.</h3>
                        <p class="text-[#888] text-sm leading-relaxed">The CMS is MIT-licensed and open source. Use our cloud or self-host on your own servers. Export your data anytime. Your site is always yours.</p>
                    </div>
                </div>
            </a>

            <!-- Card 5: Fast by Design -->
            <div class="bento-card reveal" data-delay="400">
                <div class="bento-card-accent bg-cyan-500"></div>
                <div class="flex items-start gap-4 mb-4">
                    <div class="w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center text-cyan-400 flex-shrink-0">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    </div>
                </div>
                <h3 class="text-lg font-semibold text-white mb-2">Fast by Design</h3>
                <p class="text-[#888] text-sm leading-relaxed">Go + SQLite vs PHP + MySQL. ~100ms page loads vs ~800ms for WordPress. No caching plugins needed.</p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================
     SECTION 3: How It Works
     ============================================ -->
<section id="how-it-works" class="py-24 px-6 border-t border-white/5">
    <div class="max-w-4xl mx-auto">
        <h2 class="hero-headline text-3xl sm:text-4xl font-bold text-white mb-16 text-center reveal">Three steps. Zero DevOps.</h2>

        <div class="steps-container reveal">
            <div class="steps-line hidden md:block"></div>

            <div class="step-item reveal" data-delay="0">
                <div class="step-number text-white bg-violet-500">1</div>
                <div class="step-text">
                    <h3 class="text-white font-semibold mb-1 text-lg">Sign up</h3>
                    <p class="text-[#888] text-sm">Magic link &mdash; no passwords. Enter your email and click.</p>
                </div>
            </div>

            <div class="step-item reveal" data-delay="200">
                <div class="step-number text-white bg-cyan-500">2</div>
                <div class="step-text">
                    <h3 class="text-white font-semibold mb-1 text-lg">Describe your site</h3>
                    <p class="text-[#888] text-sm">Tell AI what you're building. It creates pages, content, and collections for you.</p>
                </div>
            </div>

            <div class="step-item reveal" data-delay="400">
                <div class="step-number text-white bg-emerald-500">3</div>
                <div class="step-text">
                    <h3 class="text-white font-semibold mb-1 text-lg">Go live</h3>
                    <p class="text-[#888] text-sm">Add your domain, attach services. Scale when you're ready.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================
     SECTION 4: WordPress Comparison Table
     ============================================ -->
<section id="comparison" class="relative py-24 px-6 border-t border-white/5">
    <div class="max-w-4xl mx-auto">
        <h2 class="hero-headline text-3xl sm:text-4xl font-bold text-white mb-4 text-center reveal">Same freedom. <span class="gradient-text">Modern everything else.</span></h2>
        <p class="text-[#888] text-lg mb-12 text-center max-w-xl mx-auto reveal" data-delay="100">WordPress proved open source could power the web. ReadySite picks up where it left off.</p>

        <div class="bento-card reveal" data-delay="200">
            <div class="bento-card-accent bg-violet-500"></div>
            <div class="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-white/10">
                            <th class="text-left text-[#888] font-medium py-3 pr-4"></th>
                            <th class="text-center text-[#666] font-medium py-3 px-4 w-36">WordPress</th>
                            <th class="text-center font-medium py-3 pl-4 w-36" style="color: #a78bfa;">ReadySite</th>
                        </tr>
                    </thead>
                    <tbody class="text-[#999]">
                        <tr class="border-b border-white/5">
                            <td class="py-3.5 pr-4 text-white font-medium">AI assistance</td>
                            <td class="text-center py-3.5 px-4 text-[#666]">Third-party plugins</td>
                            <td class="text-center py-3.5 pl-4 text-white">39 built-in tools</td>
                        </tr>
                        <tr class="border-b border-white/5">
                            <td class="py-3.5 pr-4 text-white font-medium">Database</td>
                            <td class="text-center py-3.5 px-4 text-[#666]">MySQL + plugins</td>
                            <td class="text-center py-3.5 pl-4 text-white">SQLite collections</td>
                        </tr>
                        <tr class="border-b border-white/5">
                            <td class="py-3.5 pr-4 text-white font-medium">Performance</td>
                            <td class="text-center py-3.5 px-4 text-[#666]">~800ms</td>
                            <td class="text-center py-3.5 pl-4 text-emerald-400">~100ms</td>
                        </tr>
                        <tr class="border-b border-white/5">
                            <td class="py-3.5 pr-4 text-white font-medium">Language</td>
                            <td class="text-center py-3.5 px-4 text-[#666]">PHP</td>
                            <td class="text-center py-3.5 pl-4 text-white">Go</td>
                        </tr>
                        <tr class="border-b border-white/5">
                            <td class="py-3.5 pr-4 text-white font-medium">Plugins needed</td>
                            <td class="text-center py-3.5 px-4 text-[#666]">50+ average</td>
                            <td class="text-center py-3.5 pl-4 text-emerald-400">0</td>
                        </tr>
                        <tr class="border-b border-white/5">
                            <td class="py-3.5 pr-4 text-white font-medium">Self-hostable</td>
                            <td class="text-center py-3.5 px-4 text-emerald-500">&#10003;</td>
                            <td class="text-center py-3.5 pl-4 text-emerald-500">&#10003; (MIT)</td>
                        </tr>
                        <tr>
                            <td class="py-3.5 pr-4 text-white font-medium">Deployment</td>
                            <td class="text-center py-3.5 px-4 text-[#666]">Server + config</td>
                            <td class="text-center py-3.5 pl-4 text-white">Click or <code class="text-xs bg-white/5 px-1.5 py-0.5 rounded">docker run</code></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<!-- ============================================
     SECTION 5: Open Source
     ============================================ -->
<section class="py-24 px-6 border-t border-white/5">
    <div class="max-w-6xl mx-auto">
        <div class="grid md:grid-cols-2 gap-16 items-center">
            <!-- Left: Explanation -->
            <div class="reveal">
                <h2 class="hero-headline text-3xl md:text-4xl font-bold text-white mb-6">Your site, your rules</h2>
                <div class="space-y-4 text-[#888] leading-relaxed">
                    <p><span class="text-white font-medium">ReadySite CMS is fully open source (MIT).</span> Run it anywhere &mdash; your laptop, your servers, your cloud.</p>
                    <p><span class="text-white font-medium">ReadySite Cloud is our managed hosting</span> &mdash; we handle servers, SSL, updates, and backups so you don't have to.</p>
                    <p><span class="text-white font-medium">Your data is always exportable.</span> If WordPress taught us anything, it's that open source must mean real freedom. No lock-in, ever. Switch between self-hosted and cloud anytime.</p>
                </div>
            </div>

            <!-- Right: Two cards -->
            <div class="grid sm:grid-cols-2 gap-4 reveal" data-delay="100">
                <a href="/docs/docker" class="group block p-6 rounded-xl border border-white/10 bg-white/[0.02] hover:bg-white/[0.05] hover:border-white/20 transition-all">
                    <div class="w-10 h-10 rounded-lg bg-violet-500/10 flex items-center justify-center text-violet-400 mb-4">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </div>
                    <h3 class="text-white font-semibold mb-2">Self-Host</h3>
                    <p class="text-[#666] text-sm leading-relaxed mb-4">MIT License. Run on your own servers. Full control.</p>
                    <span class="text-violet-400 text-sm font-medium group-hover:underline">Get started &rarr;</span>
                </a>
                <a href="/pricing" class="group block p-6 rounded-xl border border-white/10 bg-white/[0.02] hover:bg-white/[0.05] hover:border-white/20 transition-all">
                    <div class="w-10 h-10 rounded-lg bg-cyan-500/10 flex items-center justify-center text-cyan-400 mb-4">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg>
                    </div>
                    <h3 class="text-white font-semibold mb-2">Cloud</h3>
                    <p class="text-[#666] text-sm leading-relaxed mb-4">Managed hosting. Free tier. Instant setup.</p>
                    <span class="text-cyan-400 text-sm font-medium group-hover:underline">See pricing &rarr;</span>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ============================================
     SECTION 6: CMS Features
     ============================================ -->
<div class="border-t border-white/10">
    <div class="max-w-6xl mx-auto px-6 py-24">
        <div class="grid md:grid-cols-2 gap-16 items-center">
            <div>
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
                    A complete CMS. Not a page builder.
                </h2>
                <p class="text-[#888] mb-8 leading-relaxed">
                    Pages, collections, version history, and an AI assistant that understands your content. Everything WordPress needs plugins for, built in.
                </p>
                <ul class="space-y-4">
                    <li class="flex items-start gap-3">
                        <span class="text-emerald-500 mt-1">&#10003;</span>
                        <div>
                            <span class="text-white font-medium">Pages & Versioning</span>
                            <p class="text-[#666] text-sm">Create pages with full version history and draft/publish workflow. No revision plugins needed.</p>
                        </div>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="text-emerald-500 mt-1">&#10003;</span>
                        <div>
                            <span class="text-white font-medium">Collections & Documents</span>
                            <p class="text-[#666] text-sm">Define custom schemas for blogs, products, team members. Like custom post types, but with a real database.</p>
                        </div>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="text-emerald-500 mt-1">&#10003;</span>
                        <div>
                            <span class="text-white font-medium">AI Assistant</span>
                            <p class="text-[#666] text-sm">39 executable tools &mdash; not a chatbot with suggestions. AI creates pages, writes content, and manages your site directly.</p>
                        </div>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="text-emerald-500 mt-1">&#10003;</span>
                        <div>
                            <span class="text-white font-medium">REST API</span>
                            <p class="text-[#666] text-sm">Full API access for headless use cases and integrations. No WP REST API plugins required.</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="rounded-xl overflow-hidden border border-white/10">
                <img src="/static/readysite.png" alt="ReadySite Dashboard" class="w-full" />
            </div>
        </div>
    </div>
</div>

<!-- ============================================
     SECTION 7: Bottom CTA
     ============================================ -->
<section class="relative py-32 px-6 overflow-hidden border-t border-white/5">
    <div class="cta-glow" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>

    <div class="relative z-10 max-w-2xl mx-auto text-center">
        <div class="mb-8 reveal">
            <img src="/static/gophers/superhero.svg" alt="Go gopher superhero" class="gopher gopher-md mx-auto">
        </div>

        <h2 class="hero-headline text-4xl sm:text-5xl font-bold text-white mb-6 reveal" data-delay="100">Ready to build something?</h2>
        <p class="text-[#888] text-lg mb-10 reveal" data-delay="200">
            Free to start, yours to grow.
        </p>
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4 reveal" data-delay="300">
            <a href="/signup" class="inline-block px-12 py-5 bg-white text-black font-semibold rounded-xl hover:bg-[#e5e5e5] transition-colors text-lg">
                Start for Free &rarr;
            </a>
            <a href="/docs/docker" class="inline-block px-8 py-4 border border-white/15 text-[#888] font-medium rounded-xl hover:bg-white/5 hover:border-white/25 hover:text-white transition-all text-base">
                Or self-host it &rarr;
            </a>
        </div>
    </div>
</section>

{{end}}