<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Deletion | OneWorld Mart</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f7f8f9;color:#1a1d1f;line-height:1.7}
a{color:#036B45}a:hover{text-decoration:underline}
.container{max-width:600px;margin:0 auto;padding:40px 20px 60px}
.header{text-align:center;margin-bottom:32px}
.header h1{font-size:28px;font-weight:800;color:#024D31;margin-bottom:8px}
.card{background:#fff;border:1px solid #e8eaec;border-radius:16px;padding:28px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.card h2{font-size:18px;font-weight:700;color:#024D31;margin-bottom:12px}
.card p,.card li{font-size:14px;color:#414141;margin-bottom:8px}
label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;margin-top:16px}
input[type="email"],textarea,select{width:100%;padding:12px 16px;border:1px solid #cbd5e1;border-radius:10px;font-size:14px;font-family:inherit;color:#0f172a;background:#fff;transition:border-color .2s}
input:focus,textarea:focus{outline:none;border-color:#036B45;box-shadow:0 0 0 3px rgba(3,107,69,0.12)}
textarea{min-height:80px;resize:vertical}
.checkbox-row{display:flex;align-items:center;gap:10px;margin:16px 0;padding:12px 16px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px}
.checkbox-row input[type="checkbox"]{width:18px;height:18px;accent-color:#dc2626}
.checkbox-row label{font-size:13px;color:#991b1b;margin:0;font-weight:500}
.btn{background:#dc2626;color:#fff;border:none;padding:14px 24px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;width:100%;transition:background .2s}
.btn:hover{background:#b91c1c}
.btn:disabled{background:#94a3b8;cursor:not-allowed}
.alert{padding:14px 18px;border-radius:10px;font-size:14px;margin-bottom:20px}
.alert-success{background:#dcfce7;border:1px solid #bbf7d0;color:#15803d}
.alert-error{background:#fee2e2;border:1px solid #fecaca;color:#b91c1c}
.deleted-banner{text-align:center;padding:40px;background:#f0fdf4;border:2px solid #bbf7d0;border-radius:16px;margin-bottom:20px}
.deleted-banner .icon{font-size:48px;margin-bottom:12px}
.deleted-banner h2{color:#15803d;margin-bottom:8px}
.back-link{display:block;text-align:center;margin-top:20px;font-size:13px;color:#7a7e83}
@media(max-width:600px){.container{padding:20px 16px 40px}.card{padding:20px}}
</style>
</head>
<body>
<div class="container">
    <div class="header">
    <div style="font-size:48px;margin-bottom:8px;">🗑️</div>
    <h1>Account Deletion Request</h1>
    <p style="color:#7a7e83;font-size:14px;">We're sorry to see you go. Please fill out the form below.</p>
  </div>
    <div class="card">
    <p><strong>What happens when you delete your account?</strong></p>
    <ul>
      <li>Your personal information will be permanently removed from our system</li>
      <li>You will lose access to your order history and saved addresses</li>
      <li>Your wishlist will be cleared</li>
      <li>Order records will be retained for legal and tax purposes (as required by law)</li>
      <li>This action cannot be undone</li>
    </ul>
  </div>
  <form method="POST" onsubmit="return validateForm()">
    <div class="card">
      <label for="email">Email Address *</label>
      <input type="email" id="email" name="email" required placeholder="Enter the email you registered with">
      <label for="reason">Reason for leaving (optional)</label>
      <textarea id="reason" name="reason" placeholder="Tell us why you're leaving..."></textarea>
      <div class="checkbox-row">
        <input type="checkbox" id="confirm" name="confirm" value="yes" required>
        <label for="confirm">I understand that this action is permanent and cannot be undone. I want to delete my account and all associated personal data.</label>
      </div>
      <button type="submit" class="btn">🗑️ Request Account Deletion</button>
    </div>
  </form>
  <a href="https://oneworldmart.kr" class="back-link">← Back to OneWorld Mart</a>
  <script>
  function validateForm() {
    const email = document.getElementById('email').value.trim();
    const confirm = document.getElementById('confirm').checked;
    if (!email) { alert('Please enter your email address.'); return false; }
    if (!confirm) { alert('Please confirm that you want to delete your account.'); return false; }
    return confirm('Are you absolutely sure? This will permanently delete your account and personal data.');
  }
  </script>
    <div style="text-align:center;margin-top:20px;font-size:12px;color:#7a7e83;">
    <p>For assistance, contact us at <a href="mailto:martoneworld@gmail.com">martoneworld@gmail.com</a> or <a href="tel:+827086808299">+82 70-8680-8299</a></p>
  </div>
</div>
</body>
</html>
