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

const blogPosts = [
  {
    slug: 'introducing-scripter',
    title: 'Introducing Scripter: The Modern Screenwriting Platform',
    excerpt: 'After months of development, were thrilled to announce Scripter — built for screenwriters who demand speed, collaboration, and creative freedom.',
    category: 'Product',
    date: 'April 24, 2026',
    readTime: '3 min read'
  },
  {
    slug: '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, its time for a better option.',
    category: 'Tips',
    date: 'April 23, 2026',
    readTime: '5 min read'
  },
  {
    slug: '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.',
    category: 'Tips',
    date: 'April 22, 2026',
    readTime: '8 min read'
  },
  {
    slug: '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.',
    category: 'Product',
    date: 'April 21, 2026',
    readTime: '4 min read'
  }
];

export const Blog: Component = () => {
  const [selectedCategory, setSelectedCategory] = createSignal<string>('All');
  
  const categories = ['All', 'Tips', 'Industry', 'Product', 'Community'];
  
  const filteredPosts = () => {
    const category = selectedCategory();
    if (category === 'All') return blogPosts;
    return blogPosts.filter(post => post.category === category);
  };

  return (
    <div class="blog-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" class="active">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>

      {/* Blog Header */}
      <section class="blog-header">
        <div class="blog-header-content">
          <h1>The Scripter Blog</h1>
          <p>Tips, insights, and updates for modern screenwriters</p>
        </div>
      </section>

      {/* Category Filter */}
      <section class="blog-filter">
        <div class="filter-container">
          <For each={categories}>
            {(category) => (
              <button
                class={selectedCategory() === category ? 'active' : ''}
                onClick={() => setSelectedCategory(category)}
              >
                {category}
              </button>
            )}
          </For>
        </div>
      </section>

      {/* Blog Posts Grid */}
      <section class="blog-posts">
        <div class="posts-container">
          <div class="posts-grid">
            <For each={filteredPosts()}>
              {(post) => (
                <A href={`/blog/${post.slug}`} class="post-card">
                  <div class="post-category">{post.category}</div>
                  <h2 class="post-title">{post.title}</h2>
                  <p class="post-excerpt">{post.excerpt}</p>
                  <div class="post-meta">
                    <span>{post.date}</span>
                    <span>•</span>
                    <span>{post.readTime}</span>
                  </div>
                </A>
              )}
            </For>
          </div>
        </div>
      </section>

      {/* Newsletter Signup */}
      <section class="newsletter">
        <div class="newsletter-content">
          <h2>Stay in the loop</h2>
          <p>Get screenwriting tips, product updates, and industry insights delivered to your inbox.</p>
          <form class="newsletter-form" onSubmit={(e) => e.preventDefault()}>
            <input 
              type="email" 
              placeholder="Enter your email" 
              required
            />
            <button type="submit" class="cta-primary">Subscribe</button>
          </form>
          <p class="newsletter-note">No spam. Unsubscribe anytime.</p>
        </div>
      </section>

      {/* 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>
  );
};
