page.tsx

Go to the documentation of this file.

"use client";
import { useState } from "react";
import Link from "next/link";
import { Icon } from '@/contexts/IconContext';
 
export default function PosHelpPage() {
  const [activeGuide, setActiveGuide] = useState<string>("overview");
 
  const guides = [
    { id: "overview", title: "Store POS Overview", icon: "info" },
    { id: "sales", title: "Processing Sales", icon: "point_of_sale" },
    { id: "returns", title: "Returns & Refunds", icon: "keyboard_return" },
    { id: "products", title: "Product Lookup", icon: "search" },
    { id: "customers", title: "Customer Information", icon: "badge" },
    { id: "payment", title: "Payment Methods", icon: "payment" },
    { id: "reports", title: "Daily Reports", icon: "receipt_long" },
    { id: "troubleshooting", title: "Troubleshooting", icon: "build" },
    { id: "faq", title: "FAQ", icon: "help" },
  ];
 
  return (
    <div className="min-h-screen bg-bg">
      {/* Header */}
      <div className="relative overflow-hidden py-12 px-6 bg-gradient-to-r from-brand to-brand2">
        {/* Animated circles */}
        <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32 animate-pulse"></div>
        <div className="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full -ml-24 -mb-24 animate-pulse" style={{ animationDelay: '1s' }}></div>
        <div className="absolute top-1/2 right-1/4 w-32 h-32 bg-white/5 rounded-full animate-pulse" style={{ animationDelay: '0.5s' }}></div>
        
        <div className="max-w-7xl mx-auto relative z-10">
          <h1 className="text-4xl font-bold text-white mb-3 flex items-center gap-3">
            <Icon name="help" size={40} />
            Store POS Help Center
          </h1>
          <p className="text-xl text-white/90">Your guide to daily POS operations</p>
        </div>
      </div>
 
      <div className="max-w-7xl mx-auto py-8 px-6">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* Sidebar Navigation */}
          <div className="lg:col-span-1">
            <div className="bg-surface rounded-lg shadow-sm p-4 sticky top-6">
              <h3 className="font-semibold text-text mb-3">Help Topics</h3>
              <nav className="space-y-1">
                {guides.map((guide) => (
                  <button
                    key={guide.id}
                    onClick={() => setActiveGuide(guide.id)}
                    className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors flex items-center gap-2 ${
                      activeGuide === guide.id
                        ? "bg-brand/10 text-brand font-medium"
                        : "text-text hover:bg-surface-2"
                    }`}
                  >
                    <Icon name={guide.icon} size={18} />
                    {guide.title}
                  </button>
                ))}
              </nav>
 
              <div className="mt-6 pt-6 border-t border-border">
                <p className="text-xs text-muted mb-2">Need more help?</p>
                <a 
                  href="tel:1300123456"
                  className="text-sm text-brand hover:text-brand/80 flex items-center gap-1"
                >
                  <Icon name="phone" size={18} />
                  Call Support →
                </a>
              </div>
            </div>
          </div>
 
          {/* Main Content */}
          <div className="lg:col-span-3">
            <div className="bg-surface rounded-lg shadow-sm p-8">
              {activeGuide === "overview" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text">Store POS Overview</h2>
                  
                  <div className="bg-success/10 border border-success/30 rounded-lg p-5">
                    <h3 className="text-lg font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="store" size={24} />
                      Welcome to your Store POS System
                    </h3>
                    <p className="text-text mb-3">
                      This help center is designed specifically for store staff. Use the sidebar to navigate 
                      through different topics, or scroll down for quick answers to common questions.
                    </p>
                    <p className="text-sm text-muted">
                      Your POS system is powered by Fieldpine technology, providing you with reliable and 
                      efficient point of sale operations.
                    </p>
                  </div>
 
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="p-5 bg-surface-2 rounded-lg border border-border">
                      <Icon name="point_of_sale" size={32} className="mb-2 text-brand" />
                      <h4 className="font-semibold text-text mb-1">Process Sales</h4>
                      <p className="text-sm text-muted">Learn how to ring up sales, scan items, and complete transactions</p>
                    </div>
 
                    <div className="p-5 bg-surface-2 rounded-lg border border-border">
                      <Icon name="keyboard_return" size={32} className="mb-2 text-brand" />
                      <h4 className="font-semibold text-text mb-1">Handle Returns</h4>
                      <p className="text-sm text-muted">Step-by-step guide for processing customer returns</p>
                    </div>
 
                    <div className="p-5 bg-surface-2 rounded-lg border border-border">
                      <Icon name="search" size={32} className="mb-2 text-brand" />
                      <h4 className="font-semibold text-text mb-1">Find Products</h4>
                      <p className="text-sm text-muted">Quick product search and price lookups</p>
                    </div>
 
                    <div className="p-5 bg-surface-2 rounded-lg border border-border">
                      <Icon name="receipt_long" size={32} className="mb-2 text-brand" />
                      <h4 className="font-semibold text-text mb-1">View Reports</h4>
                      <p className="text-sm text-muted">Check your daily sales and performance</p>
                    </div>
                  </div>
 
                  <div className="bg-info/10 border border-info/30 rounded-lg p-5">
                    <h3 className="text-sm font-semibold text-text mb-2 flex items-center gap-2">
                      <Icon name="tips_and_updates" size={20} />
                      Quick Tips
                    </h3>
                    <ul className="text-sm text-text space-y-2 list-disc pl-5">
                      <li>Use the search bar (Ctrl+K) to quickly find products</li>
                      <li>Double-click on products to view detailed information</li>
                      <li>Press F1 at any time to open this help center</li>
                      <li>Your dashboard shows today's sales at a glance</li>
                    </ul>
                  </div>
                </div>
              )}
 
              {activeGuide === "sales" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text">Processing Sales</h2>
                  
                  <div className="space-y-4">
                    <div>
                      <h3 className="text-xl font-semibold text-text mb-2 flex items-center gap-2">
                        <Icon name="looks_one" size={24} />
                        Starting a Sale
                      </h3>
                      <ol className="list-decimal list-inside space-y-2 ml-4 text-text">
                        <li>Navigate to <strong>Point of Sale → Sales</strong> from the menu</li>
                        <li>The sales screen will open with a blank transaction</li>
                        <li>Begin scanning items or searching for products manually</li>
                      </ol>
                    </div>
 
                    <div>
                      <h3 className="text-xl font-semibold text-text mb-2 flex items-center gap-2">
                        <Icon name="looks_two" size={24} />
                        Adding Items
                      </h3>
                      <p className="text-text mb-2">You can add items to the sale in multiple ways:</p>
                      <ul className="list-disc list-inside space-y-2 ml-4 text-text">
                        <li><strong>Scan barcode:</strong> Use your barcode scanner to scan product barcodes</li>
                        <li><strong>Manual search:</strong> Type the product name or code in the search box</li>
                        <li><strong>Browse:</strong> Click on products from the product grid</li>
                        <li><strong>Quick keys:</strong> Use keyboard shortcuts for common items</li>
                      </ul>
                    </div>
 
                    <div>
                      <h3 className="text-xl font-semibold text-text mb-2 flex items-center gap-2">
                        <Icon name="looks_3" size={24} />
                        Completing the Sale
                      </h3>
                      <ol className="list-decimal list-inside space-y-2 ml-4 text-text">
                        <li>Review the items and total on screen</li>
                        <li>Click the <strong>Pay</strong> button or press F12</li>
                        <li>Select the payment method (Cash, Card, etc.)</li>
                        <li>Enter the amount tendered (for cash sales)</li>
                        <li>Click <strong>Complete Sale</strong></li>
                        <li>A receipt will print automatically</li>
                      </ol>
                    </div>
 
                    <div className="bg-warn/10 border border-warn/30 rounded-lg p-4">
                      <h4 className="font-semibold text-text mb-2 flex items-center gap-2">
                        <Icon name="warning" size={20} />
                        Important Notes
                      </h4>
                      <ul className="text-sm text-text space-y-2 list-disc pl-5">
                        <li>Always verify the total before completing payment</li>
                        <li>Check that the customer receives the correct change</li>
                        <li>If you make a mistake, void the line item and re-scan</li>
                        <li>Never leave a transaction open when stepping away from the POS</li>
                      </ul>
                    </div>
                  </div>
                </div>
              )}
 
              {activeGuide === "returns" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text">Returns & Refunds</h2>
                  
                  <div className="space-y-4">
                    <div>
                      <h3 className="text-xl font-semibold text-text mb-2">Processing a Return</h3>
                      <ol className="list-decimal list-inside space-y-2 ml-4 text-text">
                        <li>Ask the customer for their original receipt</li>
                        <li>Navigate to <strong>Point of Sale → Sales</strong></li>
                        <li>Click the <strong>Return</strong> button</li>
                        <li>Scan the items being returned or enter them manually</li>
                        <li>Verify the return reason (optional)</li>
                        <li>Select the refund method (same as original payment)</li>
                        <li>Complete the transaction</li>
                      </ol>
                    </div>
 
                    <div className="bg-danger/10 border border-danger/30 rounded-lg p-5">
                      <h4 className="font-semibold text-text mb-2 flex items-center gap-2">
                        <Icon name="error" size={20} />
                        Store Return Policy
                      </h4>
                      <ul className="text-sm text-text space-y-2 list-disc pl-5">
                        <li>Returns accepted within 30 days with receipt</li>
                        <li>Items must be in original condition</li>
                        <li>Refunds issued to original payment method</li>
                        <li>Check with manager for returns without receipt</li>
                      </ul>
                    </div>
 
                    <div>
                      <h3 className="text-xl font-semibold text-text mb-2">Exchange Items</h3>
                      <p className="text-text">For exchanges:</p>
                      <ol className="list-decimal list-inside space-y-2 ml-4 mt-2 text-text">
                        <li>Process the return as described above</li>
                        <li>Start a new sale for the replacement item</li>
                        <li>Apply any credit from the return to the new sale</li>
                      </ol>
                    </div>
                  </div>
                </div>
              )}
 
              {activeGuide === "products" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text">Product Lookup</h2>
                  
                  <div className="space-y-4">
                    <div>
                      <h3 className="text-xl font-semibold text-text mb-2">Finding a Product</h3>
                      <p className="text-text mb-2">Navigate to <strong>Point of Sale → Products</strong> to search for items:</p>
                      <ul className="list-disc list-inside space-y-2 ml-4 text-text">
                        <li><strong>Search by name:</strong> Type any part of the product name</li>
                        <li><strong>Search by code:</strong> Enter the product code or SKU</li>
                        <li><strong>Scan barcode:</strong> Scan the product to look it up instantly</li>
                        <li><strong>Browse categories:</strong> Use department filters to narrow results</li>
                      </ul>
                    </div>
 
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-text">Checking Stock Levels</h3>
                      <p className="mb-2 text-text">To check if an item is in stock:</p>
                      <ol className="list-decimal list-inside space-y-2 ml-4 text-text">
                        <li>Go to <strong>Point of Sale → Stock Levels</strong></li>
                        <li>Search for the product</li>
                        <li>View current stock quantity and location</li>
                        <li>Check if more stock is on order</li>
                      </ol>
                    </div>
 
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-text">Price Checks</h3>
                      <p className="text-text">
                        When a customer asks for a price, use the product search to quickly look up the 
                        current price. The system will show:
                      </p>
                      <ul className="list-disc list-inside space-y-1 ml-4 mt-2 text-text">
                        <li>Regular retail price</li>
                        <li>Any active discounts or promotions</li>
                        <li>Special prices (if applicable)</li>
                      </ul>
                    </div>
                  </div>
                </div>
              )}
 
              {activeGuide === "customers" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text">Customer Information</h2>
                  
                  <div className="space-y-4">
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-text">Looking Up Customer Details</h3>
                      <p className="mb-2 text-text">During a sale, you can add customer information:</p>
                      <ol className="list-decimal list-inside space-y-2 ml-4 text-text">
                        <li>Click the <strong>Customer</strong> button on the sales screen</li>
                        <li>Search by name, phone, or email</li>
                        <li>Select the customer from the results</li>
                        <li>Their details will be linked to this sale</li>
                      </ol>
                    </div>
 
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-text">Adding New Customers</h3>
                      <p className="mb-2 text-text">If the customer is not in the system:</p>
                      <ol className="list-decimal list-inside space-y-2 ml-4 text-text">
                        <li>Click <strong>Add New Customer</strong></li>
                        <li>Enter their name and contact details</li>
                        <li>Ask if they want to join the loyalty program</li>
                        <li>Save the customer record</li>
                      </ol>
                    </div>
 
                    <div className="bg-info/10 border border-info/30 rounded-lg p-5">
                      <h4 className="font-semibold mb-2 flex items-center gap-2 text-text">
                        <Icon name="info" size={20} />
                        Privacy Note
                      </h4>
                      <p className="text-sm text-text">
                        Always ask permission before collecting customer information. Let customers know 
                        that their details will only be used for purchase history and loyalty rewards.
                      </p>
                    </div>
                  </div>
                </div>
              )}
 
              {activeGuide === "payment" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text">Payment Methods</h2>
                  
                  <div className="space-y-4">
                    <div>
                      <h3 className="text-xl font-semibold text-text mb-2">Accepted Payment Types</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div className="p-5 bg-surface-2 rounded-lg border border-border">
                          <div className="flex items-center gap-2 mb-2">
                            <Icon name="payments" size={20} className="text-brand" />
                            <strong className="text-text">Cash</strong>
                          </div>
                          <p className="text-sm text-muted">Count change carefully and verify notes</p>
                        </div>
                        <div className="p-5 bg-surface-2 rounded-lg border border-border">
                          <div className="flex items-center gap-2 mb-2">
                            <Icon name="credit_card" size={20} className="text-brand" />
                            <strong className="text-text">EFTPOS/Credit Card</strong>
                          </div>
                          <p className="text-sm text-muted">Insert, tap, or swipe card</p>
                        </div>
                        <div className="p-5 bg-surface-2 rounded-lg border border-border">
                          <div className="flex items-center gap-2 mb-2">
                            <Icon name="phone_iphone" size={20} className="text-brand" />
                            <strong className="text-text">Mobile Payment</strong>
                          </div>
                          <p className="text-sm text-muted">Apple Pay, Google Pay, Samsung Pay</p>
                        </div>
                        <div className="p-5 bg-surface-2 rounded-lg border border-border">
                          <div className="flex items-center gap-2 mb-2">
                            <Icon name="card_giftcard" size={20} className="text-brand" />
                            <strong className="text-text">Gift Cards</strong>
                          </div>
                          <p className="text-sm text-muted">Scan or enter gift card number</p>
                        </div>
                      </div>
                    </div>
 
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-text">Split Payments</h3>
                      <p className="text-text">
                        Customers can pay using multiple payment methods:
                      </p>
                      <ol className="list-decimal list-inside space-y-2 ml-4 mt-2 text-text">
                        <li>After clicking Pay, select the first payment method</li>
                        <li>Enter the amount for that payment</li>
                        <li>Click <strong>Add Payment</strong></li>
                        <li>Select the second payment method for the remaining balance</li>
                        <li>Complete the transaction</li>
                      </ol>
                    </div>
 
                    <div className="bg-warn/10 border border-warn/30 rounded-lg p-5">
                      <h4 className="font-semibold text-text mb-3 flex items-center gap-2">
                        <Icon name="warning" size={20} />
                        Card Payment Tips
                      </h4>
                      <ul className="text-sm text-text space-y-2 list-disc pl-5">
                        <li>Always wait for "Approved" message before completing sale</li>
                        <li>For declined cards, ask customer to try another payment method</li>
                        <li>Never manually enter card numbers unless authorized</li>
                        <li>Signature required for purchases over $100 (check store policy)</li>
                      </ul>
                    </div>
                  </div>
                </div>
              )}
 
              {activeGuide === "reports" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text">Daily Reports</h2>
                  
                  <div className="space-y-4">
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-text">Viewing Your Sales</h3>
                      <p className="mb-2 text-text">To check your daily performance:</p>
                      <ol className="list-decimal list-inside space-y-2 ml-4 text-text">
                        <li>Go to <strong>Point of Sale → Sales Report</strong></li>
                        <li>View today's total sales, transactions, and averages</li>
                        <li>See breakdown by payment method</li>
                        <li>Check your personal sales performance</li>
                      </ol>
                    </div>
 
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-text">Monthly Summary</h3>
                      <p className="mb-2 text-text">For monthly performance data:</p>
                      <ul className="list-disc list-inside space-y-2 ml-4 text-text">
                        <li>Navigate to <strong>Point of Sale → Monthly Report</strong></li>
                        <li>View sales trends over the month</li>
                        <li>Compare performance to previous months</li>
                        <li>See top-selling products</li>
                      </ul>
                    </div>
 
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-text">Dashboard Overview</h3>
                      <p className="text-text">
                        The <strong>Home</strong> page shows your key metrics at a glance:
                      </p>
                      <ul className="list-disc list-inside space-y-1 ml-4 mt-2 text-text">
                        <li>Today's sales total</li>
                        <li>Number of transactions</li>
                        <li>Average transaction value</li>
                        <li>Payment method breakdown</li>
                        <li>Hourly sales chart</li>
                      </ul>
                    </div>
                  </div>
                </div>
              )}
 
              {activeGuide === "troubleshooting" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text">Troubleshooting</h2>
                  
                  <div className="space-y-4">
                    <div>
                      <h3 className="text-xl font-semibold mb-2 text-text">Common Issues</h3>
                      
                      <div className="space-y-4">
                        <div className="p-4 rounded-lg border bg-surface-2 border border-border">
                          <h4 className="font-semibold mb-2 text-text">Barcode Scanner Not Working</h4>
                          <ul className="text-sm space-y-1 ml-4 list-disc">
                            <li>Check USB cable connection</li>
                            <li>Try scanning a different barcode</li>
                            <li>Restart the scanner (unplug and replug)</li>
                            <li>Enter the barcode number manually as a backup</li>
                          </ul>
                        </div>
 
                        <div className="p-4 rounded-lg border bg-surface-2 border border-border">
                          <h4 className="font-semibold mb-2 text-text">Receipt Printer Not Printing</h4>
                          <ul className="text-sm space-y-1 ml-4 list-disc">
                            <li>Check paper roll - ensure it's loaded correctly</li>
                            <li>Verify printer is powered on</li>
                            <li>Check for paper jams</li>
                            <li>Try restarting the printer</li>
                          </ul>
                        </div>
 
                        <div className="p-4 rounded-lg border bg-surface-2 border border-border">
                          <h4 className="font-semibold mb-2 text-text">EFTPOS Terminal Issues</h4>
                          <ul className="text-sm space-y-1 ml-4 list-disc">
                            <li>Ensure terminal is connected to power and network</li>
                            <li>Check communication cable to POS</li>
                            <li>Try a manual payment entry if tap/insert fails</li>
                            <li>Contact bank support for persistent issues</li>
                          </ul>
                        </div>
 
                        <div className="p-4 rounded-lg border bg-surface-2 border border-border">
                          <h4 className="font-semibold mb-2 text-text">Product Not Found</h4>
                          <ul className="text-sm space-y-1 ml-4 list-disc">
                            <li>Try different search terms</li>
                            <li>Check for typos in product code</li>
                            <li>Look up by barcode if available</li>
                            <li>Ask manager about special order items</li>
                          </ul>
                        </div>
 
                        <div className="p-4 rounded-lg border bg-surface-2 border border-border">
                          <h4 className="font-semibold mb-2 text-text">System Running Slow</h4>
                          <ul className="text-sm space-y-1 ml-4 list-disc">
                            <li>Check internet connection</li>
                            <li>Close unnecessary browser tabs</li>
                            <li>Clear browser cache if problem persists</li>
                            <li>Report to IT if issue continues</li>
                          </ul>
                        </div>
                      </div>
                    </div>
 
                    <div className="bg-danger/10 border border-danger/30 rounded-lg p-5">
                      <h4 className="font-semibold mb-2 flex items-center gap-2 text-text">
                        <Icon name="phone" size={20} />
                        Need Help?
                      </h4>
                      <p className="text-sm text-text">
                        If you can't resolve an issue, contact your manager or call technical support at 
                        <strong> 1300-123-456</strong>. Have your store name and terminal number ready.
                      </p>
                    </div>
                  </div>
                </div>
              )}
 
              {activeGuide === "faq" && (
                <div className="space-y-6">
                  <h2 className="text-3xl font-bold text-text">Frequently Asked Questions</h2>
                  
                  <div className="space-y-4">
                    <details className="p-4 rounded-lg border bg-surface-2 border border-border">
                      <summary className="font-semibold cursor-pointer text-text">
                        How do I void an item after scanning it?
                      </summary>
                      <p className="mt-2 text-sm text-muted">
                        Click on the item in the transaction list and press the "Remove" or "Void" button. 
                        You can also use the Delete key on your keyboard.
                      </p>
                    </details>
 
                    <details className="p-4 rounded-lg border bg-surface-2 border border-border">
                      <summary className="font-semibold cursor-pointer text-text">
                        Can I cancel a sale after starting it?
                      </summary>
                      <p className="mt-2 text-sm text-muted">
                        Yes, use the "Cancel" or "Void Transaction" button before completing payment. 
                        This will clear all items and start fresh. Once payment is complete, you'll need 
                        to process a return instead.
                      </p>
                    </details>
 
                    <details className="p-4 rounded-lg border bg-surface-2 border border-border">
                      <summary className="font-semibold cursor-pointer text-text">
                        What if a customer wants a discount?
                      </summary>
                      <p className="mt-2 text-sm text-muted">
                        Check your store's discount policy. If authorized, select the item and click 
                        "Discount" to apply a percentage or dollar amount off. Manager approval may be 
                        required for discounts over a certain amount.
                      </p>
                    </details>
 
                    <details className="p-4 rounded-lg border bg-surface-2 border border-border">
                      <summary className="font-semibold cursor-pointer text-text">
                        How do I open the cash drawer?
                      </summary>
                      <p className="mt-2 text-sm text-muted">
                        The cash drawer automatically opens when you complete a cash sale. To open it 
                        manually (for change, etc.), use the "No Sale" function - this requires manager 
                        authorization and will be logged.
                      </p>
                    </details>
 
                    <details className="p-4 rounded-lg border bg-surface-2 border border-border">
                      <summary className="font-semibold cursor-pointer text-text">
                        What should I do at the end of my shift?
                      </summary>
                      <p className="mt-2 text-sm text-muted">
                        Your manager will guide you through the end-of-shift process, which typically includes:
                        counting your cash drawer, reconciling transactions, and logging out of the system.
                        Never leave the POS logged in when you're not present.
                      </p>
                    </details>
 
                    <details className="p-4 rounded-lg border bg-surface-2 border border-border">
                      <summary className="font-semibold cursor-pointer text-text">
                        How do I look up a previous transaction?
                      </summary>
                      <p className="mt-2 text-sm text-muted">
                        Go to Point of Sale → Sales Report and use the transaction search feature. You can 
                        search by receipt number, date/time, customer name, or transaction amount. This is 
                        helpful for processing returns or answering customer questions.
                      </p>
                    </details>
 
                    <details className="p-4 rounded-lg border bg-surface-2 border border-border">
                      <summary className="font-semibold cursor-pointer text-text">
                        Can I change the quantity of an item?
                      </summary>
                      <p className="mt-2 text-sm text-muted">
                        Yes, after scanning or adding an item, click on it in the transaction list and use 
                        the quantity field to update. You can also scan the same item multiple times to 
                        increase quantity automatically.
                      </p>
                    </details>
 
                    <details className="p-4 rounded-lg border bg-surface-2 border border-border">
                      <summary className="font-semibold cursor-pointer text-text">
                        What if the price on screen doesn't match the shelf tag?
                      </summary>
                      <p className="mt-2 text-sm text-muted">
                        Follow your store's price accuracy policy. Typically, you should honor the lower 
                        price and notify your manager so they can update the pricing or signage. Use the 
                        price override function with manager approval if needed.
                      </p>
                    </details>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
 
      {/* Footer */}
      <div className="py-8 px-6 mt-12 bg-surface border-t border-border">
        <div className="max-w-7xl mx-auto text-center">
          <p className="text-sm text-muted mb-2">
            Need additional help? Contact your store manager or technical support.
          </p>
          <p className="text-xs text-muted">
            Powered by Fieldpine Technology
          </p>
        </div>
      </div>
    </div>
  );
}