/* @jsx React.createElement */
/* Studio (Recording & Rehearsal) section + Pull-quote + FAQ + Final CTA */

function VibeSection() {
  return (
    <section id="studio" style={{ background: 'var(--page-bg)' }}>
      <div className="ims-section">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 40 }}>
          <div style={{ maxWidth: 760 }}>
            <div className="ims-eyebrow">Studio · Recording &amp; Rehearsal</div>
            <h2 className="ims-heading" style={{ fontSize: 56, marginTop: 14 }}>
              Bukan cuma sekolah. <span style={{ color: 'var(--accent-ims)' }}>Punya studio</span> beneran juga.
            </h2>
            <p className="ims-lede" style={{ marginTop: 16 }}>
              IMS punya studio recording + rehearsal yang dipakai sendiri sama murid IMS — dan
              juga buat musisi luar yang mau rekaman atau latihan. Tempat yang sama, vibe yang sama,
              cuma fungsinya beda.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
            <a href="#enroll" className="btn-link">Booking studio →</a>
            <span style={{ fontSize: 12, color: 'var(--page-ink-3)' }}>Per jam · weekday / weekend rate</span>
          </div>
        </div>

        {/* Product split: Two-purpose studio */}
        <div className="r-grid-2" style={{ gap: 14, marginBottom: 24 }}>
          <UseCaseCard
            kind="rec"
            label="Recording"
            jp="レコーディング"
            title="Demo sampai full single."
            desc="Live room kedap, control room dengan monitor kalibrasi, mic chain layak buat single yang siap rilis. Engineer in-house."
            chips={['Live room', 'Control room', 'Vocal booth', 'Mixing & mastering']}
            price="Mulai 300rb/jam"
          />
          <UseCaseCard
            kind="reh"
            label="Rehearsal"
            jp="リハーサル"
            title="Latihan band tanpa drama."
            desc="Dua rehearsal room ber-AC, full backline (drum, amp, bass cab, mic). Latihan jam tujuh malem? Aman, tetangganya kita."
            chips={['Drum kit ready', 'Bass + guitar amp', 'PA + monitor', 'Tetangga happy']}
            price="Mulai 120rb/jam"
            accent
          />
        </div>

        {/* Bento mosaic of placeholders — the actual rooms */}
        <div className="r-bento-studio" style={{
          gap: 14,
        }}>
          <PhotoSlot
            label="Live room"
            hint="Recording live room — wide shot, drum kit + mic setup terlihat."
            span="span 2 / span 2" rowSpan="span 2 / span 2"
            tint="var(--accent-ims)"
          />
          <PhotoSlot
            label="Control room"
            hint="Engineer di console, monitor speaker di foreground."
            tint="var(--indie-navy-500)"
          />
          <PhotoSlot
            label="Vocal booth"
            hint="Interior vocal booth, mic di foreground."
            tint="var(--indie-cyan-500)"
          />
          <PhotoSlot
            label="Rehearsal room"
            hint="Rehearsal room — backline lengkap, band lagi soundcheck."
            tint="var(--indie-yellow-400)" textDark
          />
          <PhotoSlot
            label="Ruang kelas"
            hint="Lesson room — gitar dipajang, murid + Andre lagi ngobrol."
            tint="var(--ims-red-deep)"
          />
          <PhotoSlot
            label="Lobby &amp; lounge"
            hint="Lobby — sofa, tanaman, kayu hangat. Tempat nungguin yang nyaman."
            span="span 2 / span 2" rowSpan="span 1"
            tint="var(--indie-navy-500)"
          />
        </div>

        {/* Studio-as-progression note */}
        <div style={{
          marginTop: 24, padding: '22px 28px',
          background: 'var(--page-surface)', border: '1px dashed var(--page-border-strong)',
          borderRadius: 10, display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap',
        }}>
          <div style={{
            width: 44, height: 44, 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',
            fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '0.02em',
            flexShrink: 0,
          }}>
            P1
          </div>
          <div style={{ flex: 1, minWidth: 280 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--page-ink)', marginBottom: 4 }}>
              Naik ke <em>Performance 1</em>? Kamu dapet studio session beneran.
            </div>
            <p style={{ fontSize: 14, color: 'var(--page-ink-2)', margin: 0, lineHeight: 1.55 }}>
              Studio recording session sebagai milestone level — bukan add-on yang harus bayar lagi.
              Hasil take-nya kamu bawa pulang, dipake di IG, di-share ke kakek-nenek.
            </p>
          </div>
        </div>

        {/* Pull-quote moment */}
        <div className="quote-card" style={{ marginTop: 80, padding: '56px 48px', background: 'var(--page-surface)', border: '1.5px solid var(--page-ink)', borderRadius: 10, boxShadow: '6px 6px 0 var(--accent-ims)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 22, left: 22, fontFamily: 'var(--font-display)', fontSize: 100, color: 'var(--accent-ims)', lineHeight: 0.7, opacity: 0.2 }}>"</div>
          <div className="r-grid-2" data-ratio="quote" style={{ gap: 48, alignItems: 'center' }}>
            <div>
              <p style={{ fontSize: 28, fontFamily: 'var(--font-sans)', fontWeight: 500, lineHeight: 1.35, color: 'var(--page-ink)', margin: 0, letterSpacing: '-0.01em' }}>
                "Anak gue dulu suka minta skip les piano. Sekarang malah minta berangkat lebih cepet
                biar bisa ngobrol dulu sama gurunya sebelum kelas mulai. Itu udah review-nya."
              </p>
              <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: 'var(--ims-red-tint)', color: 'var(--accent-ims)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '0.02em',
                  border: '1.5px solid var(--ims-red-soft)',
                }}>RP</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--page-ink)' }}>Rina P. · Orang tua Kayla, 9 thn</div>
                  <div style={{ fontSize: 12, color: 'var(--page-ink-3)' }}>Piano · 8 bulan di IMS</div>
                </div>
              </div>
            </div>
            <div className="r-grid-3" style={{ gap: 14 }}>
              <StatBig n="4.9" sub="Rating murid (avg)" />
              <StatBig n="92%" sub="Lanjut setelah bulan 3" />
              <StatBig n="6" sub="Level di-map" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function UseCaseCard({ kind, label, jp, title, desc, chips, price, accent }) {
  return (
    <div style={{
      padding: 28,
      background: accent ? 'var(--accent-ims)' : 'var(--page-surface)',
      color: accent ? '#fff' : 'var(--page-ink)',
      border: '1.5px solid var(--page-ink)',
      borderRadius: 10,
      boxShadow: accent ? '4px 4px 0 var(--page-ink)' : 'none',
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, textTransform: 'uppercase', lineHeight: 1, letterSpacing: '0.01em' }}>{label}</span>
          <span className="jp" style={{ fontSize: 13, opacity: accent ? 0.85 : 0.55 }}>{jp}</span>
        </div>
        <span className="mono" style={{
          fontSize: 12, fontWeight: 600,
          padding: '5px 10px', borderRadius: 999,
          background: accent ? 'rgba(255,255,255,0.18)' : 'var(--ims-red-tint)',
          color: accent ? '#fff' : 'var(--accent-ims)',
          border: accent ? '1px solid rgba(255,255,255,0.3)' : '1px solid var(--ims-red-soft)',
        }}>{price}</span>
      </div>
      <div style={{ fontSize: 18, fontWeight: 700, lineHeight: 1.3 }}>{title}</div>
      <p style={{ fontSize: 14, lineHeight: 1.55, margin: 0, opacity: accent ? 0.92 : 1, color: accent ? '#FBEEEB' : 'var(--page-ink-2)' }}>
        {desc}
      </p>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
        {chips.map(c => (
          <span key={c} style={{
            padding: '4px 10px', borderRadius: 999,
            background: accent ? 'rgba(255,255,255,0.14)' : 'var(--page-bg)',
            color: accent ? '#fff' : 'var(--page-ink-2)',
            border: `1px solid ${accent ? 'rgba(255,255,255,0.25)' : 'var(--page-border)'}`,
            fontSize: 11, fontWeight: 600,
          }}>{c}</span>
        ))}
      </div>
    </div>
  );
}

function PhotoSlot({ label, hint, span, rowSpan, tint, textDark }) {
  const gridStyle = {};
  if (span) gridStyle.gridColumn = span;
  if (rowSpan) gridStyle.gridRow = rowSpan;
  return (
    <div style={{
      ...gridStyle,
      position: 'relative', overflow: 'hidden',
      borderRadius: 10, border: '1.5px solid var(--page-ink)',
      background: `linear-gradient(150deg, ${tint} 0%, color-mix(in srgb, ${tint} 60%, var(--indie-navy-900) 40%) 100%)`,
      color: textDark ? 'var(--page-ink)' : '#fff',
      minHeight: 220,
    }}>
      <Grain />
      {/* small EQ motif top-right */}
      <div style={{ position: 'absolute', top: 14, right: 14, display: 'flex', alignItems: 'flex-end', gap: 3, opacity: 0.55 }}>
        {[0.5, 0.9, 0.6, 1].map((h, i) => (
          <div key={i} style={{ width: 4, height: `${h * 24}px`, background: 'currentColor', borderRadius: 1 }} />
        ))}
      </div>
      {/* label */}
      <div style={{ position: 'absolute', left: 18, top: 16, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', opacity: 0.85 }}>
        Placeholder
      </div>
      <div style={{ position: 'absolute', left: 18, bottom: 18, right: 18 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, lineHeight: 1, letterSpacing: '0.01em', textTransform: 'uppercase' }}>
          {label}
        </div>
        <div style={{ fontSize: 12, marginTop: 6, opacity: 0.85, lineHeight: 1.4 }}>{hint}</div>
      </div>
    </div>
  );
}

function StatBig({ n, sub }) {
  return (
    <div style={{ borderLeft: '2px solid var(--accent-ims)', paddingLeft: 16 }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, lineHeight: 1, letterSpacing: '0.01em', color: 'var(--page-ink)' }}>{n}</div>
      <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: 'var(--page-ink-3)', marginTop: 6 }}>{sub}</div>
    </div>
  );
}

/* ─────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────── */
const FAQS = [
  {
    q: 'Berapa lama sampai aku bisa main satu lagu utuh?',
    a: 'Biasanya minggu ke-3 udah bisa. Lagu beneran, yang orang kenal, yang "bisa direkam pakai HP". Belum Chopin sih, tapi udah musik.',
  },
  {
    q: 'Kalau aku/anakku mau ganti instrumen, bisa?',
    a: 'Bebas ganti kapan aja. Stamp card sama Skill Radar yang umum (rhythm, ear, theory) tetep nyangkut. Yang spesifik per instrumen reset.',
  },
  {
    q: 'Ada prep ujian musik (ABRSM, RSL) nggak?',
    a: 'Ada. Kasih tau pas daftar — kita slot-in ke kurikulum yang sesuai. Andre handle prep gitar; piano dikejar bareng kurikulum standar.',
  },
  {
    q: 'Orang dewasa beneran bisa mulai dari nol?',
    a: 'Setengah murid dewasa kita mulai dari nol total. Pre-Beginner emang didesain buat itu. Nggak ada yang buru-buru.',
  },
  {
    q: 'Policy cancel / reschedule gimana?',
    a: 'Reschedule maksimal 6 jam sebelum kelas — gratis. Lebih dari itu, kehitung. Semua status (hadir / tidak hadir / reschedule / libur) ke-track di dashboard.',
  },
  {
    q: 'Studio recording-nya beneran bagus apa cuma estetik aja?',
    a: 'Belum ada fotonya — kita foto bulan depan. Mendingan langsung mampir; lebih enak nilai sendiri sambil ngeliat live room sama control room-nya.',
  },
  {
    q: 'Studio bisa di-rent buat non-murid IMS?',
    a: 'Bisa. Booking by hour, dengan atau tanpa engineer. WA aja buat cek slot kosong. Murid IMS dapet prioritas + rate khusus.',
  },
];

function FAQSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: 'var(--page-bg)', borderTop: '1px solid var(--page-border)' }}>
      <div className="ims-section r-grid-2" data-ratio="sticky" style={{ gap: 56 }}>
        <div>
          <div className="ims-eyebrow">Jawaban jujur</div>
          <h2 className="ims-heading" style={{ fontSize: 48, marginTop: 14 }}>
            Pertanyaan yang sering masuk ke WA kita.
          </h2>
          <p className="ims-lede" style={{ marginTop: 16, fontSize: 16 }}>
            Selain ini, WA aja langsung. <span style={{ fontWeight: 700, color: 'var(--page-ink)' }}>+62 899-8267-999</span>.
          </p>
        </div>
        <div>
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: '1px solid var(--page-border)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  all: 'unset', cursor: 'pointer',
                  display: 'flex', alignItems: 'center', gap: 18,
                  padding: '22px 0', width: '100%',
                }}>
                  <span className="mono" style={{ fontSize: 13, color: 'var(--accent-ims)', fontWeight: 700, flexShrink: 0, width: 28 }}>
                    0{i + 1}
                  </span>
                  <span style={{ flex: 1, fontSize: 18, fontWeight: 600, color: 'var(--page-ink)', lineHeight: 1.4 }}>
                    {f.q}
                  </span>
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%',
                    background: isOpen ? 'var(--accent-ims)' : 'transparent',
                    color: isOpen ? '#fff' : 'var(--page-ink)',
                    border: `1px solid ${isOpen ? 'var(--page-ink)' : 'var(--page-border-strong)'}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, fontWeight: 600, flexShrink: 0,
                    transition: 'all 180ms var(--ease-out)',
                  }}>{isOpen ? '−' : '+'}</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 240 : 0, overflow: 'hidden',
                  transition: 'max-height 240ms var(--ease-out)',
                }}>
                  <div style={{ padding: '0 0 22px 46px', fontSize: 15, color: 'var(--page-ink-2)', lineHeight: 1.6 }}>
                    {f.a}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────
   Final CTA banner
   ───────────────────────────────────────────── */
function FinalCTA() {
  return (
    <section style={{ background: 'var(--page-bg)' }}>
      <div className="ims-section" style={{ paddingTop: 32, paddingBottom: 96 }}>
        <div className="cta-card" style={{
          background: 'var(--accent-ims)', color: '#fff',
          borderRadius: 10, border: '1.5px solid var(--page-ink)',
          boxShadow: '8px 8px 0 var(--page-ink)',
          padding: '64px 48px',
          position: 'relative', overflow: 'hidden',
        }}>
          <Grain />
          {/* Big bg word */}
          <div className="cta-bg-word" style={{
            position: 'absolute', right: -40, bottom: -40, fontFamily: 'var(--font-display)',
            fontSize: 280, color: 'rgba(255,255,255,0.10)', lineHeight: 0.85, letterSpacing: '0.01em',
            textTransform: 'uppercase', pointerEvents: 'none',
          }}>
            Main.
          </div>
          <div style={{ position: 'relative', maxWidth: 720 }}>
            <div className="ims-eyebrow plain" style={{ color: '#FBEEEB' }}>「 Kelas trial · Gratis buat murid baru 」</div>
            <h2 className="ims-display" style={{ fontSize: 'clamp(56px, 7vw, 96px)', marginTop: 14, color: '#fff' }}>
              Mampir dulu.<br />Pulang udah senyum.
            </h2>
            <p style={{ fontSize: 18, color: '#FBEEEB', lineHeight: 1.55, margin: '20px 0 0', maxWidth: 520 }}>
              Booking trial 90 detik. Kita match-in kamu ke guru, hold slot kamu, dan siapin
              instrumen yang udah ditune dari tadi.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <a href="#enroll" className="btn btn-primary" style={{ background: '#fff', color: 'var(--page-ink)', borderColor: '#fff', boxShadow: '4px 4px 0 var(--page-ink)' }}>
                Coba kelas gratis
              </a>
              <a href="https://wa.me/628998267999" className="btn btn-ghost" style={{ color: '#fff', borderColor: '#fff' }}>
                WhatsApp +62 899-8267-999
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Helper Grain — re-declared here to avoid cross-file scope */
function Grain() {
  return (
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', mixBlendMode: 'multiply', opacity: 0.18, pointerEvents: 'none' }} aria-hidden>
      <filter id="vgrain">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch" />
      </filter>
      <rect width="100%" height="100%" filter="url(#vgrain)" />
    </svg>
  );
}

Object.assign(window, { VibeSection, FAQSection, FinalCTA });