import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FAQSectionComponent, FAQConfig } from 'ui-landing-pages';

@Component({
  selector: 'app-landing-faq-demo',
  standalone: true,
  imports: [CommonModule, FAQSectionComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="demo-container">
      <div class="demo-header">
        <h1>FAQ Section Demo</h1>
        <p>Interactive FAQ component with accordion functionality and search.</p>
        <div class="under-construction">
          <p><strong>🚧 Under Construction:</strong> This demo is temporarily disabled while the ui-landing-pages library is being built.</p>
        </div>
      </div>

      <!-- Temporarily commented out until ui-landing-pages is built
      <div style="display: none;">
      <div class="demo-section">
        <h2>Default FAQ</h2>
        <ui-lp-faq [configuration]="defaultConfig"></ui-lp-faq>
      </div>

      <!-- Bordered FAQ -->
      <div class="demo-section">
        <h2>Bordered Theme</h2>
        <ui-lp-faq [configuration]="borderedConfig"></ui-lp-faq>
      </div>

      <!-- Minimal FAQ -->
      <div class="demo-section">
        <h2>Minimal Theme</h2>
        <ui-lp-faq [configuration]="minimalConfig"></ui-lp-faq>
      </div>

      <!-- Multiple Expand FAQ -->
      <div class="demo-section">
        <h2>Multiple Expand Enabled</h2>
        <ui-lp-faq [configuration]="multipleExpandConfig"></ui-lp-faq>
      </div>
      -->
    </div>
  `,
  styles: [`
    .demo-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }

    .demo-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .demo-header h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: #1a1a1a;
    }

    .demo-header p {
      font-size: 1.125rem;
      color: #666;
    }

    .demo-section {
      margin-bottom: 4rem;
    }

    .demo-section h2 {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
      color: #333;
      border-bottom: 2px solid #e0e0e0;
      padding-bottom: 0.5rem;
    }
  `]
})
export class LandingFAQDemoComponent {
  defaultConfig: FAQConfig = {
    title: 'Frequently Asked Questions',
    subtitle: 'Find answers to common questions about our platform',
    searchEnabled: true,
    expandMultiple: false,
    theme: 'default',
    items: [
      {
        id: '1',
        question: 'What is included in the free plan?',
        answer: 'The free plan includes up to 5 projects, 2GB storage, and basic support. Perfect for getting started with small projects.'
      },
      {
        id: '2',
        question: 'Can I upgrade or downgrade my plan at any time?',
        answer: 'Yes, you can change your plan at any time. Upgrades take effect immediately, while downgrades take effect at the next billing cycle.'
      },
      {
        id: '3',
        question: 'Is my data secure?',
        answer: 'Absolutely. We use enterprise-grade encryption, regular security audits, and comply with SOC 2 Type II standards to protect your data.'
      },
      {
        id: '4',
        question: 'Do you offer customer support?',
        answer: 'Yes! We provide 24/7 email support for all users, with priority phone support available for Pro and Enterprise customers.'
      },
      {
        id: '5',
        question: 'Can I cancel my subscription anytime?',
        answer: 'Yes, you can cancel your subscription at any time. Your account will remain active until the end of your current billing period.'
      }
    ]
  };

  borderedConfig: FAQConfig = {
    ...this.defaultConfig,
    title: 'Product Questions',
    subtitle: 'Everything you need to know about our product features',
    theme: 'bordered',
    items: [
      {
        id: '6',
        question: 'How do I integrate with third-party services?',
        answer: 'Our platform offers REST APIs, webhooks, and pre-built integrations with popular services like Slack, GitHub, and Zapier.'
      },
      {
        id: '7',
        question: 'What file formats do you support?',
        answer: 'We support all major file formats including PDF, Word, Excel, PowerPoint, images (PNG, JPG, SVG), and various code files.'
      },
      {
        id: '8',
        question: 'Is there a mobile app available?',
        answer: 'Yes! Our mobile apps are available for both iOS and Android, with full feature parity to the web application.'
      }
    ]
  };

  minimalConfig: FAQConfig = {
    ...this.defaultConfig,
    title: 'Technical FAQ',
    subtitle: 'Answers to technical questions',
    theme: 'minimal',
    searchEnabled: false,
    items: [
      {
        id: '9',
        question: 'What are your API rate limits?',
        answer: 'Free accounts: 100 requests/hour. Pro accounts: 1,000 requests/hour. Enterprise: Custom limits based on your needs.'
      },
      {
        id: '10',
        question: 'Do you provide webhooks?',
        answer: 'Yes, we support webhooks for real-time event notifications. You can configure them in your dashboard settings.'
      },
      {
        id: '11',
        question: 'What programming languages do you support?',
        answer: 'We provide SDKs for JavaScript, Python, Ruby, PHP, Go, and .NET. REST APIs are available for any language.'
      }
    ]
  };

  multipleExpandConfig: FAQConfig = {
    ...this.defaultConfig,
    title: 'Detailed FAQ',
    subtitle: 'Comprehensive answers to all your questions',
    expandMultiple: true,
    items: [
      {
        id: '12',
        question: 'How does billing work?',
        answer: 'Billing is processed monthly or annually based on your preference. You can view detailed invoices in your account dashboard and update payment methods anytime.'
      },
      {
        id: '13',
        question: 'Can I export my data?',
        answer: 'Yes, you can export all your data in various formats (CSV, JSON, XML) at any time. Enterprise customers also get automated backup options.'
      },
      {
        id: '14',
        question: 'What happens if I exceed my plan limits?',
        answer: 'If you approach your limits, we\'ll notify you in advance. You can either upgrade your plan or purchase additional resources as needed.'
      }
    ]
  };
}