```react
import React, { useState, useEffect } from 'react';
import { 
  Home, 
  BookOpen, 
  User, 
  Lock, 
  Unlock, 
  PlayCircle, 
  Image as ImageIcon, 
  Video, 
  Globe, 
  Music,
  ArrowLeft,
  CheckCircle,
  X,
  ExternalLink
} from 'lucide-react';

// --- DATA KURSUS ---
const coursesData = [
  {
    id: 'poster-ai',
    title: 'Poster Ai',
    description: 'Pelajari cara menghasilkan poster pemasaran yang memukau menggunakan AI dalam masa beberapa minit.',
    icon: <ImageIcon className="w-8 h-8 mb-4 text-red-500" />,
    password: 'postergetakaful',
    content: 'Selamat datang ke modul Poster Ai! Di sini anda akan belajar menggunakan AI untuk menghasilkan visual berimpak tinggi untuk promosi Takaful anda. Sila tonton video tutorial di bawah untuk panduan langkah demi langkah.',

// Kod UI Iframe ScreenPal yang telah ditukar ke format React (JSX)
    customEmbed: (
      <div 
        className="sp-embed-player" 
        data-id="cOfrifnOOxO" 
        data-aspect-ratio="1.440000" 
        style={{ position: 'relative', width: '100%', paddingTop: '69.444444%', height: 0 }}
      >
        <iframe 
          style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 0 }} 
          scrolling="no" 
          src="https://go.screenpal.com/player/cOfrifnOOxO?ff=1&ahc=1&dcc=1&tl=1&bg=transparent&share=1&download=1&embed=1&cl=1" 
          allowFullScreen={true}
          title="Video Poster Ai ScreenPal"
        ></iframe>
      </div>
    ),
    // Link script appearance khusus untuk ScreenPal
    scriptUrl: "https://go.screenpal.com/player/appearance/cOfrifnOOxO",
    videoUrl: null,
    youtubeLink: null 
  },
  {
    id: 'video-ai',
    title: 'Video Ai',
    description: 'Hasilkan video pendek (Reels/TikTok) tanpa perlu menunjukkan muka menggunakan avatar AI.',
    icon: <Video className="w-8 h-8 mb-4 text-red-500" />,
    password: 'videogetakaful',
    content: 'Modul Video Ai kini bermula. Kita akan menggunakan platform seperti HeyGen atau CapCut AI untuk menghasilkan skrip dan video secara automatik. Mari mula dengan penjanaan skrip menggunakan ChatGPT...',
    customEmbed: null,
    scriptUrl: null,
    videoUrl: null,
    youtubeLink: null
  },
  {
    id: 'website-ai',
    title: 'Website Ai',
    description: 'Bina laman web peribadi ejen Takaful anda sendiri hanya dengan beberapa klik menggunakan pembina web AI.',
    icon: <Globe className="w-8 h-8 mb-4 text-red-500" />,
    password: 'webgetakaful',
    content: 'Dalam modul Website Ai, kita tidak akan menulis kod (coding). Kita akan gunakan Framer AI atau 10Web untuk terus menjana landing page. Sila bersedia dengan maklumat perhubungan dan info produk Takaful anda.',
    customEmbed: null,
    scriptUrl: null,
    videoUrl: null,
    youtubeLink: null
  },
  {
    id: 'music-ai',
    title: 'Music Ai',
    description: 'Cipta muzik latar belakang bebas hak cipta untuk video pemasaran anda menggunakan AI.',
    icon: <Music className="w-8 h-8 mb-4 text-red-500" />,
    password: 'musicgetakaful',
    content: 'Selamat datang ke Music Ai. Muzik yang tepat menaikkan emosi prospek. Kita akan belajar cara menaip "prompt" di Suno AI atau Mubert untuk menghasilkan melodi korporat yang santai.',
    customEmbed: null,
    scriptUrl: null,
    videoUrl: null,
    youtubeLink: null
  }
];

export default function App() {
  const [activeTab, setActiveTab] = useState('home');
  const [unlockedCourses, setUnlockedCourses] = useState([]);
  const [viewingCourse, setViewingCourse] = useState(null);

// State untuk Modal Kata Laluan
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedCourseForUnlock, setSelectedCourseForUnlock] = useState(null);
  const [passwordInput, setPasswordInput] = useState('');
  const [passwordError, setPasswordError] = useState(false);

// Navigasi
  const handleNav = (tab) => {
    setActiveTab(tab);
    setViewingCourse(null);
    window.scrollTo(0, 0);
  };

// Buka Modal
  const handleCourseClick = (course) => {
    if (unlockedCourses.includes(course.id)) {
      setViewingCourse(course);
    } else {
      setSelectedCourseForUnlock(course);
      setIsModalOpen(true);
      setPasswordInput('');
      setPasswordError(false);
    }
  };

// Semak Kata Laluan
  const handleUnlock = (e) => {
    e.preventDefault();
    if (passwordInput === selectedCourseForUnlock.password) {
      setUnlockedCourses([...unlockedCourses, selectedCourseForUnlock.id]);
      setIsModalOpen(false);
      setViewingCourse(selectedCourseForUnlock);
    } else {
      setPasswordError(true);
    }
  };

// EFFECT: Menyuntik skrip (script.src) secara dinamik jika modul yang dibuka memerlukannya (seperti ScreenPal)
  useEffect(() => {
    if (viewingCourse && viewingCourse.scriptUrl) {
      const script = document.createElement("script");
      script.src = viewingCourse.scriptUrl;
      script.async = true;
      document.body.appendChild(script);

// Padam skrip apabila pengguna keluar dari kursus ini
      return () => {
        document.body.removeChild(script);
      };
    }
  }, [viewingCourse]);

return (
    <div className="min-h-screen bg-[#050000] text-gray-200 font-rubik relative overflow-hidden z-0">

{/* Latar Belakang Ambient Red Lights (Kesan Liquid Glass) */}
      <div className="fixed inset-0 z-[-1] pointer-events-none">
        <div className="absolute top-[-20%] left-[-10%] w-[40rem] h-[40rem] bg-red-900/20 rounded-full blur-[120px]"></div>
        <div className="absolute bottom-[-20%] right-[-10%] w-[50rem] h-[50rem] bg-red-800/10 rounded-full blur-[150px]"></div>
        <div className="absolute top-[40%] left-[50%] translate-x-[-50%] w-[60rem] h-[20rem] bg-red-600/5 rounded-full blur-[100px]"></div>
      </div>

{/* NAVBAR */}
      <nav className="sticky top-0 z-40 bg-black/40 backdrop-blur-lg border-b border-white/5 shadow-[0_4px_30px_rgba(255,0,0,0.1)]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex-shrink-0 flex items-center cursor-pointer" onClick={() => handleNav('home')}>
              <span className="text-2xl font-bold bg-gradient-to-r from-red-500 to-red-800 bg-clip-text text-transparent">
                Getakaful Ai
              </span>
            </div>
            <div className="hidden md:flex space-x-8">
              <button 
                onClick={() => handleNav('home')} 
                className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-all ${activeTab === 'home' ? 'text-red-500 bg-red-950/50 border border-red-500/20 shadow-[0_0_10px_rgba(220,38,38,0.2)]' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
              >
                <Home className="w-4 h-4 mr-2" /> Laman Utama
              </button>
              <button 
                onClick={() => handleNav('courses')} 
                className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-all ${activeTab === 'courses' ? 'text-red-500 bg-red-950/50 border border-red-500/20 shadow-[0_0_10px_rgba(220,38,38,0.2)]' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
              >
                <BookOpen className="w-4 h-4 mr-2" /> Kursus Pembelajaran
              </button>
              <button 
                onClick={() => handleNav('coach')} 
                className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-all ${activeTab === 'coach' ? 'text-red-500 bg-red-950/50 border border-red-500/20 shadow-[0_0_10px_rgba(220,38,38,0.2)]' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
              >
                <User className="w-4 h-4 mr-2" /> Profil Jurulatih
              </button>
            </div>
            {/* Mobile menu button */}
            <div className="md:hidden flex items-center space-x-4 text-sm">
               <button onClick={() => handleNav('home')} className={activeTab === 'home' ? 'text-red-500' : 'text-gray-400'}><Home className="w-5 h-5"/></button>
               <button onClick={() => handleNav('courses')} className={activeTab === 'courses' ? 'text-red-500' : 'text-gray-400'}><BookOpen className="w-5 h-5"/></button>
               <button onClick={() => handleNav('coach')} className={activeTab === 'coach' ? 'text-red-500' : 'text-gray-400'}><User className="w-5 h-5"/></button>
            </div>
          </div>
        </div>
      </nav>

{/* MAIN CONTENT AREA */}
      <main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">

{/* --- HALAMAN: LAMAN UTAMA --- */}
        {activeTab === 'home' && (
          <div className="animate-fadeIn">
            <div className="text-center py-16 md:py-24">
              <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight mb-4 text-white">
                Revolusikan Bisnes Takaful dengan <br/>
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-red-600 to-red-800 drop-shadow-[0_0_15px_rgba(220,38,38,0.5)]">Teknologi AI</span>
              </h1>
              <p className="mt-4 text-lg md:text-xl text-gray-400 max-w-3xl mx-auto">
                Platform pembelajaran eksklusif untuk perunding Getakaful. Pelajari cara menggunakan AI untuk menghasilkan poster, video, laman web, dan muzik dengan pantas dan berkesan.
              </p>
              <div className="mt-10">
                <button 
                  onClick={() => handleNav('courses')}
                  className="bg-red-700/80 hover:bg-red-600 border border-red-500/50 backdrop-blur-md text-white font-bold py-3 px-8 rounded-full shadow-[0_0_20px_rgba(220,38,38,0.4)] transition-all duration-300 transform hover:-translate-y-1"
                >
                  Mula Belajar Sekarang
                </button>
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12 border-t border-white/5 pt-12">
              <div className="text-center p-6 liquid-glass-card rounded-2xl">
                <div className="inline-flex items-center justify-center w-12 h-12 bg-red-950/60 border border-red-900/50 text-red-500 rounded-full mb-4 shadow-[0_0_10px_rgba(220,38,38,0.3)]">
                  <PlayCircle />
                </div>
                <h3 className="text-xl font-semibold mb-2 text-white">Belajar Di Mana Jua</h3>
                <p className="text-gray-400 text-sm">Akses modul pembelajaran dari telefon pintar, tablet atau komputer anda 24/7.</p>
              </div>
              <div className="text-center p-6 liquid-glass-card rounded-2xl">
                <div className="inline-flex items-center justify-center w-12 h-12 bg-red-950/60 border border-red-900/50 text-red-500 rounded-full mb-4 shadow-[0_0_10px_rgba(220,38,38,0.3)]">
                  <CheckCircle />
                </div>
                <h3 className="text-xl font-semibold mb-2 text-white">Modul Praktikal</h3>
                <p className="text-gray-400 text-sm">Silibus yang direka khas untuk industri Takaful. Terus boleh dipraktikkan.</p>
              </div>
              <div className="text-center p-6 liquid-glass-card rounded-2xl">
                <div className="inline-flex items-center justify-center w-12 h-12 bg-red-950/60 border border-red-900/50 text-red-500 rounded-full mb-4 shadow-[0_0_10px_rgba(220,38,38,0.3)]">
                  <Lock />
                </div>
                <h3 className="text-xl font-semibold mb-2 text-white">Akses Eksklusif</h3>
                <p className="text-gray-400 text-sm">Setiap modul dilindungi kata laluan. Hanya untuk ejen berdaftar Getakaful.</p>
              </div>
            </div>
          </div>
        )}

{/* --- HALAMAN: KURSUS PEMBELAJARAN --- */}
        {activeTab === 'courses' && !viewingCourse && (
          <div className="animate-fadeIn">
            <h2 className="text-3xl font-bold mb-2 text-white">Modul Kursus AI</h2>
            <p className="text-gray-400 mb-8">Pilih modul untuk bermula. Anda memerlukan kata laluan untuk mengakses setiap kursus.</p>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {coursesData.map((course) => {
                const isUnlocked = unlockedCourses.includes(course.id);
                return (
                  <div 
                    key={course.id} 
                    onClick={() => handleCourseClick(course)}
                    className={`relative p-6 rounded-2xl transition-all duration-300 cursor-pointer overflow-hidden group
                      ${isUnlocked 
                        ? 'liquid-glass-card border-red-500/30 hover:border-red-500 hover:shadow-[0_0_20px_rgba(220,38,38,0.4)]' 
                        : 'bg-black/40 backdrop-blur-md border border-white/5 hover:border-white/20'}`}
                  >
                    <div className="flex justify-between items-start">
                      {course.icon}
                      <div className={`p-2 rounded-full border ${isUnlocked ? 'bg-red-900/40 border-red-500/30 text-red-500' : 'bg-white/5 border-white/5 text-gray-500'}`}>
                        {isUnlocked ? <Unlock className="w-5 h-5" /> : <Lock className="w-5 h-5" />}
                      </div>
                    </div>
                    <h3 className={`text-2xl font-bold mb-2 transition-colors ${isUnlocked ? 'text-white' : 'text-gray-300 group-hover:text-red-400'}`}>
                      {course.title}
                    </h3>
                    <p className="text-gray-400 text-sm mb-4">{course.description}</p>

<div className="mt-4 flex items-center text-sm font-semibold">
                      {isUnlocked ? (
                        <span className="text-red-400 flex items-center">Teruskan Belajar <PlayCircle className="w-4 h-4 ml-1"/></span>
                      ) : (
                        <span className="text-gray-600 flex items-center">Modul Dikunci</span>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

{/* PAPARAN KANDUNGAN KURSUS */}
        {activeTab === 'courses' && viewingCourse && (
          <div className="animate-fadeIn max-w-4xl mx-auto">
            <button 
              onClick={() => setViewingCourse(null)}
              className="flex items-center text-gray-400 hover:text-red-400 mb-6 transition-colors"
            >
              <ArrowLeft className="w-4 h-4 mr-2" /> Kembali ke Senarai Kursus
            </button>

<div className="liquid-glass-card rounded-2xl p-6 md:p-10">
              <div className="flex items-center mb-6 border-b border-white/10 pb-6">
                <div className="mr-4 p-3 bg-red-950/40 border border-red-500/20 rounded-xl">
                  {viewingCourse.icon}
                </div>
                <div>
                  <span className="bg-red-950 border border-red-900 text-red-400 text-xs font-bold px-2 py-1 rounded mb-2 inline-block shadow-[0_0_10px_rgba(220,38,38,0.2)]">
                    BERJAYA DIAKSES
                  </span>
                  <h2 className="text-3xl font-bold text-white">{viewingCourse.title}</h2>
                </div>
              </div>

<div className="prose prose-invert max-w-none">
                <p className="text-lg leading-relaxed text-gray-300">
                  {viewingCourse.content}
                </p>

{/* PEMAIN VIDEO SCREENPAL / YOUTUBE */}
                <div className="mt-8">
                  {viewingCourse.customEmbed ? (
                    <div className="bg-black/80 rounded-xl overflow-hidden border border-white/10 shadow-[0_0_15px_rgba(0,0,0,0.8)]">
                      {viewingCourse.customEmbed}
                    </div>
                  ) : viewingCourse.videoUrl ? (
                    <div className="bg-black/80 rounded-xl overflow-hidden aspect-video relative flex items-center justify-center border border-white/10 shadow-[0_0_15px_rgba(0,0,0,0.8)]">
                      <iframe 
                          className="absolute top-0 left-0 w-full h-full"
                          src={viewingCourse.videoUrl} 
                          title={`Video Pembelajaran ${viewingCourse.title}`} 
                          frameBorder="0" 
                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                          allowFullScreen
                      ></iframe>
                    </div>
                  ) : (
                    <div className="bg-black/80 rounded-xl overflow-hidden aspect-video relative flex items-center justify-center border border-white/10 shadow-[0_0_15px_rgba(0,0,0,0.8)]">
                       <div className="text-center p-6">
                          <PlayCircle className="w-16 h-16 text-gray-600 mx-auto mb-4 opacity-50" />
                          <p className="text-gray-500 font-mono text-sm">Video Akan Datang</p>
                       </div>
                    </div>
                  )}
                </div>

<div className="mt-8 p-5 bg-red-950/30 border border-red-900/50 rounded-lg">
                  <h4 className="font-bold text-red-400 mb-2">Tugasan Modul:</h4>
                  <ul className="list-disc pl-5 text-gray-300 space-y-1 text-sm">
                    <li>Tonton video sehingga tamat.</li>
                    <li>Sediakan peralatan dan perisian yang disarankan.</li>
                    <li>Cuba praktikkan dan kongsi hasil di group support Getakaful.</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        )}

{/* --- HALAMAN: PROFIL JURULATIH --- */}
        {activeTab === 'coach' && (
          <div className="animate-fadeIn max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold mb-8 text-center text-white drop-shadow-md">Profil Jurulatih</h2>

<div className="liquid-glass-card rounded-3xl overflow-hidden flex flex-col md:flex-row border-white/10">
              <div className="md:w-2/5 bg-black/40 p-8 flex flex-col items-center justify-center border-r border-white/5 relative">
                {/* Glow di belakang Avatar */}
                <div className="absolute w-32 h-32 bg-red-600/20 blur-[50px] rounded-full z-0"></div>
                <div className="w-40 h-40 bg-white/5 backdrop-blur-md rounded-full border border-red-500/30 shadow-[0_0_30px_rgba(220,38,38,0.3)] overflow-hidden mb-4 flex items-center justify-center relative z-10">
                  <User className="w-20 h-20 text-red-500/80" />
                </div>
                <h3 className="text-2xl font-bold text-white text-center relative z-10">Najib Nasarudin</h3>
                <p className="text-red-500 font-medium text-center text-sm mt-1 relative z-10">Pakar Pemasaran AI Takaful</p>
              </div>
              <div className="md:w-3/5 p-8 md:p-10">
                <h4 className="text-xl font-semibold mb-4 border-b border-white/10 pb-2 text-white">Latar Belakang</h4>
                <p className="text-gray-300 mb-6 leading-relaxed">
                  Najib Nasarudin mempunyai pengalaman lebih 10 tahun dalam industri insurans dan Takaful. Beliau mula mengintegrasikan Kecerdasan Buatan (AI) dalam sistem pemasarannya semenjak tahun 2021 dan berjaya meningkatkan jualan kumpulannya sehingga 300%.
                </p>

<h4 className="text-xl font-semibold mb-4 border-b border-white/10 pb-2 text-white">Kepakaran</h4>
                <div className="flex flex-wrap gap-2">
                  <span className="bg-red-950/40 border border-red-900/50 text-red-200 px-3 py-1 rounded-full text-sm">Prompt Engineering</span>
                  <span className="bg-red-950/40 border border-red-900/50 text-red-200 px-3 py-1 rounded-full text-sm">AI Video Generation</span>
                  <span className="bg-red-950/40 border border-red-900/50 text-red-200 px-3 py-1 rounded-full text-sm">Automasi Laman Web</span>
                  <span className="bg-red-950/40 border border-red-900/50 text-red-200 px-3 py-1 rounded-full text-sm">Pemasaran Digital</span>
                </div>

<div className="mt-8 pt-6 border-t border-white/10">
                  <button className="w-full bg-red-700/80 hover:bg-red-600 border border-red-500/50 backdrop-blur-md text-white shadow-[0_0_15px_rgba(220,38,38,0.2)] font-medium py-3 px-4 rounded-lg transition-all duration-300">
                    Hubungi Jurulatih (WhatsApp)
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

</main>

{/* FOOTER */}
      <footer className="border-t border-white/5 bg-black/40 backdrop-blur-md mt-20 py-8 text-center text-gray-500 text-sm relative z-10">
        <p>© 2026 Getakaful Ai Learning Platform. Hak cipta terpelihara.</p>
      </footer>

{/* MODAL KATA LALUAN */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-fadeIn">
          <div className="liquid-glass-card border-red-700/50 rounded-2xl w-full max-w-md shadow-[0_0_40px_rgba(220,38,38,0.2)] overflow-hidden transform transition-all relative">
            <div className="absolute top-0 right-0 w-32 h-32 bg-red-600/10 blur-[50px] rounded-full pointer-events-none"></div>

<div className="p-6 relative z-10">
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-2xl font-bold flex items-center text-white">
                  <Lock className="w-6 h-6 mr-2 text-red-500" /> Buka Modul
                </h3>
                <button onClick={() => setIsModalOpen(false)} className="text-gray-400 hover:text-white transition-colors">
                  <X className="w-6 h-6" />
                </button>
              </div>

<p className="text-gray-300 mb-6">
                Masukkan kata laluan untuk mengakses modul <span className="font-bold text-red-500 drop-shadow-[0_0_5px_rgba(220,38,38,0.8)]">{selectedCourseForUnlock?.title}</span>.
              </p>

<form onSubmit={handleUnlock}>
                <div className="mb-6">
                  <input
                    type="password"
                    value={passwordInput}
                    onChange={(e) => setPasswordInput(e.target.value)}
                    placeholder="Kata Laluan Modul..."
                    className={`w-full px-4 py-3 rounded-lg bg-black/50 backdrop-blur-sm border focus:outline-none focus:ring-2 transition-colors text-white placeholder-gray-500
                      ${passwordError ? 'border-red-500 focus:ring-red-500/50 bg-red-950/20' : 'border-white/10 focus:border-red-500 focus:ring-red-500/30'}`}
                    autoFocus
                  />
                  {passwordError && (
                    <p className="text-red-400 text-sm mt-2 animate-bounce">Kata laluan tidak sah. Sila cuba lagi.</p>
                  )}
                </div>
                <button
                  type="submit"
                  className="w-full bg-gradient-to-r from-red-700 to-red-900 hover:from-red-600 hover:to-red-800 border border-red-500/50 text-white font-bold py-3 px-4 rounded-lg shadow-[0_0_15px_rgba(220,38,38,0.4)] transition-all"
                >
                  Sahkan & Buka
                </button>
              </form>
            </div>
          </div>
        </div>
      )}

{/* GLOBAL STYLES (Font & Animations) */}
      <style dangerouslySetInnerHTML={{__html: `
        @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap');

.font-rubik {
          font-family: 'Rubik', sans-serif;
        }

@keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.4s ease-out forwards;
        }

/* Kelas Kesan Liquid Glassmorphism */
        .liquid-glass-card {
          background: linear-gradient(145deg, rgba(30,0,0,0.4) 0%, rgba(10,0,0,0.8) 100%);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border-top: 1px solid rgba(255, 50, 50, 0.15);
          border-left: 1px solid rgba(255, 50, 50, 0.1);
          border-right: 1px solid rgba(0, 0, 0, 0.5);
          border-bottom: 1px solid rgba(0, 0, 0, 0.5);
          box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
        }
      `}} />
    </div>
  );
}

```