@{
    ViewData["Title"] = "Features";
    ViewData["ShellClass"] = "marketing-shell";
    const string Placeholder = "/images/features/feature-placeholder.webp";
}

<article class="marketing-home features-page">
    <section class="features-hero reveal-section">
        <div class="marketing-container features-hero__grid">
            <div class="features-hero__copy">
                <p class="marketing-eyebrow">PlotDirector features</p>
                <h1>All the tools.<br />One connected story.</h1>
                <p class="marketing-lead">
                    PlotDirector brings every part of your story together - plans, characters, places, objects, timelines, secrets and continuity - so you can focus on the bit that matters most: writing something unforgettable.
                </p>
                <div class="marketing-actions">
                    <a class="marketing-btn marketing-btn--primary" asp-controller="Account" asp-action="Register">Start your free trial</a>
                    <a class="marketing-btn marketing-btn--secondary" asp-route="@PublicRouteNames.Pricing">View pricing</a>
                </div>
                <div class="features-hero__highlights" aria-label="Feature highlights">
                    <article>
                        <strong>Everything connected</strong>
                        <span>Changes ripple through your story automatically.</span>
                    </article>
                    <article>
                        <strong>Stay consistent</strong>
                        <span>Spot continuity problems before your readers do.</span>
                    </article>
                    <article>
                        <strong>Write with confidence</strong>
                        <span>Know what happens when, where, and why.</span>
                    </article>
                </div>
            </div>
            <figure class="features-screenshot features-screenshot--hero">
                <img src="/images/features/hero-timeline.webp"
                     onerror="this.onerror=null;this.src='@Placeholder';"
                     width="1920"
                     height="1080"
                     alt="PlotDirector timeline overview with scenes, plot threads and story warnings." />
                <figcaption>Timeline overview with scenes, plot threads and story warnings.</figcaption>
            </figure>
        </div>
    </section>

    <nav class="features-jump reveal-section" aria-label="Jump to a feature area">
        <div class="marketing-container">
            <p class="marketing-eyebrow">Jump to a feature area</p>
            <div class="features-jump__grid">
                <a href="#plan">Plan Your Story</a>
                <a href="#create">Create &amp; Write</a>
                <a href="#world">Build Your World</a>
                <a href="#consistent">Stay Consistent</a>
                <a href="#experiment">Experiment</a>
                <a href="#publish">Publish &amp; Share</a>
                <a href="#word">Word Companion</a>
            </div>
        </div>
    </nav>

    <section class="features-section reveal-section" id="plan">
        <div class="marketing-container">
            <div class="features-section__heading">
                <p class="marketing-eyebrow">Plan your story</p>
                <h2>Lay the perfect foundation for your novel, series or screenplay.</h2>
                <p>See the big picture and the tiny details side by side, without turning your creative process into spreadsheet archaeology.</p>
            </div>
            <div class="features-preview-pair">
                <figure class="features-screenshot features-screenshot--product">
                    <img src="/images/features/timeline.webp"
                         onerror="this.onerror=null;this.src='@Placeholder';"
                         width="1920"
                         height="1080"
                         loading="lazy"
                         alt="PlotDirector main story timeline with readable landscape scene cards and plot thread lanes." />
                    <figcaption>Timeline with scenes and threads</figcaption>
                </figure>
                <figure class="features-screenshot features-screenshot--product">
                    <img src="/images/features/project-dashboard.webp"
                         onerror="this.onerror=null;this.src='@Placeholder';"
                         width="1920"
                         height="1080"
                         loading="lazy"
                         alt="PlotDirector project dashboard showing books, progress and story status." />
                    <figcaption>Project dashboard</figcaption>
                </figure>
            </div>
            <div class="features-icon-grid">
                <article class="feature-icon-card"><span aria-hidden="true">PB</span><h3>Projects, Books &amp; Chapters</h3><p>Organise your series, books and chapters in one clean workspace. Track progress, word counts, deadlines and status at a glance.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">TL</span><h3>Timeline</h3><p>Your story's command centre. Drag scenes, spot gaps, track threads and see your story unfold across time.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">PT</span><h3>Plot Threads</h3><p>Track every promise, mystery, conflict, reveal and payoff. Make sure the thing you set up in chapter three does not quietly vanish into the swamp.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">SC</span><h3>Story Structure</h3><p>Build scenes, link them to chapters, and create the skeleton that supports your entire story.</p></article>
            </div>
        </div>
    </section>

    <section class="features-section features-section--soft reveal-section" id="create">
        <div class="marketing-container">
            <div class="features-section__heading">
                <p class="marketing-eyebrow">Create &amp; write</p>
                <h2>Turn ideas into words without losing the details that make the story work.</h2>
                <p>Everything you need to draft, revise, polish and keep moving.</p>
            </div>
            <div class="features-split">
                <figure class="features-screenshot features-screenshot--product">
                    <img src="/images/features/scene-inspector.webp"
                         onerror="this.onerror=null;this.src='@Placeholder';"
                         width="1920"
                         height="1080"
                         loading="lazy"
                         alt="PlotDirector Scene Inspector summary view with scene details, people, world and continuity." />
                    <figcaption>Scene Inspector</figcaption>
                </figure>
                <div class="features-split__copy">
                    <p class="marketing-eyebrow">Scene Inspector</p>
                    <h3>Every moving part of a scene, visible at once.</h3>
                    <p>Everything about a scene in one place: characters, locations, assets, goals, outcomes, notes, warnings and more.</p>
                </div>
            </div>
            <div class="features-icon-grid features-icon-grid--three">
                <article class="feature-icon-card"><span aria-hidden="true">WW</span><h3>Writer Workspace</h3><p>Know exactly what to write next. PlotDirector queues scenes by workflow status, priority and progress.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">WS</span><h3>Writing Schedule</h3><p>Turn your deadline into a plan. Set your time, your pace and let PlotDirector build your writing schedule.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">RG</span><h3>Revision &amp; Goals</h3><p>Track revisions, set goals and stay motivated with progress that actually means something.</p></article>
            </div>
        </div>
    </section>

    <section class="features-section reveal-section" id="world">
        <div class="marketing-container">
            <div class="features-section__heading">
                <p class="marketing-eyebrow">Build your world</p>
                <h2>Bring your world to life with rich detail that is easy to find, track and reuse.</h2>
                <p>Because "the pub near the thing with the man" is not a sustainable world-building strategy.</p>
            </div>
            <div class="features-collage">
                <figure class="features-screenshot features-screenshot--product">
                    <img src="/images/features/floor-plans.webp"
                         onerror="this.onerror=null;this.src='@Placeholder';"
                         width="1920"
                         height="1080"
                         loading="lazy"
                         alt="PlotDirector floor plan editor showing rooms, transitions and occupancy." />
                    <figcaption>Floor plan editor</figcaption>
                </figure>
                <figure class="features-screenshot features-screenshot--product">
                    <img src="/images/features/relationship-map.webp"
                         onerror="this.onerror=null;this.src='@Placeholder';"
                         width="1920"
                         height="1080"
                         loading="lazy"
                         alt="PlotDirector relationship map showing character connections and changing dynamics." />
                    <figcaption>Relationship map</figcaption>
                </figure>
            </div>
            <div class="features-icon-grid features-icon-grid--five">
                <article class="feature-icon-card"><span aria-hidden="true">CH</span><h3>Characters</h3><p>Create character profiles with aliases, attributes, images, appearances and arcs across your story.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">RE</span><h3>Relationships</h3><p>Map connections, track dynamics and watch relationships evolve over time.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">LO</span><h3>Locations</h3><p>Organise places, link them together and see where your story comes alive.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">FP</span><h3>Floor Plans</h3><p>Design buildings and spaces. See who is where with interactive occupancy views.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">AS</span><h3>Story Assets</h3><p>Track objects, clues, letters, weapons, heirlooms and anything else important to your story.</p></article>
            </div>
        </div>
    </section>

    <section class="features-showcase reveal-section" id="consistent">
        <div class="marketing-container">
            <div class="features-showcase__intro">
                <p class="marketing-eyebrow">Stay consistent</p>
                <h2>This is where PlotDirector earns its keep.</h2>
                <p>Track who knows what, who has what, who was where, and what changed from one scene to the next.</p>
            </div>
            <figure class="features-screenshot features-screenshot--showcase">
                <img src="/images/features/continuity-explorer.webp"
                     onerror="this.onerror=null;this.src='@Placeholder';"
                     width="1920"
                     height="1080"
                     loading="lazy"
                     alt="PlotDirector Continuity Explorer showing readable story state across a landscape timeline." />
                <figcaption>Continuity Explorer</figcaption>
            </figure>
            <div class="features-icon-grid features-icon-grid--showcase">
                <article class="feature-icon-card"><span aria-hidden="true">SS</span><h3>Story State</h3><p>Track who knows what, who owns what, and what changed when.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">AC</span><h3>Asset Custody</h3><p>Always know who has what, where it is, and when it changed hands.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">LA</span><h3>Location Activity</h3><p>See which characters were where, when, and for how long.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">WC</span><h3>Warnings &amp; Checks</h3><p>Spot problems early with smart warnings and helpful suggestions.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">SH</span><h3>Story Health</h3><p>Measure pacing, balance, thread health and more. Keep your story strong.</p></article>
            </div>
            <aside class="features-did-you-know">
                <strong>Did you know?</strong>
                <p>Move a scene on the Timeline and PlotDirector keeps the rest of your story model in sync - characters, locations, assets, story state, continuity and writing plans.</p>
            </aside>
        </div>
    </section>

    <section class="features-section reveal-section" id="experiment">
        <div class="marketing-container">
            <div class="features-section__heading">
                <p class="marketing-eyebrow">Experiment safely</p>
                <h2>Try new ideas without breaking your main story.</h2>
                <p>Test different orders and explore possibilities while your real manuscript stays steady.</p>
            </div>
            <figure class="features-screenshot features-screenshot--wide">
                <img src="/images/features/scenarios.webp"
                     onerror="this.onerror=null;this.src='@Placeholder';"
                     width="1920"
                     height="1080"
                     loading="lazy"
                     alt="PlotDirector scenario timeline for alternate story orders and what-if structures." />
                <figcaption>Scenario timeline</figcaption>
            </figure>
            <div class="features-icon-grid features-icon-grid--three">
                <article class="feature-icon-card"><span aria-hidden="true">SC</span><h3>Scenarios</h3><p>Create alternate story orders and what-if structures. Perfect for trying bold changes.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">CV</span><h3>Compare &amp; Validate</h3><p>See how your scenario compares to the main story and validate the impact.</p></article>
                <article class="feature-icon-card"><span aria-hidden="true">AP</span><h3>Apply with Confidence</h3><p>When you are happy, apply changes back to your main story in one click.</p></article>
            </div>
        </div>
    </section>

    <section class="features-section features-section--soft reveal-section" id="publish">
        <div class="marketing-container">
            <div class="features-section__heading">
                <p class="marketing-eyebrow">Publish, share &amp; protect</p>
                <h2>Your story knowledge should never be trapped.</h2>
                <p>Export it, share it, back it up and keep control of everything you have built.</p>
            </div>
            <div class="features-icon-grid features-icon-grid--publish">
                <article class="feature-icon-card feature-icon-card--large"><span aria-hidden="true">SB</span><h3>Story Bible</h3><p>Create a one-click story bible with characters, settings, timelines, threads and more.</p></article>
                <article class="feature-icon-card feature-icon-card--large"><span aria-hidden="true">EX</span><h3>Exports</h3><p>Export timelines, character guides, scene briefs and more in useful formats.</p></article>
                <article class="feature-icon-card feature-icon-card--large"><span aria-hidden="true">BK</span><h3>Backups</h3><p>Create backups and restore points so your work stays safe.</p></article>
                <article class="feature-icon-card feature-icon-card--large"><span aria-hidden="true">CO</span><h3>Collaboration</h3><p>Invite trusted collaborators, editors or co-writers into your project.</p></article>
                <article class="feature-icon-card feature-icon-card--large"><span aria-hidden="true">PE</span><h3>Permissions</h3><p>Granular permissions help ensure the right people see the right things.</p></article>
            </div>
        </div>
    </section>

    <section class="features-word reveal-section" id="word">
        <div class="marketing-container features-word__grid">
            <div>
                <p class="marketing-eyebrow">Microsoft Word Companion</p>
                <h2>Write in Word. Stay connected to your story.</h2>
                <p>The Microsoft Word Companion links your manuscript to PlotDirector, so your planning and your writing can work together instead of living in separate worlds.</p>
                <ul class="features-bullet-list">
                    <li>Sync chapters and scenes</li>
                    <li>Update word counts automatically</li>
                    <li>Detect characters, assets and locations</li>
                    <li>Get suggestions and continuity warnings as you write</li>
                    <li>Keep PlotDirector focused on the scene you are working on</li>
                </ul>
            </div>
            <figure class="features-screenshot">
                <img src="/images/features/word-companion.webp"
                     onerror="this.onerror=null;this.src='@Placeholder';"
                     width="1920"
                     height="1080"
                     loading="lazy"
                     alt="Microsoft Word document with the PlotDirector Companion pane connected to story planning data." />
                <figcaption>Word document with PlotDirector Companion pane</figcaption>
            </figure>
        </div>
    </section>

    <section class="features-faq reveal-section" aria-labelledby="features-faq-heading">
        <div class="marketing-container">
            <div class="section-heading">
                <p class="marketing-eyebrow">Questions writers ask</p>
                <h2 id="features-faq-heading">PlotDirector FAQ</h2>
            </div>
            <div class="faq-grid">
                <article><h3>What is PlotDirector?</h3><p>PlotDirector is story planning and writing software for authors. It helps writers organise books, chapters, scenes, characters, locations, timelines, plot threads, continuity, writing schedules and story bibles in one connected workspace.</p></article>
                <article><h3>Can PlotDirector help with story continuity?</h3><p>Yes. PlotDirector includes continuity tools for tracking characters, locations, story assets, knowledge, custody, warnings and story state across scenes.</p></article>
                <article><h3>Does PlotDirector work with Microsoft Word?</h3><p>PlotDirector includes a Microsoft Word Companion designed to connect your manuscript with your planning data, helping sync chapters, scenes, word counts and story details.</p></article>
                <article><h3>Can I use PlotDirector for a series?</h3><p>Yes. PlotDirector supports projects, books, chapters and scenes, making it suitable for novels, series, screenplays and larger story worlds.</p></article>
                <article><h3>Does PlotDirector include character and relationship tracking?</h3><p>Yes. PlotDirector includes character profiles, aliases, appearances, relationship tracking, relationship maps and changes over time.</p></article>
                <article><h3>Can PlotDirector create a story bible?</h3><p>Yes. PlotDirector can produce story bible exports containing key information about characters, settings, plot threads, timelines and other story details.</p></article>
            </div>
        </div>
    </section>

    <section class="final-cta reveal-section">
        <div class="marketing-container final-cta__inner">
            <p class="marketing-eyebrow">Ready to bring your story to life?</p>
            <h2>Ready to bring your story to life?</h2>
            <p>Join thousands of writers who plan, write and finish with PlotDirector.</p>
            <div class="marketing-actions">
                <a class="marketing-btn marketing-btn--primary" asp-controller="Account" asp-action="Register">Start your free trial</a>
                <a class="marketing-btn marketing-btn--secondary" asp-route="@PublicRouteNames.Pricing">View pricing</a>
            </div>
            <small>Free trial available. No card required. Cancel anytime.</small>
        </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.12 });

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

