import { Component, createSignal, For, Show } from 'solid-js';
import { A, useParams } from '@solidjs/router';

const blogPosts: Record<string, {
  title: string;
  excerpt: string;
  content: string;
  category: string;
  date: string;
  readTime: string;
  author: string;
}> = {
  'introducing-scripter': {
    title: 'Introducing Scripter: The Modern Screenwriting Platform',
    excerpt: 'After months of development, we\'re thrilled to announce Scripter — built for screenwriters who demand speed, collaboration, and creative freedom.',
    content: `
<p>Today marks a major milestone in our journey to revolutionize screenwriting software. After months of intense development, we're proud to introduce <strong>Scripter</strong> — the modern screenwriting platform built for how you actually work.</p>

<h2>Why We Built Scripter</h2>

<p>Screenwriting software hasn't evolved much in the past decade. Final Draft costs $199 and hasn't seen meaningful innovation in years. WriterDuet tried to modernize, but they're still stuck on outdated technology.</p>

<p>We knew there had to be a better way. So we built Scripter from the ground up with:</p>

<ul>
  <li><strong>Modern technology stack</strong> — Tauri + SolidJS for native performance</li>
  <li><strong>Real-time collaboration</strong> — Write together with your team, see changes live</li>
  <li><strong>AI-powered writing</strong> — Get help with dialogue, scenes, and character development</li>
  <li><strong>Fair pricing</strong> — Free to start, Pro at $7.99/mo (33% less than WriterDuet)</li>
</ul>

<h2>What You Can Do With Scripter</h2>

<p>Scripter isn't just another screenwriting tool. It's a complete creative partner:</p>

<h3>Industry-Standard Formatting</h3>
<p>Focus on writing while Scripter handles the formatting. Scene headings, action lines, dialogue, parentheticals — everything automatically formats to industry standards.</p>

<h3>Real-Time Collaboration</h3>
<p>Write together with your writing partners. See their changes in real-time. Leave comments. Hop on a video call without leaving the app.</p>

<h3>AI Writing Assistant</h3>
<p>Stuck on a scene? Our AI can help you brainstorm dialogue, refine action lines, or analyze your characters. It's like having a writing partner available 24/7.</p>

<h2>Join Us</h2>

<p>We're just getting started. Scripter is available now, and we're committed to making it the best screenwriting platform on the market.</p>

<p><strong>Ready to write faster?</strong> <a href="/sign-up">Start writing free today</a> — no credit card required.</p>
    `,
    category: 'Product',
    date: 'April 24, 2026',
    readTime: '3 min read',
    author: 'The Scripter Team'
  },
  'final-draft-alternative': {
    title: 'Why Switch from Final Draft to Scripter?',
    excerpt: 'Final Draft has been the industry standard for decades. But at $199 with no real-time collaboration, it\'s time for a better option.',
    content: `
<p>Final Draft dominated screenwriting software for good reason — it was the first to get screenplay formatting right. But that was 30 years ago. Today, Final Draft feels like a relic, and its $199 price tag is hard to justify.</p>

<h2>The Final Draft Problem</h2>

<p>Here's what you get with Final Draft 13:</p>

<ul>
  <li>$199 one-time payment (with no meaningful updates)</li>
  <li>Desktop-only (no real-time collaboration)</li>
  <li>Manual saves and backups</li>
  <li>No AI assistance</li>
  <li>Clunky interface that hasn't evolved since 2010</li>
</ul>

<p>For working screenwriters in 2026, this isn't good enough.</p>

<h2>The Scripter Difference</h2>

<p>Scripter gives you everything Final Draft does, plus:</p>

<ul>
  <li><strong>$7.99/month</strong> — Less than 5% of Final Draft's cost</li>
  <li><strong>Real-time collaboration</strong> — Write with partners, anywhere</li>
  <li><strong>Cloud backup</strong> — Never lose a draft</li>
  <li><strong>AI writing assistant</strong> — Built-in creative support</li>
  <li><strong>Modern interface</strong> — Designed for 2026, not 1996</li>
  <li><strong>Cross-platform</strong> — Mac, Windows, Linux, web, mobile</li>
</ul>

<h2>Make the Switch</h2>

<p>Import your Final Draft files directly into Scripter. Keep writing. Everything works exactly as you expect — just faster, smarter, and with your team.</p>

<p><strong>Try Scripter free</strong> and see why thousands of screenwriters are making the switch. <a href="/sign-up">Start writing now</a>.</p>
    `,
    category: 'Tips',
    date: 'April 23, 2026',
    readTime: '5 min read',
    author: 'The Scripter Team'
  },
  'screenplay-formatting-guide': {
    title: 'The Complete Guide to Screenplay Formatting',
    excerpt: 'Master the fundamentals of screenplay format. Scene headings, action lines, dialogue, parentheticals — everything you need to know.',
    content: `
<p>Proper screenplay formatting isn't just about looking professional — it's about speaking the language of the industry. Here's everything you need to know.</p>

<h2>Scene Headings (Sluglines)</h2>

<p>Scene headings tell us where and when each scene takes place. They follow a strict format:</p>

<pre>INT. COFFEE SHOP - DAY</pre>

<p>Or:</p>

<pre>EXT. PARK - NIGHT</pre>

<p>Always uppercase. Always start with INT. or EXT. Always include a time of day.</p>

<h2>Action Lines</h2>

<p>Action describes what we see and hear. Keep it present tense, active voice, and concise:</p>

<pre>SARAH (28, determined) types furiously on her laptop. 
The barista calls her name.</pre>

<p>Don't direct the camera. Don't describe thoughts or feelings. Just what we can see and hear.</p>

<h2>Character Names</h2>

<p>Character names are centered and uppercase when introduced:</p>

<pre>                    SARAH
          I don't have time for this.</pre>

<p>First introductions should include age and a brief description in the action lines.</p>

<h2>Dialogue</h2>

<p>Dialogue goes under the character name, centered on the page. Keep it natural. Keep it purposeful.</p>

<h2>Parentheticals</h2>

<p>Use parentheticals sparingly to indicate how a line is delivered:</p>

<pre>                    SARAH
                (without looking up)
          I said I'm busy.</pre>

<p>Don't overuse them. Trust your actors and director.</p>

<h2>Transitions</h2>

<p>Transitions like CUT TO:, FADE IN:, and FADE OUT. go on the right side of the page. Use them sparingly — CUT TO: is usually implied.</p>

<h2>Let Scripter Handle It</h2>

<p>Sound complicated? Scripter automates all of this. Just write, and we'll format everything to industry standards automatically.</p>

<p><a href="/sign-up">Try Scripter free</a> and focus on what matters — your story.</p>
    `,
    category: 'Tips',
    date: 'April 22, 2026',
    readTime: '8 min read',
    author: 'The Scripter Team'
  },
  'real-time-collaboration-writing': {
    title: 'How Real-Time Collaboration Changes Screenwriting',
    excerpt: 'Writing partners no longer need to email drafts back and forth. See how real-time collaboration transforms the writing process.',
    content: `
<p>Screenwriting has always been collaborative. But until now, collaboration meant emailing drafts, managing versions, and hoping you're all working on the same file.</p>

<p>Real-time collaboration changes everything.</p>

<h2>The Old Way</h2>

<p>Remember this?</p>

<ol>
  <li>You write a scene</li>
  <li>Email it to your partner</li>
  <li>They make changes</li>
  <li>Email it back as "Script_v2_FINAL_revised.docx"</li>
  <li>Rinse and repeat</li>
</ol>

<p>Somewhere in that mess, ideas get lost. Momentum dies. Frustration builds.</p>

<h2>The Scripter Way</h2>

<p>With Scripter, you and your partners are always in the same document:</p>

<ul>
  <li><strong>See changes live</strong> — Watch your partner's cursor move, see their words appear</li>
  <li><strong>Comments and mentions</strong> — Leave feedback inline, @mention your team</li>
  <li><strong>Video chat built in</strong> — Talk through scenes without leaving the app</li>
  <li><strong>Version history</strong> — Every change is saved. Roll back anytime.</li>
</ul>

<h2>Why It Matters</h2>

<p>Real-time collaboration isn't just convenient — it's transformative. Writing becomes a conversation. Ideas flow faster. You finish scripts sooner.</p>

<p>One writing team told us they cut their first draft time from 6 months to 3 weeks after switching to Scripter.</p>

<h2>Try It Yourself</h2>

<p>Invite your writing partner to Scripter. Open the same document. Start writing together.</p>

<p><a href="/sign-up">Get started free</a> — no credit card required.</p>
    `,
    category: 'Product',
    date: 'April 21, 2026',
    readTime: '4 min read',
    author: 'The Scripter Team'
  }
};

export const BlogPost: Component = () => {
  const params = useParams();
  const [post, setPost] = createSignal<{slug: string} & typeof blogPosts[string] | null>(null);
  
  // Find the post by slug
  createSignal(() => {
    const slug = params.slug;
    if (slug && blogPosts[slug]) {
      setPost({ slug, ...blogPosts[slug] });
    } else {
      setPost(null);
    }
  });

  const relatedPosts = () => {
    const currentPost = post();
    if (!currentPost) return [];
    
    return Object.entries(blogPosts)
      .filter(([slug, p]) => slug !== currentPost.slug && p.category === currentPost.category)
      .slice(0, 3)
      .map(([slug, p]) => ({ slug, ...p }));
  };

  return (
    <div class="blog-post-page">
      {/* Navigation */}
      <nav class="landing-nav">
        <div class="nav-container">
          <div class="nav-logo">
            <A href="/">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                <path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
                <path d="M16 6L8 10V22L16 26L24 22V10L16 6Z" fill="#76b3e1"/>
              </svg>
              <span class="logo-text">Scripter</span>
            </A>
          </div>
          <div class="nav-links">
            <a href="/#features">Features</a>
            <a href="/#pricing">Pricing</a>
            <A href="/blog">Blog</A>
            <A href="/sign-in" class="nav-signin">Sign In</A>
            <A href="/sign-up" class="nav-signup">Start Writing Free</A>
          </div>
        </div>
      </nav>

      <Show when={post()} fallback={
        <div class="post-not-found">
          <h1>Post not found</h1>
          <p>Sorry, we couldn't find that blog post.</p>
          <A href="/blog" class="cta-primary">Back to Blog</A>
        </div>
      }>
        {(currentPost) => (
          <>
            {/* Post Header */}
            <article class="blog-post">
              <header class="post-header">
                <div class="post-category-badge">{currentPost().category}</div>
                <h1>{currentPost().title}</h1>
                <div class="post-meta">
                  <span class="author">{currentPost().author}</span>
                  <span>•</span>
                  <span>{currentPost().date}</span>
                  <span>•</span>
                  <span>{currentPost().readTime}</span>
                </div>
              </header>

              {/* Post Content */}
              <div 
                class="post-content"
                innerHTML={currentPost().content}
              />

              {/* Share Section */}
              <div class="post-share">
                <h3>Share this post</h3>
                <div class="share-buttons">
                  <button class="share-btn twitter">Twitter</button>
                  <button class="share-btn linkedin">LinkedIn</button>
                  <button class="share-btn facebook">Facebook</button>
                </div>
              </div>
            </article>

            {/* Related Posts */}
            <Show when={relatedPosts().length > 0}>
              <section class="related-posts">
                <h2>Related Posts</h2>
                <div class="related-grid">
                  <For each={relatedPosts()}>
                    {(related) => (
                      <A href={`/blog/${related.slug}`} class="related-card">
                        <div class="related-category">{related.category}</div>
                        <h3>{related.title}</h3>
                        <p>{related.excerpt}</p>
                        <div class="related-meta">{related.readTime}</div>
                      </A>
                    )}
                  </For>
                </div>
              </section>
            </Show>

            {/* CTA Section */}
            <section class="post-cta">
              <h2>Ready to start writing?</h2>
              <p>Join thousands of screenwriters using Scripter to write faster.</p>
              <A href="/sign-up" class="cta-primary">Start Writing Free</A>
            </section>
          </>
        )}
      </Show>

      {/* Footer */}
      <footer class="landing-footer">
        <div class="footer-content">
          <div class="footer-brand">
            <div class="nav-logo">
              <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
                <path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
              </svg>
              <span>Scripter</span>
            </div>
            <p>Write Faster.</p>
          </div>
          <div class="footer-links">
            <div class="footer-col">
              <h4>Product</h4>
              <a href="/#features">Features</a>
              <a href="/#pricing">Pricing</a>
              <a href="/blog">Blog</a>
            </div>
            <div class="footer-col">
              <h4>Company</h4>
              <a href="/about">About</a>
              <a href="/faq">FAQ</a>
              <a href="/contact">Contact</a>
            </div>
            <div class="footer-col">
              <h4>Legal</h4>
              <a href="/terms">Terms</a>
              <a href="/privacy">Privacy</a>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2026 Scripter. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};
