✏️ Editing: index.html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STAR4Hire — AI Career Assessment</title>
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script>emailjs.init("E8vMg1mtKKxfTEWVY");</script>
<style>
  :root {
    --navy:   #1A3C6E;
    --teal:   #00A896;
    --gold:   #F5A623;
    --pink:   #E91E8C;
    --dark:   #0D1B2A;
    --mid:    #152234;
    --surface:#1C2E42;
    --border: rgba(255,255,255,0.08);
    --text:   #E8EDF2;
    --muted:  #7A8FA6;
    --lgray:  #F4F6F9;
  }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    background: var(--dark);
    color: var(--text);
    min-height: 100vh;
  }

/* ── HEADER ── */
  .header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--dark) 100%);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .logo { font-size: 20px; font-weight: 900; color: var(--teal); letter-spacing: -0.02em; }
  .logo span { color: var(--gold); }
  .tagline { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; }

/* ── PROGRESS BAR ── */
  .progress-wrap {
    background: var(--mid);
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
  }
  .progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .progress-bar {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
  }
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--gold));
    border-radius: 2px;
    transition: width 0.5s ease;
  }
  .step-dots {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .step-dot {
    width: 28px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
    transition: background 0.3s;
  }
  .step-dot.done { background: var(--teal); }
  .step-dot.active { background: var(--gold); }

/* ── MAIN ── */
  .main {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 20px 80px;
  }

/* ── MODULE HEADER ── */
  .module-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,168,150,0.15);
    border: 1px solid rgba(0,168,150,0.3);
    color: var(--teal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
  }
  .module-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }
  .module-sub {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 28px;
  }

/* ── QUESTION ── */
  .question-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: border-color 0.3s;
  }
  .question-block:focus-within {
    border-color: rgba(0,168,150,0.4);
  }
  .question-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .question-label .req { color: var(--pink); }
  .question-hint {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 12px;
    line-height: 1.5;
  }

/* Inputs */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], select, textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 12px 14px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--teal);
    background: rgba(0,168,150,0.05);
  }
  textarea { resize: vertical; min-height: 80px; }
  select option { background: var(--surface); }

/* Radio / Checkbox options */
  .options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .options-grid.single { grid-template-columns: 1fr; }
  .option-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    padding: 10px 14px;
    text-align: left;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .option-btn:hover { border-color: var(--teal); color: var(--text); }
  .option-btn.selected {
    background: rgba(0,168,150,0.12);
    border-color: var(--teal);
    color: var(--text);
  }
  .option-btn .check {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--muted);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px;
    transition: all 0.2s;
  }
  .option-btn.selected .check {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
  }

/* Scale */
  .scale-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .scale-btn {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 4px;
    text-align: center;
    transition: all 0.2s;
  }
  .scale-btn:hover { border-color: var(--teal); color: var(--text); }
  .scale-btn.selected {
    background: rgba(0,168,150,0.2);
    border-color: var(--teal);
    color: var(--teal);
  }
  .scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--muted);
    margin-top: 6px;
  }

/* ── NAVIGATION ── */
  .nav {
    display: flex;
    gap: 10px;
    margin-top: 28px;
  }
  .btn {
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 24px;
    transition: all 0.2s;
  }
  .btn-primary {
    background: var(--teal);
    color: #fff;
    flex: 1;
  }
  .btn-primary:hover { background: #009688; transform: translateY(-1px); }
  .btn-primary:disabled { background: var(--muted); cursor: not-allowed; transform: none; }
  .btn-secondary {
    background: rgba(255,255,255,0.06);
    color: var(--muted);
    border: 1px solid var(--border);
  }
  .btn-secondary:hover { background: rgba(255,255,255,0.1); color: var(--text); }

/* ── AI ANALYZING ── */
  .analyzing {
    display: none;
    text-align: center;
    padding: 48px 24px;
  }
  .analyzing.active { display: block; }
  .analyzing-icon {
    font-size: 48px;
    margin-bottom: 16px;
    animation: pulse 1.5s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
  }
  .analyzing-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .analyzing-sub { font-size: 13px; color: var(--muted); }
  .analyzing-steps {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .analyzing-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.5s;
  }
  .analyzing-step.show {
    opacity: 1;
    transform: none;
  }
  .step-icon { font-size: 16px; }

/* ── RESULT ── */
  .result { display: none; }
  .result.active { display: block; }

.result-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--mid) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
  }
  .result-header::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(0,168,150,0.2) 0%, transparent 70%);
  }
  .result-name {
    font-size: 11px;
    color: var(--teal);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
  }
  .result-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
  }
  .result-id {
    font-size: 11px;
    color: var(--muted);
    font-family: monospace;
  }

.score-display {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
  }
  .score-circle {
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 3px solid var(--teal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0,168,150,0.1);
  }
  .score-number { font-size: 24px; font-weight: 900; color: var(--teal); }
  .score-label { font-size: 9px; color: var(--muted); letter-spacing: 0.05em; }
  .score-info { flex: 1; }
  .score-level { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
  .score-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }

.result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 14px;
  }
  .result-card-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 0.1em;
    margin-bottom: 12px;
  }
  .result-card p {
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
  }

.dimension-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .dim-label { font-size: 12px; color: var(--text); width: 140px; flex-shrink: 0; }
  .dim-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; }
  .dim-bar { height: 100%; border-radius: 3px; transition: width 1s ease; }
  .dim-score { font-size: 12px; color: var(--muted); width: 32px; text-align: right; flex-shrink: 0; }

.pathway-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245,166,35,0.15);
    border: 1px solid rgba(245,166,35,0.3);
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    margin: 4px;
  }

.skill-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .skill-item:last-child { border-bottom: none; }
  .skill-priority {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .priority-high { background: rgba(233,30,140,0.2); color: var(--pink); }
  .priority-med { background: rgba(245,166,35,0.2); color: var(--gold); }
  .priority-low { background: rgba(0,168,150,0.2); color: var(--teal); }

.email-status {
    background: rgba(0,168,150,0.1);
    border: 1px solid rgba(0,168,150,0.3);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
  }
  .email-status.error {
    background: rgba(233,30,140,0.1);
    border-color: rgba(233,30,140,0.3);
  }

/* ── WELCOME SCREEN ── */
  .welcome {
    text-align: center;
    padding: 40px 0;
  }
  .welcome-icon { font-size: 56px; margin-bottom: 20px; }
  .welcome h1 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }
  .welcome h1 span { color: var(--teal); }
  .welcome p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto 28px;
  }
  .welcome-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 32px;
    text-align: left;
  }
  .welcome-feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .feature-icon { font-size: 20px; flex-shrink: 0; }
  .feature-text { font-size: 12px; line-height: 1.5; }
  .feature-text strong { display: block; color: var(--text); margin-bottom: 2px; font-size: 13px; }
  .feature-text span { color: var(--muted); }
  .time-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245,166,35,0.1);
    border: 1px solid rgba(245,166,35,0.3);
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
  }

/* Responsive */
  @media (max-width: 480px) {
    .options-grid { grid-template-columns: 1fr; }
    .welcome-features { grid-template-columns: 1fr; }
    .module-title { font-size: 20px; }
    .scale-btn { padding: 8px 2px; font-size: 12px; }
  }
</style>
</head>
<body>

<div class="header">
  <div>
    <div class="logo">STAR<span>4</span>Hire</div>
    <div class="tagline">CAREER ARCHITECTURE COMPANY</div>
  </div>
</div>

<div class="progress-wrap" id="progressSection" style="display:none">
  <div class="progress-meta">
    <span id="progressLabel">Modul 1 dari 5</span>
    <span id="progressPct">0%</span>
  </div>
  <div class="progress-bar">
    <div class="progress-fill" id="progressFill" style="width:0%"></div>
  </div>
  <div class="step-dots" id="stepDots"></div>
</div>

<div class="main">
  
  <div id="screen-welcome" class="welcome">
    <div class="welcome-icon">🌟</div>
    <h1>AI Career <span>Assessment</span></h1>
    <p>Sistem penilaian karier cerdas STAR4Hire yang menganalisis profil, aspirasi, dan kesiapan karier kamu — menghasilkan rekomendasi jalur yang personal dan terverifikasi.</p>
    <div class="time-badge">⏱️ Estimasi 15–20 menit</div>
    <div class="welcome-features">
      <div class="welcome-feature">
        <div class="feature-icon">🧭</div>
        <div class="feature-text">
          <strong>Career Pathway Discovery</strong>
          <span>Temukan jalur karier yang paling cocok untuk profil dan tujuanmu</span>
        </div>
      </div>
      <div class="welcome-feature">
        <div class="feature-icon">🗣️</div>
        <div class="feature-text">
          <strong>English Proficiency Analysis</strong>
          <span>Estimasi level CEFR dan rekomendasi GEG track</span>
        </div>
      </div>
      <div class="welcome-feature">
        <div class="feature-icon">🧠</div>
        <div class="feature-text">
          <strong>Character Assessment</strong>
          <span>5 dimensi kesiapan karier internasional</span>
        </div>
      </div>
      <div class="welcome-feature">
        <div class="feature-icon">📊</div>
        <div class="feature-text">
          <strong>Career Readiness Score</strong>
          <span>Skor 0–100 dengan breakdown detail dan skill roadmap</span>
        </div>
      </div>
    </div>
    <button class="btn btn-primary" onclick="startAssessment()" style="max-width:320px;width:100%">
      Mulai Assessment →
    </button>
    <p style="font-size:11px;color:var(--muted);margin-top:12px">
      Hasil akan dikirim otomatis ke email kamu dan tim STAR4Hire
    </p>
  </div>

<div id="screen-modules" style="display:none">
    <div class="module-badge" id="moduleBadge">📋 Modul 1</div>
    <div class="module-title" id="moduleTitle">Title</div>
    <div class="module-sub" id="moduleSub">Subtitle</div>
    <div id="questionsContainer"></div>
    <div class="nav">
      <button class="btn btn-secondary" id="btnBack" onclick="goBack()" style="display:none">← Kembali</button>
      <button class="btn btn-primary" id="btnNext" onclick="goNext()">Lanjut →</button>
    </div>
  </div>

<div id="screen-analyzing" class="analyzing">
    <div class="analyzing-icon">🤖</div>
    <div class="analyzing-title">AI sedang menganalisis profilmu...</div>
    <div class="analyzing-sub">Mohon tunggu sebentar</div>
    <div class="analyzing-steps">
      <div class="analyzing-step" id="step1">
        <span class="step-icon">🔍</span>
        <span>Menganalisis profil dan latar belakang...</span>
      </div>
      <div class="analyzing-step" id="step2">
        <span class="step-icon">🗣️</span>
        <span>Menilai kemampuan bahasa Inggris...</span>
      </div>
      <div class="analyzing-step" id="step3">
        <span class="step-icon">🧠</span>
        <span>Mengevaluasi dimensi karakter...</span>
      </div>
      <div class="analyzing-step" id="step4">
        <span class="step-icon">🌍</span>
        <span>Mencocokkan dengan jalur karier global...</span>
      </div>
      <div class="analyzing-step" id="step5">
        <span class="step-icon">📧</span>
        <span>Mengirim hasil ke email...</span>
      </div>
    </div>
  </div>

<div id="screen-result" class="result">
    <div class="result-header">
      <div class="result-name" id="resultName">CAREER ASSESSMENT RESULT</div>
      <div class="result-title" id="resultTitle">Nama Peserta</div>
      <div class="result-id" id="resultId">ID: S4H-2026-XXXX</div>
      <div class="score-display">
        <div class="score-circle">
          <div class="score-number" id="scoreNumber">0</div>
          <div class="score-label">SCORE</div>
        </div>
        <div class="score-info">
          <div class="score-level" id="scoreLevel">Career Readiness Level</div>
          <div class="score-desc" id="scoreDesc">Deskripsi level</div>
        </div>
      </div>
    </div>

<div id="emailStatusBox" class="email-status">
      <span style="font-size:20px">📧</span>
      <span id="emailStatusText">Hasil telah dikirim ke email kamu dan tim STAR4Hire</span>
    </div>

<div style="background:rgba(245,166,35,0.08);border:1px solid rgba(245,166,35,0.25);border-radius:10px;padding:14px 16px;margin-bottom:16px;font-size:12px;color:var(--muted);line-height:1.6">
      ⚠️ <strong style="color:var(--gold)">Catatan Penting:</strong> Hasil ini adalah <strong style="color:var(--text)">estimasi awal</strong> berdasarkan self-assessment. Penilaian lebih akurat dan mendalam akan dilakukan bersama Anggi & PIC saat <strong style="color:var(--teal)">Screen Interview</strong> — tim kami akan menghubungi dalam 1×24 jam.
    </div>

<div class="result-card">
      <div class="result-card-title">📊 CAREER READINESS — 5 DIMENSI KARAKTER</div>
      <div id="dimensionBars"></div>
    </div>

<div class="result-card">
      <div class="result-card-title">🗣️ ENGLISH PROFICIENCY</div>
      <p id="englishResult"></p>
    </div>

<div class="result-card">
      <div class="result-card-title">🧭 REKOMENDASI CAREER PATHWAY</div>
      <div id="pathwayResult"></div>
    </div>

<div class="result-card">
      <div class="result-card-title">📚 SKILL ADD-ON PRIORITAS</div>
      <div id="skillResult"></div>
    </div>

<div class="result-card">
      <div class="result-card-title">💬 PESAN DARI TIM STAR4Hire</div>
      <p id="personalMessage" style="line-height:1.7;font-size:14px"></p>
    </div>

<div style="text-align:center;margin-top:28px;padding:20px;background:var(--surface);border-radius:12px;border:1px solid var(--border)">
      <p style="font-size:13px;color:var(--muted);margin-bottom:12px">Tim STAR4Hire akan menghubungi kamu dalam <strong style="color:var(--gold)">1×24 jam</strong> untuk sesi Screen Interview bersama Anggi & PIC.</p>
      <p style="font-size:11px;color:var(--muted)">PT Sarana Cahaya Bintang · star4hire.com · From Indonesia. For the World.</p>
    </div>
  </div>
</div>

// ── STATE ────────────────────────────────────────────────────────────────────
let currentModule = 0;
let answers = {};
const TEAM_EMAIL = "team@star4hire.com"; // Ganti dengan email tim STAR4Hire

// ── INIT ─────────────────────────────────────────────────────────────────────
function startAssessment() {
  document.getElementById('screen-welcome').style.display = 'none';
  document.getElementById('screen-modules').style.display = 'block';
  document.getElementById('progressSection').style.display = 'block';
  buildStepDots();
  renderModule(0);
}

function updateProgress() {
  const total = MODULES.length;
  const pct = Math.round((currentModule / total) * 100);
  document.getElementById('progressFill').style.width = pct + '%';
  document.getElementById('progressPct').textContent = pct + '%';
  document.getElementById('progressLabel').textContent = `Modul ${currentModule + 1} dari ${total}`;

MODULES.forEach((_, i) => {
    const dot = document.getElementById(`dot-${i}`);
    dot.className = 'step-dot' + (i < currentModule ? ' done' : i === currentModule ? ' active' : '');
  });
}

// ── RENDER MODULE ─────────────────────────────────────────────────────────────
function renderModule(idx) {
  const mod = MODULES[idx];
  document.getElementById('moduleBadge').textContent = mod.badge;
  document.getElementById('moduleTitle').textContent = mod.title;
  document.getElementById('moduleSub').textContent = mod.sub;
  document.getElementById('btnBack').style.display = idx === 0 ? 'none' : 'block';
  document.getElementById('btnNext').textContent = idx === MODULES.length - 1 ? 'Kirim & Analisis ✨' : 'Lanjut →';

const container = document.getElementById('questionsContainer');
  container.innerHTML = '';

mod.questions.forEach(q => {
    const block = document.createElement('div');
    block.className = 'question-block';

let html = `<div class="question-label">${q.label}${q.required ? '<span class="req">*</span>' : ''}</div>`;
    if (q.hint) html += `<div class="question-hint">${q.hint}</div>`;

const saved = answers[q.id];

if (q.type === 'text' || q.type === 'email' || q.type === 'tel' || q.type === 'number') {
      html += `<input type="${q.type}" id="q_${q.id}" placeholder="${q.placeholder || ''}" value="${saved || ''}" oninput="saveAnswer('${q.id}', this.value)">`;
    } else if (q.type === 'textarea') {
      html += `<textarea id="q_${q.id}" placeholder="${q.placeholder || ''}" oninput="saveAnswer('${q.id}', this.value)">${saved || ''}</textarea>`;
    } else if (q.type === 'select') {
      html += `<select id="q_${q.id}" onchange="saveAnswer('${q.id}', this.value)"><option value="">Pilih...</option>`;
      q.options.forEach(opt => {
        html += `<option value="${opt}" ${saved === opt ? 'selected' : ''}>${opt}</option>`;
      });
      html += `</select>`;
    } else if (q.type === 'radio') {
      html += `<div class="options-grid single">`;
      q.options.forEach((opt, i) => {
        const isSelected = saved === opt;
        html += `<button type="button" class="option-btn ${isSelected ? 'selected' : ''}" onclick="selectOption('${q.id}', '${opt.replace(/'/g,"\\'")}', this, false)">
          <div class="check">${isSelected ? '✓' : ''}</div>
          ${opt}
        </button>`;
      });
      html += `</div>`;
    } else if (q.type === 'multi') {
      const savedArr = Array.isArray(answers[q.id]) ? answers[q.id] : [];
      html += `<div class="options-grid single multi-select-group" data-id="${q.id}">`;
      q.options.forEach((opt, i) => {
        const isSelected = savedArr.includes(opt);
        html += `<button type="button" class="option-btn ${isSelected ? 'selected' : ''}" onclick="selectMulti('${q.id}', '${opt.replace(/'/g,"\\'")}', this)">
          <div class="check" style="border-radius:4px">${isSelected ? '✓' : ''}</div>
          ${opt}
        </button>`;
      });
      html += `</div>`;
      html += `<div style="font-size:11px;color:var(--teal);margin-top:8px" id="multi-count-${q.id}">
        ${savedArr.length > 0 ? savedArr.length + ' dipilih' : ''}
      </div>`;
    } else if (q.type === 'scale') {
      html += `<div class="scale-wrap">`;
      for (let v = q.min; v <= q.max; v++) {
        html += `<button type="button" class="scale-btn ${saved == v ? 'selected' : ''}" onclick="selectScale('${q.id}', ${v}, this)">${v}</button>`;
      }
      html += `</div><div class="scale-labels"><span>${q.min} = Rendah</span><span>${q.max} = Tinggi</span></div>`;
    }

block.innerHTML = html;
    container.appendChild(block);
  });

updateProgress();
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

// ── ANSWER HANDLERS ───────────────────────────────────────────────────────────
function saveAnswer(id, value) { answers[id] = value; }

function selectOption(id, value, btn, multi) {
  answers[id] = value;
  const parent = btn.closest('.options-grid');
  parent.querySelectorAll('.option-btn').forEach(b => {
    b.classList.remove('selected');
    b.querySelector('.check').textContent = '';
  });
  btn.classList.add('selected');
  btn.querySelector('.check').textContent = '✓';
}

function selectScale(id, value, btn) {
  answers[id] = value;
  btn.closest('.scale-wrap').querySelectorAll('.scale-btn').forEach(b => b.classList.remove('selected'));
  btn.classList.add('selected');
}

// ── NAVIGATION ────────────────────────────────────────────────────────────────
function goNext() {
  if (!validateModule()) return;
  if (currentModule < MODULES.length - 1) {
    currentModule++;
    renderModule(currentModule);
  } else {
    submitAssessment();
  }
}

function goBack() {
  if (currentModule > 0) {
    currentModule--;
    renderModule(currentModule);
  }
}

// ── SUBMIT & AI ANALYSIS ─────────────────────────────────────────────────────
function submitAssessment() {
  document.getElementById('screen-modules').style.display = 'none';
  document.getElementById('progressSection').style.display = 'none';
  document.getElementById('screen-analyzing').classList.add('active');

// Animate steps
  const steps = ['step1','step2','step3','step4','step5'];
  steps.forEach((id, i) => {
    setTimeout(() => {
      document.getElementById(id).classList.add('show');
    }, i * 1000);
  });

// Call AI Analysis
  setTimeout(() => {
    analyzeWithAI();
  }, 1500);
}

async function analyzeWithAI() {
  const systemPrompt = `Kamu adalah AI Career Counselor STAR4Hire — Career Architecture Company dari Indonesia.

Analisis data assessment peserta dan hasilkan Career Record dalam format JSON dengan struktur berikut:

{
  "career_readiness_score": <number 0-100>,
  "score_level": <"Tahap Awal"|"Sedang Berkembang"|"Cukup Siap"|"Siap dengan Persiapan"|"Sangat Siap">,
  "score_desc": <string singkat deskripsi — selalu encouraging, JANGAN langsung sebut peserta siap tanpa reservasi karena ini masih penilaian awal>,
  "english_cefr": <"A1"|"A2"|"B1"|"B2"|"C1">,
  "english_summary": <string analisis bahasa Inggris 2-3 kalimat>,
  "geg_track": <string rekomendasi GEG track>,
  "character_scores": {
    "adaptability": <1-10>,
    "initiative": <1-10>,
    "resilience": <1-10>,
    "collaboration": <1-10>,
    "communication": <1-10>
  },
  "character_narrative": <string narasi karakter 2-3 kalimat>,
  "primary_pathway": <string program utama yang paling cocok>,
  "alternative_pathway": <string program alternatif>,
  "pathway_reason": <string alasan 2-3 kalimat>,
  "skill_addons": [
    {"name": <string>, "priority": <"high"|"medium"|"low">, "reason": <string singkat>}
  ],
  "personal_message": <string pesan personal 3-4 kalimat — hangat dan encouraging tapi realistis, sampaikan bahwa ini adalah langkah awal dan tim akan mendampingi lebih lanjut>,
  "timeline_realistic": <string estimasi timeline realistis>,
  "key_strengths": [<string>, <string>, <string>],
  "areas_to_develop": [<string>, <string>]
}

PENTING: Hasilkan HANYA JSON murni tanpa teks lain, tanpa backtick, tanpa penjelasan. Pastikan semua string dalam JSON tidak mengandung karakter newline atau kutip ganda yang tidak di-escape. Score maksimal realistis adalah 75 karena ini assessment awal — verifikasi lebih dalam dilakukan saat Screen Interview.`;

const negaraList = Array.isArray(answers.tujuan_negara) ? answers.tujuan_negara.join(', ') : (answers.tujuan_negara || '-');
  const industriList = Array.isArray(answers.industri) ? answers.industri.join(', ') : (answers.industri || '-');
  const hasUK = Array.isArray(answers.tujuan_negara)
    ? answers.tujuan_negara.some(n => n.includes('UK'))
    : (answers.tujuan_negara || '').includes('UK');

const userMessage = `Data Assessment Peserta:
Nama: ${answers.nama || '-'}
Email: ${answers.email || '-'}
Usia: ${answers.usia || '-'}
Domisili: ${answers.domisili || '-'}
Pendidikan: ${answers.pendidikan || '-'}
Jurusan: ${answers.jurusan || '-'}
Status Kerja: ${answers.status_kerja || '-'}

ASPIRASI:
Negara Tujuan (pilihan peserta): ${negaraList}
${hasUK ? 'INSTRUKSI KHUSUS: Peserta memilih UK. JANGAN sebut UK sebagai tujuan pasti di primary_pathway. Dalam pathway_reason, sampaikan bahwa tim STAR4Hire akan menganalisis latar belakang peserta dan menyarankan negara yang paling sesuai — UK bisa menjadi salah satu yang dipertimbangkan tergantung profil dan kondisi.' : ''}
Program STAR4Hire yang Diminati: ${answers.program_star4hire || '-'}
Industri Minat (pilihan peserta): ${industriList}
Timeline: ${answers.timeline || '-'}
Motivasi: ${(answers.motivasi || '-').replace(/"/g,"'").replace(/\n/g,' ')}
Hambatan: ${(answers.hambatan || '-').replace(/"/g,"'").replace(/\n/g,' ')}

ENGLISH:
Self-assessment Level: ${answers.english_level || '-'}
Listening Score: ${answers.english_listening || '-'}/5
Speaking Confidence: ${answers.english_speaking || '-'}/5
Pengalaman English: ${answers.english_exp || '-'}
English Essay: ${(answers.english_essay || '-').replace(/"/g,"'").replace(/\n/g,' ')}

KARAKTER:
Adaptability: ${answers.adaptability || '-'}/5
Initiative Style: ${answers.initiative || '-'}
Resilience: ${answers.resilience || '-'}
Collaboration: ${answers.collaboration || '-'}/5
Communication Confidence: ${answers.communication || '-'}/5
Situasi Sulit: ${(answers.situation || '-').replace(/"/g,"'").replace(/\n/g,' ')}

KESIAPAN:
Status Paspor: ${answers.paspor || '-'}
Dokumen: ${answers.ijazah || '-'}
Budget: ${answers.budget || '-'}
Dukungan Keluarga: ${answers.keluarga || '-'}
Komitmen: ${answers.komitmen || '-'}/5
Pertanyaan: ${(answers.pertanyaan || '-').replace(/"/g,"'").replace(/\n/g,' ')}

Hasilkan JSON murni tanpa teks lain.`;

try {
    const response = await fetch("https://api.anthropic.com/v1/messages", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        model: "claude-sonnet-4-6",
        max_tokens: 1500,
        system: systemPrompt,
        messages: [{ role: "user", content: userMessage }]
      })
    });

const data = await response.json();
    const text = data.content?.[0]?.text || '';

// Robust JSON extraction — multiple strategies
    let result = null;

// Strategy 1: find JSON block between { }
    const jsonMatch = text.match(/\{[\s\S]*\}/);
    if (jsonMatch) {
      try {
        // Clean common issues: trailing commas, unescaped newlines in strings
        let cleaned = jsonMatch[0]
          .replace(/,\s*([}\]])/g, '$1')          // trailing commas
          .replace(/([^\\])\n/g, '$1 ')            // newlines in strings
          .replace(/\t/g, ' ');                    // tabs
        result = JSON.parse(cleaned);
      } catch(e1) {
        // Strategy 2: field-by-field extraction if JSON parse fails
        result = extractFieldsFromText(text);
      }
    } else {
      result = extractFieldsFromText(text);
    }

if (!result) result = getFallbackResult();
    await sendEmails(result);
    showResult(result);
  } catch (err) {
    console.error(err);
    showResult(getFallbackResult());
  }
}

// ── FIELD EXTRACTOR FALLBACK ──────────────────────────────────────────────────
function extractFieldsFromText(text) {
  // Try to extract individual fields using regex when full JSON parse fails
  try {
    const getNum = (key) => {
      const m = text.match(new RegExp(`"${key}"\\s*:\\s*(\\d+)`));
      return m ? parseInt(m[1]) : null;
    };
    const getStr = (key) => {
      const m = text.match(new RegExp(`"${key}"\\s*:\\s*"([^"]{1,300})"`));
      return m ? m[1] : null;
    };
    return {
      career_readiness_score: getNum('career_readiness_score') || 55,
      score_level: getStr('score_level') || 'Sedang Berkembang',
      score_desc: getStr('score_desc') || 'Hasil ini adalah estimasi awal berdasarkan assessment. Tim STAR4Hire akan mendampingi lebih lanjut.',
      english_cefr: getStr('english_cefr') || 'B1',
      english_summary: getStr('english_summary') || 'Kemampuan bahasa Inggris akan dianalisis lebih detail saat sesi GEG assessment.',
      geg_track: getStr('geg_track') || 'GEG Standard Track',
      character_scores: {
        adaptability: getNum('adaptability') || 6,
        initiative: getNum('initiative') || 6,
        resilience: getNum('resilience') || 6,
        collaboration: getNum('collaboration') || 6,
        communication: getNum('communication') || 6,
      },
      character_narrative: getStr('character_narrative') || 'Profil karakter akan dikaji lebih mendalam bersama Anggi pada sesi Screen Interview.',
      primary_pathway: getStr('primary_pathway') || answers.program_star4hire || 'Perlu diskusi lebih lanjut dengan PIC',
      alternative_pathway: getStr('alternative_pathway') || 'GEG sebagai starting point',
      pathway_reason: getStr('pathway_reason') || 'Rekomendasi final akan diberikan setelah Screen Interview bersama tim STAR4Hire.',
      skill_addons: [
        { name: 'GEG — Global English Gateway', priority: 'high', reason: 'Fondasi wajib semua program internasional' },
        { name: 'Career Intelligence & Personal Branding', priority: 'medium', reason: 'Esensial untuk kesiapan karier global' },
      ],
      personal_message: `Hei ${answers.nama}, terima kasih sudah menyelesaikan assessment ini! Ini adalah langkah pertama yang penting dalam perjalanan kariermu bersama STAR4Hire. Tim kami akan menghubungi kamu dalam 1x24 jam untuk sesi Screen Interview — di sana kita akan membahas hasil ini lebih mendalam dan merancang Career Record yang benar-benar personal untukmu.`,
      timeline_realistic: 'Timeline akan ditentukan bersama setelah Screen Interview dengan Anggi & PIC.',
      key_strengths: ['Komitmen untuk berkembang', 'Keberanian mengambil langkah pertama', 'Keterbukaan terhadap peluang global'],
      areas_to_develop: ['Kemampuan bahasa Inggris', 'Skill teknis sesuai industri target'],
    };
  } catch(e) {
    return null;
  }
}

// ── SEND EMAILS ───────────────────────────────────────────────────────────────
async function sendEmails(result) {
  // Generate unique ID
  const year = new Date().getFullYear();
  const id = `S4H-${year}-${Math.floor(Math.random()*9000+1000)}`;
  answers._id = id;
  
    const negaraStr = Array.isArray(answers.tujuan_negara)
    ? answers.tujuan_negara.join(', ') : (answers.tujuan_negara || '-');
  const industriStr = Array.isArray(answers.industri)
    ? answers.industri.join(', ') : (answers.industri || '-');

const templateParams = {
    // Identitas
    career_id:          id,
    nama_peserta:       answers.nama || '-',
    email_peserta:      answers.email || '-',
    whatsapp:           answers.wa || '-',
    usia:               answers.usia || '-',
    domisili:           answers.domisili || '-',
    pendidikan:         `${answers.pendidikan || '-'} — ${answers.jurusan || '-'}`,
    // Hasil AI
    score:              result.career_readiness_score || '-',
    score_level:        result.score_level || '-',
    english_level:      result.english_cefr || '-',
    geg_track:          result.geg_track || '-',
    program_utama:      result.primary_pathway || '-',
    program_alternatif: result.alternative_pathway || '-',
    alasan_program:     result.pathway_reason || '-',
    narasi_karakter:    result.character_narrative || '-',
    pesan_personal:     result.personal_message || '-',
    // Karakter
    adaptability:       result.character_scores?.adaptability || '-',
    initiative:         result.character_scores?.initiative || '-',
    resilience:         result.character_scores?.resilience || '-',
    collaboration:      result.character_scores?.collaboration || '-',
    communication:      result.character_scores?.communication || '-',
    // Aspirasi
    negara_tujuan:      negaraStr,
    industri:           industriStr,
    program_diminati:   answers.program_star4hire || '-',
    budget:             answers.budget || '-',
    paspor:             answers.paspor || '-',
    komitmen:           answers.komitmen || '-',
    motivasi:           answers.motivasi || '-',
    hambatan:           answers.hambatan || '-',
    pertanyaan:         answers.pertanyaan || '-',
  };

// Kirim ke PESERTA
  try {
    await emailjs.send(
      'service_0eau28p',        // dari Step 2
      'template_gv88I2c',  // dari Step 3
      templateParams
    );
    console.log('✅ Email peserta terkirim');
  } catch(e) {
    console.error('❌ Email peserta gagal:', e);
  }

// Kirim ke TIM
  try {
    await emailjs.send(
      'service_0eau28p',        // sama seperti di atas
      'template_ov9c6ed',      // dari Step 4
      templateParams
    );
    console.log('✅ Email tim terkirim');
  } catch(e) {
    console.error('❌ Email tim gagal:', e);
  }
}

// Send to peserta
  try {
    await fetch(`https://formsubmit.co/ajax/${answers.email}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({
        _subject: pesertaSubject,
        _template: 'table',
        message: pesertaBody,
        name: 'STAR4Hire Career Assessment'
      })
    });
  } catch(e) { console.log('Email peserta:', e); }

// Send to team
  try {
    await fetch(`https://formsubmit.co/ajax/${TEAM_EMAIL}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({
        _subject: teamSubject,
        _template: 'table',
        message: teamBody,
        name: answers.nama
      })
    });
  } catch(e) { console.log('Email team:', e); }
}

function generatePesertaEmail(r, id) {
  return `Hai ${answers.nama}!

Terima kasih sudah menyelesaikan Career Assessment STAR4Hire. Berikut ringkasan hasil analisis AI Career Counselor kami:

═══════════════════════════════
ID CAREER RECORD: ${id}
CAREER READINESS SCORE: ${r.career_readiness_score}/100 — ${r.score_level}
ENGLISH LEVEL (ESTIMASI): ${r.english_cefr}
═══════════════════════════════

PROGRAM YANG DIREKOMENDASIKAN
✅ Program Utama: ${r.primary_pathway}
🔄 Alternatif: ${r.alternative_pathway}
Alasan: ${r.pathway_reason}

ANALISIS BAHASA INGGRIS
${r.english_summary}
Rekomendasi: ${r.geg_track}

KARAKTER ASSESSMENT
• Adaptability: ${r.character_scores?.adaptability || '-'}/10
• Initiative: ${r.character_scores?.initiative || '-'}/10
• Resilience: ${r.character_scores?.resilience || '-'}/10
• Collaboration: ${r.character_scores?.collaboration || '-'}/10
• Communication: ${r.character_scores?.communication || '-'}/10

${r.character_narrative}

SKILL ADD-ON PRIORITAS
${(r.skill_addons || []).map(s => `• [${s.priority.toUpperCase()}] ${s.name} — ${s.reason}`).join('\n')}

TIMELINE REALISTIS
${r.timeline_realistic}

PESAN DARI TIM STAR4Hire
${r.personal_message}

═══════════════════════════════
Tim kami akan menghubungi kamu dalam 1×24 jam untuk jadwal Screen Interview bersama Anggi & PIC.

Salam hangat,
Tim STAR4Hire
PT Sarana Cahaya Bintang
star4hire.com | From Indonesia. For the World.`;
}

function generateTeamEmail(r, id) {
  return `NEW CAREER ASSESSMENT MASUK

═══════════════════════════════
IDENTITAS PESERTA
═══════════════════════════════
ID: ${id}
Nama: ${answers.nama}
Email: ${answers.email}
WhatsApp: ${answers.wa}
Usia: ${answers.usia}
Domisili: ${answers.domisili}
Pendidikan: ${answers.pendidikan} — ${answers.jurusan}
Status: ${answers.status_kerja}

═══════════════════════════════
HASIL AI ASSESSMENT
═══════════════════════════════
Career Readiness Score: ${r.career_readiness_score}/100 (${r.score_level})
English Level: ${r.english_cefr} — ${r.geg_track}

Karakter:
• Adaptability: ${r.character_scores?.adaptability || '-'}/10
• Initiative: ${r.character_scores?.initiative || '-'}/10
• Resilience: ${r.character_scores?.resilience || '-'}/10
• Collaboration: ${r.character_scores?.collaboration || '-'}/10
• Communication: ${r.character_scores?.communication || '-'}/10

${r.character_narrative}

═══════════════════════════════
REKOMENDASI PROGRAM
═══════════════════════════════
Utama: ${r.primary_pathway}
Alternatif: ${r.alternative_pathway}
Alasan: ${r.pathway_reason}

Skill Add-on Prioritas:
${(r.skill_addons || []).map(s => `• [${s.priority.toUpperCase()}] ${s.name}`).join('\n')}

Timeline Realistis: ${r.timeline_realistic}

═══════════════════════════════
DATA ASPIRASI
═══════════════════════════════
Negara Tujuan: ${Array.isArray(answers.tujuan_negara) ? answers.tujuan_negara.join(", ") : answers.tujuan_negara}
Program Diminati: ${answers.program_star4hire || '-'}
Industri: ${Array.isArray(answers.industri) ? answers.industri.join(", ") : answers.industri}
Timeline Peserta: ${answers.timeline}
Budget: ${answers.budget}
Paspor: ${answers.paspor}
Dukungan Keluarga: ${answers.keluarga}
Komitmen: ${answers.komitmen}/5

Motivasi: ${answers.motivasi}
Hambatan: ${answers.hambatan}
Pertanyaan: ${answers.pertanyaan || '-'}

English Essay: ${answers.english_essay || '-'}
Situasi Sulit: ${answers.situation || '-'}

═══════════════════════════════
ACTION REQUIRED: Hubungi dalam 1x24 jam untuk jadwal Screen Interview
PIC Assignment: [Assign PIC di GHL]`;
}

// ── SHOW RESULT ───────────────────────────────────────────────────────────────
function showResult(r) {
  document.getElementById('screen-analyzing').classList.remove('active');
  document.getElementById('screen-result').classList.add('active');

// Animate score
  let score = 0;
  const target = r.career_readiness_score || 65;
  const interval = setInterval(() => {
    score = Math.min(score + 2, target);
    document.getElementById('scoreNumber').textContent = score;
    if (score >= target) clearInterval(interval);
  }, 30);

document.getElementById('scoreLevel').textContent = r.score_level || 'Developing';
  document.getElementById('scoreDesc').textContent = r.score_desc || '';

// Dimensions
  const dims = [
    { label: 'Adaptability', key: 'adaptability', color: '#00A896' },
    { label: 'Initiative', key: 'initiative', color: '#F5A623' },
    { label: 'Resilience', key: 'resilience', color: '#E91E8C' },
    { label: 'Collaboration', key: 'collaboration', color: '#5B6EFF' },
    { label: 'Communication', key: 'communication', color: '#2D6A4F' },
  ];
  const dimContainer = document.getElementById('dimensionBars');
  dimContainer.innerHTML = '';
  dims.forEach(d => {
    const score = r.character_scores?.[d.key] || 5;
    const pct = (score / 10) * 100;
    dimContainer.innerHTML += `
      <div class="dimension-row">
        <div class="dim-label">${d.label}</div>
        <div class="dim-bar-wrap">
          <div class="dim-bar" style="width:${pct}%;background:${d.color}" id="bar-${d.key}"></div>
        </div>
        <div class="dim-score">${score}/10</div>
      </div>`;
  });

document.getElementById('englishResult').textContent =
    `Level Estimasi: ${r.english_cefr || 'B1'} | ${r.english_summary || ''} Rekomendasi: ${r.geg_track || 'GEG Standard Track'}`;

// UK special handling in pathway display
  const hasUKSelected = Array.isArray(answers.tujuan_negara)
    ? answers.tujuan_negara.some(n => n.includes('UK'))
    : (answers.tujuan_negara || '').includes('UK');

const pathwayDiv = document.getElementById('pathwayResult');

let ukNote = '';
  if (hasUKSelected) {
    ukNote = `<div style="background:rgba(245,166,35,0.08);border:1px solid rgba(245,166,35,0.25);border-radius:8px;padding:12px 14px;margin-top:10px;font-size:12px;color:var(--muted);line-height:1.6">
      🇬🇧 <strong style="color:var(--gold)">Tentang UK:</strong> Tim STAR4Hire akan menganalisis latar belakang, pengalaman, dan profil kamu secara mendalam untuk menyarankan negara yang paling sesuai. UK bisa menjadi salah satu pilihan yang dipertimbangkan — namun rekomendasi terbaik akan didiskusikan bersama dalam sesi Screen Interview.
    </div>`;
  }

pathwayDiv.innerHTML = `
    ${negaraSelectedHTML}
    <div><span class="pathway-tag">✅ ${r.primary_pathway || 'Ditentukan setelah Screen Interview'}</span>
    ${r.alternative_pathway ? `<span class="pathway-tag" style="background:rgba(255,255,255,0.05);border-color:var(--border);color:var(--muted)">🔄 Alt: ${r.alternative_pathway}</span>` : ''}
    </div>
    <p style="font-size:13px;color:var(--muted);margin-top:10px;line-height:1.6">${r.pathway_reason || ''}</p>
    ${ukNote}`;

document.getElementById('personalMessage').textContent = r.personal_message || '';

window.scrollTo({ top: 0, behavior: 'smooth' });
}

function getFallbackResult() {
  const eng = answers.english_level || '';
  let cefr = 'B1';
  if (eng.includes('Belum')) cefr = 'A1';
  else if (eng.includes('sedikit')) cefr = 'A2';
  else if (eng.includes('lancar')) cefr = 'B2';
  else if (eng.includes('presentasi')) cefr = 'C1';

const score = Math.min(72, Math.max(30,
    (parseInt(answers.komitmen||3)*8) +
    (parseInt(answers.english_speaking||3)*5) +
    (parseInt(answers.adaptability||3)*5) +
    (answers.paspor?.includes('aktif') ? 10 : 0) + 25
  ));

const negaraArr = Array.isArray(answers.tujuan_negara) ? answers.tujuan_negara : [answers.tujuan_negara || ''];
  const hasUKFallback = negaraArr.some(n => n.includes('UK'));
  const industriArr = Array.isArray(answers.industri) ? answers.industri : [answers.industri || ''];

return {
    career_readiness_score: score,
    score_level: score >= 65 ? 'Cukup Siap' : score >= 48 ? 'Sedang Berkembang' : 'Tahap Awal',
    score_desc: 'Estimasi awal berdasarkan self-assessment. Penilaian lebih akurat dilakukan bersama tim saat Screen Interview.',
    english_cefr: cefr,
    english_summary: `Berdasarkan self-assessment, kemampuan bahasa Inggrismu berada di estimasi level ${cefr}. Tim GEG akan melakukan assessment lebih akurat di sesi berikutnya.`,
    geg_track: cefr === 'A1' || cefr === 'A2' ? 'GEG Foundation Track' : 'GEG Advanced Track',
    character_scores: {
      adaptability: Math.round((parseInt(answers.adaptability||3)/5)*10),
      initiative: answers.initiative?.includes('Langsung') ? 9 : answers.initiative?.includes('Coba') ? 7 : 5,
      resilience: answers.resilience?.includes('pelajaran') ? 9 : answers.resilience?.includes('solusi') ? 7 : 5,
      collaboration: Math.round((parseInt(answers.collaboration||3)/5)*10),
      communication: Math.round((parseInt(answers.communication||3)/5)*10),
    },
    character_narrative: `${answers.nama} menunjukkan profil karakter yang ${score >= 65 ? 'solid' : 'berkembang'} dengan komitmen ${answers.komitmen >= 4 ? 'sangat kuat' : 'baik'} untuk berkarier internasional. Area yang bisa dimaksimalkan lebih lanjut dalam program STAR4Hire.`,
    primary_pathway: hasUKFallback ? 'Akan Direkomendasikan Setelah Screen Interview' :
                     negaraArr.some(n => n.includes('Amerika')) ? 'J1 USA — Intern/Trainee Track' :
                     negaraArr.some(n => n.includes('Australia')) ? 'PR Australia Pathway' :
                     negaraArr.some(n => n.includes('F1')) ? 'F1 USA — MBA/STEM' :
                     answers.program_star4hire || 'Global Placement Program',
    alternative_pathway: 'GEG → Program Sesuai Profil',
    pathway_reason: hasUKFallback
      ? `Tim STAR4Hire akan menganalisis latar belakang, pendidikan, dan pengalaman ${answers.nama} secara mendalam untuk menyarankan negara dan program yang paling sesuai. UK bisa menjadi salah satu yang dipertimbangkan, tergantung profil dan kondisi spesifik yang akan didiskusikan dalam Screen Interview.`
      : `Berdasarkan profil, tujuan, dan kesiapan ${answers.nama} saat ini, program ini paling cocok dengan kondisi dan aspirasi yang telah disampaikan.`,
    skill_addons: [
      { name: 'GEG — Global English Gateway', priority: 'high', reason: 'Fondasi wajib semua program internasional' },
      { name: industriArr.some(i => i.includes('Hospitality')) ? 'Front Office International Standard' :
              industriArr.some(i => i.includes('Wellness')) ? 'SPA Protocol International' : 'Business Communication', priority: 'high', reason: 'Sesuai industri target' },
      { name: 'Cross-cultural Communication', priority: 'medium', reason: 'Esensial untuk lingkungan kerja internasional' },
      { name: 'Professional Mindset & Work Ethics', priority: 'medium', reason: 'Standar employer internasional' },
    ],
    personal_message: `Hei ${answers.nama}, terima kasih sudah menyelesaikan assessment ini! Jawaban-jawabanmu menunjukkan ${answers.motivasi ? 'motivasi yang jelas dan tulus' : 'tekad yang kuat'}. Tim kami sangat antusias untuk mendiskusikan perjalanan kariermu lebih dalam. Langkah selanjutnya adalah sesi Screen Interview bersama Anggi — di sana kita akan membahas hasil ini, merancang Career Record yang personal, dan menentukan jalur yang paling tepat untukmu. Sampai jumpa!`,
    timeline_realistic: `Berdasarkan kondisi saat ini, timeline realistis adalah ${answers.paspor?.includes('aktif') ? '6–12 bulan' : '8–14 bulan'} hingga keberangkatan — akan difinalisasi setelah Screen Interview.`,
    key_strengths: ['Keberanian mengambil langkah pertama', 'Komitmen untuk berkembang', 'Keterbukaan terhadap peluang global'],
    areas_to_develop: ['Kemampuan bahasa Inggris', 'Skill teknis sesuai industri target']
  };
}
</script>
</body>
</html>

Advanced Web Server Manager