/* @jsx React.createElement */
/* Teachers — featured spread on Andre Putra (Co-Founder & Main Teacher)
   + Parent Dashboard teaser */

function TeachersSection() {
  return (
    <section id="teachers" style={{ background: 'var(--page-surface)', borderTop: '1px solid var(--page-border)' }}>
      <div className="ims-section">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div style={{ maxWidth: 760 }}>
            <div className="ims-eyebrow">Guru · Diajar langsung sama Co-Founder</div>
            <h2 className="ims-heading" style={{ fontSize: 56, marginTop: 14 }}>
              Belajar bareng <span style={{ color: 'var(--accent-ims)' }}>orangnya langsung.</span>
            </h2>
            <p className="ims-lede" style={{ marginTop: 16 }}>
              Di IMS, kamu nggak diajar sama "instruktur generasi ke-tiga" yang baru kerja minggu lalu.
              Kamu diajar sama orang yang bikin sekolahnya — kurikulum, filosofi, dan vibe-nya.
              Selama tim masih kecil, ini privilege-nya.
            </p>
          </div>
        </div>

        {/* Featured spread — Andre Putra */}
        <FounderSpread />

        {/* Coming next — team growing */}
        <TeamGrowing />
      </div>
    </section>
  );
}

function FounderSpread() {
  return (
    <div className="r-grid-2" data-ratio="founder" style={{
      gap: 0,
      border: '1.5px solid var(--page-ink)', borderRadius: 10, overflow: 'hidden',
      background: 'var(--page-bg)',
      boxShadow: '8px 8px 0 var(--accent-ims)',
    }}>
      {/* Left: photo placeholder */}
      <div className="founder-photo" style={{
        position: 'relative', minHeight: 560,
        background: 'linear-gradient(160deg, var(--accent-ims) 0%, var(--ims-red-deep) 60%, var(--indie-navy-900) 100%)',
        color: '#fff',
        overflow: 'hidden',
      }}>
        <FounderGrain />
        {/* Initials big */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--font-display)', fontSize: 280, color: '#fff', opacity: 0.18,
          letterSpacing: '0.02em', lineHeight: 1,
        }}>
          AP
        </div>
        {/* Top tape sticker */}
        <div style={{
          position: 'absolute', top: 20, left: 20,
          padding: '6px 12px', background: '#fff', color: 'var(--accent-ims)',
          fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)',
          borderRadius: 2, transform: 'rotate(-2deg)',
          border: '1px solid var(--page-ink)',
        }}>
          IMS · Founder
        </div>
        {/* Photo placeholder label */}
        <div style={{
          position: 'absolute', bottom: 24, left: 24, right: 24,
          fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)',
          color: 'rgba(255,255,255,0.85)',
        }}>
          Placeholder · Foto Andre di studio
          <div style={{ fontSize: 12, fontWeight: 500, textTransform: 'none', letterSpacing: 'normal', marginTop: 6, opacity: 0.85, maxWidth: 320 }}>
            Idealnya: foto candid lagi ngajar atau lagi main gitar. Bukan pose formal.
          </div>
        </div>
        {/* Small floating IMS badge */}
        <img src="assets/logos/ims.png" alt="" style={{
          position: 'absolute', right: 24, top: 24, width: 64, height: 64, borderRadius: '50%',
          border: '2px solid #fff',
        }} />
      </div>

      {/* Right: bio */}
      <div className="founder-bio" style={{ padding: '44px 44px 36px' }}>
        <div className="ims-eyebrow" style={{ marginBottom: 14 }}>
          Co-Founder · Main Teacher · Guitar
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
          <h3 className="ims-display" style={{ fontSize: 64, color: 'var(--page-ink)' }}>
            Andre Putra
          </h3>
          <span className="jp" style={{ fontSize: 14, color: 'var(--page-ink-3)', fontWeight: 500 }}>
            アンドレ・プトラ
          </span>
        </div>

        {/* Stat chips */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '20px 0 28px' }}>
          <Chip>14+ tahun ngajar</Chip>
          <Chip>Active musician</Chip>
          <Chip>Curriculum designer</Chip>
          <Chip accent>Bikin sendiri sistem A+B+C</Chip>
        </div>

        <p style={{ fontSize: 16, color: 'var(--page-ink-2)', lineHeight: 1.65, margin: '0 0 20px' }}>
          Andre udah main gitar sejak kelas 6 SD, mulai ngajar sejak SMA, dan akhirnya
          mendirikan INDIE Music School karena capek lihat banyak anak belajar musik tapi
          malah nggak enjoy dan merasa terpaksa. Filosofinya simple: musik seharusnya jadi
          tempat buat bahagia, berekspresi, dan berkembang — bukan bikin stress.
        </p>

        {/* Pull quote */}
        <div style={{
          padding: '18px 22px', background: 'var(--ims-red-tint)',
          borderLeft: '3px solid var(--accent-ims)', borderRadius: '0 6px 6px 0',
          marginBottom: 24,
        }}>
          <div style={{ fontSize: 17, fontStyle: 'italic', color: 'var(--page-ink)', lineHeight: 1.5, fontWeight: 500 }}>
            "Musik itu proses, bukan soal siapa paling cepat jago. Tapi siapa yang terus mau main."
          </div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 700, color: 'var(--accent-ims)', marginTop: 10 }}>
            — Andre
          </div>
        </div>

        {/* Why this matters */}
        <div style={{
          padding: 20, border: '1px dashed var(--page-border-strong)', borderRadius: 8,
        }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 700, color: 'var(--page-ink-3)', marginBottom: 12 }}>
            Apa artinya buat kamu?
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <BenefitRow text="Setiap session diajar langsung sama yang ngerancang kurikulumnya." />
            <BenefitRow text="Feedback-nya langsung dari sumbernya — bukan terusan." />
            <BenefitRow text="Slot terbatas. Bukan gimmick, memang gurunya satu (untuk sekarang)." />
          </div>
        </div>
      </div>
    </div>
  );
}

function Chip({ children, accent }) {
  return (
    <span style={{
      padding: '6px 12px',
      background: accent ? 'var(--accent-ims)' : 'var(--page-surface)',
      color: accent ? '#fff' : 'var(--page-ink)',
      border: `1px solid ${accent ? 'var(--page-ink)' : 'var(--page-border-strong)'}`,
      borderRadius: 999,
      fontSize: 12, fontWeight: 600,
    }}>
      {children}
    </span>
  );
}

function BenefitRow({ text }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
      <div style={{
        width: 18, height: 18, borderRadius: '50%', background: 'var(--accent-ims)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2,
      }}>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <polyline points="5 12 10 17 19 7" />
        </svg>
      </div>
      <span style={{ fontSize: 14, color: 'var(--page-ink-2)', lineHeight: 1.5 }}>{text}</span>
    </div>
  );
}

function TeamGrowing() {
  return (
    <div className="r-grid-2" style={{ marginTop: 32, gap: 18 }}>
      {/* Note card */}
      <div className="card" style={{ padding: 28, display: 'flex', alignItems: 'center', gap: 22 }}>
        <div style={{
          width: 56, height: 56, borderRadius: '50%',
          background: 'var(--ims-red-tint)', color: 'var(--accent-ims)',
          border: '1.5px solid var(--ims-red-soft)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
            <circle cx="9" cy="8" r="3.5" /><circle cx="17" cy="9" r="2.5" />
            <path d="M3 19c0-3 3-5 6-5s6 2 6 5" /><path d="M15 19c0-2 2-4 4.5-4S22 16 22 19" />
          </svg>
        </div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--page-ink)', marginBottom: 4, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)' }}>
            Tim-nya lagi tumbuh
          </div>
          <p style={{ fontSize: 14, color: 'var(--page-ink-2)', margin: 0, lineHeight: 1.55 }}>
            Selama 2026 kita lagi recruit guru untuk piano, drum, bass, dan vocal — selektif banget.
            Daftar dulu sekarang, kamu dapet slot terbatas Andre langsung.
          </p>
        </div>
      </div>

      {/* Become a teacher card */}
      <div className="card" style={{
        padding: 28, display: 'flex', alignItems: 'center', gap: 22,
        background: 'var(--indie-navy-900)', borderColor: 'var(--indie-navy-900)',
        color: '#fff',
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: '50%',
          background: '#fff', color: 'var(--indie-navy-900)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          fontFamily: 'var(--font-display)', fontSize: 26, letterSpacing: '0.02em',
        }}>+</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 4, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)' }}>
            Mau ngajar di IMS?
          </div>
          <p style={{ fontSize: 14, color: '#C9C6BC', margin: 0, lineHeight: 1.55 }}>
            Kalau kamu musisi aktif yang asik sama anak/orang, kirim portofolio.
            <a href="mailto:hello@indiemusic.id" style={{ color: '#fff', textDecoration: 'underline', marginLeft: 6 }}>hello@indiemusic.id</a>
          </p>
        </div>
      </div>
    </div>
  );
}

function FounderGrain() {
  return (
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', mixBlendMode: 'multiply', opacity: 0.18, pointerEvents: 'none' }} aria-hidden>
      <filter id="fgrain">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch" />
      </filter>
      <rect width="100%" height="100%" filter="url(#fgrain)" />
    </svg>
  );
}

/* ─────────────────────────────────────────────
   Parent Dashboard teaser
   ───────────────────────────────────────────── */
function ParentSection() {
  return (
    <section style={{ background: 'var(--page-bg)' }}>
      <div className="ims-section">
        <div className="r-grid-2" style={{ gap: 56, alignItems: 'center' }}>
          {/* Left: copy */}
          <div>
            <div className="ims-eyebrow">Buat orang tua · Pantau real-time</div>
            <h2 className="ims-heading" style={{ fontSize: 52, marginTop: 14 }}>
              Liat progress anak<br />
              <span style={{ color: 'var(--accent-ims)' }}>dari sofa.</span>
            </h2>
            <p className="ims-lede" style={{ marginTop: 18 }}>
              Buka INDIE Member app. Ada chart, koleksi stamp, daftar lagu yang udah dia kuasai
              bulan ini, plus catatan dari Andre habis kelas Selasa kemarin. Tanpa nelpon-nelpon,
              tanpa nanya "tadi gimana sayang?" — semuanya ada di situ.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 28 }}>
              <ParentBullet icon="bell" text="Auto-notify habis setiap session" />
              <ParentBullet icon="users" text="Multiple anak satu akun, tinggal switch" />
              <ParentBullet icon="message" text="DM langsung ke gurunya — tanpa basa-basi" />
              <ParentBullet icon="link" text="Invite link dari sekolah, setup-nya 30 detik" />
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <a href="#enroll" className="btn btn-primary">Daftarin anak kamu</a>
              <a href="https://member.indiespace.id" className="btn btn-ghost">Cek Member app ↗</a>
            </div>
          </div>

          {/* Right: phone mockup */}
          <ParentDashMockup />
        </div>
      </div>
    </section>
  );
}

function ParentBullet({ icon, text }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <div style={{
        width: 32, height: 32, borderRadius: 6,
        background: 'var(--ims-red-tint)', color: 'var(--accent-ims)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        border: '1px solid var(--ims-red-soft)', flexShrink: 0,
      }}>
        <MiniIcon kind={icon} />
      </div>
      <span style={{ fontSize: 15, fontWeight: 500, color: 'var(--page-ink)' }}>{text}</span>
    </div>
  );
}

function MiniIcon({ kind }) {
  const s = { stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', fill: 'none' };
  if (kind === 'bell') return <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden><path {...s} d="M6 8a6 6 0 1 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9Z" /><path {...s} d="M10 21a2 2 0 0 0 4 0" /></svg>;
  if (kind === 'users') return <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden><circle cx="9" cy="8" r="3.5" {...s} /><circle cx="17" cy="9" r="2.5" {...s} /><path {...s} d="M3 19c0-3 3-5 6-5s6 2 6 5" /><path {...s} d="M15 19c0-2 2-4 4.5-4S22 16 22 19" /></svg>;
  if (kind === 'message') return <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden><path {...s} d="M4 5h16v12h-7l-5 4v-4H4Z" /></svg>;
  if (kind === 'link') return <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden><path {...s} d="M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 1 0-5.66-5.66L11 7" /><path {...s} d="M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 1 0 5.66 5.66L13 17" /></svg>;
  return null;
}

function ParentDashMockup() {
  return (
    <div style={{
      position: 'relative',
      display: 'flex', justifyContent: 'center',
    }}>
      {/* Phone frame */}
      <div style={{
        width: 320, height: 600, borderRadius: 36,
        background: 'var(--page-ink)', padding: 10,
        boxShadow: '8px 8px 0 var(--accent-ims)',
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: 28,
          background: 'var(--page-bg)', overflow: 'hidden',
          display: 'flex', flexDirection: 'column',
        }}>
          {/* Status bar */}
          <div style={{ padding: '14px 22px 6px', display: 'flex', justifyContent: 'space-between', fontSize: 11, fontWeight: 600, color: 'var(--page-ink)' }}>
            <span>9:41</span>
            <span style={{ display: 'flex', gap: 6 }}><span>•••</span><span>WiFi</span><span>97%</span></span>
          </div>
          {/* Top bar */}
          <div style={{ padding: '8px 22px 14px', borderBottom: '1px solid var(--page-border)' }}>
            <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', color: 'var(--page-ink-3)', fontWeight: 600 }}>INDIE Member · Music</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--page-ink)', marginTop: 4 }}>Kayla, 9 · Piano</div>
          </div>
          {/* Body */}
          <div style={{ padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 14, flex: 1, overflow: 'hidden' }}>
            {/* Tiny radar */}
            <div style={{ background: 'var(--page-surface)', borderRadius: 10, border: '1px solid var(--page-border)', padding: 14 }}>
              <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: 'var(--page-ink-3)', fontWeight: 600, marginBottom: 6 }}>Skill Radar</div>
              <MiniRadar />
            </div>
            {/* Last session */}
            <div style={{ background: 'var(--page-surface)', borderRadius: 10, border: '1px solid var(--page-border)', padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: 'var(--page-ink-3)', fontWeight: 600 }}>Session terakhir · Selasa</div>
                <span className="mono" style={{ fontSize: 10, color: 'var(--page-ink-3)' }}>#24</span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--page-ink)', fontWeight: 600, lineHeight: 1.4 }}>"Kayla udah bisa intro Für Elise dua tangan. PR: ulang di 80 bpm."</div>
              <div style={{ display: 'flex', gap: 8, marginTop: 10, alignItems: 'center' }}>
                <Mini score={5} label="Mastery" />
                <Mini score={5} label="Attitude" />
                <div style={{ flex: 1 }} />
                <window.Stamp idx={28} size={32} />
              </div>
            </div>
            {/* Stamps */}
            <div style={{ background: 'var(--page-surface)', borderRadius: 10, border: '1px solid var(--page-border)', padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
                <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: 'var(--page-ink-3)', fontWeight: 600 }}>Stamp shelf</div>
                <span className="mono" style={{ fontSize: 11, color: 'var(--page-ink)' }}>24/59</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 4 }}>
                {[0, 1, 2, 4, 7, 8, 10, 12, 13, 17, 19, 21, 24, 28, 30, 34].map(i => (
                  <window.Stamp key={i} idx={i} small />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Mini({ score, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <div style={{ display: 'flex', gap: 2 }}>
        {[1, 2, 3, 4, 5].map(i => (
          <span key={i} style={{
            width: 5, height: 10, background: i <= score ? 'var(--accent-ims)' : 'var(--page-border)',
            borderRadius: 1,
          }} />
        ))}
      </div>
      <span style={{ fontSize: 10, color: 'var(--page-ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>{label}</span>
    </div>
  );
}

function MiniRadar() {
  const size = 140;
  const cx = size / 2, cy = size / 2;
  const r = 50;
  const now = [4, 3.5, 3, 3.2, 2.8, 2.5];
  const pts = now.map((v, i) => {
    const a = (Math.PI * 2 * i) / 6 - Math.PI / 2;
    return `${cx + Math.cos(a) * (v / 5 * r)},${cy + Math.sin(a) * (v / 5 * r)}`;
  }).join(' ');
  return (
    <svg width="100%" height={size} viewBox={`0 0 ${size} ${size}`}>
      {[1, 2, 3, 4, 5].map(lvl => {
        const p = Array.from({ length: 6 }).map((_, i) => {
          const a = (Math.PI * 2 * i) / 6 - Math.PI / 2;
          return `${cx + Math.cos(a) * (lvl / 5 * r)},${cy + Math.sin(a) * (lvl / 5 * r)}`;
        }).join(' ');
        return <polygon key={lvl} points={p} fill="none" stroke="var(--page-border)" strokeWidth="1" />;
      })}
      <polygon points={pts} fill="var(--accent-ims)" fillOpacity="0.22" stroke="var(--accent-ims)" strokeWidth="1.8" />
    </svg>
  );
}

Object.assign(window, { TeachersSection, ParentSection });