<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Preview — main.php UI</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="main.css?v=11.0" />
</head>
<body>
  <div class="background-overlay"></div>
  <div class="form-container">

    <!-- Header Card เหมือน Login -->
    <div class="page-header-card">
      <img src="img/โลโก้กลม.png" alt="Logo" class="header-logo">
      <h1>QUESTIONNAIRE SYSTEM</h1>
      <p class="sub-title">ระบบแบบสอบถามความพึงพอใจ</p>
      <div class="user-info-bar">
        <div class="info-details">
          <div><strong>คุณ:</strong> สมชาย ใจดี</div>
          <div><strong>สาขา:</strong> สาขาเชียงใหม่</div>
          <div><strong>กิจกรรม:</strong> งานออกบูธ เมษายน</div>
        </div>
        <a href="#" class="logout-link">ออกจากระบบ</a>
      </div>
    </div>

    <!-- Progress Steps -->
    <div class="progress-container">
      <div class="progress-steps">
        <span class="step active" data-step="1">1</span>
        <span class="step" data-step="2">2</span>
      </div>
    </div>

    <!-- Question Card 1 (Active) -->
    <div class="question-card active" data-step="1">
      <div class="card-title-section">
        <span class="section-icon">👤</span>
        <h2>ส่วนที่ 1: ข้อมูลทั่วไป</h2>
      </div>

      <div class="form-group">
        <label>เพศ *</label>
        <div class="radio-group-vertical">
          <label><input type="radio" name="gender" value="ชาย"> ชาย</label>
          <label><input type="radio" name="gender" value="หญิง" checked> หญิง</label>
          <label><input type="radio" name="gender" value="LGBTQ+"> LGBTQ+</label>
        </div>
      </div>

      <div class="form-group">
        <label>ปีเกิด (พ.ศ.) *</label>
        <input type="tel" placeholder="เช่น 2543" maxlength="4">
        <small class="inline-hint">กรอกเฉพาะตัวเลขปี พ.ศ.</small>
      </div>

      <div class="form-group">
        <label>อาชีพหลักปัจจุบัน *</label>
        <div class="radio-group-vertical">
          <label><input type="radio" name="job" value="เกษตรกร"> เกษตรกร</label>
          <label><input type="radio" name="job" value="ค้าขาย" checked> ค้าขาย</label>
          <label><input type="radio" name="job" value="รับราชการ"> รับราชการ</label>
        </div>
      </div>

      <div class="form-group">
        <label>เคยใช้บริการที่ บริษัท อีฮงมดแดงมอเตอร์ หรือไม่ *</label>
        <div class="radio-group-vertical">
          <label><input type="radio" name="used" value="เคย" checked> เคย</label>
          <label><input type="radio" name="used" value="ไม่เคย"> ไม่เคย</label>
        </div>
      </div>

      <div class="form-navigation">
        <button type="button" class="next-btn">ถัดไป &rarr;</button>
      </div>
    </div>

    <!-- Question Card 2 (preview, forced visible) -->
    <div class="question-card active" data-step="2" style="margin-top:0;">
      <div class="card-title-section">
        <span class="section-icon">⭐</span>
        <h2>ส่วนที่ 2: ประสบการณ์ และ ข้อมูลติดต่อ</h2>
      </div>

      <div class="form-group">
        <label>ความประทับใจในการใช้บริการกับ บริษัทอีฮงมดแดงมอเตอร์ *</label>
        <table class="likert">
          <tr>
            <th style="text-align:left;">1=น้อยสุด</th>
            <td class="scale" style="text-align:center;">1<br><label class="choice-label"><input type="radio" name="sat" value="1"></label></td>
            <td class="scale" style="text-align:center;">2<br><label class="choice-label"><input type="radio" name="sat" value="2"></label></td>
            <td class="scale" style="text-align:center;">3<br><label class="choice-label"><input type="radio" name="sat" value="3" checked></label></td>
            <td class="scale" style="text-align:center;">4<br><label class="choice-label"><input type="radio" name="sat" value="4"></label></td>
            <td class="scale" style="text-align:center;">5<br><label class="choice-label"><input type="radio" name="sat" value="5"></label></td>
            <th style="text-align:right;">5=มากสุด</th>
          </tr>
        </table>
      </div>

      <div class="form-group">
        <label>จังหวัด ของท่าน *</label>
        <select>
          <option value="">-- กรุณาเลือกจังหวัด --</option>
          <option>เชียงใหม่</option>
          <option>กรุงเทพมหานคร</option>
        </select>
      </div>

      <div class="form-group">
        <label>ชื่อ-นามสกุล *</label>
        <input type="text" placeholder="เช่น กัญจน์ภัทร พัฒน์...">
      </div>

      <div class="form-group">
        <label>เบอร์โทรที่ติดต่อได้ *</label>
        <input type="tel" placeholder="เช่น 08x-xxx-xxxx">
      </div>

      <div class="form-navigation">
        <button type="button" class="prev-btn">&larr; ย้อนกลับ</button>
        <button type="button" class="next-btn">ส่งแบบฟอร์ม 📨</button>
      </div>
    </div>

  </div>
</body>
</html>
