spotlightcam/frontend/public/content/how-it-works.html

<style>
  .content-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
  }

  .content-wrapper h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #1f2937;
  }

  .content-wrapper h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #1f2937;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
  }

  .content-wrapper h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #374151;
  }

  .content-wrapper p {
    margin-bottom: 1.25rem;
    color: #4b5563;
  }

  .content-wrapper ol {
    list-style: decimal;
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .content-wrapper ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .content-wrapper li {
    margin-bottom: 0.75rem;
    color: #4b5563;
  }

  .content-wrapper strong {
    font-weight: 600;
    color: #1f2937;
  }

  .content-wrapper a {
    color: #6366f1;
    text-decoration: underline;
  }

  .content-wrapper a:hover {
    color: #4f46e5;
  }

  .content-wrapper hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
  }

  .intro-box {
    background-color: #f0f9ff;
    border-left: 4px solid #6366f1;
    padding: 1.25rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
  }

  .intro-box p {
    margin-bottom: 0;
    color: #1e40af;
  }

  .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: #6366f1;
    color: white;
    border-radius: 50%;
    font-weight: 700;
    margin-right: 0.75rem;
    font-size: 1.125rem;
  }

  .tip-box {
    background-color: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
  }

  .tip-box strong {
    color: #92400e;
  }

  .tip-box p {
    margin-bottom: 0;
    color: #78350f;
  }

  .footer-text {
    font-style: italic;
    color: #6b7280;
    margin-top: 2rem;
    text-align: center;
  }
</style>

<div class="content-wrapper">
  <h1>How It Works</h1>

  <div class="intro-box">
    <p>
      <strong>spotlight.cam</strong> helps dancers at West Coast Swing events find recording partners and exchange competition videos.
      No more running around looking for someone to film your heat – let the platform do the matching for you!
    </p>
  </div>

  <h2>Getting Started</h2>

  <h3><span class="step-number">1</span>Create Your Account</h3>
  <p>
    Register with your email, choose a username, and verify your email address.
    You can optionally link your WSDC ID to auto-fill your profile with competition data from worldsdc.com.
  </p>

  <h3><span class="step-number">2</span>Complete Your Profile</h3>
  <p>
    Add your name, location, and social media links. Upload a profile picture so other dancers can recognize you at the event.
    The more complete your profile, the easier it is to connect with other participants!
  </p>

  <div class="tip-box">
    <p>
      <strong>Beta Testers:</strong> During our beta period, all new registrations automatically receive SUPPORTER status,
      giving you priority in the auto-matching system. Look for the ✨ badge next to your username!
    </p>
  </div>

  <h2>At the Event</h2>

  <h3><span class="step-number">3</span>Check In to the Event</h3>
  <p>
    Find your event in the Events list and click "Check In". This lets other participants know you're at the event and available to help.
    You can check in anytime during the event – even before it officially starts.
  </p>

  <h3><span class="step-number">4</span>Join the Event Chat</h3>
  <p>
    Once checked in, you can join the event chat room. This is where all the magic happens:
  </p>
  <ul>
    <li><strong>See who's at the event</strong> – Active users list updates in real-time</li>
    <li><strong>Coordinate with other dancers</strong> – Ask questions, find partners, share tips</li>
    <li><strong>Get updates</strong> – Organizers might share important announcements</li>
  </ul>

  <h2>Getting Recording Partners</h2>

  <p>There are two ways to get someone to record your heats:</p>

  <h3><span class="step-number">5A</span>Auto-Matching (Recommended)</h3>
  <p>
    If the event organizer has set up competition heats in the system, you can use auto-matching:
  </p>
  <ol>
    <li>Go to the <strong>Recording</strong> tab on the event page</li>
    <li>Browse through your competition heats</li>
    <li>The system will automatically suggest recording partners based on:
      <ul>
        <li>Who's free when you're dancing (they're not competing at the same time)</li>
        <li>Who hasn't been matched yet</li>
        <li>Fair distribution – everyone helps, everyone gets help</li>
      </ul>
    </li>
    <li>Accept a suggestion and you're matched!</li>
  </ol>

  <div class="tip-box">
    <p>
      <strong>Fairness System:</strong> The auto-matching algorithm tracks how many recordings you've done versus received.
      If you help others record, you'll get priority when you need someone to record you. It's all about community karma!
      SUPPORTER and COMFORT tier users get even higher priority.
    </p>
  </div>

  <h3><span class="step-number">5B</span>Manual Match Request</h3>
  <p>
    Prefer to choose your own partner? No problem:
  </p>
  <ol>
    <li>Go to the <strong>Participants</strong> tab</li>
    <li>Click on any participant's name to view their profile</li>
    <li>Click <strong>"Send Match Request"</strong></li>
    <li>Wait for them to accept</li>
  </ol>
  <p>
    You can send match requests to anyone who's checked in to the event. They'll get a notification and can accept or decline.
  </p>

  <h2>Recording & Exchanging Videos</h2>

  <h3><span class="step-number">6</span>Chat with Your Match</h3>
  <p>
    Once matched, you get a private 1:1 chat with your recording partner. Use it to:
  </p>
  <ul>
    <li>Introduce yourselves and confirm you've found each other</li>
    <li>Share your heat times and divisions</li>
    <li>Coordinate where to meet ("I'll be by the judges' table")</li>
    <li>Discuss what you want recorded (full heat, specific couples, angles, etc.)</li>
  </ul>

  <h3><span class="step-number">7</span>Record the Heat</h3>
  <p>
    This is the fun part – you're helping a fellow dancer capture their competition moment!
    Record their heat on your phone, then head back to the platform.
  </p>

  <h3><span class="step-number">8</span>Send the Video (P2P Transfer)</h3>
  <p>
    Here's where spotlight.cam gets technical (in a good way):
  </p>
  <ol>
    <li>In your match chat, click <strong>"Send File"</strong></li>
    <li>Select the video from your phone</li>
    <li>The platform uses WebRTC to send it <strong>directly from your device to theirs</strong></li>
    <li>No uploading to servers, no waiting, no storage limits</li>
    <li>Progress bar shows how the transfer is going</li>
  </ol>

  <div class="tip-box">
    <p>
      <strong>Why P2P?</strong> Your videos never touch our servers – they go straight from your phone to your partner's phone.
      This means faster transfers, better privacy, and no file size limits. We've tested transfers up to 700MB+!
    </p>
  </div>

  <h2>After the Exchange</h2>

  <h3><span class="step-number">9</span>Rate Your Partner</h3>
  <p>
    Once you've exchanged videos, you can rate your experience:
  </p>
  <ul>
    <li>Give them 1-5 stars</li>
    <li>Leave a comment about how it went</li>
    <li>Mark if you'd collaborate again</li>
  </ul>
  <p>
    Ratings help build trust in the community and let others know who's reliable, helpful, and easy to work with.
    Plus, it helps the fairness algorithm work better for everyone!
  </p>

  <h3><span class="step-number">10</span>View Your History</h3>
  <p>
    Check your <strong>History</strong> page to see:
  </p>
  <ul>
    <li>All your past matches and video exchanges</li>
    <li>Ratings you've received from partners</li>
    <li>Your collaboration stats</li>
  </ul>

  <h2>Features Overview</h2>

  <h3>Real-Time Chat</h3>
  <ul>
    <li>Event-wide chat rooms for all participants</li>
    <li>Private 1:1 chats with your matches</li>
    <li>See who's online and active</li>
    <li>Spam protection keeps conversations clean</li>
  </ul>

  <h3>Smart Matching</h3>
  <ul>
    <li>Auto-matching based on heat schedules</li>
    <li>Fairness algorithm ensures everyone helps and gets help</li>
    <li>Account tiers (BASIC, SUPPORTER, COMFORT) with priority matching</li>
    <li>Manual requests for complete control</li>
  </ul>

  <h3>P2P Video Transfer</h3>
  <ul>
    <li>Direct device-to-device transfers using WebRTC</li>
    <li>End-to-end encrypted (your videos are private)</li>
    <li>No file size limits – send full 4K videos if you want</li>
    <li>Progress tracking so you know when it's done</li>
  </ul>

  <h3>Public Profiles</h3>
  <ul>
    <li>See other dancers' profiles, ratings, and stats</li>
    <li>Link your social media (YouTube, Instagram, Facebook, TikTok)</li>
    <li>Build your reputation as a reliable recording partner</li>
  </ul>

  <hr>

  <h2>Tips for Success</h2>

  <ul>
    <li><strong>Check in early</strong> – The sooner you check in, the more time the system has to match you</li>
    <li><strong>Be responsive</strong> – Check your match requests and chat messages regularly</li>
    <li><strong>Communicate clearly</strong> – Use the chat to coordinate meetup spots and timing</li>
    <li><strong>Help others first</strong> – The karma system rewards those who contribute to the community</li>
    <li><strong>Rate your partners</strong> – It takes 30 seconds and helps everyone</li>
    <li><strong>Keep your phone charged</strong> – WebRTC transfers can use battery, especially for large files</li>
  </ul>

  <h2>Need Help?</h2>

  <p>
    If you run into any issues or have questions, check out:
  </p>
  <ul>
    <li><a href="/about-us">About Us</a> – Learn more about the platform</li>
    <li><a href="/contact">Contact Us</a> – Get in touch with our support team</li>
    <li><a href="/privacy">Privacy Policy</a> – Understand how we protect your data</li>
  </ul>

  <p class="footer-text">
    Ready to get started? <a href="/register">Create your account</a> and join the community!
  </p>
</div>