feat: add comprehensive camera troubleshooting guide

- Add collapsible troubleshooting section with device-specific instructions
- Detect iOS/iPhone and show specific Settings app instructions
- Detect Safari and show Safari-specific permission steps
- Show Chrome/general browser instructions for other browsers
- Include common issues and solutions
- Highlight manual check-in alternative
- Auto-detect user's device/browser for relevant instructions

src/components/event/QRCodeScanner.tsx

@@ -11,9 +11,14 @@ export function QRCodeScanner({ onScan, onError }: QRCodeScannerProps) {
   const [error, setError] = useState<string | null>(null);
   const [showManualInput, setShowManualInput] = useState(false);
   const [manualInput, setManualInput] = useState('');
+  const [showTroubleshooting, setShowTroubleshooting] = useState(false);
   const scannerRef = useRef<Html5Qrcode | null>(null);
   const scannerIdRef = useRef('qr-reader');
 
+  // Detect if user is on iOS
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
   useEffect(() => {
     return () => {
       // Cleanup on unmount
@@ -269,6 +274,100 @@ export function QRCodeScanner({ onScan, onError }: QRCodeScannerProps) {
           </form>
         </div>
       )}
+
+      {/* Troubleshooting Button */}
+      <button
+        onClick={() => setShowTroubleshooting(!showTroubleshooting)}
+        className="w-full text-sm text-gray-600 hover:text-gray-900 underline"
+      >
+        {showTroubleshooting ? '▼ Hide' : '▶'} Camera not working? Troubleshooting guide
+      </button>
+
+      {/* Troubleshooting Guide */}
+      {showTroubleshooting && (
+        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 space-y-4">
+          <div>
+            <h3 className="font-semibold text-gray-900 mb-2 flex items-center">
+              <svg className="w-5 h-5 mr-2 text-amber-600" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+              Camera Troubleshooting
+            </h3>
+          </div>
+
+          {/* iOS/iPhone Instructions */}
+          {isIOS && (
+            <div className="bg-white rounded-lg p-3 border border-amber-300">
+              <h4 className="font-semibold text-gray-900 mb-2 flex items-center">
+                📱 iPhone/iPad Camera Permissions
+              </h4>
+              <ol className="text-sm text-gray-700 space-y-2 list-decimal list-inside">
+                <li>Open your iPhone <strong>Settings</strong> app</li>
+                <li>Scroll down and tap <strong>Safari</strong> (or <strong>Chrome</strong> if using Chrome)</li>
+                <li>Tap <strong>Camera</strong></li>
+                <li>Select <strong>"Ask"</strong> or <strong>"Allow"</strong></li>
+                <li>Close Settings and return to this page</li>
+                <li>Refresh the page and try scanning again</li>
+              </ol>
+              <div className="mt-3 p-2 bg-blue-50 rounded border border-blue-200">
+                <p className="text-xs text-blue-800">
+                  <strong>Note:</strong> If you previously denied camera access, you must change it in Settings. The browser won't ask again until you do.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Safari-specific */}
+          {isSafari && !isIOS && (
+            <div className="bg-white rounded-lg p-3 border border-amber-300">
+              <h4 className="font-semibold text-gray-900 mb-2 flex items-center">
+                🧭 Safari Camera Permissions
+              </h4>
+              <ol className="text-sm text-gray-700 space-y-2 list-decimal list-inside">
+                <li>Click <strong>Safari</strong> in the menu bar</li>
+                <li>Select <strong>Settings for This Website</strong></li>
+                <li>Find <strong>Camera</strong> and set to <strong>"Allow"</strong></li>
+                <li>Refresh the page and try again</li>
+              </ol>
+            </div>
+          )}
+
+          {/* Chrome/General */}
+          {!isSafari && (
+            <div className="bg-white rounded-lg p-3 border border-amber-300">
+              <h4 className="font-semibold text-gray-900 mb-2 flex items-center">
+                🌐 Chrome/Browser Camera Permissions
+              </h4>
+              <ol className="text-sm text-gray-700 space-y-2 list-decimal list-inside">
+                <li>Look for a camera icon in your browser's address bar</li>
+                <li>Click it and select <strong>"Allow"</strong></li>
+                <li>Or click the lock/info icon next to the URL</li>
+                <li>Find <strong>Camera</strong> permissions and set to <strong>"Allow"</strong></li>
+                <li>Refresh the page and try scanning again</li>
+              </ol>
+            </div>
+          )}
+
+          {/* General Tips */}
+          <div className="bg-white rounded-lg p-3 border border-amber-300">
+            <h4 className="font-semibold text-gray-900 mb-2">💡 Other Common Issues</h4>
+            <ul className="text-sm text-gray-700 space-y-2 list-disc list-inside">
+              <li><strong>Camera in use:</strong> Close other apps/tabs using your camera</li>
+              <li><strong>No camera found:</strong> Make sure your device has a working camera</li>
+              <li><strong>HTTPS required:</strong> Camera access only works on secure (https://) sites</li>
+              <li><strong>Still not working?</strong> Use the "Manual Input" option or click "Check In" buttons in the attendee list below</li>
+            </ul>
+          </div>
+
+          {/* Quick Alternative */}
+          <div className="bg-green-50 rounded-lg p-3 border border-green-300">
+            <h4 className="font-semibold text-green-900 mb-2">✅ Easy Alternative</h4>
+            <p className="text-sm text-green-800">
+              Skip the camera entirely! Just scroll down to the attendee list and click the <strong>"Check In"</strong> button next to each person's name.
+            </p>
+          </div>
+        </div>
+      )}
     </div>
   );
 }