/* Start custom CSS for section, class: .elementor-element-40a1382 */import React, { useState } from 'react';
import { ChevronDown, ChevronRight, Home, Book, FileText, Users, HelpCircle, Search, BookOpen, Download, ExternalLink } from 'lucide-react';

export default function LibraryGuide() {
  const [openMenus, setOpenMenus] = useState({ 'getting-started': true });
  const [activePage, setActivePage] = useState('intro');

  const toggleMenu = (id) => {
    setOpenMenus(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  const menuItems = [
    {
      id: 'home',
      title: 'Home',
      icon: <Home size={18} />,
      page: 'home'
    },
    {
      id: 'getting-started',
      title: 'Getting Started',
      icon: <Book size={18} />,
      subItems: [
        { title: 'Introduction to Research', page: 'intro' },
        { title: 'Library Services', page: 'services' },
        { title: 'Account Setup', page: 'account' }
      ]
    },
    {
      id: 'resources',
      title: 'Finding Resources',
      icon: <FileText size={18} />,
      subItems: [
        { title: 'Databases', page: 'databases' },
        { title: 'E-Books', page: 'ebooks' },
        { title: 'Journals & Articles', page: 'journals' },
        { title: 'Subject Guides', page: 'guides' }
      ]
    },
    {
      id: 'citation',
      title: 'Citation & Writing',
      icon: <FileText size={18} />,
      subItems: [
        { title: 'APA Style', page: 'apa' },
        { title: 'MLA Style', page: 'mla' },
        { title: 'Chicago Style', page: 'chicago' },
        { title: 'Citation Managers', page: 'managers' }
      ]
    },
    {
      id: 'help',
      title: 'Get Help',
      icon: <HelpCircle size={18} />,
      subItems: [
        { title: 'Ask a Librarian', page: 'ask' },
        { title: 'FAQ', page: 'faq' },
        { title: 'Contact Us', page: 'contact' }
      ]
    }
  ];

  const contentPages = {
    home: {
      title: 'Research Guide Home',
      content: (
        <div>
          <p className="text-lg mb-6">Welcome to the Library Research Guide. This guide will help you navigate through our resources and services.</p>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg">
              <h3 className="font-bold text-blue-900 mb-2 flex items-center gap-2">
                <Search size={20} />
                Search Resources
              </h3>
              <p className="text-sm text-gray-700 mb-3">Find books, articles, and digital resources for your research.</p>
              <button className="text-blue-600 hover:text-blue-800 font-medium text-sm">
                Start Searching →
              </button>
            </div>
            
            <div className="bg-green-50 border border-green-200 p-4 rounded-lg">
              <h3 className="font-bold text-green-900 mb-2 flex items-center gap-2">
                <BookOpen size={20} />
                Research Help
              </h3>
              <p className="text-sm text-gray-700 mb-3">Get assistance with your research projects and assignments.</p>
              <button className="text-green-600 hover:text-green-800 font-medium text-sm">
                Get Help →
              </button>
            </div>
          </div>

          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <h3 className="font-bold text-gray-900 mb-4">Quick Links</h3>
            <ul className="space-y-2">
              <li><a href="#" className="text-blue-600 hover:underline flex items-center gap-2"><ExternalLink size={16} />Library Catalog</a></li>
              <li><a href="#" className="text-blue-600 hover:underline flex items-center gap-2"><ExternalLink size={16} />Database A-Z List</a></li>
              <li><a href="#" className="text-blue-600 hover:underline flex items-center gap-2"><ExternalLink size={16} />Journal Finder</a></li>
              <li><a href="#" className="text-blue-600 hover:underline flex items-center gap-2"><ExternalLink size={16} />Research Guides</a></li>
            </ul>
          </div>
        </div>
      )
    },
    intro: {
      title: 'Introduction to Research',
      content: (
        <div>
          <p className="mb-4">Research is a systematic investigation to establish facts and reach new conclusions. This guide will help you understand the research process.</p>
          
          <div className="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
            <h4 className="font-bold text-blue-900 mb-2">What is Academic Research?</h4>
            <p className="text-gray-700">Academic research involves collecting, analyzing, and interpreting information to increase our understanding of a topic or issue.</p>
          </div>

          <h3 className="text-xl font-bold mb-3">The Research Process</h3>
          <ol className="list-decimal list-inside space-y-3 mb-6">
            <li className="text-gray-800"><strong>Choose a Topic:</strong> Select a research topic that interests you and meets assignment requirements.</li>
            <li className="text-gray-800"><strong>Background Research:</strong> Learn basic information about your topic using encyclopedias and textbooks.</li>
            <li className="text-gray-800"><strong>Develop Research Questions:</strong> Create specific questions you want to answer through your research.</li>
            <li className="text-gray-800"><strong>Find Sources:</strong> Use library databases, catalogs, and search engines to locate relevant sources.</li>
            <li className="text-gray-800"><strong>Evaluate Sources:</strong> Assess the credibility, accuracy, and relevance of your sources.</li>
            <li className="text-gray-800"><strong>Take Notes:</strong> Organize information and keep track of your sources.</li>
            <li className="text-gray-800"><strong>Write and Cite:</strong> Create your paper and properly cite all sources used.</li>
          </ol>

          <div className="bg-gray-100 p-4 rounded-lg">
            <h4 className="font-bold mb-2">Need More Help?</h4>
            <p className="text-sm text-gray-700">Contact a librarian for personalized research assistance.</p>
            <button className="mt-3 bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 transition-colors text-sm">
              Schedule Consultation
            </button>
          </div>
        </div>
      )
    },
    services: {
      title: 'Library Services',
      content: (
        <div>
          <p className="mb-6">Our library offers a wide range of services to support your academic success.</p>
          
          <div className="space-y-4">
            <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
              <h3 className="font-bold text-lg mb-2">Reference Services</h3>
              <p className="text-gray-700 mb-2">Get help with research questions, finding resources, and using library services.</p>
              <p className="text-sm text-gray-600"><strong>Available:</strong> Monday-Friday, 9am-5pm</p>
            </div>

            <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
              <h3 className="font-bold text-lg mb-2">Interlibrary Loan</h3>
              <p className="text-gray-700 mb-2">Request materials from other libraries if we don't have them in our collection.</p>
              <p className="text-sm text-gray-600"><strong>Turnaround:</strong> 5-10 business days</p>
            </div>

            <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
              <h3 className="font-bold text-lg mb-2">Research Consultations</h3>
              <p className="text-gray-700 mb-2">Schedule one-on-one meetings with subject librarians for in-depth research help.</p>
              <p className="text-sm text-gray-600"><strong>Duration:</strong> 30-60 minutes</p>
            </div>

            <div className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
              <h3 className="font-bold text-lg mb-2">Study Rooms</h3>
              <p className="text-gray-700 mb-2">Reserve private or group study spaces for collaborative work.</p>
              <p className="text-sm text-gray-600"><strong>Booking:</strong> Online reservation system</p>
            </div>
          </div>
        </div>
      )
    },
    databases: {
      title: 'Library Databases',
      content: (
        <div>
          <p className="mb-6">Access thousands of journals, articles, and research papers through our database collection.</p>
          
          <div className="bg-yellow-50 border border-yellow-200 p-4 rounded-lg mb-6">
            <p className="text-sm"><strong>Note:</strong> You'll need to log in with your library account to access databases off-campus.</p>
          </div>

          <h3 className="text-xl font-bold mb-4">Featured Databases</h3>
          
          <div className="space-y-4">
            <div className="bg-white border border-gray-300 rounded-lg p-4">
              <h4 className="font-bold text-blue-700 mb-2">Academic Search Complete</h4>
              <p className="text-sm text-gray-700 mb-3">Multidisciplinary database with full-text articles from over 8,500 journals covering all academic subjects.</p>
              <button className="bg-blue-600 text-white px-4 py-2 rounded text-sm hover:bg-blue-700 transition-colors">
                Access Database
              </button>
            </div>

            <div className="bg-white border border-gray-300 rounded-lg p-4">
              <h4 className="font-bold text-blue-700 mb-2">JSTOR</h4>
              <p className="text-sm text-gray-700 mb-3">Digital library of academic journals, books, and primary sources in the humanities and social sciences.</p>
              <button className="bg-blue-600 text-white px-4 py-2 rounded text-sm hover:bg-blue-700 transition-colors">
                Access Database
              </button>
            </div>

            <div className="bg-white border border-gray-300 rounded-lg p-4">
              <h4 className="font-bold text-blue-700 mb-2">PubMed</h4>
              <p className="text-sm text-gray-700 mb-3">Free resource providing access to medical and life sciences literature citations and abstracts.</p>
              <button className="bg-blue-600 text-white px-4 py-2 rounded text-sm hover:bg-blue-700 transition-colors">
                Access Database
              </button>
            </div>

            <div className="bg-white border border-gray-300 rounded-lg p-4">
              <h4 className="font-bold text-blue-700 mb-2">ProQuest</h4>
              <p className="text-sm text-gray-700 mb-3">Comprehensive collection of dissertations, theses, and scholarly journals across multiple disciplines.</p>
              <button className="bg-blue-600 text-white px-4 py-2 rounded text-sm hover:bg-blue-700 transition-colors">
                Access Database
              </button>
            </div>
          </div>

          <div className="mt-6 text-center">
            <a href="#" className="text-blue-600 hover:underline font-medium">View All Databases A-Z →</a>
          </div>
        </div>
      )
    },
    apa: {
      title: 'APA Citation Style',
      content: (
        <div>
          <p className="mb-4">APA (American Psychological Association) style is commonly used in social sciences, education, and psychology.</p>
          
          <div className="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
            <p className="text-sm"><strong>Current Edition:</strong> APA 7th Edition (2020)</p>
          </div>

          <h3 className="text-xl font-bold mb-3">Basic Format</h3>
          <div className="bg-gray-50 p-4 rounded-lg mb-6 font-mono text-sm">
            Author, A. A. (Year). Title of work. Publisher.
          </div>

          <h3 className="text-xl font-bold mb-3">Common Citation Examples</h3>
          
          <div className="space-y-4 mb-6">
            <div>
              <h4 className="font-semibold mb-2">Book:</h4>
              <div className="bg-gray-50 p-3 rounded text-sm font-mono">
                Smith, J. (2020). Research methods in psychology. Academic Press.
              </div>
            </div>

            <div>
              <h4 className="font-semibold mb-2">Journal Article:</h4>
              <div className="bg-gray-50 p-3 rounded text-sm font-mono">
                Johnson, M., & Lee, K. (2021). Effects of sleep on memory. Journal of Psychology, 45(3), 234-250. https://doi.org/10.1234/jp.2021.1234
              </div>
            </div>

            <div>
              <h4 className="font-semibold mb-2">Website:</h4>
              <div className="bg-gray-50 p-3 rounded text-sm font-mono">
                Brown, A. (2022, March 15). Understanding APA style. Education Today. https://www.example.com/apa-guide
              </div>
            </div>
          </div>

          <div className="bg-green-50 border border-green-200 p-4 rounded-lg">
            <h4 className="font-bold mb-2 flex items-center gap-2">
              <Download size={18} />
              Helpful Resources
            </h4>
            <ul className="space-y-2 text-sm">
              <li><a href="#" className="text-blue-600 hover:underline">Download APA Style Guide (PDF)</a></li>
              <li><a href="#" className="text-blue-600 hover:underline">APA Citation Generator</a></li>
              <li><a href="#" className="text-blue-600 hover:underline">Common APA Mistakes to Avoid</a></li>
            </ul>
          </div>
        </div>
      )
    }
  };

  const currentContent = contentPages[activePage] || contentPages.home;

  return (
    <div className="min-h-screen bg-gray-100">
      {/* Header */}
      <header className="bg-blue-800 text-white py-4 px-6 shadow-lg">
        <div className="max-w-7xl mx-auto">
          <h1 className="text-2xl font-bold">University Library</h1>
          <p className="text-blue-200 text-sm mt-1">Research Guides & Resources</p>
        </div>
      </header>

      <div className="max-w-7xl mx-auto flex flex-row gap-6 p-6">
        {/* Sidebar */}
        <aside className="w-80 flex-shrink-0">
          <div className="bg-blue-700 text-white p-4 rounded-t-lg">
            <h2 className="text-lg font-bold">Research Guide</h2>
            <p className="text-sm text-blue-100 mt-1">Navigate Resources</p>
          </div>

          <div className="bg-white border border-gray-200 rounded-b-lg shadow-sm">
            <nav>
              {menuItems.map((item) => (
                <div key={item.id} className="border-b border-gray-200 last:border-b-0">
                  <div
                    onClick={() => {
                      if (item.subItems) {
                        toggleMenu(item.id);
                      } else {
                        setActivePage(item.page);
                      }
                    }}
                    className={`flex items-center justify-between p-4 cursor-pointer hover:bg-blue-50 transition-colors ${
                      openMenus[item.id] ? 'bg-blue-50' : ''
                    }`}
                  >
                    <div className="flex items-center gap-3">
                      <span className="text-blue-600">{item.icon}</span>
                      <span className="font-medium text-gray-800">{item.title}</span>
                    </div>
                    {item.subItems && (
                      <span className="text-gray-400">
                        {openMenus[item.id] ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
                      </span>
                    )}
                  </div>

                  {item.subItems && openMenus[item.id] && (
                    <div className="bg-gray-50">
                      {item.subItems.map((subItem, index) => (
                        <button
                          key={index}
                          onClick={() => setActivePage(subItem.page)}
                          className={`w-full text-left py-3 px-4 pl-14 hover:bg-blue-50 hover:text-blue-600 transition-colors border-t border-gray-200 ${
                            activePage === subItem.page ? 'bg-blue-100 text-blue-700 font-medium' : 'text-gray-700'
                          }`}
                        >
                          {subItem.title}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </nav>
          </div>


        </aside>

        {/* Main Content */}
        <main className="flex-1">
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
            <h1 className="text-3xl font-bold text-gray-900 mb-6">{currentContent.title}</h1>
            <div className="prose max-w-none">
              {currentContent.content}
            </div>
          </div>


        </main>
      </div>
    </div>
  );
}/* End custom CSS */