import React from 'react';

function Help() {
  return (
    <main id="page-f" className="page">
      <h1 className="page-title">Help</h1>

      <a
        className="fake-ad"
        href="https://www.kcl.ac.uk/"
        target="_blank"
        rel="noreferrer"
        aria-label="Sponsored: King's College London"
      >
        <div className="fake-ad-badge">Sponsored</div>
        <img src="/assets/111.jpg" alt="King's College London campus sign" />
        <div className="fake-ad-cta">Learn More</div>
      </a>

      <div className="help-container">
        <section className="help-section">
          <h2>How to Use Focus Guard</h2>
          <ol>
            <li>Click "Start" or navigate to "Start Focus" in the menu</li>
            <li>Allow camera access when prompted</li>
            <li>Click the green "Start" button to begin monitoring</li>
            <li>Position yourself in front of the camera</li>
            <li>The system will track your focus in real-time</li>
            <li>Click "Stop" when you're done to save the session</li>
          </ol>
        </section>

        <section className="help-section">
          <h2>What is "Focused"?</h2>
          <p>The system considers you focused when:</p>
          <ul>
            <li>You are clearly visible in the camera frame</li>
            <li>You are centered in the view</li>
            <li>Your face is directed toward the screen</li>
            <li>No other people are detected in the frame</li>
          </ul>
        </section>

        <section className="help-section">
          <h2>Adjusting Settings</h2>
          <p><strong>Frame Rate:</strong> Lower values reduce CPU usage but update less frequently. Recommended: 15-30 FPS.</p>
          <p><strong>Sensitivity:</strong> Higher values require stricter focus criteria. Adjust based on your setup.</p>
        </section>

        <section className="help-section">
          <h2>Privacy & Data</h2>
          <p>All video processing happens in real-time. No video frames are stored - only detection metadata (focus status, timestamps) is saved in your local database.</p>
        </section>

        <section className="help-section">
          <h2>FAQ</h2>
          <details>
            <summary>Why is my focus score low?</summary>
            <p>Ensure good lighting, center yourself in the camera frame, and adjust sensitivity settings in the Customise page.</p>
          </details>
          <details>
            <summary>Can I use this without a camera?</summary>
            <p>No, camera access is required for focus detection.</p>
          </details>
          <details>
            <summary>Does this work on mobile?</summary>
            <p>The app works on mobile browsers but performance may vary due to processing requirements.</p>
          </details>
          <details>
            <summary>Is my data private?</summary>
            <p>Yes! All processing happens locally. Video frames are analyzed in real-time and never stored. Only metadata is saved.</p>
          </details>
        </section>

        <section className="help-section">
          <h2>Technical Info</h2>
          <p><strong>Model:</strong> YOLOv8n (Nano)</p>
          <p><strong>Detection:</strong> Real-time person detection with pose analysis</p>
          <p><strong>Storage:</strong> SQLite local database</p>
          <p><strong>Framework:</strong> FastAPI + Native JavaScript</p>
        </section>
      </div>
    </main>
  );
}

export default Help;