1import React, { useState } from 'react';
2import { Layout, Zap, Box } from 'lucide-react';
3
4export default function PremiumComponent() {
5  const [count, setCount] = useState(0);
6
7  return (
8    <div className="p-10 bg-gradient-to-br from-zinc-900 to-black text-white rounded-3xl border border-white/10 shadow-2xl relative overflow-hidden group">
9      <div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
10      <div className="relative z-10">
11        <div className="flex items-center gap-4 mb-6">
12          <div className="p-3 bg-indigo-600/20 rounded-2xl border border-indigo-400/30">
13            <Zap className="text-indigo-400 size-8" />
14          </div>
15          <h1 className="text-3xl font-extrabold tracking-tight">React Viewer</h1>
16        </div>
17        <p className="text-zinc-400 mb-8 leading-relaxed max-w-md">
18          Paste your JSX or TSX code here to see professional syntax highlighting and component structure analysis in real-time.
19        </p>
20        <button 
21          onClick={() => setCount(c => c + 1)}
22          className="px-8 py-3 bg-indigo-600 rounded-2xl hover:bg-indigo-700 active:scale-95 transition-all font-bold shadow-lg shadow-indigo-500/30"
23        >
24          Interactions: {count}
25        </button>
26      </div>
27    </div>
28  );
29}