<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>Smart Expense Planner – Template Preview</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  >
</head>
<body class="light">
  <div class="container">

    <!-- โลโก้ข้อความ -->
    <header>
      <div class="logo">
        <span class="logo-smart">Smart</span>
        <span class="logo-expense">Expense Planner</span>
      </div>
    </header>

    <!-- HERO: แนะนำเทมเพลต -->
    <section class="hero">
      <!-- ฝั่งข้อความ -->
      <div>
        <div class="hero-text-title">
          วางแผนและติดตามรายจ่ายอย่างฉลาด ด้วยแดชบอร์ดเดียว
        </div>
        <div class="hero-text-sub">
          เทมเพลตนี้ออกแบบมาสำหรับการใช้งานส่วนบุคคลหรือธุรกิจเล็ก 
          ช่วยให้คุณเห็นภาพรายรับ–รายจ่าย เทรนด์รายเดือน งบประมาณ และหมวดหมู่ค่าใช้จ่ายในหน้าเดียวแบบอ่านง่าย.
        </div>

        <div class="hero-badges">
          <div class="badge badge-primary">Personal finance dashboard</div>
          <div class="badge">Monthly trend & budget comparison</div>
          <div class="badge">Line & pie charts with Chart.js</div>
        </div>

        <div class="hero-actions">
          <button class="btn-primary">
            ดูตัวอย่างโหมดสว่าง
          </button>
          <button class="btn-secondary">
            ดูตัวอย่างโหมดมืด
          </button>
        </div>
      </div>

      <!-- ฝั่ง preview dashboard -->
      <div class="preview">
        <div class="preview-title">
          Dashboard ตัวอย่างสำหรับ Smart Expense Planner
        </div>

        <div class="preview-card">
          <!-- แถวสรุปยอด -->
          <div class="metric-row">
            <div class="metric">
              <div class="metric-label">รายรับเดือนนี้</div>
              <div class="metric-value income">฿ 15,200</div>
            </div>
            <div class="metric">
              <div class="metric-label">รายจ่ายเดือนนี้</div>
              <div class="metric-value expense">฿ 4,320</div>
            </div>
            <div class="metric">
              <div class="metric-label">คงเหลือโดยประมาณ</div>
              <div class="metric-value">฿ 10,880</div>
            </div>
          </div>

          <!-- แถวกราฟแบบย่อ (placeholder) -->
          <div class="preview-charts">
            <div class="preview-chart-box">
              กราฟเส้น: เทรนด์รายรับ–รายจ่าย รายเดือน
            </div>
            <div class="preview-chart-box">
              กราฟวงกลม: สัดส่วนรายจ่ายตามหมวดหมู่
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- SECTION ฟีเจอร์ของเทมเพลต -->
    <section class="feature-grid">
      <div class="card">
        <div class="feature-title">เทรนด์รายรับ–รายจ่าย รายเดือน</div>
        <div class="feature-desc">
          แสดงกราฟเส้นรายรับและรายจ่ายในแต่ละเดือน เพื่อดูแนวโน้มการเงินของคุณได้ชัดเจน 
          ทั้งในมุมมองปีปัจจุบันและย้อนหลัง.
        </div>
      </div>

      <div class="card">
        <div class="feature-title">งบประมาณ vs ใช้จริง</div>
        <div class="feature-desc">
          ตั้งงบรายจ่ายรายเดือน แล้วดูกราฟเปรียบเทียบกับตัวเลขใช้จริง เพื่อรู้ว่าช่วงไหนใช้เกินหรือใช้ต่ำกว่าที่วางแผน.
        </div>
      </div>

      <div class="card">
        <div class="feature-title">สัดส่วนค่าใช้จ่ายตามหมวดหมู่</div>
        <div class="feature-desc">
          กราฟวงกลมแสดงหมวดหมู่หลัก เช่น อาหาร เดินทาง ช้อปปิ้ง บิล และอื่น ๆ 
          ทำให้เห็นว่าค่าใช้จ่ายส่วนใหญ่ไปอยู่ที่หมวดไหน.
        </div>
      </div>
    </section>

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