import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  query, 
  onSnapshot, 
  orderBy,
  doc, 
  setDoc,
  getDoc 
} from 'firebase/firestore';
import { 
  getAuth, 
  signInAnonymously, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  FileText, 
  Users, 
  HelpCircle, 
  Download, 
  PlusCircle, 
  LogOut, 
  LayoutDashboard,
  ShieldCheck,
  ChevronRight,
  MapPin,
  Navigation
} from 'lucide-react';

// --- CONFIGURATION ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'rever-bridge-portal';

const ADMIN_ID = "RB-ADMIN-99"; // Set your admin ID here

export default function App() {
  const [user, setUser] = useState(null);
  const [agentId, setAgentId] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [activeTab, setActiveTab] = useState('dashboard');
  const [leads, setLeads] = useState([]);
  const [locationLogs, setLocationLogs] = useState([]);
  const [loading, setLoading] = useState(false);
  const [locLoading, setLocLoading] = useState(false);
  const [toast, setToast] = useState({ show: false, message: '', type: 'info' });

  // Form States
  const [leadForm, setLeadForm] = useState({
    clientName: '',
    clientPhone: '',
    loanAmount: '',
    loanType: 'GRZ Loan',
    notes: ''
  });

  // 1. Auth & Initial Load
  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        try {
          // Note: In some environments this might be required
          // await signInWithCustomToken(auth, __initial_auth_token);
          await signInAnonymously(auth);
        } catch (e) {
          await signInAnonymously(auth);
        }
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (currUser) => {
      setUser(currUser);
    });
    return () => unsubscribe();
  }, []);

  // 2. Fetch Data (Leads & Location Logs)
  useEffect(() => {
    if (!user || !isLoggedIn) return;

    // Fetch Leads
    const leadsRef = collection(db, 'artifacts', appId, 'public', 'data', 'leads');
    const unsubLeads = onSnapshot(leadsRef, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      if (agentId !== ADMIN_ID) {
        setLeads(data.filter(l => l.agentId === agentId));
      } else {
        setLeads(data);
      }
    });

    // Fetch Location Logs
    const logsRef = collection(db, 'artifacts', appId, 'public', 'data', 'location_logs');
    const unsubLogs = onSnapshot(logsRef, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      // Sort in JS because simple collection query is safer
      const sortedData = data.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
      
      if (agentId !== ADMIN_ID) {
        setLocationLogs(sortedData.filter(l => l.agentId === agentId));
      } else {
        setLocationLogs(sortedData);
      }
    });

    return () => {
      unsubLeads();
      unsubLogs();
    };
  }, [user, isLoggedIn, agentId]);

  const showToast = (message, type = 'info') => {
    setToast({ show: true, message, type });
    setTimeout(() => setToast({ show: false, message: '', type: 'info' }), 4000);
  };

  const handleLogin = (e) => {
    e.preventDefault();
    if (agentId.trim().length < 4) {
      showToast("Please enter a valid Agent ID", "error");
      return;
    }
    setIsLoggedIn(true);
    showToast(`Welcome back, Agent ${agentId}`, "success");
  };

  const submitLead = async (e) => {
    e.preventDefault();
    if (!user) return;
    setLoading(true);

    try {
      const leadsRef = collection(db, 'artifacts', appId, 'public', 'data', 'leads');
      await addDoc(leadsRef, {
        ...leadForm,
        agentId: agentId,
        status: 'Pending',
        timestamp: new Date().toISOString(),
      });
      
      showToast("Loan Lead submitted successfully!", "success");
      setLeadForm({ clientName: '', clientPhone: '', loanAmount: '', loanType: 'GRZ Loan', notes: '' });
      setActiveTab('dashboard');
    } catch (err) {
      showToast("Error submitting lead. Try again.", "error");
    } finally {
      setLoading(false);
    }
  };

  const handleCheckIn = () => {
    if (!navigator.geolocation) {
      showToast("Geolocation is not supported by your browser.", "error");
      return;
    }

    setLocLoading(true);
    navigator.geolocation.getCurrentPosition(async (position) => {
      try {
        const { latitude, longitude } = position.coords;
        const logsRef = collection(db, 'artifacts', appId, 'public', 'data', 'location_logs');
        
        await addDoc(logsRef, {
          agentId,
          lat: latitude,
          lng: longitude,
          timestamp: new Date().toISOString(),
          mapLink: `https://www.google.com/maps?q=${latitude},${longitude}`
        });

        showToast("Location check-in successful!", "success");
      } catch (err) {
        showToast("Failed to save location data.", "error");
      } finally {
        setLocLoading(false);
      }
    }, (error) => {
      showToast("Permission denied. Enable GPS to check in.", "error");
      setLocLoading(false);
    });
  };

  if (!isLoggedIn) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center p-4">
        <div className="max-w-md w-full bg-white rounded-3xl shadow-2xl border border-slate-100 overflow-hidden animate-in fade-in zoom-in duration-300">
          <div className="bg-[#004aad] p-8 text-center">
            <h1 className="text-2xl font-bold text-white uppercase tracking-tight">Agent Portal</h1>
            <p className="text-blue-100 text-xs mt-1 uppercase tracking-widest">Rever-Bridge Financial Services Ltd</p>
          </div>
          <form onSubmit={handleLogin} className="p-8 space-y-6">
            <div>
              <label className="block text-xs font-bold text-slate-500 uppercase mb-2">Enter Agent ID</label>
              <input 
                type="text" 
                value={agentId}
                onChange={(e) => setAgentId(e.target.value.toUpperCase())}
                placeholder="RB-XXXX"
                className="w-full p-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-[#004aad] outline-none font-bold text-slate-700 transition"
                required
              />
            </div>
            <button className="w-full py-4 bg-[#fca311] hover:bg-[#e0920f] text-white font-bold rounded-2xl shadow-lg transition transform hover:-translate-y-1">
              Login to Portal
            </button>
            <p className="text-[10px] text-center text-slate-400 uppercase tracking-widest">Authorized Access Only</p>
          </form>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 flex">
      {/* Sidebar - Desktop */}
      <aside className="hidden lg:flex flex-col w-64 bg-[#004aad] text-white p-6 fixed h-full">
        <div className="mb-10">
          <h2 className="font-bold text-lg uppercase">Rever-Bridge</h2>
          <p className="text-[10px] text-blue-200 uppercase tracking-widest">Agent Console</p>
        </div>
        
        <nav className="space-y-2 flex-1 overflow-y-auto">
          <NavItem active={activeTab === 'dashboard'} onClick={() => setActiveTab('dashboard')} icon={<LayoutDashboard size={20}/>} label="Dashboard" />
          <NavItem active={activeTab === 'new-lead'} onClick={() => setActiveTab('new-lead')} icon={<PlusCircle size={20}/>} label="Submit Lead" />
          <NavItem active={activeTab === 'field-logs'} onClick={() => setActiveTab('field-logs')} icon={<MapPin size={20}/>} label="Field Logs" />
          <NavItem active={activeTab === 'resources'} onClick={() => setActiveTab('resources')} icon={<Download size={20}/>} label="Resources" />
          <NavItem active={activeTab === 'faq'} onClick={() => setActiveTab('faq')} icon={<HelpCircle size={20}/>} label="Agent FAQ" />
          {agentId === ADMIN_ID && (
            <NavItem active={activeTab === 'admin'} onClick={() => setActiveTab('admin')} icon={<ShieldCheck size={20}/>} label="Admin Monitoring" />
          )}
        </nav>

        <button onClick={() => setIsLoggedIn(false)} className="flex items-center gap-3 p-3 text-blue-200 hover:text-white transition mt-auto border-t border-blue-800 pt-6">
          <LogOut size={20} /> <span className="font-bold text-sm uppercase">Logout</span>
        </button>
      </aside>

      {/* Main Content */}
      <main className="flex-1 lg:ml-64 min-h-screen p-4 sm:p-8">
        {/* Header */}
        <header className="flex justify-between items-center mb-8">
          <div>
            <h1 className="text-2xl font-bold text-slate-800 capitalize">{activeTab.replace('-', ' ')}</h1>
            <p className="text-xs text-slate-500">Welcome back, Agent <span className="font-bold text-[#004aad]">{agentId}</span></p>
          </div>
          <div className="lg:hidden flex gap-2">
             <button onClick={() => setIsLoggedIn(false)} className="p-2 bg-slate-200 rounded-lg"><LogOut size={20}/></button>
          </div>
        </header>

        {/* Dashboard View */}
        {activeTab === 'dashboard' && (
          <div className="space-y-6 animate-in fade-in duration-500">
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <StatCard label="My Leads" value={leads.length} color="bg-white" />
              <StatCard label="Field Check-ins" value={locationLogs.length} color="bg-white" />
              <StatCard label="Active Status" value="Online" color="bg-emerald-50" textColor="text-emerald-700" />
            </div>

            <div className="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
              <div className="p-6 border-b border-slate-50 flex justify-between items-center">
                <h3 className="font-bold text-slate-700 uppercase text-sm">Recent Activity</h3>
                <button onClick={() => setActiveTab('field-logs')} className="text-[#004aad] text-xs font-bold hover:underline">Check-in Now</button>
              </div>
              <div className="p-6">
                  {leads.length === 0 && locationLogs.length === 0 ? (
                      <p className="text-center text-slate-400 italic py-10">No recent activity recorded.</p>
                  ) : (
                      <div className="space-y-4">
                          {locationLogs.slice(0, 3).map(log => (
                              <div key={log.id} className="flex items-center justify-between p-4 bg-slate-50 rounded-2xl">
                                  <div className="flex items-center gap-3">
                                      <div className="p-2 bg-blue-100 text-[#004aad] rounded-lg"><MapPin size={16}/></div>
                                      <div>
                                          <p className="text-sm font-bold text-slate-700">Field Check-in</p>
                                          <p className="text-[10px] text-slate-400 uppercase">{new Date(log.timestamp).toLocaleString()}</p>
                                      </div>
                                  </div>
                                  <a href={log.mapLink} target="_blank" className="text-xs font-bold text-[#004aad] hover:underline">View Map</a>
                              </div>
                          ))}
                      </div>
                  )}
              </div>
            </div>
          </div>
        )}

        {/* Field Logs View */}
        {activeTab === 'field-logs' && (
          <div className="space-y-6 animate-in fade-in duration-500">
            <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 text-center space-y-4">
                <div className="w-16 h-16 bg-blue-50 text-[#004aad] rounded-full flex items-center justify-center mx-auto">
                    <Navigation size={32} />
                </div>
                <div>
                    <h2 className="text-xl font-bold text-slate-800">Field Work Check-in</h2>
                    <p className="text-sm text-slate-500 max-w-sm mx-auto">Click below to log your current location. This helps us verify field coverage and process commissions.</p>
                </div>
                <button 
                  onClick={handleCheckIn}
                  disabled={locLoading}
                  className="px-8 py-4 bg-[#004aad] text-white font-bold rounded-2xl shadow-lg hover:bg-opacity-90 transition disabled:opacity-50 flex items-center gap-2 mx-auto"
                >
                  <MapPin size={20} />
                  {locLoading ? 'Capturing GPS...' : 'Check-in at Current Location'}
                </button>
            </div>

            <div className="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
                <div className="p-6 border-b border-slate-50">
                    <h3 className="font-bold text-slate-700 uppercase text-sm">Your Location History</h3>
                </div>
                <div className="overflow-x-auto">
                    <table className="w-full text-left">
                        <thead className="bg-slate-50 text-slate-400 text-[10px] uppercase font-bold">
                            <tr>
                                <th className="p-4">Date & Time</th>
                                <th className="p-4">Coordinates</th>
                                <th className="p-4">Map Link</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-50">
                            {locationLogs.length === 0 ? (
                                <tr><td colSpan="3" className="p-10 text-center text-slate-400 italic">No check-ins recorded yet.</td></tr>
                            ) : (
                                locationLogs.map(log => (
                                    <tr key={log.id} className="text-sm text-slate-600">
                                        <td className="p-4 font-bold">{new Date(log.timestamp).toLocaleString()}</td>
                                        <td className="p-4 font-mono text-xs">{log.lat.toFixed(5)}, {log.lng.toFixed(5)}</td>
                                        <td className="p-4 text-xs font-bold text-[#004aad] hover:underline">
                                            <a href={log.mapLink} target="_blank">Open in Google Maps</a>
                                        </td>
                                    </tr>
                                ))
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
          </div>
        )}

        {/* Submit Lead View */}
        {activeTab === 'new-lead' && (
          <div className="max-w-2xl mx-auto bg-white rounded-3xl shadow-xl p-8 border border-slate-100 animate-in slide-in-from-bottom-4 duration-300">
            <h2 className="text-xl font-bold text-slate-800 mb-6">Capture New Loan Lead</h2>
            <form onSubmit={submitLead} className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">Full Client Name</label>
                  <input required value={leadForm.clientName} onChange={e => setLeadForm({...leadForm, clientName: e.target.value})} type="text" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-[#004aad] outline-none" />
                </div>
                <div>
                  <label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">Phone Number</label>
                  <input required value={leadForm.clientPhone} onChange={e => setLeadForm({...leadForm, clientPhone: e.target.value})} type="tel" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-[#004aad] outline-none" />
                </div>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">Requested Amount (K)</label>
                  <input required value={leadForm.loanAmount} onChange={e => setLeadForm({...leadForm, loanAmount: e.target.value})} type="number" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-[#004aad] outline-none" />
                </div>
                <div>
                  <label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">Loan Product</label>
                  <select value={leadForm.loanType} onChange={e => setLeadForm({...leadForm, loanType: e.target.value})} className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-[#004aad] outline-none">
                    <option>GRZ Loan</option>
                    <option>Private Company Salary Loan</option>
                    <option>SME Loan</option>
                    <option>Order Financing Loan</option>
                    <option>CDF Loan</option>
                  </select>
                </div>
              </div>
              <div>
                <label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">Additional Notes</label>
                <textarea value={leadForm.notes} onChange={e => setLeadForm({...leadForm, notes: e.target.value})} className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-[#004aad] outline-none" rows="3"></textarea>
              </div>
              <button disabled={loading} className="w-full py-4 bg-[#004aad] text-white font-bold rounded-2xl shadow-lg hover:bg-opacity-90 transition disabled:opacity-50">
                {loading ? 'Submitting...' : 'Submit Lead to Registry'}
              </button>
            </form>
          </div>
        )}

        {/* Admin Monitoring View */}
        {activeTab === 'admin' && agentId === ADMIN_ID && (
          <div className="space-y-6 animate-in fade-in duration-500 pb-20">
            <div className="bg-[#004aad] text-white p-6 rounded-3xl shadow-xl flex justify-between items-center">
               <div>
                  <h2 className="text-xl font-bold uppercase tracking-tight">Master Field Compilation</h2>
                  <p className="text-xs text-blue-200">Admin oversight of all registered activity</p>
               </div>
               <button onClick={() => window.print()} className="bg-white text-[#004aad] px-4 py-2 rounded-xl text-xs font-bold uppercase shadow-lg">Generate Report</button>
            </div>

            {/* Admin Table - Location Logs */}
            <div className="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
                <div className="p-6 border-b border-slate-50">
                    <h3 className="font-bold text-slate-700 uppercase text-xs">All Agent Field Check-ins</h3>
                </div>
                <div className="overflow-x-auto">
                    <table className="w-full text-left">
                    <thead className="bg-slate-50 text-slate-400 text-[10px] uppercase font-bold">
                        <tr>
                        <th className="p-4">Agent ID</th>
                        <th className="p-4">Timestamp</th>
                        <th className="p-4">Coordinates</th>
                        <th className="p-4">Map View</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-50 text-sm">
                        {locationLogs.map((log) => (
                        <tr key={log.id} className="hover:bg-slate-50 transition">
                            <td className="p-4 font-mono font-bold text-[#004aad]">{log.agentId}</td>
                            <td className="p-4">{new Date(log.timestamp).toLocaleString()}</td>
                            <td className="p-4 text-xs font-mono">{log.lat.toFixed(5)}, {log.lng.toFixed(5)}</td>
                            <td className="p-4">
                                <a href={log.mapLink} target="_blank" className="p-2 bg-slate-100 rounded-lg text-slate-600 hover:text-[#004aad] transition inline-block">
                                    <Navigation size={14}/>
                                </a>
                            </td>
                        </tr>
                        ))}
                    </tbody>
                    </table>
                </div>
            </div>

            {/* Master Lead Table */}
            <div className="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
               <div className="p-6 border-b border-slate-50">
                    <h3 className="font-bold text-slate-700 uppercase text-xs">All Registered Loan Leads</h3>
               </div>
               <div className="overflow-x-auto">
                <table className="w-full text-left">
                  <thead className="bg-slate-50 text-slate-400 text-[10px] uppercase font-bold">
                    <tr>
                      <th className="p-4">Agent ID</th>
                      <th className="p-4">Client Name</th>
                      <th className="p-4">Amount</th>
                      <th className="p-4">Product</th>
                      <th className="p-4">Status</th>
                      <th className="p-4">Action</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-50">
                    {leads.map((lead) => (
                      <tr key={lead.id} className="text-sm text-slate-600 hover:bg-slate-50 transition">
                        <td className="p-4 font-mono font-bold text-[#004aad]">{lead.agentId}</td>
                        <td className="p-4 font-bold text-slate-800">{lead.clientName}</td>
                        <td className="p-4 font-mono text-emerald-600 font-bold">K{parseFloat(lead.loanAmount).toLocaleString()}</td>
                        <td className="p-4 text-xs">{lead.loanType}</td>
                        <td className="p-4">
                          <span className="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-[10px] font-bold uppercase">{lead.status}</span>
                        </td>
                        <td className="p-4">
                          <button className="text-xs font-bold text-slate-400 hover:text-[#004aad]">Details</button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
               </div>
            </div>
          </div>
        )}

        {/* Resources View */}
        {activeTab === 'resources' && (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 animate-in fade-in duration-500">
            <ResourceItem title="Agent Rate Card 2024" type="PDF" />
            <ResourceItem title="GRZ Application Form" type="DOCX" />
            <ResourceItem title="Requirements Checklist" type="PDF" />
            <ResourceItem title="SME Loan Template" type="XLSX" />
            <ResourceItem title="Marketing Posters" type="ZIP" />
          </div>
        )}

        {/* FAQ View */}
        {activeTab === 'faq' && (
          <div className="max-w-3xl space-y-4 animate-in fade-in duration-500">
            <FaqItem question="When are agent commissions paid?" answer="Commissions are processed on the 5th of every month following the successful disbursement of the Loan." />
            <FaqItem question="How do I verify a client's pay slip?" answer="Always check for the official company stamp or the digital watermark from the GRZ payroll system." />
            <FaqItem question="What is the maximum Loan amount for SME's?" answer="Currently, we offer up to K150,000 for SME Loans depending on collateral valuation." />
          </div>
        )}
      </main>

      {/* Toast Notification */}
      {toast.show && (
        <div className="fixed bottom-10 right-10 z-50 animate-in slide-in-from-right-10">
          <div className={`px-6 py-4 rounded-2xl shadow-2xl text-white font-bold flex items-center gap-3 ${toast.type === 'success' ? 'bg-emerald-600' : 'bg-red-600'}`}>
            <span>{toast.message}</span>
            <button onClick={() => setToast({...toast, show: false})}>&times;</button>
          </div>
        </div>
      )}
    </div>
  );
}

// Sub-components
function NavItem({ icon, label, onClick, active }) {
  return (
    <button 
      onClick={onClick}
      className={`w-full flex items-center gap-4 p-4 rounded-2xl transition font-bold text-sm uppercase tracking-wide ${active ? 'bg-white text-[#004aad] shadow-lg' : 'text-blue-200 hover:bg-blue-800/50'}`}
    >
      {icon} {label}
    </button>
  );
}

function StatCard({ label, value, color, textColor = "text-slate-800" }) {
  return (
    <div className={`p-6 rounded-3xl shadow-sm border border-slate-100 ${color}`}>
      <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{label}</span>
      <div className={`text-2xl font-black mt-1 ${textColor}`}>{value}</div>
    </div>
  );
}

function ResourceItem({ title, type }) {
  return (
    <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 flex items-center justify-between group hover:border-[#004aad] transition">
      <div className="flex items-center gap-4">
        <div className="p-3 bg-slate-50 rounded-2xl group-hover:bg-blue-50 transition">
          <FileText className="text-slate-400 group-hover:text-[#004aad]" />
        </div>
        <div>
          <h4 className="font-bold text-slate-800 text-sm">{title}</h4>
          <span className="text-[10px] font-bold text-slate-400 uppercase">{type}</span>
        </div>
      </div>
      <button className="p-2 text-slate-400 hover:text-[#004aad]"><Download size={20} /></button>
    </div>
  );
}

function FaqItem({ question, answer }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
      <button onClick={() => setOpen(!open)} className="w-full p-5 text-left flex justify-between items-center hover:bg-slate-50 transition">
        <span className="font-bold text-slate-700 text-sm">{question}</span>
        <ChevronRight className={`transition ${open ? 'rotate-90 text-[#004aad]' : 'text-slate-300'}`} />
      </button>
      {open && <div className="p-5 pt-0 text-sm text-slate-500 leading-relaxed border-t border-slate-50">{answer}</div>}
    </div>
  );
}