/**
 * AJL40 Digital Series
 * © 2026 sultanmuzaffar. Hak cipta terpelihara / All rights reserved.
 * Penggunaan, penyalinan atau pengedaran tanpa kebenaran bertulis adalah dilarang.
 * Unauthorized use, copying or distribution is prohibited.
 */

/* ============================================================
   AJL 40 — Arkib Visual page (decades, timeline, quiz, legends)
   Plain React 18 (UMD) + Babel standalone. No framer-motion / router.
   Registers <ArkibContent /> on window.
   ============================================================ */

const { useState: useStateA, useMemo: useMemoA } = React;

/* ---------------- Data ---------------- */

const ARK_DECADES = [
  { id: 1, years: '1986–1995', name: 'Dekad Perintis', subtitle: 'Legenda Dicipta', description: 'Kelahiran identiti pop Malaysia dan optimisme budaya di mana melodi bertemu kebangsaan. Era di mana AJL mencipta ritual tahunan yang menyatukan seluruh keluarga Malaysia di hadapan televisyen.', imageUrl: '/esei/assets/era/decade-1-perintis.jpg' },
  { id: 2, years: '1996–2005', name: 'Prasasti Emas', subtitle: 'Budaya Diteroka', description: 'Kemunculan "pop royalty" Malaysia; puncak Irama Malaysia dan gabungan budaya; adaptasi kepada trend Reality TV. Era kegemilangan yang melahirkan nama-nama yang masih bergema hingga hari ini.', imageUrl: '/esei/assets/era/decade-2-prasasti.jpg' },
  { id: 3, years: '2006–2015', name: 'Revolusi Digital', subtitle: 'Gelombang Baharu', description: 'Gangguan arus perdana, kebangkitan keaslian indie dan platform digital, serta kepelbagaian genre yang tidak pernah ada sebelumnya. Era yang mempersoalkan semula apa ertinya "lagu Malaysia".', imageUrl: '/esei/assets/era/decade-3-revolusi.jpg' },
  { id: 4, years: '2016–2025', name: 'Melakar Visual', subtitle: 'Menggapai Global', description: 'Pendefinisian semula pop Malaysia di pentas global, di mana seni persembahan bertemu ekspresi digital. Era di mana konsep "artis lengkap" mendapat makna baharu.', imageUrl: '/esei/assets/era/decade-4-global.jpg' },
];

const ARK_DECADE_DETAILS = [
  { id: 1, culturalNote: 'Dekad perintis menyaksikan kelahiran ritual tahunan yang akan menyatukan keluarga Malaysia selama generasi. Televisyen berwarna, ruang tamu, dan lagu — tiga elemen yang membentuk pengalaman kolektif bangsa.', highlights: [
    { year: '1986', winner: 'AJL Rintis Jalan', song: 'Nota Pertama Muzik', note: 'Permulaan sebuah legenda.' },
    { year: '1989', winner: 'Letusan Rock Kapak', song: 'Rock & Identiti Budaya', note: 'Bunyi Malaysia mula berkembang.' },
    { year: '1992', winner: 'Kategori Diperkenalkan', song: 'Gelombang Baharu', note: 'Muzik Malaysia temui variasi.' },
  ] },
  { id: 2, culturalNote: 'Prasasti emas — era di mana nama-nama yang akan menjadi legenda mula bersinar. Irama Malaysia mencapai puncaknya, dan budaya pop Malaysia menemui identiti yang lebih pelbagai.', highlights: [
    { year: '1996', winner: 'Cahaya Emas Muzik', song: 'Bintang Legenda Menyinar', note: 'Suara yang menjadi pujaan semua.' },
    { year: '2000', winner: 'Muzik Alaf Baru', song: 'Era Digital Awal', note: 'Irama Malaysia diberi nafas pop baharu.' },
    { year: '2004', winner: 'Pengaruh Realiti TV', song: 'Persaingan Meluas', note: 'Platform baharu mengubah ekosistem.' },
  ] },
  { id: 3, culturalNote: 'Revolusi digital mengubah cara kita mendengar, berkongsi, dan mendebat muzik. Internet menghapuskan sempadan geografis, dan artis Malaysia mula berhadapan dengan pendengar — dan pesaing — dari seluruh dunia.', highlights: [
    { year: '2007', winner: 'Gelombang Indie', song: 'Keaslian Bunyi Baharu', note: 'Scene indie mula memijak tanah.' },
    { year: '2011', winner: 'Tonton, YouTube Ubah Dunia', song: 'Era Platform Streaming', note: 'Sifu muzik menang kali keempat.' },
    { year: '2014', winner: 'Hip Hop Naik Takhta', song: 'Kepelbagaian Muzik', note: 'Pop, R&B, indie bersaing setara.' },
  ] },
  { id: 4, culturalNote: 'Era global — di mana artis Malaysia tidak lagi berpuas hati dengan pentas domestik. Dengan platform streaming dan media sosial, lagu Malaysia boleh didengar dari Tokyo ke Toronto. Cabaran kini adalah bagaimana untuk kekal relevan secara global tanpa kehilangan jiwa tempatan.', highlights: [
    { year: '2016', winner: 'Era Visual Bermula', song: 'Persembahan Gah', note: 'Visual sama penting dengan audio.' },
    { year: '2020', winner: 'Pandemik & PKP', song: 'AJL Tanpa Penonton', note: 'Cabaran baharu, kreativiti baharu.' },
    { year: '2023', winner: 'Minimalis Tawan Hati', song: 'Satu Dunia Memandang AJL', note: 'Muzik tempatan dapat perhatian luar.' },
  ] },
];

const ARK_DECADE_CONFIG = {
  1: { years: '1986–1995', name: 'Merintis Bunyi, Mencipta Legenda', dotColor: '#8B5E3C', accent: '#E07850' },
  2: { years: '1996–2005', name: 'Suara Emas, Meneroka Budaya', dotColor: '#9D7B3A', accent: '#D4B073' },
  3: { years: '2006–2015', name: 'Gelombang Indie & Kuasa Digital', dotColor: '#2D8A7A', accent: '#00B5D9' },
  4: { years: '2016–2025', name: 'Sinergi Visual, Gema Global', dotColor: '#7B4A9D', accent: '#AC7AF3' },
};

const ARK_GENRE_COLORS = { 'Ballad': '#C9A84C', 'Rock': '#C0392B', 'Tradisi / Fusion / Folk': '#2D8A7A', 'Hip Hop': '#4A7B9D' };

const ARK_TIMELINE_EVENTS = [
  { year: 1986, song: 'Sekadar Di Pinggiran', artist: 'Francissca Peter', composer: 'Manan Ngah', lyricist: 'Lukhman S.', genre: 'Ballad', decade: 1, isLandmark: true, note: 'Not pertama simfoni kebangsaan AJL', maknaBudaya: 'Lagu ini membuka tirai era anugerah berprestij, membuktikan muzik pop balada tempatan punya magis dan keunikan yang sukar ditandingi.', notaPersembahan: 'Persembahan vokal yang bertenaga, tanpa gimik, hanya bersandar pada kekuatan memori dan suara emas Francissca Peter yang memukau.', legasi: '"Permulaan segalanya. Satu penanda aras."' },
  { year: 1987, song: 'Menaruh Harapan', artist: 'Zaiton Sameon', composer: 'A. Ali', lyricist: 'Habsah Hassan', genre: 'Ballad', decade: 1, isLandmark: false, maknaBudaya: 'Lagu sarat penderitaan peribadi ini menjadi anthem tidak rasmi bagi jiwa-jiwa yang pernah merasai luka dan kehilangan yang sama.', notaPersembahan: 'Penyampaian emosi Zaiton Sameon di pentas kekal sebagai detik paling meruntun jiwa, terpahat dalam sejarah anugerah ini.', legasi: '"Kekuatan dalam kesedihan."' },
  { year: 1988, song: 'Kau Kunci Cintaku Di Dalam Hatimu', artist: 'Ramlah Ram', composer: 'Ahmad Nawab', lyricist: 'Juwie', genre: 'Ballad', decade: 1, isLandmark: false, maknaBudaya: 'Komposer Datuk Ahmad Nawab dan penulis lirik Juwie menzahirkan kehebatan mereka, menafsir denyut nadi muzik popular era ini dengan penuh gaya.', notaPersembahan: 'Persembahan dengan gaun berhias \'hati\' menjadi simbol visual era 80-an, menonjolkan keunikan dan keberanian pentas zaman itu.', legasi: '"Melodi pop Melayu tulen pada kemuncaknya."' },
  { year: 1989, song: 'Isabella', artist: 'Search', composer: 'Search', lyricist: 'Bob Lokman', genre: 'Rock', decade: 1, isLandmark: true, note: 'Letupan Rock Kapak — rock menjadi runut bunyi rasmi generasi', maknaBudaya: 'Seluruh Malaysia bergegar gempita apabila lagu rock diangkat sebagai Juara Lagu, sekali gus mengukuhkan genre rock di tanah air.', notaPersembahan: 'Aksi bertenaga Search di pentas menjadi penanda aras, menginspirasi persembahan kumpulan rock generasi seterusnya.', legasi: '"Rock bukan lagi muzik jalanan, ia muzik kebangsaan."' },
  { year: 1990, song: 'Janji Manismu', artist: 'Aishah', composer: 'Adam Ahmad', lyricist: 'Aishah', genre: 'Ballad', decade: 1, isLandmark: false, maknaBudaya: 'Lagu ini menonjolkan kualiti luar biasa penyanyi bertaraf dunia, digabungkan dengan cita rasa pop Nusantara yang utuh.', notaPersembahan: 'Vokal mantap Aishah, digandingkan dengan gerak sederhana, menyerlahkan kehebatan teknikal dan tradisi persembahan AJL yang tiada bandingan.', legasi: '"Suara bertaraf dunia, jiwa tempatan."' },
  { year: 1991, song: 'Takdir dan Waktu', artist: 'Mega', composer: 'Rahim Othman', lyricist: 'Juwie', genre: 'Rock', decade: 1, isLandmark: false, maknaBudaya: 'Lagu ini melambangkan zaman kegemilangan rock Kapak, ketika kumpulan rock menguasai carta album dan anugerah.', notaPersembahan: 'Kehadiran kumpulan rock beridentiti unik meneruskan tradisi balada puitis, menambah warna dalam persaingan yang semakin sengit.', legasi: '"Rock dan puitis berpisah tiada."' },
  { year: 1992, song: 'Pada Syurga Di Wajahmu', artist: 'Nash', composer: 'Fauzi Marzuki', lyricist: 'Bob Lokman', genre: 'Rock', decade: 1, isLandmark: true, note: 'Kategori genre diperkenalkan: Balada, Pop Rock, Irama Malaysia', maknaBudaya: 'Lagu ini mengukuhkan tradisi rock kapak balada, di mana lirik sehalus puisi cinta berdenyut bersama tenaga rock yang membara.', notaPersembahan: 'Nash di pentas dengan gaya ikoniknya menyampaikan setiap bait, mengadun perit dan harapan dalam keseimbangan yang memukau.', legasi: '"Rock yang berbisik, bukan menjerit."' },
  { year: 1993, song: 'Teratai Layu Di Tasik Madu', artist: 'Fauziah Latiff', composer: 'Adam Ahmad', lyricist: 'S. Amin Shahab', genre: 'Ballad', decade: 1, isLandmark: false, maknaBudaya: 'Lagu ini meneruskan tradisi balada simbolik alam Melayu, memperkukuh estetika kiasan bunga dan air sebagai bahasa cinta sejagat di Nusantara.', notaPersembahan: 'Vokal lembut Fauziah Latiff, dengan kawalan emosi yang berkesan, memperdalam makna puitis lirik secara terarah dan minimalis.', legasi: '"Cinta yang layu, tetapi kekal harum."' },
  { year: 1994, song: 'Tanya Sama Itu Hud-Hud', artist: 'M. Nasir', composer: 'M. Nasir', lyricist: 'M. Nasir', genre: 'Tradisi / Fusion / Folk', decade: 1, isLandmark: true, note: 'Nusantara progressive — muzik pop menjadi wacana intelektual', maknaBudaya: 'Lagu ini menjadi simbol kecerdasan dan mutu sastera Melayu yang akhirnya menguasai pasaran muzik arus perdana.', notaPersembahan: 'Persembahan teatrikal penuh simbolisme Nusantara melambangkan tenaga dan kreativiti pentas pada era kegemilangan muzik Malaysia.', legasi: '"Magnum opus muzik Nusantara komersial."' },
  { year: 1995, song: 'Cinta Beralih Arah', artist: 'Aishah', composer: 'Jari Idris', lyricist: 'Habsah Hassan', genre: 'Ballad', decade: 1, isLandmark: false, maknaBudaya: 'Lagu ini mengadunkan melodi klasik dan rentak balada yang sebati dengan jiwa rakyat Malaysia sepanjang dekad itu.', notaPersembahan: 'Vokal yang tepat, diiringi orkestra, memperhebatkan suasana malam penutup dekad pertama AJL.', legasi: '"Penutup gemilang untuk dekad pertama."' },
  { year: 1996, song: 'Jerat Percintaan', artist: 'Siti Nurhaliza', composer: 'Adnan Abu Hassan', lyricist: 'Hani M.J. & Othman Zainuddin', genre: 'Ballad', decade: 2, isLandmark: true, note: 'Zaman emas pop moden — Siti mengubah AJL selama-lamanya', maknaBudaya: 'Tirai baharu terbuka luas, menandakan kelahiran era vokalis berimej suci dan suara merdu, membangkitkan kembali zaman keemasan vokal tulen yang pernah gemilang.', notaPersembahan: 'Persembahan santai namun memukau, disulami kemanisan vokal tiada tandingan, menjadi salam perkenalan yang sempurna di pentas berprestij.', legasi: '"Lahirnya seorang legenda dari Kuala Lipis."' },
  { year: 1997, song: 'Ghazal Untuk Rabiah', artist: 'M. Nasir & Jamal Abdillah', composer: 'M. Nasir', lyricist: 'Cenderawasih (Loloq)', genre: 'Tradisi / Fusion / Folk', decade: 2, isLandmark: false, maknaBudaya: 'Seni ghazal Johor kembali bersinar di pentas komersial, diperkasa oleh tenaga vokal maskulin dan sentuhan artistik yang memukau.', notaPersembahan: 'Dua Raja Pop mempamerkan karisma luar biasa, hanya berpadu suara tanpa gerak berlebihan, namun tetap menawan dewan dengan kekuatan vokal mereka.', legasi: '"Seni ghazal yang tidak ditelan zaman."' },
  { year: 1998, song: 'Cindai', artist: 'Siti Nurhaliza', composer: 'Suhaimi Mohd Zain', lyricist: 'Hairul Anuar Harun', genre: 'Tradisi / Fusion / Folk', decade: 2, isLandmark: true, note: 'Tradisi menjadi bahasa pop global — puncak Irama Malaysia', maknaBudaya: 'Kebanggaan irama tradisional dihidupkan semula dalam balutan pop kontemporari, memikat hati generasi muda.', notaPersembahan: 'Koreografi tradisional yang memukau berpadu dengan vokal sempurna Siti Nurhaliza, mencipta magis di pentas.', legasi: '"Irama Malaysia tidak akan pernah mati."' },
  { year: 1999, song: 'Andalusia', artist: 'M. Nasir', composer: 'M. Nasir', lyricist: 'Loloq', genre: 'Tradisi / Fusion / Folk', decade: 2, isLandmark: false, maknaBudaya: 'Mengajak penonton dan pendengar menelusuri sejarah, falsafah dan metafora, melangkaui batas pop komersial yang biasa.', notaPersembahan: 'M. Nasir muncul seperti pengembara masa; persembahannya sarat misteri dan karisma yang memikat.', legasi: '"Sebuah kembara waktu di atas pentas."' },
  { year: 2000, song: 'Balqis', artist: 'Siti Nurhaliza', composer: 'Suhaimi Mohd Zain (Pak Ngah)', lyricist: 'Hairul Anuar Harun', genre: 'Tradisi / Fusion / Folk', decade: 2, isLandmark: true, note: 'Kemenangan ketiga buat legenda muzik negara, Siti Nurhaliza', maknaBudaya: 'Fenomena tarian dan rentak zapin arabesque meletus, menjadi kegilaan masyarakat ketika itu.', notaPersembahan: 'Koreografi memukau dan gaya glamor pentas yang berwarna-warni, penuh tenaga, serta vokal yang teguh milik Siti Nurhaliza.', legasi: '"Ritma padang pasir terus berkuasa."' },
  { year: 2001, song: 'Mimpi Laila', artist: 'Yasin Sulaiman', composer: 'Yasin Sulaiman', lyricist: 'Yasin Sulaiman', genre: 'Tradisi / Fusion / Folk', decade: 2, isLandmark: false, maknaBudaya: 'Bukti keberanian seorang penyanyi dan penulis lagu untuk bereksperimen dengan ritma etnik luar yang diadun dengan citarasa tempatan.', notaPersembahan: 'Persembahan penuh spiritualiti kontemporari, diserikan dengan tarian khas pementasan Yasin.', legasi: '"Suntikan world music anak muda."' },
  { year: 2002, song: 'Keliru', artist: 'Ajai & Nurul', composer: 'Aidit Alfian', lyricist: 'Aidit Alfian', genre: 'Rock', decade: 2, isLandmark: false, maknaBudaya: 'Membuktikan bahawa lagu yang bersahaja dan mudah didengar mampu menewaskan karya balada dramatik jika komposisinya memikat.', notaPersembahan: 'Persembahan duet mesra dan harmoni pasangan suami isteri itu berjaya mencuri perhatian juri.', legasi: '"Kuasa magis pada melodi akustik pop bersahaja."' },
  { year: 2003, song: 'Bunga-Bunga Cinta', artist: 'Misha Omar', composer: 'Adnan Abu Hassan', lyricist: 'Adnan Abu Hassan', genre: 'Ballad', decade: 2, isLandmark: false, maknaBudaya: 'Pencarian bakat mula membuahkan hasil, melahirkan penyanyi berjiwa melankolik yang luar biasa dan menawan sanubari rakyat.', notaPersembahan: 'Vokal lantang penuh esakan, seolah-olah menangis, meruntun hati setiap pendengar.', legasi: '"Keperitan yang diangkat menjadi seni yang indah."' },
  { year: 2004, song: 'Relaku Pujuk', artist: 'Spider', composer: 'Tam Spider', lyricist: 'Keon', genre: 'Rock', decade: 2, isLandmark: false, maknaBudaya: 'Lima belas tahun penantian sejak Isabella Search, rock akhirnya kembali bertakhta sebagai suara sejati dari jalanan.', notaPersembahan: 'Saat korus bergema, stadium berubah menjadi koir gergasi, bukti nyata bahawa lagu ini telah menjuarai hati rakyat.', legasi: '"Takhta Juara Lagu kini milik degup jantung di jalanan."' },
  { year: 2005, song: 'Gemilang', artist: 'Jaclyn Victor', composer: 'Aubrey Suwito', lyricist: 'Asmin Mudin', genre: 'Ballad', decade: 2, isLandmark: true, note: 'Era Reality TV — Juara Malaysian Idol pecah tembok AJL', maknaBudaya: 'Kemenangan besar bakat program realiti pertama diiringi kejayaan komposisi agung yang menggabungkan elemen pop komersial bertaraf antarabangsa.', notaPersembahan: 'Vokal bernada tinggi tiada tandingan malam itu, diiringi kemuncak yang mempesona seluruh dewan.', legasi: '"Satu letusan vokal yang akan diingati."' },
  { year: 2006, song: 'Terlalu Istimewa', artist: 'Adibah Noor', composer: 'Azlan Abu Hassan', lyricist: 'Adibah Noor', genre: 'Ballad', decade: 3, isLandmark: false, maknaBudaya: 'Kemenangan gemilang yang didedikasikan kepada mangsa tragedi Nurin Jazlin menyuntik roh baru dan kedalaman luar biasa ke dalam lagu pop ini.', notaPersembahan: 'Persembahan sarat emosi dari Almarhumah Adibah Noor, sederhana namun memukau, diiringi vokal dan iringan muzik yang menggugah jiwa.', legasi: '"Kemanusiaan merentas muzik."' },
  { year: 2007, song: 'Itu Kamu', artist: 'Estranged', composer: 'Estranged', lyricist: 'Richael Lawrence Gimbang', genre: 'Rock', decade: 3, isLandmark: true, note: 'Kejayaan indie — band underground menawan takhta AJL', maknaBudaya: 'Tembok pemisah antara muzik indie dan arus perdana akhirnya runtuh, menyatukan dua dunia yang sekian lama terasing.', notaPersembahan: 'Kejujuran mentah dan rasa tulen menyala di pentas anugerah berprestij, mencipta detik yang terpahat dalam ingatan.', legasi: '"Indie kini milik semua orang."' },
  { year: 2008, song: 'Lagu Untukmu', artist: 'Meet Uncle Hussain', composer: 'Taja, Tass & Lan', lyricist: 'Taja & Tass', genre: 'Rock', decade: 3, isLandmark: false, maknaBudaya: 'Kejayaan Estranged bukan sekadar tuah, tetapi bukti dominasi band indie yang meniupkan nafas segar ke persada muzik.', notaPersembahan: 'Aura vokalis Lan dengan gaya tersendiri dan karisma membara memukau juri serta menawan hati para generasi muda.', legasi: '"Era kebangkitan band-band indie."' },
  { year: 2009, song: 'Pergi', artist: 'Aizat Amdan', composer: 'Pete Teo', lyricist: 'Amran Omar', genre: 'Tradisi / Fusion / Folk', decade: 3, isLandmark: false, maknaBudaya: 'Bunyi folk akustik yang menenangkan diserap ke dalam dunia pop komersial, membuktikan bahawa muzik yang damai juga mampu menjulang kemenangan.', notaPersembahan: 'Dengan sentuhan minimalis dan petikan ukulele atau gitar, Aizat menzahirkan kejujuran tulus dari lubuk hati.', legasi: '"Keindahan dalam kesederhanaan akustik."' },
  { year: 2010, song: 'Tolong Ingatkan Aku', artist: 'Ana Raffali', composer: 'Ana Raffali', lyricist: 'Ana Raffali', genre: 'Tradisi / Fusion / Folk', decade: 3, isLandmark: true, note: 'Kemenangan sulung komposer wanita pada ulang tahun ke-25 AJL', maknaBudaya: 'Diksi bahasa kebangsaan yang tinggi diadun dengan muzik kontemporari, memikat pencinta sastera dan peminat muzik.', notaPersembahan: 'Kemunculan Ana dengan gitar dan baju kurung kapas berpesak menjadi lambang wanita Melayu moden yang segar di pentas seni.', legasi: '"Gadis berkurung kapas dan gitar."' },
  { year: 2011, song: 'Awan Nano', artist: 'Hafiz Suip', composer: 'M. Nasir', lyricist: 'Buddhi Hekayat', genre: 'Ballad', decade: 3, isLandmark: true, note: 'Kemenangan keempat sifu muzik negara, M. Nasir', maknaBudaya: 'Kembalinya M. Nasir ke takhta kejuaraan melalui magis nyanyian bintang realiti muda menjadi jambatan silang budaya dan generasi.', notaPersembahan: 'Vokal Hafiz Suip yang padu menembusi lenggok tinggi dengan ketepatan luar biasa, memukau segenap pendengar.', legasi: '"Kolaborasi silang generasi terhebat."' },
  { year: 2012, song: 'Terukir Di Bintang', artist: 'Aizat Amdan', composer: 'Yunalis Zarai', lyricist: 'Yunalis Zarai', genre: 'Tradisi / Fusion / Folk', decade: 3, isLandmark: false, maknaBudaya: 'Kemenangan lagu ini meraikan kehebatan komposisi, bukan sekadar suara, apabila Yuna diwakili oleh Aizat kerana komitmennya di Amerika Syarikat.', notaPersembahan: 'Aizat Amdan menghidupkan lagu ini dengan jiwa dan interpretasi tersendiri, tanpa menenggelamkan keaslian versi Yuna.', legasi: '"Kuasa magis sebuah komposisi unggul."' },
  { year: 2013, song: 'Bahagiamu Deritaku', artist: 'Hafiz Suip', composer: 'LY', lyricist: 'Baiduri', genre: 'Ballad', decade: 3, isLandmark: false, maknaBudaya: 'Tajuk oksimoron "Bahagiamu Deritaku" meringkaskan tema pengorbanan agung dengan tepat yang meraikan penderitaan atas nama cinta.', notaPersembahan: 'Hafiz bukan sekadar menyanyi; beliau menjadi pencerita teater kesedihan, membuktikan dirinya atlet vokal sejati.', legasi: '"Di pentas ini, hati selalunya menang mengatasi minda."' },
  { year: 2014, song: 'Apa Khabar', artist: 'Joe Flizzow feat. SonaOne', composer: 'SonaOne', lyricist: 'Joe Flizzow', genre: 'Hip Hop', decade: 3, isLandmark: true, note: 'Pertabalan hip-hop — rap Malaysia meraih mahkota AJL buat pertama kali', maknaBudaya: 'Setelah lama dipinggirkan, hip hop akhirnya diangkat sebagai penggerak utama seni bunyi di negara ini.', notaPersembahan: 'Kehadiran semula suara ikon hip hop lama di penghujung persembahan membangkitkan gelombang emosi dan nostalgia.', legasi: '"Hip hop ialah puisi moden kita."' },
  { year: 2015, song: 'Potret', artist: 'Akim & The Majistret', composer: 'Hang Nadim', lyricist: 'Kamar Empayar', genre: 'Rock', decade: 3, isLandmark: false, maknaBudaya: 'Mengembalikan kepercayaan kepada gelombang pemuzik pop rock melalui gabungan melodi mesra radio dan persembahan yang epik.', notaPersembahan: 'Konsep pentas yang unik dengan persembahan emosional dan musikaliti tinggi hasil gabungan ahli pelbagai kumpulan.', legasi: '"Kebangkitan semula superband pop rock."' },
  { year: 2016, song: 'Lelaki Teragung', artist: 'Dayang Nurfaizah', composer: 'Natasyah', lyricist: 'Iman Imran', genre: 'Ballad', decade: 4, isLandmark: false, maknaBudaya: 'Membuktikan bahawa kualiti vokal soul R&B Dayang mempunyai tempat tersendiri di pentas terbesar Malaysia.', notaPersembahan: 'Vokalnya yang lantang dan sempurna dianggap sebagai salah satu persembahan vokal terbaik sepanjang sejarah pertandingan ini.', legasi: '"Sebuah penguasaan vokal mutlak."' },
  { year: 2017, song: 'Jampi', artist: 'Hael Husaini', composer: 'Hael Husaini & Ezra Kong', lyricist: 'Hael Husaini & Ezra Kong', genre: 'Rock', decade: 4, isLandmark: false, maknaBudaya: 'Bukti formula Hael Husaini & Ezra Kong yang menggabungkan melodi seram sejuk dengan ketukan moden dapat menawan semua golongan.', notaPersembahan: 'Persembahan vokalis tunggal dengan pentas sederhana dan pencahayaan merah benar-benar menarik perhatian penonton.', legasi: '"Era baru pop Malaysia bermula di sini."' },
  { year: 2018, song: 'Haram', artist: 'Hael Husaini & Dayang Nurfaizah', composer: 'Hael Husaini & Ezra Kong', lyricist: 'Hael Husaini & Ezra Kong', genre: 'Rock', decade: 4, isLandmark: true, note: 'Formula pop digital — era artis lengkap dengan visual sinematik', maknaBudaya: 'Kerjasama dua ikon menghasilkan balada moden yang memecahkan tradisi duet konvensional.', notaPersembahan: 'Keserasian Hael dan Dayang, bersama vokal mereka yang sempurna, mencipta suasana romantis di seluruh stadium.', legasi: '"Harmoni yang terlarang namun terindah."' },
  { year: 2019, song: 'Sumpah', artist: 'Naim Daniel', composer: 'Omar K & Naim Daniel', lyricist: 'Naim Daniel', genre: 'Ballad', decade: 4, isLandmark: false, maknaBudaya: 'Membuktikan kekuatan bakat baharu yang lahir dari dunia digital, yang berjaya membawa emosi realiti ke arus utama.', notaPersembahan: 'Naim menyampaikan persembahan dengan penuh emosi dan kejujuran, membawa penonton merasai penderitaan yang mendalam.', legasi: '"Suara generasi galau merintih rindu."' },
  { year: 2020, song: 'Gila', artist: 'Kaka Azraff, Noki & Loca B', composer: 'Noki, Loca B & Ezra Kong', lyricist: 'Noki, Loca B & Ezra Kong', genre: 'Hip Hop', decade: 4, isLandmark: false, maknaBudaya: 'Sebuah lagu yang menyuarakan keresahan mental dan realiti pandemik, namun digubah dengan getaran bertenaga dan penuh motivasi.', notaPersembahan: 'Persembahan hip-hop yang berani dan penuh mesej kuat dipersembahkan tanpa penonton semasa era PKP.', legasi: '"Hip hop membalut luka pandemik."' },
  { year: 2021, song: 'Pelukan Angkasa', artist: 'SOG feat. Shila Amzah', composer: 'Raja Nazrin Shah', lyricist: 'Fazleena Hishamuddin', genre: 'Rock', decade: 4, isLandmark: true, note: 'Kejayaan folk etnik progresif — batas genre diruntuhkan', maknaBudaya: 'Kemenangan post-hardcore dan elemen seruling kebangsaan: mesej universal tentang kehilangan dikomunikasikan secara agresif namun indah.', notaPersembahan: 'Persembahan bertenaga menggabungkan muzik moden dan suara Nusantara, menghasilkan harmoni yang penuh emosi dan semangat.', legasi: '"Satu kemenangan bagi mereka yang tidak pernah putus asa."' },
  { year: 2022, song: 'Terus Hidup', artist: 'Aina Abdul', composer: 'Aina Abdul', lyricist: 'Aina Abdul', genre: 'Ballad', decade: 4, isLandmark: false, maknaBudaya: 'Sekali lagi seorang komposer wanita menyapu bersih trafo utama pada malam itu. Karisma bakat muda seni ini berpotensi untuk terus hidup beberapa dekad lagi.', notaPersembahan: 'Dengan busana epik berinspirasi awan, Aina Abdul menyalurkan tema \'terus hidup\' melalui persembahan avant-garde yang emotif dan berkesan.', legasi: '"Eksentrik, agung, dan vokal tiada tandingan."' },
  { year: 2023, song: 'Hasrat', artist: 'Amir Jahari', composer: 'Amir Jahari', lyricist: 'Amir Jahari', genre: 'Tradisi / Fusion / Folk', decade: 4, isLandmark: false, maknaBudaya: 'Membuktikan bahawa di sebalik era persembahan berskala mega, kejujuran melodi dan lirik masih menjadi tunjang utama kemenangan sesebuah penciptaan.', notaPersembahan: 'Persembahan Amir menonjol dengan kesederhanaan dan kejujuran, menyampaikan emosi tulus tanpa hiasan pentas besar.', legasi: '"Lagu yang menangis tanpa perlu menjerit."' },
  { year: 2024, song: 'Hening Rindu', artist: 'Marsha Milan', composer: 'Ikhwan Fatanna & Wan Saleh', lyricist: 'Ikhwan Fatanna', genre: 'Ballad', decade: 4, isLandmark: false, maknaBudaya: 'Lagu balada meruntun jiwa meneguhkan kedudukan Marsha Milan sebagai penyanyi wanita berkarisma tinggi di tanah air.', notaPersembahan: 'Persembahan vokal memukau, menghadirkan kawalan kelas pertama dan emosi kesedihan sejati di setiap nota.', legasi: '"Tangisan yang menakluk seisi Axiata Arena."' },
  { year: 2025, song: 'Tiwikarma', artist: 'K.O.I', composer: 'Zai Hamzah & Hemo Globin', lyricist: 'Achoi Floor 88, Mya Nana, Khaza Raflex, Tuan Nicky & Sapik Sam', genre: 'Hip Hop', decade: 4, isLandmark: true, note: 'Kertas yang berguguran dari bumbung stadium — bawa mesej kemanusiaan sejagat', maknaBudaya: 'Maknanya bergerak melalui imej, tekanan bahasa, ritma dan emosi. Kata-katanya padat, tetapi kepadatan itu mempunyai momentum.', notaPersembahan: 'Tiwikarma sangat hebat apabila di pentas mentafsir rasa tertindas dan melawan, bukan menggambarkannya secara terus.', legasi: '"Bahasa sebagai perlawanan, ritma sebagai ingatan, dan muzik sebagai cara untuk tidak berpaling."' },
];

const ARK_QUIZ_QUESTIONS = [
  { id: 'd1-1', decade: 1, q: 'Pada tahun berapakah Anugerah Juara Lagu (AJL) pertama kali diadakan?', options: ['1984', '1986', '1988', '1990'], answer: 1 },
  { id: 'd1-2', decade: 1, q: 'Stesen televisyen manakah yang menganjurkan AJL sejak permulaannya?', options: ['RTM', 'ASTRO', 'TV3', 'NTV7'], answer: 2 },
  { id: 'd1-3', decade: 1, q: 'Lagu "Isabella" yang menjadi ikon rock Malaysia dipersembahkan oleh kumpulan?', options: ['Wings', 'Search', 'Ekamatra', 'Bumi'], answer: 1 },
  { id: 'd1-4', decade: 1, q: 'Pada era awal AJL, di manakah kebanyakan keluarga Malaysia menonton siaran tersebut?', options: ['Stadium', 'Panggung wayang', 'Ruang tamu', 'Kedai kopi'], answer: 2 },
  { id: 'd1-5', decade: 1, q: 'Genre apakah yang mendominasi pentas AJL pada Dekad Perintis (1986–1995)?', options: ['Hip Hop', 'Rock', 'Ballad', 'Tradisi / Fusion / Folk'], answer: 1 },
  { id: 'd1-6', decade: 1, q: 'Pada tahun 1989, fenomena "Rock Kapak" menyaksikan letusan genre apa di Malaysia?', options: ['Rock', 'Pop', 'Dangdut', 'Hip Hop'], answer: 0 },
  { id: 'd1-7', decade: 1, q: 'Pada tahun 1992, kategori baharu diperkenalkan dalam AJL. Apakah kesannya?', options: ['Muzik Malaysia temui variasi', 'Rock diharamkan', 'Hip Hop muncul', 'Penyiaran berhenti'], answer: 0 },
  { id: 'd1-8', decade: 1, q: 'Apakah format siaran AJL yang menyatukan keluarga pada era awal?', options: ['Siaran langsung televisyen', 'Strim internet', 'Kaset video', 'DVD'], answer: 0 },
  { id: 'd2-1', decade: 2, q: 'Siapakah artis wanita yang memenangi AJL dengan lagu "Cindai"?', options: ['Ziana Zain', 'Siti Nurhaliza', 'Ning Baizura', 'Sheila Majid'], answer: 1 },
  { id: 'd2-2', decade: 2, q: 'Lagu "Ghazal Untuk Rabiah" dipersembahkan oleh?', options: ['M. Nasir & Jamal Abdillah', 'Search', 'Wings', 'Siti Nurhaliza'], answer: 0 },
  { id: 'd2-3', decade: 2, q: 'Genre "Irama Malaysia" mencapai puncak kegemilangannya pada dekad ke berapa?', options: ['Dekad 1', 'Dekad 2', 'Dekad 3', 'Dekad 4'], answer: 1 },
  { id: 'd2-4', decade: 2, q: 'Pada era alaf baharu (2000), teknologi apakah yang mula menggantikan kaset?', options: ['Vinil', 'CD', 'Streaming', 'Pita digital'], answer: 1 },
  { id: 'd2-5', decade: 2, q: 'Rancangan realiti TV mula mempengaruhi ekosistem muzik Malaysia sekitar tahun?', options: ['1996', '2000', '2004', '2008'], answer: 2 },
  { id: 'd2-6', decade: 2, q: 'Lagu "Andalusia" yang berunsur tradisi dipersembahkan oleh?', options: ['M. Nasir', 'Search', 'Siti Nurhaliza', 'Ziana Zain'], answer: 0 },
  { id: 'd2-7', decade: 2, q: 'Apakah ciri utama era Prasasti Emas dalam sejarah AJL?', options: ['Bintang legenda mula bersinar', 'Hip Hop mendominasi', 'Rock diharamkan', 'Penonton berkurangan'], answer: 0 },
  { id: 'd2-8', decade: 2, q: 'Pada tahun 2000, irama Malaysia diberi nafas baharu oleh pengaruh apa?', options: ['Pop', 'Rock', 'Hip Hop', 'Dangdut'], answer: 0 },
  { id: 'd3-1', decade: 3, q: 'Platform digital apakah yang mengubah cara muzik dikongsi pada era ini?', options: ['Spotify', 'YouTube', 'TikTok', 'Apple Music'], answer: 1 },
  { id: 'd3-2', decade: 3, q: 'Genre apakah yang mula muncul di pentas AJL bermula Dekad 3?', options: ['Rock', 'Ballad', 'Hip Hop', 'Tradisi'], answer: 2 },
  { id: 'd3-3', decade: 3, q: 'Lagu "Awan Nano" yang memenangi AJL dipersembahkan oleh?', options: ['Hafiz Suip', 'Yuna', 'Aina Abdul', 'Shila Amzah'], answer: 0 },
  { id: 'd3-4', decade: 3, q: 'Pada tahun 2014, genre apakah yang "naik takhta" di pentas AJL?', options: ['Rock', 'Hip Hop', 'Ballad', 'Tradisi'], answer: 1 },
  { id: 'd3-5', decade: 3, q: 'Apakah yang menyebabkan scene indie mula mendapat tempat di AJL?', options: ['Platform digital', 'Radio', 'TV satelit', 'Kaset'], answer: 0 },
  { id: 'd3-6', decade: 3, q: 'Lagu "Terukir Di Bintang" dipersembahkan oleh artis?', options: ['Yuna', 'Hafiz Suip', 'Siti Nurhaliza', 'Aina Abdul'], answer: 0 },
  { id: 'd3-7', decade: 3, q: 'Apakah perubahan utama dalam cara AJL dilaporkan pada era digital ini?', options: ['Dari berita ke live tweet dan TikTok', 'Hanya di akhbar', 'Hanya di radio', 'Tiada perubahan'], answer: 0 },
  { id: 'd3-8', decade: 3, q: 'Pada tahun 2011, apakah fenomena yang mengubah dunia muzik AJL?', options: ['YouTube ubah dunia', 'Vinil kembali', 'Radio diharamkan', 'TV analog ditutup'], answer: 0 },
  { id: 'd4-1', decade: 4, q: 'Apakah elemen yang menjadi sama penting dengan audio pada Dekad 4?', options: ['Visual', 'Koreografi', 'Kostum', 'Lampu'], answer: 0 },
  { id: 'd4-2', decade: 4, q: 'Pada tahun berapakah AJL diadakan tanpa penonton akibat pandemik?', options: ['2018', '2020', '2022', '2024'], answer: 1 },
  { id: 'd4-3', decade: 4, q: 'Lagu "Terus Hidup" dipersembahkan oleh?', options: ['Aina Abdul', 'Siti Nurhaliza', 'Yuna', 'Hafiz Suip'], answer: 0 },
  { id: 'd4-4', decade: 4, q: 'Apakah cabaran utama industri muzik semasa PKP 2020?', options: ['Persembahan tanpa penonton', 'Kekurangan studio', 'Harga tiket', 'Kekurangan lagu'], answer: 0 },
  { id: 'd4-5', decade: 4, q: 'Pada tahun 2023, trend persembahan apakah yang "tawan hati" penonton?', options: ['Minimalis', 'Ekstravaganza', 'Piroteknik', 'Koreografi besar'], answer: 0 },
  { id: 'd4-6', decade: 4, q: 'Apakah matlamat artis Malaysia pada era global ini?', options: ['Menembusi pasaran antarabangsa', 'Kekal di pasaran tempatan', 'Hanya fokus TV', 'Berhenti bersaing'], answer: 0 },
  { id: 'd4-7', decade: 4, q: 'Lagu "Gila" yang bergenre Hip Hop dipersembahkan oleh?', options: ['Kaka Azraff, Noki, Loca B', 'Aina Abdul', 'Yuna', 'Hafiz Suip'], answer: 0 },
  { id: 'd4-8', decade: 4, q: 'Pada era ini, muzik tempatan mendapat perhatian dari?', options: ['Satu dunia memandang AJL', 'Hanya Malaysia', 'Hanya Asia Tenggara', 'Tiada perhatian luar'], answer: 0 },
  { id: 'all-1', decade: 'all', q: 'Berapa jumlah dekad yang dirangkumi AJL sehingga edisi ke-40?', options: ['2 dekad', '3 dekad', '4 dekad', '5 dekad'], answer: 2 },
  { id: 'all-2', decade: 'all', q: 'Apakah tema besar AJL40 Digital Series?', options: ['Mencari juara terbaik', 'Dunia kreatif budaya sebuah negara', 'Sejarah TV Malaysia', 'Evolusi teknologi'], answer: 1 },
  { id: 'all-3', decade: 'all', q: 'Apakah empat genre standard dalam klasifikasi AJL40?', options: ['Pop, Rock, Jazz, Klasik', 'Ballad, Rock, Tradisi/Fusion/Folk, Hip Hop', 'Rock, Pop, Dangdut, R&B', 'Ballad, Pop, Rock, Indie'], answer: 1 },
  { id: 'all-4', decade: 'all', q: 'Apakah yang dimaksudkan dengan "ruang tamu sebagai dewan konsert pertama AJL"?', options: ['Keluarga berkumpul menonton bersama', 'Konsert diadakan di rumah', 'Tiada pentas rasmi', 'TV dipasang di ruang tamu'], answer: 0 },
  { id: 'all-5', decade: 'all', q: 'Siapakah antara legenda muzik yang dikaitkan dengan lagu "Tanya Sama Itu Hud Hud"?', options: ['M. Nasir', 'Search', 'Siti Nurhaliza', 'Wings'], answer: 0 },
  { id: 'all-6', decade: 'all', q: 'Lagu "Gemilang" yang menjadi ikon semangat dipersembahkan oleh?', options: ['Jaclyn Victor', 'Siti Nurhaliza', 'Ning Baizura', 'Dayang Nurfaizah'], answer: 0 },
  { id: 'all-7', decade: 'all', q: 'Apakah perbezaan utama antara lagu "viral" dan "warisan" menurut esei AJL40?', options: ['Viral lebih tahan lama', 'Viral ialah percikan, warisan ialah bara', 'Kedua-duanya sama', 'Warisan hanya untuk lagu lama'], answer: 1 },
  { id: 'all-8', decade: 'all', q: 'Lagu "Pelukan Angkasa" yang bergenre Rock dipersembahkan oleh?', options: ['Sekumpulan Orang Gila feat. Shila Amzah', 'Search', 'Wings', 'Bunkface'], answer: 0 },
];

const ARK_QUIZ_DECADE_OPTIONS = [
  { id: 1, label: 'Dekad Perintis', years: '1986–1995' },
  { id: 2, label: 'Prasasti Emas', years: '1996–2005' },
  { id: 3, label: 'Revolusi Digital', years: '2006–2015' },
  { id: 4, label: 'Melakar Visual', years: '2016–2025' },
  { id: 'all', label: 'Kuiz Rawak 40 Tahun', years: '1986–2025' },
];

const ARK_LEGENDS = [
  { id: 'm-nasir', name: 'M. Nasir', role: 'Komposer · Penulis Lirik · Penyanyi', initials: 'MN', color: '#C9A84C', era: '1986–Kini', wins: 4, notableSongs: ['Tanya Sama Itu Hud-Hud (1994)', 'Ghazal Untuk Rabiah (1997)', 'Andalusia (1999)', 'Awan Nano (2011)'], bio: 'Dikenali sebagai "Sifu Muzik Negara", M. Nasir ialah arsitek bunyi Nusantara yang mengangkat muzik pop Melayu ke wacana intelektual. Karya-karyanya mengadun falsafah, sastera, dan melodi dalam satu kesatuan yang sukar ditandingi. Empat kemenangan AJL merentasi tiga dekad membuktikan ketahanan dan kedalaman penciptaannya.' },
  { id: 'siti-nurhaliza', name: 'Siti Nurhaliza', role: 'Penyanyi', initials: 'SN', color: '#C0392B', era: '1996–Kini', wins: 3, notableSongs: ['Jerat Percintaan (1996)', 'Cindai (1998)', 'Balqis (2000)'], bio: 'Daripada Kuala Lipis ke pentas dunia, Siti Nurhaliza mengubah lanskap vokal Malaysia selama-lamanya. Suaranya yang merdu dan kawalan vokal sempurna menjadikan setiap persembahan AJL sebagai kelas master. Tiga kemenangan berturut-turut menandakan kelahiran era vokalis berimej suci yang membangkitkan zaman keemasan vokal tulen.' },
  { id: 'adnan-abu-hassan', name: 'Adnan Abu Hassan', role: 'Komposer', initials: 'AA', color: '#2D8A7A', era: '1990an–2000an', wins: 2, notableSongs: ['Jerat Percintaan (1996)', 'Bunga-Bunga Cinta (2003)'], bio: 'Komposer yang melahirkan ramai bintang, Adnan Abu Hassan dikenali dengan melodi balada yang menyentuh jiwa. Sentuhannya terhadap vokal Siti Nurhaliza dan Misha Omar menghasilkan karya-karya yang kekal abadi, menjadikannya salah satu komposer paling berpengaruh dalam era keemasan pop Malaysia.' },
  { id: 'suhaimi-mohd-zain', name: 'Suhaimi Mohd Zain (Pak Ngah)', role: 'Komposer', initials: 'PN', color: '#2D8A7A', era: '1990an–2000an', wins: 2, notableSongs: ['Cindai (1998)', 'Balqis (2000)'], bio: 'Dikenali sebagai "Pak Ngah", beliau ialah penjaga irama tradisional yang menghidupkan semula zapin, ghazal, dan inai di pentas komersial. Karya-karyanya bersama Siti Nurhaliza mempopularkan Irama Malaysia kepada generasi muda, membuktikan bahawa tradisi tidak pernah ditelan zaman.' },
  { id: 'habsah-hassan', name: 'Habsah Hassan', role: 'Penulis Lirik', initials: 'HH', color: '#4A7B9D', era: '1980an–2000an', wins: 2, notableSongs: ['Menaruh Harapan (1987)', 'Cinta Beralih Arah (1995)'], bio: 'Salah satu penulis lirik paling prolifik dalam sejarah muzik Malaysia, Habsah Hassan menghasilkan lirik-lirik yang sarat emosi dan puitis. Karya-karyanya merentasi pelbagai genre dan era, menjadikannya suara yang konsisten dalam membentuk naratif cinta dan kehidupan dalam muzik pop Melayu.' },
  { id: 'ezra-kong', name: 'Ezra Kong', role: 'Komposer · Penulis Lirik', initials: 'EK', color: '#C0392B', era: '2010an–Kini', wins: 3, notableSongs: ['Jampi (2017)', 'Haram (2018)', 'Gila (2020)'], bio: 'Arsitek formula pop digital era baharu, Ezra Kong menggabungkan melodi seram sejuk dengan ketukan moden. Kerjasamanya dengan Hael Husaini menghasilkan rentetan kemenangan yang menandakan peralihan AJL ke era visual sinematik dan bunyi kontemporari yang berani.' },
  { id: 'hael-husaini', name: 'Hael Husaini', role: 'Komposer · Penulis Lirik · Penyanyi', initials: 'HH', color: '#C0392B', era: '2010an–Kini', wins: 2, notableSongs: ['Jampi (2017)', 'Haram (2018)'], bio: 'Artis lengkap era digital yang menggabungkan vokal, komposisi, dan visual dalam satu pakej sinematik. Bersama Ezra Kong, Hael Husaini mencipta formula baharu yang memecahkan tradisi duet konvensional dan menandakan kelahiran era pop Malaysia yang lebih berani dan eksperimental.' },
  { id: 'dayang-nurfaizah', name: 'Dayang Nurfaizah', role: 'Penyanyi', initials: 'DN', color: '#C9A84C', era: '2000an–Kini', wins: 1, notableSongs: ['Lelaki Teragung (2016)', 'Haram (2018)'], bio: 'Ratu soul R&B Malaysia yang vokalnya dianggap antara persembahan vokal terbaik sepanjang sejarah AJL. Dayang membuktikan bahawa kualiti vokal bertaraf antarabangsa mempunyai tempat tersendiri di pentas terbesar negara, dengan kawalan teknik dan emosi yang tiada tandingan.' },
  { id: 'hafiz-suip', name: 'Hafiz Suip', role: 'Penyanyi', initials: 'HS', color: '#C9A84C', era: '2010an–Kini', wins: 2, notableSongs: ['Awan Nano (2011)', 'Bahagiamu Deritaku (2013)'], bio: 'Bintang realiti yang menjadi atlet vokal sejati, Hafiz Suip meraih gelaran Juara Lagu sebanyak dua kali dan Vokal Terbaik sebanyak empat kali — satu pencapaian luar biasa yang menempatkan beliau antara penyanyi paling konsisten dan dipuji dalam sejarah AJL. Vokalnya yang padu menembusi lenggok tinggi dengan ketepatan luar biasa, menjadikan setiap persembahan sebagai kelas master teknik vokal.' },
  { id: 'francissca-peter', name: 'Francissca Peter', role: 'Penyanyi', initials: 'FP', color: '#C9A84C', era: '1980an–1990an', wins: 1, notableSongs: ['Sekadar Di Pinggiran (1986)'], bio: 'Suara emas yang membuka tirai era anugerah berprestij. Persembahan vokal Francissca Peter pada AJL pertama membuktikan bahawa muzik pop balada tempatan punya magis dan keunikan yang sukar ditandingi, menetapkan standard tinggi untuk semua penyanyi yang menyusul.' },
  { id: 'search', name: 'Search', role: 'Kumpulan Rock', initials: 'SE', color: '#C0392B', era: '1980an–1990an', wins: 1, notableSongs: ['Isabella (1989)'], bio: 'Kumpulan rock yang menggegar seluruh Malaysia apabila lagu rock diangkat sebagai Juara Lagu. Isabella mengukuhkan genre rock di tanah air, mengubah rock daripada muzik jalanan kepada muzik kebangsaan, dan menginspirasi generasi kumpulan rock yang menyusul.' },
  { id: 'aishah', name: 'Aishah', role: 'Penyanyi', initials: 'AI', color: '#C9A84C', era: '1980an–1990an', wins: 1, notableSongs: ['Janji Manismu (1990)', 'Cinta Beralih Arah (1995)'], bio: 'Penyanyi bertaraf dunia yang menggabungkan kualiti vokal luar biasa dengan cita rasa pop Nusantara. Vokal mantap Aishah, digandingkan dengan gerak sederhana, menyerlahkan kehebatan teknikal dan tradisi persembahan AJL yang tiada bandingan.' },
];

/* ---------------- Small inline icons ---------------- */
const svgBase = (extra) => Object.assign({ width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', style: { display: 'block', flexShrink: 0 } }, extra || {});
function IcoTrophy({ size }) { return <svg {...svgBase({ width: size, height: size })}><path d="M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4zM7 4H4v2a3 3 0 0 0 3 3M17 4h3v2a3 3 0 0 1-3 3" /></svg>; }
function IcoAward({ size }) { return <svg {...svgBase({ width: size, height: size })}><circle cx="12" cy="8" r="6" /><path d="M8.5 13.5 7 22l5-3 5 3-1.5-8.5" /></svg>; }
function IcoCheck({ size }) { return <svg {...svgBase({ width: size, height: size })}><polyline points="20 6 9 17 4 12" /></svg>; }
function IcoX({ size }) { return <svg {...svgBase({ width: size, height: size })}><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>; }
function IcoChevR({ size }) { return <svg {...svgBase({ width: size, height: size })}><polyline points="9 18 15 12 9 6" /></svg>; }
function IcoRefresh({ size }) { return <svg {...svgBase({ width: size, height: size })}><polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" /></svg>; }
function IcoShare({ size }) { return <svg {...svgBase({ width: size, height: size })}><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><line x1="8.6" y1="10.5" x2="15.4" y2="6.5" /><line x1="8.6" y1="13.5" x2="15.4" y2="17.5" /></svg>; }
function roleIcon(role) {
  if (role.indexOf('Penulis Lirik') === 0 || role === 'Penulis Lirik') return <svg {...svgBase({ width: 12, height: 12 })}><path d="M12 19l7-7 3 3-7 7-3-3zM18 13l-1.5-7.5L2 2l3.5 14.5L13 18z" /></svg>;
  if (role.indexOf('Penyanyi') === 0 || role.indexOf('Kumpulan') === 0) return <svg {...svgBase({ width: 12, height: 12 })}><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3zM19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8" /></svg>;
  return <svg {...svgBase({ width: 12, height: 12 })}><path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" /></svg>;
}

function GenrePill({ genre }) {
  if (!genre) return null;
  const color = ARK_GENRE_COLORS[genre] || '#9B9B9B';
  return <span className="ark-genre" style={{ color, borderColor: color + '55', backgroundColor: color + '18' }}>{genre}</span>;
}

/* ---------------- Decades block ---------------- */
function ArkDecades() {
  const [expanded, setExpanded] = useStateA(null);
  const detail = expanded ? ARK_DECADE_DETAILS.find(d => d.id === expanded) : null;
  const dec = expanded ? ARK_DECADES.find(d => d.id === expanded) : null;
  return (
    <>
      <div className="ark-dectabs-wrap">
        <div className="ajl-container">
          <div className="ark-dectabs">
            {ARK_DECADES.map((d) => (
              <button key={d.id} className={'ark-dectab' + (expanded === d.id ? ' is-active' : '')}
                onClick={() => setExpanded(expanded === d.id ? null : d.id)}>
                <span className="ark-dectab__dot" />
                <p className="ark-dectab__years">{d.years}</p>
                <p className="ark-dectab__name">{d.name}</p>
              </button>
            ))}
          </div>
        </div>
      </div>

      {dec && detail && (
        <div className="ark-detail">
          <div className="ajl-container ark-detail__inner">
            <div className="ark-detail__grid">
              <div>
                <div className="ark-detail__img">
                  <img src={dec.imageUrl} alt={dec.name} loading="lazy" />
                </div>
                <p className="ark-detail__note">{detail.culturalNote}</p>
              </div>
              <div>
                <p className="ark-detail__label">Momen Budaya</p>
                <div className="ark-moments">
                  {detail.highlights.map((h, i) => (
                    <div className="ark-moment" key={i}>
                      <span className="ark-moment__year">{h.year}</span>
                      <span className="ark-moment__sep" />
                      <div>
                        <p className="ark-moment__winner">{h.winner}</p>
                        <p className="ark-moment__song">{h.song}</p>
                        <p className="ark-moment__note">{h.note}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <section className="ark-block" style={{ borderTop: 'none', paddingTop: '64px' }}>
        <div className="ajl-container">
          <div className="ark-cards">
            {ARK_DECADES.map((d) => (
              <article key={d.id} className="ark-card" onClick={() => { setExpanded(expanded === d.id ? null : d.id); if (expanded !== d.id) window.scrollTo({ top: window.scrollY - 40, behavior: 'smooth' }); }}>
                <img className="ark-card__img" src={d.imageUrl} alt={d.name} loading="lazy" />
                <div className="ark-card__overlay" />
                <div className="ark-card__body">
                  <p className="ark-card__years">{d.years}</p>
                  <h3 className="ark-card__name">{d.name}</h3>
                  <p className="ark-card__sub">{d.subtitle}</p>
                  <p className="ark-card__desc">{d.description}</p>
                  <span className="ark-card__cta">{expanded === d.id ? 'Tutup' : 'Teroka'} →</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

/* ---------------- Interactive timeline ---------------- */
function ArkTimeline() {
  const [activeDecade, setActiveDecade] = useStateA(null);
  const [selected, setSelected] = useStateA(null);
  const [hovered, setHovered] = useStateA(null);
  const minYear = 1986, maxYear = 2025, total = maxYear - minYear;
  const pos = (y) => ((y - minYear) / total) * 100;
  const filtered = activeDecade ? ARK_TIMELINE_EVENTS.filter(e => e.decade === activeDecade) : ARK_TIMELINE_EVENTS;

  return (
    <section className="ark-block">
      <div className="ajl-container">
        <div className="ark-block__head">
          <p className="ark-eyebrow">Garis Masa Interaktif</p>
          <h2 className="ark-block__title">40 Tahun Juara Lagu</h2>
          <p className="ark-block__lede">Tatal melalui perjalanan 40 tahun AJL. Klik pada mana-mana titik masa atau kad untuk melihat pemenang, komposer dan genre yang mendominasi pada tahun tersebut.</p>
        </div>

        <div className="ark-tl__tabs">
          <button className={'ark-tl__tab' + (!activeDecade ? ' is-active' : '')} onClick={() => { setActiveDecade(null); setSelected(null); }}>
            <span className="ark-tl__tab-yr">Semua</span>
            <span className="ark-tl__tab-nm">1986–2025</span>
          </button>
          {Object.entries(ARK_DECADE_CONFIG).map(([d, c]) => (
            <button key={d} className={'ark-tl__tab' + (activeDecade === parseInt(d) ? ' is-active' : '')}
              onClick={() => { const v = parseInt(d); setActiveDecade(activeDecade === v ? null : v); setSelected(null); }}>
              <span className="ark-tl__tab-yr">{c.years}</span>
              <span className="ark-tl__tab-nm">{c.name}</span>
            </button>
          ))}
        </div>

        <div className="ark-tl__rail-wrap">
          <div className="ark-tl__years">
            {[1986, 1996, 2006, 2016, 2025].map(yr => (
              <span key={yr} style={{ left: pos(yr) + '%' }}>{yr}</span>
            ))}
          </div>
          <div className="ark-tl__rail">
            {ARK_TIMELINE_EVENTS.map((e) => {
              const conf = ARK_DECADE_CONFIG[e.decade];
              const isSel = selected && selected.year === e.year;
              const isHov = hovered === e.year;
              const dim = activeDecade && activeDecade !== e.decade;
              const sz = isSel ? 16 : e.isLandmark ? 11 : 7;
              return (
                <button key={e.year} className="ark-tl__dot"
                  style={{ left: pos(e.year) + '%', width: sz, height: sz, opacity: dim ? 0.2 : 1,
                    borderColor: isSel ? 'var(--gold)' : e.isLandmark ? conf.accent : conf.dotColor,
                    backgroundColor: isSel ? 'var(--gold)' : e.isLandmark ? conf.accent + '99' : conf.dotColor + '77' }}
                  onClick={() => setSelected(isSel ? null : e)}
                  onMouseEnter={() => setHovered(e.year)} onMouseLeave={() => setHovered(null)}>
                  {isHov && !isSel && (
                    <span className="ark-tl__tip">
                      <span className="ark-tl__tip-yr">{e.year}</span>
                      <span className="ark-tl__tip-song">{e.song}</span>
                      {e.composer && <span className="ark-tl__tip-cmp">Komposer · {e.composer}</span>}
                    </span>
                  )}
                </button>
              );
            })}
          </div>
        </div>

        {selected && (
          <div className="ark-tl__detail">
            <div className="ark-tl__detail-grid">
              <div className="ark-tl__detail-l">
                <div className="ark-tl__detail-yrhead">
                  <span className="ark-tl__detail-bigyr">{selected.year}</span>
                  <div>
                    <p className="ark-tl__detail-decyr">{ARK_DECADE_CONFIG[selected.decade].years}</p>
                    <p className="ark-tl__detail-decnm">{ARK_DECADE_CONFIG[selected.decade].name}</p>
                  </div>
                </div>
                {selected.isPlaceholder ? (
                  <div className="ark-tl__placeholder">
                    <p className="ark-tl__placeholder-song">{selected.song}</p>
                    <p className="ark-tl__placeholder-sub">Edisi ke-40 · 2026</p>
                  </div>
                ) : (
                  <>
                    <h3 className="ark-tl__detail-song">{selected.song}</h3>
                    <p className="ark-tl__detail-artist">{selected.artist}</p>
                    {selected.composer && <p className="ark-tl__detail-meta">Komposer · <b>{selected.composer}</b></p>}
                    {selected.lyricist && <p className="ark-tl__detail-meta" style={{ marginBottom: '16px' }}>Lirik · <b>{selected.lyricist}</b></p>}
                    <GenrePill genre={selected.genre} />
                  </>
                )}
              </div>
              <div className="ark-tl__detail-r">
                {selected.isPlaceholder ? (
                  <p className="ark-tl__field-leg" style={{ textAlign: 'center', fontSize: '16px' }}>"Empat dekad legenda, satu babak baharu menanti."</p>
                ) : (
                  <>
                    {selected.isLandmark && selected.note && (
                      <div className="ark-tl__landmark">
                        <p className="ark-tl__landmark-q">“{selected.note}”</p>
                        <span className="ark-tl__landmark-tag">Detik Penting</span>
                      </div>
                    )}
                    {selected.maknaBudaya && (<div className="ark-tl__field"><p className="ark-tl__field-label">Makna Budaya</p><p className="ark-tl__field-body">{selected.maknaBudaya}</p></div>)}
                    {selected.notaPersembahan && (<div className="ark-tl__field"><p className="ark-tl__field-label">Nota Persembahan</p><p className="ark-tl__field-body">{selected.notaPersembahan}</p></div>)}
                    {selected.legasi && (<div className="ark-tl__field" style={{ marginBottom: 0 }}><p className="ark-tl__field-label">Legasi</p><p className="ark-tl__field-leg">{selected.legasi}</p></div>)}
                  </>
                )}
              </div>
            </div>
          </div>
        )}

        <div className="ark-tl__grid">
          {filtered.map((e) => {
            const isSel = selected && selected.year === e.year;
            return (
              <button key={e.year} className={'ark-tl__cell' + (isSel ? ' is-active' : '') + (e.isPlaceholder ? ' is-placeholder' : '')}
                onClick={() => setSelected(isSel ? null : e)}>
                <div className="ark-tl__cell-top">
                  <p className="ark-tl__cell-yr">{e.year}</p>
                  {e.isLandmark && <span className="ark-tl__cell-star" />}
                </div>
                <p className="ark-tl__cell-song">{e.song}</p>
                {!e.isPlaceholder && (
                  <>
                    <p className="ark-tl__cell-artist">{e.artist}</p>
                    {e.composer && <p className="ark-tl__cell-cmp">Komposer · {e.composer}</p>}
                    <GenrePill genre={e.genre} />
                  </>
                )}
              </button>
            );
          })}
        </div>

        <div className="ark-tl__legend">
          <div className="ark-tl__legend-item"><span className="ark-tl__cell-star" style={{ width: 10, height: 10 }} /><span>Detik Penting</span></div>
          <div className="ark-tl__legend-item"><span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--ivory-40)' }} /><span>Juara Lagu</span></div>
          {Object.entries(ARK_DECADE_CONFIG).map(([d, c]) => (
            <div key={d} className="ark-tl__legend-item"><span style={{ width: 14, height: 4, borderRadius: 4, background: c.accent }} /><span>{c.years}</span></div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Quiz ---------------- */
function arkPick(decadeId, count) {
  const pool = decadeId === 'all' ? ARK_QUIZ_QUESTIONS : ARK_QUIZ_QUESTIONS.filter(q => q.decade === decadeId);
  return [...pool].sort(() => Math.random() - 0.5).slice(0, count);
}
function arkTier(score, total) {
  const pct = score / total;
  if (pct === 1) return { label: 'Sarjana Arkib AJL', color: '#C9A84C', desc: 'Sempurna! Anda menguasai sejarah empat dekad Juara Lagu.' };
  if (pct >= 0.6) return { label: 'Pencinta Muzik Sejati', color: '#2D8A7A', desc: 'Bagus! Pengetahuan anda tentang AJL sangat kukuh.' };
  if (pct >= 0.4) return { label: 'Pendengar Setia', color: '#4A7B9D', desc: 'Tidak buruk! Terokai arkib lagi untuk memperkaya diri.' };
  return { label: 'Penonton Baharu', color: '#C0392B', desc: 'Cuba lagi — setiap dekad menyimpan cerita menarik.' };
}
const QUESTIONS_PER_QUIZ = 5;

function ArkQuiz() {
  const [selectedDecade, setSelectedDecade] = useStateA(null);
  const [questions, setQuestions] = useStateA([]);
  const [current, setCurrent] = useStateA(0);
  const [selected, setSelected] = useStateA(null);
  const [answers, setAnswers] = useStateA([]);
  const [phase, setPhase] = useStateA('select');
  const score = answers.filter(a => a.correct).length;
  const tier = useMemoA(() => arkTier(score, questions.length || 1), [score, questions.length]);
  const q = questions[current];

  function start(id) { setSelectedDecade(id); setQuestions(arkPick(id, QUESTIONS_PER_QUIZ)); setCurrent(0); setSelected(null); setAnswers([]); setPhase('question'); }
  function choose(idx) { if (phase !== 'question') return; setSelected(idx); setPhase('feedback'); setAnswers(p => [...p, { correct: idx === q.answer }]); }
  function next() { if (current + 1 < questions.length) { setCurrent(current + 1); setSelected(null); setPhase('question'); } else { setPhase('done'); } }
  function restart() { setPhase('select'); setSelectedDecade(null); setQuestions([]); setCurrent(0); setSelected(null); setAnswers([]); }

  function shareResult() {
    const text = `Saya mendapat ${score}/${questions.length} dalam Kuiz Arkib AJL40 — ${tier.label}! Sejauh mana anda mengenali Juara Lagu?`;
    const url = window.location.href;
    if (navigator.share) { navigator.share({ title: 'Kuiz Arkib AJL40 Digital Series', text, url }).catch(() => {}); }
    else if (navigator.clipboard) { navigator.clipboard.writeText(text + ' ' + url).then(() => { if (window.showToast) window.showToast('Pencapaian disalin!'); }).catch(() => {}); }
    else if (window.showToast) { window.showToast('Kongsi: ' + text); }
  }

  if (phase === 'select') {
    return (
      <section className="ark-block">
        <div className="ajl-container">
          <div className="ark-quiz__intro">
            <div className="ark-quiz__seal"><IcoTrophy size={24} /></div>
            <p className="ark-eyebrow">Ujian Pengetahuan Arkib</p>
            <h2 className="ark-quiz__title">Sejauh Mana Anda<br /><em>Mengenali Juara Lagu?</em></h2>
            <p className="ark-quiz__lede">Uji daya ingatan anda dengan soalan trivia mengenai empat dekad Anugerah Juara Lagu — daripada fakta sejarah hingga butiran persembahan ikonik.</p>
          </div>
          <div className="ark-quiz__opts">
            {ARK_QUIZ_DECADE_OPTIONS.map((opt) => (
              <button key={opt.id} className="ark-quizopt" onClick={() => start(opt.id)}>
                <div className="ark-quizopt__top">
                  <span className="ark-quizopt__num">{opt.id === 'all' ? '40' : opt.id}</span>
                  <span className="ark-quizopt__arrow">→</span>
                </div>
                <p className="ark-quizopt__label">{opt.label}</p>
                <p className="ark-quizopt__years">{opt.years}</p>
              </button>
            ))}
          </div>
        </div>
      </section>
    );
  }

  if (phase === 'done') {
    const decLabel = ARK_QUIZ_DECADE_OPTIONS.find(d => d.id === selectedDecade);
    return (
      <section className="ark-block">
        <div className="ajl-container">
          <div className="ark-cert-wrap">
            <div className="ark-cert" style={{ borderColor: 'var(--gold-wash)' }}>
              <div className="ark-cert__bar" />
              <div className="ark-cert__inner">
                <div className="ark-cert__seal" style={{ borderColor: tier.color, backgroundColor: tier.color + '22', color: tier.color }}><IcoAward size={34} /></div>
                <p className="ark-cert__eyebrow">Sijil Pencinta Muzik AJL</p>
                <h3 className="ark-cert__tier">{tier.label}</h3>
                <p className="ark-cert__desc">{tier.desc}</p>
                <div className="ark-cert__score">
                  <span className="ark-cert__score-n" style={{ color: tier.color }}>{score}</span>
                  <span className="ark-cert__score-t">/ {questions.length}</span>
                </div>
                <div className="ark-cert__dots">
                  {answers.map((a, i) => (
                    <span key={i} className="ark-cert__dot" style={{ borderColor: a.correct ? '#2D8A7A' : '#C0392B', backgroundColor: (a.correct ? '#2D8A7A' : '#C0392B') + '22', color: a.correct ? '#2D8A7A' : '#C0392B' }}>
                      {a.correct ? <IcoCheck size={14} /> : <IcoX size={14} />}
                    </span>
                  ))}
                </div>
                <p className="ark-cert__meta">Kuiz: {decLabel && decLabel.label} · {decLabel && decLabel.years}</p>
                <div className="ark-cert__share">
                  <p className="ark-cert__share-label">Kongsi Pencapaian Anda</p>
                  <button className="ark-cert__btn ark-cert__btn--ghost" onClick={shareResult}><IcoShare size={13} /> Kongsi</button>
                </div>
              </div>
              <div className="ark-cert__bar" />
            </div>
            <div className="ark-cert__actions">
              <button className="ark-cert__btn ark-cert__btn--primary" onClick={() => start(selectedDecade)}><IcoRefresh size={12} /> Cuba Lagi Kuiz Ini</button>
              <button className="ark-cert__btn ark-cert__btn--ghost" onClick={restart}>Pilih Dekad Lain</button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="ark-block">
      <div className="ajl-container">
        <div className="ark-q-wrap">
          <div className="ark-q">
            <div className="ark-q__head">
              <p className="ark-q__head-label">{(ARK_QUIZ_DECADE_OPTIONS.find(d => d.id === selectedDecade) || {}).label}</p>
              <div className="ark-q__dots">
                {questions.map((_, i) => (<span key={i} className={'ark-q__dot' + (i < current ? ' is-done' : '') + (i === current ? ' is-cur' : '')} />))}
              </div>
              <p className="ark-q__count">{current + 1} / {questions.length}</p>
            </div>
            <div className="ark-q__body">
              <p className="ark-q__text">{q.q}</p>
              <div className="ark-q__options">
                {q.options.map((opt, idx) => {
                  const isSel = selected === idx;
                  const isCorrect = idx === q.answer;
                  let bg = 'transparent', bc = 'var(--gold-wash)', tc = 'var(--ivory-80)', lbg = 'var(--ink)', lc = 'var(--ivory-40)';
                  if (phase === 'feedback') {
                    if (isCorrect) { bg = 'rgba(45,138,122,0.12)'; bc = '#2D8A7A'; tc = 'var(--ivory)'; lbg = '#2D8A7A'; lc = '#fff'; }
                    else if (isSel) { bg = 'rgba(192,57,43,0.12)'; bc = '#C0392B'; tc = 'var(--ivory)'; lbg = '#C0392B'; lc = '#fff'; }
                  }
                  return (
                    <button key={idx} className="ark-q__opt" disabled={phase !== 'question'}
                      onClick={() => choose(idx)} style={{ backgroundColor: bg, borderColor: bc }}>
                      <span className="ark-q__optletter" style={{ backgroundColor: lbg, color: lc }}>
                        {phase === 'feedback' && isCorrect ? <IcoCheck size={12} /> : phase === 'feedback' && isSel ? <IcoX size={12} /> : String.fromCharCode(65 + idx)}
                      </span>
                      <span className="ark-q__opttext" style={{ color: tc }}>{opt}</span>
                    </button>
                  );
                })}
              </div>
              {phase === 'feedback' && (
                <div className="ark-q__feedback">
                  <span className="ark-q__feedback-msg" style={{ color: selected === q.answer ? '#2D8A7A' : '#C0392B' }}>
                    {selected === q.answer ? <><IcoCheck size={14} /> Tepat sekali!</> : <><IcoX size={14} /> Jawapan: {q.options[q.answer]}</>}
                  </span>
                  <button className="ark-q__next" onClick={next}>{current + 1 < questions.length ? 'Seterusnya' : 'Lihat Markah'} <IcoChevR size={11} /></button>
                </div>
              )}
            </div>
          </div>
          <button className="ark-q__quit" onClick={restart}>← Kembali ke pilihan dekad</button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Legends ---------------- */
function ArkLegendCard({ lg }) {
  const [open, setOpen] = useStateA(false);
  return (
    <article className="ark-legend">
      <div className="ark-legend__badge" style={{ color: lg.color, borderColor: lg.color, backgroundColor: lg.color + '1A' }}>{lg.initials}</div>
      <h3 className="ark-legend__name">{lg.name}</h3>
      <p className="ark-legend__role">{roleIcon(lg.role)} {lg.role}</p>
      <div className="ark-legend__tags">
        <span className="ark-legend__era">{lg.era}</span>
        <span className="ark-legend__wins">{lg.wins}× Juara</span>
      </div>
      <p className="ark-legend__songlabel">Karya Penting</p>
      <div className="ark-legend__songs">
        {lg.notableSongs.map((s, i) => (<span key={i} className="ark-legend__song">{s}</span>))}
      </div>
      {open && <p className="ark-legend__bio">{lg.bio}</p>}
      <button className="ark-legend__toggle" onClick={() => setOpen(!open)}>{open ? 'Tutup Profil' : 'Baca Profil'}</button>
    </article>
  );
}

function ArkLegends() {
  return (
    <section className="ark-block">
      <div className="ajl-container">
        <div className="ark-block__head">
          <p className="ark-eyebrow">Wajah-wajah Legenda</p>
          <h2 className="ark-block__title">Di sebalik setiap juara, <em>ada nama yang kekal.</em></h2>
          <p className="ark-block__lede">Komposer, penulis lirik, dan penyanyi yang membentuk sejarah empat dekad Anugerah Juara Lagu — dengan biografi, karya penting, dan pencapaian anugerah mereka.</p>
        </div>
        <div className="ark-legends">
          {ARK_LEGENDS.map((lg) => (<ArkLegendCard key={lg.id} lg={lg} />))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Page composition ---------------- */
function ArkibContent() {
  return (
    <>
      <section className="ark-hero">
        <div className="ajl-container ark-hero__inner">
          <div className="ajl-eyebrow">Arkib Visual · Empat Babak</div>
          <h1 className="ark-hero__title">Dunia Kreatif,<br /><em>Empat Rupa Pentas.</em></h1>
          <p className="ark-hero__p">Arkib ini ialah kompilasi rujukan editorial yang mengumpulkan perjalanan AJL mengikut tahun, dekad, lagu, artis, komposer, penulis lirik, dan detik penting berdasarkan sumber terbuka, memori siaran, rujukan media, dan semakan silang yang munasabah.</p>
          <p className="ark-hero__p ark-hero__p--sm">Ini bukan arkib rasmi penganjur. Ia disusun sebagai peta bacaan budaya untuk membantu pembaca melihat AJL bukan hanya sebagai senarai pemenang, tetapi juga sebagai sebahagian daripada peta emosi muzik popular Malaysia.</p>
        </div>
      </section>

      <ArkDecades />
      <ArkTimeline />
      <ArkQuiz />
      <ArkLegends />

      <section className="ark-statement">
        <div className="ajl-container">
          <p className="ark-eyebrow" style={{ marginBottom: '20px' }}>Bahan Arkib Dunia Kreatif</p>
          <h2 className="ark-statement__title">Pentas ini masih bersuara.</h2>
          <p className="ark-statement__body">Setiap arkib membawa kita kembali ke malam tertentu, ke ruang tamu tertentu dan ke ingatan tertentu. AJL bukan sekadar pertandingan — ia adalah dokumen hidup sebuah bangsa.</p>
          <a className="ark-statement__cta" href="/esei/arkib-ajl-lenyap.html">Baca: Jika Arkib AJL Lenyap →</a>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ArkibContent });