/* @jsx React.createElement */
/* Instrument Picker — interactive: click instrument, content swaps */

const INSTRUMENTS = [
  {
    id: 'guitar',
    name: 'Guitar',
    jp: 'ギター',
    blurb: 'Dari open chord pertama sampai fingerstyle solo. Akustik, elektrik, klasik — pilih gitar kamu.',
    skills: ['Chord', 'Rhythm', 'Melody', 'Technique', 'Ear Training', 'Theory'],
    teachers: 1,
    starters: ['Posisi jari yang baik dan benar', 'Pola strumming', 'Langsung praktek lagu'],
    icon: 'guitar',
  },
  {
    id: 'piano',
    name: 'Piano',
    jp: 'ピアノ',
    blurb: 'Koordinasi dua tangan, pengenalan chord dan scale, belajar teori dasar. Pop dan lainnya.',
    skills: ['Left Hand', 'Right Hand', 'Coordination', 'Rhythm', 'Ear Training', 'Theory'],
    teachers: 1,
    starters: ['Latihan tangan independen', 'Baca not angka dan not balok', 'Mainin lagu sesuai karakter murid'],
    icon: 'piano',
  },
  {
    id: 'drum',
    name: 'Drum',
    jp: 'ドラム',
    blurb: 'Koordinasi tangan dan kaki, belajar notasi balok. Rock dan Pop.',
    skills: ['Bass & Snare', 'Hi-Hat', 'Coordination', 'Tempo', 'Dynamics', 'Fill Pattern'],
    teachers: 1,
    starters: ['Posisi sticking', 'Groove basic 4/4', 'Drum fill pertama kamu'],
    icon: 'drum',
  },
  {
    id: 'bass',
    name: 'Bass',
    jp: 'ベース',
    blurb: 'Feel, groove, fondasi dalam sebuah lagu. Pop dan Rock.',
    skills: ['Fingering', 'Rhythm', 'Groove', 'Technique', 'Ear Training', 'Theory'],
    teachers: 1,
    starters: ['Petik dua jari yang stabil', 'Lock sama drum', 'Bass pattern pada sebuah lagu'],
    icon: 'bass',
  },
  {
    id: 'vocal',
    name: 'Vocal',
    jp: 'ボーカル',
    blurb: 'Cari suara asli kamu. Napas, pitch, tone — plus pede pakainya.',
    skills: ['Pitch', 'Breath Control', 'Tone', 'Rhythm', 'Expression', 'Ear Training'],
    teachers: 1,
    starters: ['Diaphragmatic breathing', 'Latihan matching pitch', 'Praktek lagu sederhana'],
    icon: 'vocal',
  },
];

function InstrumentPicker() {
  const [active, setActive] = React.useState('guitar');
  const inst = INSTRUMENTS.find(i => i.id === active);

  return (
    <section id="programs" className="ims-section">
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 40 }}>
        <div>
          <div className="ims-eyebrow">Pilih instrumen kamu</div>
          <h2 className="ims-heading" style={{ fontSize: 56, marginTop: 14, maxWidth: 720 }}>
            Lima instrumen. <span style={{ color: 'var(--accent-ims)' }}>Enam skill dimension per instrumen.</span>
          </h2>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: 'var(--page-ink-3)' }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent-ims)' }} />
          <span>Tap salah satu buat liat detailnya</span>
        </div>
      </div>

      {/* Instrument tabs */}
      <div className="r-grid-5" style={{
        gap: 10,
        marginBottom: 32,
      }}>
        {INSTRUMENTS.map(i => {
          const on = i.id === active;
          return (
            <button key={i.id} onClick={() => setActive(i.id)} style={{
              all: 'unset', cursor: 'pointer',
              padding: '22px 20px',
              background: on ? 'var(--accent-ims)' : 'var(--page-surface)',
              color: on ? '#fff' : 'var(--page-ink)',
              border: `1.5px solid ${on ? 'var(--page-ink)' : 'var(--page-border)'}`,
              borderRadius: 10,
              display: 'flex', alignItems: 'center', gap: 14,
              boxShadow: on ? '4px 4px 0 var(--page-ink)' : 'none',
              transform: on ? 'translate(-2px, -2px)' : 'translate(0, 0)',
              transition: 'all 180ms var(--ease-out)',
            }}>
              <InstrumentGlyph kind={i.icon} color={on ? '#fff' : 'var(--page-ink)'} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, textTransform: 'uppercase', lineHeight: 1, letterSpacing: '0.01em' }}>{i.name}</span>
                <span className="jp" style={{ fontSize: 11, fontWeight: 500, opacity: on ? 0.85 : 0.65 }}>{i.jp}</span>
              </div>
            </button>
          );
        })}
      </div>

      {/* Active panel */}
      <div key={active} className="r-grid-2" data-ratio="copy-art" style={{
        gap: 32,
        animation: 'fade-up 280ms var(--ease-out)',
      }}>
        {/* Left: copy + starters */}
        <div className="card" style={{ padding: 36 }}>
          <div className="ims-eyebrow" style={{ color: 'var(--accent-ims)' }}>{inst.name} · {inst.jp}</div>
          <h3 className="ims-heading" style={{ fontSize: 30, marginTop: 14, marginBottom: 16 }}>
            Apa yang kamu lakuin di bulan pertama.
          </h3>
          <p style={{ color: 'var(--page-ink-2)', fontSize: 16, lineHeight: 1.65, margin: '0 0 24px' }}>{inst.blurb}</p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
            {inst.starters.map((s, i) => (
              <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div className="mono" style={{
                  width: 30, height: 30, borderRadius: 4,
                  background: 'var(--ims-red-tint)', color: 'var(--accent-ims)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 13, fontWeight: 700, flexShrink: 0,
                  border: '1px solid var(--ims-red-soft)',
                }}>
                  W{i + 1}
                </div>
                <span style={{ fontSize: 15, fontWeight: 500, color: 'var(--page-ink)' }}>{s}</span>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 16, alignItems: 'center', borderTop: '1px solid var(--page-border)', paddingTop: 20 }}>
            <div>
              <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: 'var(--page-ink-3)', fontWeight: 600 }}>Diajar oleh</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--page-ink)', marginTop: 3 }}>Andre Putra</div>
            </div>
            <div style={{ width: 1, height: 36, background: 'var(--page-border)' }} />
            <div>
              <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: 'var(--page-ink-3)', fontWeight: 600 }}>Format</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--page-ink)', marginTop: 3 }}>Private · Group · In-Home</div>
            </div>
            <div style={{ flex: 1 }} />
            <a href="#enroll" className="btn-link">Mulai dari {inst.name.toLowerCase()} →</a>
          </div>
        </div>

        {/* Right: 6 skill dimensions */}
        <div className="card" style={{
          padding: 36, background: 'var(--accent-ims)', color: '#fff',
          border: '1.5px solid var(--page-ink)',
          boxShadow: '4px 4px 0 var(--page-ink)',
        }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 700, opacity: 0.85 }}>
            Skill Radar · 6 dimensi
          </div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 36, textTransform: 'uppercase', lineHeight: 1, letterSpacing: '0.01em', margin: '12px 0 28px' }}>
            Yang kita track
          </h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid rgba(255,255,255,0.25)' }}>
            {inst.skills.map((s, i) => (
              <div key={s} style={{
                padding: '14px 0',
                borderBottom: '1px solid rgba(255,255,255,0.25)',
                borderRight: i % 2 === 0 ? '1px solid rgba(255,255,255,0.25)' : 'none',
                paddingLeft: i % 2 === 0 ? 0 : 18,
                paddingRight: i % 2 === 0 ? 18 : 0,
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <span className="mono" style={{ fontSize: 11, opacity: 0.7 }}>0{i + 1}</span>
                <span style={{ fontSize: 15, fontWeight: 600 }}>{s}</span>
              </div>
            ))}
          </div>
          <p style={{ fontSize: 13, lineHeight: 1.6, margin: '24px 0 0', color: '#FBEEEB' }}>
            Tiap session, gurumu update ke-enam axis ini. Kamu liat bentuknya tumbuh dari minggu ke
            minggu — mirror paling jujur dari progress kamu.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ─── Inline instrument glyphs (1.5px stroke, brand-aligned) ─── */

function InstrumentGlyph({ kind, color = 'currentColor' }) {
  const stroke = { stroke: color, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', fill: 'none' };
  if (kind === 'guitar') {
    return (
      <svg width="28" height="28" viewBox="0 0 32 32" aria-hidden>
        <circle cx="11" cy="22" r="7" {...stroke} />
        <circle cx="11" cy="22" r="2" {...stroke} />
        <path d="M15.5 18 L27 6.5 L29 8.5 L17.5 20 Z" {...stroke} />
        <path d="M19 16 L21 18" {...stroke} />
        <path d="M22 13 L24 15" {...stroke} />
      </svg>
    );
  }
  if (kind === 'piano') {
    return (
      <svg width="28" height="28" viewBox="0 0 32 32" aria-hidden>
        <rect x="4" y="8" width="24" height="16" rx="1" {...stroke} />
        <path d="M10 8 L10 18" {...stroke} />
        <path d="M16 8 L16 18" {...stroke} />
        <path d="M22 8 L22 18" {...stroke} />
        <rect x="8" y="8" width="3" height="7" fill={color} stroke="none" />
        <rect x="14" y="8" width="3" height="7" fill={color} stroke="none" />
        <rect x="20" y="8" width="3" height="7" fill={color} stroke="none" />
      </svg>
    );
  }
  if (kind === 'drum') {
    return (
      <svg width="28" height="28" viewBox="0 0 32 32" aria-hidden>
        <ellipse cx="16" cy="11" rx="11" ry="3" {...stroke} />
        <path d="M5 11 L5 22" {...stroke} />
        <path d="M27 11 L27 22" {...stroke} />
        <ellipse cx="16" cy="22" rx="11" ry="3" {...stroke} />
        <path d="M11 4 L8 11" {...stroke} />
        <path d="M21 4 L24 11" {...stroke} />
      </svg>
    );
  }
  if (kind === 'bass') {
    return (
      <svg width="28" height="28" viewBox="0 0 32 32" aria-hidden>
        <circle cx="10" cy="22" r="7" {...stroke} />
        <path d="M14.5 18 L28 4.5 L30 6.5 L17 19.5 Z" {...stroke} />
        <path d="M10 22 L10 22" {...stroke} />
        <circle cx="10" cy="22" r="1.2" fill={color} />
      </svg>
    );
  }
  if (kind === 'vocal') {
    return (
      <svg width="28" height="28" viewBox="0 0 32 32" aria-hidden>
        <rect x="12" y="3" width="8" height="16" rx="4" {...stroke} />
        <path d="M7 16 C7 22 11 25 16 25 C21 25 25 22 25 16" {...stroke} />
        <path d="M16 25 L16 30" {...stroke} />
        <path d="M11 30 L21 30" {...stroke} />
      </svg>
    );
  }
  return null;
}

Object.assign(window, { InstrumentPicker, INSTRUMENTS, InstrumentGlyph });