/* @jsx React.createElement */
/* Enrollment Flow — multi-step interactive preview */

const ENROLL_STEPS = [
  { id: 0, label: 'Siapa' },
  { id: 1, label: 'Instrumen' },
  { id: 2, label: 'Format' },
  { id: 3, label: 'Jadwal' },
  { id: 4, label: 'Voucher' },
  { id: 5, label: 'Review' },
];

const FORMATS = [
  { id: 'private',         name: 'Private',         price: 1100000, sessions: 4, hint: '1-on-1 langsung sama Andre, di ruang kelas IMS.' },
  { id: 'group',           name: 'Group',           price: 700000,  sessions: 4, hint: 'Maks 4 murid. Lebih murah, lebih seru, less spotlight.' },
  { id: 'in_home_private', name: 'In-Home Private', price: 1500000, sessions: 4, hint: 'Gurunya yang ke rumah kamu. Greater Jakarta only.' },
];

const SCHEDULES = [
  { day: 'Mon', slots: ['16:00', '17:30', '19:00'] },
  { day: 'Tue', slots: ['15:00', '16:30', '18:00', '19:30'] },
  { day: 'Wed', slots: ['16:00', '17:30'] },
  { day: 'Thu', slots: ['15:00', '17:00', '18:30'] },
  { day: 'Fri', slots: ['16:00', '17:30', '19:00'] },
  { day: 'Sat', slots: ['10:00', '11:30', '13:00', '15:00'] },
];

const VOUCHERS = [
  { code: 'INDIE-TRIAL',   off: 100000, label: 'Trial bulan pertama · −Rp 100rb' },
  { code: 'IMS-WELCOME',   off: 200000, label: 'Welcome to IMS · −Rp 200rb' },
  { code: 'GROUPSAVE-5',   off: 50000,  label: 'Group class saver · −Rp 50rb' },
];

function fmtIDR(n) {
  return 'Rp ' + n.toLocaleString('id-ID');
}

function EnrollmentSection() {
  const [step, setStep] = React.useState(0);
  const [audience, setAudience] = React.useState('kid'); // 'kid' | 'adult'
  const [instrument, setInstrument] = React.useState('guitar');
  const [format, setFormat] = React.useState('private');
  const [schedule, setSchedule] = React.useState({ day: 'Tue', slot: '17:30' });
  const [voucher, setVoucher] = React.useState(null);

  const formatObj = FORMATS.find(f => f.id === format);
  const subtotal = formatObj.price;
  const discount = voucher ? voucher.off : 0;
  const total = subtotal - discount;

  const next = () => setStep(s => Math.min(s + 1, ENROLL_STEPS.length - 1));
  const back = () => setStep(s => Math.max(s - 1, 0));

  return (
    <section id="enroll" style={{ background: 'var(--indie-navy-900)', color: '#F4F1EA' }}>
      <div className="ims-section">
        <div className="r-grid-2" data-ratio="enroll" style={{ gap: 48, alignItems: 'start' }}>
          {/* Left: copy */}
          <div className="r-unstick" style={{ position: 'sticky', top: 110 }}>
            <div className="ims-eyebrow plain" style={{ color: '#FBEEEB' }}>
              <span style={{ color: 'var(--accent-ims)' }}>「</span> Daftar · 5 step, ±3 menit <span style={{ color: 'var(--accent-ims)' }}>」</span>
            </div>
            <h2 className="ims-heading" style={{ fontSize: 56, marginTop: 18, color: '#fff' }}>
              Coba dulu, gratis.<br />
              <span style={{ color: 'var(--accent-ims)' }}>Decide later.</span>
            </h2>
            <p style={{ fontSize: 17, color: '#C9C6BC', lineHeight: 1.6, margin: '20px 0 0', maxWidth: 360 }}>
              Pilih instrumen, pilih jam, dateng aja. Session pertama free buat murid baru.
              Nggak perlu kartu kredit duluan. Enrollment beneran lewat Member App — ini cuma preview.
            </p>
            <div style={{ marginTop: 36, padding: 20, border: '1px dashed #143559', borderRadius: 8 }}>
              <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 700, color: '#FBEEEB' }}>
                Butuh bantuan?
              </div>
              <div style={{ fontSize: 15, color: '#fff', marginTop: 8, fontWeight: 600 }}>WA +62 899-8267-999</div>
              <div style={{ fontSize: 13, color: '#9A968A', marginTop: 4 }}>Andre Putra · Co-Founder &amp; Main Teacher</div>
            </div>
          </div>

          {/* Right: stepper */}
          <div style={{ background: 'var(--page-bg)', color: 'var(--page-ink)', borderRadius: 10, overflow: 'hidden', boxShadow: '8px 8px 0 var(--accent-ims)' }}>
            {/* Steps header */}
            <div className="r-step-head" style={{
              borderBottom: '1px solid var(--page-border)', background: 'var(--page-surface)',
            }}>
              {ENROLL_STEPS.map((s, i) => {
                const done = i < step;
                const active = i === step;
                return (
                  <button key={s.id} onClick={() => setStep(i)} className="r-step-btn" style={{
                    all: 'unset', cursor: 'pointer', padding: '16px 12px',
                    display: 'flex', alignItems: 'center', gap: 10,
                    borderBottom: active ? '2px solid var(--accent-ims)' : '2px solid transparent',
                    background: 'transparent',
                  }}>
                    <span className="mono" style={{
                      width: 22, height: 22, borderRadius: '50%',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      background: active ? 'var(--accent-ims)' : (done ? 'var(--page-ink)' : 'var(--page-bg)'),
                      color: active || done ? '#fff' : 'var(--page-ink-3)',
                      border: active || done ? '1px solid var(--page-ink)' : '1px solid var(--page-border-strong)',
                      fontSize: 11, fontWeight: 700,
                      flexShrink: 0,
                    }}>{done ? '✓' : i + 1}</span>
                    <span className="r-step-label" style={{
                      fontSize: 12, fontWeight: 600,
                      color: active ? 'var(--page-ink)' : 'var(--page-ink-2)',
                      textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)',
                    }}>{s.label}</span>
                  </button>
                );
              })}
            </div>

            {/* Step content */}
            <div style={{ padding: '32px 28px', minHeight: 380 }} key={step}>
              <div style={{ animation: 'fade-up 240ms var(--ease-out)' }}>
                {step === 0 && <StepWho audience={audience} setAudience={setAudience} />}
                {step === 1 && <StepInstrument value={instrument} onChange={setInstrument} />}
                {step === 2 && <StepFormat value={format} onChange={setFormat} />}
                {step === 3 && <StepSchedule value={schedule} onChange={setSchedule} />}
                {step === 4 && <StepVoucher value={voucher} onChange={setVoucher} />}
                {step === 5 && <StepReview {...{ audience, instrument, format, formatObj, schedule, voucher, subtotal, discount, total }} />}
              </div>
            </div>

            {/* Footer */}
            <div style={{
              borderTop: '1px solid var(--page-border)',
              padding: '18px 28px',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              background: 'var(--page-surface)',
              gap: 12, flexWrap: 'wrap',
            }}>
              <button onClick={back} disabled={step === 0} style={{
                all: 'unset', cursor: step === 0 ? 'not-allowed' : 'pointer',
                fontSize: 14, fontWeight: 600, color: step === 0 ? 'var(--page-ink-3)' : 'var(--page-ink)',
                padding: '10px 18px',
              }}>← Balik</button>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: 'var(--page-ink-3)', fontWeight: 600 }}>
                    Estimasi · 4 session / bulan
                  </div>
                  <div className="mono" style={{ fontSize: 18, fontWeight: 700, color: 'var(--page-ink)', marginTop: 2 }}>
                    {fmtIDR(total)}
                  </div>
                </div>
                {step < ENROLL_STEPS.length - 1 ? (
                  <button onClick={next} className="btn btn-primary">Lanjut →</button>
                ) : (
                  <button className="btn btn-primary">Confirm enrollment →</button>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Step components ─── */

function StepLabel({ n, title, subtitle }) {
  return (
    <div style={{ marginBottom: 24 }}>
      <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 700, color: 'var(--accent-ims)' }}>Step 0{n}</div>
      <h3 className="ims-heading" style={{ fontSize: 28, marginTop: 6 }}>{title}</h3>
      {subtitle && <p style={{ fontSize: 14, color: 'var(--page-ink-2)', margin: '8px 0 0' }}>{subtitle}</p>}
    </div>
  );
}

function StepWho({ audience, setAudience }) {
  const opts = [
    { id: 'kid',   title: 'Buat anakku',  jp: 'こども', hint: 'Umur 5–17. Dashboard buat orang tua, stamp mingguan, no recital yang seram.' },
    { id: 'adult', title: 'Buat aku sendiri',    jp: 'おとな', hint: 'Dewasa. Hobbyist welcome banget. Kita ketemuin di level kamu sekarang.' },
  ];
  return (
    <div>
      <StepLabel n="1" title="Siapa yang daftar?" subtitle="Ini nge-set tone kelasnya — dan tampilan dashboard-nya." />
      <div className="r-grid-2" style={{ gap: 14 }}>
        {opts.map(o => {
          const on = audience === o.id;
          return (
            <button key={o.id} onClick={() => setAudience(o.id)} style={{
              all: 'unset', cursor: 'pointer',
              padding: 22,
              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,
              boxShadow: on ? '4px 4px 0 var(--page-ink)' : 'none',
              transform: on ? 'translate(-2px,-2px)' : 'translate(0,0)',
              transition: 'all 180ms var(--ease-out)',
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, textTransform: 'uppercase', lineHeight: 1, letterSpacing: '0.01em' }}>{o.title}</span>
                <span className="jp" style={{ fontSize: 14, opacity: on ? 0.9 : 0.65 }}>{o.jp}</span>
              </div>
              <div style={{ fontSize: 13, opacity: 0.9, lineHeight: 1.5 }}>{o.hint}</div>
            </button>
          );
        })}
      </div>
      <div style={{ marginTop: 22, fontSize: 13, color: 'var(--page-ink-2)' }}>
        Daftarin lebih dari satu orang? Pilih dulu yang pertama — sisanya bisa ditambah dari Member App.
      </div>
    </div>
  );
}

function StepInstrument({ value, onChange }) {
  return (
    <div>
      <StepLabel n="2" title="Pilih instrumen kamu" subtitle="Boleh ganti nanti. Most students ganti minimal sekali, kok." />
      <div className="r-grid-5" style={{ gap: 10 }}>
        {window.INSTRUMENTS.map(i => {
          const on = value === i.id;
          return (
            <button key={i.id} onClick={() => onChange(i.id)} style={{
              all: 'unset', cursor: 'pointer',
              padding: 18,
              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,
              boxShadow: on ? '3px 3px 0 var(--page-ink)' : 'none',
              transform: on ? 'translate(-1px,-1px)' : 'translate(0,0)',
              transition: 'all 180ms var(--ease-out)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
            }}>
              <window.InstrumentGlyph kind={i.icon} color={on ? '#fff' : 'var(--page-ink)'} />
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, textTransform: 'uppercase', lineHeight: 1, letterSpacing: '0.01em' }}>{i.name}</div>
                <div className="jp" style={{ fontSize: 11, opacity: on ? 0.9 : 0.6, marginTop: 4 }}>{i.jp}</div>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function StepFormat({ value, onChange }) {
  return (
    <div>
      <StepLabel n="3" title="Pilih format" subtitle="Kurikulum sama, ritme beda. Sepanjang tahun kamu boleh kombinasi format." />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {FORMATS.map(f => {
          const on = value === f.id;
          return (
            <button key={f.id} onClick={() => onChange(f.id)} style={{
              all: 'unset', cursor: 'pointer',
              padding: '18px 22px',
              background: on ? 'var(--page-surface)' : 'var(--page-bg)',
              border: `1.5px solid ${on ? 'var(--accent-ims)' : 'var(--page-border)'}`,
              borderRadius: 10,
              boxShadow: on ? '4px 4px 0 var(--accent-ims)' : 'none',
              transform: on ? 'translate(-2px,-2px)' : 'translate(0,0)',
              transition: 'all 180ms var(--ease-out)',
              display: 'flex', alignItems: 'center', gap: 20,
            }}>
              <div style={{
                width: 18, height: 18, borderRadius: '50%',
                background: on ? 'var(--accent-ims)' : 'transparent',
                border: `2px solid ${on ? 'var(--accent-ims)' : 'var(--page-border-strong)'}`,
                flexShrink: 0,
              }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--page-ink)', marginBottom: 2 }}>{f.name}</div>
                <div style={{ fontSize: 13, color: 'var(--page-ink-2)' }}>{f.hint}</div>
              </div>
              <div className="mono" style={{ fontSize: 18, fontWeight: 700, color: 'var(--page-ink)', textAlign: 'right' }}>
                {fmtIDR(f.price)}
                <div style={{ fontSize: 11, color: 'var(--page-ink-3)', fontWeight: 500, marginTop: 2 }}>/ {f.sessions} session</div>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function StepSchedule({ value, onChange }) {
  return (
    <div>
      <StepLabel n="4" title="Pilih slot rutin" subtitle="Bisa di-geser kalau hidup juga geser." />
      <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 6 }}>
        {SCHEDULES.map(row => (
          <React.Fragment key={row.day}>
            <div style={{ padding: '12px 0', fontSize: 13, fontWeight: 700, color: 'var(--page-ink-2)', textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)' }}>
              {row.day}
            </div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', padding: '8px 0' }}>
              {row.slots.map(slot => {
                const on = value.day === row.day && value.slot === slot;
                return (
                  <button key={slot} onClick={() => onChange({ day: row.day, slot })} style={{
                    all: 'unset', cursor: 'pointer',
                    padding: '8px 14px', borderRadius: 6,
                    background: on ? 'var(--accent-ims)' : 'var(--page-surface)',
                    color: on ? '#fff' : 'var(--page-ink)',
                    border: `1px solid ${on ? 'var(--page-ink)' : 'var(--page-border)'}`,
                    fontSize: 13, fontWeight: 600,
                    fontFamily: 'var(--font-mono)',
                    transition: 'all 160ms var(--ease-out)',
                  }}>{slot}</button>
                );
              })}
            </div>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function StepVoucher({ value, onChange }) {
  return (
    <div>
      <StepLabel n="5" title="Pasang voucher" subtitle="Optional. Brand 'INDIE Music'. Satu voucher per pendaftaran." />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {VOUCHERS.map(v => {
          const on = value && value.code === v.code;
          return (
            <button key={v.code} onClick={() => onChange(on ? null : v)} style={{
              all: 'unset', cursor: 'pointer',
              padding: '16px 20px',
              background: on ? 'var(--ims-red-tint)' : 'var(--page-surface)',
              border: `1.5px dashed ${on ? 'var(--accent-ims)' : 'var(--page-border)'}`,
              borderRadius: 10,
              display: 'flex', alignItems: 'center', gap: 18,
              transition: 'all 180ms var(--ease-out)',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: '50%',
                background: on ? 'var(--accent-ims)' : 'var(--page-bg)',
                color: on ? '#fff' : 'var(--accent-ims)',
                border: `1.5px solid ${on ? 'var(--page-ink)' : 'var(--ims-red-soft)'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 18, fontWeight: 700, flexShrink: 0,
              }}>
                {on ? '✓' : '%'}
              </div>
              <div style={{ flex: 1 }}>
                <div className="mono" style={{ fontSize: 12, color: 'var(--accent-ims)', fontWeight: 700, letterSpacing: '0.05em' }}>{v.code}</div>
                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--page-ink)', marginTop: 2 }}>{v.label}</div>
              </div>
            </button>
          );
        })}
        <button onClick={() => onChange(null)} style={{
          all: 'unset', cursor: 'pointer',
          padding: '14px 20px', fontSize: 14, color: 'var(--page-ink-3)',
          alignSelf: 'flex-start',
        }}>Skip voucher · lanjut tanpa diskon</button>
      </div>
    </div>
  );
}

function StepReview({ audience, instrument, format, formatObj, schedule, voucher, subtotal, discount, total }) {
  const inst = window.INSTRUMENTS.find(i => i.id === instrument);
  return (
    <div>
      <StepLabel n="6" title="Udah pas?" subtitle="Tap di bawah, slot kamu langsung di-hold. Bayar nanti, setelah trial." />
      <div style={{ background: 'var(--page-surface)', borderRadius: 10, border: '1.5px solid var(--page-ink)', overflow: 'hidden' }}>
        <ReviewRow k="Didaftarin" v={audience === 'kid' ? 'Buat anakku' : 'Buat aku sendiri'} />
        <ReviewRow k="Instrumen" v={`${inst.name} · ${inst.jp}`} />
        <ReviewRow k="Format" v={formatObj.name} />
        <ReviewRow k="Jadwal" v={`${schedule.day} · ${schedule.slot}`} />
        <ReviewRow k="Voucher" v={voucher ? voucher.code : '—'} />
        <div style={{ background: 'var(--ims-red-tint)', padding: '18px 22px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--page-ink-2)' }}>
            <span>Subtotal</span><span className="mono">{fmtIDR(subtotal)}</span>
          </div>
          {discount > 0 && (
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--page-ink-2)', marginTop: 6 }}>
              <span>Diskon</span><span className="mono">−{fmtIDR(discount)}</span>
            </div>
          )}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '1px solid var(--ims-red-soft)', marginTop: 12, paddingTop: 12 }}>
            <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--page-ink)', textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)' }}>Total / bulan</span>
            <span className="mono" style={{ fontSize: 24, fontWeight: 700, color: 'var(--accent-ims)' }}>{fmtIDR(total)}</span>
          </div>
        </div>
      </div>
      <div style={{ fontSize: 12, color: 'var(--page-ink-3)', marginTop: 14, lineHeight: 1.5 }}>
        Bayar lewat Xendit. Trial session pertama gratis buat murid baru — bayarnya setelah itu.
      </div>
    </div>
  );
}

function ReviewRow({ k, v }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 22px', borderBottom: '1px solid var(--page-border)' }}>
      <span style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: 'var(--page-ink-3)', fontWeight: 600 }}>{k}</span>
      <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--page-ink)' }}>{v}</span>
    </div>
  );
}

Object.assign(window, { EnrollmentSection });