579 lines
38 KiB
TypeScript
579 lines
38 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import useStore from "@/lib/store";
|
|
import { translations } from "@/lib/i18n/translations";
|
|
import modelAdapter from "@/lib/services/adapter-instance";
|
|
import { Search, Globe, Plus, Trash2, ShieldAlert, BarChart3, TrendingUp, Target, Rocket, Lightbulb, CheckCircle2, AlertCircle, Loader2, X, ExternalLink } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const MarketResearcher = () => {
|
|
const { language, selectedProvider, selectedModels, apiKeys, setMarketResearchResult, marketResearchResult } = useStore();
|
|
const t = translations[language].marketResearch;
|
|
const common = translations[language].common;
|
|
|
|
const [websiteUrl, setWebsiteUrl] = useState("");
|
|
const [additionalUrls, setAdditionalUrls] = useState<string[]>([""]);
|
|
const [competitorUrls, setCompetitorUrls] = useState<string[]>(["", "", ""]);
|
|
const [productMapping, setProductMapping] = useState("");
|
|
const [specialInstructions, setSpecialInstructions] = useState("");
|
|
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
const [progress, setProgress] = useState(0);
|
|
const [thoughtIndex, setThoughtIndex] = useState(0);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const selectedModel = selectedModels[selectedProvider];
|
|
|
|
const handleAddUrl = () => setAdditionalUrls([...additionalUrls, ""]);
|
|
const handleRemoveUrl = (index: number) => {
|
|
const newUrls = [...additionalUrls];
|
|
newUrls.splice(index, 1);
|
|
setAdditionalUrls(newUrls);
|
|
};
|
|
|
|
const handleAddCompetitor = () => {
|
|
if (competitorUrls.length < 10) {
|
|
setCompetitorUrls([...competitorUrls, ""]);
|
|
}
|
|
};
|
|
const handleRemoveCompetitor = (index: number) => {
|
|
const newUrls = [...competitorUrls];
|
|
newUrls.splice(index, 1);
|
|
setCompetitorUrls(newUrls);
|
|
};
|
|
|
|
const validateUrls = () => {
|
|
const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
|
|
if (!websiteUrl || !urlRegex.test(websiteUrl)) return t.invalidPrimaryUrl;
|
|
|
|
const validCompetitors = competitorUrls.filter(url => url.trim().length > 0);
|
|
if (validCompetitors.length < 2) return t.minCompetitors;
|
|
|
|
for (const url of validCompetitors) {
|
|
if (!urlRegex.test(url)) return `${t.invalidCompetitorUrl}: ${url}`;
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
useEffect(() => {
|
|
let interval: NodeJS.Timeout;
|
|
if (isProcessing) {
|
|
setProgress(0);
|
|
setThoughtIndex(0);
|
|
interval = setInterval(() => {
|
|
setProgress(prev => {
|
|
if (prev >= 95) return prev;
|
|
return prev + (prev < 30 ? 2 : prev < 70 ? 1 : 0.5);
|
|
});
|
|
}, 300);
|
|
|
|
const thoughtInterval = setInterval(() => {
|
|
setThoughtIndex(prev => (prev < (t.thoughts?.length || 0) - 1 ? prev + 1 : prev));
|
|
}, 4000);
|
|
|
|
return () => {
|
|
clearInterval(interval);
|
|
clearInterval(thoughtInterval);
|
|
};
|
|
} else {
|
|
setProgress(0);
|
|
}
|
|
}, [isProcessing, t.thoughts]);
|
|
|
|
const handleStartResearch = async () => {
|
|
const validationError = validateUrls();
|
|
if (validationError) {
|
|
setError(validationError);
|
|
return;
|
|
}
|
|
|
|
const apiKey = apiKeys[selectedProvider];
|
|
const isQwenOAuth = selectedProvider === "qwen" && modelAdapter.hasQwenAuth();
|
|
|
|
if (!isQwenOAuth && (!apiKey || !apiKey.trim())) {
|
|
setError(`${common.configApiKey}`);
|
|
return;
|
|
}
|
|
|
|
setIsProcessing(true);
|
|
setError(null);
|
|
setMarketResearchResult(null);
|
|
|
|
try {
|
|
const filteredCompetitors = competitorUrls.filter(u => u.trim() !== "");
|
|
const filteredAddUrls = additionalUrls.filter(u => u.trim() !== "");
|
|
|
|
const result = await modelAdapter.generateMarketResearch({
|
|
websiteUrl,
|
|
additionalUrls: filteredAddUrls,
|
|
competitors: filteredCompetitors,
|
|
productMapping,
|
|
specialInstructions
|
|
}, selectedProvider, selectedModel);
|
|
|
|
if (result.success && result.data) {
|
|
setProgress(100);
|
|
try {
|
|
const cleanJson = result.data.replace(/```json\s*([\s\S]*?)\s*```/i, '$1').trim();
|
|
const parsed = JSON.parse(cleanJson);
|
|
setMarketResearchResult({
|
|
...parsed,
|
|
id: Math.random().toString(36).substr(2, 9),
|
|
websiteUrl,
|
|
additionalUrls: filteredAddUrls,
|
|
competitors: filteredCompetitors,
|
|
productMapping: [{ productName: productMapping || t.mainProduct, features: [] }],
|
|
generatedAt: new Date(),
|
|
rawContent: result.data
|
|
});
|
|
} catch (e) {
|
|
console.error("Failed to parse market research JSON:", e);
|
|
setError(t.parseError);
|
|
}
|
|
} else {
|
|
setError(result.error || t.researchFailed);
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : t.unexpectedError);
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
const renderPriceMatrix = () => {
|
|
if (!marketResearchResult?.priceComparisonMatrix) return null;
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm text-left">
|
|
<thead>
|
|
<tr className="border-b bg-slate-50/50">
|
|
<th className="px-4 py-3 font-black text-slate-900 uppercase tracking-wider text-[10px]">{t.product}</th>
|
|
<th className="px-4 py-3 font-black text-indigo-600 uppercase tracking-wider text-[10px]">{t.yourPrice}</th>
|
|
{marketResearchResult.competitors.map((comp, i) => (
|
|
<th key={i} className="px-4 py-3 font-black text-slate-500 uppercase tracking-wider text-[10px]">{comp}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{marketResearchResult.priceComparisonMatrix.map((item, i) => (
|
|
<tr key={i} className="hover:bg-slate-50/30 transition-colors">
|
|
<td className="px-4 py-4 font-bold text-slate-900">{item.product}</td>
|
|
<td className="px-4 py-4 font-black text-indigo-600">{item.userPrice}</td>
|
|
{marketResearchResult.competitors.map((comp) => {
|
|
const compPrice = item.competitorPrices.find(cp => cp.competitor === comp || comp.includes(cp.competitor));
|
|
return (
|
|
<td key={comp} className="px-4 py-4">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="font-medium text-slate-600">{compPrice ? compPrice.price : t.notAvailable}</span>
|
|
{compPrice?.url && (
|
|
<a
|
|
href={compPrice.url.startsWith('http') ? compPrice.url : `https://${compPrice.url}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-[10px] text-indigo-500 hover:text-indigo-700 font-bold transition-colors group/link"
|
|
>
|
|
<ExternalLink className="h-2.5 w-2.5" />
|
|
{t.viewProduct}
|
|
</a>
|
|
)}
|
|
</div>
|
|
</td>
|
|
);
|
|
})}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderFeatureTable = () => {
|
|
if (!marketResearchResult?.featureComparisonTable) return null;
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm text-left">
|
|
<thead>
|
|
<tr className="border-b bg-slate-50/50">
|
|
<th className="px-4 py-3 font-black text-slate-900 uppercase tracking-wider text-[10px]">{t.feature}</th>
|
|
<th className="px-4 py-3 font-black text-indigo-600 uppercase tracking-wider text-[10px]">{t.you}</th>
|
|
{marketResearchResult.competitors.map((comp, i) => (
|
|
<th key={i} className="px-4 py-3 font-black text-slate-500 uppercase tracking-wider text-[10px]">{comp}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{marketResearchResult.featureComparisonTable.map((item, i) => (
|
|
<tr key={i} className="hover:bg-slate-50/30 transition-colors">
|
|
<td className="px-4 py-4 font-bold text-slate-900">{item.feature}</td>
|
|
<td className="px-4 py-4">
|
|
{typeof item.userStatus === 'boolean' ? (
|
|
item.userStatus ? <CheckCircle2 className="h-4 w-4 text-emerald-500" /> : <X className="h-4 w-4 text-slate-300" />
|
|
) : <span className="text-xs font-semibold">{item.userStatus}</span>}
|
|
</td>
|
|
{marketResearchResult.competitors.map((comp) => {
|
|
const compStatus = item.competitorStatus.find(cs => cs.competitor === comp || comp.includes(cs.competitor));
|
|
return (
|
|
<td key={comp} className="px-4 py-4">
|
|
{compStatus ? (
|
|
typeof compStatus.status === 'boolean' ? (
|
|
compStatus.status ? <CheckCircle2 className="h-4 w-4 text-emerald-500" /> : <X className="h-4 w-4 text-slate-300" />
|
|
) : <span className="text-xs font-medium text-slate-600">{compStatus.status}</span>
|
|
) : t.notAvailable}
|
|
</td>
|
|
);
|
|
})}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
{/* Header Section */}
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2.5 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-lg shadow-indigo-200">
|
|
<Search className="h-6 w-6" />
|
|
</div>
|
|
<h2 className="text-3xl font-black tracking-tight text-slate-900">{t.title}</h2>
|
|
</div>
|
|
<p className="text-slate-500 font-medium ml-1.5">{t.description}</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 xl:grid-cols-12 gap-8 items-start">
|
|
{/* Configuration Panel */}
|
|
<div className="xl:col-span-5 space-y-6">
|
|
<Card className="border-slate-200/60 shadow-xl shadow-slate-200/40 overflow-hidden bg-white/80 backdrop-blur-md">
|
|
<CardHeader className="bg-slate-50/50 border-b p-5">
|
|
<CardTitle className="text-sm font-black uppercase tracking-widest text-slate-500 flex items-center gap-2">
|
|
<Globe className="h-4 w-4" /> {t.companyProfile}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-6 space-y-6">
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black uppercase tracking-widest text-slate-600">{t.websiteUrl}</label>
|
|
<Input
|
|
placeholder={t.websitePlaceholder}
|
|
value={websiteUrl}
|
|
onChange={(e) => setWebsiteUrl(e.target.value)}
|
|
className="bg-slate-50 border-slate-200 focus:bg-white transition-all font-medium"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<label className="text-xs font-black uppercase tracking-widest text-slate-600 flex justify-between items-center">
|
|
{t.additionalUrls}
|
|
<Button variant="ghost" size="sm" onClick={handleAddUrl} className="h-6 px-2 hover:bg-slate-100 text-[10px] font-black uppercase">
|
|
<Plus className="h-3 w-3 mr-1" /> {t.addUrl}
|
|
</Button>
|
|
</label>
|
|
<div className="space-y-2">
|
|
{additionalUrls.map((url, i) => (
|
|
<div key={i} className="flex gap-2 group">
|
|
<Input
|
|
placeholder={t.urlPlaceholder}
|
|
value={url}
|
|
onChange={(e) => {
|
|
const newUrls = [...additionalUrls];
|
|
newUrls[i] = e.target.value;
|
|
setAdditionalUrls(newUrls);
|
|
}}
|
|
className="bg-slate-50/50 border-slate-200 focus:bg-white transition-all text-xs"
|
|
/>
|
|
<Button variant="ghost" size="icon" onClick={() => handleRemoveUrl(i)} className="h-9 w-9 shrink-0 text-slate-400 hover:text-rose-500">
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-slate-200/60 shadow-xl shadow-slate-200/40 overflow-hidden bg-white/80 backdrop-blur-md">
|
|
<CardHeader className="bg-slate-50/50 border-b p-5">
|
|
<CardTitle className="text-sm font-black uppercase tracking-widest text-slate-500 flex items-center gap-2">
|
|
<ShieldAlert className="h-4 w-4" /> {t.competitiveIntel}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-6 space-y-6">
|
|
<div className="space-y-3">
|
|
<label className="text-xs font-black uppercase tracking-widest text-slate-600 flex justify-between items-center">
|
|
{t.competitors}
|
|
<Button variant="ghost" size="sm" onClick={handleAddCompetitor} disabled={competitorUrls.length >= 10} className="h-6 px-2 hover:bg-slate-100 text-[10px] font-black uppercase">
|
|
<Plus className="h-3 w-3 mr-1" /> {t.addCompetitor}
|
|
</Button>
|
|
</label>
|
|
<div className="space-y-2">
|
|
{competitorUrls.map((url, i) => (
|
|
<div key={i} className="flex gap-2">
|
|
<Input
|
|
placeholder={t.competitorPlaceholder}
|
|
value={url}
|
|
onChange={(e) => {
|
|
const newUrls = [...competitorUrls];
|
|
newUrls[i] = e.target.value;
|
|
setCompetitorUrls(newUrls);
|
|
}}
|
|
className="bg-slate-50/50 border-slate-200 focus:bg-white transition-all text-xs"
|
|
/>
|
|
{competitorUrls.length > 2 && (
|
|
<Button variant="ghost" size="icon" onClick={() => handleRemoveCompetitor(i)} className="h-9 w-9 shrink-0 text-slate-400 hover:text-rose-500">
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black uppercase tracking-widest text-slate-600">{t.productMapping}</label>
|
|
<Textarea
|
|
placeholder={t.mappingPlaceholder}
|
|
value={productMapping}
|
|
onChange={(e) => setProductMapping(e.target.value)}
|
|
className="min-h-[80px] bg-slate-50/50 border-slate-200 focus:bg-white transition-all text-sm"
|
|
/>
|
|
<p className="text-[10px] text-slate-400 font-medium italic">{t.mappingDesc}</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black uppercase tracking-widest text-slate-600">{t.parameters}</label>
|
|
<Textarea
|
|
placeholder={t.parametersPlaceholder}
|
|
value={specialInstructions}
|
|
onChange={(e) => setSpecialInstructions(e.target.value)}
|
|
className="min-h-[80px] bg-slate-50/50 border-slate-200 focus:bg-white transition-all text-sm"
|
|
/>
|
|
</div>
|
|
|
|
{isProcessing && (
|
|
<div className="space-y-4 animate-in fade-in slide-in-from-top-4 duration-500">
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center text-[10px] font-black uppercase tracking-widest">
|
|
<span className="text-indigo-600 flex items-center gap-1.5">
|
|
<Loader2 className="h-3 w-3 animate-spin" /> {t.analysisInProgress}
|
|
</span>
|
|
<span className="text-slate-400">{Math.round(progress)}%</span>
|
|
</div>
|
|
<div className="h-2 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200/50">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-indigo-500 via-violet-500 to-indigo-500 transition-all duration-300 ease-out"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 rounded-xl bg-slate-900 text-white shadow-lg relative overflow-hidden group">
|
|
<div className="absolute top-0 right-0 p-2 opacity-20">
|
|
<Rocket className="h-4 w-4 text-indigo-400 group-hover:block hidden" />
|
|
</div>
|
|
<h4 className="text-[9px] font-black uppercase tracking-[0.2em] text-indigo-400 mb-2 flex items-center gap-1.5">
|
|
<span className="h-1 w-1 bg-indigo-400 rounded-full animate-pulse" /> {t.aiThoughts}
|
|
</h4>
|
|
<p className="text-xs font-bold leading-relaxed italic animate-in fade-in slide-in-from-left-2 duration-700">
|
|
"{t.thoughts?.[thoughtIndex] || t.researching}"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="p-3 rounded-xl bg-rose-50 border border-rose-100 flex items-start gap-3 animate-in fade-in slide-in-from-top-2">
|
|
<AlertCircle className="h-4 w-4 text-rose-500 shrink-0 mt-0.5" />
|
|
<p className="text-xs font-bold text-rose-600">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
<Button
|
|
onClick={handleStartResearch}
|
|
disabled={isProcessing}
|
|
className="w-full h-12 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 text-white font-black uppercase tracking-widest shadow-lg shadow-indigo-100 transition-all active:scale-95 disabled:opacity-70"
|
|
>
|
|
{isProcessing ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
|
|
{t.researching}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Search className="mr-2 h-5 w-5" />
|
|
{t.generate}
|
|
</>
|
|
)}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Results Panel */}
|
|
<div className="xl:col-span-7">
|
|
{marketResearchResult ? (
|
|
<Card className="border-slate-200/60 shadow-2xl shadow-slate-200/50 overflow-hidden bg-white group min-h-[600px]">
|
|
<CardHeader className="bg-slate-900 text-white p-6 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/20 rounded-full blur-3xl -mr-32 -mt-32" />
|
|
<div className="relative z-10 flex justify-between items-start">
|
|
<div>
|
|
<Badge variant="outline" className="mb-2 border-indigo-400/50 text-indigo-300 font-black uppercase tracking-widest text-[10px]">{t.marketIntelReport}</Badge>
|
|
<CardTitle className="text-2xl font-black tracking-tight">{marketResearchResult.websiteUrl}</CardTitle>
|
|
<CardDescription className="text-indigo-200 font-medium">{t.generatedOn} {marketResearchResult.generatedAt.toLocaleDateString()}</CardDescription>
|
|
</div>
|
|
<div className="p-3 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20">
|
|
<BarChart3 className="h-6 w-6 text-indigo-300" />
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<Tabs defaultValue="summary" className="w-full">
|
|
<TabsList className="w-full h-14 bg-slate-50 border-b rounded-none px-6 justify-start gap-4">
|
|
<TabsTrigger value="summary" className="data-[state=active]:bg-transparent data-[state=active]:text-indigo-600 data-[state=active]:border-b-2 data-[state=active]:border-indigo-600 rounded-none h-full font-black uppercase tracking-widest text-[10px] px-0">{t.summary}</TabsTrigger>
|
|
<TabsTrigger value="pricing" className="data-[state=active]:bg-transparent data-[state=active]:text-indigo-600 data-[state=active]:border-b-2 data-[state=active]:border-indigo-600 rounded-none h-full font-black uppercase tracking-widest text-[10px] px-0">{t.pricing}</TabsTrigger>
|
|
<TabsTrigger value="features" className="data-[state=active]:bg-transparent data-[state=active]:text-indigo-600 data-[state=active]:border-b-2 data-[state=active]:border-indigo-600 rounded-none h-full font-black uppercase tracking-widest text-[10px] px-0">{t.features}</TabsTrigger>
|
|
<TabsTrigger value="positioning" className="data-[state=active]:bg-transparent data-[state=active]:text-indigo-600 data-[state=active]:border-b-2 data-[state=active]:border-indigo-600 rounded-none h-full font-black uppercase tracking-widest text-[10px] px-0">{t.positioning}</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<div className="p-6">
|
|
<TabsContent value="summary" className="m-0 focus-visible:ring-0">
|
|
<div className="space-y-6">
|
|
<div className="p-5 rounded-2xl bg-indigo-50 border border-indigo-100">
|
|
<h3 className="text-sm font-black text-indigo-900 uppercase tracking-widest mb-3 flex items-center gap-2">
|
|
<TrendingUp className="h-4 w-4" /> {t.executiveSummary}
|
|
</h3>
|
|
<p className="text-sm text-indigo-900/80 leading-relaxed font-medium">
|
|
{marketResearchResult.executiveSummary}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="p-5 rounded-2xl border bg-emerald-50/30 border-emerald-100">
|
|
<h4 className="text-[10px] font-black uppercase tracking-widest text-emerald-600 mb-3 flex items-center gap-2">
|
|
<CheckCircle2 className="h-4 w-4" /> {t.strategicAdvantages}
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{marketResearchResult.competitiveAnalysis.advantages.map((adv, i) => (
|
|
<li key={i} className="text-xs font-bold text-slate-700 flex gap-2">
|
|
<span className="text-emerald-500">•</span> {adv}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="p-5 rounded-2xl border bg-rose-50/30 border-rose-100">
|
|
<h4 className="text-[10px] font-black uppercase tracking-widest text-rose-600 mb-3 flex items-center gap-2">
|
|
<AlertCircle className="h-4 w-4" /> {t.identifiedGaps}
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{marketResearchResult.competitiveAnalysis.disadvantages.map((dis, i) => (
|
|
<li key={i} className="text-xs font-bold text-slate-700 flex gap-2">
|
|
<span className="text-rose-500">•</span> {dis}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-5 rounded-2xl border bg-amber-50/30 border-amber-100">
|
|
<h4 className="text-[10px] font-black uppercase tracking-widest text-amber-600 mb-3 flex items-center gap-2">
|
|
<Lightbulb className="h-4 w-4" /> {t.recommendations}
|
|
</h4>
|
|
<ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{marketResearchResult.recommendations.map((rec, i) => (
|
|
<li key={i} className="text-xs font-bold text-slate-700 p-3 bg-white border border-amber-100 rounded-xl shadow-sm flex items-center gap-3">
|
|
<span className="h-6 w-6 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center text-[10px] shrink-0">{i + 1}</span>
|
|
{rec}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="pricing" className="m-0 focus-visible:ring-0">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-black text-slate-900 tracking-tight">{t.priceMatrix}</h3>
|
|
<Badge className="bg-slate-900 text-[10px] font-black uppercase">{t.liveMarketData}</Badge>
|
|
</div>
|
|
<div className="rounded-xl border border-slate-200 overflow-hidden">
|
|
{renderPriceMatrix()}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="features" className="m-0 focus-visible:ring-0">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-black text-slate-900 tracking-tight">{t.featureBenchmarking}</h3>
|
|
<Badge className="bg-indigo-600 text-[10px] font-black uppercase">{t.functionalAudit}</Badge>
|
|
</div>
|
|
<div className="rounded-xl border border-slate-200 overflow-hidden">
|
|
{renderFeatureTable()}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="positioning" className="m-0 focus-visible:ring-0">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-4">
|
|
<div className="p-5 rounded-2xl bg-slate-900 text-white shadow-xl">
|
|
<h4 className="text-[10px] font-black uppercase tracking-widest text-indigo-400 mb-3 flex items-center gap-2">
|
|
<Target className="h-4 w-4" /> {t.marketLandscape}
|
|
</h4>
|
|
<p className="text-xs font-medium leading-relaxed opacity-90">
|
|
{marketResearchResult.marketPositioning.landscape}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="p-5 rounded-2xl bg-indigo-600 text-white shadow-xl">
|
|
<h4 className="text-[10px] font-black uppercase tracking-widest text-indigo-200 mb-3 flex items-center gap-2">
|
|
<Rocket className="h-4 w-4" /> {t.segmentationStrategy}
|
|
</h4>
|
|
<p className="text-xs font-medium leading-relaxed font-bold">
|
|
{marketResearchResult.marketPositioning.segmentation}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="md:col-span-2 p-5 rounded-2xl border bg-slate-50 italic">
|
|
<h4 className="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2">{t.methodology}</h4>
|
|
<p className="text-[10px] font-medium text-slate-400">
|
|
{marketResearchResult.methodology}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</div>
|
|
</Tabs>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card className="border-dashed border-2 border-slate-200 bg-slate-50/50 flex flex-col items-center justify-center p-12 min-h-[600px] text-center group">
|
|
<div className="h-20 w-20 rounded-3xl bg-white border border-slate-100 flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 group-hover:rotate-3 transition-all duration-500">
|
|
<BarChart3 className="h-10 w-10 text-slate-300 group-hover:text-indigo-500 transition-colors" />
|
|
</div>
|
|
<h3 className="text-xl font-black text-slate-400 tracking-tight group-hover:text-slate-600 transition-colors">{t.awaitingParameters}</h3>
|
|
<p className="text-sm text-slate-400 font-medium max-w-[280px] mt-2 group-hover:text-slate-500 transition-colors">
|
|
{t.emptyState}
|
|
</p>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MarketResearcher;
|