/* EncoreView · HeartStoriesScrollytelling */

var encoreSections = [
  { id: 'overview',     title: 'Refleksi: Warisan Yang Terus Hidup',         icon: 'Sparkles' },
  { id: 'blueprint',    title: 'Blueprint Juara Lagu',                       icon: 'Trophy' },
  { id: 'genre',        title: 'Evolusi Genre Muzik',                        icon: 'Music' },
  { id: 'lyrics',       title: 'Evolusi Naratif Lirik',                      icon: 'FileText' },
  { id: 'reality',      title: 'Menyusuri Jejak Generasi Realiti TV',        icon: 'Mic' },
  { id: 'records',      title: '10 Rekod Paling Signifikan',                 icon: 'Disc' },
  { id: 'ethnic',       title: 'Warisan Nada: 15 Lagu Etnik Kreatif',        icon: 'Globe' },
  { id: 'performances', title: '10 Persembahan Paling Ikonik',               icon: 'Mic' },
  { id: 'controversy',  title: '7 Kontroversi Terbesar',                     icon: 'Alert' },
  { id: 'social',       title: 'Jika Dulu Ada Social Media',                 icon: 'Share' },
  { id: 'heart',        title: 'Kisah Dari Hati: 7 Cerita di Sebalik Lagu',  icon: 'Heart' },
  { id: 'glokal',       title: 'Projek Glo-KAL',                             icon: 'Globe' },
  { id: 'kapsul',       title: 'Kapsul Masa',                                icon: 'FileText' }
];

function EncoreView() {
  const [active, setActive] = useState('overview');
  return (
    <section className="view" aria-labelledby="encore-title">
      <div className="encore">
        <aside className="encore__nav" aria-label="Bahagian Encore">
          <h2 id="encore-title" className="encore__title">Encore</h2>
          <p className="encore__subtitle">Warisan Yang Terus Hidup</p>
          <nav className="encore__navlist">
            {encoreSections.map((s) => {
              const Icon = Icons[s.icon];
              return (
                <button
                  key={s.id}
                  onClick={() => setActive(s.id)}
                  className={'encore__navitem' + (active === s.id ? ' encore__navitem--active' : '')}
                >
                  <span className="encore__navicon"><Icon size={14} /></span>
                  <span>{s.title}</span>
                </button>
              );
            })}
          </nav>
        </aside>
        <div className="encore__body fade-in" key={active}>
          <EncoreSection id={active} />
        </div>
      </div>
    </section>
  );
}

function EncoreSection({ id }) {
  switch (id) {
    case 'overview':     return <EncoreOverview />;
    case 'blueprint':    return <EncoreBlueprint />;
    case 'genre':        return <EncoreGenre />;
    case 'lyrics':       return <EncoreLyrics />;
    case 'reality':      return <EncoreRealiti />;
    case 'records':      return <EncoreRecords />;
    case 'ethnic':       return <EncoreEthnic />;
    case 'performances': return <EncorePerformances />;
    case 'controversy':  return <EncoreControversy />;
    case 'social':       return <EncoreSocial />;
    case 'heart':        return <HeartStoriesScrollytelling />;
    case 'glokal':       return <EncoreGlokal />;
    case 'kapsul':       return <EncoreKapsul />;
    default:             return null;
  }
}

function EncoreOverview() {
  return (
    <div>
      <h3 className="encore__h1">Warisan yang <em>terus hidup</em></h3>
      <p className="encore__lede">
        Anugerah Juara Lagu (AJL) bukanlah sekadar sebuah pertandingan muzik tahunan.
        Selama empat dekad, pentas ini telah menjadi kanvas kronik evolusi bangsa
        Malaysia &mdash; merakam setiap denyut nadi budaya, pergeseran sosial, dan
        kelahiran pemikiran baharu menerusi magis komposisi dan bait-bait lirik.
      </p>
      <div className="grid-cards-2">
        <div className="feature-card">
          <span className="feature-card__label">Impak Budaya</span>
          <p className="feature-card__body">Mencipta standard kelestarian untuk bakat lokal bersaing menerusi identiti yang membumi tanpa perlu meniru Barat secara membabi buta.</p>
        </div>
        <div className="feature-card">
          <span className="feature-card__label">Arkib Emosi</span>
          <p className="feature-card__body">Setiap pemenang Juara Lagu merupakan manifestasi keresahan, impian, dan cinta sebuah generasi pada tahun ia dinobatkan.</p>
        </div>
        <div className="feature-card">
          <span className="feature-card__label">Memori Kolektif</span>
          <p className="feature-card__body">Ruang tamu, kedai kopi, kantin pejabat &mdash; AJL adalah satu daripada sedikit ritual TV yang masih menyatukan keluarga rentas generasi.</p>
        </div>
        <div className="feature-card">
          <span className="feature-card__label">Penjana Bakat</span>
          <p className="feature-card__body">Daripada Jaclyn Victor sampai Hael Husaini, pentas AJL ialah pengesahan rasmi yang mengubah pelapis menjadi nama yang dikenang seumur hidup.</p>
        </div>
      </div>
    </div>
  );
}

function EncoreBlueprint() {
  const items = [
    { title: 'Melodi Nusantara Kontemporari', desc: 'Suntikan elemen muzik akar umbi dalam susunan moden — Cindai, Awan Nano, Tanya Sama Itu Hud Hud.' },
    { title: 'Vokal Bervisual', desc: 'Lagu yang menuntut transisi dinamik dari penyanyi untuk menyampaikan jalan cerita, bukan sekadar ketepatan pic.' },
    { title: 'Harmoni Berlapis', desc: 'Sebahagian besar juara memanfaatkan kelebihan orkestrasi penuh AJL berbanding susunan asal.' },
    { title: 'Penceritaan yang Membumi', desc: 'Lirik yang berakar pada peristiwa nyata, isu sosial, atau memori kolektif sentiasa berbicara lebih kuat daripada metafora kosong.' },
    { title: 'Identiti Bukan Sekadar Bunyi', desc: 'Busana, koreografi dan visual pentas yang konsisten dengan jiwa lagu — bukan tampalan glamor sekadar untuk gambar.' }
  ];
  return (
    <div>
      <h3 className="encore__h1">Formula <em>abadi</em> komposer masa depan</h3>
      <p className="encore__lede">
        Adakah wujud satu formula &lsquo;magis&rsquo; untuk memenangi Juara Lagu? Analisis
        data daripada 39 tahun penganjuran membuktikan sintesis elemen-elemen ini sering
        mengikat hati juri profesional.
      </p>
      <div className="numbered-list">
        {items.map((it, i) => (
          <div key={i} className="numbered-item">
            <span className="numbered-item__no">{String(i + 1).padStart(2, '0')}</span>
            <div>
              <div className="numbered-item__title">{it.title}</div>
              <div className="numbered-item__desc">{it.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function EncoreGenre() {
  const eras = [
    { decade: '80s', label: 'Pop Tradisional &amp; Rock Kapak', desc: 'Dominasi balada mendayu dan amarah melodi rock klasik.' },
    { decade: '00s', label: 'Etnik Kreatif &amp; R&amp;B',        desc: 'Kebangkitan keaslian akar budi Nusantara berwajah baru.' },
    { decade: '20s', label: 'Genre Fluidity &amp; Indie',         desc: 'Garis pemisah genre yang kabur, melodi puitis bernuansa gelap.' }
  ];
  return (
    <div>
      <h3 className="encore__h1">Pergeseran <em>plat tektonik</em> bunyi</h3>
      <p className="encore__lede">
        Dari sentuhan melankolik balada M. Nasir ke agresif indie Hujan dan sofistikasi
        lo-fi zaman pasca-pandemik, pentas AJL sentiasa melukis kembali peta genetik
        muzik arus perdana.
      </p>
      <div className="grid-cards-3">
        {eras.map((e, i) => (
          <div key={i} style={{
            position: 'relative', overflow: 'hidden',
            background: 'var(--ink-raised)', border: '1px solid var(--ink-line)',
            padding: 24, minHeight: 200, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end'
          }}>
            <div style={{
              position: 'absolute', right: -20, bottom: -40,
              fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: 180, color: 'var(--gold-tint)', letterSpacing: -0.04 + 'em',
              lineHeight: 0.8, pointerEvents: 'none'
            }}>{e.decade}</div>
            <span className="feature-card__label" dangerouslySetInnerHTML={{ __html: e.label }} />
            <p style={{ color: 'var(--ivory-60)', fontSize: 14, lineHeight: 1.55, margin: '4px 0 0' }}>{e.desc}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function EncoreLyrics() {
  const items = [
    { year: '1986–1995', tema: 'Cinta Epik & Nasihat',         desc: '"Janji Manismu", "Tanya Sama Itu Hud Hud" — lirik berlapis, metafora tebal alam rimbun.' },
    { year: '1996–2005', tema: 'Pemerkasaan Budaya & Fantasi', desc: '"Cindai", "Mimpi Laila" — puisi klasik dan kesusasteraan lama mendominasi penceritaan.' },
    { year: '2006–2015', tema: 'Realiti & Kemanusiaan',         desc: '"Terlalu Istimewa", "Awan Nano" — menjauh dari cinta tipikal, mendekati kisah duka masyarakat global.' },
    { year: '2016–2025', tema: 'Psikologi & Keresahan Diri',    desc: '"Sumpah", "Gila" — ekspresi mentah kesihatan mental dan konflik dalaman dunia digital.' }
  ];
  return (
    <div>
      <h3 className="encore__h1">Teleskop lirik <em>kita</em></h3>
      <p className="encore__lede">
        Dari kalimat puitis tradisional ke pengakuan jujur tentang keresahan moden,
        bait lirik AJL membawa kita melintas empat dekad refleksi diri sebuah bangsa.
      </p>
      <div className="timeline-block">
        {items.map((t, i) => (
          <div key={i} className="timeline-block__item">
            <span className="timeline-block__year">{t.year}</span>
            <div className="timeline-block__title">{t.tema}</div>
            <div className="timeline-block__desc">{t.desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function EncoreRealiti() {
  const items = [
    {
      year: '2004', show: 'Malaysian Idol',
      name: 'Jaclyn Victor',
      ajl: 'AJL 20 (2005) · Gemilang — Juara & Balada Terbaik',
      desc: 'Pemenang idol pertama Malaysia, Jaclyn melangkah ke pentas AJL hanya beberapa bulan selepas mahkota dipakaikan, dan mengangkat trofi tertinggi muzik tempatan dengan Gemilang. Vokal lantangnya pada nota klimaks malam itu menutup jurang antara siaran realiti dan kemuncak prestij industri — sebuah pengisytiharan bahawa pelapis televisyen layak duduk di takhta tradisi.'
    },
    {
      year: '2004', show: 'Malaysian Idol',
      name: 'Nikki Palikat',
      ajl: 'Suara pop wanita ikonik dekad 2000-an',
      desc: 'Naib juara yang sering dianggap memenangi hati negara walaupun tidak memenangi pertandingan. Suara R&B yang tidak tipikal dan presence panggungnya membentuk imej penyanyi muda berdikari, mendahului zamannya. Jejaknya membuka jalan untuk vokalis perempuan yang berani berbeza.'
    },
    {
      year: '2004', show: 'Malaysian Idol',
      name: 'Alif Satar',
      ajl: 'Penyanyi-pelakon serbaboleh rentas medium',
      desc: 'Tidak setiap alumni realiti TV memilih jalan menjadi penyanyi semata-mata. Alif Satar mengembangkan dirinya menjadi pelakon, hos, dan tokoh hiburan rentas medium. Jalannya membuktikan bahawa pelapis televisyen boleh menjelma sebagai pencerita serbaboleh tanpa terikat dengan label "alumnus realiti".'
    },
    {
      year: '2008', show: 'Akademi Fantasia',
      name: 'Shila Amzah',
      ajl: 'AJL 36 (2021) · Pelukan Angkasa — Juara Lagu',
      desc: 'Daripada panggung One In A Million ke pentas China, tempat beliau memenangi Asian Wave 2012, dan akhirnya kembali ke AJL tiga belas tahun kemudian dengan Pelukan Angkasa bersama SOG — Shila adalah lambang ketahanan rentas sempadan. Jalannya panjang, kadang-kadang dilanda kontroversi media, tetapi kekal lantang hingga ke hari kemenangannya.'
    },
    {
      year: '2005', show: 'Akademi Fantasia 3',
      name: 'Mawi',
      ajl: 'Fenomena SMS terbesar dalam sejarah TV Malaysia',
      desc: 'Bukan setiap pemenang membawa fenomena yang sekali itu sahaja akan berlaku. Pengundian Mawi mencatat rekod jumlah SMS yang belum dipecahkan. Lebih daripada bakat, beliau menjadi cermin bagi sebuah segmen masyarakat yang sebelum itu tidak melihat dirinya di rancangan utama Malaysia. Persembahan AJL-nya membawa stadium penuh peminat yang setia hingga hari ini.'
    },
    {
      year: '2009', show: 'Akademi Fantasia 7',
      name: 'Akim & The Majistret',
      ajl: 'AJL 30 (2015) · Potret — Juara & Persembahan Terbaik',
      desc: 'Sebelum The Majistret, sebelum Potret, Akim adalah pemenang tempat ketiga Akademi Fantasia. Tetapi kemenangan AJL-nya datang enam tahun kemudian — sebagai vokalis sebuah supergrup pop-rock. Beliau memilih jalan yang lebih sukar: meninggalkan label "pemenang realiti" untuk membina identiti baharu sebagai musisi sebenar bersama band yang dia bina dari bawah.'
    },
    {
      year: '2008', show: 'Akademi Fantasia 7',
      name: 'Stacy Anam',
      ajl: 'Juara AF6 dan karier pop yang konsisten merentas dua dekad',
      desc: 'Lahir dari pertandingan; kekal di industri dengan tenaga pop tak putus-putus. Stacy mewakili gelombang juara perempuan yang membina karier yang berdaya tahan tanpa perlu duduk di pinggir kontroversi. Ketekunannya menyanyi, menulis, dan terus muncul di pentas adalah bukti yang lebih kuat daripada satu malam kemenangan realiti.'
    },
    {
      year: '2007', show: 'Akademi Fantasia 5',
      name: 'Aizat Amdan',
      ajl: 'AJL 24 (2009) · Pergi — Juara & Persembahan Terbaik',
      desc: 'Dalam dua tahun selepas keluar dari Akademi Fantasia, Aizat membuktikan dirinya bukan sekadar penyanyi muka cermin — beliau seorang pencerita akustik. Pergi menang dengan ukulele dan kejujuran sahaja, tanpa orkestra, tanpa gimik. Sebuah pengisytiharan bahawa indie boleh juga lahir dari rancangan realiti.'
    },
    {
      year: '2008', show: 'Akademi Fantasia 6',
      name: 'Hafiz Suip',
      ajl: 'AJL 26 (2011), AJL 28 (2013) · Empat Anugerah Vokal Terbaik',
      desc: 'Tiga tahun selepas keluar Akademi, Hafiz duduk di takhta AJL dengan Awan Nano — sebuah karya M. Nasir yang menyerahkan kepercayaannya pada generasi baharu. Dua tahun selepas itu, beliau menang tiga trofi dalam satu malam dengan Bahagiamu Deritaku. Empat anugerah Vokal Terbaik mengikuti. Sebuah masterclass tentang bagaimana realiti TV boleh dijadikan pelancar, bukan penghujung.'
    },
    {
      year: '2011', show: 'Mentor Legend',
      name: 'Hael Husaini',
      ajl: 'AJL 32 (2017) Jampi · AJL 33 (2018) Haram — Juara Berturut-turut',
      desc: 'Enam tahun selepas Mentor Legend, Hael berkongsi takhta AJL dua tahun berturut-turut bersama Ezra Kong — bukan sahaja sebagai penyanyi, tetapi sebagai komposer dan penulis lirik. Beliau adalah simbol generasi pertama yang menggunakan realiti TV sebagai sekolah audio-visual, bukan sebagai destinasi.'
    },
    {
      year: '2018', show: 'AF Megastar',
      name: 'Amir Jahari',
      ajl: 'AJL 37 (2023) · Hasrat — Juara Lagu',
      desc: 'Generasi pelajar program realiti TV yang tersingkir, namun berkat kesungguhannya, menyerah kalah tiada dalam kamus hidupnya. Hasrat lahir dari kesedihan peribadi seorang anak yang tidak dapat bersama bapanya yang sakit tenat. Lima tahun selepas pertandingan, Amir mengangkat trofi dengan sebuah lagu yang tidak menjerit; ia menangis perlahan. Generasi ini tidak lagi memerlukan gimik untuk menang, mereka cukup menjadi diri sendiri.'
    },
    {
      year: '2008', show: 'One in a Million',
      name: 'Marsha Milan',
      ajl: 'AJL 38 (2024) · Hening Rindu — Juara Lagu',
      desc: 'Lebih daripada dua dekad selepas keluar dari realiti TV, Marsha akhirnya merampas takhta dengan Hening Rindu — sebuah balada yang menampar dewan Axiata Arena dengan kawalan vokal kelas pertama. Jalannya panjang, sabar, tanpa percepatan palsu. Bukti bahawa AJL pada akhirnya menghormati ketekunan, bukan kepantasan.'
    }
  ];

  return (
    <div>
      <h3 className="encore__h1">Menyusuri jejak <em>generasi realiti TV</em></h3>
      <p className="encore__lede">
        Pada 11 September 2004, sebuah industri muzik bertukar haluan dalam tempoh dua
        jam. Akhir musim pertama Malaysian Idol berakhir dengan Jaclyn Victor menggenggam
        mikrofon, dan dewan studio meletus dalam tepukan. Tetapi yang sebenarnya berlaku
        malam itu lebih besar daripada satu kemenangan: sebuah pintu baharu dibuka untuk
        seorang penyanyi menjadi bintang &mdash; bukan melalui label rakaman, bukan
        melalui rangkaian dalaman industri, tetapi melalui undi rakyat.
      </p>
      <p className="encore__lede" style={{ marginTop: '-24px' }}>
        Selama 20 tahun berikutnya, pentas realiti TV menjadi sebuah akademi paralel
        yang menyumbang generasi demi generasi bintang ke takhta Anugerah Juara Lagu.
        Tetapi perjalanan mereka tidak pernah pendek. Antara hari mahkota dipakaikan
        dan trofi AJL digenggam &mdash; ada lima, sepuluh, kadang-kadang dua puluh
        tahun mengasah diri, jatuh-bangun, menukar imej, dan membuktikan bahawa bakat
        televisyen bukan akhir cerita; ia hanyalah permulaan.
      </p>

      <div className="reality-list">
        {items.map((it, i) => (
          <article key={i} className="reality-item">
            <div className="reality-item__rail">
              <span className="reality-item__no">{String(i + 1).padStart(2, '0')}</span>
              {i < items.length - 1 && <span className="reality-item__line" />}
            </div>
            <div className="reality-item__body">
              <header className="reality-item__head">
                <span className="reality-item__year">{it.year}</span>
                <span className="reality-item__sep" />
                <span className="reality-item__show">{it.show}</span>
              </header>
              <h4 className="reality-item__name">{it.name}</h4>
              <p className="reality-item__ajl">
                <Icons.Award size={11} />
                {it.ajl}
              </p>
              <p className="reality-item__desc">{it.desc}</p>
            </div>
          </article>
        ))}
      </div>

      <div className="reality-closer">
        <p>
          Dua puluh tahun selepas Jaclyn Victor mengangkat mikrofon di Malaysian Idol
          pertama, generasi yang dia hidupkan kini berdiri di seluruh rangka industri
          muzik Malaysia. Tetapi pelajaran sebenarnya bukan tentang format mereka
          dilahirkan &mdash; tetapi tentang berapa lama mereka sanggup mengasah diri
          selepas lampu studio padam.
        </p>
        <p>
          Setiap alumni dalam senarai ini punya tahun-tahun lupa. Setiap alumni di sini
          punya jalan-jalan sunyi di mana hanya kerja yang temani. Pentas AJL mungkin
          menabalkan, tetapi yang sebenar menabalkan diri mereka adalah ketekunan
          sepanjang dua dekad ini &mdash; sebuah simbol jati diri dan daya tahan
          generasi realiti TV.
        </p>
      </div>
    </div>
  );
}

function EncoreRecords() {
  const records = [
    { title: "Dato' Sri Siti Nurhaliza — Juara Paling Muda & Tiga Genre", desc: 'Juara pada usia 17 tahun (1996) dan satu-satunya artis memenangi juara tiga genre berbeza.' },
    { title: "Dato' M. Nasir — Kemenangan Terbanyak",                      desc: 'Komposer terulung dengan empat kemenangan Anugerah Juara Lagu.' },
    { title: "Dato' Jamal Abdillah — Juara Paling Berusia",                desc: 'Pemenang Juara Lagu paling berusia (2025), membuktikan artis berpengalaman kekal relevan.' },
    { title: 'Along (Exists) — Finalis Paling Muda',                       desc: 'Finalis termuda beraksi di pentas AJL pada usia 14 tahun (1992).' },
    { title: 'Hafiz Suip — Dominasi Vokal',                                desc: 'Pemegang rekod kemenangan terbanyak Anugerah Vokal Terbaik dengan empat trofi.' },
    { title: 'Perintis Wanita Penciptaan Lagu',                            desc: 'Habsah Hassan (1987) dan Ana Raffali (2010) — perintis lirik & komposer wanita pemenang Juara Lagu.' },
    { title: 'Hael Husaini & Ezra Kong — Juara Berturut-turut',            desc: 'Gandingan kreatif yang mencipta kemenangan berturut-turut dengan Jampi dan Haram.' },
    { title: 'Naim Daniel — Persembahan Paling Mencabar Fizikal',          desc: 'Menyanyi sambil tergantung terbalik (2023), diiktiraf oleh Malaysia Book of Records.' },
    { title: 'Rekod Tontonan Tertinggi',                                   desc: 'Siaran langsung AJL 26 (2011) mencatat rekod tontonan tertinggi dengan 6.5 juta penonton.' },
    { title: 'Cheryl Samad — Pengacara Paling Kerap',                      desc: 'Mengacara siaran langsung AJL lapan kali, bukti kepercayaan profesional yang tinggi.' }
  ];
  return (
    <div>
      <h3 className="encore__h1">Sejarah <em>tercipta</em></h3>
      <p className="encore__lede">
        Pencapaian luar biasa yang melakar sejarah tersendiri di pentas Anugerah Juara
        Lagu, memecah tradisi dan mencipta standard emas yang sukar ditandingi.
      </p>
      <div className="numbered-list">
        {records.map((r, i) => (
          <div key={i} className="numbered-item">
            <span className="numbered-item__no">{String(i + 1).padStart(2, '0')}</span>
            <div>
              <div className="numbered-item__title">{r.title}</div>
              <div className="numbered-item__desc">{r.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function EncoreEthnic() {
  const songs = [
    'Bonda — M. Nasir',
    'Ghazal Untuk Rabiah — M. Nasir & Jamal Abdillah',
    "Cindai — Dato' Sri Siti Nurhaliza",
    'Dikir Puteri — Noraniza Idris',
    'Hati Kama — Noraniza Idris & Siti Nurhaliza',
    "Balqis — Dato' Sri Siti Nurhaliza",
    'Ngajat Tampi — Noraniza Idris',
    'Raikan Cinta — M. Nasir',
    'Mimpi Laila — Yasin Sulaiman',
    "Nirmala — Dato' Sri Siti Nurhaliza",
    'Samudera — Nora',
    'Erti Hidup — Dayang Nurfaizah',
    'Aduh Saliha — Mawi',
    'Wassini — Waheeda',
    'Dondang Dendang — Noraniza Idris'
  ];
  return (
    <div>
      <h3 className="encore__h1">Warisan <em>nada</em></h3>
      <p className="encore__lede">
        Satu genre unik ciptaan pasaran Malaysia — menggabungkan instrumen tradisional
        seperti gambus, seruling, dan gamelan dengan rentak pop moden. Lima belas karya
        yang menjadikannya tidak lagi tradisi sekadar; ia tradisi yang bernafas.
      </p>
      <div className="song-list-2">
        {songs.map((s, i) => (
          <div key={i} className="song-list-2__item">
            <span className="song-list-2__no">{String(i + 1).padStart(2, '0')}</span>
            <span className="song-list-2__title">{s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function EncorePerformances() {
  const items = [
    { year: '1987', title: 'Merisik Khabar — Sudirman Arshad',                desc: 'Kuasa karisma sejati. Tidak memerlukan prop besar; karismanya sudah cukup memenuhi pentas dengan keikhlasan.' },
    { year: '1989', title: 'Isabella — Search',                                desc: 'Tercipta revolusi Rock \'n\' Roll menakluk takhta yang disokong oleh solo M. Nasir.' },
    { year: '1992', title: 'Madah Berhelah — Ziana Zain',                      desc: 'Kelahiran seorang Diva Vokal dengan lontaran yang tajam dan bertenaga membelah udara.' },
    { year: '1998', title: "Cindai — Dato' Sri Siti Nurhaliza",                desc: 'Revolusi teaterikal Irama Malaysia yang menjadikan pentas istana padang pasir dengan obor menyala.' },
    { year: '2002', title: 'Nirmala — Siti Nurhaliza',                         desc: 'Qasidah pembukaan yang meremangkan; persembahan berskala agung dengan alunan Nawarti Ayyami.' },
    { year: '2003', title: 'Bunga-Bunga Cinta — Misha Omar',                   desc: 'Hujan mawar dan tangisan satu negara. Korus dinyanyikan bersama stadium, diakhiri ribuan kelopak mawar gugur.' },
    { year: '2014', title: 'Apa Khabar — Joe Flizzow & SonaOne',               desc: 'Malam pertabalan hip-hop. Visual nostalgia merentasi skrin, memenangi sentuhan emosi.' },
    { year: '2019', title: 'Di Matamu — Sufian Suhaimi',                       desc: 'Patah hati paling epik. Sebuah replika pelamin kosong yang menggetar dan menusuk jutaan hati.' },
    { year: '2020', title: 'Sumpah — Aina Abdul',                              desc: 'Seni avant-garde dan jantung berdarah. Muncul dengan gaun baldu merah dengan aksi "darah" memancut.' },
    { year: '2023', title: 'Mainan — Naim Daniel',                             desc: 'Aksi melawan graviti. Menyanyikan lagunya sambil tergantung terbalik secara berisiko.' }
  ];
  return (
    <div>
      <h3 className="encore__h1">Pentas sebagai <em>kanvas</em></h3>
      <p className="encore__lede">
        Ketika pentas menjadi kanvas, dan penyanyi menjelma sebagai pencerita.
        Sepuluh detik visual yang terukir di ingatan lipatan sejarah.
      </p>
      {items.map((p, i) => (
        <div key={i} className="perf-item">
          <div className="perf-item__year">{p.year}</div>
          <div>
            <div className="perf-item__title">{p.title}</div>
            <div className="perf-item__desc">{p.desc}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function EncoreControversy() {
  const items = [
    { year: '2003', title: "Penghakiman 'Keliru'",       desc: "Lagu Nirmala tewas kepada Keliru. Sistem pemarkahan purata dipersalahkan, memaksa AJL merombak format penjurian." },
    { year: '2011', title: "Kemenangan 'Tolong Ingatkan Aku'", desc: 'Lagu indie-folk menewaskan balada mega Awan Nano, mencetuskan perang siber peminat artis alternatif vs arus perdana.' },
    { year: '2020', title: 'Satira Terlarang',           desc: 'Persembahan Drama menyindir tokoh awam; siaran ulangannya diharamkan oleh TV3.' },
    { year: '2020', title: "Gaun 'Berdarah'",            desc: 'Gimik darah memancut dari leher dikritik mempromosikan mencederakan diri, dilarang siaran ulangan selama setahun.' },
    { year: '2021', title: "Klausa 'Aku Janji'",         desc: 'Finalis dikehendaki menandatangani akujanji untuk tidak mencetuskan kontroversi, disifatkan sebagai tapisan artistik.' },
    { year: '2021', title: 'Ketua Juri vs. Hip-Hop',     desc: 'Ketua juri menuduh lagu hip-hop Sakit bukan lagu, membangkitkan kemarahan komuniti hip-hop masa kini.' },
    { year: '2023', title: 'Debat Etika Permaidani Merah', desc: 'Kehadiran pempengaruh lelaki dengan busana langgar norma jantina mencetus perdebatan teguran awam.' }
  ];
  return (
    <div>
      <h3 className="encore__h1">7 Kontroversi <em>terbesar</em></h3>
      <p className="encore__lede">
        Bukan hanya pujian, AJL sentiasa dipalit isu panas. Dari kritikan seni ke
        pergeseran teknikal, ini adalah ketegangan yang mendewasakan industri.
      </p>
      {items.map((c, i) => (
        <div key={i} className="controversy-item">
          <span className="controversy-item__icon"><Icons.Alert size={16} /></span>
          <span className="controversy-item__year">{c.year}</span>
          <div className="controversy-item__title">{c.title}</div>
          <div className="controversy-item__desc">{c.desc}</div>
        </div>
      ))}
    </div>
  );
}

function EncoreSocial() {
  const items = [
    { tag: '#Justice4Sinaran (1987)',          title: 'Kontroversi pertama AJL',        desc: "Peminat Ratu Jazz, Sheila Majid, pasti akan menggegarkan media sosial apabila lagu ikonik Sinaran gagal layak ke peringkat akhir, tewas kepada Angan-Angan." },
    { tag: '#IsabellaRockOo (1989)',            title: "Gempa budaya Rock 'n' Roll",     desc: 'Kemenangan Isabella oleh Search akan mencetuskan perayaan digital yang dahsyat. Peminat akan membanjiri klip gitar solo Kid dan laungan vokal Amy.' },
    { tag: '#TeamSiti vs #TeamZiana vs #TeamJee', title: 'Perang tiga ratu',              desc: 'Lupakan perang diva biasa; ini adalah pertempuran tiga penjuru fancam, undian, dan perdebatan tanpa henti tentang siapa ratu pop sebenar Malaysia.' },
    { tag: '#MadahBerhelahChallenge (1992)',    title: 'Cabaran vokal paling epik',      desc: 'Ledakan vokal Ziana Zain pasti akan melahirkan sebuah cabaran viral. Penyanyi amatur dan profesional akan memuat naik video mereka mencuba not tinggi ikonik tersebut.' },
    { tag: '#CindaiChallenge (1998)',           title: 'Fenomena Irama Malaysia',         desc: 'Cindai akan menjadi lebih daripada sekadar lagu; ia akan menjadi fenomena dance challenge di seluruh negara sebelum TikTok wujud.' },
    { tag: '#JuriKeliru (2003)',                title: 'Skandal penghakiman terbesar',    desc: 'Kekalahan Nirmala kepada Keliru akan mencetuskan kemarahan besar-besaran. Hashtag #JusticeForNirmala dan #AJLDikacau akan trending selama berminggu-minggu.' },
    { tag: '#AdibahBikinNangis (2006)',         title: 'Momen paling emosional',          desc: 'Persembahan Terlalu Istimewa oleh Adibah Noor akan menjadi tular kerana penjiwaannya. Apabila kisah sebenar didedahkan, ia mengubah balada indah menjadi memorial yang menyayat hati.' }
  ];
  return (
    <div>
      <h3 className="encore__h1">Jika dulu ada <em>social media</em></h3>
      <p className="encore__lede">
        Sebelum wujudnya butang &lsquo;kongsi&rsquo; dan &lsquo;retweet&rsquo;, perdebatan
        muzik negara berlaku di kedai kopi dan majalah hiburan. Bayangkan kekecohan yang
        tercetus jika setiap detik ikonik AJL pra-2007 dapat meletus di alam maya dalam
        masa nyata.
      </p>
      {items.map((it, i) => (
        <div key={i} className="social-item">
          <div className="social-item__tag">{it.tag}</div>
          <div className="social-item__title">{it.title}</div>
          <div className="social-item__desc">{it.desc}</div>
        </div>
      ))}
    </div>
  );
}

function EncoreGlokal() {
  const items = [
    { title: 'Isabella — Search (1989)',                 desc: 'Solo gitar epiknya boleh diolah semula oleh Santana atau diberi nafas baru sebagai lagu stadium rock oleh The Killers.' },
    { title: 'Tanya Sama Itu Hud Hud — M. Nasir (1994)', desc: 'Penerbit global seperti Bonobo atau Four Tet boleh mengangkat ritma tradisionalnya menjadi runut elektronik yang sofistikated.' },
    { title: 'Ghazal Untuk Rabiah — M. Nasir & Jamal (1997)', desc: 'Artis seperti Gotan Project boleh memperkenalkan keindahan Ghazal kepada dunia dalam bentuk yang segar.' },
    { title: "Cindai — Siti Nurhaliza (1998)",            desc: 'Diplo / Major Lazer boleh menyuntik rentak moombahton, mengubahnya menjadi lagu dance floor global tanpa menghilangkan jiwa tradisionalnya.' },
    { title: 'Awan Nano — Hafiz Suip (2011)',             desc: 'Ólafur Arnalds atau Nils Frahm boleh merungkai alunan piano dan vokalnya yang indah menjadi karya instrumental.' },
    { title: 'Apa Khabar — Joe Flizzow & SonaOne (2014)', desc: 'Adunan semula oleh DJ Premier akan menyerlahkan penceritaannya melalui bunyi boom-bap klasik.' },
    { title: 'Haram — Hael & Dayang (2018)',              desc: 'Versi R&B yang gelap dan moody oleh The Weeknd dan Ariana Grande, yang berkongsi estetika sinematik yang sama.' },
    { title: 'Gila — Kaka, Noki, Loca B (2020)',          desc: 'Diolah semula sebagai lagu K-pop oleh (G)I-DLE, atau diubah menjadi runut EDM oleh Martin Garrix.' },
    { title: 'Cinta — Marsha Milan (2022)',               desc: 'Sebuah duet mega bersama Celine Dion, diiringi gubahan orkestra oleh David Foster.' },
    { title: 'Hasrat — Amir Jahari (2024)',               desc: 'Tafsiran semula oleh Bon Iver atau Sufjan Stevens akan menyerlahkan keindahan melankoliknya.' }
  ];
  return (
    <div>
      <h3 className="encore__h1">Projek <em>Glo-KAL</em></h3>
      <p className="encore__lede">
        Muzik adalah bahasa universal, dan arkib AJL menyimpan khazanah melodi yang
        menanti untuk ditemui oleh dunia. Sepuluh karya agung yang memiliki DNA untuk
        dilahirkan semula di pentas global.
      </p>
      <div className="grid-cards-2">
        {items.map((it, i) => (
          <div key={i} className="feature-card">
            <div style={{ color: 'var(--ivory)', fontWeight: 600, fontSize: 15, marginBottom: 8 }}>{it.title}</div>
            <p className="feature-card__body">{it.desc}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function EncoreKapsul() {
  const [name, setName] = useState('');
  const [note, setNote] = useState('');
  const [notes, setNotes] = useState(() => {
    try { return JSON.parse(localStorage.getItem('ajl_kapsul') || '[]'); } catch { return []; }
  });
  useEffect(() => { localStorage.setItem('ajl_kapsul', JSON.stringify(notes)); }, [notes]);

  const submit = (e) => {
    e.preventDefault();
    if (!name.trim() || !note.trim()) return;
    setNotes((n) => [{ name, note, date: new Date().toLocaleDateString('ms-MY') }, ...n]);
    setName(''); setNote('');
  };

  return (
    <div>
      <h3 className="encore__h1">Kapsul Masa — <em>lagu untuk cucu kita</em></h3>
      <p className="encore__lede">
        Abadikan nota ringkas untuk generasi masa depan. Lagu apakah yang anda mahu
        mereka dengar, dan mengapa ia penting buat kita hari ini?
      </p>
      <form className="kapsul-form" onSubmit={submit}>
        <input
          type="text" required
          placeholder="Nama penuh / nama gelaran"
          value={name} onChange={(e) => setName(e.target.value)}
          aria-label="Nama"
        />
        <textarea
          required
          placeholder="100 tahun dari sekarang, saya harap kalian mendengar lagu…"
          value={note} onChange={(e) => setNote(e.target.value)}
          aria-label="Nota"
        />
        <button type="submit" className="btn btn--gold">Simpan dalam arkib</button>
      </form>

      {notes.length > 0 && (
        <div className="kapsul-notes">
          <p className="eyebrow" style={{ display: 'block', marginBottom: 18 }}>Memori Komuniti</p>
          {notes.map((n, i) => (
            <div key={i} className="kapsul-note">
              <div className="kapsul-note__quote">&ldquo;{n.note}&rdquo;</div>
              <div className="kapsul-note__byline">
                <span>{n.name}</span>
                <span>{n.date}</span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ============================================================= */
/*                  Heart Stories Scrollytelling                  */
/* ============================================================= */

function HeartStoriesScrollytelling() {
  const [activeIdx, setActiveIdx] = useState(0);
  const containerRef = useRef(null);
  const itemRefs = useRef([]);

  useEffect(() => {
    if (typeof IntersectionObserver === 'undefined') return;
    const root = containerRef.current?.closest('.encore__body') || null;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            const idx = Number(e.target.getAttribute('data-idx'));
            if (!Number.isNaN(idx)) setActiveIdx(idx);
          }
        });
      },
      { root, rootMargin: '-40% 0px -40% 0px', threshold: 0 }
    );
    itemRefs.current.forEach((el) => el && io.observe(el));
    return () => io.disconnect();
  }, []);

  const accent = window.heartStories[activeIdx]?.accent || '#B8945A';

  return (
    <div className="stories" ref={containerRef} style={{ '--era-accent': accent }}>
      <div className="stories__intro">
        <p className="eyebrow">7 Cerita di Sebalik Lagu</p>
        <h3>Kisah dari hati</h3>
        <p>
          Ada lagu yang kita dengar, dan ada lagu yang kita rasa. Di pentas Anugerah
          Juara Lagu, sesetengah karya membawa gema yang lebih mendalam — gema jiwa
          dari kisah-kisah yang tersembunyi di sebalik notanya.
        </p>
      </div>
      <div className="stories__list">
        {window.heartStories.map((s, i) => (
          <article
            key={s.id}
            ref={(el) => (itemRefs.current[i] = el)}
            data-idx={i}
            className={'story' + (i === activeIdx ? ' story--active' : '')}
            style={{ borderLeftColor: s.accent }}
          >
            <div className="story__meta">
              <span className="story__year" style={{ color: s.accent }}>{s.year}</span>
              <span className="story__rule" />
              <span className="story__artist">{s.artist}</span>
            </div>
            <h4 className="story__song">&ldquo;{s.song}&rdquo;</h4>
            <h5 className="story__title" style={{ color: s.accent }}>{s.title}</h5>
            <p className="story__desc">{s.desc}</p>
          </article>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { EncoreView, HeartStoriesScrollytelling });