<?php
// akun.php (header/footer diganti: menggunakan header/footer yang sebelumnya ada di detail.php)
require __DIR__ . '/../Login/config.php';
if (session_status() === PHP_SESSION_NONE) session_start();

if (empty($_SESSION['user_id'])) {
    header('Location: ../Login/login.php');
    exit;
}

$role = ucfirst($_SESSION['role'] ?? 'user');
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Akun - Pustakaia</title>
  <style>
    :root{--accent:#069797;}
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: "Poppins", Arial, sans-serif;
      background: #f9f9f9;
      color: #222;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* HEADER — simple white header (dari detail.php original) */
    header{display:flex;justify-content:space-between;align-items:center;padding:15px 30px;background:#fff;border-bottom:1px solid #ddd;position:sticky;top:0;z-index:100;}
    .logo{font-size:20px;font-weight:bold;color:var(--accent);display:flex;align-items:center;gap:10px;}
    .back-btn{font-size:18px;color:var(--accent);margin-right:8px;}

    /* MAIN content */
    main {
      flex: 1;
      padding: 36px 20px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .container {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
    }

    .page-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
    .page-title { font-size:22px; font-weight:700; color:#222; }
    .page-sub { color:#777; font-size:14px; }

    .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
    .card {
      background:#fff; border-radius:8px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,0.06);
      display:flex; flex-direction:column; gap:10px;
    }
    .card h3 { margin:0; font-size:16px; color:#111; }
    .card p { margin:0; color:#777; font-size:14px; }
    .card .note { font-size:13px; color:#666; margin-top:6px; }
    .card .action { margin-top:auto; display:flex; gap:8px; align-items:center; }

    .btn { padding:8px 12px; border-radius:8px; border:0; cursor:pointer; font-weight:600; }
    .btn-primary { background:var(--accent); color:#fff; }
    .btn-outline { background:#fff; border:1px solid var(--accent); color:var(--accent); }

    footer {
      background: #fff;
      padding: 20px 40px;
      font-size: 14px;
      color: #222;
      border-top: 1px solid #ddd;
      margin-top: auto;
    }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 13px; }
    .footer-links a { margin-left: 15px; color: #222; font-weight: 500; text-decoration: none; }
    .footer-links a:hover { text-decoration: underline; }

    @media(max-width:700px){
      header, footer { padding: 14px 18px; }
      main { padding: 20px 12px; }
      .page-header { flex-direction: column; align-items: flex-start; gap:8px; }
    }
  </style>
</head>
<body>
  <!-- HEADER (dari detail.php original — simple white) -->
  <header>
    <div class="logo">
      <a href="books.php" class="back-btn">⬅</a> 📚 Pustakaia
    </div>
  </header>

  <main>
    <div class="container">
      <div class="page-header">
        <div>
          <div class="page-title">Akun & Pengaturan</div>
          <div class="page-sub">Kelola email, ganti kata sandi, dan keamanan akunmu.</div>
        </div>
        <div style="text-align:right;">
          <!-- intentionally empty per request (no avatar / no name) -->
        </div>
      </div>

      <section class="grid">
        <!-- Ganti Email -->
        <div class="card">
          <h3>Ganti Email</h3>
          <p>Ubah alamat email yang terhubung ke akunmu. (Penggantian email tidak perlu konfirmasi email sesuai permintaan.)</p>
          <div class="note">Saran: untuk keamanan, minta password lama sebelum mengganti email.</div>
          <div class="action">
            <a href="../pengaturan/emailakun.php"><button class="btn btn-outline">Ganti Email</button></a>
          </div>
        </div>

        <!-- Ganti Password (butuh konfirmasi via email) -->
        <div class="card">
          <h3>Ganti Password</h3>
          <p>Untuk mengganti password sementara sedang login, sistem akan mengirim link konfirmasi ke emailmu. Klik link di email untuk menyelesaikan penggantian.</p>
          <div class="note">Link konfirmasi akan berlaku 1 jam.</div>
          <div class="action">
            <a href="../pengaturan/verify_password_code.php"><button class="btn btn-primary">Minta Konfirmasi Email</button></a>
          </div>
        </div>

        <!-- Lupa Password -->
        <div class="card">
          <h3>Lupa Password</h3>
          <p>Jika kamu lupa password, gunakan fitur ini untuk mengirim link reset ke email terdaftar. Setelah verifikasi lewat email, kamu dapat membuat password baru.</p>
          <div class="note">Gunakan opsi ini jika tidak bisa login.</div>
          <div class="action">
            <a href="../pengaturan/forgot.php"><button class="btn btn-outline">Reset Lewat Email</button></a>
          </div>
        </div>
      </section>

      <div style="margin-top:18px; color:#666; font-size:13px;">
        Pastikan alamat email di profil aktif agar fitur reset/ganti password berjalan.
      </div>
    </div>
  </main>

  <!-- FOOTER (dari detail.php original) -->
  <footer>
    <div class="footer-bottom">
      <p>© <?= date('Y') ?>, Pustakaia | Website developed by Grup 3</p>
      <div class="footer-links">
        <a href="#">Terms of Use</a>
        <a href="#">Privacy Policy</a>
      </div>
    </div>
  </footer>
</body>
</html>
