import React from 'react';
import { 
  Book, 
  MousePointer2, 
  Sparkles, 
  Code2, 
  ShieldCheck, 
  Zap, 
  ChevronRight, 
  Info,
  Layers,
  Cpu,
  Terminal,
  ArrowLeft,
  CheckCircle,
  XCircle
} from 'lucide-react';

interface HelpPageProps {
  onBack: () => void;
}

const HelpPage: React.FC<HelpPageProps> = ({ onBack }) => {
  const handleScrollTo = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div className="fixed inset-0 bg-slate-950 text-slate-200 selection:bg-blue-500/30 overflow-y-auto overflow-x-hidden z-50">
      {/* Header */}
      <header className="border-b border-slate-800/50 bg-slate-950/80 backdrop-blur-md sticky top-0 z-50">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <button 
            onClick={onBack}
            className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors group"
          >
            <ArrowLeft size={18} className="group-hover:-translate-x-1 transition-transform" />
            <span className="font-medium">Back to Home</span>
          </button>
          <div className="flex items-center gap-2">
            <span className="font-bold text-white">Documentation</span>
          </div>
          <div className="w-24" /> {/* Spacer for centering */}
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 flex flex-col lg:flex-row gap-12">
        {/* Left Content Area */}
        <div className="flex-1">
          {/* Intro */}
          <div className="mb-16">
            <h1 className="text-4xl md:text-6xl font-extrabold text-white mb-6 tracking-tight">
              Mastering <br />
              <span className="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
                Neural Architectures
              </span>
            </h1>
            <p className="text-xl text-slate-400 leading-relaxed max-w-3xl">
              Welcome to the definitive guide for Architecture Agents. Our platform empowers you to design, validate, and export production-ready deep learning models using a combination of visual intuition and state-of-the-art AI assistance.
            </p>
          </div>

          {/* Quick Start Guide */}
          <section id="quick-start" className="mb-24">
            <div className="flex items-center justify-between mb-8">
              <h2 className="text-3xl font-bold text-white flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center border border-blue-500/20">
                  <Zap size={20} className="text-blue-400" />
                </div>
                Quick Start Guide
              </h2>
            </div>
            
            <div className="grid md:grid-cols-2 gap-6">
              <GuideStep 
                number="01"
                title="Initialize Your Canvas"
                description="Launch the builder and start with a clean slate. Use the 'AI Builder' to generate a baseline architecture or drag an 'Input' layer to begin manual design."
              />
              <GuideStep 
                number="02"
                title="Visual Composition"
                description="Drag and drop layers from the categorized sidebar. We provide everything from standard Linear layers to specialized Transformer and Spiking Neural Network blocks."
              />
              <GuideStep 
                number="03"
                title="Establish Data Flow"
                description="Connect nodes by dragging from output ports to input ports. Our system automatically checks for cycle detection and ensures a valid directed acyclic graph (DAG)."
              />
              <GuideStep 
                number="04"
                title="Hyperparameter Tuning"
                description="Fine-tune your model by selecting nodes and adjusting their properties. Change kernel sizes, activation functions, and dropout rates in real-time."
              />
              <GuideStep 
                number="05"
                title="Architectural Validation"
                description="Use the 'Validate' tool to find shape mismatches. Our AI agents can suggest 'Fixes' like adding pooling or linear layers to resolve dimension conflicts."
              />
              <GuideStep 
                number="06"
                title="Export & Deploy"
                description="Once satisfied, export your design to high-quality PyTorch code. The generated module is fully commented and ready to be dropped into any training pipeline."
              />
            </div>
          </section>

          {/* Advanced Patterns */}
          <section id="advanced-patterns" className="mb-24">
            <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
                <Layers size={20} className="text-emerald-400" />
              </div>
              Advanced Design Patterns
            </h2>
            <div className="space-y-8">
              <div className="bg-slate-900/50 border border-slate-800 rounded-2xl p-8">
                <h3 className="text-xl font-bold text-white mb-4">Residual & Skip Connections</h3>
                <p className="text-slate-400 leading-relaxed mb-6">
                  To prevent vanishing gradients in deep networks, use skip connections. In Architecture Agents, you can easily create these by branching an output to multiple inputs. The generated code will handle the addition or concatenation logic based on your configuration.
                </p>
                <div className="flex flex-wrap gap-2">
                  <span className="px-3 py-1 bg-slate-800 rounded-full text-xs text-slate-300 border border-slate-700">ResNet</span>
                  <span className="px-3 py-1 bg-slate-800 rounded-full text-xs text-slate-300 border border-slate-700">DenseNet</span>
                  <span className="px-3 py-1 bg-slate-800 rounded-full text-xs text-slate-300 border border-slate-700">U-Net</span>
                </div>
              </div>

              <div className="bg-slate-900/50 border border-slate-800 rounded-2xl p-8">
                <h3 className="text-xl font-bold text-white mb-4">Attention Mechanisms</h3>
                <p className="text-slate-400 leading-relaxed mb-6">
                  Modern architectures rely heavily on attention. Use our 'MultiheadAttention' and 'SelfAttention' nodes to build Transformer-based models. Ensure your hidden dimensions are divisible by the number of heads to maintain mathematical consistency.
                </p>
                <div className="flex flex-wrap gap-2">
                  <span className="px-3 py-1 bg-slate-800 rounded-full text-xs text-slate-300 border border-slate-700">Self-Attention</span>
                  <span className="px-3 py-1 bg-slate-800 rounded-full text-xs text-slate-300 border border-slate-700">Cross-Attention</span>
                  <span className="px-3 py-1 bg-slate-800 rounded-full text-xs text-slate-300 border border-slate-700">Flash Attention</span>
                </div>
              </div>
            </div>
          </section>

          {/* Prompting Tips */}
          <section id="prompting-tips" className="mb-24">
            <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center border border-purple-500/20">
                <Sparkles size={20} className="text-purple-400" />
              </div>
              AI Prompting Strategies
            </h2>
            <div className="bg-slate-900 border border-slate-800 rounded-2xl p-8">
              <p className="text-slate-400 mb-8">
                The AI Builder is a powerful co-pilot. To get the most accurate architectures, treat your prompts like technical specifications.
              </p>
              <div className="grid md:grid-cols-2 gap-12">
                <div className="space-y-6">
                  <h4 className="text-white font-bold flex items-center gap-2">
                    <CheckCircle size={18} className="text-emerald-500" />
                    High-Quality Prompts
                  </h4>
                  <ul className="space-y-6">
                    <li className="text-sm text-slate-300">
                      <strong className="text-white block mb-1">Structural Detail:</strong>
                      "Design a 5-layer CNN with increasing filter sizes (32, 64, 128, 256, 512) and batch normalization after each conv."
                    </li>
                    <li className="text-sm text-slate-300">
                      <strong className="text-white block mb-1">Functional Requirements:</strong>
                      "Create a sequence-to-sequence model using bidirectional LSTMs and an attention-based decoder for translation."
                    </li>
                  </ul>
                </div>
                <div className="space-y-6">
                  <h4 className="text-white font-bold flex items-center gap-2">
                    <XCircle size={18} className="text-red-500" />
                    Common Pitfalls
                  </h4>
                  <ul className="space-y-6">
                    <li className="text-sm text-slate-300">
                      <strong className="text-white block mb-1">Ambiguous Terms:</strong>
                      Avoid "Make it fast" or "Make it deep". Instead, use "Reduce parameters" or "Add 10 residual blocks".
                    </li>
                    <li className="text-sm text-slate-300">
                      <strong className="text-white block mb-1">Mixing Domains:</strong>
                      Don't ask for training code and architecture in the same prompt. Focus on the graph structure first.
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </section>

          {/* Horizontal Ad Slot / Featured Resource */}
          <div className="mb-24 p-8 rounded-3xl bg-gradient-to-r from-blue-900/20 to-indigo-900/20 border border-blue-500/10 flex flex-col md:flex-row items-center gap-8">
            <div className="flex-1">
              <div className="text-[10px] text-blue-400 uppercase tracking-widest mb-2 font-bold">Featured Resource</div>
              <h3 className="text-xl font-bold text-white mb-2">Accelerate Your Training with Cloud GPUs</h3>
              <p className="text-sm text-slate-400">
                Once you've designed your architecture, you'll need the compute power to train it. Explore our recommended cloud partners for seamless PyTorch deployment.
              </p>
            </div>
            <div className="w-full md:w-48 h-32 bg-slate-800/50 rounded-xl border border-slate-700/50 flex items-center justify-center text-center p-4">
              <p className="text-[10px] text-slate-500 italic">Partner content and specialized developer offers appear here.</p>
            </div>
          </div>

          {/* Model Use Cases */}
          <section id="taxonomy" className="mb-24">
            <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center border border-blue-500/20">
                <Cpu size={20} className="text-blue-400" />
              </div>
              Model Taxonomy & Use Cases
            </h2>
            <div className="grid md:grid-cols-2 gap-6">
              <UseCaseCard 
                title="Vision Models (CNNs/ViTs)"
                useCase="Computer Vision"
                description="Best for spatial data. CNNs excel at local feature extraction, while Vision Transformers (ViTs) capture global dependencies through self-attention."
              />
              <UseCaseCard 
                title="Sequence Models (RNNs/Transformers)"
                useCase="NLP & Time Series"
                description="Ideal for data where order matters. Transformers have largely superseded RNNs for long-range dependencies due to parallelization."
              />
              <UseCaseCard 
                title="Generative Models (VAEs/GANs/Diffusion)"
                useCase="Content Creation"
                description="Used for creating new data samples. Diffusion models are currently state-of-the-art for high-fidelity image synthesis."
              />
              <UseCaseCard 
                title="Graph Neural Networks (GNNs)"
                useCase="Relational Data"
                description="Designed for non-Euclidean data like social networks, molecular structures, and recommendation systems."
              />
            </div>
          </section>

          {/* FAQ */}
          <section id="faq" className="mb-24">
            <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center border border-slate-700">
                <Info size={20} className="text-slate-400" />
              </div>
              Frequently Asked Questions
            </h2>
            
            <div className="space-y-4">
              <FAQItem 
                question="How does the code generation work?"
                answer="Our engine parses the graph topology and translates it into a standard PyTorch nn.Module. It automatically handles layer initialization in __init__ and data flow in the forward method, including complex branching and residual additions."
              />
              <FAQItem 
                question="Can I use this for production models?"
                answer="Yes. The exported code follows industry best practices for PyTorch development. However, we always recommend reviewing the generated code to ensure it meets your specific performance and deployment requirements."
              />
              <FAQItem 
                question="What is the 'Auto-Fix' feature?"
                answer="Auto-Fix uses a specialized AI agent to analyze your graph for dimension mismatches. If it finds a conflict (e.g., a 128-dim output connecting to a 256-dim input), it will suggest inserting a Linear or Pooling layer to bridge the gap."
              />
              <FAQItem 
                question="Is there a limit to the number of layers?"
                answer="While there is no hard limit, extremely large graphs (100+ nodes) may impact browser performance. We recommend modularizing your design if it becomes unwieldy."
              />
            </div>
          </section>

          {/* Glossary */}
          <section id="glossary" className="mb-24">
            <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center border border-blue-500/20">
                <Book size={20} className="text-blue-400" />
              </div>
              Glossary of Terms
            </h2>
            <div className="grid md:grid-cols-2 gap-4">
              <GlossaryItem term="Activation Function" definition="A mathematical function (like ReLU or Sigmoid) applied to a layer's output to introduce non-linearity." />
              <GlossaryItem term="Backpropagation" definition="The primary algorithm used to train neural networks by calculating gradients of the loss function." />
              <GlossaryItem term="Batch Normalization" definition="A technique to standardize inputs to a layer, accelerating training and providing regularization." />
              <GlossaryItem term="Dropout" definition="A regularization technique where randomly selected neurons are ignored during training to prevent overfitting." />
              <GlossaryItem term="Hyperparameter" definition="A configuration setting (like learning rate or kernel size) that is set before the learning process begins." />
              <GlossaryItem term="Stochastic Gradient Descent" definition="An iterative method for optimizing an objective function with suitable smoothness properties." />
            </div>
          </section>

          {/* Best Practices */}
          <section id="best-practices" className="mb-24">
            <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
                <ShieldCheck size={20} className="text-emerald-400" />
              </div>
              Architecture Best Practices
            </h2>
            <div className="space-y-6">
              <div className="p-6 rounded-2xl bg-slate-900/50 border border-slate-800">
                <h4 className="text-white font-bold mb-2">1. Start Simple</h4>
                <p className="text-sm text-slate-400 leading-relaxed">
                  Begin with a baseline model (like a simple MLP or a standard ResNet) before adding complexity. Use the AI Builder to generate these baselines quickly.
                </p>
              </div>
              <div className="p-6 rounded-2xl bg-slate-900/50 border border-slate-800">
                <h4 className="text-white font-bold mb-2">2. Monitor Dimensions</h4>
                <p className="text-sm text-slate-400 leading-relaxed">
                  Pay close attention to the output shapes of your layers. Convolutional layers reduce spatial dimensions unless padding is used. Ensure your final layer matches the number of classes in your dataset.
                </p>
              </div>
              <div className="p-6 rounded-2xl bg-slate-900/50 border border-slate-800">
                <h4 className="text-white font-bold mb-2">3. Use Normalization</h4>
                <p className="text-sm text-slate-400 leading-relaxed">
                  Include BatchNorm or LayerNorm after convolutional or linear layers. This helps stabilize the learning process and allows for higher learning rates.
                </p>
              </div>
            </div>
          </section>

          {/* Keyboard Shortcuts */}
          <section id="shortcuts" className="mb-24">
            <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center border border-slate-700">
                <Terminal size={20} className="text-slate-400" />
              </div>
              Keyboard Shortcuts
            </h2>
            <div className="bg-slate-900/30 border border-slate-800 rounded-2xl overflow-hidden">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-slate-900/50 border-b border-slate-800">
                    <th className="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Action</th>
                    <th className="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Shortcut</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800/50">
                  <ShortcutRow action="Delete Selected Node" shortcut="Del / Backspace" />
                  <ShortcutRow action="Undo Last Action" shortcut="Ctrl + Z" />
                  <ShortcutRow action="Redo Last Action" shortcut="Ctrl + Y" />
                  <ShortcutRow action="Zoom In / Out" shortcut="Mouse Wheel" />
                  <ShortcutRow action="Pan Canvas" shortcut="Space + Drag" />
                  <ShortcutRow action="Select Multiple" shortcut="Shift + Drag" />
                </tbody>
              </table>
            </div>
          </section>

          {/* Troubleshooting */}
          <section id="troubleshooting" className="mb-24">
            <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center border border-red-500/20">
                <Info size={20} className="text-red-400" />
              </div>
              Troubleshooting
            </h2>
            <div className="space-y-4">
              <div className="p-6 rounded-2xl bg-slate-900/50 border border-slate-800">
                <h4 className="text-white font-bold mb-2">Dimension Mismatch Errors</h4>
                <p className="text-sm text-slate-400 leading-relaxed">
                  If you see a red connection line, it means the output dimension of the source node does not match the input dimension of the target node. Use a <strong>Linear</strong> layer or <strong>AdaptivePooling</strong> to resize the data.
                </p>
              </div>
              <div className="p-6 rounded-2xl bg-slate-900/50 border border-slate-800">
                <h4 className="text-white font-bold mb-2">Graph is Disconnected</h4>
                <p className="text-sm text-slate-400 leading-relaxed">
                  All nodes must be reachable from the <strong>Input</strong> node and eventually lead to an <strong>Output</strong> node. Check for isolated nodes that might be breaking the flow.
                </p>
              </div>
              <div className="p-6 rounded-2xl bg-slate-900/50 border border-slate-800">
                <h4 className="text-white font-bold mb-2">Exported Code Fails to Run</h4>
                <p className="text-sm text-slate-400 leading-relaxed">
                  Ensure you have <strong>torch</strong> installed in your environment. The generated code assumes a standard PyTorch setup. If a specific layer is missing, check the <strong>Custom Layer</strong> configuration.
                </p>
              </div>
            </div>
          </section>

          {/* Call to Action */}
          <section className="bg-gradient-to-br from-blue-600/20 to-purple-600/20 rounded-3xl p-8 md:p-12 border border-blue-500/20 text-center mb-20">
            <h2 className="text-3xl font-bold text-white mb-4">Ready to start building?</h2>
            <p className="text-slate-400 mb-8 max-w-xl mx-auto">
              Join thousands of developers using Architecture Agents to design the next generation of AI models.
            </p>
            <button 
              onClick={onBack}
              className="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-lg transition-all shadow-lg shadow-blue-500/25"
            >
              Launch the Architect
            </button>
          </section>
        </div>

        {/* Right Sidebar - Natural Ad Slot Area */}
        <aside className="w-full lg:w-80 shrink-0 space-y-8">
          {/* Sticky Sidebar Content */}
          <div className="sticky top-28 space-y-8">
            {/* Ad Slot 1 */}
            <div className="rounded-2xl bg-slate-900/40 border border-slate-800/50 p-6 min-h-[250px] flex flex-col items-center justify-center text-center">
               <div className="text-[10px] text-slate-600 uppercase tracking-widest mb-4 font-bold">Sponsored Content</div>
               {/* This is a natural spot for a vertical ad */}
               <div className="w-full h-full flex items-center justify-center">
                  <p className="text-xs text-slate-500 italic">This space is reserved for relevant developer tools and resources.</p>
               </div>
            </div>

            {/* Quick Links */}
            <div className="rounded-2xl bg-slate-900/40 border border-slate-800/50 p-6">
              <h4 className="text-sm font-bold text-white mb-4 uppercase tracking-wider">Quick Links</h4>
              <ul className="space-y-3">
                <li><button onClick={() => handleScrollTo('quick-start')} className="text-xs text-slate-400 hover:text-blue-400 transition-colors flex items-center gap-2"><ChevronRight size={12}/> Quick Start Guide</button></li>
                <li><button onClick={() => handleScrollTo('advanced-patterns')} className="text-xs text-slate-400 hover:text-blue-400 transition-colors flex items-center gap-2"><ChevronRight size={12}/> Advanced Patterns</button></li>
                <li><button onClick={() => handleScrollTo('prompting-tips')} className="text-xs text-slate-400 hover:text-blue-400 transition-colors flex items-center gap-2"><ChevronRight size={12}/> Prompting Tips</button></li>
                <li><button onClick={() => handleScrollTo('faq')} className="text-xs text-slate-400 hover:text-blue-400 transition-colors flex items-center gap-2"><ChevronRight size={12}/> FAQs</button></li>
                <li><button onClick={() => handleScrollTo('best-practices')} className="text-xs text-slate-400 hover:text-blue-400 transition-colors flex items-center gap-2"><ChevronRight size={12}/> Best Practices</button></li>
                <li><button onClick={() => handleScrollTo('shortcuts')} className="text-xs text-slate-400 hover:text-blue-400 transition-colors flex items-center gap-2"><ChevronRight size={12}/> Shortcuts</button></li>
              </ul>
            </div>

            {/* Ad Slot 2 */}
            <div className="rounded-2xl bg-slate-900/40 border border-slate-800/50 p-6 min-h-[400px] flex flex-col items-center justify-center text-center">
               <div className="text-[10px] text-slate-600 uppercase tracking-widest mb-4 font-bold">Community Spotlight</div>
               {/* Another natural spot for an ad or community content */}
               <div className="w-full h-full flex items-center justify-center">
                  <p className="text-xs text-slate-500 italic">Discover featured architectures from the community.</p>
               </div>
            </div>
          </div>
        </aside>
      </main>

      {/* Footer */}
      <footer className="mt-20 py-12 border-t border-slate-800/50 text-center text-slate-500 text-sm">
        <p>&copy; {new Date().getFullYear()} wuhp.org. All rights reserved.</p>
      </footer>
    </div>
  );
};

const GlossaryItem: React.FC<{ term: string, definition: string }> = ({ term, definition }) => (
  <div className="p-4 rounded-xl bg-slate-900/50 border border-slate-800">
    <div className="font-bold text-white text-sm mb-1">{term}</div>
    <p className="text-xs text-slate-500 leading-relaxed">{definition}</p>
  </div>
);

const GuideStep: React.FC<{ number: string, title: string, description: string }> = ({ number, title, description }) => (
  <div className="p-6 rounded-2xl bg-slate-900 border border-slate-800 hover:border-slate-700 transition-colors">
    <div className="text-3xl font-black text-slate-800 mb-4">{number}</div>
    <h3 className="text-lg font-bold text-white mb-2">{title}</h3>
    <p className="text-slate-400 text-sm leading-relaxed">{description}</p>
  </div>
);

const UseCaseCard: React.FC<{ title: string, useCase: string, description: string }> = ({ title, useCase, description }) => (
  <div className="p-6 rounded-2xl bg-slate-900 border border-slate-800 hover:border-slate-700 transition-colors">
    <h3 className="text-lg font-bold text-white mb-1">{title}</h3>
    <div className="text-xs font-bold text-blue-400 uppercase tracking-wider mb-3">{useCase}</div>
    <p className="text-slate-400 text-sm leading-relaxed">{description}</p>
  </div>
);

const ShortcutRow: React.FC<{ action: string, shortcut: string }> = ({ action, shortcut }) => (
  <tr>
    <td className="px-6 py-4 text-slate-300 font-medium">{action}</td>
    <td className="px-6 py-4">
      <span className="px-2 py-1 bg-slate-800 border border-slate-700 rounded text-[10px] font-mono text-slate-400">
        {shortcut}
      </span>
    </td>
  </tr>
);

const FeatureSection: React.FC<{ icon: React.ReactNode, title: string, description: string, tips: string[] }> = ({ icon, title, description, tips }) => (
  <div className="grid lg:grid-cols-2 gap-12 items-start">
    <div>
      <div className="w-12 h-12 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-center mb-6">
        {icon}
      </div>
      <h3 className="text-2xl font-bold text-white mb-4">{title}</h3>
      <p className="text-slate-400 leading-relaxed mb-6">{description}</p>
    </div>
    <div className="bg-slate-900/50 border border-slate-800 rounded-2xl p-6">
      <h4 className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4 flex items-center gap-2">
        <Terminal size={14} />
        Pro Tips
      </h4>
      <ul className="space-y-3">
        {tips.map((tip, i) => (
          <li key={i} className="flex items-start gap-3 text-sm text-slate-300">
            <ChevronRight size={16} className="text-blue-500 mt-0.5 shrink-0" />
            {tip}
          </li>
        ))}
      </ul>
    </div>
  </div>
);

const FAQItem: React.FC<{ question: string, answer: string }> = ({ question, answer }) => {
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
    <div className="border border-slate-800 rounded-xl overflow-hidden bg-slate-900/30">
      <button 
        onClick={() => setIsOpen(!isOpen)}
        className="w-full p-4 text-left flex items-center justify-between hover:bg-slate-800/50 transition-colors"
      >
        <span className="font-semibold text-slate-200">{question}</span>
        <ChevronDown size={18} className={`text-slate-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
      </button>
      {isOpen && (
        <div className="p-4 pt-0 text-sm text-slate-400 leading-relaxed border-t border-slate-800/50 animate-in fade-in slide-in-from-top-2 duration-200">
          {answer}
        </div>
      )}
    </div>
  );
};

const ChevronDown = ({ size, className }: { size: number, className?: string }) => (
  <svg 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    strokeWidth="2" 
    strokeLinecap="round" 
    strokeLinejoin="round" 
    className={className}
  >
    <path d="m6 9 6 6 6-6"/>
  </svg>
);

export default HelpPage;