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

const pricingPlans = [
  {
    name: 'Free',
    price: '$0',
    period: '/mo',
    description: 'For screenwriters exploring the platform',
    cta: 'Get Started Free',
    features: [
      'Unlimited projects',
      'Industry-standard formatting',
      'Auto cloud saving',
      'Mobile editing',
      'Comments & mentions',
      'Basic export (PDF, Fountain)',
      'Google Drive / Dropbox backup'
    ],
    highlighted: false
  },
  {
    name: 'Pro',
    price: '$7.99',
    period: '/mo',
    description: 'For professional screenwriters',
    cta: 'Start Pro Trial',
    trial: '14 days free',
    features: [
      'Everything in Free, plus:',
      'Real-time collaboration',
      'Desktop app (macOS, Windows, Linux)',
      'Offline writing',
      'Video chat',
      'Revision tracking',
      'Custom themes and margins',
      'Document statistics',
      'Location/scene filters',
      'Custom title pages',
      'PDF security and watermarks'
    ],
    highlighted: true
  },
  {
    name: 'Premium',
    price: '$10.99',
    period: '/mo',
    description: 'For teams and power users',
    cta: 'Start Premium Trial',
    trial: '14 days free',
    features: [
      'Everything in Pro, plus:',
      'Infinite document history',
      'AI writing assistant',
      'Auto-translate (30+ languages)',
      'ReadAloud narration',
      'Multi-column tools',
      'Priority support',
      'API access'
    ],
    highlighted: false
  }
];

const comparisonData = [
  { feature: 'Unlimited projects', free: true, pro: true, premium: true },
  { feature: 'Industry-standard formatting', free: true, pro: true, premium: true },
  { feature: 'Cloud backup', free: true, pro: true, premium: true },
  { feature: 'Mobile editing', free: true, pro: true, premium: true },
  { feature: 'Comments & mentions', free: true, pro: true, premium: true },
  { feature: 'Real-time collaboration', free: false, pro: true, premium: true },
  { feature: 'Desktop app', free: false, pro: true, premium: true },
  { feature: 'Offline writing', free: false, pro: true, premium: true },
  { feature: 'Video chat', free: false, pro: true, premium: true },
  { feature: 'Revision tracking', free: false, pro: true, premium: true },
  { feature: 'Document history', free: '30 days', pro: '90 days', premium: 'Unlimited' },
  { feature: 'AI writing assistant', free: false, pro: false, premium: true },
  { feature: 'Auto-translate', free: false, pro: false, premium: true },
  { feature: 'ReadAloud narration', free: false, pro: false, premium: true },
  { feature: 'Priority support', free: false, pro: false, premium: true },
  { feature: 'API access', free: false, pro: false, premium: true }
];

const faqs = [
  {
    question: 'Can I switch plans anytime?',
    answer: 'Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately, and we\'ll prorate any differences in billing.'
  },
  {
    question: 'What happens to my scripts if I cancel?',
    answer: 'Your scripts are always yours. You can download them in any format (PDF, Final Draft XML, Fountain) at any time. Even on the free plan, you keep full access to your work.'
  },
  {
    question: 'Do you offer education discounts?',
    answer: 'Yes! We offer 50% off for verified students and educators. Contact us with your .edu email or student ID for verification.'
  },
  {
    question: 'Is there a team plan?',
    answer: 'Yes, we offer custom team pricing for writing rooms, production companies, and classrooms. Contact us for volume discounts and team management features.'
  },
  {
    question: 'Can I try Pro or Premium before paying?',
    answer: 'Absolutely. Both Pro and Premium come with a 14-day free trial. No credit card required to start. If you\'re not satisfied, just downgrade to Free.'
  },
  {
    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.'
  },
  {
    question: 'How does the free plan compare to competitors?',
    answer: 'Our free plan is the most generous in the industry. Unlike WriterDuet (3 project limit) or Final Draft (no free tier), Scripter Free includes unlimited projects and professional formatting.'
  },
  {
    question: 'Do you offer refunds?',
    answer: 'Yes, we offer a 30-day money-back guarantee. If you\'re not satisfied with Scripter for any reason, contact us within 30 days for a full refund.'
  }
];

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

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

      {/* Pricing Header */}
      <section class="pricing-hero">
        <div class="pricing-hero-content">
          <h1>Simple pricing for every screenwriter</h1>
          <p>Start free. Upgrade when you need more. No hidden fees, no surprises.</p>
        </div>
      </section>

      {/* Pricing Cards */}
      <section class="pricing-cards">
        <div class="pricing-container">
          <div class="pricing-grid">
            {pricingPlans.map((plan) => (
              <div class={`pricing-card ${plan.highlighted ? 'featured' : ''}`}>
                {plan.highlighted && (
                  <div class="featured-badge">Most Popular</div>
                )}
                <h3>{plan.name}</h3>
                <div class="price">
                  {plan.price}<span>{plan.period}</span>
                </div>
                <p class="plan-description">{plan.description}</p>
                {plan.trial && <p class="trial-note">{plan.trial}</p>}
                <A href="/sign-up" class={`pricing-cta ${plan.highlighted ? 'primary' : ''}`}>
                  {plan.cta}
                </A>
                <ul class="features-list">
                  {plan.features.map((feature) => (
                    <li class={feature.includes('Everything in') ? 'summary' : ''}>
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Comparison Table */}
      <section class="comparison-section">
        <div class="comparison-container">
          <h2>Compare plans</h2>
          <div class="comparison-table-wrapper">
            <table class="comparison-table">
              <thead>
                <tr>
                  <th>Feature</th>
                  <th>Free</th>
                  <th>Pro</th>
                  <th>Premium</th>
                </tr>
              </thead>
              <tbody>
                {comparisonData.map((row) => (
                  <tr>
                    <td class="feature-name">{row.feature}</td>
                    <td class={typeof row.free === 'boolean' ? (row.free ? 'included' : 'not-included') : ''}>
                      {typeof row.free === 'boolean' ? (row.free ? '✓' : '—') : row.free}
                    </td>
                    <td class={typeof row.pro === 'boolean' ? (row.pro ? 'included' : 'not-included') : ''}>
                      {typeof row.pro === 'boolean' ? (row.pro ? '✓' : '—') : row.pro}
                    </td>
                    <td class={typeof row.premium === 'boolean' ? (row.premium ? 'included' : 'not-included') : ''}>
                      {typeof row.premium === 'boolean' ? (row.premium ? '✓' : '—') : row.premium}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section class="faq-section">
        <div class="faq-container">
          <h2>Frequently asked questions</h2>
          <div class="faq-list">
            {faqs.map((faq, index) => (
              <div class={`faq-item ${openFaq() === index ? 'open' : ''}`}>
                <button 
                  class="faq-question"
                  onClick={() => setOpenFaq(openFaq() === index ? null : index)}
                >
                  <span>{faq.question}</span>
                  <span class="faq-icon">{openFaq() === index ? '−' : '+'}</span>
                </button>
                <div class="faq-answer">
                  {faq.answer}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section class="pricing-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>

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