<%- include('partials/header') %>

<main>
  <section class="hero">
    <div class="container hero-grid">
      <div>
        <div class="eyebrow">Sleep intelligence for real life</div>
        <h1>Optimize Your Sleep. Balance Your Day.</h1>
        <p class="lead">RestRight helps students and professionals build a realistic sleep plan that fits around classes, work, travel, and personal routines without sacrificing recovery.</p>

        <div class="hero-actions">
          <a href="/register" class="btn btn-primary">Get Started</a>
          <a href="#features" class="btn btn-ghost">Explore Features</a>
        </div>

        <div class="metrics">
          <div class="metric">
            <strong>92%</strong>
            <span>compatibility score</span>
          </div>
          <div class="metric">
            <strong>8 hrs</strong>
            <span>target sleep goal</span>
          </div>
          <div class="metric">
            <strong>24/7</strong>
            <span>daily optimization</span>
          </div>
        </div>
      </div>

      <div class="hero-panel">
        <div class="sleep-card">
          <div class="time-row">
            <strong>Recommended sleep</strong>
            <span class="time-pill">Tonight</span>
          </div>
          <div class="time-row">
            <span>Bedtime</span>
            <strong>10:30 PM</strong>
          </div>
          <div class="time-row">
            <span>Wake-up</span>
            <strong>6:30 AM</strong>
          </div>
        </div>

        <div class="score-ring"><span>92%</span></div>

        <div class="panel-list">
          <div class="list-item">
            <span>Morning lecture</span>
            <strong>07:00 AM</strong>
          </div>
          <div class="list-item">
            <span>Project deadline</span>
            <strong>09:30 AM</strong>
          </div>
          <div class="list-item">
            <span>Travel buffer</span>
            <strong>20 min</strong>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="features" class="section">
    <div class="container">
      <div class="section-header">
        <div>
          <div class="eyebrow">Features</div>
          <h2>Designed for stress-free planning</h2>
        </div>
      </div>

      <div class="feature-grid">
        <article class="card">
          <div class="feature-icon">💡</div>
          <h3>Smart Sleep Recommendations</h3>
          <p>Generate personalized bedtime and wake-up suggestions using your schedule, sleep needs, and priorities.</p>
        </article>

        <article class="card">
          <div class="feature-icon">📅</div>
          <h3>Daily Commitment Management</h3>
          <p>Track classes, work sessions, travel time, and preparation windows in an organized planning view.</p>
        </article>

        <article class="card">
          <div class="feature-icon">🧠</div>
          <h3>Sleep Schedule Optimization</h3>
          <p>Balance commitments, avoid conflicts, and choose the schedule with the strongest overall fit.</p>
        </article>

        <article class="card">
          <div class="feature-icon">🎯</div>
          <h3>Personalized Recommendations</h3>
          <p>Adjust for preferred wake times, daily patterns, and priority-level commitments to fit your lifestyle.</p>
        </article>
      </div>
    </div>
  </section>
</main>

<%- include('partials/footer') %>
