<div className="bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-8 shadow-2xl">
<div className="space-y-6">
{/* Ticker Input */}
<div>
<label className="block text-white/90 font-medium mb-2">
Ticker Symbol
</label>
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/50" />
<input
type="text"
value={formData.ticker}
onChange={(e) => setFormData(prev => ({ ...prev, ticker: e.target.value }))}
placeholder="e.g., AAPL, TSLA, A2M"
className="w-full pl-12 pr-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
onKeyPress={(e) => e.key === 'Enter' && handleSubmit(e)}
/>
</div>
</div>
{/* Market Dropdown */}
<div>
<label className="block text-white/90 font-medium mb-2">
Market Exchange
</label>
<div className="relative">
<Globe className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/50" />
<select
value={formData.market}
onChange={(e) => setFormData(prev => ({ ...prev, market: e.target.value }))}
className="w-full pl-12 pr-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all appearance-none cursor-pointer"
>
<option value="" className="bg-slate-800">Select a market...</option>
{markets.map(market => (
<option key={market.code} value={market.code} className="bg-slate-800">
{market.flag} {market.name}
</option>
))}
</select>
</div>
</div>
{/* Submit Button */}
<button
onClick={handleSubmit}
disabled={isLoading || !formData.ticker || !formData.market}
className="w-full py-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-xl hover:from-blue-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2"
>
{isLoading ? (
<>
<Loader2 className="w-5 h-5 animate-spin" />
Analyzing...
</>
) : (
<>
<BarChart3 className="w-5 h-5" />
Start Research
</>
)}
</button>
</div>
Steve Share TYool
September 4, 2025