sfcc-dev-mcp 1.0.15 → 1.0.19

package/docs-site/components/Layout.tsx

@@ -1,174 +0,0 @@
-
-import React, { useState, useEffect } from 'react';
-import { useLocation, Outlet } from 'react-router-dom';
-import Sidebar from './Sidebar';
-import OnThisPage from './OnThisPage';
-import { TocItem } from '../types';
-
-const Layout: React.FC = () => {
-  const [toc, setToc] = useState<TocItem[]>([]);
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const location = useLocation();
-
-  // Close sidebar on route change (mobile)
-  useEffect(() => {
-    setSidebarOpen(false);
-  }, [location.pathname]);
-
-  // Scroll restoration - scroll to top on route change or to specific element if hash is present
-  useEffect(() => {
-    // Only run on client side
-    if (typeof window === 'undefined') return;
-    
-    const scrollToTarget = () => {
-      let targetId = '';
-      
-      // Check for hash fragment in location.hash
-      if (location.hash) {
-        targetId = location.hash.substring(1); // Remove the # symbol
-      } 
-      // Check for URL-encoded hash (%23) in the pathname
-      else if (location.pathname.includes('%23')) {
-        const parts = location.pathname.split('%23');
-        if (parts.length > 1) {
-          targetId = decodeURIComponent(parts[1]);
-        }
-      }
-      
-      if (targetId) {
-        // If there's a target ID, try to scroll to that element
-        const targetElement = document.getElementById(targetId);
-        
-        if (targetElement) {
-          // Use multiple attempts with increasing delays to ensure DOM is ready
-          const attemptScroll = (attempt = 0) => {
-            const element = document.getElementById(targetId);
-            if (element) {
-              element.scrollIntoView({ 
-                behavior: 'smooth', 
-                block: 'start',
-                inline: 'nearest'
-              });
-            } else if (attempt < 5) {
-              // Retry up to 5 times with increasing delay
-              setTimeout(() => attemptScroll(attempt + 1), (attempt + 1) * 100);
-            }
-          };
-          
-          // Initial attempt with small delay
-          setTimeout(() => attemptScroll(), 100);
-        } else {
-          // Element not found immediately, try again after content loads
-          setTimeout(() => {
-            const retryElement = document.getElementById(targetId);
-            if (retryElement) {
-              retryElement.scrollIntoView({ 
-                behavior: 'smooth', 
-                block: 'start',
-                inline: 'nearest'
-              });
-            }
-          }, 500);
-        }
-      } else {
-        // No hash, scroll to top
-        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-      }
-    };
-
-    scrollToTarget();
-  }, [location.pathname, location.hash]);
-
-  useEffect(() => {
-    // Only run on client side
-    if (typeof window === 'undefined') return;
-    
-    // Use a small timeout to ensure the DOM has been updated with new content
-    const timeoutId = setTimeout(() => {
-      const mainContent = document.getElementById('main-content');
-      if (mainContent) {
-        const headings = mainContent.querySelectorAll('h2');
-        const newToc: TocItem[] = Array.from(headings).map(heading => ({
-          id: heading.id,
-          label: heading.textContent || '',
-          level: 2,
-        }));
-        setToc(newToc);
-      }
-    }, 50);
-
-    return () => clearTimeout(timeoutId);
-  }, [location.pathname]); // Changed dependency to location.pathname
-
-  return (
-    <div className="min-h-screen bg-white overflow-x-hidden">
-      {/* Mobile Header */}
-      <header className="lg:hidden bg-white border-b border-slate-200 sticky top-0 z-50">
-        <div className="flex items-center justify-between px-4 py-3">
-          <div className="flex items-center gap-2 min-w-0">
-            <h1 className="text-xl font-bold text-slate-800">SFCC Dev</h1>
-            <span className="text-xl font-light text-orange-500">MCP</span>
-            <span className="text-xs text-slate-500 self-start mt-1">v1</span>
-          </div>
-          <button
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            className="p-2 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-md flex-shrink-0"
-            aria-label="Toggle navigation"
-          >
-            <svg
-              className="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              {sidebarOpen ? (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              ) : (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-              )}
-            </svg>
-          </button>
-        </div>
-      </header>
-
-      {/* Mobile Sidebar Overlay */}
-      {sidebarOpen && (
-        <div
-          className="lg:hidden fixed inset-0 z-40 bg-black bg-opacity-50"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
-
-      <div className="relative flex min-h-screen overflow-x-hidden">
-        {/* Desktop Sidebar */}
-        <div className="fixed top-0 left-0 h-full w-64 hidden lg:block bg-slate-50 border-r border-slate-200">
-          <Sidebar />
-        </div>
-
-        {/* Mobile Sidebar */}
-        <div className={`lg:hidden fixed top-0 left-0 h-full w-64 bg-slate-50 border-r border-slate-200 transform transition-transform duration-200 ease-in-out z-50 ${
-          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
-        }`}>
-          <Sidebar />
-        </div>
-
-        <div className="lg:pl-64 flex-1 min-w-0 max-w-full">
-          <div className="flex min-w-0 max-w-full">
-            <main id="main-content" className="flex-1 max-w-4xl mx-auto sm:p-4 lg:p-12 min-w-0 overflow-hidden">
-              <div className="prose prose-slate max-w-none min-w-0 break-words">
-                <Outlet />
-              </div>
-            </main>
-            <aside className="hidden xl:block w-64 flex-shrink-0">
-              <div className="fixed top-0 right-0 h-full w-64 p-8">
-                <OnThisPage items={toc} />
-              </div>
-            </aside>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Layout;

package/docs-site/components/LightCodeContainer.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-
-interface LightCodeContainerProps {
-  children: React.ReactNode;
-  className?: string;
-  /**
-   * Visual accent variant. Currently only 'blue' is used but additional
-   * variants are easy to extend without editing all call sites again.
-   */
-  variant?: 'blue' | 'green' | 'purple' | 'indigo' | 'amber' | 'gray';
-  /**
-   * If true, removes the default shadow for flatter contexts.
-   */
-  flat?: boolean;
-}
-
-const VARIANT_STYLES: Record<string, { bg: string; border: string }> = {
-  blue: { bg: 'bg-blue-50', border: 'border-blue-100' },
-  green: { bg: 'bg-green-50', border: 'border-green-100' },
-  purple: { bg: 'bg-purple-50', border: 'border-purple-100' },
-  indigo: { bg: 'bg-indigo-50', border: 'border-indigo-100' },
-  amber: { bg: 'bg-amber-50', border: 'border-amber-100' },
-  gray: { bg: 'bg-gray-50', border: 'border-gray-200' }
-};
-
-/**
- * Standardized light accent container for wrapping code blocks (or related content)
- * ensuring consistent styling across pages instead of ad-hoc duplicated class names.
- */
-const LightCodeContainer: React.FC<LightCodeContainerProps> = ({
-  children,
-  className = '',
-  variant = 'blue',
-  flat = false
-}) => {
-  const { bg, border } = VARIANT_STYLES[variant] || VARIANT_STYLES.blue;
-  return (
-    <div className={`${bg} ${border} rounded-xl p-6 ${flat ? '' : 'shadow-md'} ${className}`.trim()}>
-      {children}
-    </div>
-  );
-};
-
-export default LightCodeContainer;

package/docs-site/components/NewcomerCTA.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-interface NewcomerCTAProps {
-  /** Additional CSS classes to apply to the wrapper */
-  className?: string;
-  /** Custom href if different from default */
-  href?: string;
-  /** Whether to show as centered or inline */
-  centered?: boolean;
-}
-
-/**
- * Prominent call-to-action button for users new to MCP servers.
- * Directs them to the AI assistant setup guide.
- */
-const NewcomerCTA: React.FC<NewcomerCTAProps> = ({ 
-  className = '', 
-  href = '/ai-interfaces/#ai-assistant-setup',
-  centered = true 
-}) => {
-  const wrapperClasses = centered ? 'text-center' : '';
-  
-  return (
-    <div className={`${wrapperClasses} ${className}`}>
-      <div className="inline-block bg-gradient-to-r from-orange-500 to-red-500 p-1 rounded-2xl shadow-lg">
-        <Link 
-          to={href}
-          className="group block bg-white rounded-xl px-8 py-4 text-center no-underline hover:no-underline focus:no-underline transition-all duration-300 hover:bg-gray-50"
-        >
-          <div className="flex items-center justify-center gap-3">
-            <div className="bg-gradient-to-r from-orange-500 to-red-500 rounded-full p-2 md:p-3 shadow-inner">
-              <svg className="w-6 h-6 md:w-7 md:h-7 text-white drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true" focusable="false">
-                <path 
-                  fillRule="evenodd" 
-                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" 
-                  clipRule="evenodd" 
-                />
-              </svg>
-            </div>
-            <div className="text-left">
-              <div className="text-lg font-bold text-gray-900 mb-1">
-                New to MCP servers? 
-                <span className="ml-2 group-hover:translate-x-1 inline-block transition-transform text-orange-600">→</span>
-              </div>
-              <div className="text-sm text-gray-600">
-                Complete setup guide for AI assistants (Claude, GitHub Copilot, etc.)
-              </div>
-            </div>
-          </div>
-        </Link>
-      </div>
-    </div>
-  );
-};
-
-export default NewcomerCTA;

package/docs-site/components/NextStepsStrip.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { H3 } from './Typography';
-
-export const NextStepsStrip: React.FC = () => {
-  const cards = [
-    { href: '/ai-interfaces', title: '🤖 AI Interface Setup', desc: 'Connect Claude, Copilot, Cursor' },
-    { href: '/tools', title: '🛠️ Tool Surface', desc: 'Explore all available tools' },
-    { href: '/examples', title: '💡 Examples', desc: 'Real prompts & outcomes' },
-    { href: '/troubleshooting', title: '🐛 Troubleshooting', desc: 'Diagnose common issues' }
-  ];
-  return (
-    <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5 mt-4">
-      {cards.map(c => (
-        <a key={c.href} href={c.href} className="group block rounded-xl border border-gray-200 bg-white p-5 hover:border-blue-400 hover:shadow transition no-underline focus:outline-none focus:ring-2 focus:ring-blue-500">
-          <H3 className="text-base font-semibold mb-1 group-hover:text-blue-700">{c.title}</H3>
-          <p className="text-xs text-gray-600">{c.desc}</p>
-        </a>
-      ))}
-    </div>
-  );
-};
-
-export default NextStepsStrip;

package/docs-site/components/OnThisPage.tsx

@@ -1,91 +0,0 @@
-
-import React, { useState, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-import { TocItem } from '../types';
-
-interface OnThisPageProps {
-  items: TocItem[];
-}
-
-const OnThisPage: React.FC<OnThisPageProps> = ({ items }) => {
-  const [activeId, setActiveId] = useState<string>('');
-  const location = useLocation();
-  const [initialPathHash, setInitialPathHash] = useState('');
-
-  // Reset active ID when location changes
-  useEffect(() => {
-    setActiveId('');
-  }, [location.pathname]);
-
-  useEffect(() => {
-    // Only run on client side
-    if (typeof window === 'undefined') return;
-    
-    if (items.length === 0) {
-      setActiveId('');
-      return;
-    }
-
-    // Set initial path hash on client side only to prevent SSR hydration mismatch
-    setInitialPathHash(window.location.hash);
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const visibleHeadings = entries
-          .filter(entry => entry.isIntersecting)
-          .map(entry => entry.target.id);
-        
-        if (visibleHeadings.length > 0) {
-          // Set the first visible heading as active
-          setActiveId(visibleHeadings[0]);
-        }
-      },
-      {
-        rootMargin: '-20px 0px -80% 0px',
-        threshold: 0
-      }
-    );
-
-    // Observe all headings
-    items.forEach(item => {
-      const element = document.getElementById(item.id);
-      if (element) {
-        observer.observe(element);
-      }
-    });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [items, location.pathname]); // Added location.pathname to dependencies
-
-  if (items.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="pt-12">
-      <h2 className="text-sm font-bold text-slate-800 mb-4">On this page</h2>
-      <div className="max-h-96 overflow-y-auto">
-        <ul className="space-y-2 text-sm">
-          {items.map(item => (
-            <li key={item.id}>
-              <a
-                href={`#${item.id}`}
-                className={`block transition-colors ${
-                  activeId === item.id
-                    ? 'text-blue-600 font-medium border-l-2 border-blue-600 pl-2 -ml-2'
-                    : 'text-slate-500 hover:text-slate-800'
-                }`}
-              >
-                {item.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-export default OnThisPage;

package/docs-site/components/SEO.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { Head } from 'vite-react-ssg';
-
-interface SEOProps {
-  title?: string;
-  description?: string;
-  keywords?: string;
-  canonical?: string;
-  ogImage?: string;
-  ogType?: 'website' | 'article';
-  twitterCard?: 'summary' | 'summary_large_image';
-  noindex?: boolean;
-}
-
-const SEO: React.FC<SEOProps> = ({
-  title = 'SFCC Development MCP Server',
-  description = 'Model Context Protocol server for Salesforce B2C Commerce Cloud development. Access comprehensive documentation, analyze logs, explore system objects, and get best practices with AI assistance.',
-  keywords = 'SFCC, Salesforce Commerce Cloud, Model Context Protocol, MCP server, AI development tools, SFCC documentation, Commerce Cloud development',
-  canonical,
-  ogImage = 'https://sfcc-mcp-dev.rhino-inquisitor.com/explain-product-pricing-methods.png',
-  ogType = 'website',
-  twitterCard = 'summary_large_image',
-  structuredData,
-  noindex = false
-}) => {
-  const baseUrl = 'https://sfcc-mcp-dev.rhino-inquisitor.com';
-  const fullCanonical = canonical ? `${baseUrl}${canonical}` : baseUrl;
-  const fullTitle = title === 'SFCC Development MCP Server' ? title : `${title} | SFCC Development MCP Server`;
-
-  return (
-    <Head>
-      <title>{fullTitle}</title>
-      <meta name="description" content={description} />
-      <meta name="keywords" content={keywords} />
-      <link rel="canonical" href={fullCanonical} />
-      
-      {/* Basic Meta Tags */}
-      <meta name="author" content="Thomas Theunen" />
-      <meta name="publisher" content="Thomas Theunen" />
-      {noindex ? (
-        <meta name="robots" content="noindex, nofollow" />
-      ) : (
-        <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
-      )}
-
-      {/* Open Graph Tags */}
-      <meta property="og:title" content={fullTitle} />
-      <meta property="og:description" content={description} />
-      <meta property="og:type" content={ogType} />
-      <meta property="og:url" content={fullCanonical} />
-      <meta property="og:site_name" content="SFCC Development MCP Server" />
-      <meta property="og:image" content={ogImage} />
-      <meta property="og:image:alt" content={title} />
-      <meta property="og:image:width" content="1200" />
-      <meta property="og:image:height" content="630" />
-      <meta property="og:locale" content="en_US" />
-
-      {/* Twitter Card Tags */}
-      <meta name="twitter:card" content={twitterCard} />
-      <meta name="twitter:title" content={fullTitle} />
-      <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content={ogImage} />
-      <meta name="twitter:image:alt" content={title} />
-      <meta name="twitter:creator" content="@taurgis" />
-      <meta name="twitter:site" content="@taurgis" />
-
-      {/* Additional Meta Tags */}
-      <meta name="application-name" content="SFCC Development MCP Server" />
-      <meta name="msapplication-tooltip" content={description} />
-      <meta name="apple-mobile-web-app-title" content="SFCC MCP Server" />
-      <meta name="apple-mobile-web-app-capable" content="yes" />
-      <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-
-
-    </Head>
-  );
-};
-
-export default SEO;

package/docs-site/components/Search.tsx

@@ -1,207 +0,0 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { searchDocs, SearchResult } from '../utils/search';
-import { SearchIcon } from './icons';
-
-const Highlight: React.FC<{ text: string; query: string }> = ({ text, query }) => {
-    if (!query) return <>{text}</>;
-    const parts = text.split(new RegExp(`(${query})`, 'gi'));
-    return (
-        <>
-            {parts.map((part, i) =>
-                part.toLowerCase() === query.toLowerCase() ? (
-                    <mark key={i} className="bg-orange-200 text-orange-800 font-semibold rounded px-0.5">
-                        {part}
-                    </mark>
-                ) : (
-                    part
-                )
-            )}
-        </>
-    );
-};
-
-
-const Search: React.FC = () => {
-    const [query, setQuery] = useState('');
-    const [results, setResults] = useState<SearchResult[]>([]);
-    const [isOpen, setIsOpen] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(-1);
-    const inputRef = useRef<HTMLInputElement>(null);
-    const resultsRef = useRef<HTMLUListElement>(null);
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    const openSearch = useCallback(() => {
-        setIsOpen(true);
-    }, []);
-
-    const closeSearch = useCallback(() => {
-        setIsOpen(false);
-        setQuery('');
-        setResults([]);
-        setActiveIndex(-1);
-    }, []);
-
-    useEffect(() => {
-        // Only run on client side
-        if (typeof window === 'undefined') return;
-        
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.metaKey && e.key === 'k') {
-                e.preventDefault();
-                if (isOpen) {
-                    closeSearch();
-                } else {
-                    openSearch();
-                }
-            }
-
-            if (isOpen) {
-                if (e.key === 'Escape') {
-                    closeSearch();
-                } else if (e.key === 'ArrowDown') {
-                    e.preventDefault();
-                    setActiveIndex(prev => prev < results.length - 1 ? prev + 1 : prev);
-                } else if (e.key === 'ArrowUp') {
-                    e.preventDefault();
-                    setActiveIndex(prev => prev > 0 ? prev - 1 : prev);
-                } else if (e.key === 'Enter' && activeIndex >= 0) {
-                    const result = results[activeIndex];
-                    handleNavigation(result.path, result.heading, result.headingId);
-                }
-            }
-        };
-
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [isOpen, results.length, activeIndex, openSearch, closeSearch]);
-
-    useEffect(() => {
-        if (isOpen && inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [isOpen]);
-
-    useEffect(() => {
-      closeSearch();
-    }, [location.pathname, closeSearch]);
-
-    useEffect(() => {
-        if (activeIndex >= 0 && resultsRef.current) {
-            const activeElement = resultsRef.current.children[activeIndex] as HTMLLIElement;
-            if (activeElement) {
-                activeElement.scrollIntoView({ block: 'nearest' });
-            }
-        }
-    }, [activeIndex]);
-
-    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const newQuery = e.target.value;
-        setQuery(newQuery);
-        if (newQuery.length > 1) {
-            setResults(searchDocs(newQuery));
-        } else {
-            setResults([]);
-        }
-        setActiveIndex(0);
-    };
-    
-    const handleNavigation = (path: string, heading?: string, headingId?: string) => {
-        // Use the actual headingId if available, otherwise generate one from the heading
-        let targetPath = path;
-        let hashFragment = '';
-        
-        if (headingId) {
-            hashFragment = headingId;
-        } else if (heading && heading !== 'Introduction' && heading !== path.split('/').pop()) {
-            // Convert heading to a URL-safe ID as fallback
-            const generatedId = heading
-                .toLowerCase()
-                .replace(/[^a-z0-9\s-]/g, '') // Remove special characters except spaces and hyphens
-                .replace(/\s+/g, '-') // Replace spaces with hyphens
-                .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
-                .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
-            
-            if (generatedId) {
-                hashFragment = generatedId;
-            }
-        }
-        
-        // Navigate to the path first, then handle hash navigation
-        if (hashFragment) {
-              navigate(targetPath + '#' + hashFragment);
-        } else {
-            navigate(targetPath);
-        }
-        
-        closeSearch();
-    };
-
-    return (
-        <>
-            <div className="relative">
-                <SearchIcon className="absolute top-1/2 left-3 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
-                <button
-                    type="button"
-                    onClick={openSearch}
-                    className="w-full bg-slate-100 border border-slate-200 rounded-lg py-2 pl-9 pr-12 sm:pr-3 text-sm text-left text-slate-500 hover:border-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-400"
-                >
-                    Search...
-                </button>
-                <div className="absolute top-1/2 right-3 -translate-y-1/2 text-xs text-slate-400 border border-slate-300 rounded-md px-1.5 py-0.5 pointer-events-none hidden sm:block">
-                    ⌘K
-                </div>
-            </div>
-
-            {isOpen && (
-                 <div className="fixed inset-0 z-50 flex justify-center items-start pt-4 sm:pt-20 p-4" aria-modal="true">
-                    <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm" onClick={closeSearch}></div>
-                    <div className="relative bg-white w-full max-w-2xl rounded-lg shadow-lg max-h-[90vh] flex flex-col">
-                        <div className="relative flex-shrink-0">
-                            <SearchIcon className="absolute top-1/2 left-4 -translate-y-1/2 w-5 h-5 text-slate-400" />
-                            <input
-                                ref={inputRef}
-                                type="text"
-                                value={query}
-                                onChange={handleSearch}
-                                placeholder="Search documentation..."
-                                className="w-full text-base sm:text-lg py-3 sm:py-4 pl-12 pr-4 border-b border-slate-200 focus:outline-none"
-                            />
-                        </div>
-                        {query.length > 1 && (
-                             <div className="flex-1 overflow-y-auto min-h-0">
-                                {results.length > 0 ? (
-                                    <ul ref={resultsRef} className="p-3 sm:p-4 space-y-2">
-                                        {results.map((result, index) => (
-                                            <li key={`${result.path}-${result.heading}`}>
-                                                <button
-                                                    onClick={() => handleNavigation(result.path, result.heading, result.headingId)}
-                                                    className={`w-full text-left p-3 rounded-md transition-colors ${activeIndex === index ? 'bg-orange-100' : 'hover:bg-slate-100'}`}
-                                                >
-                                                    <div className="font-semibold text-slate-800 text-sm sm:text-base">
-                                                        <Highlight text={result.pageTitle} query={query} />
-                                                    </div>
-                                                    <div className="text-xs sm:text-sm text-slate-600 mb-1">
-                                                        <Highlight text={result.heading} query={query} />
-                                                    </div>
-                                                    <p className="text-xs sm:text-sm text-slate-500 line-clamp-2">
-                                                        <Highlight text={result.snippet} query={query} />
-                                                    </p>
-                                                </button>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                ) : (
-                                    <p className="p-6 sm:p-8 text-center text-slate-500 text-sm sm:text-base">No results found for "{query}"</p>
-                                )}
-                            </div>
-                        )}
-                    </div>
-                </div>
-            )}
-        </>
-    );
-};
-
-export default Search;