AI Brand Voice Selector

"use client";

import React, { useState } from "react";
import { Volume2, Sliders, Play, Settings2 } from "lucide-react";

export default function AIBrandVoice() {
    const [params, setParams] = useState({
        humor: 40,
        expertise: 85,
        enthusiasm: 60
    });

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-sm mx-auto">
            <div className="flex items-center gap-2 mb-8">
                <Volume2 className="h-4 w-4 text-violet-500" />
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Brand Persona</h3>
            </div>

            <div className="space-y-6">
                {[
                    { key: "humor", label: "Humor & Wit" },
                    { key: "expertise", label: "Technical Depth" },
                    { key: "enthusiasm", label: "Energy Level" },
                ].map(({ key, label }) => (
                    <div key={key}>
                        <div className="flex items-center justify-between mb-3 text-[10px] font-black uppercase tracking-widest text-zinc-500">
                            <span>{label}</span>
                            <span className="text-zinc-900 dark:text-zinc-100">{params[key as keyof typeof params]}%</span>
                        </div>
                        <input
                            type="range"
                            min="0"
                            max="100"
                            value={params[key as keyof typeof params]}
                            onChange={(e) => setParams(prev => ({ ...prev, [key]: parseInt(e.target.value) }))}
                            className="w-full h-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-violet-600"
                        />
                    </div>
                ))}
            </div>

            <div className="mt-8 pt-6 border-t border-zinc-100 dark:border-zinc-800">
                <div className="p-4 rounded-xl bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800">
                    <div className="flex items-center justify-between mb-2">
                        <span className="text-[10px] font-bold text-zinc-400">PREVIEW OUTPUT</span>
                        <Settings2 className="h-3 w-3 text-zinc-400" />
                    </div>
                    <p className="text-xs text-zinc-500 italic leading-relaxed">
                        "Our revolutionary neural architecture enables seamless integration with legacy systems while maintaining peak performance..."
                    </p>
                </div>
                <button className="w-full mt-4 flex items-center justify-center gap-2 py-3 rounded-xl bg-violet-600 text-white text-xs font-bold hover:bg-violet-700 transition-all shadow-lg shadow-violet-500/20">
                    <Play className="h-3 w-3 fill-current" />
                    TEST VOICE
                </button>
            </div>
        </div>
    );
}