ledex-demo/local-ai-presentation/src/components/slides/Slide7BuyersGuide.tsx

import { AlertTriangle, Terminal, Sparkles, ArrowRight } from 'lucide-react';
import { BudgetType, GoalType } from '../../types';
import { getHardwareProcureData } from '../../utils/hardwareData';
import { synth } from '../../utils/audioSynth';

interface Slide7BuyersGuideProps {
  showToast: (msg: string) => void;
  selectedGoal: GoalType;
  procureBudget: BudgetType;
  onGoalChange: (goal: GoalType) => void;
  onBudgetChange: (budget: BudgetType) => void;
}

interface BudgetOption {
  id: BudgetType;
  label: string;
  sub: string;
}

const budgetOptions: BudgetOption[] = [
  { id: 'existing', label: '💻 EXISTING ASSETS', sub: 'Zero Cost ($0)' },
  { id: 'budget', label: '⚡ LIGHT UPGRADE', sub: 'Under $1,500' },
  { id: 'pro', label: '🔥 PRO STUDIO', sub: '$2k - $4k' },
  { id: 'enterprise', label: '🏢 ENTERPRISE NODE', sub: 'Over $5k' }
];

export default function Slide7BuyersGuide({ 
  showToast,
  selectedGoal,
  procureBudget,
  onGoalChange,
  onBudgetChange
}: Slide7BuyersGuideProps) {
  const handleElementClick = () => synth.playClick();

  const handleBudgetSelect = (budget: BudgetType) => {
    handleElementClick();
    onBudgetChange(budget);
  };

  const handleGoalSelect = (goal: GoalType) => {
    handleElementClick();
    onGoalChange(goal);
  };

  const spec = getHardwareProcureData(procureBudget, selectedGoal);

  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch max-w-6xl mx-auto w-full text-left font-sans animate-fade-in">
      <div className="lg:col-span-5 flex flex-col justify-between">
        <div>
          <span className="text-emerald-500 font-mono text-xs font-bold uppercase tracking-wider mb-2 block">// SPECIFICATION OPTIMIZER</span>
          <h2 className="font-display font-bold text-2xl sm:text-3xl text-white tracking-tight uppercase leading-none mb-4">
            Easy Setup & Hardware Guide
          </h2>
          <p className="text-slate-400 text-xs sm:text-sm leading-relaxed mb-5">
            Buying or repurposing hardware is simple once you isolate your goals. Modern large models scale entirely based on **Memory Bandwidth** rather than CPU cores.
          </p>

          <div className="mb-4">
            <label className="block text-slate-500 font-mono text-[9px] uppercase tracking-wider mb-2 font-bold">// 1. CHOOSE AVAILABLE BUDGET PROFILE</label>
            <div className="grid grid-cols-2 gap-2 font-mono">
              {budgetOptions.map((btn) => (
                <button
                  key={btn.id}
                  type="button"
                  onClick={() => handleBudgetSelect(btn.id)}
                  className={`p-2.5 rounded border text-left transition-all duration-200 cursor-pointer ${
                    procureBudget === btn.id
                      ? 'border-emerald-500 bg-emerald-950/20 text-emerald-400 font-bold shadow-[0_0_8px_rgba(16,185,129,0.1)]'
                      : 'border-slate-850 bg-slate-900/30 text-slate-400 hover:border-slate-750 hover:text-slate-200'
                  }`}
                >
                  <span className="block text-[10px] tracking-tight">{btn.label}</span>
                  <span className={`block text-[8px] font-semibold ${procureBudget === btn.id ? 'text-emerald-500' : 'text-slate-500'}`}>{btn.sub}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="mb-5">
            <label className="block text-slate-500 font-mono text-[9px] uppercase tracking-wider mb-2 font-bold">// 2. CHOOSE PRIMARY BUSINESS VALUE INTENT</label>
            <div className="flex flex-col gap-2 font-mono">
              <button
                type="button"
                onClick={() => handleGoalSelect('writing')}
                className={`p-3 rounded border text-left transition-all duration-150 cursor-pointer flex justify-between items-center ${
                  selectedGoal === 'writing'
                    ? 'border-emerald-500 bg-emerald-950/25 text-emerald-400 font-bold'
                    : 'border-slate-850 bg-slate-900/30 text-slate-400 hover:border-slate-750 hover:text-slate-200'
                }`}
              >
                <div>
                  <span className="block text-[10px] tracking-tight">✍ CONTENT ENGINE</span>
                  <span className="block font-sans text-[8.5px] font-normal text-slate-500 leading-none mt-0.5">Drafting, summarizing, code autocompletion</span>
                </div>
                <ArrowRight className={`w-3 h-3 shrink-0 ${selectedGoal === 'writing' ? 'text-emerald-400' : 'text-slate-600'}`} />
              </button>
              <button
                type="button"
                onClick={() => handleGoalSelect('rag')}
                className={`p-3 rounded border text-left transition-all duration-150 cursor-pointer flex justify-between items-center ${
                  selectedGoal === 'rag'
                    ? 'border-emerald-500 bg-emerald-950/25 text-emerald-400 font-bold'
                    : 'border-slate-850 bg-slate-900/30 text-slate-400 hover:border-slate-750 hover:text-slate-200'
                }`}
              >
                <div>
                  <span className="block text-[10px] tracking-tight">🔍 FILE COGNITIVE INDEX (RAG)</span>
                  <span className="block font-sans text-[8.5px] font-normal text-slate-500 leading-none mt-0.5">Instant Q&A across deep manual archives / directories</span>
                </div>
                <ArrowRight className={`w-3 h-3 shrink-0 ${selectedGoal === 'rag' ? 'text-emerald-400' : 'text-slate-600'}`} />
              </button>
              <button
                type="button"
                onClick={() => handleGoalSelect('agents')}
                className={`p-3 rounded border text-left transition-all duration-150 cursor-pointer flex justify-between items-center ${
                  selectedGoal === 'agents'
                    ? 'border-emerald-500 bg-emerald-950/25 text-emerald-400 font-bold'
                    : 'border-slate-850 bg-slate-900/30 text-slate-400 hover:border-slate-750 hover:text-slate-200'
                }`}
              >
                <div>
                  <span className="block text-[10px] tracking-tight">🤖 MULTI-AGENT SWARM PIPELINES</span>
                  <span className="block font-sans text-[8.5px] font-normal text-slate-500 leading-none mt-0.5">Host complex orchestrated background reasoning routines</span>
                </div>
                <ArrowRight className={`w-3 h-3 shrink-0 ${selectedGoal === 'agents' ? 'text-emerald-400' : 'text-slate-600'}`} />
              </button>
            </div>
          </div>
        </div>

        {/* <div className="bg-rose-950/15 border border-rose-900/25 p-4 rounded-lg text-slate-350 font-sans text-[11px] leading-relaxed flex gap-3">
          <AlertTriangle className="w-5 h-5 text-rose-500 shrink-0 animate-pulse" />
          <div>
            <span className="font-mono text-[9.5px] font-bold text-rose-400 tracking-wider block uppercase mb-1">// CRITICAL BUYER SHIELD PROTOCOL:</span>
            Do NOT buy multiple CPU-core servers expecting quick inference speeds. LLM read-phases are bound strictly by **Memory Bandwidth**. Prefer Apple Silicon (Unified Memory bus width &gt; 300GB/s) or discrete Nvidia RTX Series GPUs. CPU-only rendering will result in a 5x to 10x speed penalty.
          </div>
        </div> */}
      </div>

      <div className="lg:col-span-7 flex flex-col w-full font-sans">
        <div className="bg-slate-950/60 border border-slate-800/80 rounded-xl p-5 sm:p-6 flex-1 flex flex-col justify-between relative overflow-hidden text-slate-200 font-mono">
          <div className="flex justify-between items-center font-mono text-[10px] text-slate-400 mb-4 border-b border-slate-900 pb-3">
            <span>SOVEREIGN HARDWARE DEPLOYMENT SPECIFICATION</span>
            <span className="text-emerald-400 font-bold animate-pulse">● MODEL GENERATED</span>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 text-left">
            <div className="p-3 bg-slate-900/80 border border-slate-850 rounded">
              <span className="text-[8.5px] text-slate-500 block font-semibold">// RECOMMENDED SILICON TYPE:</span>
              <span className="text-white text-xs font-bold block mt-1 leading-normal font-sans">{spec.machineType}</span>
            </div>

            <div className="p-3 bg-slate-900/80 border border-slate-850 rounded">
              <span className="text-[8.5px] text-slate-500 block font-semibold">// OPTIMAL CAPACITY & MEMORY:</span>
              <span className="text-emerald-400 text-glow text-xs font-bold block mt-1 leading-normal font-sans">{spec.ramType}</span>
            </div>

            <div className="p-3 bg-slate-900/80 border border-slate-850 rounded">
              <span className="text-[8.5px] text-slate-500 block font-semibold">// MINIMUM SYSTEM BUS SPEED:</span>
              <span className="text-white text-xs block mt-1 leading-normal font-sans">{spec.bandWidth}</span>
            </div>

            <div className="p-3 bg-slate-900/80 border border-slate-850 rounded">
              <span className="text-[8.5px] text-slate-500 block font-semibold">// TARGET QUANTIZED MODEL WEIGHTS:</span>
              <span className="text-emerald-400 font-bold text-xs block mt-1 leading-normal font-sans">{spec.modelGoal}</span>
            </div>
          </div>

          <div className="bg-slate-900 border border-slate-850 rounded p-4 mb-4 text-left font-mono">
            <div className="flex items-center gap-1.5 text-emerald-450 text-[10px] font-bold mb-1.5 uppercase">
              <Sparkles className="w-3.5 h-3.5 text-emerald-400" />
              <span>PERFORMANCE CAPABILITY ESTIMATE:</span>
            </div>
            <p className="text-slate-300 text-xs font-sans leading-relaxed">
              {spec.verdict}
            </p>
          </div>

          <div className="bg-slate-950 p-4 rounded-lg border border-slate-850 mb-4 text-left text-xs">
            <span className="text-[9px] text-slate-500 font-bold block uppercase mb-2 font-mono">// SOFTWARE STACK TO DEPLOY:</span>
            <div className="flex gap-2 items-start text-slate-300 bg-slate-900/50 p-2.5 rounded border border-slate-850">
              <Terminal className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
              <div className="font-sans">
                <strong className="text-white block text-[11px] mb-0.5 font-mono">// LAUNCH TOOL COMPANIONS</strong>
                <p className="text-[10px] text-slate-400 leading-relaxed mb-1.5">
                  Download & initialize <span className="text-emerald-400 font-bold">{spec.setupTools}</span>.
                </p>
                <span className="text-[9.5px] text-slate-500 italic block">
                  {spec.purchaseTip}
                </span>
              </div>
            </div>
          </div>

          <div className="bg-slate-900/40 p-3 rounded text-[9px] text-slate-500 flex justify-between items-center border border-slate-900 font-mono">
            <span className="flex items-center gap-1"><span className="text-emerald-500">✔</span> SOURCE SPEC</span>
            <span className="text-slate-700">➔</span>
            <span className="flex items-center gap-1"><span className="text-emerald-500">✔</span> MAP TO GOALS</span>
            <span className="text-slate-700">➔</span>
            <span className="flex items-center gap-1"><span className="text-emerald-500">✔</span> BYPASS CPU TRAP</span>
            <span className="text-slate-700">➔</span>
            <span className="text-emerald-400 font-bold animate-pulse">// REQUISITION READY</span>
          </div>
        </div>
      </div>
    </div>
  );
}