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

const featureCategories = [
  {
    name: 'Writing Tools',
    icon: '✍️',
    features: [
      {
        title: 'Screenplay Editor',
        description: 'Full-featured editor with industry-standard formatting built in.',
        details: ['Scene headings', 'Action lines', 'Dialogue', 'Parentheticals', 'Transitions']
      },
      {
        title: 'Auto-Format',
        description: 'Intelligent formatting that understands screenplay structure.',
        details: ['Automatic indentation', 'Element detection', 'Tab/enter shortcuts', 'Custom margins']
      },
      {
        title: 'Templates',
        description: 'Start with the right format for any project.',
        details: ['Feature film', 'TV pilot', 'Short film', 'Sitcom', 'Podcast', 'Treatment']
      },
      {
        title: 'Typewriter Mode',
        description: 'Keep your current line centered as you type for better focus.',
        details: ['Scroll locking', 'Custom positioning', 'Distraction-free', 'Smooth scrolling']
      },
      {
        title: 'Dictation',
        description: 'Speak your script and let Scripter format it automatically.',
        details: ['Voice-to-text', 'Multi-language', 'Punctuation commands', 'High accuracy']
      }
    ]
  },
  {
    name: 'Collaboration',
    icon: '👥',
    features: [
      {
        title: 'Real-Time Editing',
        description: 'Multiple writers, one document, zero conflicts.',
        details: ['Live cursors', 'Instant sync', 'Conflict-free editing', 'Presence indicators']
      },
      {
        title: 'Comments & Mentions',
        description: 'Leave feedback inline and @mention your team.',
        details: ['Threaded comments', '@mentions', 'Resolve comments', 'Comment notifications']
      },
      {
        title: 'Video Chat',
        description: 'Built-in video calls for writing sessions.',
        details: ['HD video', 'Screen sharing', 'Group calls', 'No external app needed']
      },
      {
        title: 'Revision Tracking',
        description: 'Color-coded changes with accept/reject workflow.',
        details: ['Change highlighting', 'Accept/reject', 'Revision notes', 'OOC marks']
      },
      {
        title: 'Version History',
        description: 'Never lose a draft. Roll back to any point in time.',
        details: ['Auto-save', 'Version snapshots', 'Compare versions', 'Restore anytime']
      }
    ]
  },
  {
    name: 'Organization',
    icon: '📋',
    features: [
      {
        title: 'Project Management',
        description: 'Cards, sequencing, outlining tools.',
        details: ['Scene cards', 'Drag-and-drop', 'Color coding', 'Notes per scene']
      },
      {
        title: 'Character Database',
        description: 'Track characters, relationships, and arcs.',
        details: ['Character profiles', 'Relationship maps', 'Arc tracking', 'Appearance log']
      },
      {
        title: 'Mind Maps',
        description: 'Visual story structure planning.',
        details: ['Brainstorming boards', 'Story connections', 'Visual outlining', 'Export to cards']
      },
      {
        title: 'Goal Setting',
        description: 'Track your writing progress and hit deadlines.',
        details: ['Daily goals', 'Progress tracking', 'Deadline reminders', 'Statistics']
      }
    ]
  },
  {
    name: 'Export & Integration',
    icon: '📤',
    features: [
      {
        title: 'Export Formats',
        description: 'PDF, Final Draft XML, Fountain, and more.',
        details: ['PDF export', 'FDX import/export', 'Fountain support', 'Screenplay Pro']
      },
      {
        title: 'Open API',
        description: 'Integrate with StudioBinder, IMDb, and more.',
        details: ['REST API', 'Webhooks', 'Third-party integrations', 'Custom workflows']
      },
      {
        title: 'Cloud Backup',
        description: 'Automatic saves to Google Drive, Dropbox.',
        details: ['Auto-backup', 'Multiple providers', 'Scheduled sync', 'Conflict resolution']
      }
    ]
  },
  {
    name: 'AI Features',
    icon: '🤖',
    features: [
      {
        title: 'Smart Continuation',
        description: 'AI suggests next lines and scenes.',
        details: ['Context-aware', 'Multiple suggestions', 'Style matching', 'One-click insert']
      },
      {
        title: 'Character Analysis',
        description: 'Get insights on character consistency and development.',
        details: ['Voice analysis', 'Arc tracking', 'Relationship insights', 'Development tips']
      },
      {
        title: 'Scene Enhancement',
        description: 'Improve descriptions, tighten dialogue.',
        details: ['Passive voice detection', 'Dialogue polish', 'Pacing analysis', 'Suggestions']
      },
      {
        title: 'Auto-Translate',
        description: 'Translate scripts to 30+ languages.',
        details: ['30+ languages', 'Format preserved', 'Character names intact', 'Quick switch']
      },
      {
        title: 'ReadAloud',
        description: 'TTS narration with distinct character voices.',
        details: ['Multiple voices', 'Natural speech', 'Speed control', 'Character detection']
      }
    ]
  }
];

export const Features: Component = () => {
  return (
    <div class="features-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" class="active">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>

      {/* Features Header */}
      <section class="features-hero">
        <div class="features-hero-content">
          <h1>Everything you need to write your best script</h1>
          <p>From first draft to final polish, Scripter has the tools professional screenwriters need.</p>
        </div>
      </section>

      {/* Feature Categories */}
      <section class="features-categories">
        <div class="features-container">
          <For each={featureCategories}>
            {(category) => (
              <div class="feature-category" id={category.name.toLowerCase().replace(' ', '-')}>
                <div class="category-header">
                  <span class="category-icon">{category.icon}</span>
                  <h2>{category.name}</h2>
                </div>
                <div class="category-features">
                  <For each={category.features}>
                    {(feature) => (
                      <div class="feature-detail">
                        <h3>{feature.title}</h3>
                        <p>{feature.description}</p>
                        <ul class="feature-details-list">
                          <For each={feature.details}>
                            {(detail) => <li>{detail}</li>}
                          </For>
                        </ul>
                      </div>
                    )}
                  </For>
                </div>
              </div>
            )}
          </For>
        </div>
      </section>

      {/* CTA Section */}
      <section class="features-cta">
        <h2>Ready to experience the future of screenwriting?</h2>
        <p>Join thousands of writers who've made the switch to Scripter.</p>
        <A href="/sign-up" class="cta-primary">Start Writing Free</A>
      </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>
  );
};
