<div class="max-w-3xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-t1">AI Insights</h1>
            <p class="text-sm text-t3 mt-1">Analyze your link performance with AI</p>
        </div>
        <x-ui.button wire:click="generate" action="generate">
            <x-heroicon-o-sparkles class="w-4 h-4" />
            Generate Insights
        </x-ui.button>
    </div>

    @if($insights)
    <div class="p-5 bg-s1 border border-white/[.06] rounded-xl">
        <div class="flex items-center gap-2 mb-3 text-accent text-xs font-medium">
            <x-heroicon-o-sparkles class="w-3.5 h-3.5" />
            AI Analysis
        </div>
        <div class="text-sm text-t1 whitespace-pre-wrap leading-relaxed">{{ $insights }}</div>
    </div>
    @else
    <div class="p-8 bg-s1 border border-white/[.06] rounded-xl text-center">
        <x-heroicon-o-sparkles class="w-10 h-10 mx-auto text-t3 mb-3" />
        <p class="text-sm text-t2">Click "Generate Insights" to analyze your top 10 links with AI.</p>
    </div>
    @endif
</div>
