/* ════════════════════════════════════════════════
   Halaman publik: Program, Pengajar, Fasilitas,
   Kegiatan, Tentang, Kontak.
   Semua membaca section dari API (bisa diedit admin),
   fallback ke data statis (MQA).
   ════════════════════════════════════════════════ */

/* Hook: ambil daftar section dari API ({items:[...]}) dgn fallback */
function useSection(section, fallback) {
  const [data, setData] = useState(fallback);
  useEffect(() => {
    let on = true;
    api.get(`content.php?action=get_section&section=${section}`).then(r => {
      if (!on) return;
      const arr = (r.ok && r.data && Array.isArray(r.data.items)) ? r.data.items : null;
      if (arr && arr.length) setData(arr);
    }).catch(() => {});
    return () => { on = false; };
  }, [section]);
  return data;
}

/* Hook: ambil section objek (mis. 'settings'/'about') dgn fallback */
function useObjSection(section, fallback) {
  const [data, setData] = useState(fallback);
  useEffect(() => {
    let on = true;
    api.get(`content.php?action=get_section&section=${section}`).then(r => {
      if (!on) return;
      if (r.ok && r.data && !Array.isArray(r.data) && typeof r.data === 'object') setData(d => ({ ...d, ...r.data }));
    }).catch(() => {});
    return () => { on = false; };
  }, [section]);
  return data;
}

/* Header band biru standar tiap halaman — mendukung baris Arab + override dashboard.
   pageKey: untuk membaca override dari section 'page_headers'. */
function PageBand({ kicker, arabic, title, sub, pageKey }) {
  const headers = useObjSection('page_headers', {});
  const ov = (pageKey && headers && headers[pageKey]) ? headers[pageKey] : {};
  const _arabic = ov.arabic !== undefined ? ov.arabic : arabic;
  const _title  = ov.title  || title;
  const _sub    = ov.sub !== undefined ? ov.sub : sub;
  const _kicker = ov.kicker || kicker;
  const _img    = ov.image || ov.bg_image;
  const STAR = "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='52'%20height='52'%20viewBox='0%200%2052%2052'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.12'%20stroke-width='1.4'%3E%3Crect%20x='13'%20y='13'%20width='26'%20height='26'/%3E%3Crect%20x='13'%20y='13'%20width='26'%20height='26'%20transform='rotate(45%2026%2026)'/%3E%3C/g%3E%3C/svg%3E\")";
  return (
    <div style={{ position: 'relative', background: 'linear-gradient(135deg, var(--brand-deep), var(--brand-navy))', color: '#fff', padding: '46px 0 40px', overflow: 'hidden' }}>
      {_img
        ? <><img src={_img} alt="" loading="lazy" decoding="async" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: .32 }} /><div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(12,26,64,.82), rgba(36,58,130,.7))' }} /></>
        : <div style={{ position: 'absolute', inset: 0, backgroundImage: STAR, backgroundSize: '52px 52px' }} />}
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        {_arabic
          ? <div className="hero-v10-arabic" style={{ fontSize: 21, margin: '0 0 8px', color: 'rgba(255,255,255,.9)' }}>{_arabic}</div>
          : (_kicker && <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.04em', textTransform: 'uppercase', color: 'rgba(255,255,255,.6)', marginBottom: 8 }}>{_kicker}</div>)}
        <h1 style={{ fontFamily: 'var(--font-d)', fontSize: 36, fontWeight: 900, margin: '0 0 10px' }}>{_title}</h1>
        {_sub && <p style={{ opacity: .82, fontSize: 15.5, maxWidth: 580, margin: 0, lineHeight: 1.55 }}>{_sub}</p>}
      </div>
    </div>
  );
}

/* ── PROGRAM ── */
function ProgramsPage({ navigate }) {
  const programs = useSection('programs', (window.MQA || {}).programs || []);
  return (
    <div style={{ background: 'var(--bg)', minHeight: '70vh' }}>
      <PageBand pageKey="programs" kicker="Program Kami" title="Belajar Ilmu Agama" sub="Program untuk anak hingga dewasa — tahfidz, bahasa Arab, fiqih, dan akhlaq." />
      <div className="container" style={{ padding: '34px 20px 60px', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 20 }}>
        {programs.map(p => {
          const levels = Array.isArray(p.levels) ? p.levels : (p.levelsStr ? p.levelsStr.split(',').map(x => x.trim()) : []);
          const hasMedia = p.youtube_url || p.banner_url;
          return (
            <div key={p.id} className="fade-up" style={{ background: 'var(--surface)', borderRadius: 18, overflow: 'hidden', border: '1px solid var(--border-soft)', boxShadow: 'var(--shadow-warm-sm, 0 4px 14px rgba(120,80,30,.06))', display: 'flex', flexDirection: 'column' }}>
              {hasMedia && <MediaBlock youtube={p.youtube_url} image={p.banner_url} glyph={CAT_GLYPH[p.name] || 'cap'} bg="linear-gradient(135deg, var(--brand-navy), var(--brand-deep))" />}
              <div style={{ padding: '28px 26px' }}>
                {!hasMedia && <div style={{ marginBottom: 14, color: 'var(--sage)' }}><GlyphMark name={'cap'} size={40} /></div>}
                <h3 style={{ fontFamily: 'var(--font-d)', fontSize: 22, fontWeight: 800, color: 'var(--ink-deep)', margin: '0 0 8px' }}>{p.name}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--muted)', margin: '0 0 16px' }}>{p.desc}</p>
                {levels.length > 0 && (
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginBottom: 16 }}>
                    {levels.map((lv, i) => <span key={i} style={{ padding: '4px 11px', borderRadius: 999, background: 'var(--bg2)', color: 'var(--navy)', fontSize: 12, fontWeight: 700 }}>{lv}</span>)}
                  </div>
                )}
                {p.schedule && <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--sage)', marginBottom: 18 }}>🕐 {p.schedule}</div>}
                <button className="btn-hero-primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => navigate('register')}>Daftar Program Ini</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ── PENGAJAR ── */
function TeachersPage() {
  const teachers = useSection('teachers', (window.MQA || {}).teachers || []);
  return (
    <div style={{ background: 'var(--bg)', minHeight: '70vh' }}>
      <PageBand pageKey="teachers" kicker="Tim Pengajar" title="Asatidz & Asatidzah" sub="Dibimbing pengajar berpengalaman dengan sanad dan latar pendidikan yang amanah." />
      <div className="container" style={{ padding: '34px 20px 60px', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 20 }}>
        {teachers.map(t => {
          const tags = Array.isArray(t.tags) ? t.tags : (t.tagsStr ? t.tagsStr.split(',').map(x => x.trim()) : []);
          return (
            <div key={t.id} className="fade-up" style={{ background: 'var(--surface)', borderRadius: 18, padding: '26px 24px', border: '1px solid var(--border-soft)', textAlign: 'center', boxShadow: 'var(--shadow-warm-sm, 0 4px 14px rgba(120,80,30,.06))' }}>
              <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'linear-gradient(135deg, var(--navy), var(--sage))', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, fontWeight: 800, margin: '0 auto 16px', fontFamily: 'var(--font-d)' }}>{t.initial || (t.name || '?')[0]}</div>
              <h3 style={{ fontFamily: 'var(--font-d)', fontSize: 18.5, fontWeight: 800, color: 'var(--ink-deep)', margin: '0 0 4px' }}>{t.name}</h3>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--sage)', marginBottom: 12 }}>{t.title}</div>
              <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--muted)', margin: '0 0 14px' }}>{t.bio}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, justifyContent: 'center' }}>
                {tags.map((tg, i) => <span key={i} style={{ padding: '3px 10px', borderRadius: 999, background: 'var(--bg2)', color: 'var(--navy)', fontSize: 11.5, fontWeight: 700 }}>{tg}</span>)}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ── FASILITAS ── */
function FasilitasPage() {
  const items = useSection('fasilitas', (window.MQA || {}).fasilitas || []);
  return (
    <div style={{ background: 'var(--bg)', minHeight: '70vh' }}>
      <PageBand pageKey="gallery" kicker="Fasilitas" title="Lingkungan Belajar Kami" sub="Suasana islami dan fasilitas yang menunjang proses belajar santri." />
      <div className="container" style={{ padding: '34px 20px 60px', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 16 }}>
        {items.map(f => (
          <div key={f.id} className="fade-up" style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid var(--border-soft)', background: 'var(--surface)' }}>
            <div style={{ position: 'relative', aspectRatio: '4/3', background: f.color || 'var(--navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
              {f.img_url
                ? <img src={f.img_url} alt={f.caption} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                : <GlyphMark name='mosque' size={52} />}
            </div>
            <div style={{ padding: '14px 16px', fontWeight: 700, fontSize: 14.5, color: 'var(--ink-deep)' }}>{f.caption}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── KEGIATAN ── */
function KegiatanPage() {
  const events = useSection('kegiatan', (window.MQA || {}).kegiatan || []);
  const badge = { upcoming: { t: 'Akan Datang', c: '#1F6B47', bg: 'rgba(31,107,71,.12)' }, past: { t: 'Selesai', c: 'var(--muted)', bg: 'var(--bg2)' } };
  return (
    <div style={{ background: 'var(--bg)', minHeight: '70vh' }}>
      <PageBand pageKey="kegiatan" kicker="Agenda & Kegiatan" title="Kegiatan Markaz" sub="Kajian rutin, wisuda tahfidz, halaqah, dan kegiatan santri lainnya." />
      <div className="container" style={{ padding: '34px 20px 60px', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 18 }}>
        {events.map(e => {
          const b = badge[e.status] || badge.upcoming;
          const hasMedia = e.youtube_url || e.img_url;
          return (
            <div key={e.id} className="fade-up" style={{ background: 'var(--surface)', borderRadius: 16, overflow: 'hidden', border: '1px solid var(--border-soft)', display: 'flex', flexDirection: 'column' }}>
              {hasMedia && <MediaBlock youtube={e.youtube_url} image={e.img_url} glyph='calendar' bg="linear-gradient(135deg, var(--brand-navy), var(--brand-deep))" />}
              <div style={{ padding: '20px 22px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                  <span style={{ padding: '4px 12px', borderRadius: 999, background: b.bg, color: b.c, fontSize: 12, fontWeight: 800 }}>{b.t}</span>
                  {e.youtube_url && <span style={{ fontSize: 12.5, fontWeight: 700, color: '#C0392B' }}>▶ Video</span>}
                </div>
                <h3 style={{ fontFamily: 'var(--font-d)', fontSize: 19, fontWeight: 800, color: 'var(--ink-deep)', margin: '0 0 8px', textWrap: 'pretty' }}>{e.title}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--muted)', margin: '0 0 14px' }}>{e.desc}</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 5, fontSize: 13, color: 'var(--ink)' }}>
                  {(e.date || e.time) && <span>📅 {e.date}{e.time ? ' · ' + e.time : ''}</span>}
                  {e.location && <span>📍 {e.location}</span>}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ── TENTANG ── */
function AboutPage({ navigate }) {
  const s = useObjSection('settings', {});
  const tahun = s.tahun || '2015';
  const profil1 = s.profil || "Markaz Qurrota A'yun adalah rumah ilmu yang berkomitmen membentuk generasi Qur'ani yang berakhlak mulia melalui pendidikan tahfidz, bahasa Arab, fiqih, dan akhlaq.";
  const profil2 = s.profil2 || "Dengan pengajar berpengalaman dan lingkungan yang islami, kami mendampingi santri dari segala usia untuk mencintai dan mengamalkan Al-Qur'an dalam kehidupan sehari-hari.";
  const stats = [[s.stat_santri || '500+', 'Santri Aktif'], [s.stat_pengajar || '25+', 'Pengajar'], [s.stat_program || '8', 'Program'], [tahun, 'Berdiri']];
  return (
    <div style={{ background: 'var(--bg)' }}>
      <PageBand pageKey="about" kicker="Tentang Kami" title={s.site_name || "Markaz Qurrota A'yun"} sub={s.tagline || "Lembaga pendidikan Al-Qur'an dan ilmu agama untuk segala usia."} />
      <div className="container" style={{ padding: '40px 20px 30px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 36, alignItems: 'center' }}>
        <div className="fade-up">
          <div className="hero-v10-arabic" style={{ fontSize: 24, margin: '0 0 14px' }}>مَرْكَزُ قُرَّةِ أَعْيُن</div>
          <p style={{ fontSize: 16, lineHeight: 1.8, color: 'var(--ink)', margin: '0 0 16px' }}>{profil1}</p>
          <p style={{ fontSize: 16, lineHeight: 1.8, color: 'var(--muted)', margin: 0 }}>{profil2}</p>
        </div>
        <div className="fade-up" style={{ borderRadius: 20, overflow: 'hidden', border: '1px solid var(--border-soft)' }}>
          <img src={s.about_image || 'img/grup-besar.jpg'} alt="Keluarga besar MQA" loading="lazy" decoding="async" style={{ width: '100%', display: 'block' }} />
        </div>
      </div>

      {/* Sambutan Mudir */}
      {(s.mudir_text || s.mudir_name) && (
        <div className="container" style={{ padding: '20px 20px 10px' }}>
          <div className="about-mudir" style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 30, alignItems: 'center', background: 'var(--surface)', borderRadius: 22, padding: '30px', border: '1px solid var(--border-soft)' }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ width: 150, height: 150, borderRadius: '50%', margin: '0 auto 14px', overflow: 'hidden', background: 'linear-gradient(135deg, var(--navy), var(--sage))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {s.mudir_photo ? <img src={s.mudir_photo} alt={s.mudir_name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <GlyphMark name='mosque' size={66} />}
              </div>
              <div style={{ fontFamily: 'var(--font-d)', fontSize: 17, fontWeight: 800, color: 'var(--ink-deep)' }}>{s.mudir_name || 'Pimpinan'}</div>
              <div style={{ fontSize: 12.5, color: 'var(--sage)', fontWeight: 700 }}>{s.mudir_title || 'Mudir / Pimpinan'}</div>
            </div>
            <div>
              <div className="sec-label">Sambutan Pimpinan</div>
              <p style={{ fontSize: 15.5, lineHeight: 1.8, color: 'var(--ink)', margin: 0, fontStyle: 'italic' }}>"{s.mudir_text || ''}"</p>
            </div>
          </div>
        </div>
      )}

      {/* Visi & Misi */}
      {(s.visi || s.misi) && (
        <div className="container" style={{ padding: '20px 20px 10px' }}>
          <div className="about-vm" style={{ display: 'grid', gridTemplateColumns: s.visi && s.misi ? '1fr 1.2fr' : '1fr', gap: 18 }}>
            {s.visi && (
              <div style={{ background: 'linear-gradient(135deg, var(--brand-deep), var(--brand-navy))', borderRadius: 18, padding: '28px 26px', color: '#fff' }}>
                <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: '.05em', textTransform: 'uppercase', opacity: .7, marginBottom: 10 }}>Visi</div>
                <p style={{ fontFamily: 'var(--font-d)', fontSize: 19, fontWeight: 700, lineHeight: 1.5, margin: 0 }}>{s.visi}</p>
              </div>
            )}
            {s.misi && (
              <div style={{ background: 'var(--surface)', borderRadius: 18, padding: '28px 26px', border: '1px solid var(--border-soft)' }}>
                <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--sage)', marginBottom: 12 }}>Misi</div>
                <ul style={{ margin: 0, paddingLeft: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {String(s.misi).split('\n').filter(x => x.trim()).map((m, i) => (
                    <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink)' }}>
                      <span style={{ color: 'var(--sage)', fontWeight: 900, flexShrink: 0 }}>✓</span>{m.replace(/^[-•\d.\s]+/, '')}
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Nilai-Nilai (tampil hanya bila diisi) */}
      {s.nilai && String(s.nilai).split('\n').filter(x => x.trim()).length > 0 && (
        <div className="container" style={{ padding: '20px 20px 10px' }}>
          <div className="sec-label" style={{ display: 'flex', justifyContent: 'center' }}>Nilai-Nilai Kami</div>
          <h2 className="sec-title" style={{ textAlign: 'center', margin: '0 0 22px' }}>Prinsip yang Kami Pegang</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 }}>
            {String(s.nilai).split('\n').filter(x => x.trim()).map((v, i) => {
              const [judul, ...rest] = String(v).split(/\s[—-]\s/);
              return (
                <div key={i} style={{ background: 'var(--surface)', borderRadius: 16, padding: '24px 22px', border: '1px solid var(--border-soft)' }}>
                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--sage)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-d)', fontWeight: 900, fontSize: 17, marginBottom: 12 }}>{i + 1}</div>
                  <div style={{ fontFamily: 'var(--font-d)', fontSize: 17, fontWeight: 800, color: 'var(--ink-deep)', marginBottom: rest.length ? 5 : 0 }}>{judul}</div>
                  {rest.length > 0 && <div style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.55 }}>{rest.join(' ')}</div>}
                </div>
              );
            })}
          </div>
        </div>
      )}
      <div className="container" style={{ padding: '20px 20px 30px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 16 }}>
          {stats.map(([n, l]) => (
            <div key={l} style={{ background: 'var(--surface)', borderRadius: 16, padding: '22px 18px', textAlign: 'center', border: '1px solid var(--border-soft)' }}>
              <div style={{ fontFamily: 'var(--font-d)', fontSize: 30, fontWeight: 900, color: 'var(--sage)' }}>{n}</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', fontWeight: 600, marginTop: 4 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Testimoni */}
      <AboutTestimonials />
      <div className="container" style={{ padding: '20px 20px 70px' }}>
        <div style={{ background: 'linear-gradient(135deg, var(--brand-deep), var(--brand-navy))', borderRadius: 22, padding: '40px', color: '#fff', textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-d)', fontSize: 26, fontWeight: 800, marginBottom: 10 }}>Bergabunglah Bersama Kami</div>
          <p style={{ opacity: .82, maxWidth: 480, margin: '0 auto 22px', lineHeight: 1.6 }}>Daftarkan diri atau putra-putri Anda, atau dukung dakwah kami melalui donasi.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn-hero-primary" onClick={() => navigate('register')}>Daftar Santri</button>
            <button className="btn-donasi-cta" onClick={() => navigate('donasi')}>{IC.heart} Donasi</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── KONTAK ── */
function ContactPage() {
  const s = useObjSection('settings', {});
  const wa = s.wa || '628123456789';
  const info = [
    { icon: '📍', label: 'Alamat', val: s.address || 'Alamat belum diatur — silakan ubah di dashboard.' },
    { icon: '📱', label: 'WhatsApp', val: s.phone || '+62 812-3456-7890' },
    { icon: '📧', label: 'Email', val: s.email || 'info@qurrotaayun.com' },
    { icon: '🕐', label: 'Jam Operasional', val: s.jam || 'Senin–Sabtu, 08.00–20.00 WIB' },
  ];
  const socials = [['Instagram', s.ig], ['YouTube', s.yt], ['Facebook', s.fb], ['TikTok', s.tiktok]].filter(([, v]) => v);
  return (
    <div style={{ background: 'var(--bg)', minHeight: '70vh' }}>
      <PageBand pageKey="contact" kicker="Hubungi Kami" title="Kontak" sub="Punya pertanyaan? Hubungi kami melalui kanal berikut." />
      <div className="container" style={{ padding: '34px 20px 30px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 18 }}>
        {info.map(c => (
          <div key={c.label} className="fade-up" style={{ background: 'var(--surface)', borderRadius: 16, padding: '24px 22px', border: '1px solid var(--border-soft)' }}>
            <div style={{ fontSize: 30, marginBottom: 10 }}>{c.icon}</div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.04em', marginBottom: 5 }}>{c.label}</div>
            <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-deep)', lineHeight: 1.5 }}>{c.val}</div>
          </div>
        ))}
      </div>
      {socials.length > 0 && (
        <div className="container" style={{ padding: '0 20px 24px', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {socials.map(([name, url]) => (
            <a key={name} href={/^https?:/.test(url) ? url : 'https://' + url} target="_blank" rel="noopener" style={{ padding: '10px 18px', borderRadius: 999, border: '1.5px solid var(--border)', background: 'var(--surface)', color: 'var(--ink-deep)', fontSize: 13.5, fontWeight: 700, textDecoration: 'none' }}>{name} ↗</a>
          ))}
        </div>
      )}
      {s.maps_embed
        ? (
          <div className="container" style={{ padding: '6px 20px 30px' }}>
            <div className="sec-label" style={{ marginBottom: 12 }}>📍 Lokasi Kami</div>
            <div className="maps-embed" style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid var(--border-soft)' }} dangerouslySetInnerHTML={{ __html: s.maps_embed }} />
          </div>
        )
        : (s.maps_link
          ? <div className="container" style={{ padding: '6px 20px 30px' }}>
              <a href={s.maps_link} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '12px 20px', borderRadius: 12, background: 'var(--surface)', border: '1.5px solid var(--border)', color: 'var(--ink-deep)', fontWeight: 700, fontSize: 14, textDecoration: 'none' }}>📍 Buka Lokasi di Google Maps ↗</a>
            </div>
          : null)}
      <div className="container" style={{ padding: '0 20px 70px', textAlign: 'center' }}>
        <button className="btn-hero-primary" onClick={() => window.open('https://wa.me/' + wa.replace(/[^\d]/g, ''), '_blank')}>💬 Chat via WhatsApp</button>
      </div>
    </div>
  );
}

/* Section testimoni di halaman Tentang */
function AboutTestimonials() {
  const items = useSection('testimonials', (window.MQA || {}).testimonials || []);
  if (!items.length) return null;
  return (
    <div className="container" style={{ padding: '30px 20px 20px' }}>
      <div className="sec-label" style={{ textAlign: 'center', justifyContent: 'center', display: 'flex' }}>Testimoni</div>
      <h2 className="sec-title" style={{ textAlign: 'center', margin: '0 0 26px' }}>Kata Mereka Tentang Kami</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18 }}>
        {items.map((t, i) => (
          <div key={t.id || i} className="fade-up" style={{ background: 'var(--surface)', borderRadius: 16, padding: '24px 24px', border: '1px solid var(--border-soft)', boxShadow: 'var(--shadow-warm-sm, 0 4px 14px rgba(120,80,30,.06))' }}>
            <div style={{ color: 'var(--orange)', fontSize: 15, marginBottom: 10 }}>{'★'.repeat(Math.max(1, Math.min(5, t.stars || 5)))}<span style={{ color: 'var(--border)' }}>{'★'.repeat(5 - Math.max(1, Math.min(5, t.stars || 5)))}</span></div>
            <p style={{ fontSize: 14.5, lineHeight: 1.7, color: 'var(--ink)', margin: '0 0 16px', fontStyle: 'italic' }}>"{t.text}"</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
              <span style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--navy)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 14 }}>{t.initial || (t.name || '?')[0]}</span>
              <div>
                <div style={{ fontWeight: 800, color: 'var(--ink-deep)', fontSize: 14 }}>{t.name}</div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{t.role}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { useSection, useObjSection, PageBand, ProgramsPage, TeachersPage, FasilitasPage, KegiatanPage, AboutPage, ContactPage, AboutTestimonials });