/* @jsx React.createElement */
/* Method — 3-layer progress system (Level Journey + Skill Radar + Milestone Badges) */

const LEVELS = [
  { id: 0, short: 'Pre',   long: 'Pre-Beginner',   weeks: '1–4',  desc: 'Adaptasi dulu. Posisi tangan, posture, suara pertama.' },
  { id: 1, short: 'B1',    long: 'Beginner 1',     weeks: '5–16', desc: 'Lagu asli mulai masuk. Chord, beat, melodi dasar.' },
  { id: 2, short: 'B2',    long: 'Beginner 2',     weeks: '17–36',desc: 'Udah bisa main. Teknik makin tight, kuping makin tajem.' },
  { id: 3, short: 'P1',    long: 'Performance 1',  weeks: '37–60',desc: 'Studio session pertama. Naik panggung beneran.' },
  { id: 4, short: 'P2',    long: 'Performance 2',  weeks: '60+',  desc: 'Punya karakter sendiri. Improvisasi, theory deep-dive.' },
  { id: 5, short: 'P3',    long: 'Performance 3',  weeks: '∞',    desc: 'Kamu ngajar sebanyak kamu belajar. Mentor track (optional).' },
];

function MethodSection() {
  const [activeLevel, setActiveLevel] = React.useState(2);
  const lvl = LEVELS[activeLevel];

  return (
    <section id="method" style={{ background: 'var(--page-surface)', borderTop: '1px solid var(--page-border)', borderBottom: '1px solid var(--page-border)' }}>
      <div className="ims-section">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
          <div style={{ maxWidth: 720 }}>
            <div className="ims-eyebrow">Metode IMS · A + B + C</div>
            <h2 className="ims-heading" style={{ fontSize: 56, marginTop: 14 }}>
              Tiga cara liat progress kamu yang <span style={{ color: 'var(--accent-ims)' }}>beneran</span>.
            </h2>
            <p className="ims-lede" style={{ marginTop: 16 }}>
              Sekolah lain biasanya cuma bilang "good job" terus selesai. Kita bikin progress kelihatan —
              tanpa bikin kayak ujian. Tiga lensa, satu arah.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Pill>A · Level</Pill>
            <Pill>B · Radar</Pill>
            <Pill>C · Badges</Pill>
          </div>
        </div>

        {/* A — Level Journey */}
        <SectionLabel n="A" title="Level Journey" desc="Enam milestone jujur dari chord pertama sampai ngajarin orang lain." />
        <LevelJourney levels={LEVELS} active={activeLevel} onSelect={setActiveLevel} current={lvl} />

        {/* B — Skill Radar */}
        <SectionLabel n="B" title="Skill Radar" desc="Enam dimensi per instrumen, di-score tiap session. Bentuknya tumbuh bareng kamu." style={{ marginTop: 80 }} />
        <SkillRadarBlock />

        {/* C — Milestone Badges */}
        <SectionLabel n="C" title="Milestone Badges" desc="Pencapaian konkret, di-unlock sama Andre kalau kamu beneran udah bisa." style={{ marginTop: 80 }} />
        <BadgesBlock />
      </div>
    </section>
  );
}

function Pill({ children }) {
  return (
    <span style={{
      padding: '6px 14px', borderRadius: 999,
      background: 'var(--ims-red-tint)', color: 'var(--accent-ims)',
      fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)',
      border: '1px solid var(--ims-red-soft)',
    }}>{children}</span>
  );
}

function SectionLabel({ n, title, desc, style = {} }) {
  return (
    <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start', marginBottom: 28, ...style }}>
      <div style={{
        width: 44, height: 44, borderRadius: '50%',
        background: 'var(--accent-ims)', color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: 1, flexShrink: 0,
        border: '1.5px solid var(--page-ink)', boxShadow: '3px 3px 0 var(--page-ink)',
      }}>{n}</div>
      <div>
        <h3 className="ims-heading" style={{ fontSize: 28, marginBottom: 6 }}>{title}</h3>
        <p style={{ color: 'var(--page-ink-2)', fontSize: 15, margin: 0, lineHeight: 1.55, maxWidth: 620 }}>{desc}</p>
      </div>
    </div>
  );
}

/* ─── A — Level Journey (interactive line) ─── */
function LevelJourney({ levels, active, onSelect, current }) {
  return (
    <div style={{
      padding: '36px 12px 28px',
      background: 'var(--page-bg)',
      border: '1px solid var(--page-border)',
      borderRadius: 10,
    }}>
      <div className="level-rail-wrap" style={{ position: 'relative', padding: '0 40px 24px' }}>
        {/* Rail */}
        <div style={{ position: 'absolute', left: 60, right: 60, top: 30, height: 2, background: 'var(--page-border)' }} />
        {/* Filled rail to active */}
        <div style={{
          position: 'absolute', left: 60, top: 30, height: 2,
          background: 'var(--accent-ims)',
          width: `calc((100% - 120px) * ${active / (levels.length - 1)})`,
          transition: 'width 320ms var(--ease-out)',
        }} />
        {/* Nodes */}
        <div className="r-level-rail" style={{ gap: 0, position: 'relative' }}>
          {levels.map((l, i) => {
            const isActive = i === active;
            const isPast = i < active;
            return (
              <button key={l.id} onClick={() => onSelect(i)} style={{
                all: 'unset', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
                paddingTop: 4,
              }}>
                <div style={{
                  width: isActive ? 56 : 36, height: isActive ? 56 : 36, borderRadius: '50%',
                  background: isActive ? 'var(--accent-ims)' : (isPast ? 'var(--ims-red-soft)' : 'var(--page-surface)'),
                  border: `1.5px solid ${isActive || isPast ? 'var(--page-ink)' : 'var(--page-border-strong)'}`,
                  color: isActive ? '#fff' : (isPast ? 'var(--accent-ims)' : 'var(--page-ink-3)'),
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontSize: isActive ? 18 : 13, lineHeight: 1,
                  marginTop: isActive ? -10 : 0,
                  boxShadow: isActive ? '3px 3px 0 var(--page-ink)' : 'none',
                  transition: 'all 220ms var(--ease-out)',
                }}>
                  {l.short}
                </div>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: isActive ? 'var(--page-ink)' : 'var(--page-ink-2)', lineHeight: 1.2 }}>{l.long}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--page-ink-3)', marginTop: 4 }}>Week {l.weeks}</div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
      {/* Active level description */}
      <div key={current.id} style={{
        margin: '20px 24px 0', padding: 24,
        borderTop: '1px solid var(--page-border)',
        animation: 'fade-up 240ms var(--ease-out)',
        display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 700, color: 'var(--accent-ims)' }}>Lagi di</span>
          <span className="ims-display" style={{ fontSize: 34, letterSpacing: '0.01em' }}>{current.long}</span>
        </div>
        <p style={{ flex: 1, fontSize: 15, color: 'var(--page-ink-2)', margin: 0, lineHeight: 1.55, minWidth: 280 }}>{current.desc}</p>
        <span className="mono" style={{ fontSize: 13, color: 'var(--page-ink-3)' }}>Step {current.id + 1} / 6</span>
      </div>
    </div>
  );
}

/* ─── B — Skill Radar (animated chart) ─── */

const RADAR_DATA = {
  guitar: { skills: ['Chord', 'Rhythm', 'Melody', 'Technique', 'Ear', 'Theory'], start: [1, 1, 1, 1, 1, 1], now: [4, 3.5, 3, 3.2, 2.8, 2.5] },
  piano:  { skills: ['L.Hand', 'R.Hand', 'Coord.', 'Rhythm', 'Ear', 'Theory'],   start: [1, 1, 1, 1, 1, 1], now: [3.2, 4, 3.5, 3.5, 3, 2.8] },
  drum:   { skills: ['Power', 'Rhythm', 'Coord.', 'Tempo', 'Dynamics', 'Fills'], start: [1, 1, 1, 1, 1, 1], now: [4, 3.5, 3, 4, 2.8, 3.2] },
  bass:   { skills: ['Finger', 'Rhythm', 'Groove', 'Tech.', 'Ear', 'Theory'],    start: [1, 1, 1, 1, 1, 1], now: [3.8, 3.5, 4, 3, 3.2, 2.5] },
  vocal:  { skills: ['Pitch', 'Breath', 'Tone', 'Rhythm', 'Express', 'Ear'],     start: [1, 1, 1, 1, 1, 1], now: [3.5, 3.8, 3.2, 3, 4, 3] },
};

function SkillRadarBlock() {
  const [inst, setInst] = React.useState('guitar');
  const [showNow, setShowNow] = React.useState(false);
  const data = RADAR_DATA[inst];

  React.useEffect(() => {
    setShowNow(false);
    const t = setTimeout(() => setShowNow(true), 200);
    return () => clearTimeout(t);
  }, [inst]);

  return (
    <div className="r-grid-2" data-ratio="art-copy" style={{ gap: 32 }}>
      {/* Radar chart */}
      <div className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 6 }}>
          {Object.keys(RADAR_DATA).map(k => (
            <button key={k} onClick={() => setInst(k)} style={{
              all: 'unset', cursor: 'pointer',
              padding: '6px 12px', borderRadius: 999,
              background: k === inst ? 'var(--page-ink)' : 'transparent',
              color: k === inst ? 'var(--page-surface)' : 'var(--page-ink-2)',
              border: `1px solid ${k === inst ? 'var(--page-ink)' : 'var(--page-border)'}`,
              fontSize: 12, fontWeight: 600, textTransform: 'capitalize',
              transition: 'all 180ms var(--ease-out)',
            }}>{k}</button>
          ))}
        </div>
        <RadarSVG skills={data.skills} start={data.start} now={showNow ? data.now : data.start} />
        <div style={{ display: 'flex', gap: 18, fontSize: 12, color: 'var(--page-ink-2)', marginTop: 4 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 10, height: 10, background: 'var(--page-border-strong)', borderRadius: 2 }} /> Minggu 1
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 10, height: 10, background: 'var(--accent-ims)', borderRadius: 2 }} /> Minggu 32
          </span>
        </div>
      </div>
      {/* Right: explanation */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <RadarPoint
          n="01" title="Dua score tiap session"
          desc="Mastery (1–5) dan Attitude (1–5). Dua-duanya penting. Effort juga ke-track."
        />
        <RadarPoint
          n="02" title="Keliatan minggu demi minggu"
          desc="Bentuknya berubah. Yang kuat menonjol. Yang lemah tetep jujur sampai kamu isi."
        />
        <RadarPoint
          n="03" title="Punya kamu, di Member App"
          desc="Buka INDIE Member app, tap instrumen, liat chart-nya. Orang tua juga liat."
        />
        <RadarPoint
          n="04" title="Nggak ada ujian “mendadak”"
          desc="Radar = percakapan. Kamu selalu tahu posisi kamu di mana."
        />
      </div>
    </div>
  );
}

function RadarPoint({ n, title, desc }) {
  return (
    <div style={{ display: 'flex', gap: 18, padding: '18px 0', borderBottom: '1px solid var(--page-border)' }}>
      <div className="mono" style={{ fontSize: 14, color: 'var(--accent-ims)', fontWeight: 700, flexShrink: 0 }}>{n}</div>
      <div>
        <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--page-ink)', marginBottom: 4 }}>{title}</div>
        <div style={{ fontSize: 14, color: 'var(--page-ink-2)', lineHeight: 1.55 }}>{desc}</div>
      </div>
    </div>
  );
}

function RadarSVG({ skills, start, now }) {
  const size = 320;
  const cx = size / 2, cy = size / 2;
  const max = 5;
  const radius = 110;
  const n = skills.length;

  const pointFor = (val, i) => {
    const angle = (Math.PI * 2 * i) / n - Math.PI / 2;
    const r = (val / max) * radius;
    return [cx + Math.cos(angle) * r, cy + Math.sin(angle) * r];
  };

  const labelFor = (i) => {
    const angle = (Math.PI * 2 * i) / n - Math.PI / 2;
    const r = radius + 22;
    return [cx + Math.cos(angle) * r, cy + Math.sin(angle) * r];
  };

  const polygon = (data) => data.map((v, i) => pointFor(v, i).join(',')).join(' ');

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      {/* Concentric polygons */}
      {[1, 2, 3, 4, 5].map(level => {
        const pts = skills.map((_, i) => pointFor(level, i).join(',')).join(' ');
        return <polygon key={level} points={pts} fill="none" stroke="var(--page-border)" strokeWidth="1" />;
      })}
      {/* Axes */}
      {skills.map((_, i) => {
        const [x, y] = pointFor(max, i);
        return <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke="var(--page-border)" strokeWidth="1" />;
      })}
      {/* Start polygon */}
      <polygon points={polygon(start)} fill="var(--page-border-strong)" fillOpacity="0.18" stroke="var(--page-border-strong)" strokeWidth="1.5" strokeDasharray="4 4" />
      {/* Now polygon — animated */}
      <polygon
        points={polygon(now)}
        fill="var(--accent-ims)" fillOpacity="0.22"
        stroke="var(--accent-ims)" strokeWidth="2"
        style={{ transition: 'all 600ms var(--ease-out)' }}
      />
      {/* Now points */}
      {now.map((v, i) => {
        const [x, y] = pointFor(v, i);
        return <circle key={i} cx={x} cy={y} r="3.5" fill="var(--accent-ims)" stroke="var(--page-surface)" strokeWidth="1.5" style={{ transition: 'all 600ms var(--ease-out)' }} />;
      })}
      {/* Labels */}
      {skills.map((s, i) => {
        const [x, y] = labelFor(i);
        return (
          <text key={s} x={x} y={y} textAnchor="middle" dominantBaseline="middle"
                fontSize="11" fontWeight="600" fill="var(--page-ink)" fontFamily="var(--font-sans)">
            {s}
          </text>
        );
      })}
    </svg>
  );
}

/* ─── C — Milestone Badges (sample) ─── */

const SAMPLE_BADGES = [
  { id: 'first-chord',   title: 'Chord pertama yang clean',     unlock: 'Beginner 1', earned: true },
  { id: 'first-fill',    title: 'Drum fill pertama',       unlock: 'Beginner 1', earned: true },
  { id: 'song-end-to-end',title:'Satu lagu full, tanpa berhenti',unlock: 'Beginner 2', earned: true },
  { id: 'lock-in',       title: 'Lock-in sama band', unlock: 'Beginner 2', earned: false, progress: 0.6 },
  { id: 'first-stage',   title: 'Live performance pertama', unlock: 'Performance 1', earned: false, progress: 0.3 },
  { id: 'recording',     title: 'Take rekaman studio',   unlock: 'Performance 1', earned: false, progress: 0.1 },
  { id: 'arrange',       title: 'Aransemen lagu sendiri',  unlock: 'Performance 2', earned: false },
  { id: 'mentor',        title: 'Mentor murid baru',   unlock: 'Performance 3', earned: false },
];

function BadgesBlock() {
  return (
    <div className="r-grid-4" style={{ gap: 14 }}>
      {SAMPLE_BADGES.map(b => (
        <div key={b.id} className="card" style={{
          padding: 20, position: 'relative', overflow: 'hidden',
          opacity: b.earned ? 1 : 0.85,
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: '50%',
            background: b.earned ? 'var(--accent-ims)' : 'var(--page-bg)',
            border: `1.5px solid ${b.earned ? 'var(--page-ink)' : 'var(--page-border-strong)'}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: b.earned ? '#fff' : 'var(--page-ink-3)',
            marginBottom: 14,
            boxShadow: b.earned ? '3px 3px 0 var(--page-ink)' : 'none',
          }}>
            {b.earned ? (
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                <polyline points="5 12 10 17 19 7" />
              </svg>
            ) : (
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                <rect x="4" y="11" width="16" height="10" rx="2" />
                <path d="M8 11 V7 a4 4 0 0 1 8 0 v4" />
              </svg>
            )}
          </div>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--page-ink)', lineHeight: 1.3, marginBottom: 6 }}>{b.title}</div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: 'var(--page-ink-3)', fontWeight: 600 }}>
            {b.unlock}
          </div>
          {!b.earned && b.progress !== undefined && (
            <div style={{ marginTop: 14, height: 4, borderRadius: 2, background: 'var(--page-border)', overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${b.progress * 100}%`, background: 'var(--accent-ims)' }} />
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { MethodSection });