className="space-y-2 text-sm text-gray-700">

                                                        {Object.entries(researchResults.humanData.legal_parameters).map(([key, value]) => (

                                                            <div key={key}>

                                                                <span className="font-medium capitalize">{key.replace(/_/g, ' ')}: </span>

                                                                {typeof value === 'boolean' ? (

                                                                    <span className={value ? 'text-green-600 font-semibold' : 'text-red-600 font-semibold'}>

                                                                        {value ? '✓ Met' : '✗ Not established'}

                                                                    </span>

                                                                ) : Array.isArray(value) ? (

                                                                    <ul className="list-disc list-inside ml-4">

                                                                        {value.map((item, idx) => <li key={idx}>{item}</li>)}

                                                                    </ul>

                                                                ) : (

                                                                    <span>{value}</span>

                                                                )}

                                                            </div>

                                                        ))}

                                                    </div>

                                                </div>

                                                {/* Legal Recommendations */}

                                                <div className="p-4 bg-gradient-to-r from-green-50 to-blue-50 rounded-lg border-l-4 border-l-green-500">

                                                    <h4 className="font-semibold text-gray-800 mb-2">Legal Recommendations</h4>

                                                    <div className="space-y-2 text-sm text-gray-700">

                                                        <p><span className="font-medium">Legal Standing:</span> {researchResults.humanData.legal_recommendation}</p>

                                                        <p><span className="font-medium">Rights Framework:</span> {researchResults.humanData.rights_framework}</p>

                                                        <p><span className="font-medium">Representation Model:</span> {researchResults.humanData.representation_model}</p>

                                                    </div>

                                                </div>

                                            </div>

                                        )}

                                    </div>

                                </div>

                            </div>

                        )}

                    </div>

                </div>

            );

        };

        ReactDOM.render(<LegalIntelligenceResearcher />, document.getElementById('root'));

    </script>

</body>

</html>