notebook/app/views/help/document_analysis.html.erb

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Header -->
  <div class="flex items-center mb-8">
    <%= link_to help_center_path, class: 'text-gray-500 hover:text-gray-700 mr-3', title: "Back to Help Center" do %>
      <i class="material-icons">arrow_back</i>
    <% end %>
    <h1 class="text-3xl font-bold text-gray-800">Document Analysis Guide</h1>
  </div>

  <!-- Introduction -->
  <div class="bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-200 rounded-xl p-8 mb-12">
    <div class="flex items-start">
      <div class="w-16 h-16 bg-gradient-to-br from-indigo-200 to-purple-200 rounded-2xl flex items-center justify-center mr-6 flex-shrink-0 shadow-sm">
        <i class="material-icons text-indigo-700 text-2xl">psychology</i>
      </div>
      <div>
        <h2 class="text-2xl font-bold text-gray-900 mb-4">Understand Your Writing Like Never Before</h2>
        <p class="text-lg text-gray-700 leading-relaxed mb-4">
          Document Analysis is your personal writing coach, providing deep insights into how your prose reads, feels, and flows. Discover if your writing matches your intended audience, understand the emotional journey you're creating for readers, and identify patterns in your style that you might not even realize exist.
        </p>
        <div class="bg-white rounded-lg p-4 border border-indigo-200">
          <p class="text-sm text-indigo-800 font-medium">
            <i class="material-icons text-indigo-600 text-sm mr-2">star</i>
            <strong>Premium Feature:</strong> Document Analysis is currently in beta and available exclusively to Premium subscribers.
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content -->
  <div class="space-y-12">
    
    <!-- What Writers Get From Analysis -->
    <section>
      <div class="flex items-center mb-6">
        <div class="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
          <i class="material-icons text-blue-700">lightbulb</i>
        </div>
        <div>
          <h2 class="text-2xl font-semibold text-gray-800">What This Analysis Reveals About Your Writing</h2>
          <p class="text-gray-600">The insights that can transform your craft</p>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Four Types of Writing Intelligence</h3>
            <div class="space-y-4">
              <div class="flex items-start">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4 mt-1">
                  <i class="material-icons text-blue-600 text-lg">school</i>
                </div>
                <div>
                  <h4 class="font-medium text-gray-900 mb-2">Readability Intelligence</h4>
                  <p class="text-sm text-gray-600 mb-2">
                    <strong>What it tells you:</strong> Whether your writing matches your intended audience. Is your YA novel actually at a YA reading level? Is your literary fiction too complex for general readers?
                  </p>
                  <p class="text-sm text-blue-600 font-medium">
                    💡 <strong>What you can do:</strong> Adjust sentence length, vocabulary complexity, and structure to hit your target demographic perfectly.
                  </p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4 mt-1">
                  <i class="material-icons text-green-600 text-lg">mood</i>
                </div>
                <div>
                  <h4 class="font-medium text-gray-900 mb-2">Emotional Intelligence</h4>
                  <p class="text-sm text-gray-600 mb-2">
                    <strong>What it tells you:</strong> The actual emotional journey you're creating. Are your "tense" scenes really conveying fear? Is your romance generating the joy you intended?
                  </p>
                  <p class="text-sm text-green-600 font-medium">
                    💡 <strong>What you can do:</strong> Fine-tune dialogue, scene pacing, and word choice to create the exact emotional experience you want readers to have.
                  </p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4 mt-1">
                  <i class="material-icons text-purple-600 text-lg">palette</i>
                </div>
                <div>
                  <h4 class="font-medium text-gray-900 mb-2">Style Intelligence</h4>
                  <p class="text-sm text-gray-600 mb-2">
                    <strong>What it tells you:</strong> Your unique writing fingerprint. Do you write like Hemingway with short, punchy sentences, or more like Tolkien with rich, flowing prose?
                  </p>
                  <p class="text-sm text-purple-600 font-medium">
                    💡 <strong>What you can do:</strong> Consciously develop your voice, identify repetitive patterns, and experiment with different stylistic approaches.
                  </p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mr-4 mt-1">
                  <i class="material-icons text-orange-600 text-lg">group</i>
                </div>
                <div>
                  <h4 class="font-medium text-gray-900 mb-2">Character Intelligence</h4>
                  <p class="text-sm text-gray-600 mb-2">
                    <strong>What it tells you:</strong> How your characters come across emotionally in the text. Which characters generate the most positive/negative sentiment? Who are readers actually focusing on?
                  </p>
                  <p class="text-sm text-orange-600 font-medium">
                    💡 <strong>What you can do:</strong> Balance character screen time, adjust how characters are portrayed, and ensure your protagonist creates the right emotional connection.
                  </p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg p-6 border border-indigo-200">
            <h4 class="font-semibold text-gray-900 mb-4">Real Writer Success Story</h4>
            <div class="text-sm text-gray-700 space-y-3">
              <div class="bg-white rounded-lg p-4 border border-indigo-100">
                <p class="text-xs text-gray-500 mb-2">Sarah's Young Adult Fantasy Novel:</p>
                <div class="space-y-2">
                  <p><strong>Problem Discovered:</strong> Reading Level showed 12th Grade (too advanced for YA)</p>
                  <p><strong>Emotional Issue:</strong> Romance scenes showed only 30% Joy, 40% Fear</p>
                  <p><strong>Style Problem:</strong> Sentences averaged 22 words (too complex for target audience)</p>
                </div>
              </div>
              <div class="text-center py-2">
                <i class="material-icons text-indigo-500">arrow_downward</i>
                <p class="text-xs text-indigo-600 font-medium">After targeted revisions based on analysis</p>
              </div>
              <div class="bg-white rounded-lg p-4 border border-indigo-100">
                <p class="text-xs text-gray-500 mb-2">Revised Results:</p>
                <div class="space-y-2">
                  <p><strong>Reading Level:</strong> 8th Grade (perfect for YA)</p>
                  <p><strong>Romance Scenes:</strong> 70% Joy, 15% Fear (much better emotional balance)</p>
                  <p><strong>Sentence Length:</strong> 14 words average (appropriate for target readers)</p>
                  <p class="text-green-600 font-medium">✅ <strong>Result:</strong> Manuscript accepted by YA publisher!</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Getting Started -->
    <section>
      <div class="flex items-center mb-6">
        <div class="w-12 h-12 bg-gradient-to-br from-green-100 to-green-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
          <span class="text-green-700 font-bold text-lg">1</span>
        </div>
        <div>
          <h2 class="text-2xl font-semibold text-gray-800">How to Get Your Writing Analyzed</h2>
          <p class="text-gray-600">Simple steps to unlock insights about your prose</p>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">The Analysis Process</h3>
            <div class="space-y-4">
              <div class="flex items-start">
                <span class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-sm font-bold mr-4 mt-1">1</span>
                <div>
                  <h4 class="font-medium text-gray-900">Write Your Document in Notebook.ai</h4>
                  <p class="text-sm text-gray-600">Paste or write your story, chapter, or scene directly into a Notebook.ai document. This could be a complete short story, a novel chapter, or even just a scene you want to perfect.</p>
                </div>
              </div>
              <div class="flex items-start">
                <span class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-sm font-bold mr-4 mt-1">2</span>
                <div>
                  <h4 class="font-medium text-gray-900">Request Your Analysis</h4>
                  <p class="text-sm text-gray-600">Click "Request an analysis" on your document page. Our AI starts working immediately to understand your writing patterns and emotional content.</p>
                </div>
              </div>
              <div class="flex items-start">
                <span class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-sm font-bold mr-4 mt-1">3</span>
                <div>
                  <h4 class="font-medium text-gray-900">Wait for Deep Analysis</h4>
                  <p class="text-sm text-gray-600">Analysis takes 2-5 minutes as our system performs multiple types of evaluation. You'll see progress: Writing Mechanics (25%) → Style Patterns (50%) → Emotional Analysis (75%) → Character Insights (100%)</p>
                </div>
              </div>
              <div class="flex items-start">
                <span class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-sm font-bold mr-4 mt-1">4</span>
                <div>
                  <h4 class="font-medium text-gray-900">Explore Your Writing Insights</h4>
                  <p class="text-sm text-gray-600">Dive into comprehensive results with interactive charts, actionable recommendations, and specific suggestions for improvement.</p>
                </div>
              </div>
            </div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">What You Need to Know</h3>
            <div class="space-y-3">
              <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
                <div class="flex items-center mb-2">
                  <i class="material-icons text-blue-600 text-sm mr-2">star</i>
                  <h4 class="font-medium text-gray-900 text-sm">Premium Writers Only</h4>
                </div>
                <p class="text-sm text-gray-600">This professional-grade analysis is available exclusively to Premium subscribers who are serious about their craft.</p>
              </div>
              <div class="bg-green-50 rounded-lg p-4 border border-green-200">
                <div class="flex items-center mb-2">
                  <i class="material-icons text-green-600 text-sm mr-2">description</i>
                  <h4 class="font-medium text-gray-900 text-sm">Your Writing, Your Platform</h4>
                </div>
                <p class="text-sm text-gray-600">Only documents you create within Notebook.ai can be analyzed—this ensures your writing stays private and secure on our platform.</p>
              </div>
              <div class="bg-yellow-50 rounded-lg p-4 border border-yellow-200">
                <div class="flex items-center mb-2">
                  <i class="material-icons text-yellow-600 text-sm mr-2">language</i>
                  <h4 class="font-medium text-gray-900 text-sm">English Language Focus</h4>
                </div>
                <p class="text-sm text-gray-600">Analysis is optimized for English prose and may not provide accurate insights for other languages.</p>
              </div>
              <div class="bg-purple-50 rounded-lg p-4 border border-purple-200">
                <div class="flex items-center mb-2">
                  <i class="material-icons text-purple-600 text-sm mr-2">science</i>
                  <h4 class="font-medium text-gray-900 text-sm">Beta Testing Phase</h4>
                </div>
                <p class="text-sm text-gray-600">We're actively improving this feature based on writer feedback—your input helps make it better for everyone!</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Readability Analysis -->
    <section>
      <div class="flex items-center mb-6">
        <div class="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
          <i class="material-icons text-blue-700">school</i>
        </div>
        <div>
          <h2 class="text-2xl font-semibold text-gray-800">Readability Analysis: Writing for Your Audience</h2>
          <p class="text-gray-600">Ensure your prose matches your readers' expectations and abilities</p>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Why Readability Matters for Writers</h3>
            <div class="space-y-4">
              <div class="bg-red-50 rounded-lg p-4 border border-red-200">
                <h4 class="font-medium text-gray-900 mb-2">📚 Genre Alignment</h4>
                <p class="text-sm text-gray-600">
                  Different genres have different readability expectations. Middle-grade novels should read at a 4th-6th grade level, while literary fiction can be more complex. Our analysis tells you exactly where your writing falls.
                </p>
              </div>
              <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
                <h4 class="font-medium text-gray-900 mb-2">🎯 Reader Engagement</h4>
                <p class="text-sm text-gray-600">
                  Writing that's too complex loses readers; writing that's too simple bores them. Find the sweet spot that keeps your audience engaged from first page to last.
                </p>
              </div>
              <div class="bg-green-50 rounded-lg p-4 border border-green-200">
                <h4 class="font-medium text-gray-900 mb-2">📈 Publishing Success</h4>
                <p class="text-sm text-gray-600">
                  Agents and editors often check readability levels. Knowing your numbers helps you position your work correctly in the market and pitch to the right audience.
                </p>
              </div>
            </div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">What Our Eight Tests Reveal</h3>
            <div class="space-y-3">
              <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-3 border border-blue-200">
                <h4 class="font-semibold text-gray-900 text-sm mb-1">Sentence Complexity (Flesch-Kincaid)</h4>
                <p class="text-xs text-gray-600">How long and complex are your sentences? Great for identifying run-on sentences that lose readers.</p>
              </div>
              <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg p-3 border border-green-200">
                <h4 class="font-semibold text-gray-900 text-sm mb-1">Vocabulary Difficulty (Dale-Chall)</h4>
                <p class="text-xs text-gray-600">Are you using words your audience knows? Perfect for adjusting vocabulary to your target market.</p>
              </div>
              <div class="bg-gradient-to-br from-purple-50 to-violet-50 rounded-lg p-3 border border-purple-200">
                <h4 class="font-semibold text-gray-900 text-sm mb-1">Text Density (SMOG Grade)</h4>
                <p class="text-xs text-gray-600">How dense is your writing with complex ideas? Helps balance depth with accessibility.</p>
              </div>
              <div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-lg p-3 border border-orange-200">
                <h4 class="font-semibold text-gray-900 text-sm mb-1">Reading Flow (Gunning Fog)</h4>
                <p class="text-xs text-gray-600">How smoothly does your prose flow? Identifies passages that might slow readers down.</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-6 border border-blue-200">
          <h4 class="font-semibold text-gray-900 mb-4">📊 Your Readability Report Card</h4>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center">
              <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                <span class="text-2xl font-bold text-green-600">72</span>
              </div>
              <h5 class="font-medium text-gray-900">Overall Score</h5>
              <p class="text-xs text-gray-600">Easy to read for most adults</p>
            </div>
            <div class="text-center">
              <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                <span class="text-lg font-bold text-blue-600">8th</span>
              </div>
              <h5 class="font-medium text-gray-900">Grade Level</h5>
              <p class="text-xs text-gray-600">Perfect for general fiction</p>
            </div>
            <div class="text-center">
              <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
                <span class="text-lg font-bold text-purple-600">14m</span>
              </div>
              <h5 class="font-medium text-gray-900">Reading Time</h5>
              <p class="text-xs text-gray-600">For average reader</p>
            </div>
          </div>
          <div class="mt-4 p-3 bg-white rounded-lg border border-blue-200">
            <p class="text-sm text-blue-800">
              <strong>💡 What This Means:</strong> Your writing is accessible to most adult readers while maintaining literary quality. Consider shortening a few longer sentences in Chapter 3 to improve flow, but overall readability is excellent for your genre.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Sentiment & Emotion -->
    <section>
      <div class="flex items-center mb-6">
        <div class="w-12 h-12 bg-gradient-to-br from-green-100 to-green-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
          <i class="material-icons text-green-700">mood</i>
        </div>
        <div>
          <h2 class="text-2xl font-semibold text-gray-800">Emotional Analysis: The Heart of Your Story</h2>
          <p class="text-gray-600">Understand the emotional journey you're creating for readers</p>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">What Emotional Analysis Tells You</h3>
            <div class="space-y-4">
              <div class="bg-yellow-50 rounded-lg p-4 border border-yellow-200">
                <h4 class="font-medium text-gray-900 mb-2">😊 Overall Emotional Tone</h4>
                <p class="text-sm text-gray-600 mb-2">
                  Is your story creating the emotional experience you intended? A romance should probably be more positive than negative, while a thriller might balance tension (fear) with relief (joy).
                </p>
                <p class="text-xs text-yellow-700 font-medium bg-yellow-100 rounded p-2">
                  <strong>Writer Action:</strong> If your romance is showing 60% negative sentiment, consider adding more positive interactions, hopeful internal thoughts, or moments of connection between characters.
                </p>
              </div>
              
              <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
                <h4 class="font-medium text-gray-900 mb-2">🎭 The Five Emotional Layers</h4>
                <p class="text-sm text-gray-600 mb-3">Our AI identifies five core emotions in your writing:</p>
                <div class="space-y-2 text-sm">
                  <div class="flex justify-between items-center">
                    <span><strong>Joy:</strong> Hope, love, satisfaction, triumph</span>
                    <span class="text-yellow-600 font-medium">45%</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span><strong>Sadness:</strong> Loss, disappointment, melancholy</span>
                    <span class="text-blue-600 font-medium">20%</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span><strong>Fear:</strong> Tension, anxiety, suspense</span>
                    <span class="text-purple-600 font-medium">25%</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span><strong>Anger:</strong> Conflict, frustration, rage</span>
                    <span class="text-red-600 font-medium">8%</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span><strong>Disgust:</strong> Revulsion, contempt, distaste</span>
                    <span class="text-green-600 font-medium">2%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Character Emotional Profiles</h3>
            <div class="space-y-4">
              <div class="bg-gradient-to-br from-green-50 to-blue-50 rounded-lg p-4 border border-green-200">
                <h4 class="font-semibold text-gray-900 mb-3">🎭 Individual Character Analysis</h4>
                <div class="space-y-3 text-sm">
                  <div class="bg-white rounded-lg p-3 border border-green-100">
                    <div class="flex justify-between items-center mb-2">
                      <span class="font-medium text-gray-900">Sarah (Protagonist)</span>
                      <span class="text-green-600 text-xs">Positive Character Arc</span>
                    </div>
                    <div class="text-xs text-gray-600">
                      <strong>Dominant Emotion:</strong> Joy (60%) - Great for a protagonist readers should root for<br>
                      <strong>Secondary:</strong> Fear (25%) - Adds relatable vulnerability
                    </div>
                  </div>
                  <div class="bg-white rounded-lg p-3 border border-red-100">
                    <div class="flex justify-between items-center mb-2">
                      <span class="font-medium text-gray-900">Marcus (Antagonist)</span>
                      <span class="text-red-600 text-xs">Negative Character Arc</span>
                    </div>
                    <div class="text-xs text-gray-600">
                      <strong>Dominant Emotion:</strong> Anger (70%) - Perfect for creating conflict<br>
                      <strong>Secondary:</strong> Disgust (20%) - Makes him genuinely unlikeable
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg p-4 border border-purple-200">
                <h4 class="font-semibold text-gray-900 mb-2">💡 What You Can Do With This</h4>
                <div class="space-y-2 text-sm text-gray-700">
                  <p><strong>Balance emotional scenes:</strong> If a chapter is 80% fear, add moments of relief or hope</p>
                  <p><strong>Develop character arcs:</strong> Track how character emotions change throughout your story</p>
                  <p><strong>Fix pacing issues:</strong> Too much of one emotion can make scenes feel monotonous</p>
                  <p><strong>Strengthen relationships:</strong> Ensure romantic partners have positive emotional associations</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Style Analysis -->
    <section>
      <div class="flex items-center mb-6">
        <div class="w-12 h-12 bg-gradient-to-br from-purple-100 to-purple-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
          <i class="material-icons text-purple-700">palette</i>
        </div>
        <div>
          <h2 class="text-2xl font-semibold text-gray-800">Style Analysis: Your Unique Writing Voice</h2>
          <p class="text-gray-600">Discover patterns in your prose and develop your distinctive style</p>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Understanding Your Writing Style</h3>
            <div class="space-y-4">
              <div class="bg-red-50 rounded-lg p-4 border border-red-200">
                <h4 class="font-medium text-gray-900 mb-2">📝 Sentence Rhythm & Flow</h4>
                <p class="text-sm text-gray-600 mb-2">
                  Do you write like Hemingway with short, punchy sentences, or like Proust with long, flowing passages? Our analysis shows your sentence length patterns and rhythm.
                </p>
                <div class="text-xs bg-red-100 rounded p-2 text-red-800">
                  <strong>Example insight:</strong> "Your sentences average 12 words (similar to Hemingway's style), but you have several 30+ word sentences that might slow pacing in action scenes."
                </div>
              </div>
              
              <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
                <h4 class="font-medium text-gray-900 mb-2">🔤 Word Choice Patterns</h4>
                <p class="text-sm text-gray-600 mb-2">
                  Which words do you overuse? Are you heavy on adjectives or do you prefer strong verbs? Understanding your word patterns helps you write more consciously.
                </p>
                <div class="grid grid-cols-2 gap-2 text-xs">
                  <div><strong>Nouns:</strong> 28% (character-focused)</div>
                  <div><strong>Verbs:</strong> 22% (action-oriented)</div>
                  <div><strong>Adjectives:</strong> 15% (descriptive)</div>
                  <div><strong>Adverbs:</strong> 8% (good restraint!)</div>
                </div>
              </div>
              
              <div class="bg-green-50 rounded-lg p-4 border border-green-200">
                <h4 class="font-medium text-gray-900 mb-2">🎨 Vocabulary Richness</h4>
                <p class="text-sm text-gray-600">
                  How varied is your vocabulary? Do you repeat the same words, or do you have a rich, diverse word palette? This affects how engaging your prose feels to readers.
                </p>
              </div>
            </div>
          </div>
          
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Compare Yourself to the Masters</h3>
            <div class="space-y-4">
              <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-lg p-4 border border-amber-200">
                <h4 class="font-semibold text-gray-900 mb-3">📚 Your Style vs. Famous Authors</h4>
                <div class="space-y-3">
                  <div class="flex items-center justify-between p-2 bg-white rounded border border-amber-100">
                    <div class="flex items-center">
                      <div class="w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center mr-3">
                        <span class="text-xs font-bold text-amber-600">EH</span>
                      </div>
                      <div>
                        <p class="text-sm font-medium text-gray-900">Ernest Hemingway</p>
                        <p class="text-xs text-gray-600">Avg: 10 words/sentence</p>
                      </div>
                    </div>
                    <div class="text-sm text-amber-600 font-medium">85% Match</div>
                  </div>
                  
                  <div class="flex items-center justify-between p-2 bg-white rounded border border-amber-100">
                    <div class="flex items-center">
                      <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                        <span class="text-xs font-bold text-blue-600">FSF</span>
                      </div>
                      <div>
                        <p class="text-sm font-medium text-gray-900">F. Scott Fitzgerald</p>
                        <p class="text-xs text-gray-600">Avg: 18 words/sentence</p>
                      </div>
                    </div>
                    <div class="text-sm text-blue-600 font-medium">45% Match</div>
                  </div>
                  
                  <div class="flex items-center justify-between p-2 bg-white rounded border border-amber-100">
                    <div class="flex items-center">
                      <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                        <span class="text-xs font-bold text-green-600">JA</span>
                      </div>
                      <div>
                        <p class="text-sm font-medium text-gray-900">Jane Austen</p>
                        <p class="text-xs text-gray-600">Avg: 22 words/sentence</p>
                      </div>
                    </div>
                    <div class="text-sm text-green-600 font-medium">32% Match</div>
                  </div>
                </div>
                
                <div class="mt-3 p-3 bg-white rounded border border-amber-200">
                  <p class="text-sm text-amber-800">
                    <strong>💡 Your Style Profile:</strong> You write with Hemingway-like directness and clarity. Consider varying sentence length occasionally to create more rhythm and prevent monotony.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg p-6 border border-purple-200">
          <h4 class="font-semibold text-gray-900 mb-4">🎯 Actionable Style Improvements</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h5 class="font-medium text-gray-900 mb-2">✅ Your Style Strengths</h5>
              <div class="space-y-2 text-sm text-gray-700">
                <div class="flex items-start">
                  <i class="material-icons text-green-500 text-sm mr-2 mt-0.5">check_circle</i>
                  <span>Strong verb usage creates active, engaging prose</span>
                </div>
                <div class="flex items-start">
                  <i class="material-icons text-green-500 text-sm mr-2 mt-0.5">check_circle</i>
                  <span>Controlled adverb use shows writing maturity</span>
                </div>
                <div class="flex items-start">
                  <i class="material-icons text-green-500 text-sm mr-2 mt-0.5">check_circle</i>
                  <span>Sentence variety keeps readers engaged</span>
                </div>
              </div>
            </div>
            <div>
              <h5 class="font-medium text-gray-900 mb-2">🎯 Areas for Growth</h5>
              <div class="space-y-2 text-sm text-gray-700">
                <div class="flex items-start">
                  <i class="material-icons text-orange-500 text-sm mr-2 mt-0.5">trending_up</i>
                  <span>Try longer sentences in emotional scenes for flow</span>
                </div>
                <div class="flex items-start">
                  <i class="material-icons text-orange-500 text-sm mr-2 mt-0.5">trending_up</i>
                  <span>Expand vocabulary in dialogue for character distinction</span>
                </div>
                <div class="flex items-start">
                  <i class="material-icons text-orange-500 text-sm mr-2 mt-0.5">trending_up</i>
                  <span>Consider more sensory details for immersion</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Entity Recognition -->
    <section>
      <div class="flex items-center mb-6">
        <div class="w-12 h-12 bg-gradient-to-br from-orange-100 to-orange-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
          <i class="material-icons text-orange-700">group</i>
        </div>
        <div>
          <h2 class="text-2xl font-semibold text-gray-800">Smart Character & World Detection</h2>
          <p class="text-gray-600">Automatically identify and connect your story elements</p>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">What Our AI Discovers in Your Writing</h3>
            <div class="space-y-4">
              <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
                <div class="flex items-center mb-2">
                  <i class="material-icons text-blue-600 text-sm mr-2">person</i>
                  <h4 class="font-medium text-gray-900">Characters & People</h4>
                </div>
                <p class="text-sm text-gray-600 mb-2">
                  Every named character in your story, from protagonists to minor characters mentioned once. See which characters generate the most reader attention and emotional response.
                </p>
                <div class="text-xs bg-blue-100 rounded p-2 text-blue-800">
                  <strong>Writer Benefit:</strong> Discover if secondary characters are overshadowing your protagonist, or if important characters aren't getting enough "screen time."
                </div>
              </div>
              
              <div class="bg-green-50 rounded-lg p-4 border border-green-200">
                <div class="flex items-center mb-2">
                  <i class="material-icons text-green-600 text-sm mr-2">place</i>
                  <h4 class="font-medium text-gray-900">Locations & Worldbuilding</h4>
                </div>
                <p class="text-sm text-gray-600 mb-2">
                  Every location mentioned in your story, from major settings to passing references. Understand which places feel most important to your narrative.
                </p>
                <div class="text-xs bg-green-100 rounded p-2 text-green-800">
                  <strong>Writer Benefit:</strong> Ensure your main settings are getting enough description and attention to feel real to readers.
                </div>
              </div>
              
              <div class="bg-purple-50 rounded-lg p-4 border border-purple-200">
                <div class="flex items-center mb-2">
                  <i class="material-icons text-purple-600 text-sm mr-2">lightbulb</i>
                  <h4 class="font-medium text-gray-900">Themes & Concepts</h4>
                </div>
                <p class="text-sm text-gray-600 mb-2">
                  Abstract ideas, themes, and concepts that emerge from your writing. What is your story really about beyond the plot?
                </p>
                <div class="text-xs bg-purple-100 rounded p-2 text-purple-800">
                  <strong>Writer Benefit:</strong> Understand the deeper themes in your work for better marketing, queries, and series development.
                </div>
              </div>
            </div>
          </div>
          
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Connect Your Story to Your Universe</h3>
            <div class="space-y-4">
              <div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg p-4 border border-indigo-200">
                <h4 class="font-semibold text-gray-900 mb-2">🔗 Automatic Worldbuilding Integration</h4>
                <p class="text-sm text-gray-700 mb-3">
                  When our AI finds characters and locations in your story, you can instantly link them to your existing Notebook.ai worldbuilding pages—or create new ones.
                </p>
                <div class="bg-white rounded-lg p-3 border border-indigo-100">
                  <p class="text-xs text-gray-600 mb-2"><strong>Example:</strong> Your story mentions "Sarah walked through the Forest of Whispers."</p>
                  <div class="flex items-center justify-between">
                    <div class="text-xs">
                      <span class="text-blue-600 font-medium">Sarah (Character)</span> →
                      <span class="text-green-600 font-medium">Forest of Whispers (Location)</span>
                    </div>
                    <button class="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded">Link to Pages</button>
                  </div>
                </div>
              </div>
              
              <div class="bg-gradient-to-br from-green-50 to-teal-50 rounded-lg p-4 border border-green-200">
                <h4 class="font-semibold text-gray-900 mb-2">📊 Story Element Analytics</h4>
                <div class="space-y-2 text-sm text-gray-700">
                  <div class="flex justify-between items-center">
                    <span>Character Mentions</span>
                    <span class="font-medium">Sarah: 47, Marcus: 23, Elena: 8</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span>Location Focus</span>
                    <span class="font-medium">Castle: 34%, Forest: 28%, Village: 38%</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span>Key Themes</span>
                    <span class="font-medium">Redemption, Family, Magic</span>
                  </div>
                </div>
                <div class="mt-2 p-2 bg-white rounded border border-green-200">
                  <p class="text-xs text-green-800">
                    <strong>💡 Insight:</strong> Elena appears infrequently but might be important to your plot. Consider adding more scenes with her, or reduce her role if she's not essential.
                  </p>
                </div>
              </div>
              
              <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-lg p-4 border border-amber-200">
                <h4 class="font-semibold text-gray-900 mb-2">🌐 Research Integration</h4>
                <p class="text-sm text-gray-700">
                  Concepts in your story are automatically linked to Wikipedia and other knowledge sources, helping you research and expand your worldbuilding with real-world information.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Best Practices -->
    <section>
      <div class="flex items-center mb-6">
        <div class="w-12 h-12 bg-gradient-to-br from-indigo-100 to-indigo-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
          <i class="material-icons text-indigo-700">tips_and_updates</i>
        </div>
        <div>
          <h2 class="text-2xl font-semibold text-gray-800">Getting the Most from Your Analysis</h2>
          <p class="text-gray-600">Pro tips for writers using document analysis</p>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">📝 What to Analyze</h3>
            <div class="space-y-4">
              <div class="border-l-4 border-green-200 pl-4">
                <h4 class="font-medium text-gray-900 text-sm">Complete Scenes or Chapters</h4>
                <p class="text-sm text-gray-600">Analysis works best with 1,000+ words of continuous narrative. A complete scene gives better insights than fragments.</p>
              </div>
              <div class="border-l-4 border-green-200 pl-4">
                <h4 class="font-medium text-gray-900 text-sm">Difficult Passages</h4>
                <p class="text-sm text-gray-600">Having trouble with a scene? Analysis can reveal if the emotional tone matches your intent, or if the reading level is off.</p>
              </div>
              <div class="border-l-4 border-green-200 pl-4">
                <h4 class="font-medium text-gray-900 text-sm">Genre-Specific Content</h4>
                <p class="text-sm text-gray-600">Analyze romance scenes for emotional balance, action scenes for pacing, or dialogue-heavy scenes for character voice.</p>
              </div>
              <div class="border-l-4 border-green-200 pl-4">
                <h4 class="font-medium text-gray-900 text-sm">Before and After Revisions</h4>
                <p class="text-sm text-gray-600">Compare analysis results before and after major revisions to see objective improvement in your writing.</p>
              </div>
            </div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-4">🎯 How to Use Your Results</h3>
            <div class="space-y-4">
              <div class="border-l-4 border-blue-200 pl-4">
                <h4 class="font-medium text-gray-900 text-sm">Set Genre-Appropriate Goals</h4>
                <p class="text-sm text-gray-600">Middle-grade: 4th-6th grade reading level. YA: 6th-8th grade. Adult literary: 9th-12th grade. Commercial fiction: 7th-9th grade.</p>
              </div>
              <div class="border-l-4 border-blue-200 pl-4">
                <h4 class="font-medium text-gray-900 text-sm">Balance Emotional Intensity</h4>
                <p class="text-sm text-gray-600">Vary emotional content across chapters. High-tension scenes (fear/anger) need recovery scenes (joy/calm) to prevent reader fatigue.</p>
              </div>
              <div class="border-l-4 border-blue-200 pl-4">
                <h4 class="font-medium text-gray-900 text-sm">Develop Your Voice</h4>
                <p class="text-sm text-gray-600">Use style comparisons to understand your natural voice, then consciously experiment with different sentence rhythms and vocabulary.</p>
              </div>
              <div class="border-l-4 border-blue-200 pl-4">
                <h4 class="font-medium text-gray-900 text-sm">Track Character Development</h4>
                <p class="text-sm text-gray-600">Watch how character emotional profiles change throughout your story. Protagonists should show growth; antagonists might show corruption.</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="bg-gradient-to-br from-green-50 to-teal-50 rounded-lg p-6 border border-green-200">
            <h4 class="font-semibold text-gray-900 mb-3">✅ Perfect for Analysis</h4>
            <div class="space-y-2 text-sm text-gray-700">
              <div>• Complete story chapters (1,000+ words)</div>
              <div>• Troublesome scenes you want to improve</div>
              <div>• Romance scenes (check emotional balance)</div>
              <div>• Action sequences (verify pacing and clarity)</div>
              <div>• Character-driven dialogue scenes</div>
              <div>• Opening chapters (crucial for hooking readers)</div>
            </div>
          </div>
          <div class="bg-gradient-to-br from-red-50 to-pink-50 rounded-lg p-6 border border-red-200">
            <h4 class="font-semibold text-gray-900 mb-3">⚠️ Less Useful for Analysis</h4>
            <div class="space-y-2 text-sm text-gray-700">
              <div>• Very short passages (under 500 words)</div>
              <div>• Poetry or experimental prose</div>
              <div>• Technical writing or non-fiction</div>
              <div>• Scripts or screenplay formats</div>
              <div>• Text with extensive formatting</div>
              <div>• Non-English writing</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Get Started -->
    <section>
      <div class="bg-gradient-to-br from-gray-50 to-indigo-50 rounded-xl p-8 border border-gray-200">
        <div class="text-center mb-6">
          <h2 class="text-2xl font-semibold text-gray-800 mb-4">Ready to Understand Your Writing?</h2>
          <p class="text-lg text-gray-600 max-w-3xl mx-auto">
            Stop guessing about whether your writing works. Get objective, actionable insights that help you write with confidence and connect with your intended audience.
          </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
          
          <% if user_signed_in? && current_user.on_premium_plan? %>
            <%= link_to data_documents_path, class: 'group block' do %>
              <div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-indigo-200">
                <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-indigo-200 transition-colors">
                  <i class="material-icons text-indigo-600">psychology</i>
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Analyze Your Writing Now</h3>
                <p class="text-sm text-gray-600">Start getting professional insights into your documents immediately</p>
              </div>
            <% end %>
          <% elsif user_signed_in? %>
            <%= link_to subscription_path, class: 'group block' do %>
              <div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-purple-200">
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-200 transition-colors">
                  <i class="material-icons text-purple-600">upgrade</i>
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Upgrade to Premium</h3>
                <p class="text-sm text-gray-600">Get access to professional writing analysis and all Premium features</p>
              </div>
            <% end %>
          <% else %>
            <%= link_to new_user_registration_path, class: 'group block' do %>
              <div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-blue-200">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-blue-200 transition-colors">
                  <i class="material-icons text-blue-600">person_add</i>
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Start Your Writing Journey</h3>
                <p class="text-sm text-gray-600">Sign up and upgrade to access professional writing analysis</p>
              </div>
            <% end %>
          <% end %>
          
          <%= link_to help_your_first_universe_path, class: 'group block' do %>
            <div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-green-200">
              <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-green-200 transition-colors">
                <i class="material-icons text-green-600">language</i>
              </div>
              <h3 class="font-semibold text-gray-900 mb-2">Build Your World First</h3>
              <p class="text-sm text-gray-600">Learn the basics of organizing your creative universe in Notebook.ai</p>
            </div>
          <% end %>
          
          <%= link_to help_page_visualization_path, class: 'group block' do %>
            <div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-amber-200">
              <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-amber-200 transition-colors">
                <i class="material-icons text-amber-600">auto_awesome</i>
              </div>
              <h3 class="font-semibold text-gray-900 mb-2">Visualize Your Characters</h3>
              <p class="text-sm text-gray-600">Use Basil to create artwork of the characters you discover in your analysis</p>
            </div>
          <% end %>
          
        </div>
        
        <div class="text-center">
          <%= link_to help_center_path, class: 'inline-flex items-center justify-center px-8 py-4 border border-gray-300 text-lg font-medium rounded-xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 shadow-lg hover:shadow-xl transition-all duration-200' do %>
            <i class="material-icons mr-3">help_center</i>
            Explore More Writing Resources
          <% end %>
        </div>
      </div>
    </section>

  </div>
</div>