import { useState } from "react";

const chapters = [
  {
    id: 0, emoji: "🎵", title: "에이블톤이 뭐예요?",
    color: "#7F77DD", light: "#EEEDFE", dark: "#3C3489",
    render: () => {
      const [flip, setFlip] = useState(null);
      const cards = [
        { q: "에이블톤은\n뭐예요?", a: "컴퓨터로 음악을 만드는 프로그램이에요!\n레고처럼 소리 블록을 쌓아서 노래를 만들어요 🎮", emoji: "💻" },
        { q: "누가\n써요?", a: "DJ, 작곡가, 유튜버, 게임 음악 만드는 사람 등\n전 세계 수백만 명이 쓰고 있어요! 🌍", emoji: "🎤" },
        { q: "어렵지\n않아요?", a: "처음엔 낯설지만 차근차근 하면 돼요!\n이 가이드를 따라하면 누구나 할 수 있어요 💪", emoji: "😊" },
        { q: "뭘 만들\n수 있어요?", a: "힙합, 팝, 전자음악, 게임 BGM, 유튜브 배경음악\n뭐든 만들 수 있어요! 🎸", emoji: "🎼" },
      ];
      return (
        <div>
          <div style={{ background: "#EEEDFE", borderRadius: 14, padding: 16, marginBottom: 16, textAlign: "center" }}>
            <div style={{ fontSize: 48, marginBottom: 8 }}>🎹</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: "#3C3489", marginBottom: 4 }}>에이블톤 = 음악 레고!</div>
            <div style={{ fontSize: 13, color: "#534AB7", lineHeight: 1.7 }}>
              소리 블록들을 모아서 조합하면<br />내 노래가 완성돼요!
            </div>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, color: "#888", marginBottom: 10 }}>👆 카드를 눌러보세요!</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {cards.map((card, i) => (
              <div key={i} onClick={() => setFlip(flip === i ? null : i)}
                style={{ borderRadius: 14, border: `2px solid ${flip === i ? "#7F77DD" : "#e0e0e0"}`, padding: 16, cursor: "pointer", background: flip === i ? "#EEEDFE" : "#fff", transition: "all .2s", minHeight: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
                <div style={{ fontSize: 28, marginBottom: 6 }}>{card.emoji}</div>
                {flip === i ? (
                  <div style={{ fontSize: 12, color: "#3C3489", lineHeight: 1.7, textAlign: "center", whiteSpace: "pre-line" }}>{card.a}</div>
                ) : (
                  <div style={{ fontSize: 13, fontWeight: 700, color: "#555", textAlign: "center", whiteSpace: "pre-line" }}>{card.q}</div>
                )}
              </div>
            ))}
          </div>
          <div style={{ background: "#fff3cd", borderRadius: 12, padding: 14, marginTop: 14, fontSize: 13, color: "#7a5c00", lineHeight: 1.7 }}>
            💡 <strong>비유로 이해하기!</strong><br />
            에이블톤은 <strong>음악 요리책</strong>이에요.<br />
            재료(소리) 를 골라서 → 순서대로 담고 → 맛있는 노래 완성! 🍳
          </div>
        </div>
      );
    }
  },
  {
    id: 1, emoji: "🖥️", title: "화면 구경하기",
    color: "#1D9E75", light: "#E1F5EE", dark: "#085041",
    render: () => {
      const [sel, setSel] = useState(null);
      const parts = [
        { id: 0, x: 0, y: 0, w: 620, h: 44, label: "① 컨트롤 바", color: "#7F77DD", desc: "재생▶ 정지■ 녹음● 버튼이 여기 있어요!\n박자(BPM)도 여기서 바꿔요. 음악의 '리모컨'이에요 🎮" },
        { id: 1, x: 0, y: 44, w: 110, h: 200, label: "② 파일 창", color: "#1D9E75", desc: "드럼, 피아노, 기타 등 모든 소리가 여기 있어요!\n마트처럼 원하는 소리를 골라서 꺼내요 🛒" },
        { id: 2, x: 110, y: 44, w: 510, h: 100, label: "③ 세션 뷰", color: "#BA7517", desc: "격자 모양 화면이에요!\n버튼처럼 소리 블록을 실시간으로 눌러서 즉흥 연주해요 🎸" },
        { id: 3, x: 110, y: 144, w: 510, h: 100, label: "④ 어레인지 뷰", color: "#D85A30", desc: "왼쪽→오른쪽으로 시간이 흘러요!\n여기서 완성된 곡의 순서를 만들어요 📝" },
        { id: 4, x: 0, y: 244, w: 620, h: 50, label: "⑤ 클립/장치 창", color: "#185FA5", desc: "소리를 자세히 수정하는 곳이에요!\n음표를 직접 그려 넣거나 음색을 바꿀 수 있어요 🎨" },
      ];
      const s = sel !== null ? parts[sel] : null;
      return (
        <div>
          <p style={{ fontSize: 13, color: "#555", lineHeight: 1.7, marginBottom: 12 }}>
            에이블톤 화면은 크게 <strong>5개 구역</strong>으로 나뉘어요.<br />
            아래 각 구역을 눌러보면 설명이 나와요! 👆
          </p>
          <svg width="100%" viewBox="0 0 620 294" style={{ display: "block", marginBottom: 12, borderRadius: 10, overflow: "hidden" }}>
            <rect x={0} y={0} width={620} height={294} fill="#1a1a1a" />
            {parts.map(p => (
              <g key={p.id} onClick={() => setSel(sel === p.id ? null : p.id)} style={{ cursor: "pointer" }}>
                <rect x={p.x + 1} y={p.y + 1} width={p.w - 2} height={p.h - 2} rx={4}
                  fill={sel === p.id ? p.color : `${p.color}33`}
                  stroke={p.color} strokeWidth={sel === p.id ? 2.5 : 1} />
                <text x={p.x + p.w / 2} y={p.y + p.h / 2 + 5} textAnchor="middle"
                  fontSize={11} fontWeight={700} fill={sel === p.id ? "#fff" : p.color}>{p.label}</text>
              </g>
            ))}
          </svg>
          {s ? (
            <div style={{ background: `${s.color}18`, border: `2px solid ${s.color}`, borderRadius: 12, padding: 14, fontSize: 13, color: "#333", lineHeight: 1.7, whiteSpace: "pre-line" }}>
              <strong style={{ color: s.color }}>{s.label}</strong><br />{s.desc}
            </div>
          ) : (
            <div style={{ background: "#f7f6f2", borderRadius: 12, padding: 14, textAlign: "center", color: "#aaa", fontSize: 13 }}>
              위 구역을 눌러보세요! ☝️
            </div>
          )}
          <div style={{ background: "#E1F5EE", borderLeft: "3px solid #1D9E75", borderRadius: "0 9px 9px 0", padding: "10px 14px", fontSize: 12, color: "#085041", marginTop: 10, lineHeight: 1.7 }}>
            💡 <strong>Tab 키</strong>를 누르면 세션 뷰 ↔ 어레인지 뷰를 왔다갔다 할 수 있어요!
          </div>
        </div>
      );
    }
  },
  {
    id: 2, emoji: "🥁", title: "드럼 찍기",
    color: "#D85A30", light: "#FAECE7", dark: "#712B13",
    render: () => {
      const init = {
        kick:  [1,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0],
        snare: [0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0],
        hihat: [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
      };
      const [pads, setPads] = useState(init);
      const toggle = (inst, i) => setPads(p => ({ ...p, [inst]: p[inst].map((v, idx) => idx === i ? v ^ 1 : v) }));
      const reset = () => setPads(init);
      const rows = [
        { key: "kick", emoji: "🦵", name: "킥 드럼", desc: "쿵쿵! 1번·3번 박자에", color: "#7F77DD" },
        { key: "snare", emoji: "💥", name: "스네어", desc: "딱딱! 2번·4번 박자에", color: "#1D9E75" },
        { key: "hihat", emoji: "🎩", name: "하이햇", desc: "치치치! 빠르게 전체에", color: "#BA7517" },
      ];
      const beats = [1, 2, 3, 4];
      return (
        <div>
          <p style={{ fontSize: 13, color: "#555", lineHeight: 1.7, marginBottom: 12 }}>
            드럼은 음악의 <strong>심장박동</strong>이에요! 🫀<br />
            세 가지 소리만 있으면 기본 드럼이 완성돼요.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8, marginBottom: 14 }}>
            {rows.map(r => (
              <div key={r.key} style={{ background: `${r.color}18`, borderRadius: 10, padding: "10px 8px", textAlign: "center", border: `1.5px solid ${r.color}` }}>
                <div style={{ fontSize: 24, marginBottom: 4 }}>{r.emoji}</div>
                <div style={{ fontSize: 12, fontWeight: 700, color: r.color }}>{r.name}</div>
                <div style={{ fontSize: 10, color: "#888", marginTop: 2 }}>{r.desc}</div>
              </div>
            ))}
          </div>
          <div style={{ background: "#1a1a1a", borderRadius: 12, padding: 14, marginBottom: 10 }}>
            <div style={{ display: "flex", marginBottom: 6, marginLeft: 56 }}>
              {beats.map(b => [0,1,2,3].map(s => (
                <div key={`${b}-${s}`} style={{ width: 24, textAlign: "center", fontSize: s === 0 ? 12 : 9, fontWeight: s === 0 ? 700 : 400, color: s === 0 ? "#fff" : "#555", marginRight: s < 3 ? 4 : 8 }}>{s === 0 ? `${b}박` : ""}</div>
              )))}
            </div>
            {rows.map(row => (
              <div key={row.key} style={{ display: "flex", alignItems: "center", marginBottom: 8 }}>
                <div style={{ width: 52, fontSize: 11, fontWeight: 700, color: row.color, flexShrink: 0 }}>{row.emoji} {row.name.split(" ")[0]}</div>
                <div style={{ display: "flex", gap: 0 }}>
                  {pads[row.key].map((on, i) => (
                    <div key={i} style={{ display: "flex", alignItems: "center" }}>
                      {i % 4 === 0 && i > 0 && <div style={{ width: 6 }} />}
                      <div onClick={() => toggle(row.key, i)}
                        style={{ width: 24, height: 24, borderRadius: 5, background: on ? row.color : "#333", border: `1.5px solid ${on ? row.color : "#444"}`, cursor: "pointer", transition: "all .1s", marginRight: 4 }} />
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <button onClick={reset} style={{ width: "100%", padding: "10px", borderRadius: 10, border: "1.5px solid #ddd", background: "#fff", color: "#888", fontSize: 13, cursor: "pointer", marginBottom: 10 }}>
            🔄 기본 패턴으로 초기화
          </button>
          <div style={{ background: "#FAECE7", borderLeft: "3px solid #D85A30", borderRadius: "0 9px 9px 0", padding: "10px 14px", fontSize: 12, color: "#712B13", lineHeight: 1.7 }}>
            🎮 <strong>에이블톤에서 하는 법!</strong><br />
            1. MIDI 트랙 만들기 (우클릭 → Insert MIDI Track)<br />
            2. 파일 창 → Drums → 드럼 킷 드래그<br />
            3. 트랙에 클립 더블클릭 생성<br />
            4. 클립 더블클릭 → 피아노 롤 열림<br />
            5. 위 패턴처럼 음표 찍기!
          </div>
        </div>
      );
    }
  },
  {
    id: 3, emoji: "🎹", title: "코드(화음) 이해하기",
    color: "#7F77DD", light: "#EEEDFE", dark: "#3C3489",
    render: () => {
      const [selChord, setSelChord] = useState(0);
      const [pressed, setPressed] = useState([]);
      const notes = ["C","C#","D","D#","E","F","F#","G","G#","A","A#","B","C","D","E","F","G","A","B"];
      const whiteKeys = [0,2,4,5,7,9,11,12,14,16,17,19,21,23];
      const blackKeys = [1,3,null,6,8,10,null,13,15,null,18,20,22];
      const blackLabels = ["C#","D#","","F#","G#","A#","","C#","D#","","F#","G#","A#"];
      const chords = [
        { name: "C 코드 (도미솔)", notes: ["C","E","G"], feel: "밝고 행복한 느낌 ☀️", color: "#7F77DD", indices: [0,4,7] },
        { name: "G 코드 (솔시레)", notes: ["G","B","D"], feel: "힘차고 신나는 느낌 💪", color: "#1D9E75", indices: [7,11,14] },
        { name: "Am 코드 (라도미)", notes: ["A","C","E"], feel: "슬프고 감성적인 느낌 🌙", color: "#D85A30", indices: [9,12,16] },
        { name: "F 코드 (파라도)", notes: ["F","A","C"], feel: "따뜻하고 안정적인 느낌 🌸", color: "#BA7517", indices: [5,9,12] },
      ];
      const ch = chords[selChord];
      return (
        <div>
          <p style={{ fontSize: 13, color: "#555", lineHeight: 1.7, marginBottom: 12 }}>
            코드는 <strong>여러 음을 동시에 누르는 것</strong>이에요!<br />
            음들이 함께 울리면 특별한 감정이 생겨요 🎭
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginBottom: 12 }}>
            {chords.map((c, i) => (
              <div key={i} onClick={() => setSelChord(i)}
                style={{ padding: "10px 12px", borderRadius: 12, border: `2px solid ${selChord === i ? c.color : "#eee"}`, background: selChord === i ? `${c.color}18` : "#fff", cursor: "pointer" }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: c.color, marginBottom: 2 }}>{c.name}</div>
                <div style={{ fontSize: 11, color: "#888" }}>{c.feel}</div>
              </div>
            ))}
          </div>
          {/* 건반 */}
          <div style={{ background: "#1a1a1a", borderRadius: 12, padding: 12, marginBottom: 12 }}>
            <div style={{ fontSize: 11, color: "#888", marginBottom: 8, textAlign: "center" }}>
              {ch.color === "#7F77DD" ? "🟣" : ch.color === "#1D9E75" ? "🟢" : ch.color === "#D85A30" ? "🟠" : "🟡"} {ch.name} — 이 건반들을 동시에 눌러요!
            </div>
            <svg width="100%" viewBox="0 0 560 110">
              {whiteKeys.map((semitone, i) => {
                const noteName = notes[semitone];
                const isActive = ch.indices.includes(semitone);
                return (
                  <g key={i}>
                    <rect x={2 + i * 40} y={5} width={36} height={90} rx={4}
                      fill={isActive ? ch.color : "#f0f0f0"} stroke="#ccc" strokeWidth={0.5} />
                    <text x={20 + i * 40} y={84} textAnchor="middle" fontSize={10}
                      fontWeight={isActive ? 700 : 400} fill={isActive ? "#fff" : "#aaa"}>{noteName}</text>
                    {isActive && <text x={20 + i * 40} y={30} textAnchor="middle" fontSize={18}>⬇</text>}
                  </g>
                );
              })}
              {blackKeys.map((semitone, i) => {
                if (semitone === null) return null;
                const isActive = ch.indices.includes(semitone);
                return (
                  <rect key={i} x={30 + i * 40} y={5} width={24} height={58} rx={3}
                    fill={isActive ? ch.color : "#222"} stroke={isActive ? ch.color : "none"} strokeWidth={2} />
                );
              })}
            </svg>
          </div>
          {/* 구성음 */}
          <div style={{ display: "flex", gap: 8, marginBottom: 12, justifyContent: "center" }}>
            {ch.notes.map((n, i) => (
              <div key={i} style={{ width: 52, height: 52, borderRadius: "50%", background: ch.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16, fontWeight: 700, color: "#fff", boxShadow: `0 4px 12px ${ch.color}66` }}>
                {n}
              </div>
            ))}
          </div>
          <div style={{ background: "#EEEDFE", borderLeft: "3px solid #7F77DD", borderRadius: "0 9px 9px 0", padding: "10px 14px", fontSize: 12, color: "#3C3489", lineHeight: 1.7 }}>
            🎹 <strong>에이블톤에서 코드 찍는 법!</strong><br />
            피아노 롤에서 같은 위치에 여러 음표를 <strong>세로로 쌓으면</strong> 코드가 돼요!<br />
            C코드 = C4 + E4 + G4 동시에 클릭!
          </div>
        </div>
      );
    }
  },
  {
    id: 4, emoji: "🎵", title: "멜로디 만들기",
    color: "#BA7517", light: "#FAEEDA", dark: "#633806",
    render: () => {
      const noteSeq = [
        { note: "도", key: "C", y: 70, color: "#7F77DD", len: 60 },
        { note: "레", key: "D", y: 55, color: "#7F77DD", len: 45 },
        { note: "미", key: "E", y: 40, color: "#1D9E75", len: 45 },
        { note: "솔", key: "G", y: 25, color: "#1D9E75", len: 60 },
        { note: "미", key: "E", y: 40, color: "#D85A30", len: 45 },
        { note: "레", key: "D", y: 55, color: "#D85A30", len: 45 },
        { note: "도", key: "C", y: 70, color: "#BA7517", len: 80 },
      ];
      const rules = [
        { icon: "🔁", title: "짧게 시작", body: "2~4개 음으로 시작해요.\n'도레미' 처럼 짧은 패턴을 만들어요." },
        { icon: "↕️", title: "올라갔다 내려오기", body: "음이 올라가면 신나고\n내려오면 안정되는 느낌이에요." },
        { icon: "⏸️", title: "쉬는 구간 넣기", body: "계속 음만 넣으면 답답해요.\n중간에 쉼표(빈 공간)를 넣어요." },
        { icon: "🔄", title: "반복 + 변형", body: "같은 패턴을 반복하되\n마지막에 살짝 달리 끝내요." },
      ];
      let xPos = 10;
      return (
        <div>
          <p style={{ fontSize: 13, color: "#555", lineHeight: 1.7, marginBottom: 12 }}>
            멜로디는 <strong>음들이 이어지는 선율</strong>이에요!<br />
            어릴 때 흥얼거리던 노래가 바로 멜로디예요 🎶
          </p>
          {/* 멜로디 시각화 */}
          <div style={{ background: "#1a1a2e", borderRadius: 12, padding: 14, marginBottom: 12 }}>
            <div style={{ fontSize: 11, color: "#888", marginBottom: 8 }}>🎵 도레미솔미레도 — 올라갔다가 내려오는 멜로디</div>
            <svg width="100%" viewBox="0 0 560 110">
              {/* 가이드 라인 */}
              {[25, 40, 55, 70].map(y => (
                <line key={y} x1={0} y1={y} x2={560} y2={y} stroke="#2a2a2a" strokeWidth={0.5} />
              ))}
              {/* 음표 이름 라벨 */}
              {["솔", "미", "레", "도"].map((n, i) => (
                <text key={i} x={555} y={[25, 40, 55, 70][i] + 4} textAnchor="end" fontSize={9} fill="#555">{n}</text>
              ))}
              {/* 음표들 */}
              {noteSeq.map((n, i) => {
                const x = xPos;
                xPos += n.len + 8;
                return (
                  <g key={i}>
                    <rect x={x} y={n.y - 5} width={n.len - 4} height={18} rx={5} fill={n.color} opacity={0.85} />
                    <text x={x + (n.len - 4) / 2} y={n.y + 7} textAnchor="middle" fontSize={11} fontWeight={700} fill="#fff">{n.note}</text>
                  </g>
                );
              })}
              {/* 연결선 */}
              {(() => {
                let positions = []; let x2 = 10;
                noteSeq.forEach(n => { positions.push({ x: x2 + (n.len - 4) / 2, y: n.y + 4 }); x2 += n.len + 8; });
                return positions.slice(0, -1).map((p, i) => (
                  <path key={i} d={`M${p.x} ${p.y} C${p.x + 20} ${p.y} ${positions[i+1].x - 20} ${positions[i+1].y} ${positions[i+1].x} ${positions[i+1].y}`}
                    fill="none" stroke="#fff" strokeWidth={1} strokeDasharray="3 3" opacity={0.3} />
                ));
              })()}
              <text x={280} y={105} textAnchor="middle" fontSize={9} fill="#555">올라갔다 → 내려오는 자연스러운 멜로디</text>
            </svg>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 12 }}>
            {rules.map((r, i) => (
              <div key={i} style={{ background: "#f7f6f2", borderRadius: 10, padding: "10px 12px" }}>
                <div style={{ fontSize: 22, marginBottom: 4 }}>{r.icon}</div>
                <div style={{ fontSize: 12, fontWeight: 700, color: "#BA7517", marginBottom: 3 }}>{r.title}</div>
                <div style={{ fontSize: 11, color: "#666", lineHeight: 1.5, whiteSpace: "pre-line" }}>{r.body}</div>
              </div>
            ))}
          </div>
          <div style={{ background: "#FAEEDA", borderLeft: "3px solid #BA7517", borderRadius: "0 9px 9px 0", padding: "10px 14px", fontSize: 12, color: "#633806", lineHeight: 1.7 }}>
            🎹 <strong>에이블톤에서 멜로디 찍는 법!</strong><br />
            피아노 롤 → Scale 버튼 ON → C장조 선택<br />
            → 노란 건반만 클릭하면 음 이탈 없이 멜로디 완성!
          </div>
        </div>
      );
    }
  },
  {
    id: 5, emoji: "🏗️", title: "노래 구조 만들기",
    color: "#185FA5", light: "#E6F1FB", dark: "#0C447C",
    render: () => {
      const [selSec, setSelSec] = useState(null);
      const sections = [
        { label: "인트로", bars: "4마디", color: "#888", desc: "곡의 시작이에요!\n드럼만 나오거나 아주 조용하게 시작해요.\n청중이 '어? 뭔 노래지?' 하게 만들어요 🤫", emoji: "🎬", energy: 2 },
        { label: "버스", bars: "8마디", color: "#7F77DD", desc: "이야기를 들려주는 부분이에요!\n드럼+베이스+멜로디가 모두 들어와요.\n코러스보다 조용해요 📖", emoji: "📝", energy: 5 },
        { label: "코러스", bars: "8마디", color: "#D85A30", desc: "가장 신나는 부분이에요!\n모든 악기가 최대로 나와요.\n'훅'이라고도 불러요 🔥", emoji: "🎉", energy: 9 },
        { label: "버스2", bars: "8마디", color: "#7F77DD", desc: "버스가 다시 나와요!\n조금 다른 내용이지만 비슷한 느낌이에요 📖", emoji: "📝", energy: 5 },
        { label: "코러스2", bars: "8마디", color: "#D85A30", desc: "코러스가 다시! 더 강하게!\n악기를 하나 더 추가해서 풍성하게 해요 🎊", emoji: "🎉", energy: 10 },
        { label: "아웃트로", bars: "4마디", color: "#888", desc: "곡이 끝나가요!\n소리가 서서히 작아지거나 갑자기 끊어요.\n'페이드아웃'이라고도 해요 👋", emoji: "🌅", energy: 2 },
      ];
      const sel = selSec !== null ? sections[selSec] : null;
      return (
        <div>
          <p style={{ fontSize: 13, color: "#555", lineHeight: 1.7, marginBottom: 12 }}>
            노래도 <strong>이야기처럼 순서</strong>가 있어요!<br />
            시작 → 중간 → 클라이맥스 → 끝 이런 흐름이에요 📚
          </p>
          {/* 구조 바 */}
          <div style={{ display: "flex", height: 60, borderRadius: 12, overflow: "hidden", marginBottom: 10, cursor: "pointer" }}>
            {sections.map((sec, i) => (
              <div key={i} onClick={() => setSelSec(selSec === i ? null : i)}
                style={{ flex: 1, background: selSec === i ? sec.color : `${sec.color}88`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", borderRight: "1px solid rgba(255,255,255,.2)", transition: "all .2s" }}>
                <div style={{ fontSize: 14 }}>{sec.emoji}</div>
                <div style={{ fontSize: 9, color: "#fff", fontWeight: 700, marginTop: 2 }}>{sec.label}</div>
              </div>
            ))}
          </div>
          {/* 에너지 그래프 */}
          <svg width="100%" viewBox="0 0 560 80" style={{ display: "block", marginBottom: 10 }}>
            <rect x={0} y={0} width={560} height={80} rx={8} fill="#f7f6f2" />
            <text x={8} y={15} fontSize={10} fill="#aaa">에너지</text>
            <path d={`M${[...sections.map((s,i)=>({x: 10+i*(540/5.5), y: 70-s.energy*6}))].map((p,i)=>i===0?`M${p.x} ${p.y}`:`L${p.x} ${p.y}`).join(" ")} L${10+(sections.length-1)*(540/5.5)} 70 L10 70 Z`}
              fill="#185FA520" />
            <path d={sections.map((s,i)=>({ x: 10+i*(540/5.5), y: 70-s.energy*6 })).map((p,i)=>i===0?`M${p.x} ${p.y}`:`L${p.x} ${p.y}`).join(" ")}
              fill="none" stroke="#185FA5" strokeWidth={2.5} strokeLinecap="round" />
            {sections.map((s,i)=>(
              <g key={i}>
                <circle cx={10+i*(540/5.5)} cy={70-s.energy*6} r={4} fill={s.color} />
                <text x={10+i*(540/5.5)} y={78} textAnchor="middle" fontSize={8} fill="#aaa">{s.label}</text>
              </g>
            ))}
          </svg>
          {sel ? (
            <div style={{ background: `${sel.color}18`, border: `2px solid ${sel.color}`, borderRadius: 12, padding: 14, fontSize: 13, color: "#333", lineHeight: 1.8, whiteSpace: "pre-line", marginBottom: 10 }}>
              <div style={{ fontSize: 20, marginBottom: 6 }}>{sel.emoji} <strong style={{ color: sel.color }}>{sel.label}</strong> ({sel.bars})</div>
              {sel.desc}
            </div>
          ) : (
            <div style={{ background: "#f7f6f2", borderRadius: 12, padding: 14, textAlign: "center", color: "#aaa", fontSize: 13, marginBottom: 10 }}>
              위 구간을 눌러보세요! ☝️
            </div>
          )}
          <div style={{ background: "#E6F1FB", borderLeft: "3px solid #185FA5", borderRadius: "0 9px 9px 0", padding: "10px 14px", fontSize: 12, color: "#0C447C", lineHeight: 1.7 }}>
            🏗️ <strong>에이블톤에서 구조 만드는 법!</strong><br />
            어레인지먼트 뷰에서 클립을 복사(<kbd style={{background:"#0C447C",color:"#fff",borderRadius:3,padding:"1px 5px",fontSize:10}}>Ctrl+D</kbd>)해서<br />
            각 섹션에 붙여넣기 하면 돼요!
          </div>
        </div>
      );
    }
  },
  {
    id: 6, emoji: "🎚️", title: "소리 다듬기 (믹싱)",
    color: "#993556", light: "#FBEAF0", dark: "#72243E",
    render: () => {
      const [vols, setVols] = useState({ drum: 75, bass: 65, chord: 55, melody: 60 });
      const tracks = [
        { key: "drum", label: "🥁 드럼", color: "#7F77DD", desc: "가장 중심!" },
        { key: "bass", label: "🎸 베이스", color: "#1D9E75", desc: "드럼보다 살짝 낮게" },
        { key: "chord", label: "🎹 코드", color: "#BA7517", desc: "배경 느낌으로" },
        { key: "melody", label: "🎵 멜로디", color: "#D85A30", desc: "잘 들려야 해요" },
      ];
      const rules = [
        { emoji: "🔊", title: "볼륨 균형", body: "드럼이 제일 크고\n베이스 → 멜로디 → 코드 순서로 조절해요" },
        { emoji: "✂️", title: "EQ (이퀄라이저)", body: "악기마다 자기 주파수 영역이 있어요.\n겹치면 뭉개지니까 잘라줘요" },
        { emoji: "🏛️", title: "리버브", body: "소리에 공간감을 주는 거예요.\n샤워실에서 노래하는 것처럼 울림을 추가해요" },
        { emoji: "⚡", title: "컴프레서", body: "너무 큰 소리를 자동으로 눌러줘요.\n음량이 고르게 유지돼요" },
      ];
      return (
        <div>
          <p style={{ fontSize: 13, color: "#555", lineHeight: 1.7, marginBottom: 12 }}>
            믹싱은 <strong>모든 소리의 볼륨과 색깔을 조절</strong>하는 거예요!<br />
            요리로 치면 간을 맞추는 것 같아요 🍳
          </p>
          {/* 가상 믹서 */}
          <div style={{ background: "#1a1a1a", borderRadius: 12, padding: 14, marginBottom: 14 }}>
            <div style={{ fontSize: 11, color: "#888", marginBottom: 12, textAlign: "center" }}>🎚️ 슬라이더를 움직여서 볼륨을 조절해봐요!</div>
            {tracks.map(t => (
              <div key={t.key} style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
                <div style={{ width: 70, fontSize: 11, color: t.color, fontWeight: 600, flexShrink: 0 }}>{t.label}</div>
                <input type="range" min={0} max={100} value={vols[t.key]}
                  onChange={e => setVols(v => ({ ...v, [t.key]: +e.target.value }))}
                  style={{ flex: 1, accentColor: t.color }} />
                <div style={{ width: 32, height: 32, borderRadius: 6, background: t.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, color: "#fff", flexShrink: 0 }}>
                  {vols[t.key]}
                </div>
                <div style={{ width: 80, height: 10, background: "#333", borderRadius: 5, overflow: "hidden", flexShrink: 0 }}>
                  <div style={{ height: "100%", width: `${vols[t.key]}%`, background: t.color, transition: "width .1s" }} />
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 12 }}>
            {rules.map((r, i) => (
              <div key={i} style={{ background: "#f7f6f2", borderRadius: 10, padding: "10px 12px" }}>
                <div style={{ fontSize: 22, marginBottom: 4 }}>{r.emoji}</div>
                <div style={{ fontSize: 12, fontWeight: 700, color: "#993556", marginBottom: 3 }}>{r.title}</div>
                <div style={{ fontSize: 11, color: "#666", lineHeight: 1.5, whiteSpace: "pre-line" }}>{r.body}</div>
              </div>
            ))}
          </div>
          <div style={{ background: "#fff3cd", borderRadius: 12, padding: 14, fontSize: 13, color: "#7a5c00", lineHeight: 1.7 }}>
            ⚠️ <strong>마스터 볼륨 조심!</strong><br />
            마스터 트랙 미터가 빨간색 = 소리 깨짐!<br />
            빨간불 켜지면 각 트랙 볼륨을 낮춰야 해요 🔴
          </div>
        </div>
      );
    }
  },
  {
    id: 7, emoji: "⌨️", title: "꼭 외울 단축키",
    color: "#1D9E75", light: "#E1F5EE", dark: "#085041",
    render: () => {
      const [quiz, setQuiz] = useState(false);
      const [qIdx, setQIdx] = useState(0);
      const [sel, setSel] = useState(null);
      const shortcuts = [
        { key: "Space", desc: "▶ 재생 / ■ 정지", emoji: "▶️" },
        { key: "Tab", desc: "세션 뷰 ↔ 어레인지 뷰 전환", emoji: "🔄" },
        { key: "Ctrl + Z", desc: "실수 되돌리기 (취소)", emoji: "↩️" },
        { key: "Ctrl + S", desc: "저장하기", emoji: "💾" },
        { key: "Ctrl + D", desc: "클립 복제", emoji: "📋" },
        { key: "Ctrl + A", desc: "전체 선택", emoji: "☑️" },
        { key: "Ctrl + U", desc: "퀀타이즈 (박자 정렬)", emoji: "📐" },
        { key: "Ctrl + ,", desc: "설정(Preferences) 열기", emoji: "⚙️" },
        { key: "M", desc: "컴퓨터 키보드로 피아노 연주", emoji: "🎹" },
        { key: "Ctrl + Shift + R", desc: "완성 파일 내보내기(Export)", emoji: "📤" },
      ];
      const quizItems = [
        { q: "실수했을 때 되돌리려면?", a: "Ctrl + Z", opts: ["Ctrl + Z", "Ctrl + S", "Tab", "Space"] },
        { q: "저장할 때 쓰는 단축키는?", a: "Ctrl + S", opts: ["Ctrl + D", "Ctrl + S", "Ctrl + A", "Ctrl + Z"] },
        { q: "재생/정지 단축키는?", a: "Space", opts: ["Tab", "M", "Space", "Ctrl + D"] },
        { q: "두 뷰를 전환하는 단축키는?", a: "Tab", opts: ["Space", "Tab", "Ctrl + Z", "M"] },
        { q: "파일을 내보낼 때는?", a: "Ctrl + Shift + R", opts: ["Ctrl + S", "Ctrl + D", "Ctrl + Shift + R", "Ctrl + A"] },
      ];
      const q = quizItems[qIdx];
      const handleAns = (ans) => {
        setSel(ans);
        setTimeout(() => {
          if (qIdx < quizItems.length - 1) { setQIdx(i => i + 1); setSel(null); }
          else { setQuiz(false); setQIdx(0); setSel(null); }
        }, 1200);
      };
      return (
        <div>
          <p style={{ fontSize: 13, color: "#555", lineHeight: 1.7, marginBottom: 12 }}>
            이 단축키들만 외워도 작업 속도가 <strong>2배 빨라져요!</strong><br />
            처음엔 외우기 어렵지만 쓰다 보면 손이 기억해요 🤚
          </p>
          {!quiz ? (
            <>
              <div style={{ display: "flex", flexDirection: "column", gap: 6, marginBottom: 14 }}>
                {shortcuts.map((s, i) => (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", background: "#f7f6f2", borderRadius: 10 }}>
                    <span style={{ fontSize: 18, flexShrink: 0 }}>{s.emoji}</span>
                    <div style={{ display: "flex", gap: 4, flexShrink: 0 }}>
                      {s.key.split(" + ").map((k, j) => (
                        <span key={j}>{j > 0 && <span style={{ color: "#aaa", fontSize: 11 }}>+</span>}
                          <kbd style={{ background: "#1a1a1a", color: "#fff", border: "1px solid #444", borderBottom: "2px solid #333", borderRadius: 5, padding: "2px 7px", fontSize: 11, fontFamily: "monospace" }}>{k}</kbd>
                        </span>
                      ))}
                    </div>
                    <span style={{ fontSize: 12, color: "#555", flex: 1 }}>{s.desc}</span>
                  </div>
                ))}
              </div>
              <button onClick={() => { setQuiz(true); setQIdx(0); setSel(null); }}
                style={{ width: "100%", padding: 13, borderRadius: 12, border: "none", background: "#1D9E75", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" }}>
                🧠 단축키 퀴즈 풀기!
              </button>
            </>
          ) : (
            <div style={{ background: "#f7f6f2", borderRadius: 14, padding: 16 }}>
              <div style={{ fontSize: 12, color: "#888", marginBottom: 4 }}>문제 {qIdx + 1} / {quizItems.length}</div>
              <div style={{ height: 4, background: "#e0e0e0", borderRadius: 2, overflow: "hidden", marginBottom: 14 }}>
                <div style={{ height: "100%", width: `${(qIdx / quizItems.length) * 100}%`, background: "#1D9E75", borderRadius: 2 }} />
              </div>
              <div style={{ fontSize: 15, fontWeight: 700, color: "#111", marginBottom: 14, textAlign: "center" }}>{q.q}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {q.opts.map((opt, i) => {
                  const isAns = opt === q.a;
                  const isSel = sel === opt;
                  let bg = "#fff", border = "#ddd", color = "#333";
                  if (sel !== null) {
                    if (isAns) { bg = "#E1F5EE"; border = "#1D9E75"; color = "#085041"; }
                    else if (isSel) { bg = "#FCEBEB"; border = "#E24B4A"; color = "#791F1F"; }
                    else { bg = "#f0f0f0"; color = "#aaa"; }
                  }
                  return (
                    <button key={i} onClick={() => sel === null && handleAns(opt)}
                      style={{ padding: "12px 14px", borderRadius: 10, border: `1.5px solid ${border}`, background: bg, color, fontSize: 13, fontFamily: "monospace", fontWeight: 600, cursor: sel === null ? "pointer" : "default" }}>
                      {opt}
                    </button>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      );
    }
  },
  {
    id: 8, emoji: "🚀", title: "첫 곡 만들기 순서",
    color: "#D85A30", light: "#FAECE7", dark: "#712B13",
    render: () => {
      const [done, setDone] = useState(Array(12).fill(false));
      const toggle = i => setDone(d => d.map((v, idx) => idx === i ? !v : v));
      const doneCount = done.filter(Boolean).length;
      const steps = [
        { group: "🔧 준비", color: "#7F77DD", items: ["에이블톤 켜기", "Preferences → ASIO 드라이버 설정", "새 프로젝트 만들고 저장 (Ctrl+S)"] },
        { group: "🥁 드럼", color: "#1D9E75", items: ["MIDI 트랙 추가 (Ctrl+Shift+T)", "파일 창 → Drums → 킷 드래그", "8마디 클립 만들고 킥·스네어·하이햇 찍기"] },
        { group: "🎵 음악", color: "#BA7517", items: ["코드 트랙 추가 → 악기 로드", "피아노 롤 → Scale ON → 코드 입력", "멜로디 트랙 추가 → 멜로디 찍기"] },
        { group: "🏗️ 완성", color: "#D85A30", items: ["어레인지먼트 뷰에서 구조 배치 (Tab)", "오토메이션으로 볼륨 조절 (A키)", "Ctrl+Shift+R → WAV로 Export!"] },
      ];
      let idx = 0;
      return (
        <div>
          <div style={{ background: "#FAECE7", borderRadius: 14, padding: 16, textAlign: "center", marginBottom: 16 }}>
            <div style={{ fontSize: 40, marginBottom: 6 }}>🎼</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: "#712B13" }}>첫 곡 완성 도전!</div>
            <div style={{ fontSize: 13, color: "#993C1D", marginTop: 4 }}>아래 단계를 순서대로 하면 곡이 완성돼요!</div>
          </div>
          {/* 진행률 */}
          <div style={{ background: "#f7f6f2", borderRadius: 12, padding: "10px 14px", marginBottom: 14, display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ flex: 1 }}>
              <div style={{ height: 8, background: "#e0e0e0", borderRadius: 4, overflow: "hidden" }}>
                <div style={{ height: "100%", width: `${doneCount / 12 * 100}%`, background: doneCount === 12 ? "#1D9E75" : "#D85A30", borderRadius: 4, transition: "width .3s" }} />
              </div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: doneCount === 12 ? "#1D9E75" : "#D85A30" }}>{doneCount}/12</div>
          </div>
          {steps.map((grp, gi) => (
            <div key={gi} style={{ marginBottom: 14 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: grp.color, marginBottom: 7 }}>{grp.group}</div>
              {grp.items.map((item, ii) => {
                const i = idx++;
                return (
                  <div key={ii} onClick={() => toggle(i)}
                    style={{ display: "flex", alignItems: "flex-start", gap: 10, padding: "11px 13px", background: done[i] ? "#E1F5EE" : "#fff", borderRadius: 11, marginBottom: 6, border: `1.5px solid ${done[i] ? "#1D9E75" : "#eee"}`, cursor: "pointer", transition: "all .2s" }}>
                    <div style={{ width: 24, height: 24, borderRadius: "50%", background: done[i] ? "#1D9E75" : grp.color + "33", border: `2px solid ${done[i] ? "#1D9E75" : grp.color}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: 12, fontWeight: 700, color: done[i] ? "#fff" : grp.color, marginTop: 1 }}>
                      {done[i] ? "✓" : i + 1}
                    </div>
                    <span style={{ fontSize: 13, color: done[i] ? "#085041" : "#333", textDecoration: done[i] ? "line-through" : "none", lineHeight: 1.5 }}>{item}</span>
                  </div>
                );
              })}
            </div>
          ))}
          {doneCount === 12 && (
            <div style={{ background: "linear-gradient(135deg, #E1F5EE, #EEEDFE)", borderRadius: 14, padding: 20, textAlign: "center" }}>
              <div style={{ fontSize: 48, marginBottom: 8 }}>🎉</div>
              <div style={{ fontSize: 18, fontWeight: 700, color: "#085041", marginBottom: 4 }}>첫 곡 완성! 대단해요!</div>
              <div style={{ fontSize: 13, color: "#3C3489", lineHeight: 1.7 }}>이제 진짜 음악 프로듀서가 됐어요!<br />계속 만들다 보면 실력이 쑥쑥 늘어요 🚀</div>
            </div>
          )}
        </div>
      );
    }
  },
];

export default function App() {
  const [active, setActive] = useState(0);
  const ch = chapters[active];
  return (
    <div style={{ maxWidth: 520, margin: "0 auto", padding: 12, fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" }}>
      {/* 헤더 */}
      <div style={{ background: "#fff", borderRadius: 16, padding: "16px 18px", marginBottom: 10, boxShadow: "0 2px 8px rgba(0,0,0,.08)" }}>
        <div style={{ fontSize: 11, color: "#aaa", marginBottom: 3 }}>초등학생도 OK! 에이블톤 기초</div>
        <div style={{ fontSize: 20, fontWeight: 800, color: "#111", marginBottom: 2 }}>🎼 음악 만들기 첫걸음</div>
        <div style={{ fontSize: 12, color: "#888" }}>{active + 1}/{chapters.length} — {ch.title}</div>
        <div style={{ height: 4, background: "#eee", borderRadius: 2, marginTop: 8, overflow: "hidden" }}>
          <div style={{ height: "100%", width: `${(active + 1) / chapters.length * 100}%`, background: ch.color, borderRadius: 2, transition: "width .4s" }} />
        </div>
      </div>
      {/* 탭 */}
      <div style={{ display: "flex", gap: 5, overflowX: "auto", marginBottom: 10, paddingBottom: 6 }}>
        {chapters.map((c, i) => (
          <button key={i} onClick={() => setActive(i)}
            style={{ flexShrink: 0, padding: "7px 12px", borderRadius: 20, border: `2px solid ${active === i ? c.color : "#e0e0e0"}`, background: active === i ? c.light : "#fff", color: active === i ? c.color : "#888", fontSize: 12, fontWeight: active === i ? 700 : 400, cursor: "pointer", whiteSpace: "nowrap" }}>
            {c.emoji} {c.title.split(" ")[0]}
          </button>
        ))}
      </div>
      {/* 카드 */}
      <div style={{ background: "#fff", borderRadius: 18, padding: 20, boxShadow: "0 2px 8px rgba(0,0,0,.08)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18, paddingBottom: 14, borderBottom: "1.5px solid #f0f0f0" }}>
          <div style={{ width: 50, height: 50, borderRadius: 14, background: ch.light, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 26, flexShrink: 0 }}>{ch.emoji}</div>
          <div>
            <div style={{ fontSize: 18, fontWeight: 800, color: "#111" }}>{ch.title}</div>
            <div style={{ fontSize: 12, color: ch.color, fontWeight: 500, marginTop: 1 }}>{ch.subtitle}</div>
          </div>
        </div>
        <ch.render />
      </div>
      {/* 이전/다음 */}
      <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
        {active > 0 && (
          <button onClick={() => setActive(a => a - 1)}
            style={{ flex: 1, padding: 13, borderRadius: 12, border: "1.5px solid #e0e0e0", background: "#fff", color: "#888", fontSize: 13, cursor: "pointer", fontWeight: 600 }}>
            ← {chapters[active - 1].emoji} 이전
          </button>
        )}
        {active < chapters.length - 1 && (
          <button onClick={() => setActive(a => a + 1)}
            style={{ flex: 1, padding: 13, borderRadius: 12, border: "none", background: ch.color, color: "#fff", fontSize: 14, fontWeight: 800, cursor: "pointer" }}>
            다음: {chapters[active + 1].emoji} {chapters[active + 1].title} →
          </button>
        )}
      </div>
    </div>
  );
}