import React, { useEffect, useMemo, useState } from 'react';
import { puzzleService } from '../services/puzzleService';
import {
  Archive, Search, FileText, LockKeyhole, CheckCircle2,
  AlertCircle, Copy, Check, Barcode, ArrowRight, Clock
} from 'lucide-react';

const ARCHIVES = ['PRIME', 'ECHO', 'MIRROR'];

const archiveTone = {
  PRIME: { color: '#1687ff', label: 'BLUE DIMENSION (ORIGINAL SERVER)' },
  ECHO: { color: '#b45cff', label: 'VIOLET DIMENSION (+6 MIN DECALAJ)' },
  MIRROR: { color: '#ff3b9d', label: 'MAGENTA DIMENSION (RAPORT FALS AUTOMAT)' },
};

export default function Level1({ onNextLevel }) {
  const [manifest, setManifest] = useState(null);
  const [contents, setContents] = useState({});
  const [activeTab, setActiveTab] = useState('docs'); // 'docs' | 'barcodes'
  const [selectedCopy, setSelectedCopy] = useState('PRIME');
  const [selectedDoc, setSelectedDoc] = useState(null);
  const [query, setQuery] = useState('');
  const [barcodeQuery, setBarcodeQuery] = useState('');
  const [category, setCategory] = useState('Toate');
  const [solution, setSolution] = useState('');
  const [notice, setNotice] = useState(null);
  const [loading, setLoading] = useState(true);
  const [checking, setChecking] = useState(false);
  const [copied, setCopied] = useState(false);
  const [scannedBarcode, setScannedBarcode] = useState(null);

  useEffect(() => {
    puzzleService.startPuzzle(1);
    let alive = true;
    fetch('/ghost-archive/manifest.json')
      .then((r) => {
        if (!r.ok) throw new Error('Manifestul arhivei nu a putut fi încărcat.');
        return r.json();
      })
      .then(async (data) => {
        if (!alive) return;
        setManifest(data);
        const loaded = {};
        await Promise.all(data.documents.map(async (doc) => {
          try {
            const response = await fetch(`/ghost-archive/${doc.file}`);
            loaded[doc.id] = response.ok ? await response.text() : '[Document neîncărcat]';
          } catch {
            loaded[doc.id] = '[Fișier indisponibil]';
          }
        }));
        if (!alive) return;
        setContents(loaded);
        setSelectedDoc(data.documents[0] || null);
        setLoading(false);
      })
      .catch((err) => {
        if (alive) {
          setNotice({ type: 'error', text: err.message || 'Eroare la încărcarea arhivei.' });
          setLoading(false);
        }
      });
    return () => { alive = false; };
  }, []);

  const docsForCopy = useMemo(() => {
    if (!manifest) return [];
    return manifest.documents.filter((doc) => doc.copy === selectedCopy);
  }, [manifest, selectedCopy]);

  const categories = useMemo(() => {
    return ['Toate', ...new Set(docsForCopy.map((doc) => doc.category))];
  }, [docsForCopy]);

  const visibleDocs = useMemo(() => {
    const q = query.trim().toLowerCase();
    return docsForCopy.filter((doc) => {
      const matchesCategory = category === 'Toate' || doc.category === category;
      const matchesQuery = !q || `${doc.title} ${doc.id} ${doc.date} ${doc.category}`.toLowerCase().includes(q);
      return matchesCategory && matchesQuery;
    });
  }, [docsForCopy, category, query]);

  const visibleBarcodes = useMemo(() => {
    if (!manifest?.barcodes) return [];
    const q = barcodeQuery.trim().toLowerCase();
    if (!q) return manifest.barcodes;
    return manifest.barcodes.filter((b) => 
      b.id.toLowerCase().includes(q) ||
      b.code.includes(q) ||
      b.asset.toLowerCase().includes(q) ||
      b.location.toLowerCase().includes(q)
    );
  }, [manifest, barcodeQuery]);

  const handleCopy = async () => {
    if (!selectedDoc) return;
    try {
      await navigator.clipboard.writeText(contents[selectedDoc.id] || '');
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1600);
    } catch {
      setNotice({ type: 'error', text: 'Copierea nu este disponibilă în acest browser.' });
    }
  };

  const handleVerify = async (event) => {
    if (event) event.preventDefault();
    const clean = solution.trim().toUpperCase().replace(/\s+/g, '');
    if (!clean) {
      setNotice({ type: 'error', text: 'Introduceți codul compus din cele 5 fragmente deduse.' });
      return;
    }

    setChecking(true);
    setNotice(null);

    const isValid = 
      clean === 'CHRONO-CASE9-GA01-SIG04-VENN' || 
      clean === 'CHRONOCASE9GA01SIG04VENN';

    try {
      const result = await puzzleService.checkSolution(1, clean);
      if (result.success || isValid) {
        setNotice({
          type: 'success',
          text: 'Secvență logică validată! Arhiva GA-01 a fost restaurată. Trecere la Nivelul 2...'
        });
        window.setTimeout(() => onNextLevel(2), 1300);
      } else {
        setNotice({
          type: 'error',
          text: result.error || 'Cod incorect. Consultați memoriul #28 pentru ordinea corectă a celor 5 piese.'
        });
      }
    } catch {
      if (isValid) {
        setNotice({
          type: 'success',
          text: 'Arhivă validată cu succes! Trecere la Nivelul 2...'
        });
        window.setTimeout(() => onNextLevel(2), 1300);
      } else {
        setNotice({
          type: 'error',
          text: 'Eroare la verificare. Revedeți poziționarea celor 5 fragmente.'
        });
      }
    } finally {
      setChecking(false);
    }
  };

  if (loading) {
    return (
      <div className="main-content">
        <div className="glass-card" style={{ textAlign: 'center', padding: '3.5rem' }}>
          <Clock size={36} className="spin" color="#38bdf8" style={{ margin: '0 auto 1rem' }} />
          <h2 style={{ color: '#fff', fontSize: '1.4rem' }}>Se restaurează dosarul de investigație...</h2>
          <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem', marginTop: '0.4rem' }}>
            Se indexează dosarele, registrele martor și catalogul codurilor de bare
          </p>
        </div>
      </div>
    );
  }
function App() {
    return <h1>Salut, acum merge JSX-ul!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
  const currentText = selectedDoc ? (contents[selectedDoc.id] ?? '') : '';

  return (
    <div className="main-content" style={{ maxWidth: 1220 }}>
      <div className="glass-card ga-shell">
        {/* Antet dosar curat */}
        <div className="ga-header" style={{ marginBottom: '1.5rem' }}>
          <div>
           
            <h1 className="cosmic-title" style={{ fontSize: '2.4rem', margin: '0.3rem 0' }}>
              THE GHOST ARCHIVE
            </h1>
            <p className="ga-intro" style={{ maxWidth: '820px', color: 'var(--text-muted)', fontSize: '0.92rem', lineHeight: '1.6' }}>
              Arhiva centrală a fost compromisă înainte de evacuare. Analizează dosarele, identifică etichetele corespunzătoare și reconstruiește cheia de deblocare conform însemnărilor arhivistului.
            </p>
          </div>
        </div>

        {/* Bara Navigare Tab-uri */}
        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem', borderBottom: '1px solid var(--border-glass)', paddingBottom: '0.75rem' }}>
          <button
            type="button"
            className="btn-secondary"
            style={{
              padding: '0.55rem 1.25rem',
              fontSize: '0.88rem',
              background: activeTab === 'docs' ? 'rgba(56, 189, 248, 0.2)' : 'rgba(255, 255, 255, 0.04)',
              borderColor: activeTab === 'docs' ? 'var(--cyber-cyan)' : 'var(--border-glass)',
              color: activeTab === 'docs' ? '#fff' : 'var(--text-muted)'
            }}
            onClick={() => setActiveTab('docs')}
          >
            <FileText size={16} /> Documente & Registre ({manifest.documents.length})
          </button>

          <button
            type="button"
            className="btn-secondary"
            style={{
              padding: '0.55rem 1.25rem',
              fontSize: '0.88rem',
              background: activeTab === 'barcodes' ? 'rgba(163, 230, 53, 0.2)' : 'rgba(255, 255, 255, 0.04)',
              borderColor: activeTab === 'barcodes' ? 'var(--cyber-lime)' : 'var(--border-glass)',
              color: activeTab === 'barcodes' ? '#fff' : 'var(--text-muted)'
            }}
            onClick={() => setActiveTab('barcodes')}
          >
            <Barcode size={16} /> Catalog Coduri de Bare ({manifest.barcodes?.length || 35})
          </button>
        </div>

        {/* TAB 1: DOCUMENTE & ARHIVĂ */}
        {activeTab === 'docs' && (
          <div className="ga-layout" style={{ display: 'grid', gridTemplateColumns: 'minmax(280px, 360px) minmax(0, 1fr)', gap: '1.25rem' }}>
            <section className="ga-panel" style={{ background: 'rgba(2, 6, 23, 0.65)', borderRadius: '1rem', border: '1px solid var(--border-glass)', overflow: 'hidden' }}>
              <div style={{ padding: '1rem', borderBottom: '1px solid var(--border-glass)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontWeight: 800, fontSize: '0.9rem', display: 'flex', alignItems: 'center', gap: '0.5rem', color: '#fff' }}>
                  <Archive size={16} color="#38bdf8" /> EXPORTURI DISPONIBILE
                </span>
                <span style={{ fontSize: '0.72rem', color: '#94a3b8' }}>{docsForCopy.length} DOCUMENTE</span>
              </div>

              <div style={{ display: 'flex', gap: '0.4rem', padding: '0.85rem 1rem 0', flexWrap: 'wrap' }}>
                {ARCHIVES.map((copy) => (
                  <button
                    key={copy}
                    type="button"
                    style={{
                      padding: '0.45rem 0.85rem',
                      borderRadius: '0.5rem',
                      border: `1px solid ${selectedCopy === copy ? archiveTone[copy].color : 'rgba(255, 255, 255, 0.15)'}`,
                      background: selectedCopy === copy ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
                      color: selectedCopy === copy ? archiveTone[copy].color : 'var(--text-muted)',
                      fontWeight: 'bold',
                      fontSize: '0.75rem',
                      cursor: 'pointer'
                    }}
                    onClick={() => { setSelectedCopy(copy); setCategory('Toate'); setQuery(''); }}
                  >
                    {copy}
                  </button>
                ))}
              </div>

              <div style={{ padding: '0.5rem 1rem', fontSize: '0.7rem', color: archiveTone[selectedCopy].color, fontWeight: '600' }}>
                {archiveTone[selectedCopy].label}
              </div>

              <div style={{ padding: '0 1rem 0.5rem' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', background: 'rgba(255, 255, 255, 0.05)', padding: '0.5rem 0.75rem', borderRadius: '0.5rem', border: '1px solid var(--border-glass)' }}>
                  <Search size={14} color="#94a3b8" />
                  <input
                    type="text"
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder="Caută în dosar..."
                    style={{ background: 'transparent', border: 'none', outline: 'none', color: '#fff', fontSize: '0.85rem', width: '100%' }}
                  />
                </div>
              </div>

              <div style={{ padding: '0 1rem 0.75rem' }}>
                <select
                  value={category}
                  onChange={(e) => setCategory(e.target.value)}
                  style={{ width: '100%', padding: '0.45rem', borderRadius: '0.5rem', background: '#020617', border: '1px solid var(--border-glass)', color: '#fff', fontSize: '0.82rem' }}
                >
                  {categories.map((c) => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>

              <div style={{ maxHeight: '480px', overflowY: 'auto', padding: '0 0.5rem 0.75rem' }}>
                {visibleDocs.map((doc) => {
                  const isSelected = selectedDoc?.id === doc.id;
                  return (
                    <button
                      key={doc.id}
                      type="button"
                      onClick={() => setSelectedDoc(doc)}
                      style={{
                        width: '100%',
                        textAlign: 'left',
                        padding: '0.65rem 0.75rem',
                        borderRadius: '0.5rem',
                        marginBottom: '0.35rem',
                        border: isSelected ? `1px solid ${archiveTone[selectedCopy].color}` : '1px solid transparent',
                        background: isSelected ? 'rgba(56, 189, 248, 0.12)' : 'transparent',
                        color: '#fff',
                        display: 'flex',
                        gap: '0.6rem',
                        alignItems: 'flex-start',
                        cursor: 'pointer'
                      }}
                    >
                      <FileText size={16} color={archiveTone[selectedCopy].color} style={{ marginTop: '0.15rem', flexShrink: 0 }} />
                      <div style={{ overflow: 'hidden' }}>
                        <div style={{ fontSize: '0.82rem', fontWeight: '600', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
                          {doc.title}
                        </div>
                        <div style={{ fontSize: '0.7rem', color: '#94a3b8' }}>
                          {doc.id} • {doc.category}
                        </div>
                      </div>
                    </button>
                  );
                })}
              </div>
            </section>

            <section className="ga-panel" style={{ background: 'rgba(2, 6, 23, 0.65)', borderRadius: '1rem', border: '1px solid var(--border-glass)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ padding: '1rem', borderBottom: '1px solid var(--border-glass)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '0.5rem' }}>
                <div>
                  <div style={{ fontSize: '0.75rem', color: '#94a3b8', fontFamily: 'var(--font-mono)' }}>
                    {selectedDoc?.id || 'GA-00'} // REVIZIE CERTIFICATĂ
                  </div>
                  <h3 style={{ fontSize: '1.05rem', color: '#fff', marginTop: '0.15rem' }}>
                    {selectedDoc?.title || 'Niciun document selectat'}
                  </h3>
                  <div style={{ fontSize: '0.72rem', color: archiveTone[selectedCopy].color, marginTop: '0.2rem' }}>
                    {selectedDoc?.date} • Copia: {selectedDoc?.copy}
                  </div>
                </div>

                <button
                  type="button"
                  className="btn-secondary"
                  onClick={handleCopy}
                  disabled={!selectedDoc}
                  style={{ padding: '0.4rem 0.8rem', fontSize: '0.78rem' }}
                >
                  {copied ? <Check size={14} color="#a3e635" /> : <Copy size={14} />} {copied ? 'Copiat' : 'Copiază Text'}
                </button>
              </div>

              <div
                style={{
                  padding: '1.5rem',
                  flex: 1,
                  minHeight: '380px',
                  maxHeight: '560px',
                  overflowY: 'auto',
                  fontFamily: 'var(--font-mono)',
                  fontSize: '0.85rem',
                  lineHeight: '1.75',
                  color: '#dbeafe',
                  whiteSpace: 'pre-wrap'
                }}
              >
                {currentText.length > 0 ? currentText : <span style={{ color: '#64748b', fontStyle: 'italic' }}>[ANEXĂ FĂRĂ CONȚINUT FIZIC — existența este confirmată de trimiterile din registrele de audit]</span>}
              </div>
            </section>
          </div>
        )}

        {/* TAB 2: CATALOG CODURI DE BARE */}
        {activeTab === 'barcodes' && (
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem', marginBottom: '1.25rem', flexWrap: 'wrap' }}>
              <div>
                <h3 style={{ fontSize: '1.15rem', color: '#fff' }}>Catalogul Etichetelor și Codurilor de Bare</h3>
                <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>
                  Apasă pe o etichetă pentru a citi identificatorul de stocare (payload-ul) înregistrat în sistem.
                </p>
              </div>

              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', background: 'rgba(255, 255, 255, 0.05)', padding: '0.5rem 0.85rem', borderRadius: '0.5rem', border: '1px solid var(--border-glass)', minWidth: '260px' }}>
                <Search size={14} color="#94a3b8" />
                <input
                  type="text"
                  value={barcodeQuery}
                  onChange={(e) => setBarcodeQuery(e.target.value)}
                  placeholder="Caută etichetă..."
                  style={{ background: 'transparent', border: 'none', outline: 'none', color: '#fff', fontSize: '0.85rem', width: '100%' }}
                />
              </div>
            </div>

            {scannedBarcode && (
              <div style={{ background: 'rgba(56, 189, 248, 0.12)', border: '1px solid var(--cyber-cyan)', borderRadius: '1rem', padding: '1.25rem', marginBottom: '1.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem' }}>
                <div>
                  <div style={{ fontSize: '0.75rem', color: 'var(--cyber-cyan)', fontWeight: 'bold' }}>
                    ETICHETĂ SCANATĂ
                  </div>
                  <div style={{ fontSize: '1.1rem', color: '#fff', fontWeight: 'bold' }}>
                    {scannedBarcode.id} — {scannedBarcode.asset}
                  </div>
                  <div style={{ fontSize: '0.8rem', color: '#cbd5e1' }}>
                    Locație: {scannedBarcode.location} | EAN: <code>{scannedBarcode.code}</code>
                  </div>
                </div>

                <div style={{ background: '#020617', padding: '0.6rem 1.2rem', borderRadius: '0.6rem', border: '1px solid rgba(163, 230, 53, 0.4)', textAlign: 'right' }}>
                  <span style={{ fontSize: '0.7rem', color: '#94a3b8', display: 'block' }}>IDENTIFICATOR MEMORAT:</span>
                  <strong style={{ color: 'var(--cyber-lime)', fontFamily: 'var(--font-mono)', fontSize: '1.25rem', letterSpacing: '0.1em' }}>
                    {scannedBarcode.payload}
                  </strong>
                </div>
              </div>
            )}

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: '0.85rem', maxHeight: '520px', overflowY: 'auto' }}>
              {visibleBarcodes.map((item) => {
                const isSelected = scannedBarcode?.id === item.id;
                return (
                  <div
                    key={item.id}
                    onClick={() => setScannedBarcode(item)}
                    style={{
                      background: isSelected ? 'rgba(56, 189, 248, 0.15)' : 'rgba(255, 255, 255, 0.03)',
                      border: isSelected ? '1px solid var(--cyber-cyan)' : '1px solid var(--border-glass)',
                      borderRadius: '0.75rem',
                      padding: '1rem',
                      cursor: 'pointer',
                      transition: 'all 0.2s ease'
                    }}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.4rem' }}>
                      <span style={{ fontWeight: 'bold', color: 'var(--cyber-cyan)', fontFamily: 'var(--font-mono)', fontSize: '0.85rem' }}>
                        {item.id}
                      </span>
                      <span style={{ fontSize: '0.72rem', color: '#94a3b8' }}>{item.location}</span>
                    </div>

                    <div style={{ background: '#ffffff', borderRadius: '0.35rem', padding: '0.4rem', margin: '0.5rem 0', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                      <div style={{ display: 'flex', gap: '2px', height: '22px', alignItems: 'center', width: '90%', justifyContent: 'center' }}>
                        {[...item.code].map((digit, i) => (
                          <div
                            key={i}
                            style={{
                              width: (parseInt(digit, 10) % 3 === 0) ? '3px' : (parseInt(digit, 10) % 2 === 0) ? '2px' : '1px',
                              height: '100%',
                              background: '#000000'
                            }}
                          />
                        ))}
                      </div>
                      <span style={{ color: '#000', fontSize: '0.65rem', fontFamily: 'var(--font-mono)', letterSpacing: '0.1em' }}>
                        {item.code}
                      </span>
                    </div>

                    <div style={{ fontSize: '0.82rem', color: '#fff', fontWeight: '500', marginTop: '0.3rem' }}>
                      {item.asset}
                    </div>

                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '0.5rem', paddingTop: '0.4rem', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
                      <span style={{ fontSize: '0.7rem', color: '#94a3b8' }}>Apasă pentru scanare</span>
                      <span style={{ fontSize: '0.75rem', color: 'var(--cyber-lime)', fontFamily: 'var(--font-mono)', fontWeight: 'bold' }}>
                        {isSelected ? `✓ ${item.payload}` : 'CITEȘTE'}
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* SECȚIUNEA DE INTRODUCERE COD UNIC FINAL */}
        <div style={{ marginTop: '2rem', borderTop: '1px solid var(--border-glass)', paddingTop: '1.5rem' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontWeight: 800, marginBottom: '0.4rem', color: '#fff' }}>
            <LockKeyhole size={18} color="#38bdf8" /> INTRODUCERE COD RECONSTRUCȚIE ARHIVĂ
          </div>
        

          <form onSubmit={handleVerify}>
            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', gap: '0.75rem' }}>
              <input
                type="text"
                value={solution}
                onChange={(e) => setSolution(e.target.value)}
                placeholder="Introdu codul complet..."
                autoComplete="off"
                spellCheck="false"
                style={{
                  padding: '0.85rem 1.25rem',
                  borderRadius: '0.6rem',
                  border: '1px solid var(--border-glass)',
                  background: 'rgba(2, 6, 23, 0.8)',
                  color: '#fff',
                  fontFamily: 'var(--font-mono)',
                  fontSize: '1.05rem',
                  letterSpacing: '0.08em'
                }}
              />
              <button
                type="submit"
                disabled={checking}
                className="btn-primary"
                style={{ padding: '0.85rem 1.8rem', fontSize: '1rem', whiteSpace: 'nowrap' }}
              >
                {checking ? 'Se verifică...' : 'Validează Codul'} <ArrowRight size={18} />
              </button>
            </div>

            {/* Explicare neutră a formatului cerut - direct sub casetă */}
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                flexWrap: 'wrap',
                gap: '0.5rem',
                marginTop: '0.65rem',
                fontSize: '0.82rem',
                color: '#94a3b8',
                background: 'rgba(56, 189, 248, 0.05)',
                border: '1px solid rgba(56, 189, 248, 0.2)',
                padding: '0.55rem 0.85rem',
                borderRadius: '0.5rem'
              }}
            >
              <span style={{ color: 'var(--cyber-cyan)', fontWeight: 'bold' }}>
                ℹ Format cerut:
              </span>
              <span>
                Cele 5 fragmente scrise cu majuscule, despărțite prin cratimă (Exemplu structural:
              </span>
              <code style={{ color: '#fff', background: '#020617', padding: '0.15rem 0.4rem', borderRadius: '0.3rem', fontFamily: 'var(--font-mono)' }}>
                PARTE1-PARTE2-PARTE3-PARTE4-PARTE5
              </code>
              <span>)</span>
            </div>
          </form>

          {notice && (
            <div
              className="ga-notice"
              style={{
                marginTop: '1rem',
                padding: '0.9rem 1.25rem',
                borderRadius: '0.75rem',
                display: 'flex',
                alignItems: 'center',
                gap: '0.6rem',
                background: notice.type === 'success' ? 'rgba(34, 197, 94, 0.15)' : 'rgba(244, 63, 94, 0.15)',
                border: `1px solid ${notice.type === 'success' ? '#22c55e' : '#f43f5e'}`,
                color: notice.type === 'success' ? '#86efac' : '#fca5a5'
              }}
            >
              {notice.type === 'success' ? <CheckCircle2 size={18} /> : <AlertCircle size={18} />}
              <span>{notice.text}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}