/* OvertureView · ActView (+ detail drawer) */

function OvertureView({ onViewChange }) {
  const heroRef = useRef(null);

  const scrollToEssay = () => {
    const view = document.querySelector('.view');
    const target = document.querySelector('.overture__essay');
    if (view && target) {
      view.scrollTo({ top: target.offsetTop - 16, behavior: 'smooth' });
    }
  };

  const acts = window.actsData;

  return (
    <section className="view" aria-labelledby="overture-title">
      <article className="overture">
        {/* ---------- HERO ---------- */}
        <div className="overture__hero" ref={heroRef}>
          <div className="overture__bg-40" aria-hidden="true">40</div>
          <div className="overture__content">
            <p className="overture__eyebrow fade-up">Metamorfosis Empat Dekad · 1986 — 2025</p>
            <h1 id="overture-title" className="overture__h1 fade-up delay-1">
              Bunyi Sebuah
              <em>Negara</em>
            </h1>
            <p className="overture__lede fade-up delay-2">
              Saban tahun, AJL bermula dengan muzik yang membuai dan berakhir
              dengan debaran yang menyatukan sebuah negara. Selama empat dekad, ia
              bukan sekadar menobatkan lagu terbaik &mdash; ia merakam suara, rasa,
              bahasa, impian dan perubahan Malaysia.
            </p>
            <div className="overture__ctas fade-up delay-3">
              <button className="btn btn--gold" onClick={() => onViewChange('ACT_1')}>
                Mulakan Perjalanan
                <Icons.Arrow size={14} />
              </button>
              <button className="btn btn--ghost" onClick={scrollToEssay}>
                Baca Prelude &amp; Prolog
              </button>
            </div>
          </div>

          <button
            className="overture__scroll-cue fade-in delay-4"
            onClick={scrollToEssay}
            aria-label="Baca pembukaan">
            
            <span>Bermula di Ruang Tamu</span>
            <span className="overture__scroll-cue-glyph"><Icons.ChevronDown size={12} /></span>
          </button>
        </div>

        {/* ---------- PRELUDE ESSAY ---------- */}
        <section className="overture__essay" id="prelude">
          <div className="essay-inner">
            <aside className="essay-meta">
              <span className="essay-meta__no">Prelude · 01</span>
              <p className="essay-meta__label">
                <strong>Degup Jantung Sebuah Bangsa</strong>
                Esei pembuka<br />Tempoh bacaan · 4 minit
              </p>
            </aside>
            <div className="essay-body">
              <h2 className="essay-body__title">Degup Jantung <em>Sebuah Bangsa</em></h2>
              <p className="dropcap">Pada penghujung tahun 1986, satu lagu menyapu awan. Tiada bunyi trumpet kemenangan, tiada pesta deklarasi besar-besaran, hanya melodi piano yang lembut dan suara Francissca Peter yang berbisik dari kotak televisyen di sudut ruang tamu. Di luar dewan, di rumah pangsa dan rumah pusaka, sebuah negara muda berhenti buat seketika, untuk mendengar.





              </p>
              <p>Ruang tamu menjadi dewan konsert pertama AJL. Antena hitam yang menggetar di bumbung rumah menjadi tali penghubung antara Dewan Merdeka dengan dapur, dengan beranda, dengan setiap meja makan keluarga Malaysia. Di sinilah, di hadapan satu set televisyen TV3 yang berkelip-kelip, sebuah ritual lahir.





              </p>
              <p className="pull">Pertandingan ini bukan dimulakan di pentas. Ia dimulakan di tempat di mana setiap keluarga Malaysia menonton dunia luar dari ruang tamu mereka.


              </p>
              <p>Setiap penghujung tahun, jam menyentuh waktu yang sama. Lampu dimalapkan, biskut Marie dihidangkan, dan satu generasi belajar bahawa kemenangan sebuah lagu boleh menjadi acara keluarga. Bagi seorang ayah yang lelah, bagi seorang nenek yang dahulu menari joget di night club, bagi seorang anak yang baru tahu erti memilih sebuah lagu kegemaran — Anugerah Juara Lagu adalah satu titik temu.






              </p>
              <p>Bukan kerana pertandingan. Bukan kerana trofi. Tetapi kerana di pentas itu yang dipancarkan ke jutaan rumah pada satu malam yang sama, Malaysia mengenal dirinya sendiri.



              </p>
            </div>
          </div>
        </section>

        {/* ---------- PROLOG ESSAY ---------- */}
        <section className="overture__essay overture__essay--raised" id="prolog">
          <div className="essay-inner">
            <aside className="essay-meta">
              <span className="essay-meta__no">Prolog · 02</span>
              <p className="essay-meta__label">
                <strong>Dari Pentas Impian ke Ikon Negara</strong>
                Esei pengantar<br />Tempoh bacaan · 5 minit
              </p>
            </aside>
            <div className="essay-body">
              <h2 className="essay-body__title">Dari Pentas Impian <em>ke Ikon Negara</em></h2>
              <p className="dropcap">
                Selama empat dekad, sebuah pentas berdiri di tengah perubahan zaman. Dari Dewan Merdeka ke Stadium Putra Bukit Jalil. Dari siaran lewat malam di TV3 ke 

                <em>live</em> di TikTok. Anugerah Juara Lagu
                bertahan kerana ia tidak pernah hanya sebuah pertandingan. Ia adalah
                sebuah cermin.
              </p>
              <p>
                Pada 1989, raungan gitar Search menggegarkan dewan dan membuktikan
                bahawa rock layak bertakhta. Pada 1994, M. Nasir mengangkat falsafah
                Nusantara ke pentas paling berprestij. Pada 1998, <em className="song">Cindai</em> menjadikan
                rebab dan zapin sebagai bahasa pop dunia. Pada 2007, sebuah band indie
                yang lahir di pentas kecil tiba-tiba menerajui takhta. Setiap dekad
                menghantar utusan &mdash; setiap utusan membawa peta baharu tentang siapa
                kita.
              </p>
              <p className="pull">
                Sebuah anugerah yang hidup empat puluh tahun tidak pernah hidup tanpa
                parut. Tetapi parut itulah yang membuatnya sah, manusiawi, dan layak
                dianggap sebagai arkib emosi sebuah generasi.
              </p>
              <p>
                Tidak semua perjalanan tersebut tenang. Ada malam-malam kontroversi,
                ada pemenang yang dipertikai, ada lagu yang sepatutnya menang tetapi
                tidak &mdash; dan ada lagu yang menang tetapi tidak akan dilupakan.
                Empat puluh tahun bererti empat puluh musim debat, empat puluh musim
                rasa terkilan, empat puluh musim rasa bangga.
              </p>
              <p>Kini, di ambang dekad kelima, kita berdiri di persimpangan. Algoritma menulis bait. Platform menentukan apa yang viral. Suara generasi berubah. Tetapi sesuatu yang lebih dalam tetap di sebalik nota-nota itu — keinginan untuk merakam, mengingat, dan mewariskan bunyi yang menjadikan kita Malaysia.





              </p>
              <p>
                Inilah perjalanan empat dekad. Empat babak. Satu pentas. Satu negara
                yang masih sedang menulis lagunya sendiri.
              </p>
            </div>
          </div>
        </section>

        {/* ---------- PREVIEW: 4 acts ---------- */}
        <section className="overture__preview">
          <div className="preview-head">
            <p className="eyebrow">Empat Babak · Empat Dekad</p>
            <h3>Pilih satu babak, atau mula <em>dari permulaan.</em></h3>
          </div>
          <div className="preview-grid">
            {acts.map((act) =>
            <button
              key={act.id}
              className="preview-card"
              style={{ '--era-accent': act.accent }}
              onClick={() => onViewChange(act.id)}
              aria-label={`Buka ${act.subtitle}, ${act.years}`}>
              
                <span className="preview-card__numeral" aria-hidden="true">{act.textNumber}</span>
                <span className="preview-card__years">{act.subtitle} · {act.years}</span>
                <h4 className="preview-card__title">{act.title}</h4>
                <p className="preview-card__desc">{act.description}</p>
              </button>
            )}
          </div>
        </section>
      </article>
    </section>);

}

function ActTexture({ act }) {
  // Each era gets a different subtle texture treatment — film grain, frames, grid, glow
  const id = act.id;
  if (id === 'ACT_1') {
    return (
      <>
        <div className="act__texture act__texture--grain" aria-hidden="true" />
        <div className="act__texture act__texture--frames" style={{ color: act.accent }} aria-hidden="true">
          <div className="frame" style={{ top: '15%', right: '8%', width: '180px', height: '240px', transform: 'rotate(7deg)' }}>
            <div style={{ position: 'absolute', inset: '6px', border: '1px solid currentColor', opacity: 0.6 }} />
          </div>
          <div className="frame" style={{ bottom: '12%', left: '46%', width: '220px', height: '160px', transform: 'rotate(-10deg)' }}>
            <div style={{ position: 'absolute', inset: '6px', border: '1px solid currentColor', opacity: 0.6 }} />
          </div>
        </div>
      </>);

  }
  if (id === 'ACT_2') {
    return (
      <div className="act__texture" aria-hidden="true" style={{ opacity: 0.5 }}>
        <div style={{
          position: 'absolute',
          top: '-15%', left: '-10%', width: '70%', height: '70%',
          background: `radial-gradient(ellipse at center, ${act.accent} 0%, transparent 60%)`,
          opacity: 0.18, filter: 'blur(40px)'
        }} />
        <div style={{
          position: 'absolute',
          bottom: '-15%', right: '-10%', width: '60%', height: '60%',
          background: 'radial-gradient(ellipse at center, var(--era-3) 0%, transparent 60%)',
          opacity: 0.12, filter: 'blur(60px)'
        }} />
        <div style={{ position: 'absolute', left: '8%', top: 0, bottom: 0, width: '1px', background: 'linear-gradient(to bottom, transparent, rgba(255,255,255,0.18), transparent)' }} />
        <div style={{ position: 'absolute', right: '8%', top: 0, bottom: 0, width: '1px', background: 'linear-gradient(to bottom, transparent, rgba(255,255,255,0.18), transparent)' }} />
      </div>);

  }
  if (id === 'ACT_3') {
    return (
      <>
        <div className="act__texture act__texture--grid" aria-hidden="true" />
        <div className="act__texture" aria-hidden="true">
          <div style={{
            position: 'absolute', top: '15%', right: '10%',
            width: '260px', height: '180px',
            border: `1px solid ${act.accent}`, opacity: 0.18,
            background: 'rgba(7,6,10,0.6)', transform: 'rotate(2deg)'
          }}>
            <div style={{ display: 'flex', gap: 4, padding: 6, borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'rgba(255,255,255,0.2)' }} />
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'rgba(255,255,255,0.2)' }} />
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'rgba(255,255,255,0.2)' }} />
            </div>
          </div>
          <div style={{
            position: 'absolute', bottom: '18%', left: '30%',
            width: '200px', height: '200px',
            border: `1px solid ${act.accent}`, opacity: 0.14,
            background: 'rgba(7,6,10,0.4)', transform: 'rotate(-3deg)'
          }} />
        </div>
      </>);

  }
  if (id === 'ACT_4') {
    return (
      <div className="act__texture" aria-hidden="true">
        <div style={{
          position: 'absolute', top: 0, left: '-10%', width: '80%', height: '80%',
          background: `radial-gradient(ellipse at center, ${act.accent} 0%, transparent 60%)`,
          opacity: 0.12, filter: 'blur(80px)'
        }} />
        <div style={{
          position: 'absolute', bottom: '-10%', right: '-10%', width: '70%', height: '70%',
          background: 'radial-gradient(ellipse at center, var(--era-2) 0%, transparent 60%)',
          opacity: 0.10, filter: 'blur(60px)'
        }} />
        <div style={{
          position: 'absolute', top: '20%', right: '8%',
          width: '320px', height: '220px',
          border: '1px solid rgba(255,255,255,0.08)',
          background: 'rgba(255,255,255,0.02)',
          backdropFilter: 'blur(20px)',
          transform: 'rotate(5deg)',
          opacity: 0.7
        }}>
          <div style={{ position: 'absolute', inset: '14px', border: `1px solid ${act.accent}`, opacity: 0.35 }} />
        </div>
        <div style={{
          position: 'absolute', bottom: '14%', left: '25%',
          width: '260px', height: '260px',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: '50%',
          backdropFilter: 'blur(20px)',
          opacity: 0.5
        }}>
          <div style={{
            position: 'absolute', inset: '32px',
            border: '1px solid rgba(255,255,255,0.06)',
            borderRadius: '50%'
          }} />
          <div style={{
            position: 'absolute', inset: '80px',
            border: `1px solid ${act.accent}`,
            borderRadius: '50%',
            opacity: 0.5
          }} />
        </div>
      </div>);

  }
  return null;
}

function ActView({ actId, onSelect }) {
  const act = window.getAct(actId);
  const [selected, setSelected] = useState(null);
  useEffect(() => {setSelected(null);}, [actId]);
  if (!act) return null;

  const styleVars = { '--era-accent': act.accent };

  return (
    <section className="view" style={styleVars} aria-labelledby={`act-${actId}-title`}>
      <div className="act">
        <ActTexture act={act} />
        <div
          className="act__bg-numeral"
          style={{ WebkitTextStroke: `1px ${act.accent}`, opacity: 0.18 }}
          aria-hidden="true">
          
          {act.textNumber}
        </div>

        <div className="act__main">
          <div className="fade-up">
            <div className="act__head">
              <span className="act__head-sub">{act.subtitle}</span>
              <span className="act__head-rule" />
              <span className="act__head-years">{act.years}</span>
            </div>
            <h2 id={`act-${actId}-title`} className="act__title fade-up delay-1">
              {act.title.split(' & ').map((part, i, arr) =>
              <React.Fragment key={i}>
                  {part}
                  {i < arr.length - 1 ? <em> &amp; </em> : null}
                </React.Fragment>
              )}
            </h2>
            <p className="act__desc fade-up delay-2">{act.description}</p>

            <div className="act__songs-label fade-up delay-2">Lagu yang mengubah zaman</div>
            <div className="act__songs">
              {act.landmarks.map((lm) =>
              <button
                key={lm.id}
                onClick={() => setSelected(lm)}
                className={
                'act__song' + (selected?.id === lm.id ? ' act__song--active' : '')
                }
                aria-label={`Buka detail lagu ${lm.title}, ${lm.year}`}>
                
                  <span className="act__song-title">{lm.title}</span>
                  <span className="act__song-meta">
                    <span className="artist">{lm.artist}</span>
                    <span>{lm.year}</span>
                  </span>
                </button>
              )}
            </div>
          </div>
        </div>

        {selected &&
        <DetailDrawer
          song={selected}
          accent={act.accent}
          onClose={() => setSelected(null)} />

        }
      </div>
    </section>);

}

function DetailDrawer({ song, accent, onClose }) {
  useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  return (
    <>
      <div className="drawer-scrim" onClick={onClose} />
      <aside
        className="drawer"
        style={{ '--era-accent': accent }}
        role="dialog"
        aria-labelledby="drawer-title"
        aria-modal="true">
        
        <div className="drawer__head">
          <button className="drawer__close" onClick={onClose} aria-label="Tutup">
            <Icons.Close size={14} />
          </button>
          <span className="drawer__tag">Landmark · {song.year}</span>
          <h3 id="drawer-title" className="drawer__title">{song.title}</h3>
          <p className="drawer__meta">
            <strong>{song.artist}</strong>
            <br />
            Komposer · {song.composer}
            <br />
            Lirik · {song.lyricist}
          </p>
        </div>
        <div className="drawer__body">
          <div className="drawer__divider" />
          <blockquote className="drawer__quote">
            <Icons.Quote size={16} style={{ position: 'absolute', left: '-12px', top: '4px', color: accent, background: 'var(--ink-raised)', padding: '0 2px' }} />
            {song.quote}
          </blockquote>

          {song.culturalMeaning &&
          <div className="drawer__section">
              <span className="drawer__section-label">Makna Budaya</span>
              <p className="drawer__section-body">{song.culturalMeaning}</p>
            </div>
          }
          {song.performanceNote &&
          <div className="drawer__section">
              <span className="drawer__section-label">Nota Persembahan</span>
              <p className="drawer__section-body">{song.performanceNote}</p>
            </div>
          }
          {song.legacyQuote &&
          <div className="drawer__section">
              <span className="drawer__section-label">Legasi</span>
              <p className="drawer__section-body legacy">&ldquo;{song.legacyQuote}&rdquo;</p>
            </div>
          }
        </div>
        <div className="drawer__foot">
          {song.achievements.map((a, i) =>
          <span key={i} className="drawer__chip">
              <Icons.Award size={10} />
              {a}
            </span>
          )}
        </div>
      </aside>
    </>);

}

Object.assign(window, { OvertureView, ActView });