import React, { useState, useRef, useEffect, useCallback } from 'react';
import { 
  Upload, FileText, Image, FileSpreadsheet, File, Download,
  Merge, Scissors, RotateCw, Lock, Unlock, FileDown,
  ChevronRight, X, Loader2, Smartphone, Zap, Shield,
  Check, Star, Menu, ArrowRight, Globe, FileImage,
  FileCode, FileArchive, Music, Video, BookOpen,
  Palette, Type, Grid3x3, Layers, Eye, EyeOff,
  AlignLeft, Code, FileJson, FileX, Hash, Binary,
  ChevronDown, MessageCircle, HelpCircle, Users, Lightbulb
} from 'lucide-react';

const ConvertMyPDFNow = () => {
  const [selectedTool, setSelectedTool] = useState(null);
  const [files, setFiles] = useState([]);
  const [processing, setProcessing] = useState(false);
  const [dragActive, setDragActive] = useState(false);
  const [convertedFiles, setConvertedFiles] = useState([]);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState(null);
  const [forumMinimized, setForumMinimized] = useState(false);
  const fileInputRef = useRef(null);
  const dropdownTimeoutRef = useRef(null);

  // SEO-optimized tool configurations with URL slugs
  const tools = [
    // PDF Conversions
    { id: 'pdf-to-word', slug: 'pdf-to-word-converter', name: 'PDF to Word', from: 'PDF', to: 'DOCX', icon: FileText, accept: '.pdf', outputMime: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' },
    { id: 'pdf-to-excel', slug: 'pdf-to-excel-converter', name: 'PDF to Excel', from: 'PDF', to: 'XLSX', icon: FileSpreadsheet, accept: '.pdf', outputMime: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
    { id: 'pdf-to-ppt', slug: 'pdf-to-powerpoint-converter', name: 'PDF to PowerPoint', from: 'PDF', to: 'PPTX', icon: FileImage, accept: '.pdf', outputMime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' },
    { id: 'pdf-to-jpg', slug: 'pdf-to-jpg-converter', name: 'PDF to JPG', from: 'PDF', to: 'JPG', icon: Image, accept: '.pdf', outputMime: 'image/jpeg' },
    { id: 'pdf-to-png', slug: 'pdf-to-png-converter', name: 'PDF to PNG', from: 'PDF', to: 'PNG', icon: Image, accept: '.pdf', outputMime: 'image/png' },
    { id: 'pdf-to-txt', slug: 'pdf-to-text-converter', name: 'PDF to Text', from: 'PDF', to: 'TXT', icon: Type, accept: '.pdf', outputMime: 'text/plain' },
    { id: 'pdf-to-html', slug: 'pdf-to-html-converter', name: 'PDF to HTML', from: 'PDF', to: 'HTML', icon: Code, accept: '.pdf', outputMime: 'text/html' },
    
    // To PDF Conversions
    { id: 'word-to-pdf', slug: 'word-to-pdf-converter', name: 'Word to PDF', from: 'DOCX', to: 'PDF', icon: FileText, accept: '.doc,.docx', outputMime: 'application/pdf' },
    { id: 'excel-to-pdf', slug: 'excel-to-pdf-converter', name: 'Excel to PDF', from: 'XLSX', to: 'PDF', icon: FileSpreadsheet, accept: '.xls,.xlsx', outputMime: 'application/pdf' },
    { id: 'ppt-to-pdf', slug: 'powerpoint-to-pdf-converter', name: 'PowerPoint to PDF', from: 'PPTX', to: 'PDF', icon: FileImage, accept: '.ppt,.pptx', outputMime: 'application/pdf' },
    { id: 'jpg-to-pdf', slug: 'jpg-to-pdf-converter', name: 'JPG to PDF', from: 'JPG', to: 'PDF', icon: Image, accept: '.jpg,.jpeg', outputMime: 'application/pdf' },
    { id: 'png-to-pdf', slug: 'png-to-pdf-converter', name: 'PNG to PDF', from: 'PNG', to: 'PDF', icon: Image, accept: '.png', outputMime: 'application/pdf' },
    { id: 'txt-to-pdf', slug: 'text-to-pdf-converter', name: 'Text to PDF', from: 'TXT', to: 'PDF', icon: Type, accept: '.txt', outputMime: 'application/pdf' },
    { id: 'html-to-pdf', slug: 'html-to-pdf-converter', name: 'HTML to PDF', from: 'HTML', to: 'PDF', icon: Code, accept: '.html,.htm', outputMime: 'application/pdf' },
    
    // Image Conversions
    { id: 'jpg-to-png', slug: 'jpg-to-png-converter', name: 'JPG to PNG', from: 'JPG', to: 'PNG', icon: Image, accept: '.jpg,.jpeg', outputMime: 'image/png' },
    { id: 'png-to-jpg', slug: 'png-to-jpg-converter', name: 'PNG to JPG', from: 'PNG', to: 'JPG', icon: Image, accept: '.png', outputMime: 'image/jpeg' },
    { id: 'webp-to-jpg', slug: 'webp-to-jpg-converter', name: 'WebP to JPG', from: 'WebP', to: 'JPG', icon: Image, accept: '.webp', outputMime: 'image/jpeg' },
    { id: 'webp-to-png', slug: 'webp-to-png-converter', name: 'WebP to PNG', from: 'WebP', to: 'PNG', icon: Image, accept: '.webp', outputMime: 'image/png' },
    { id: 'bmp-to-jpg', slug: 'bmp-to-jpg-converter', name: 'BMP to JPG', from: 'BMP', to: 'JPG', icon: Image, accept: '.bmp', outputMime: 'image/jpeg' },
    { id: 'tiff-to-jpg', slug: 'tiff-to-jpg-converter', name: 'TIFF to JPG', from: 'TIFF', to: 'JPG', icon: Image, accept: '.tif,.tiff', outputMime: 'image/jpeg' },
    
    // Document Conversions
    { id: 'docx-to-txt', slug: 'word-to-text-converter', name: 'Word to Text', from: 'DOCX', to: 'TXT', icon: Type, accept: '.doc,.docx', outputMime: 'text/plain' },
    { id: 'rtf-to-pdf', slug: 'rtf-to-pdf-converter', name: 'RTF to PDF', from: 'RTF', to: 'PDF', icon: FileText, accept: '.rtf', outputMime: 'application/pdf' },
    { id: 'odt-to-pdf', slug: 'odt-to-pdf-converter', name: 'ODT to PDF', from: 'ODT', to: 'PDF', icon: FileText, accept: '.odt', outputMime: 'application/pdf' },
    { id: 'csv-to-excel', slug: 'csv-to-excel-converter', name: 'CSV to Excel', from: 'CSV', to: 'XLSX', icon: FileSpreadsheet, accept: '.csv', outputMime: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
    { id: 'json-to-csv', slug: 'json-to-csv-converter', name: 'JSON to CSV', from: 'JSON', to: 'CSV', icon: FileJson, accept: '.json', outputMime: 'text/csv' },
    
    // PDF Tools
    { id: 'merge-pdf', slug: 'merge-pdf-files', name: 'Merge PDF', type: 'tool', icon: Merge, accept: '.pdf', multiple: true },
    { id: 'split-pdf', slug: 'split-pdf-pages', name: 'Split PDF', type: 'tool', icon: Scissors, accept: '.pdf' },
    { id: 'compress-pdf', slug: 'compress-pdf-file', name: 'Compress PDF', type: 'tool', icon: FileDown, accept: '.pdf' },
    { id: 'rotate-pdf', slug: 'rotate-pdf-pages', name: 'Rotate PDF', type: 'tool', icon: RotateCw, accept: '.pdf' },
    { id: 'protect-pdf', slug: 'password-protect-pdf', name: 'Protect PDF', type: 'tool', icon: Lock, accept: '.pdf' },
    { id: 'unlock-pdf', slug: 'unlock-pdf-password', name: 'Unlock PDF', type: 'tool', icon: Unlock, accept: '.pdf' },
    
    // Additional Formats
    { id: 'epub-to-pdf', slug: 'epub-to-pdf-converter', name: 'EPUB to PDF', from: 'EPUB', to: 'PDF', icon: BookOpen, accept: '.epub', outputMime: 'application/pdf' },
    { id: 'mobi-to-pdf', slug: 'mobi-to-pdf-converter', name: 'MOBI to PDF', from: 'MOBI', to: 'PDF', icon: BookOpen, accept: '.mobi', outputMime: 'application/pdf' },
    { id: 'azw3-to-pdf', slug: 'azw3-to-pdf-converter', name: 'AZW3 to PDF', from: 'AZW3', to: 'PDF', icon: BookOpen, accept: '.azw3', outputMime: 'application/pdf' },
    { id: 'fb2-to-pdf', slug: 'fb2-to-pdf-converter', name: 'FB2 to PDF', from: 'FB2', to: 'PDF', icon: BookOpen, accept: '.fb2', outputMime: 'application/pdf' },
  ];

  // Group tools by category for better organization
  const toolCategories = {
    'Popular Conversions': tools.slice(0, 7),
    'Convert to PDF': tools.filter(t => t.to === 'PDF' && t.from !== 'PDF'),
    'Convert from PDF': tools.filter(t => t.from === 'PDF'),
    'Image Conversions': tools.filter(t => ['JPG', 'PNG', 'WebP', 'BMP', 'TIFF'].includes(t.from) && t.to !== 'PDF'),
    'PDF Tools': tools.filter(t => t.type === 'tool'),
    'Document Conversions': tools.filter(t => ['DOCX', 'RTF', 'ODT', 'CSV', 'JSON'].includes(t.from) && !['PDF'].includes(t.to)),
    'E-Book Conversions': tools.filter(t => ['EPUB', 'MOBI', 'AZW3', 'FB2'].includes(t.from))
  };

  // Navigation categories for dropdown menus
  const navCategories = {
    'PDF Tools': {
      icon: FileText,
      tools: tools.filter(t => t.type === 'tool')
    },
    'From PDF': {
      icon: ArrowRight,
      tools: tools.filter(t => t.from === 'PDF')
    },
    'To PDF': {
      icon: ArrowRight,
      tools: tools.filter(t => t.to === 'PDF' && t.from !== 'PDF')
    },
    'Images': {
      icon: Image,
      tools: tools.filter(t => ['JPG', 'PNG', 'WebP', 'BMP', 'TIFF'].includes(t.from) || ['JPG', 'PNG', 'WebP'].includes(t.to))
    },
    'Documents': {
      icon: FileText,
      tools: tools.filter(t => ['DOCX', 'RTF', 'ODT', 'CSV', 'JSON', 'TXT', 'HTML'].includes(t.from) || ['DOCX', 'TXT', 'HTML', 'CSV'].includes(t.to))
    },
    'E-Books': {
      icon: BookOpen,
      tools: tools.filter(t => ['EPUB', 'MOBI', 'AZW3', 'FB2'].includes(t.from))
    }
  };

  // Handle dropdown hover
  const handleMouseEnter = (category) => {
    if (dropdownTimeoutRef.current) {
      clearTimeout(dropdownTimeoutRef.current);
    }
    setActiveDropdown(category);
  };

  const handleMouseLeave = () => {
    dropdownTimeoutRef.current = setTimeout(() => {
      setActiveDropdown(null);
    }, 300);
  };

  // Simulate file conversion (client-side)
  const simulateConversion = useCallback(async (file, tool) => {
    // Create a mock converted file
    const convertedContent = `This is a converted ${tool.to || 'processed'} file from ${file.name}`;
    const blob = new Blob([convertedContent], { type: tool.outputMime || 'application/octet-stream' });
    
    const extension = tool.to ? `.${tool.to.toLowerCase()}` : '_processed.pdf';
    const convertedFileName = file.name.replace(/\.[^/.]+$/, extension);
    
    return {
      blob,
      name: convertedFileName,
      size: blob.size,
      type: tool.outputMime || 'application/octet-stream'
    };
  }, []);

  // Process files
  const processFiles = useCallback(async () => {
    if (!selectedTool || files.length === 0) return;
    
    setProcessing(true);
    setConvertedFiles([]);
    
    try {
      const results = [];
      
      for (const file of files) {
        // Simulate processing delay
        await new Promise(resolve => setTimeout(resolve, 800));
        
        const converted = await simulateConversion(file, selectedTool);
        results.push(converted);
        
        // Auto-download each file
        const url = URL.createObjectURL(converted.blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = converted.name;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
      }
      
      setConvertedFiles(results);
      
      // Show success message
      setTimeout(() => {
        alert(`Successfully converted ${results.length} file(s)!`);
        setFiles([]);
        setConvertedFiles([]);
      }, 500);
      
    } catch (error) {
      console.error('Conversion error:', error);
      alert('An error occurred during conversion. Please try again.');
    } finally {
      setProcessing(false);
    }
  }, [selectedTool, files, simulateConversion]);

  // Handle file drag and drop
  const handleDrag = useCallback((e) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true);
    } else if (e.type === "dragleave") {
      setDragActive(false);
    }
  }, []);

  const handleDrop = useCallback((e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);
    
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      handleFiles(e.dataTransfer.files);
    }
  }, []);

  const handleFiles = useCallback((fileList) => {
    if (!selectedTool) return;
    
    const acceptedTypes = selectedTool.accept?.split(',') || [];
    const newFiles = Array.from(fileList).filter(file => {
      const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
      return acceptedTypes.some(type => fileExtension === type.trim());
    });
    
    if (newFiles.length === 0) {
      alert(`Please select files of type: ${acceptedTypes.join(', ')}`);
      return;
    }
    
    if (selectedTool.multiple) {
      setFiles(prev => [...prev, ...newFiles]);
    } else {
      setFiles(newFiles.slice(0, 1));
    }
  }, [selectedTool]);

  // Scroll handler for header
  useEffect(() => {
    const handleScroll = () => {
      const header = document.getElementById('main-header');
      if (header) {
        if (window.scrollY > 20) {
          header.classList.add('shadow-md', 'bg-white');
        } else {
          header.classList.remove('shadow-md', 'bg-white');
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Auto-refresh forum messages simulation
  useEffect(() => {
    if (!forumMinimized) {
      const interval = setInterval(() => {
        // Simulate new messages by updating timestamps
        const forumElement = document.querySelector('.forum-timestamps');
        if (forumElement) {
          // This would be replaced with real-time updates in production
        }
      }, 60000); // Update every minute
      
      return () => clearInterval(interval);
    }
  }, [forumMinimized]);

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
      <style>{`
        @media (hover: hover) {
          .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.2s ease;
          }
          
          .dropdown-container:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
          }
        }
        
        .forum-shadow {
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }
        
        .forum-float {
          animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-10px); }
        }
        
        @keyframes slideIn {
          from {
            opacity: 0;
            transform: translateX(100px);
          }
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }
        
        .animate-slideIn {
          animation: slideIn 0.3s ease-out;
        }
      `}</style>
      {/* SEO-optimized Header */}
      <header id="main-header" className="sticky top-0 z-50 bg-white/90 backdrop-blur transition-all duration-300">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex items-center justify-between h-14">
            <div className="flex items-center space-x-2">
              <FileText className="w-8 h-8 text-blue-600" />
              <div>
                <h1 className="text-lg font-bold text-gray-900">ConvertMyPDFNow</h1>
                <p className="text-xs text-gray-600 hidden sm:block">Free Online File Converter</p>
              </div>
            </div>

            <nav className="hidden md:flex items-center space-x-1">
              {Object.entries(navCategories).map(([category, data]) => (
                <div
                  key={category}
                  className="relative dropdown-container"
                  onMouseEnter={() => handleMouseEnter(category)}
                  onMouseLeave={handleMouseLeave}
                >
                  <button
                    className="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 rounded-lg hover:bg-gray-50 transition-colors"
                    onClick={() => setActiveDropdown(activeDropdown === category ? null : category)}
                  >
                    {category}
                    <ChevronDown className="w-4 h-4 ml-1" />
                  </button>
                  
                  {/* Dropdown Menu */}
                  <div className={`absolute top-full left-0 mt-1 w-64 bg-white rounded-lg shadow-xl border border-gray-200 py-2 z-50 dropdown-menu ${activeDropdown === category ? 'opacity-100 visible' : ''}`}>
                    <div className="max-h-96 overflow-y-auto">
                      {data.tools.map((tool) => (
                        <button
                          key={tool.id}
                          onClick={() => {
                            setSelectedTool(tool);
                            setActiveDropdown(null);
                          }}
                          className="w-full flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"
                        >
                          <tool.icon className="w-4 h-4 mr-3 text-gray-400" />
                          <span>{tool.name}</span>
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              ))}
              
              <div className="h-6 w-px bg-gray-300 mx-2" />
              
              <a href="#features" className="px-3 py-2 text-gray-700 hover:text-blue-600 text-sm font-medium">Features</a>
              <a href="#api" className="px-3 py-2 text-gray-700 hover:text-blue-600 text-sm font-medium">API</a>
              
              <button className="ml-3 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
                Sign Up Free
              </button>
            </nav>

            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="md:hidden p-2 rounded-lg hover:bg-gray-100"
              aria-label="Toggle menu"
            >
              <Menu className="w-6 h-6 text-gray-700" />
            </button>
          </div>
        </div>

        {/* Mobile menu */}
        {mobileMenuOpen && (
          <div className="md:hidden border-t bg-white max-h-[80vh] overflow-y-auto">
            <nav className="px-4 py-2">
              {Object.entries(navCategories).map(([category, data]) => (
                <div key={category} className="border-b border-gray-100 last:border-0">
                  <button
                    onClick={() => setActiveDropdown(activeDropdown === category ? null : category)}
                    className="w-full flex items-center justify-between py-3 text-gray-700 font-medium"
                  >
                    {category}
                    <ChevronDown className={`w-4 h-4 transition-transform ${activeDropdown === category ? 'rotate-180' : ''}`} />
                  </button>
                  
                  {activeDropdown === category && (
                    <div className="pb-2">
                      {data.tools.map((tool) => (
                        <button
                          key={tool.id}
                          onClick={() => {
                            setSelectedTool(tool);
                            setMobileMenuOpen(false);
                            setActiveDropdown(null);
                          }}
                          className="w-full flex items-center px-4 py-2 text-sm text-gray-600 hover:bg-gray-50"
                        >
                          <tool.icon className="w-4 h-4 mr-3 text-gray-400" />
                          {tool.name}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              ))}
              
              <div className="border-t border-gray-200 mt-2 pt-2">
                <a href="#features" className="block py-2 text-gray-700">Features</a>
                <a href="#api" className="block py-2 text-gray-700">API</a>
                <button className="w-full mt-2 py-2 bg-blue-600 text-white rounded-lg font-medium">
                  Sign Up Free
                </button>
              </div>
            </nav>
          </div>
        )}
      </header>

      {/* Hero Section with SEO content */}
      {!selectedTool && (
        <section className="px-4 py-8 md:py-16">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-4">
              Free Online PDF & File Converter
            </h2>
            <p className="text-lg text-gray-600 mb-8">
              Convert PDF to Word, Excel, JPG, and more. Merge, compress, and edit PDFs online. 
              No software download required. 100% free and secure.
            </p>
            
            {/* Quick stats for trust */}
            <div className="flex flex-wrap justify-center gap-8 mb-12">
              <div className="flex items-center gap-2">
                <Check className="w-5 h-5 text-green-500" />
                <span className="text-sm text-gray-700">No Registration</span>
              </div>
              <div className="flex items-center gap-2">
                <Shield className="w-5 h-5 text-green-500" />
                <span className="text-sm text-gray-700">256-bit SSL Security</span>
              </div>
              <div className="flex items-center gap-2">
                <Zap className="w-5 h-5 text-green-500" />
                <span className="text-sm text-gray-700">Instant Conversion</span>
              </div>
              <div className="flex items-center gap-2">
                <Globe className="w-5 h-5 text-green-500" />
                <span className="text-sm text-gray-700">Works on All Devices</span>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Tools Grid */}
      {!selectedTool && (
        <section id="tools" className="px-4 pb-16">
          <div className="max-w-7xl mx-auto">
            {Object.entries(toolCategories).map(([category, categoryTools]) => (
              categoryTools.length > 0 && (
                <div key={category} className="mb-10">
                  <h3 className="text-xl font-semibold text-gray-800 mb-4">{category}</h3>
                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
                    {categoryTools.map((tool) => {
                      const Icon = tool.icon;
                      return (
                        <button
                          key={tool.id}
                          onClick={() => setSelectedTool(tool)}
                          className="flex flex-col items-center p-4 bg-white rounded-lg border border-gray-200 hover:border-blue-400 hover:shadow-md transition-all group"
                          aria-label={`Open ${tool.name} tool`}
                        >
                          <Icon className="w-8 h-8 text-blue-600 mb-2 group-hover:scale-110 transition-transform" />
                          <span className="text-sm font-medium text-gray-800 text-center">{tool.name}</span>
                        </button>
                      );
                    })}
                  </div>
                </div>
              )
            ))}
          </div>
        </section>
      )}

      {/* Tool Interface */}
      {selectedTool && (
        <section className="px-4 py-8">
          <div className="max-w-2xl mx-auto">
            {/* Back button */}
            <button
              onClick={() => {
                setSelectedTool(null);
                setFiles([]);
                setConvertedFiles([]);
              }}
              className="flex items-center text-blue-600 hover:text-blue-700 mb-6"
            >
              <ChevronRight className="w-5 h-5 mr-1 rotate-180" />
              Back to all tools
            </button>

            {/* Tool card */}
            <div className="bg-white rounded-lg shadow-lg p-6 md:p-8">
              <div className="flex items-center mb-6">
                <selectedTool.icon className="w-10 h-10 text-blue-600 mr-3" />
                <div>
                  <h1 className="text-2xl font-bold text-gray-900">{selectedTool.name}</h1>
                  <p className="text-gray-600">
                    {selectedTool.from && selectedTool.to 
                      ? `Convert ${selectedTool.from} files to ${selectedTool.to} format`
                      : `Process your PDF files`}
                  </p>
                </div>
              </div>

              {/* File upload area */}
              <div
                className={`relative border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
                  dragActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
                }`}
                onDragEnter={handleDrag}
                onDragLeave={handleDrag}
                onDragOver={handleDrag}
                onDrop={handleDrop}
              >
                <input
                  ref={fileInputRef}
                  type="file"
                  multiple={selectedTool.multiple}
                  accept={selectedTool.accept}
                  onChange={(e) => handleFiles(e.target.files)}
                  className="hidden"
                />
                
                <Upload className="w-12 h-12 mx-auto mb-3 text-gray-400" />
                <p className="text-lg font-medium text-gray-700 mb-2">
                  Drop your {selectedTool.accept} files here
                </p>
                <p className="text-gray-500 mb-4">or</p>
                <button
                  onClick={() => fileInputRef.current?.click()}
                  className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
                >
                  Select Files
                </button>
                <p className="text-xs text-gray-500 mt-3">
                  Max file size: 100MB • Secure upload
                </p>
              </div>

              {/* File list */}
              {files.length > 0 && (
                <div className="mt-4 space-y-2">
                  {files.map((file, idx) => (
                    <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div className="flex items-center min-w-0">
                        <FileText className="w-5 h-5 text-blue-600 mr-2 flex-shrink-0" />
                        <div className="min-w-0">
                          <p className="text-sm font-medium text-gray-800 truncate">{file.name}</p>
                          <p className="text-xs text-gray-500">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
                        </div>
                      </div>
                      <button
                        onClick={() => setFiles(files.filter((_, i) => i !== idx))}
                        className="ml-2 p-1 text-gray-400 hover:text-red-500 transition-colors"
                        aria-label="Remove file"
                      >
                        <X className="w-5 h-5" />
                      </button>
                    </div>
                  ))}
                </div>
              )}

              {/* Convert button */}
              {files.length > 0 && (
                <button
                  onClick={processFiles}
                  disabled={processing}
                  className="w-full mt-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors flex items-center justify-center"
                >
                  {processing ? (
                    <>
                      <Loader2 className="w-5 h-5 mr-2 animate-spin" />
                      Converting...
                    </>
                  ) : (
                    <>
                      <ArrowRight className="w-5 h-5 mr-2" />
                      Convert {files.length} {files.length === 1 ? 'File' : 'Files'}
                    </>
                  )}
                </button>
              )}

              {/* Converted files (if any still showing) */}
              {convertedFiles.length > 0 && (
                <div className="mt-6 p-4 bg-green-50 rounded-lg">
                  <div className="flex items-center mb-2">
                    <Check className="w-5 h-5 text-green-600 mr-2" />
                    <p className="font-medium text-green-800">Conversion Complete!</p>
                  </div>
                  <p className="text-sm text-green-700">
                    Your files have been converted and downloaded automatically.
                  </p>
                </div>
              )}
            </div>

            {/* SEO content for tool */}
            <div className="mt-8 prose prose-sm max-w-none">
              <h2 className="text-xl font-semibold text-gray-900 mb-3">
                About {selectedTool.name}
              </h2>
              <p className="text-gray-600 mb-4">
                {selectedTool.from && selectedTool.to ? (
                  <>
                    Our free online {selectedTool.name} tool allows you to convert {selectedTool.from} files to {selectedTool.to} format instantly. 
                    No software installation required - works directly in your browser. All file conversions are processed securely 
                    and files are automatically deleted after processing.
                  </>
                ) : (
                  <>
                    Use our {selectedTool.name} tool to process your PDF files quickly and securely. 
                    This tool works entirely in your browser with no file uploads to external servers, 
                    ensuring your documents remain private and secure.
                  </>
                )}
              </p>
              
              <h3 className="text-lg font-semibold text-gray-900 mb-2 mt-4">How to use:</h3>
              <ol className="list-decimal list-inside text-gray-600 space-y-1">
                <li>Click "Select Files" or drag and drop your {selectedTool.accept} files</li>
                <li>Files will be automatically processed</li>
                <li>Converted files download automatically</li>
                <li>All files are deleted after processing</li>
              </ol>
            </div>
          </div>
        </section>
      )}

      {/* Features section */}
      {!selectedTool && (
        <section id="features" className="px-4 py-16 bg-gray-50">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-2xl font-bold text-center text-gray-900 mb-12">
              Why Choose ConvertMyPDFNow?
            </h2>
            
            <div className="grid md:grid-cols-3 gap-8">
              <div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Shield className="w-8 h-8 text-blue-600" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2">100% Secure</h3>
                <p className="text-gray-600">
                  All file transfers are encrypted with SSL. Files are automatically deleted after processing.
                </p>
              </div>
              
              <div className="text-center">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Smartphone className="w-8 h-8 text-green-600" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Works Everywhere</h3>
                <p className="text-gray-600">
                  Compatible with all devices - desktop, tablet, and mobile. No app download needed.
                </p>
              </div>
              
              <div className="text-center">
                <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Zap className="w-8 h-8 text-purple-600" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Lightning Fast</h3>
                <p className="text-gray-600">
                  Powered by advanced algorithms for instant file conversion. No waiting, no queues.
                </p>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Footer with SEO links */}
      <footer className="bg-gray-900 text-white px-4 py-8 mt-16">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div>
              <h4 className="font-semibold mb-3">PDF Tools</h4>
              <ul className="space-y-2 text-sm text-gray-400">
                <li><a href="#merge-pdf" className="hover:text-white">Merge PDF</a></li>
                <li><a href="#split-pdf" className="hover:text-white">Split PDF</a></li>
                <li><a href="#compress-pdf" className="hover:text-white">Compress PDF</a></li>
                <li><a href="#rotate-pdf" className="hover:text-white">Rotate PDF</a></li>
              </ul>
            </div>
            
            <div>
              <h4 className="font-semibold mb-3">Convert from PDF</h4>
              <ul className="space-y-2 text-sm text-gray-400">
                <li><a href="#pdf-to-word" className="hover:text-white">PDF to Word</a></li>
                <li><a href="#pdf-to-excel" className="hover:text-white">PDF to Excel</a></li>
                <li><a href="#pdf-to-jpg" className="hover:text-white">PDF to JPG</a></li>
                <li><a href="#pdf-to-ppt" className="hover:text-white">PDF to PowerPoint</a></li>
              </ul>
            </div>
            
            <div>
              <h4 className="font-semibold mb-3">Convert to PDF</h4>
              <ul className="space-y-2 text-sm text-gray-400">
                <li><a href="#word-to-pdf" className="hover:text-white">Word to PDF</a></li>
                <li><a href="#excel-to-pdf" className="hover:text-white">Excel to PDF</a></li>
                <li><a href="#jpg-to-pdf" className="hover:text-white">JPG to PDF</a></li>
                <li><a href="#ppt-to-pdf" className="hover:text-white">PowerPoint to PDF</a></li>
              </ul>
            </div>
            
            <div>
              <h4 className="font-semibold mb-3">Company</h4>
              <ul className="space-y-2 text-sm text-gray-400">
                <li><a href="#about" className="hover:text-white">About Us</a></li>
                <li><a href="#privacy" className="hover:text-white">Privacy Policy</a></li>
                <li><a href="#terms" className="hover:text-white">Terms of Service</a></li>
                <li><a href="#contact" className="hover:text-white">Contact</a></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-800 pt-6 text-center text-sm text-gray-400">
            <p>© 2024 ConvertMyPDFNow. All rights reserved. Free online PDF converter and tools.</p>
          </div>
        </div>
      </footer>

      {/* Floating Forum Widget - Like a cloud but not disturbing */}
      <div className={`fixed bottom-20 sm:bottom-6 right-4 sm:right-6 z-40 transition-all duration-300 forum-float ${forumMinimized ? 'w-12 h-12 sm:w-14 sm:h-14' : 'w-72 sm:w-80'}`}>
        {!forumMinimized ? (
          <div className="bg-white/95 backdrop-blur-sm rounded-2xl forum-shadow border border-gray-200 overflow-hidden animate-slideIn">
            {/* Forum Header */}
            <div className="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-3 sm:p-4 flex items-center justify-between">
              <div className="flex items-center">
                <MessageCircle className="w-5 h-5 mr-2" />
                <span className="font-medium">Community Forum</span>
              </div>
              <button
                onClick={() => setForumMinimized(true)}
                className="text-white/80 hover:text-white transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            
            {/* Forum Content */}
            <div className="p-3 sm:p-4 max-h-80 sm:max-h-96 overflow-y-auto">
              <div className="space-y-3">
                <div className="flex items-start space-x-2">
                  <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <Users className="w-4 h-4 text-blue-600" />
                  </div>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-gray-900">Sarah M.</p>
                    <p className="text-xs text-gray-600">Just converted 50 PDFs in batch mode! Amazing speed 🚀</p>
                    <p className="text-xs text-gray-400 mt-1">2 min ago</p>
                  </div>
                </div>
                
                <div className="flex items-start space-x-2">
                  <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <Users className="w-4 h-4 text-green-600" />
                  </div>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-gray-900">Tech Support</p>
                    <p className="text-xs text-gray-600">New feature: E-book conversions now live! 📚</p>
                    <p className="text-xs text-gray-400 mt-1">15 min ago</p>
                  </div>
                </div>
                
                <div className="flex items-start space-x-2">
                  <div className="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <Lightbulb className="w-4 h-4 text-yellow-600" />
                  </div>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-gray-900">Pro Tip</p>
                    <p className="text-xs text-gray-600">Hold Shift to select multiple files at once! 🎯</p>
                    <p className="text-xs text-gray-400 mt-1">Pinned</p>
                  </div>
                </div>
              </div>
              
              {/* Quick Actions */}
              <div className="mt-4 pt-4 border-t border-gray-100">
                <div className="flex items-center justify-between text-xs text-gray-500 mb-2">
                  <span className="flex items-center">
                    <span className="w-2 h-2 bg-green-500 rounded-full mr-1 animate-pulse"></span>
                    247 users online
                  </span>
                  <span>1,892 discussions</span>
                </div>
                <button className="w-full text-sm text-blue-600 hover:text-blue-700 font-medium flex items-center justify-center py-2 hover:bg-blue-50 rounded-lg transition-colors">
                  <HelpCircle className="w-4 h-4 mr-2" />
                  Ask a Question
                </button>
                <a href="#forum" className="block w-full text-center text-xs text-gray-500 hover:text-gray-700 mt-2">
                  View All Discussions →
                </a>
              </div>
            </div>
          </div>
        ) : (
          <div className="relative">
            <button
              onClick={() => setForumMinimized(false)}
              className="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full forum-shadow flex items-center justify-center text-white hover:shadow-xl transition-all transform hover:scale-110"
              aria-label="Open forum"
            >
              <MessageCircle className="w-5 h-5 sm:w-6 sm:h-6" />
            </button>
            <span className="absolute -top-1 -right-1 flex items-center justify-center">
              <span className="absolute w-5 h-5 bg-red-500 rounded-full animate-ping"></span>
              <span className="relative w-5 h-5 bg-red-500 rounded-full flex items-center justify-center">
                <span className="text-white text-xs font-bold">3</span>
              </span>
            </span>
          </div>
        )}
      </div>
    </div>
  );
};

export default ConvertMyPDFNow;