import React, { useState, useEffect } from 'react';
import { 
  Home, Briefcase, User, Volume2, ZoomIn, ZoomOut, Eye, 
  ArrowRight, ArrowLeft, Monitor, ChefHat, Scissors, Package, 
  Palette, Folder, Wifi, CloudRain, Play, TreePine, BookOpen, 
  Flower, Wrench, Search, Microscope, Coffee, Calculator, 
  IdCard, Award, Frown, Meh, Smile, LayoutGrid, ShoppingCart, 
  Circle, Star, Pen, Cookie, Power, Music, Footprints, Droplets, 
  CheckCircle, LogOut, Shirt, Store
} from 'lucide-react';

// --- KOMPONEN JAM (Diasingkan supaya tidak mengganggu aplikasi utama) ---
const HeaderClock = () => {
  const [currentTime, setCurrentTime] = useState('');
  useEffect(() => {
    const timer = setInterval(() => {
      const now = new Date();
      setCurrentTime(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }));
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  return <span className="font-bold font-mono tracking-widest text-sm md:text-base">{currentTime || '11:11 AM'}</span>;
};

export default function App() {
  // State Management
  const [currentView, setCurrentView] = useState('home');
  const [isHighContrast, setIsHighContrast] = useState(false);
  const [zoomLevel, setZoomLevel] = useState(0); 
  const [malayVoice, setMalayVoice] = useState(null); 
  const [selectedCareer, setSelectedCareer] = useState(null);
  
  // --- PROFIL MURID ---
  const [isProfileComplete, setIsProfileComplete] = useState(false);
  const [userProfile, setUserProfile] = useState({ name: '', age: '', gender: '' });
  const [quizResult, setQuizResult] = useState(null);

  // --- KUIZ STATE ---
  const [quizPhase, setQuizPhase] = useState('intro');
  const [quizIndex, setQuizIndex] = useState(0);
  const [quizAnswers, setQuizAnswers] = useState([]);

  // Load Voices
  useEffect(() => {
    const loadVoices = () => {
      const voices = window.speechSynthesis.getVoices();
      const preferredVoice = 
        voices.find(voice => voice.lang === 'ms-MY' || voice.lang === 'ms_MY') || 
        voices.find(voice => voice.lang.includes('ms')) || 
        voices.find(voice => voice.lang.includes('id-ID'));
      if (preferredVoice) setMalayVoice(preferredVoice);
    };
    loadVoices();
    if ('speechSynthesis' in window) window.speechSynthesis.onvoiceschanged = loadVoices;
  }, []);

  const speakText = (text) => {
    if ('speechSynthesis' in window) {
      window.speechSynthesis.cancel();
      const cleanText = text.replace(/[*_#✨📋🏢🛠️]/g, ''); 
      const utterance = new SpeechSynthesisUtterance(cleanText);
      utterance.lang = 'ms-MY'; 
      if (malayVoice) utterance.voice = malayVoice;
      utterance.rate = 0.9; 
      window.speechSynthesis.speak(utterance);
    } else {
      console.warn("Fungsi bacaan suara tidak disokong pelayar anda.");
    }
  };

  const SpeakButton = ({ text, className = "" }) => (
    <button
      onClick={(e) => { e.stopPropagation(); speakText(text); }}
      className={`inline-flex items-center justify-center p-1.5 ml-2 rounded-lg border-2 border-black bg-yellow-300 hover:bg-yellow-400 active:translate-y-1 transition-transform ${isHighContrast ? 'border-yellow-300 text-black' : 'text-black'} ${className}`}
      title="Baca Teks Ini" aria-label={`Baca: ${text}`}
    >
      <Volume2 size={18} strokeWidth={3} />
    </button>
  );

  const getSizes = (level) => {
    const map = {
      '-2': { base: 'text-sm', card: 'text-base', quiz: 'text-lg', main: 'text-xl' },
      '-1': { base: 'text-base', card: 'text-lg', quiz: 'text-xl', main: 'text-2xl' },
      '0':  { base: 'text-lg', card: 'text-xl', quiz: 'text-2xl', main: 'text-3xl' },
      '1':  { base: 'text-xl', card: 'text-2xl', quiz: 'text-3xl', main: 'text-4xl' },
      '2':  { base: 'text-2xl', card: 'text-3xl', quiz: 'text-4xl', main: 'text-5xl' }
    };
    return map[level];
  };
  const { base: textSize, card: cardTitleSize, quiz: quizTextSize, main: headingSize } = getSizes(zoomLevel);

  const retroShadow = 'shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]';
  const retroShadowHover = 'hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:translate-y-[4px] hover:translate-x-[4px] transition-all cursor-pointer';
  const retroBorder = 'border-4 border-black';

  const navigateTo = (view) => {
    setCurrentView(view);
    setSelectedCareer(null);
    window.scrollTo(0, 0);
  };

  // --- DATA KERJAYA (14 SENARAI) ---
  const careers = [
    { id: 1, title: 'Pembantu Bakeri', icon: <ChefHat size={40} strokeWidth={2.5} />, desc: 'Menyediakan bahan masakan, mengadun dan membakar roti.', category: 'R (Realistik)', color: 'bg-green-300',
      details: { tasks: ['Menguli tepung dengan tangan.', 'Menyapu jem pada roti.', 'Menyusun roti di dalam dulang.'], env: 'Dapur yang berbau wangi.', tools: ['Ketuhar', 'Dulang', 'Sarung Tangan'] } },
    
    { id: 2, title: 'Pembantu Landskap', icon: <TreePine size={40} strokeWidth={2.5} />, desc: 'Menanam, menyiram dan menjaga tumbuh-tumbuhan taman.', category: 'R (Realistik)', color: 'bg-emerald-300',
      details: { tasks: ['Menyiram pokok bunga.', 'Menyapu daun kering.', 'Menanam benih baru.'], env: 'Taman dan luar rumah.', tools: ['Penyapu', 'Paip Air', 'Kereta Sorong'] } },
    
    { id: 3, title: 'Pembantu Dobi', icon: <Shirt size={40} strokeWidth={2.5} />, desc: 'Membasuh, mengering dan melipat pakaian dengan kemas.', category: 'R (Realistik)', color: 'bg-teal-300',
      details: { tasks: ['Memasukkan baju ke dalam mesin.', 'Melipat baju dengan lurus.', 'Menyusun baju ikut bakul.'], env: 'Kedai dobi, bau sabun.', tools: ['Mesin Basuh', 'Bakul', 'Penyangkut'] } },
    
    { id: 4, title: 'Pembantu Mekanik', icon: <Wrench size={40} strokeWidth={2.5} />, desc: 'Membantu membaiki kenderaan dan menyusun peralatan bengkel.', category: 'R (Realistik)', color: 'bg-slate-300',
      details: { tasks: ['Menyusun spanar di rak.', 'Mengelap cermin kereta.', 'Menyapu lantai bengkel.'], env: 'Bengkel kereta, bising sedikit.', tools: ['Spanar', 'Kain Lap', 'Troli'] } },
    
    { id: 5, title: 'Pembantu Makmal', icon: <Microscope size={40} strokeWidth={2.5} />, desc: 'Mencuci kelalang, menyusun radas dan menjaga kebersihan.', category: 'I (Investigatif)', color: 'bg-blue-400',
      details: { tasks: ['Membasuh tabung uji.', 'Menyusun radas sains.', 'Mengelap meja makmal.'], env: 'Makmal sains yang bersih.', tools: ['Berus Cuci', 'Kain Lap', 'Rak Tabung Uji'] } },
    
    { id: 6, title: 'Penyemak Kualiti', icon: <Search size={40} strokeWidth={2.5} />, desc: 'Memerhati dan memastikan barang kilang tiada kerosakan.', category: 'I (Investigatif)', color: 'bg-indigo-300',
      details: { tasks: ['Mengasingkan barang yang calar.', 'Menyusun barang yang elok.', 'Melihat label dengan teliti.'], env: 'Kilang atau meja kerja.', tools: ['Bakul Asing', 'Sarung Tangan', 'Kanta Pembesar'] } },
    
    { id: 7, title: 'Pembantu Kedai Bunga', icon: <Flower size={40} strokeWidth={2.5} />, desc: 'Menyusun dan menjaga keindahan bunga segar di kedai.', category: 'A (Artistik)', color: 'bg-pink-300',
      details: { tasks: ['Memotong daun lebih.', 'Menyusun bunga dalam pasu.', 'Mengikat reben cantik.'], env: 'Kedai bunga, sejuk dan wangi.', tools: ['Gunting', 'Reben', 'Pasu'] } },
    
    { id: 8, title: 'Pembuat Kraf Tangan', icon: <Scissors size={40} strokeWidth={2.5} />, desc: 'Menggunting dan menghasilkan pelbagai barangan seni kraf.', category: 'A (Artistik)', color: 'bg-yellow-300',
      details: { tasks: ['Menggunting kertas warna.', 'Menampal gam pada kraf.', 'Mewarnakan hasil seni.'], env: 'Bilik kraf yang ceria.', tools: ['Gunting', 'Gam', 'Warna'] } },
    
    { id: 9, title: 'Pembantu Cafe', icon: <Coffee size={40} strokeWidth={2.5} />, desc: 'Menyambut tetamu, mengambil pesanan dan menghidang makanan.', category: 'S (Sosial)', color: 'bg-orange-300',
      details: { tasks: ['Mengelap meja makan.', 'Menghantar minuman kepada pelanggan.', 'Menyusun kerusi dengan lurus.'], env: 'Kedai makan, ramai orang.', tools: ['Kain Lap', 'Dulang', 'Buku Menu'] } },
    
    { id: 10, title: 'Usahawan', icon: <Store size={40} strokeWidth={2.5} />, desc: 'Membuka perniagaan sendiri dan menjual produk kepada pelanggan.', category: 'E (Enterprising)', color: 'bg-red-300',
      details: { tasks: ['Senyum dan sapa orang.', 'Menyusun barang niaga.', 'Berikan beg plastik kepada pembeli.'], env: 'Kedai atau pasar.', tools: ['Barang Niaga', 'Kalkulator', 'Beg Plastik'] } },
    
    { id: 11, title: 'Jurutunai', icon: <Calculator size={40} strokeWidth={2.5} />, desc: 'Mengira bil, menerima bayaran dan memastikan pelanggan gembira.', category: 'E (Enterprising)', color: 'bg-cyan-300',
      details: { tasks: ['Scan barang (bunyi tit!).', 'Menekan butang mesin duit.', 'Memberi resit kepada pelanggan.'], env: 'Pasar raya, kaunter bayaran.', tools: ['Mesin Tunai', 'Scanner', 'Duit Baki'] } },
    
    { id: 12, title: 'Pembantu Stor', icon: <Package size={40} strokeWidth={2.5} />, desc: 'Menyusun barang, mengangkat kotak dan merekod jumlah stok.', category: 'C (Konvensional)', color: 'bg-amber-300',
      details: { tasks: ['Mengangkat kotak kecil.', 'Menyusun kotak di rak lurus.', 'Mengira jumlah kotak.'], env: 'Gudang atau stor besar.', tools: ['Troli Barang', 'Kotak', 'Papan Klip'] } },
    
    { id: 13, title: 'Pembantu Perpustakaan', icon: <BookOpen size={40} strokeWidth={2.5} />, desc: 'Menyusun buku di rak dan merekod pinjaman bahan bacaan.', category: 'C (Konvensional)', color: 'bg-blue-300',
      details: { tasks: ['Menyusun buku mengikut warna/nombor.', 'Menolak troli buku.', 'Memastikan meja sentiasa kemas.'], env: 'Perpustakaan, senyap dan tenang.', tools: ['Troli Buku', 'Rak Buku', 'Cap Tarikh'] } },
    
    { id: 14, title: 'Kerani Data', icon: <Monitor size={40} strokeWidth={2.5} />, desc: 'Menaip dan memasukkan maklumat ke dalam komputer dengan teliti.', category: 'C (Konvensional)', color: 'bg-purple-300',
      details: { tasks: ['Menaip huruf di komputer.', 'Menekan tetikus (mouse).', 'Menyalin maklumat dari kertas.'], env: 'Pejabat, meja komputer.', tools: ['Papan Kekunci', 'Komputer', 'Fail Kertas'] } },
  ];

  const quizQuestions = [
    { id: 1, code: 'R1', text: "Adakah kamu suka menyusun blok jadi tinggi?", icon: <LayoutGrid size={60} strokeWidth={2.5} />, color: "bg-emerald-300", category: "R (Realistik)" },
    { id: 2, code: 'R2', text: "Adakah kamu suka menolak kereta mainan / troli?", icon: <ShoppingCart size={60} strokeWidth={2.5} />, color: "bg-green-300", category: "R (Realistik)" },
    { id: 3, code: 'I1', text: "Adakah kamu suka asingkan butang ikut warna?", icon: <Circle size={60} strokeWidth={2.5} />, color: "bg-indigo-300", category: "I (Investigatif)" },
    { id: 4, code: 'I2', text: "Adakah kamu suka cari benda tersembunyi dalam pasir?", icon: <Search size={60} strokeWidth={2.5} />, color: "bg-blue-400", category: "I (Investigatif)" },
    { id: 5, code: 'A1', text: "Adakah kamu suka mewarna gambar?", icon: <Palette size={60} strokeWidth={2.5} />, color: "bg-pink-300", category: "A (Artistik)" },
    { id: 6, code: 'A2', text: "Adakah kamu suka lekatkan pelekat (sticker)?", icon: <Star size={60} strokeWidth={2.5} />, color: "bg-yellow-300", category: "A (Artistik)" },
    { id: 7, code: 'S1', text: "Adakah kamu suka hulur pensel kepada kawan?", icon: <Pen size={60} strokeWidth={2.5} />, color: "bg-red-300", category: "S (Sosial)" },
    { id: 8, code: 'S2', text: "Adakah kamu suka bagi makanan ringan kat kawan?", icon: <Cookie size={60} strokeWidth={2.5} />, color: "bg-orange-300", category: "S (Sosial)" },
    { id: 9, code: 'E1', text: "Adakah kamu suka tekan suis lampu untuk cikgu?", icon: <Power size={60} strokeWidth={2.5} />, color: "bg-teal-300", category: "E (Enterprising)" },
    { id: 10, code: 'E2', text: "Adakah kamu suka pilih lagu untuk kelas dengar?", icon: <Music size={60} strokeWidth={2.5} />, color: "bg-cyan-300", category: "E (Enterprising)" },
    { id: 11, code: 'C1', text: "Adakah kamu suka susun kasut di rak lurus-lurus?", icon: <Footprints size={60} strokeWidth={2.5} />, color: "bg-purple-300", category: "C (Konvensional)" },
    { id: 12, code: 'C2', text: "Adakah kamu suka lap meja lepas makan?", icon: <Droplets size={60} strokeWidth={2.5} />, color: "bg-blue-300", category: "C (Konvensional)" },
  ];

  // --- GOOGLE SHEETS SKELETON ---
  const SCRIPT_URL = "URL_ANDA_DI_SINI"; 
  const saveToGoogleSheets = async (profile, resultData) => {
    if (SCRIPT_URL === "URL_ANDA_DI_SINI") return;
    try {
      const payload = {
        timestamp: new Date().toLocaleString('ms-MY'),
        name: profile.name,
        age: profile.age,
        gender: profile.gender,
        dominant1: resultData.riasec[0] || '-',
        dominant2: resultData.riasec[1] || '-',
        scoreR: resultData.scores['R (Realistik)'],
        scoreI: resultData.scores['I (Investigatif)'],
        scoreA: resultData.scores['A (Artistik)'],
        scoreS: resultData.scores['S (Sosial)'],
        scoreE: resultData.scores['E (Enterprising)'],
        scoreC: resultData.scores['C (Konvensional)']
      };
      await fetch(SCRIPT_URL, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
    } catch (error) {
      console.error(error);
    }
  };

  // --- QUIZ LOGIC ---
  const handleQuizAnswer = (score) => {
    const newAnswers = [...quizAnswers, { questionId: quizQuestions[quizIndex].id, score }];
    setQuizAnswers(newAnswers);

    if (quizIndex < quizQuestions.length - 1) {
      setQuizIndex(quizIndex + 1);
    } else {
      const scores = { 'R (Realistik)': 0, 'I (Investigatif)': 0, 'A (Artistik)': 0, 'S (Sosial)': 0, 'E (Enterprising)': 0, 'C (Konvensional)': 0 };
      newAnswers.forEach(ans => {
        const cat = quizQuestions.find(q => q.id === ans.questionId).category;
        scores[cat] += ans.score;
      });

      const sortedCats = Object.entries(scores).sort((a, b) => b[1] - a[1]);
      const dominantCats = [sortedCats[0][0], sortedCats[1][0]]; 
      const recommended = careers.filter(c => dominantCats.includes(c.category));
      
      const finalResultData = { riasec: dominantCats, scores: scores, careers: recommended };
      setQuizResult(finalResultData);
      setQuizPhase('result');
      saveToGoogleSheets(userProfile, finalResultData);
    }
  };

  const startQuiz = () => {
    setQuizPhase('questions');
  };

  const resetQuiz = () => {
    setQuizIndex(0);
    setQuizAnswers([]);
    setQuizPhase('intro');
  };

  const handleNewStudent = () => {
    setIsProfileComplete(false);
    setUserProfile({ name: '', age: '', gender: '' });
    setQuizResult(null);
    resetQuiz();
    setCurrentView('home');
    setSelectedCareer(null);
    window.scrollTo(0, 0);
  };

  // --- VIEWS ---
  const OnboardingView = () => {
    const [tempName, setTempName] = useState(userProfile.name);
    const [tempAge, setTempAge] = useState(userProfile.age);
    const [tempGender, setTempGender] = useState(userProfile.gender);

    const handleSaveProfile = () => {
      setUserProfile({ name: tempName.trim() || 'Kawan', age: tempAge || '-', gender: tempGender || '-' });
      setIsProfileComplete(true);
      navigateTo('home');
    };

    return (
      <div className="animate-in zoom-in duration-500 flex flex-col items-center justify-center h-full p-6 max-w-2xl mx-auto mt-4 md:mt-10">
        <div className={`bg-white ${retroBorder} rounded-3xl w-full p-6 md:p-8 ${retroShadow} flex flex-col items-center text-center relative`}>
          <div className="p-6 bg-pink-300 rounded-full border-4 border-black mb-6">
            <IdCard size={64} strokeWidth={3} />
          </div>
          <h1 className={`font-black mb-2 uppercase flex items-center justify-center flex-wrap gap-2 ${headingSize}`}>
            Isi Biodata Diri <SpeakButton text="Sila isi biodata diri anda sebelum mula." />
          </h1>
          <p className={`font-bold mb-8 opacity-80 ${textSize}`}>Maklumat ini akan disimpan dalam Profil Saya.</p>
          <div className="w-full flex flex-col gap-6 text-left mb-8">
            <div>
              <label className={`font-black uppercase ml-2 flex items-center gap-2 mb-2 ${textSize}`}>
                Nama Penuh <SpeakButton text="Sila taip Nama Penuh" className="!bg-white !text-black scale-75" />
              </label>
              <input type="text" placeholder="Contoh: Ali Bin Abu" value={tempName} onChange={(e) => setTempName(e.target.value)}
                className={`w-full p-4 rounded-xl border-4 border-black font-bold outline-none focus:bg-pink-50 ${retroShadowHover} ${textSize}`} />
            </div>
            <div>
              <label className={`font-black uppercase ml-2 flex items-center gap-2 mb-2 ${textSize}`}>
                Umur (Tahun) <SpeakButton text="Sila taip Umur dalam bentuk nombor" className="!bg-white !text-black scale-75" />
              </label>
              <input type="number" placeholder="Contoh: 15" value={tempAge} onChange={(e) => setTempAge(e.target.value)}
                className={`w-full p-4 rounded-xl border-4 border-black font-bold outline-none focus:bg-pink-50 ${retroShadowHover} ${textSize}`} />
            </div>
            <div>
              <label className={`font-black uppercase ml-2 flex items-center gap-2 mb-2 ${textSize}`}>
                Jantina <SpeakButton text="Pilih Jantina: Lelaki atau Perempuan" className="!bg-white !text-black scale-75" />
              </label>
              <div className="flex gap-4">
                <div role="button" tabIndex={0} onClick={() => setTempGender('Lelaki')}
                  className={`flex-1 p-4 rounded-xl border-4 border-black font-black uppercase text-center transition-all ${tempGender === 'Lelaki' ? 'bg-blue-400 text-white shadow-[inset_4px_4px_0px_0px_rgba(0,0,0,0.3)]' : 'bg-slate-100 hover:bg-slate-200'} ${textSize}`}>Lelaki</div>
                <div role="button" tabIndex={0} onClick={() => setTempGender('Perempuan')}
                  className={`flex-1 p-4 rounded-xl border-4 border-black font-black uppercase text-center transition-all ${tempGender === 'Perempuan' ? 'bg-pink-400 text-white shadow-[inset_4px_4px_0px_0px_rgba(0,0,0,0.3)]' : 'bg-slate-100 hover:bg-slate-200'} ${textSize}`}>Perempuan</div>
              </div>
            </div>
          </div>
          <div role="button" tabIndex={0} onClick={handleSaveProfile}
            className={`w-full px-8 py-4 rounded-xl font-black uppercase flex items-center justify-center gap-3 bg-yellow-400 border-4 border-black text-black ${retroShadowHover} ${textSize}`}>
            Simpan & Masuk <SpeakButton text="Simpan profil dan masuk ke aplikasi." className="!bg-white !text-black" /> <ArrowRight size={24} strokeWidth={3} />
          </div>
        </div>
      </div>
    );
  };

  const HomeView = () => (
    <div className="animate-in fade-in zoom-in-95 duration-500 flex flex-col items-center justify-center h-full p-6 max-w-4xl mx-auto mt-4 md:mt-10">
      <div className="flex flex-col items-center w-full">
        <div className="text-center mb-12 bg-white p-6 md:p-8 rounded-3xl border-4 border-black inline-block shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] relative w-full md:w-auto max-w-2xl">
          <h1 className={`font-black ${headingSize} tracking-wider uppercase flex items-center justify-center flex-wrap gap-2`}>
            Selamat Datang, {userProfile.name}! <SpeakButton text={`Selamat Datang ke CareerVerse, ${userProfile.name}!`} />
          </h1>
          <p className={`font-bold mt-4 flex items-center justify-center flex-wrap gap-2 ${textSize}`}>
            Pilih folder untuk bermula <SpeakButton text="Pilih folder untuk bermula" />
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 w-full place-items-center max-w-3xl mx-auto">
          <div onClick={() => { setQuizPhase('intro'); navigateTo('quiz'); }} className="flex flex-col items-center group cursor-pointer">
            <div className={`w-32 h-24 bg-pink-300 rounded-lg ${retroBorder} ${retroShadow} ${retroShadowHover} relative flex items-center justify-center mb-3`}>
               <div className="absolute top-0 left-4 w-12 h-4 bg-pink-300 border-t-4 border-l-4 border-r-4 border-black rounded-t-lg -mt-4 z-0"></div>
               <Monitor size={40} className="z-10" strokeWidth={2.5} />
            </div>
            <span className={`font-black uppercase bg-white px-3 py-1 border-2 border-black rounded-full flex items-center text-center ${textSize}`}>
              Kuiz Kerjaya <SpeakButton text="Kuiz Kerjaya" className="scale-75" />
            </span>
          </div>

          <div onClick={() => navigateTo('gallery')} className="flex flex-col items-center group cursor-pointer">
            <div className={`w-32 h-24 bg-green-300 rounded-lg ${retroBorder} ${retroShadow} ${retroShadowHover} relative flex items-center justify-center mb-3`}>
               <div className="absolute top-0 left-4 w-12 h-4 bg-green-300 border-t-4 border-l-4 border-r-4 border-black rounded-t-lg -mt-4 z-0"></div>
               <Briefcase size={40} className="z-10" strokeWidth={2.5} />
            </div>
            <span className={`font-black uppercase bg-white px-3 py-1 border-2 border-black rounded-full flex items-center text-center ${textSize}`}>
              Senarai Kerja <SpeakButton text="Senarai Kerja" className="scale-75" />
            </span>
          </div>

          <div onClick={() => navigateTo('profile')} className="flex flex-col items-center group cursor-pointer">
            <div className={`w-32 h-24 bg-yellow-300 rounded-lg ${retroBorder} ${retroShadow} ${retroShadowHover} relative flex items-center justify-center mb-3`}>
               <div className="absolute top-0 left-4 w-12 h-4 bg-yellow-300 border-t-4 border-l-4 border-r-4 border-black rounded-t-lg -mt-4 z-0"></div>
               <User size={40} className="z-10" strokeWidth={2.5} />
            </div>
            <span className={`font-black uppercase bg-white px-3 py-1 border-2 border-black rounded-full flex items-center text-center ${textSize}`}>
              Profil Saya <SpeakButton text="Profil Saya" className="scale-75" />
            </span>
          </div>
        </div>
      </div>
    </div>
  );

  const QuizView = () => {
    return (
      <div className="animate-in slide-in-from-right duration-500 h-full p-6 flex flex-col items-center">
        <div className={`bg-white ${retroBorder} rounded-2xl w-full max-w-4xl p-6 ${retroShadow} flex flex-col items-center text-center relative`}>
          {quizPhase === 'intro' && (
            <div className="py-12 flex flex-col items-center w-full">
              <div className="p-6 bg-pink-300 rounded-full border-4 border-black mb-6">
                <Award size={64} strokeWidth={3} />
              </div>
              <h2 className={`font-black mb-4 uppercase flex items-center gap-2 ${headingSize}`}>
                Sedia Untuk Mula? <SpeakButton text="Sedia untuk mula mengambil kuiz?" />
              </h2>
              <p className={`font-bold mb-8 opacity-80 ${textSize}`}>Terdapat 12 soalan. Pilih Skor 1, 2, atau 3 untuk setiap soalan.</p>
              
              <div role="button" tabIndex={0} onClick={startQuiz}
                className={`cursor-pointer px-8 py-4 rounded-xl font-black uppercase flex items-center gap-3 bg-blue-400 border-4 border-black text-white ${retroShadowHover} ${textSize}`}>
                Mula Kuiz <SpeakButton text="Mula Kuiz" className="!bg-white !text-black" /> <Play size={24} strokeWidth={3} />
              </div>
            </div>
          )}

          {quizPhase === 'questions' && (
            <>
              <div className="absolute top-4 left-4 bg-black text-white px-3 py-1 font-bold rounded-full text-sm flex items-center">
                Soalan {quizIndex + 1} / {quizQuestions.length}
                <SpeakButton text={`Soalan ${quizIndex + 1} daripada ${quizQuestions.length}`} className="scale-75 origin-left !bg-white !text-black ml-2" />
              </div>
              
              <div className={`mt-12 mb-6 p-8 ${quizQuestions[quizIndex].color} rounded-2xl border-4 border-black`}>
                {quizQuestions[quizIndex].icon}
              </div>
              
              <h3 className={`font-black mb-10 max-w-2xl flex flex-col items-center gap-4 ${quizTextSize}`}>
                {quizQuestions[quizIndex].text}
                <SpeakButton text={quizQuestions[quizIndex].text} className="scale-125" />
              </h3>
              
              <div className="flex flex-col md:flex-row gap-4 w-full justify-center">
                <div role="button" tabIndex={0} onClick={() => handleQuizAnswer(1)}
                  className={`flex-1 flex flex-col items-center gap-3 p-5 rounded-xl border-4 border-black bg-red-400 text-white relative ${retroShadowHover}`}>
                  <div className="absolute top-2 right-2"><SpeakButton text="Tidak Suka, Skor 1" className="!bg-white !text-black scale-75" /></div>
                  <Frown size={48} strokeWidth={2.5} />
                  <span className={`font-black flex flex-col items-center ${textSize}`}>TIDAK SUKA <span className="bg-black text-white px-2 py-0.5 rounded mt-1">(1)</span></span>
                </div>
                <div role="button" tabIndex={0} onClick={() => handleQuizAnswer(2)}
                  className={`flex-1 flex flex-col items-center gap-3 p-5 rounded-xl border-4 border-black bg-yellow-400 text-black relative ${retroShadowHover}`}>
                  <div className="absolute top-2 right-2"><SpeakButton text="Biasa Sahaja, Skor 2" className="!bg-white !text-black scale-75" /></div>
                  <Meh size={48} strokeWidth={2.5} />
                  <span className={`font-black flex flex-col items-center ${textSize}`}>BIASA SAHAJA <span className="bg-black text-white px-2 py-0.5 rounded mt-1">(2)</span></span>
                </div>
                <div role="button" tabIndex={0} onClick={() => handleQuizAnswer(3)}
                  className={`flex-1 flex flex-col items-center gap-3 p-5 rounded-xl border-4 border-black bg-green-400 text-white relative ${retroShadowHover}`}>
                  <div className="absolute top-2 right-2"><SpeakButton text="Sangat Suka, Skor 3" className="!bg-white !text-black scale-75" /></div>
                  <Smile size={48} strokeWidth={2.5} />
                  <span className={`font-black flex flex-col items-center ${textSize}`}>SANGAT SUKA <span className="bg-black text-white px-2 py-0.5 rounded mt-1">(3)</span></span>
                </div>
              </div>
            </>
          )}

          {quizPhase === 'result' && (
            <div className="py-8 flex flex-col items-center w-full">
              <div className="p-6 bg-yellow-300 rounded-full border-4 border-black mb-6">
                <CheckCircle size={64} strokeWidth={3} />
              </div>
              <h3 className={`font-black mb-2 uppercase flex items-center gap-2 text-center ${headingSize}`}>
                Tahniah, {userProfile.name}! <SpeakButton text={`Tahniah, ${userProfile.name}!`} />
              </h3>
              
              <div className="w-full text-left bg-slate-100 p-5 rounded-2xl border-4 border-black mb-6 mt-4">
                <h4 className={`font-black mb-2 flex items-center gap-2 ${cardTitleSize}`}>
                  Dua Profil Paling Dominan Anda:
                  <SpeakButton text="Dua Profil Kerjaya paling dominan anda adalah." />
                </h4>
                
                <div className="flex flex-col gap-3 mt-4">
                  {quizResult.riasec.map(cat => (
                    <div key={cat} className="bg-white p-3 rounded-xl border-2 border-black flex flex-col md:flex-row md:items-center justify-between gap-2">
                      <div className="flex items-center gap-2">
                        <span className="font-black bg-blue-500 text-white px-3 py-1 rounded-lg border-2 border-black">
                          {cat.split(' ')[0]} 
                        </span>
                        <span className={`font-black uppercase ${textSize}`}>{cat.substring(4)}</span>
                      </div>
                      <span className="font-bold bg-yellow-300 px-3 py-1 rounded-full border-2 border-black whitespace-nowrap">
                        Skor: {quizResult.scores[cat]} / 6
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="flex gap-4 mt-4">
                <button onClick={() => navigateTo('profile')}
                  className={`px-6 py-3 rounded-xl font-black bg-slate-200 border-4 border-black ${retroShadowHover} ${textSize}`}>
                  Lihat Profil & Kerja
                </button>
                <button onClick={() => navigateTo('gallery')}
                  className={`px-6 py-3 rounded-xl font-black flex items-center gap-2 bg-blue-400 border-4 border-black text-white ${retroShadowHover} ${textSize}`}>
                  Senarai Penuh <ArrowRight size={20} strokeWidth={3} />
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  };

  const CareerDetailView = ({ career }) => (
    <div className="animate-in fade-in duration-500 p-6 max-w-6xl mx-auto mt-4 w-full">
      <div className="flex justify-between items-center mb-6 bg-white p-4 rounded-xl border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
        <button onClick={() => setSelectedCareer(null)}
          className={`flex items-center gap-2 font-bold px-4 py-2 bg-slate-100 border-4 border-black rounded-lg ${retroShadowHover}`}>
          <ArrowLeft size={20} /> Kembali
        </button>
        <h2 className={`font-black uppercase tracking-widest hidden md:block ${headingSize}`}>Butiran Pekerjaan</h2>
        <div className="w-24"></div>
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        <div className={`bg-white p-6 md:p-8 rounded-3xl border-4 border-black ${retroShadow} flex flex-col gap-6`}>
          <div className="flex items-center gap-4 border-b-4 border-black pb-6">
            <div className={`p-4 rounded-2xl border-4 border-black ${career.color}`}>
              {React.cloneElement(career.icon, { size: 64 })}
            </div>
            <div>
              <h3 className={`font-black uppercase flex items-center gap-2 ${headingSize}`}>
                {career.title} <SpeakButton text={career.title} className="scale-75" />
              </h3>
              <span className="inline-block mt-2 font-bold bg-black text-white px-3 py-1 rounded-full text-sm">
                Kategori: {career.category}
              </span>
            </div>
          </div>
          
          <p className={`font-bold opacity-80 ${textSize}`}>{career.desc}</p>

          <div className="bg-blue-50 p-5 rounded-2xl border-4 border-black mt-2 flex-grow">
            <h4 className={`font-black mb-3 uppercase flex items-center gap-2 ${cardTitleSize}`}>
              📋 Tugas Harian:
              <SpeakButton text={`Tugas harian untuk kerja ${career.title} adalah: ${career.details.tasks.join('. ')}`} className="!bg-white !text-black scale-75" />
            </h4>
            <ul className={`list-disc ml-6 font-bold flex flex-col gap-2 ${textSize}`}>
              {career.details.tasks.map(task => (
                <li key={task}>{task}</li>
              ))}
            </ul>
          </div>

          <div className="flex flex-col md:flex-row gap-4 mt-2">
            <div className="flex-1 bg-yellow-50 p-4 rounded-xl border-4 border-black">
              <h4 className="font-black mb-2 uppercase text-sm flex items-center gap-2">
                🏢 Persekitaran
                <SpeakButton text={`Persekitaran kerja: ${career.details.env}`} className="!bg-white !text-black scale-75" />
              </h4>
              <p className={`font-bold ${textSize}`}>{career.details.env}</p>
            </div>
            <div className="flex-1 bg-green-50 p-4 rounded-xl border-4 border-black">
              <h4 className="font-black mb-2 uppercase text-sm flex items-center gap-2">
                🛠️ Peralatan Utama
                <SpeakButton text={`Peralatan yang digunakan: ${career.details.tools.join(', ')}`} className="!bg-white !text-black scale-75" />
              </h4>
              <p className={`font-bold ${textSize}`}>{career.details.tools.join(', ')}</p>
            </div>
          </div>
        </div>

        <div className={`bg-white p-4 md:p-6 rounded-3xl border-4 border-black ${retroShadow} flex flex-col h-full min-h-[500px]`}>
          <h3 className={`font-black uppercase mb-4 text-center ${cardTitleSize}`}>Info Pekerjaan</h3>
          
          <div style={{ position: 'relative', width: '100%', height: 0, paddingTop: '56.2500%', paddingBottom: 0, boxShadow: '0 2px 8px 0 rgba(63,69,81,0.16)', marginTop: 'auto', marginBottom: 'auto', overflow: 'hidden', borderRadius: '8px', willChange: 'transform' }}>
            <iframe 
              loading="lazy" 
              style={{ position: 'absolute', width: '100%', height: '100%', top: 0, left: 0, border: 'none', padding: 0, margin: 0 }}
              src="https://www.canva.com/design/DAHC_RwXgbE/aG2TNGm0hNO2S3Z8oNRtoA/view?embed" 
              allowFullScreen={true}
              allow="fullscreen"
            ></iframe>
          </div>
          
          <p className="text-center font-bold mt-4 text-sm">
            <a href="https://www.canva.com/design/DAHC_RwXgbE/aG2TNGm0hNO2S3Z8oNRtoA/view?utm_content=DAHC_RwXgbE&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800 underline">info pekerjaan</a> by MAISARA QISTINA BINTI AZROL NIZAM IPG-Pelajar
          </p>
        </div>

      </div>
    </div>
  );

  const GalleryView = () => {
    if (selectedCareer) return <CareerDetailView career={selectedCareer} />;

    return (
      <div className="animate-in fade-in duration-500 p-6">
        <div className="flex justify-between items-center mb-6 bg-white p-4 rounded-xl border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
          <h2 className={`font-black uppercase tracking-widest flex items-center gap-3 ${headingSize}`}>
            Senarai Kerjaya <SpeakButton text="Senarai Semua Kerjaya" />
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {careers.map((career) => (
            <div key={career.id} className={`p-5 rounded-2xl flex flex-col bg-white ${retroBorder} ${retroShadow} hover:translate-y-1 hover:-translate-x-1 transition-transform`}>
              <div className="flex items-center gap-4 mb-4 border-b-4 border-black pb-4">
                <div className={`p-3 rounded-xl border-4 border-black ${career.color}`}>
                  {career.icon}
                </div>
                <div>
                  <h3 className={`font-black uppercase flex items-center gap-2 ${cardTitleSize}`}>
                    {career.title} <SpeakButton text={career.title} className="scale-75" />
                  </h3>
                  <span className="px-3 py-1 rounded-full font-bold text-xs bg-black text-white mt-1 inline-flex items-center">
                    {career.category}
                  </span>
                </div>
              </div>
              
              <p className={`font-bold mb-6 flex-grow flex items-start gap-2 ${textSize}`}>
                {career.desc}
              </p>
              
              <div className="flex gap-3 mt-auto">
                <div 
                  role="button" 
                  tabIndex={0} 
                  onClick={() => setSelectedCareer(career)}
                  className={`flex-grow py-3 rounded-xl font-black uppercase bg-pink-300 border-4 border-black flex items-center justify-center gap-2 ${retroShadowHover} cursor-pointer text-sm md:text-base`}
                >
                  Butiran Penuh <SpeakButton text={`Lihat Butiran Penuh untuk kerja ${career.title}`} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const ProfileView = () => (
    <div className="animate-in fade-in duration-500 p-6 max-w-5xl mx-auto mt-4">
      <div className="flex flex-col md:flex-row justify-between items-center mb-8 bg-white p-4 rounded-xl border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] gap-4">
        <h2 className={`font-black uppercase tracking-widest flex items-center gap-3 ${headingSize}`}>
          Profil Saya <SpeakButton text="Profil Saya. Ini adalah maklumat biodata dan keputusan kuiz anda." />
        </h2>
        <div className="flex flex-wrap justify-center gap-2 w-full md:w-auto">
          <button onClick={() => setIsProfileComplete(false)}
            className={`px-4 py-2 bg-slate-200 border-4 border-black rounded-xl font-bold hover:bg-slate-300 ${retroShadowHover}`}>
            Kemaskini
          </button>
          <button onClick={handleNewStudent}
            className={`flex items-center justify-center gap-2 px-4 py-2 bg-red-400 text-white border-4 border-black rounded-xl font-bold hover:bg-red-500 ${retroShadowHover}`}>
            <LogOut size={18} strokeWidth={3} /> Murid Baru
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div className={`col-span-1 bg-white p-6 rounded-3xl border-4 border-black flex flex-col items-center text-center ${retroShadow} h-max`}>
          <div className={`w-32 h-32 rounded-full border-4 border-black mb-4 flex items-center justify-center ${userProfile.gender === 'Perempuan' ? 'bg-pink-300' : 'bg-blue-300'}`}>
            <User size={64} strokeWidth={3} />
          </div>
          <h3 className={`font-black uppercase mb-1 ${cardTitleSize}`}>{userProfile.name}</h3>
          <div className="w-full bg-slate-100 p-4 rounded-xl border-4 border-black mt-4 flex flex-col gap-3 text-left">
            <div className="flex justify-between items-center border-b-2 border-slate-300 pb-2">
              <span className="font-bold opacity-70">Umur:</span>
              <span className="font-black">{userProfile.age} Tahun</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="font-bold opacity-70">Jantina:</span>
              <span className="font-black">{userProfile.gender}</span>
            </div>
          </div>
        </div>

        <div className={`col-span-1 md:col-span-2 bg-white p-6 md:p-8 rounded-3xl border-4 border-black ${retroShadow}`}>
          <h3 className={`font-black uppercase mb-6 flex items-center gap-2 border-b-4 border-black pb-4 ${cardTitleSize}`}>
            <Award size={32} /> Rekod Kerjaya <SpeakButton text="Rekod Ujian Kerjaya" className="!bg-white !text-black scale-75" />
          </h3>

          {!quizResult ? (
            <div className="flex flex-col items-center text-center py-10 opacity-70">
              <Folder size={64} className="mb-4 text-slate-300" strokeWidth={2} />
              <p className={`font-bold mb-6 ${textSize}`}>Anda belum mengambil Kuiz Kerjaya.</p>
              <button onClick={() => { setQuizPhase('intro'); navigateTo('quiz'); }}
                className={`px-6 py-3 rounded-xl font-black bg-yellow-300 border-4 border-black text-black hover:bg-yellow-400 ${retroShadowHover} ${textSize}`}>
                Mula Kuiz Sekarang
              </button>
            </div>
          ) : (
            <div className="flex flex-col gap-6">
              <div className="bg-blue-50 p-4 rounded-xl border-2 border-black">
                <h4 className="font-black mb-2 uppercase tracking-wider flex items-center justify-between">
                  Dua Profil Paling Dominan:
                  <SpeakButton text="Ini adalah dua profil paling sesuai dengan anda berserta skornya." className="!bg-white !text-black scale-75"/>
                </h4>
                <div className="flex flex-col gap-3 mt-4">
                  {quizResult.riasec.map(cat => (
                    <div key={cat} className="bg-white p-3 rounded-xl border-2 border-black flex items-center justify-between gap-2">
                      <div className="flex items-center gap-2">
                        <span className="font-black bg-blue-500 text-white px-3 py-1 rounded-lg border-2 border-black">{cat.split(' ')[0]}</span>
                        <span className={`font-black uppercase ${textSize}`}>{cat.substring(4)}</span>
                      </div>
                      <span className="font-bold bg-yellow-300 px-3 py-1 rounded-full border-2 border-black whitespace-nowrap">
                        Skor: {quizResult.scores[cat]}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
              
              <div>
                <h4 className="font-bold opacity-70 mb-3 uppercase tracking-wider">Kerjaya Pilihan Anda:</h4>
                <div className="flex flex-col gap-3">
                  {quizResult.careers.map(career => (
                    <div key={career.id} className={`p-3 rounded-xl flex items-center gap-4 ${career.color} border-4 border-black`}>
                      <div className="bg-white p-2 rounded-lg border-2 border-black">{career.icon}</div>
                      <div className="flex-grow">
                        <h4 className="font-black uppercase">{career.title}</h4>
                        <span className="text-xs font-bold bg-white px-2 py-0.5 rounded border-2 border-black">{career.category}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );

  return (
    <div className={`min-h-screen flex flex-col p-2 md:p-6 font-sans ${isHighContrast ? 'bg-black text-yellow-300' : 'bg-[#e2cdc1]'}`}>
      <div className={`flex-grow flex flex-col mx-auto w-full max-w-7xl rounded-2xl ${retroBorder} overflow-hidden shadow-[8px_8px_0px_0px_rgba(0,0,0,0.6)] ${isHighContrast ? 'border-yellow-300' : ''}`}>
        <div className={`px-4 py-2 border-b-4 border-black flex justify-between items-center ${isHighContrast ? 'bg-black border-yellow-300 text-yellow-300' : 'bg-white'}`}>
          <div className="flex items-center gap-3">
            <Briefcase size={20} strokeWidth={3} />
            <span className={`font-black tracking-widest uppercase ${textSize}`}>CareerVerse</span>
          </div>
          <div className="flex gap-2">
            <div className="w-4 h-4 rounded-full border-2 border-black bg-pink-400"></div>
            <div className="w-4 h-4 rounded-full border-2 border-black bg-green-400"></div>
            <div className="w-4 h-4 rounded-full border-2 border-black bg-yellow-400"></div>
          </div>
        </div>

        <div className={`flex-grow relative overflow-y-auto ${isHighContrast ? 'bg-gray-900' : 'bg-white'}`} style={isHighContrast ? {} : { backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 20px, #f1f5f9 20px, #f1f5f9 22px)' }}>
          {!isProfileComplete ? (
            <OnboardingView />
          ) : (
            <>
              {currentView === 'home' && <HomeView />}
              {currentView === 'quiz' && <QuizView />}
              {currentView === 'gallery' && <GalleryView />}
              {currentView === 'profile' && <ProfileView />}
            </>
          )}
        </div>
      </div>

      <div className={`fixed top-8 right-8 flex flex-col gap-3 z-50 p-3 rounded-2xl border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] ${isHighContrast ? 'bg-black border-yellow-300' : 'bg-white'}`}>
        <button onClick={() => setIsHighContrast(!isHighContrast)} className={`p-3 rounded-full flex items-center justify-center border-4 border-black transition-all ${isHighContrast ? 'bg-yellow-400 text-black' : 'bg-slate-200 hover:bg-slate-300'}`} title="Mod Kontras Tinggi"><Eye size={24} strokeWidth={3} /></button>
        <div className={`flex flex-col items-center gap-1 p-2 rounded-[2rem] border-4 border-black ${isHighContrast ? 'bg-gray-800' : 'bg-slate-100'}`}>
          <button onClick={() => setZoomLevel(prev => Math.min(prev + 1, 2))} disabled={zoomLevel === 2} className={`p-2 rounded-full flex items-center justify-center transition-all ${zoomLevel === 2 ? 'opacity-30 cursor-not-allowed' : (isHighContrast ? 'hover:bg-gray-700 text-yellow-300' : 'hover:bg-slate-300 text-black')}`} title="Besarkan Teks"><ZoomIn size={20} strokeWidth={3} /></button>
          <span className={`font-black text-sm ${isHighContrast ? 'text-yellow-300' : 'text-black'}`}>{zoomLevel > 0 ? `+${zoomLevel}` : zoomLevel}</span>
          <button onClick={() => setZoomLevel(prev => Math.max(prev - 1, -2))} disabled={zoomLevel === -2} className={`p-2 rounded-full flex items-center justify-center transition-all ${zoomLevel === -2 ? 'opacity-30 cursor-not-allowed' : (isHighContrast ? 'hover:bg-gray-700 text-yellow-300' : 'hover:bg-slate-300 text-black')}`} title="Kecilkan Teks"><ZoomOut size={20} strokeWidth={3} /></button>
        </div>
      </div>

      <div className={`mt-4 h-14 rounded-xl flex justify-between items-center px-4 ${retroBorder} ${isHighContrast ? 'bg-black border-yellow-300' : 'bg-[#9c7c6c] text-white shadow-[0px_4px_0px_0px_rgba(0,0,0,0.5)]'}`}>
        <div className="flex gap-2 h-full py-1 overflow-x-auto">
          <button onClick={() => navigateTo('home')} className={`px-3 md:px-4 font-black flex items-center gap-2 border-2 border-transparent hover:border-black rounded-lg transition-all ${currentView === 'home' ? 'bg-white/20' : ''}`}><Home size={20} strokeWidth={3} className="shrink-0" /> <span className="hidden md:inline">Utama</span></button>
          <button onClick={() => navigateTo('gallery')} className={`px-3 md:px-4 font-black flex items-center gap-2 border-2 border-transparent hover:border-black rounded-lg transition-all ${currentView === 'gallery' ? 'bg-white/20' : ''}`}><Folder size={20} strokeWidth={3} className="shrink-0" /> <span className="hidden md:inline">Kerjaya</span></button>
          <button onClick={() => navigateTo('profile')} className={`px-3 md:px-4 font-black flex items-center gap-2 border-2 border-transparent hover:border-black rounded-lg transition-all ${currentView === 'profile' ? 'bg-white/20' : ''}`}><User size={20} strokeWidth={3} className="shrink-0" /> <span className="hidden md:inline">Profil</span></button>
        </div>

        <div className="flex items-center gap-2 md:gap-4 opacity-90 shrink-0 ml-1">
          <CloudRain size={20} className="hidden sm:block" />
          <Wifi size={20} className="hidden sm:block" />
          <Volume2 size={20} className="hidden md:block" />
          <HeaderClock />
        </div>
      </div>
    </div>
  );
}