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

const faqCategories = [
  {
    name: 'Getting Started',
    faqs: [
      {
        question: 'How do I create my first script?',
        answer: 'After signing up, click "New Script" from your dashboard. Choose a template (feature film, TV pilot, etc.) and start writing. Your script is automatically saved to the cloud.'
      },
      {
        question: 'Do I need to install anything?',
        answer: 'No! Scripter works entirely in your browser. For offline writing and additional features, you can download our desktop apps for macOS, Windows, and Linux (Pro plan and above).'
      },
      {
        question: 'Can I import scripts from Final Draft or WriterDuet?',
        answer: 'Yes! Scripter supports Final Draft (.fdx), Fountain (.fountain), and Celtx imports. Your formatting is preserved automatically.'
      },
      {
        question: 'Is my work saved automatically?',
        answer: 'Yes. Scripter auto-saves every few seconds to the cloud. You can also enable backup to Google Drive or Dropbox for additional security.'
      }
    ]
  },
  {
    name: 'Features',
    faqs: [
      {
        question: 'What export formats are supported?',
        answer: 'Scripter exports to PDF, Final Draft XML (.fdx), Fountain (.fountain), and Plain Text. Premium users can also export to Screenplay Pro format.'
      },
      {
        question: 'How does real-time collaboration work?',
        answer: "Invite collaborators to your script via email or shareable link. Multiple writers can edit simultaneously — you'll see each other's cursors and changes in real-time."
      },
      {
        question: 'Can I work offline?',
        answer: "Yes, with our desktop apps (Pro plan and above). Your work syncs automatically when you're back online. Offline mode is not available in the browser version."
      },
      {
        question: 'What is the AI writing assistant?',
        answer: "Our AI can help with dialogue suggestions, scene descriptions, character analysis, and more. It's available on the Premium plan and learns from your writing style."
      }
    ]
  },
  {
    name: 'Pricing',
    faqs: [
      {
        question: "What's included in the free plan?",
        answer: 'Free includes unlimited projects, industry-standard formatting, cloud saving, mobile editing, comments & mentions, and basic export (PDF, Fountain).'
      },
      {
        question: 'Can I try Pro or Premium before paying?',
        answer: 'Yes! Both Pro and Premium come with a 14-day free trial. No credit card required to start.'
      },
      {
        question: 'Do you offer refunds?',
        answer: "Yes, we offer a 30-day money-back guarantee. If you're not satisfied, contact us within 30 days for a full refund."
      },
      {
        question: 'Do you offer education discounts?',
        answer: 'Yes! Students and educators get 50% off with verified .edu email or student ID. Contact us for verification.'
      },
      {
        question: 'What payment methods do you accept?',
        answer: 'We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and Apple Pay. Annual subscriptions receive a 25% discount.'
      }
    ]
  },
  {
    name: 'Technical',
    faqs: [
      {
        question: 'What browsers are supported?',
        answer: 'Scripter works on the latest versions of Chrome, Firefox, Safari, and Edge. We recommend Chrome for the best experience.'
      },
      {
        question: 'How is my data stored and secured?',
        answer: 'Your scripts are encrypted in transit (TLS 1.3) and at rest (AES-256). We use industry-standard security practices and never access your content without permission.'
      },
      {
        question: 'Can I export my data if I leave?',
        answer: 'Absolutely. Your scripts are always yours. Download them in any format at any time, even after canceling your subscription.'
      },
      {
        question: 'What are the desktop app requirements?',
        answer: 'macOS 10.15+, Windows 10+, or Ubuntu 18.04+. 4GB RAM minimum (8GB recommended). 500MB free disk space.'
      }
    ]
  },
  {
    name: 'Account',
    faqs: [
      {
        question: 'Can I switch plans anytime?',
        answer: 'Yes, you can upgrade or downgrade at any time. Changes take effect immediately with prorated billing.'
      },
      {
        question: 'What happens to my scripts if I cancel?',
        answer: 'Your scripts are always yours. You keep full access on the free plan. Download them anytime in any format.'
      },
      {
        question: 'Can I share scripts with non-Scripter users?',
        answer: 'Yes! Export to PDF or Fountain and share with anyone. They can read without needing a Scripter account.'
      },
      {
        question: 'Do you offer team plans?',
        answer: 'Yes, we offer custom team pricing for writing rooms, production companies, and classrooms. Contact us for volume discounts.'
      }
    ]
  }
];

export const Faq: Component = () => {
  const [openFaq, setOpenFaq] = createSignal<{category: number, index: number} | null>(null);

  return (
    <div class="faq-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="/faq" class="active">FAQ</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>

      {/* FAQ Header */}
      <section class="faq-hero">
        <div class="faq-hero-content">
          <h1>Frequently Asked Questions</h1>
          <p>Everything you need to know about Scripter. Can't find what you're looking for? <A href="/contact">Contact us</A>.</p>
        </div>
      </section>

      {/* FAQ Categories */}
      <section class="faq-categories">
        <div class="faq-container">
          <For each={faqCategories}>
            {(category, categoryIndex) => (
              <div class="faq-category">
                <h2>{category.name}</h2>
                <div class="faq-list">
                  <For each={category.faqs}>
                    {(faq, faqIndex) => {
                      const isOpen = () => {
                        const current = openFaq();
                        return current?.category === categoryIndex() && current?.index === faqIndex();
                      };
                      
                      return (
                        <div class={`faq-item ${isOpen() ? 'open' : ''}`}>
                          <button 
                            class="faq-question"
                            onClick={() => setOpenFaq(isOpen() ? null : { category: categoryIndex(), index: faqIndex() })}
                          >
                            <span>{faq.question}</span>
                            <span class="faq-icon">{isOpen() ? '−' : '+'}</span>
                          </button>
                          <div class="faq-answer">
                            {faq.answer}
                          </div>
                        </div>
                      );
                    }}
                  </For>
                </div>
              </div>
            )}
          </For>
        </div>
      </section>

      {/* Contact CTA */}
      <section class="faq-cta">
        <h2>Still have questions?</h2>
        <p>Our team is here to help. Reach out and we'll get back to you within 24 hours.</p>
        <A href="/contact" class="cta-primary">Contact Support</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>
  );
};
