script.js

// ===== Roadmap Guide - Static HTML Version =====
// Data from roadmap-data.js and references-data.js (global vars)

const ROLE_ORDER = ['AI', 'DevOps', 'BE', 'FE'];
const ACCENT_MAP = { FE: '#E74C3C', BE: '#1ABC9C', DevOps: '#F39C12', AI: '#8E44AD' };
const LEVEL_ORDER_REF = ['junior', 'mid', 'senior', 'techlead'];
const LEVEL_COLORS = { junior: '#3498DB', mid: '#2ECC71', senior: '#E67E22', techlead: '#9B59B6' };

let currentPage = 'roadmap';
let currentRole = 'AI';
let currentLevel = LEVELS[0];
let currentRefTab = 'levels';
let currentRefSubTab = 'korea';
let openCurriculumIdx = null;
let openLevelKey = 'junior';
let openCompanyIdx = null;

// ===== Page Tabs =====
document.querySelectorAll('.page-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        currentPage = btn.dataset.page;
        document.querySelectorAll('.page-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        document.getElementById('page-roadmap').classList.toggle('hidden', currentPage !== 'roadmap');
        document.getElementById('page-references').classList.toggle('hidden', currentPage !== 'references');
        if (currentPage === 'references') renderReferences();
    });
});

// ===== Role Tabs =====
function renderRoleTabs() {
    const el = document.getElementById('roleTabs');
    el.innerHTML = ROLE_ORDER.map(key => {
        const r = ROLES[key];
        const active = currentRole === key;
        const bg = active ? r.color : 'transparent';
        return `<button class="role-btn ${active ? 'active' : ''}" data-role="${key}" style="background:${bg}">${r.icon} ${r.label}</button>`;
    }).join('');
    el.querySelectorAll('.role-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            currentRole = btn.dataset.role;
            openCurriculumIdx = null;
            renderRoleTabs();
            renderLevelTabs();
            renderRoadmap();
        });
    });
}

// ===== Level Tabs =====
function renderLevelTabs() {
    const el = document.getElementById('levelTabs');
    const accent = ACCENT_MAP[currentRole];
    el.innerHTML = LEVELS.map(l => {
        const active = currentLevel === l;
        const bg = active ? accent : 'transparent';
        return `<button class="level-btn ${active ? 'active' : ''}" data-level="${l}" style="background:${bg}">${l}</button>`;
    }).join('');
    el.querySelectorAll('.level-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            currentLevel = btn.dataset.level;
            openCurriculumIdx = null;
            renderLevelTabs();
            renderRoadmap();
        });
    });
}

// ===== Roadmap Content =====
function renderRoadmap() {
    const el = document.getElementById('roadmapContent');
    const accent = ACCENT_MAP[currentRole];
    const rd = data[currentRole]?.[currentLevel];
    if (!rd) { el.innerHTML = '<p style="text-align:center;color:var(--text-muted);padding:40px;">데이터가 없습니다.</p>'; return; }

    const totalItems = rd.tracks.reduce((s, t) => s + t.items.length, 0);
    const totalTopics = rd.tracks.reduce((s, t) => s + t.items.reduce((a, i) => a + (i.curriculum?.length || 0), 0), 0);

    let html = '';

    // Summary card
    html += `<div class="summary-card" style="background:linear-gradient(145deg, ${accent}14, ${accent}06);border:1px solid ${accent}20;">
        <div class="glow" style="background:${accent}10;"></div>
        <div class="summary-label" style="color:${accent};">${ROLES[currentRole].icon} ${ROLES[currentRole].label} &middot; ${currentLevel}</div>
        <div class="summary-title">${rd.summary}</div>
        <p class="summary-desc">${rd.keyMessage}</p>
    </div>`;

    // Stats
    html += `<div class="stats-bar">
        <div class="stat-chip">학습 항목 <strong>${totalItems}</strong></div>
        <div class="stat-chip">상세 토픽 <strong>${totalTopics}</strong></div>
    </div>`;

    // Tracks
    let globalIdx = 1;
    rd.tracks.forEach(track => {
        html += `<div style="margin-bottom:32px;">
            <div class="track-name"><span>${track.name}</span><span class="line"></span></div>`;
        track.items.forEach((item, ii) => {
            const idx = globalIdx++;
            const has = item.curriculum?.length > 0;
            const isOpen = openCurriculumIdx === `${currentRole}-${currentLevel}-${idx}`;
            const openClass = isOpen ? 'open' : '';

            html += `<div class="curriculum-item ${openClass}" style="--item-accent:${accent}50;" data-cidx="${currentRole}-${currentLevel}-${idx}">
                <div class="curriculum-header">
                    <div class="curriculum-header-inner">
                        <div class="curriculum-num" style="background:${accent}18;color:${accent};">${idx}</div>
                        <div class="curriculum-body">
                            <div class="curriculum-title-row">
                                <span class="curriculum-skill">${item.skill}</span>
                                ${has ? `<span class="curriculum-toggle" style="color:${isOpen ? '#fff' : accent};background:${isOpen ? accent : accent + '15'};">${isOpen ? '접기' : item.curriculum.length + '개 토픽'}</span>` : ''}
                            </div>
                            <p class="curriculum-action">${item.action}</p>
                            <div class="curriculum-how">
                                <span class="curriculum-how-badge" style="color:${accent};background:${accent}15;">실전</span>
                                <span class="curriculum-how-text" style="color:${accent};">${item.how}</span>
                            </div>
                        </div>
                    </div>
                </div>`;

            if (has) {
                html += `<div class="curriculum-detail" style="border-top:1px solid ${accent}15;">
                    <div class="curriculum-detail-header">학습 커리큘럼</div>
                    <div style="display:flex;flex-direction:column;gap:8px;">`;
                item.curriculum.forEach((c, ci) => {
                    html += `<div class="curriculum-topic" style="background:${accent}06;border-left:3px solid ${accent}35;">
                        <div class="curriculum-topic-title">
                            <span class="curriculum-topic-num" style="background:${accent}20;color:${accent};">${ci + 1}</span>
                            <span style="color:var(--text);">${c.topic}</span>
                        </div>
                        <p class="curriculum-topic-desc">${c.desc}</p>
                    </div>`;
                });
                html += '</div></div>';
            }
            html += '</div>';
        });
        html += '</div>';
    });

    el.innerHTML = html;

    // Curriculum click handlers
    el.querySelectorAll('.curriculum-item').forEach(item => {
        item.querySelector('.curriculum-header').addEventListener('click', () => {
            const cidx = item.dataset.cidx;
            openCurriculumIdx = openCurriculumIdx === cidx ? null : cidx;
            renderRoadmap();
        });
    });
}

// ===== References =====
function renderReferences() {
    const el = document.getElementById('referencesContent');

    // Ref tab handlers
    document.querySelectorAll('#refTabs .tab-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            currentRefTab = btn.dataset.ref;
            document.querySelectorAll('#refTabs .tab-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            openLevelKey = 'junior';
            openCompanyIdx = null;
            currentRefSubTab = 'korea';
            renderReferences();
        });
    });

    if (currentRefTab === 'levels') {
        renderLevelsSection(el);
    } else {
        renderInterviewsSection(el);
    }
}

function renderLevelsSection(el) {
    const criteriaData = currentRefSubTab === 'korea' ? LEVEL_CRITERIA : BIGTECH_LEVEL_CRITERIA;
    let html = '';

    // Insight
    html += renderInsightCard('#3498DB', [
        '연차는 참고용이며, 실제 레벨은 역량과 영향력(Scope of Impact)으로 결정됩니다',
        '한국은 \'연차 기반\' 문화가 강하지만, 빅테크는 \'성과/영향력 기반\'으로 레벨을 판단합니다',
        '주니어→시니어: 개인 태스크 → Feature → 팀/시스템으로 Scope가 확장되는 과정입니다',
        'Staff+는 한국·글로벌 모두 \'권위 없는 영향력(Influence without authority)\'이 핵심입니다',
    ]);

    // Sub tab
    html += `<div class="tab-toggle"><div class="tab-toggle-inner">
        <button class="tab-btn level-sub-tab ${currentRefSubTab === 'korea' ? 'active' : ''}" data-subtab="korea" style="${currentRefSubTab === 'korea' ? 'background:#3498DB;' : ''}">🇰🇷 한국 관점</button>
        <button class="tab-btn level-sub-tab ${currentRefSubTab === 'global' ? 'active' : ''}" data-subtab="global" style="${currentRefSubTab === 'global' ? 'background:#3498DB;' : ''}">🌍 글로벌 빅테크</button>
    </div></div>`;

    html += `<div class="info-box">${currentRefSubTab === 'korea'
        ? '한국 개발자 커뮤니티(기술블로그, Velog, Brunch 등)에서 논의되는 레벨 기준을 정리했습니다.'
        : 'Google, Meta, Amazon 등 글로벌 빅테크의 엔지니어링 레벨 프레임워크를 정리했습니다.'
    }</div>`;

    // Level cards
    LEVEL_ORDER_REF.forEach(key => {
        const d = criteriaData[key];
        const color = LEVEL_COLORS[key];
        const isOpen = openLevelKey === key;
        html += renderLevelCard(d, color, key, isOpen);
    });

    el.innerHTML = html;

    // Sub tab handlers
    el.querySelectorAll('.level-sub-tab').forEach(btn => {
        btn.addEventListener('click', () => {
            currentRefSubTab = btn.dataset.subtab;
            openLevelKey = 'junior';
            renderLevelsSection(el);
        });
    });

    // Level card toggle
    el.querySelectorAll('.level-card').forEach(card => {
        card.querySelector('.level-card-header').addEventListener('click', () => {
            const key = card.dataset.levelkey;
            openLevelKey = openLevelKey === key ? null : key;
            renderLevelsSection(el);
        });
    });
}

function renderLevelCard(d, color, key, isOpen) {
    let html = `<div class="level-card ${isOpen ? 'open' : ''}" style="--card-color:${color}40;" data-levelkey="${key}">
        <div class="level-card-header">
            <span class="level-card-icon">${d.icon}</span>
            <div class="level-card-info">
                <div class="level-card-title">${d.title}</div>
                <div class="level-card-sub">경력 ${d.years} · ${d.summary}</div>
            </div>
            <span class="level-card-toggle" style="background:${isOpen ? color : color + '15'};color:${isOpen ? '#fff' : color};">${isOpen ? '접기' : '상세'}</span>
        </div>
        <div class="level-card-detail">`;

    // Key traits
    html += `<div style="margin-bottom:20px;"><div class="detail-section-label">핵심 특성</div><div>`;
    d.keyTraits.forEach(t => { html += `<span class="trait-tag" style="background:${color}10;border:1px solid ${color}15;">${t}</span>`; });
    html += '</div></div>';

    // Core competencies
    html += `<div style="margin-bottom:20px;"><div class="detail-section-label">핵심 역량</div>`;
    d.coreCompetencies.forEach(c => {
        html += `<div class="competency-item" style="border-left:3px solid ${color}50;">
            <div class="competency-name" style="color:${color};">${c.name}</div>
            <div class="competency-desc">${c.desc}</div>
        </div>`;
    });
    html += '</div>';

    // Growth or career paths
    const items = d.growth || d.careerPaths;
    if (items) {
        const label = d.growth ? '성장 단계' : '커리어 경로';
        html += `<div style="margin-bottom:20px;"><div class="detail-section-label">${label}</div>`;
        items.forEach(g => {
            const tag = g.year || g.path;
            html += `<div class="growth-item">
                <span class="growth-year" style="color:${color};background:${color}15;">${tag}</span>
                <span class="growth-desc">${g.desc}</span>
            </div>`;
        });
        html += '</div>';
    }

    // Sources
    html += `<div><div class="detail-section-label">참고 자료</div>`;
    d.sources.forEach(s => {
        html += `<a class="source-link" href="${s.url}" target="_blank" rel="noopener noreferrer" style="color:${color};background:${color}08;">\u2192 ${s.title}</a>`;
    });
    html += '</div></div></div>';
    return html;
}

function renderInterviewsSection(el) {
    const companies = currentRefSubTab === 'korea' ? INTERVIEW_DATA.companies : INTERVIEW_DATA.bigtech;
    let html = '';

    // Insight
    html += renderInsightCard('#E67E22', [
        '한국 기업은 코딩테스트 비중이 높고, 빅테크는 시스템 디자인 + 행동 면접(Behavioral)이 핵심입니다',
        '공통적으로 \'왜 이 기술을 선택했는가\'를 설명하는 능력이 가장 중요합니다',
        '빅테크 평균 면접 기간은 30~60일이며, Apple이 가장 길고(2~3개월), OpenAI가 가장 짧습니다(30일)',
        '한국 기업 중 당근·라인이 난이도가 가장 높고, 배민·삼성이 상대적으로 낮습니다',
    ]);

    // Tech topics
    html += '<div class="tech-topics-card"><div class="tech-topics-title">🔥 기술면접 자주 나오는 주제</div>';
    [
        { key: 'backend', label: '백엔드', color: '#1ABC9C' },
        { key: 'frontend', label: '프론트엔드', color: '#E74C3C' },
        { key: 'common', label: '공통 (CS)', color: '#3498DB' },
    ].forEach(cat => {
        html += `<div class="tech-category">
            <div class="tech-category-label" style="color:${cat.color};"><span class="tech-category-dot" style="background:${cat.color};"></span>${cat.label}</div>
            <div>`;
        INTERVIEW_DATA.techInterviewTopics[cat.key].forEach(topic => {
            html += `<span class="tech-tag" style="background:${cat.color}10;border:1px solid ${cat.color}12;">${topic}</span>`;
        });
        html += '</div></div>';
    });
    html += '</div>';

    // Sub tab
    html += `<div class="tab-toggle"><div class="tab-toggle-inner">
        <button class="tab-btn interview-sub-tab ${currentRefSubTab === 'korea' ? 'active' : ''}" data-subtab="korea" style="${currentRefSubTab === 'korea' ? 'background:#E67E22;' : ''}">🇰🇷 한국 기업 (${INTERVIEW_DATA.companies.length})</button>
        <button class="tab-btn interview-sub-tab ${currentRefSubTab === 'global' ? 'active' : ''}" data-subtab="global" style="${currentRefSubTab === 'global' ? 'background:#E67E22;' : ''}">🌍 글로벌 빅테크 (${INTERVIEW_DATA.bigtech.length})</button>
    </div></div>`;

    // Interview cards
    companies.forEach((c, i) => {
        const isOpen = openCompanyIdx === i;
        html += renderInterviewCard(c, i, isOpen);
    });

    el.innerHTML = html;

    // Sub tab handlers
    el.querySelectorAll('.interview-sub-tab').forEach(btn => {
        btn.addEventListener('click', () => {
            currentRefSubTab = btn.dataset.subtab;
            openCompanyIdx = null;
            renderInterviewsSection(el);
        });
    });

    // Interview card toggle
    el.querySelectorAll('.interview-card').forEach(card => {
        card.querySelector('.interview-header').addEventListener('click', () => {
            const idx = parseInt(card.dataset.cidx);
            openCompanyIdx = openCompanyIdx === idx ? null : idx;
            renderInterviewsSection(el);
        });
    });
}

function renderInterviewCard(c, i, isOpen) {
    const subtitle = c.duration
        ? `난이도 ${c.difficulty}/5 · 평균 ${c.duration}`
        : `난이도 ${c.difficulty}/5${c.reviews ? ' · 후기 ' + c.reviews.toLocaleString() + '건' : ''}`;

    let html = `<div class="interview-card ${isOpen ? 'open' : ''}" style="--card-color:${c.color};" data-cidx="${i}">
        <div class="interview-header">
            <div class="interview-icon" style="background:${c.color};">${c.company[0]}</div>
            <div class="interview-info">
                <div class="interview-company">${c.company}</div>
                <div class="interview-sub">${subtitle}</div>
            </div>
            <div class="difficulty-bars">`;
    for (let n = 1; n <= 5; n++) {
        html += `<div class="difficulty-bar ${n <= Math.round(c.difficulty) ? 'filled' : ''}" style="${n <= Math.round(c.difficulty) ? 'background:' + c.color : ''}"></div>`;
    }
    html += `</div>
            <span class="interview-toggle" style="background:${isOpen ? c.color : c.color + '15'};color:${isOpen ? (c.textColor || '#fff') : c.color};">${isOpen ? '접기' : '상세'}</span>
        </div>
        <div class="interview-detail">
            <div class="interview-process">
                <div class="interview-process-label" style="color:${c.color};">채용 프로세스</div>
                <div class="interview-process-text">${c.process}</div>
            </div>
            <div class="detail-section-label">핵심 포인트</div>`;
    c.highlights.forEach(h => {
        html += `<div class="highlight-item" style="background:${c.color}08;border-left:3px solid ${c.color}40;">${h}</div>`;
    });
    html += '</div></div>';
    return html;
}

function renderInsightCard(color, items) {
    let html = `<div class="insight-card" style="background:linear-gradient(145deg, ${color}12, ${color}05);border:1px solid ${color}25;">
        <div class="insight-label" style="color:${color};">💡 핵심 인사이트</div>`;
    items.forEach(item => {
        html += `<div class="insight-item"><span style="color:${color};font-weight:700;flex-shrink:0;">•</span><span>${item}</span></div>`;
    });
    html += '</div>';
    return html;
}

// ===== Init =====
renderRoleTabs();
renderLevelTabs();
renderRoadmap();