@{
    ViewData["Title"] = "Finally finish your novel";
    ViewData["ShellClass"] = "marketing-shell";
}

<article class="marketing-home">
    <section class="marketing-hero reveal-section">
        <div class="marketing-container marketing-hero__grid">
            <div class="marketing-hero__copy">
                <p class="marketing-eyebrow">PlotWeaver Studio for novelists</p>
                <h1>Finally finish the novel you've always wanted to write.</h1>
                <p class="marketing-lead">
                    Organise characters, plot threads, timelines, and story details in one place so you can stop feeling overwhelmed and start making progress.
                </p>
                <div class="marketing-actions">
                    <a class="marketing-btn marketing-btn--primary" asp-controller="Account" asp-action="Register">Start Free Trial</a>
                    <a class="marketing-btn marketing-btn--secondary" href="#overview">Watch 2 Minute Overview</a>
                </div>
                <dl class="hero-proof" aria-label="PlotWeaver highlights">
                    <div>
                        <dt>9</dt>
                        <dd>story systems brought together</dd>
                    </div>
                    <div>
                        <dt>1</dt>
                        <dd>calm place to plan, draft, and revise</dd>
                    </div>
                </dl>
            </div>

            <div class="browser-frame hero-product" id="overview" aria-label="PlotWeaver Studio product preview">
                <div class="browser-frame__chrome" aria-hidden="true">
                    <span></span><span></span><span></span>
                </div>
                <div class="product-mockup">
                    <aside class="product-sidebar">
                        <strong>PlotWeaver</strong>
                        <span class="is-active">Story Health</span>
                        <span>Timeline</span>
                        <span>Characters</span>
                        <span>Plot Threads</span>
                        <span>Story Bible</span>
                    </aside>
                    <main class="product-main">
                        <div class="product-topline">
                            <div>
                                <small>Book 2 - The Ember Court</small>
                                <h2>Chapter 18 is ready to draft</h2>
                            </div>
                            <span>Continuity clear</span>
                        </div>
                        <div class="product-grid">
                            <section class="product-panel product-panel--wide">
                                <div class="mock-label">Pacing and emotional flow</div>
                                <div class="mock-chart" aria-hidden="true">
                                    <span style="--height: 42%"></span>
                                    <span style="--height: 63%"></span>
                                    <span style="--height: 36%"></span>
                                    <span style="--height: 72%"></span>
                                    <span style="--height: 54%"></span>
                                    <span style="--height: 88%"></span>
                                    <span style="--height: 58%"></span>
                                </div>
                            </section>
                            <section class="product-panel">
                                <div class="mock-label">Threads</div>
                                <div class="thread-list">
                                    <span>The missing heir</span>
                                    <span>Secret alliance</span>
                                    <span>Romance arc</span>
                                </div>
                            </section>
                            <section class="product-panel">
                                <div class="mock-label">Next focus</div>
                                <strong>Resolve the clue before scene 22.</strong>
                                <p>Three notes, two characters, one dangling promise.</p>
                            </section>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    </section>

    <section class="problem-intro reveal-section">
        <div class="marketing-container">
            <p class="marketing-eyebrow">Made for real drafting problems</p>
            <h2>Every writer faces these challenges. PlotWeaver helps solve them.</h2>
        </div>
    </section>

    <section class="problem-stack">
        <div class="marketing-container">
            <div class="problem-section reveal-section">
                <div class="problem-visual visual-notes" aria-hidden="true">
                    <span>motive changes here</span>
                    <span>Where is Mara?</span>
                    <span>clue payoff?</span>
                    <span>Book 1 promise</span>
                </div>
                <div class="problem-copy">
                    <p class="marketing-eyebrow">Losing track of story details</p>
                    <h3>Your story should feel alive, not impossible to remember.</h3>
                    <p>Keep characters, locations, objects, reveals, and world details connected to the scenes where they matter, so the important pieces stay visible while you write.</p>
                </div>
            </div>

            <div class="problem-section problem-section--reverse reveal-section">
                <div class="problem-visual visual-plot" aria-hidden="true">
                    <div class="plot-lane lane-gold"></div>
                    <div class="plot-lane lane-navy"></div>
                    <div class="plot-lane lane-rose"></div>
                    <div class="plot-node node-one"></div>
                    <div class="plot-node node-two"></div>
                    <div class="plot-node node-three"></div>
                </div>
                <div class="problem-copy">
                    <p class="marketing-eyebrow">Managing complex plots</p>
                    <h3>See the shape of your book before it tangles.</h3>
                    <p>Map main plots, subplots, clues, reveals, and romantic beats across chapters so you can spot thin stretches, crowded scenes, and missing payoffs early.</p>
                </div>
            </div>

            <div class="problem-section reveal-section">
                <div class="problem-visual visual-warning" aria-hidden="true">
                    <strong>Continuity Review</strong>
                    <span>Character knows the secret too early</span>
                    <span>Object changes location between scenes</span>
                    <span>Timeline gap needs a bridge</span>
                </div>
                <div class="problem-copy">
                    <p class="marketing-eyebrow">Continuity mistakes</p>
                    <h3>Catch contradictions before readers do.</h3>
                    <p>PlotWeaver surfaces timeline gaps, unresolved dependencies, and story details that no longer line up, helping your manuscript feel intentional and polished.</p>
                </div>
            </div>

            <div class="problem-section problem-section--reverse reveal-section">
                <div class="problem-visual visual-next" aria-hidden="true">
                    <small>Write next</small>
                    <strong>Draft Scene 31</strong>
                    <p>Reunite the sisters, reveal the forged letter, raise suspicion of Callan.</p>
                </div>
                <div class="problem-copy">
                    <p class="marketing-eyebrow">Knowing what to work on next</p>
                    <h3>Turn overwhelm into a clear next step.</h3>
                    <p>Use scene readiness, revision status, notes, and blockers to decide what deserves your attention today instead of rereading everything to get oriented.</p>
                </div>
            </div>

            <div class="problem-section reveal-section">
                <div class="problem-visual visual-docs" aria-hidden="true">
                    <span>Notebook</span>
                    <span>Spreadsheet</span>
                    <span>Draft notes</span>
                    <span>Loose ideas</span>
                    <span>Series bible</span>
                </div>
                <div class="problem-copy">
                    <p class="marketing-eyebrow">Drowning in notes and documents</p>
                    <h3>Bring the scattered pieces into one graceful workspace.</h3>
                    <p>Replace the pile of half-useful documents with an organised story bible that grows with your draft and stays connected to the work in progress.</p>
                </div>
            </div>

            <div class="problem-section problem-section--reverse reveal-section">
                <div class="problem-visual visual-relationships" aria-hidden="true">
                    <span class="person person-a">Lena</span>
                    <span class="person person-b">Orin</span>
                    <span class="person person-c">Mae</span>
                    <span class="person person-d">Ivo</span>
                </div>
                <div class="problem-copy">
                    <p class="marketing-eyebrow">Tracking character relationships</p>
                    <h3>Follow bonds, secrets, tension, and change.</h3>
                    <p>Track relationships as they evolve across scenes, including what characters know, what they believe, and how emotional pressure shifts through the story.</p>
                </div>
            </div>

            <div class="problem-section reveal-section">
                <div class="problem-visual visual-threads" aria-hidden="true">
                    <span>Set up</span>
                    <span>Complicate</span>
                    <span>Reveal</span>
                    <span>Pay off</span>
                </div>
                <div class="problem-copy">
                    <p class="marketing-eyebrow">Keeping plot threads organised</p>
                    <h3>Never lose a promise you made to the reader.</h3>
                    <p>Give each thread a visible lifecycle from introduction to resolution, whether it is a murder clue, family secret, magic rule, rivalry, or slow-burn confession.</p>
                </div>
            </div>

            <div class="problem-section problem-section--reverse reveal-section">
                <div class="problem-visual visual-series" aria-hidden="true">
                    <span>Book I</span>
                    <span>Book II</span>
                    <span>Book III</span>
                    <span>Future arc</span>
                </div>
                <div class="problem-copy">
                    <p class="marketing-eyebrow">Managing series and multiple books</p>
                    <h3>Plan the saga without flattening the book in front of you.</h3>
                    <p>Track arcs across books, preserve long-term reveals, and keep each instalment focused while still seeing how the series fits together.</p>
                </div>
            </div>

            <div class="problem-section reveal-section">
                <div class="problem-visual visual-flow" aria-hidden="true">
                    <div class="flow-line"></div>
                    <span style="--pos: 12%">Quiet</span>
                    <span style="--pos: 34%">Tension</span>
                    <span style="--pos: 61%">Break</span>
                    <span style="--pos: 84%">Climax</span>
                </div>
                <div class="problem-copy">
                    <p class="marketing-eyebrow">Understanding pacing and emotional flow</p>
                    <h3>Feel the rhythm of the novel as a whole.</h3>
                    <p>Review emotional intensity, purpose balance, revision state, and scene shape so the manuscript builds with confidence instead of drifting chapter by chapter.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="social-proof reveal-section">
        <div class="marketing-container">
            <div class="section-heading">
                <p class="marketing-eyebrow">Loved by story-obsessed writers</p>
                <h2>Authors use PlotWeaver to feel oriented again.</h2>
            </div>
            <div class="testimonial-grid">
                <figure>
                    <blockquote>"It feels like someone finally designed a planning tool for the way my fantasy series actually works."</blockquote>
                    <figcaption>Catherine Lynwood, women's fiction author</figcaption>
                </figure>
                <figure>
                    <blockquote>"I stopped losing clues in old documents. The whole mystery is visible now, including the red herrings."</blockquote>
                    <figcaption>Maya K., crime novelist</figcaption>
                </figure>
                <figure>
                    <blockquote>"PlotWeaver turned my revision from panic into decisions. I knew what to fix next."</blockquote>
                    <figcaption>Elena S., romance series author</figcaption>
                </figure>
            </div>
        </div>
    </section>

    <section class="founder-story reveal-section">
        <div class="marketing-container founder-story__grid">
            <div class="founder-mark" aria-hidden="true">PW</div>
            <div>
                <p class="marketing-eyebrow">Built by an author</p>
                <h2>Created by a novelist who needed the same calm.</h2>
                <p>
                    PlotWeaver Studio was created by a novelist who was tired of juggling Word documents, spreadsheets, notebooks, and sticky notes while writing complex stories.
                </p>
                <p>
                    The goal was simple: make a beautiful, dependable place where story structure, emotional logic, continuity, and the next writing step can live together.
                </p>
            </div>
        </div>
    </section>

    <section class="final-cta reveal-section">
        <div class="marketing-container final-cta__inner">
            <p class="marketing-eyebrow">Start with the story you already have</p>
            <h2>Ready to take control of your story?</h2>
            <p>Whether you're planning your first novel or managing an epic series, PlotWeaver Studio helps you write with confidence.</p>
            <a class="marketing-btn marketing-btn--primary" asp-controller="Account" asp-action="Register">Start Your Free Trial</a>
        </div>
    </section>
</article>

@section Scripts {
    <script>
        (() => {
            const sections = document.querySelectorAll(".reveal-section");
            if (!("IntersectionObserver" in window)) {
                sections.forEach((section) => section.classList.add("is-visible"));
                return;
            }

            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add("is-visible");
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.14 });

            sections.forEach((section) => observer.observe(section));
        })();
    </script>
}